+
{children}
) : null}
diff --git a/src/features/dashboard/sandbox/header/started-at.tsx b/src/features/dashboard/sandbox/header/started-at.tsx
index 2e6614ba1..712a7cb53 100644
--- a/src/features/dashboard/sandbox/header/started-at.tsx
+++ b/src/features/dashboard/sandbox/header/started-at.tsx
@@ -1,41 +1,21 @@
'use client'
+import { Timestamp } from '@/features/dashboard/shared'
import CopyButton from '@/ui/copy-button'
import { useSandboxContext } from '../context'
-export default function StartedAt() {
+const StartedAt = () => {
const { sandboxLifecycle } = useSandboxContext()
const startedAt = sandboxLifecycle?.createdAt
- if (!startedAt) {
- return null
- }
-
- const date = new Date(startedAt)
- const now = new Date()
- const isToday = date.toDateString() === now.toDateString()
- const isYesterday =
- date.toDateString() ===
- new Date(now.setDate(now.getDate() - 1)).toDateString()
-
- const prefix = isToday
- ? 'Today'
- : isYesterday
- ? 'Yesterday'
- : date.toLocaleDateString()
-
- const timeStr = date.toLocaleTimeString([], {
- hour: 'numeric',
- minute: '2-digit',
- second: '2-digit',
- })
+ if (!startedAt) return null
return (
-
- {prefix}, {timeStr}
-
-
+
+
)
}
+
+export default StartedAt
diff --git a/src/features/dashboard/sandbox/monitoring/components/monitoring-sandbox-metrics-chart.tsx b/src/features/dashboard/sandbox/monitoring/components/monitoring-sandbox-metrics-chart.tsx
index 2cdd149f4..b6392a9bd 100644
--- a/src/features/dashboard/sandbox/monitoring/components/monitoring-sandbox-metrics-chart.tsx
+++ b/src/features/dashboard/sandbox/monitoring/components/monitoring-sandbox-metrics-chart.tsx
@@ -11,6 +11,7 @@ import {
BrushComponent,
GridComponent,
MarkPointComponent,
+ ToolboxComponent,
} from 'echarts/components'
import * as echarts from 'echarts/core'
import { SVGRenderer } from 'echarts/renderers'
@@ -46,6 +47,7 @@ echarts.use([
GridComponent,
BrushComponent,
MarkPointComponent,
+ ToolboxComponent,
SVGRenderer,
AxisPointerComponent,
])
diff --git a/src/features/dashboard/sandboxes/monitoring/charts/team-metrics-chart/index.tsx b/src/features/dashboard/sandboxes/monitoring/charts/team-metrics-chart/index.tsx
index d0ac1cbd5..2af4f9757 100644
--- a/src/features/dashboard/sandboxes/monitoring/charts/team-metrics-chart/index.tsx
+++ b/src/features/dashboard/sandboxes/monitoring/charts/team-metrics-chart/index.tsx
@@ -12,6 +12,7 @@ import {
GridComponent,
MarkLineComponent,
MarkPointComponent,
+ ToolboxComponent,
TooltipComponent,
} from 'echarts/components'
import * as echarts from 'echarts/core'
@@ -42,6 +43,7 @@ echarts.use([
MarkPointComponent,
MarkLineComponent,
AxisPointerComponent,
+ ToolboxComponent,
CanvasRenderer,
])
diff --git a/src/features/dashboard/settings/webhooks/detail/chart-utils.ts b/src/features/dashboard/settings/webhooks/detail/chart-utils.ts
new file mode 100644
index 000000000..cea94cd5d
--- /dev/null
+++ b/src/features/dashboard/settings/webhooks/detail/chart-utils.ts
@@ -0,0 +1,98 @@
+import type { TRPCRouterOutputs } from '@/trpc/client'
+import type { StatsChartPoint } from './stats-chart'
+import type { WebhookStatsRangeBounds } from './stats-range'
+
+type WebhookDeliveryStats =
+ TRPCRouterOutputs['webhooks']['getDeliveryStats']['stats']
+
+type WebhookDeliveryStatsBucket = WebhookDeliveryStats['buckets'][number]
+type DeliveryCountMetric = 'failed' | 'total'
+type ResponseTimeMetric = 'avg' | 'max' | 'min'
+
+const getBucketTimestampRange = (
+ rangeBounds: WebhookStatsRangeBounds,
+ bucketIntervalSeconds: number
+) => {
+ const intervalMs = bucketIntervalSeconds * 1000
+ const start = Math.ceil(rangeBounds.start / intervalMs) * intervalMs
+ const end = Math.floor(rangeBounds.end / intervalMs) * intervalMs
+
+ return { end, intervalMs, start }
+}
+
+// Builds delivery count points from API buckets, e.g. 10m buckets -> chart points with missing buckets filled as 0.
+const getDeliveryCountSeriesData = (
+ buckets: WebhookDeliveryStatsBucket[],
+ rangeBounds: WebhookStatsRangeBounds,
+ bucketIntervalSeconds: number,
+ metric: DeliveryCountMetric = 'total'
+) => {
+ const countByTimestamp = new Map
()
+
+ for (const bucket of buckets) {
+ const count = metric === 'failed' ? bucket.failed : bucket.total
+ const timestampMs = new Date(bucket.timestamp).getTime()
+ countByTimestamp.set(timestampMs, count)
+ }
+
+ const points: StatsChartPoint[] = []
+ const { end, intervalMs, start } = getBucketTimestampRange(
+ rangeBounds,
+ bucketIntervalSeconds
+ )
+
+ for (let timestampMs = start; timestampMs <= end; timestampMs += intervalMs) {
+ const value = countByTimestamp.get(timestampMs) ?? 0
+
+ points.push({
+ synthetic: value === 0,
+ timestamp: new Date(timestampMs).toISOString(),
+ value,
+ })
+ }
+
+ return points
+}
+
+// Builds response-time points from API buckets, e.g. a bucket average -> one chart point.
+const getResponseTimeSeriesData = (
+ buckets: WebhookDeliveryStatsBucket[],
+ rangeBounds: WebhookStatsRangeBounds,
+ bucketIntervalSeconds: number,
+ metric: ResponseTimeMetric
+) => {
+ const valueByTimestamp = new Map()
+
+ for (const bucket of buckets) {
+ if (bucket.total <= 0) continue
+
+ const value =
+ metric === 'avg'
+ ? bucket.durationMs.average
+ : metric === 'max'
+ ? bucket.durationMs.maximum
+ : bucket.durationMs.minimum
+
+ valueByTimestamp.set(new Date(bucket.timestamp).getTime(), value)
+ }
+
+ const points: StatsChartPoint[] = []
+ const { end, intervalMs, start } = getBucketTimestampRange(
+ rangeBounds,
+ bucketIntervalSeconds
+ )
+
+ for (let timestampMs = start; timestampMs <= end; timestampMs += intervalMs) {
+ const value = valueByTimestamp.get(timestampMs) ?? 0
+
+ points.push({
+ synthetic: value === 0,
+ timestamp: new Date(timestampMs).toISOString(),
+ value,
+ })
+ }
+
+ return points
+}
+
+export { getDeliveryCountSeriesData, getResponseTimeSeriesData }
diff --git a/src/features/dashboard/settings/webhooks/detail/deliveries-content.tsx b/src/features/dashboard/settings/webhooks/detail/deliveries-content.tsx
new file mode 100644
index 000000000..3af04f47a
--- /dev/null
+++ b/src/features/dashboard/settings/webhooks/detail/deliveries-content.tsx
@@ -0,0 +1,583 @@
+'use client'
+
+import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query'
+import {
+ useVirtualizer,
+ type VirtualItem,
+ type Virtualizer,
+} from '@tanstack/react-virtual'
+import { useQueryStates } from 'nuqs'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { z } from 'zod'
+import { SandboxLifecycleEventTypeSchema } from '@/core/modules/sandboxes/lifecycle-event-types'
+import {
+ VirtualizedTableLoaderBody,
+ VirtualizedTableRow,
+} from '@/features/dashboard/common/virtualized-table-ui'
+import {
+ EventTypeBadge,
+ EventTypeFilter,
+ eventTypeFilterParams,
+ IdBadge,
+} from '@/features/dashboard/shared'
+import { defaultSuccessToast, toast } from '@/lib/hooks/use-toast'
+import { cn } from '@/lib/utils'
+import { type TRPCRouterOutputs, useTRPC } from '@/trpc/client'
+import { JsonPopover } from '@/ui/json-popover'
+import { Badge } from '@/ui/primitives/badge'
+import { Button } from '@/ui/primitives/button'
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/ui/primitives/dropdown-menu'
+import { WebhookIcon } from '@/ui/primitives/icons'
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableEmptyState,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from '@/ui/primitives/table'
+import {
+ deliveryFilterParams,
+ WEBHOOK_DELIVERY_STATUSES,
+ type WebhookDeliveryStatus,
+} from './delivery-filter-params'
+
+type WebhookDeliveriesContentProps = {
+ teamSlug: string
+ webhookId: string
+}
+
+type WebhookDeliveryGroup =
+ TRPCRouterOutputs['webhooks']['listDeliveries']['groups'][number]
+
+const JsonValueSchema = z.unknown()
+const ROW_HEIGHT_PX = 32
+const VIRTUAL_OVERSCAN = 16
+const SCROLL_LOAD_THRESHOLD_PX = 240
+
+const deliveryTableHeadClassName =
+ 'flex h-8 items-center whitespace-nowrap p-0 pr-12 [&>span]:whitespace-nowrap'
+const deliveryTableCellClassName = 'flex h-8 items-center p-0 pr-12'
+const deliveryDetailPopoverClassName =
+ 'min-w-0 max-w-[180px] normal-case text-fg-tertiary hover:text-fg hover:underline'
+
+const deliveryStatusVariantMap: Record<
+ WebhookDeliveryStatus,
+ React.ComponentProps['variant']
+> = {
+ failed: 'error',
+ success: 'positive',
+}
+
+const formatDateTime = (value: string) =>
+ new Date(value).toLocaleString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ hour: 'numeric',
+ minute: '2-digit',
+ })
+
+const formatHttpStatus = (status: number | null | undefined) =>
+ status === null || status === undefined ? 'No response' : String(status)
+
+// Parses a JSON string safely, e.g. '{"ok":true}' -> { ok: true }.
+const parseMaybeJson = (value: string | null | undefined) => {
+ if (!value) return undefined
+
+ try {
+ const parsedValue: unknown = JSON.parse(value)
+ const result = JsonValueSchema.safeParse(parsedValue)
+
+ return result.success ? result.data : value
+ } catch {
+ return value
+ }
+}
+
+const DeliveryStatusBadge = ({ status }: { status: WebhookDeliveryStatus }) => (
+ {status}
+)
+
+const getDeliveryStatusTriggerLabel = (statuses: WebhookDeliveryStatus[]) => {
+ if (statuses.length === WEBHOOK_DELIVERY_STATUSES.length) return 'All'
+ if (statuses.length === 0) return 'None'
+ const [first] = statuses
+ if (statuses.length === 1 && first)
+ return first.charAt(0).toUpperCase() + first.slice(1)
+
+ return `${statuses.length}/${WEBHOOK_DELIVERY_STATUSES.length}`
+}
+
+const DeliveryStatusFilter = ({
+ statuses,
+ onStatusesChange,
+}: {
+ statuses: WebhookDeliveryStatus[]
+ onStatusesChange: (statuses: WebhookDeliveryStatus[]) => void
+}) => {
+ const isAllSelected = statuses.length === WEBHOOK_DELIVERY_STATUSES.length
+
+ const toggleStatus = (status: WebhookDeliveryStatus) => {
+ const next = statuses.includes(status)
+ ? statuses.filter((item) => item !== status)
+ : [...statuses, status]
+ onStatusesChange(next)
+ }
+
+ const toggleAll = (checked: boolean) => {
+ onStatusesChange(checked ? [...WEBHOOK_DELIVERY_STATUSES] : [])
+ }
+
+ return (
+
+
+
+
+
+ event.preventDefault()}
+ >
+ All statuses
+
+
+ {WEBHOOK_DELIVERY_STATUSES.map((status) => (
+ toggleStatus(status)}
+ onSelect={(event) => event.preventDefault()}
+ >
+
+
+ ))}
+
+
+ )
+}
+
+const DeliveryDetailCell = ({
+ value,
+}: {
+ value: string | null | undefined
+}) => {
+ const parsedValue = useMemo(() => parseMaybeJson(value), [value])
+
+ if (parsedValue === undefined) {
+ return n/a
+ }
+
+ if (typeof parsedValue === 'string') {
+ return (
+
+ {parsedValue}
+
+ )
+ }
+
+ return (
+
+ {value}
+
+ )
+}
+
+interface WebhookDeliveriesTableProps {
+ groups: WebhookDeliveryGroup[]
+ isLoading: boolean
+ emptyStateLabel: string
+ scrollContainer: HTMLDivElement | null
+ hasNextPage: boolean
+ isFetchingNextPage: boolean
+ onLoadMore: () => void
+}
+
+const WebhookDeliveriesTable = ({
+ groups,
+ isLoading,
+ emptyStateLabel,
+ scrollContainer,
+ hasNextPage,
+ isFetchingNextPage,
+ onLoadMore,
+}: WebhookDeliveriesTableProps) => {
+ 'use no memo'
+
+ return (
+
+
+
+
+ Event
+
+
+ Sandbox ID
+
+
+ Status
+
+
+ Last attempt
+
+
+ Attempts
+
+
+ Duration
+
+
+ Request headers
+
+
+ Request body
+
+
+ Response HTTP
+
+
+ Response headers
+
+
+ Response body
+
+
+
+
+ {isLoading ? (
+
+ ) : groups.length === 0 ? (
+
+
+
+ {emptyStateLabel}
+
+
+ ) : scrollContainer ? (
+
+ ) : null}
+
+ )
+}
+
+interface VirtualizedDeliveriesBodyProps {
+ groups: WebhookDeliveryGroup[]
+ scrollContainer: HTMLDivElement | null
+ hasNextPage: boolean
+ isFetchingNextPage: boolean
+ onLoadMore: () => void
+}
+
+const VirtualizedDeliveriesBody = ({
+ groups,
+ scrollContainer,
+ hasNextPage,
+ isFetchingNextPage,
+ onLoadMore,
+}: VirtualizedDeliveriesBodyProps) => {
+ 'use no memo'
+
+ const initialRect = useMemo(() => {
+ if (!scrollContainer) return undefined
+
+ return {
+ height: scrollContainer.clientHeight,
+ width: scrollContainer.clientWidth,
+ }
+ }, [scrollContainer])
+
+ useScrollLoadMore({
+ scrollContainer,
+ hasNextPage,
+ isFetchingNextPage,
+ onLoadMore,
+ })
+
+ const virtualizer = useVirtualizer({
+ count: groups.length,
+ estimateSize: () => ROW_HEIGHT_PX,
+ getScrollElement: () => scrollContainer,
+ initialRect,
+ overscan: VIRTUAL_OVERSCAN,
+ paddingStart: 8,
+ })
+
+ return (
+
+ {virtualizer.getVirtualItems().map((virtualRow) => {
+ const group = groups[virtualRow.index]
+ if (!group) return null
+
+ return (
+
+ )
+ })}
+
+ )
+}
+
+interface WebhookDeliveryRowProps {
+ group: WebhookDeliveryGroup
+ virtualRow: VirtualItem
+ virtualizer: Virtualizer
+}
+
+const WebhookDeliveryRow = ({
+ group,
+ virtualRow,
+ virtualizer,
+}: WebhookDeliveryRowProps) => {
+ const attempt = group.latestAttempt
+
+ return (
+
+
+
+
+
+
+
+ toast(defaultSuccessToast('Sandbox ID copied'))}
+ />
+
+
+ {attempt ? : '-'}
+
+
+ {attempt ? formatDateTime(attempt.timestamp) : '-'}
+
+
+ {group.attemptCount}
+
+
+ {attempt ? `${attempt.durationMs.toLocaleString()}ms` : '-'}
+
+
+
+
+
+
+
+
+ {attempt ? formatHttpStatus(attempt.responseHttpStatusCode) : '-'}
+
+
+
+
+
+
+
+
+ )
+}
+
+interface UseScrollLoadMoreParams {
+ scrollContainer: HTMLDivElement | null
+ hasNextPage: boolean
+ isFetchingNextPage: boolean
+ onLoadMore: () => void
+}
+
+const useScrollLoadMore = ({
+ scrollContainer,
+ hasNextPage,
+ isFetchingNextPage,
+ onLoadMore,
+}: UseScrollLoadMoreParams) => {
+ useEffect(() => {
+ if (!scrollContainer) return
+
+ const handleScroll = () => {
+ const distanceToBottom =
+ scrollContainer.scrollHeight -
+ scrollContainer.scrollTop -
+ scrollContainer.clientHeight
+
+ if (
+ distanceToBottom < SCROLL_LOAD_THRESHOLD_PX &&
+ hasNextPage &&
+ !isFetchingNextPage
+ ) {
+ onLoadMore()
+ }
+ }
+
+ const frame = requestAnimationFrame(handleScroll)
+ scrollContainer.addEventListener('scroll', handleScroll, {
+ passive: true,
+ })
+
+ return () => {
+ cancelAnimationFrame(frame)
+ scrollContainer.removeEventListener('scroll', handleScroll)
+ }
+ }, [scrollContainer, hasNextPage, isFetchingNextPage, onLoadMore])
+}
+
+export const WebhookDeliveriesContent = ({
+ teamSlug,
+ webhookId,
+}: WebhookDeliveriesContentProps) => {
+ const [scrollContainer, setScrollContainer] = useState(
+ null
+ )
+ const [filters, setFilters] = useQueryStates(
+ {
+ ...deliveryFilterParams,
+ ...eventTypeFilterParams,
+ },
+ { shallow: true }
+ )
+ const trpc = useTRPC()
+ const deliveryStatuses = useMemo(
+ () => filters.statuses ?? [...WEBHOOK_DELIVERY_STATUSES],
+ [filters.statuses]
+ )
+ const hasSelectedDeliveryStatuses = deliveryStatuses.length > 0
+ const hasAllDeliveryStatuses =
+ deliveryStatuses.length === WEBHOOK_DELIVERY_STATUSES.length
+ const deliveryStatusFilter = hasAllDeliveryStatuses
+ ? undefined
+ : deliveryStatuses
+ const handleDeliveryStatusesChange = useCallback(
+ (nextStatuses: WebhookDeliveryStatus[]) => {
+ const nextHasAllStatuses =
+ nextStatuses.length === WEBHOOK_DELIVERY_STATUSES.length
+
+ setFilters({
+ statuses: nextHasAllStatuses ? null : nextStatuses,
+ })
+ },
+ [setFilters]
+ )
+ const eventTypes = useMemo(
+ () => filters.types ?? [...SandboxLifecycleEventTypeSchema.options],
+ [filters.types]
+ )
+ const hasSelectedEventTypes = eventTypes.length > 0
+ const hasAllEventTypes =
+ eventTypes.length === SandboxLifecycleEventTypeSchema.options.length
+ const eventTypeFilter = hasAllEventTypes ? undefined : eventTypes
+ const handleEventTypesChange = useCallback(
+ (nextEventTypes: typeof eventTypes) => {
+ const nextHasAllEventTypes =
+ nextEventTypes.length === SandboxLifecycleEventTypeSchema.options.length
+
+ setFilters({
+ types: nextHasAllEventTypes ? null : nextEventTypes,
+ })
+ },
+ [setFilters]
+ )
+ const deliveriesQuery = useInfiniteQuery(
+ trpc.webhooks.listDeliveries.infiniteQueryOptions(
+ {
+ teamSlug,
+ webhookId,
+ limit: 25,
+ deliveryStatus: deliveryStatusFilter,
+ eventType: eventTypeFilter,
+ },
+ {
+ enabled: hasSelectedEventTypes && hasSelectedDeliveryStatuses,
+ getNextPageParam: (page) => page.nextCursor ?? undefined,
+ placeholderData: keepPreviousData,
+ }
+ )
+ )
+ const groups = useMemo(() => {
+ return hasSelectedEventTypes && hasSelectedDeliveryStatuses
+ ? (deliveriesQuery.data?.pages.flatMap((page) => page.groups) ?? [])
+ : []
+ }, [deliveriesQuery.data, hasSelectedDeliveryStatuses, hasSelectedEventTypes])
+ const hasActiveFilters = !hasAllDeliveryStatuses || !hasAllEventTypes
+ const isDeliveriesLoading =
+ hasSelectedEventTypes &&
+ hasSelectedDeliveryStatuses &&
+ deliveriesQuery.isLoading
+
+ const emptyStateLabel = !hasSelectedDeliveryStatuses
+ ? 'No statuses selected'
+ : !hasSelectedEventTypes
+ ? 'No events selected'
+ : hasActiveFilters
+ ? 'No deliveries match these filters'
+ : 'No deliveries yet'
+ const handleLoadMore = useCallback(() => {
+ if (!deliveriesQuery.hasNextPage || deliveriesQuery.isFetchingNextPage)
+ return
+
+ deliveriesQuery.fetchNextPage()
+ }, [deliveriesQuery])
+
+ return (
+
+ )
+}
diff --git a/src/features/dashboard/settings/webhooks/detail/delivery-filter-params.ts b/src/features/dashboard/settings/webhooks/detail/delivery-filter-params.ts
new file mode 100644
index 000000000..a017545de
--- /dev/null
+++ b/src/features/dashboard/settings/webhooks/detail/delivery-filter-params.ts
@@ -0,0 +1,27 @@
+import { createParser, parseAsArrayOf } from 'nuqs/server'
+
+const WEBHOOK_DELIVERY_STATUSES = ['success', 'failed'] as const
+
+type WebhookDeliveryStatus = (typeof WEBHOOK_DELIVERY_STATUSES)[number]
+
+// Maps URL value to delivery status, e.g. "failed" -> "failed".
+const deliveryStatusParser = createParser({
+ parse: (value) => {
+ const matchedStatus = WEBHOOK_DELIVERY_STATUSES.find(
+ (status) => status === value
+ )
+
+ return matchedStatus ?? null
+ },
+ serialize: (value: WebhookDeliveryStatus) => value,
+})
+
+const deliveryFilterParams = {
+ statuses: parseAsArrayOf(deliveryStatusParser),
+}
+
+export {
+ deliveryFilterParams,
+ WEBHOOK_DELIVERY_STATUSES,
+ type WebhookDeliveryStatus,
+}
diff --git a/src/features/dashboard/settings/webhooks/detail/fallbacks.tsx b/src/features/dashboard/settings/webhooks/detail/fallbacks.tsx
new file mode 100644
index 000000000..da5f2b774
--- /dev/null
+++ b/src/features/dashboard/settings/webhooks/detail/fallbacks.tsx
@@ -0,0 +1,49 @@
+import { Skeleton } from '@/ui/primitives/skeleton'
+
+const headerItemSkeletonClassNames = [
+ 'h-4 w-20',
+ 'h-4 w-64',
+ 'h-4 w-14',
+ 'h-4 w-36',
+ 'h-4 w-36',
+]
+
+export const WebhookDetailHeaderFallback = () => (
+
+)
+
+export const WebhookDetailContentFallback = () => (
+
+
+
+
+
+
+ {Array.from({ length: 4 }).map((_, index) => (
+
+ ))}
+
+
+
+ {Array.from({ length: 2 }).map((_, index) => (
+
+ ))}
+
+
+
+ {webhook.url}
+
+
toast(defaultSuccessToast('Webhook URL copied'))}
+ value={webhook.url}
+ />
+
+
+
+
+
+
+
+ toast(defaultSuccessToast('Timestamp copied'))}
+ value={webhook.createdAt}
+ />
+
+
+
+ {latestAttempt ? (
+
+
+ toast(defaultSuccessToast('Timestamp copied'))}
+ value={latestAttempt.timestamp}
+ />
+
+ ) : (
+ -
+ )}
+
+
+
+ )
+}
diff --git a/src/features/dashboard/settings/webhooks/detail/index.ts b/src/features/dashboard/settings/webhooks/detail/index.ts
new file mode 100644
index 000000000..c8b5997ac
--- /dev/null
+++ b/src/features/dashboard/settings/webhooks/detail/index.ts
@@ -0,0 +1,3 @@
+export { WebhookDeliveriesContent } from './deliveries-content'
+export { WebhookDetailLayout } from './layout'
+export { WebhookOverviewContent } from './overview-content'
diff --git a/src/features/dashboard/settings/webhooks/detail/layout.tsx b/src/features/dashboard/settings/webhooks/detail/layout.tsx
new file mode 100644
index 000000000..ff92caf09
--- /dev/null
+++ b/src/features/dashboard/settings/webhooks/detail/layout.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import { Suspense } from 'react'
+import { PROTECTED_URLS } from '@/configs/urls'
+import { DashboardTabsList } from '@/ui/dashboard-tabs'
+import { ListIcon, TrendIcon } from '@/ui/primitives/icons'
+import {
+ WebhookDetailContentFallback,
+ WebhookDetailHeaderFallback,
+} from './fallbacks'
+import { WebhookDetailHeader } from './header'
+
+type WebhookDetailLayoutProps = {
+ children: React.ReactNode
+ teamSlug: string
+ webhookId: string
+}
+
+export const WebhookDetailLayout = ({
+ children,
+ teamSlug,
+ webhookId,
+}: WebhookDetailLayoutProps) => (
+
+ }>
+
+
+ ,
+ },
+ {
+ id: 'deliveries',
+ label: 'Events',
+ href: PROTECTED_URLS.WEBHOOK_DELIVERIES(teamSlug, webhookId),
+ icon: ,
+ },
+ ]}
+ />
+ }>{children}
+
+)
diff --git a/src/features/dashboard/settings/webhooks/detail/overview-content.tsx b/src/features/dashboard/settings/webhooks/detail/overview-content.tsx
new file mode 100644
index 000000000..c59aaf597
--- /dev/null
+++ b/src/features/dashboard/settings/webhooks/detail/overview-content.tsx
@@ -0,0 +1,402 @@
+'use client'
+
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { useQueryStates } from 'nuqs'
+import type { ReactNode } from 'react'
+import { useMemo } from 'react'
+import { useTRPC } from '@/trpc/client'
+import {
+ getDeliveryCountSeriesData,
+ getResponseTimeSeriesData,
+} from './chart-utils'
+import { StatsChart, type StatsChartSeries } from './stats-chart'
+import { StatsIntervalSelect } from './stats-interval-select'
+import {
+ getValidWebhookStatsBounds,
+ getWebhookStatsApiBounds,
+ getWebhookStatsBucketIntervalSeconds,
+ getWebhookStatsRange,
+ getWebhookStatsRangeFromBounds,
+ type WebhookStatsRange,
+ type WebhookStatsRangeBounds,
+ webhookStatsTimeframeParams,
+} from './stats-range'
+
+type WebhookOverviewContentProps = {
+ teamSlug: string
+ webhookId: string
+ initialRangeBounds: WebhookStatsRangeBounds
+}
+
+type MetricPanelProps = {
+ label: string
+ value: string
+ description: string
+}
+
+type ChartPanelProps = {
+ children: ReactNode
+ legendItems: ChartLegendItem[]
+ title: string
+}
+
+type ChartLegendItem = {
+ label: string
+ indicatorClassName: string
+}
+
+const MetricPanel = ({ label, value, description }: MetricPanelProps) => (
+
+ {label}
+
+ {value}
+
+ {description}
+
+)
+
+const ChartLegend = ({ items }: { items: ChartLegendItem[] }) => (
+
+ {items.map((item) => (
+
+
+ {item.label}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `${value.toLocaleString('en-US', {
+ minimumFractionDigits: 1,
+ maximumFractionDigits: 1,
+ })}ms`
+ }
+ yAxisValueFormatter={(value) =>
+ `${Math.round(value).toLocaleString()}ms`
+ }
+ />
+
+
+
+
+ {crosshairMarkers.length > 0 || xAxisHoverBadge ? (
+
+ {crosshairMarkers.map((marker) => (
+
+
+
+
+
+
+ {marker.valueContent}
+
+
+
+ ))}
+ {xAxisHoverBadge ? (
+
+ {xAxisHoverBadge.label}
+
+ ) : null}
+
+ ) : null}
+
+ {SandboxLifecycleEventTypeSchema.options.map((event, index) => (
+
+ {index > 0 && (
+
+ ·
+
+ )}
+ {WEBHOOK_EVENT_LABELS[event]}
+
+ ))}
+
+
+
+ )
+ }
+
+ return events.map((event) => (
+ {getWebhookEventLabel(event)}
+ ))
+}
diff --git a/src/features/dashboard/settings/webhooks/table-row.tsx b/src/features/dashboard/settings/webhooks/table-row.tsx
index 8779ce4c8..9e6e4421c 100644
--- a/src/features/dashboard/settings/webhooks/table-row.tsx
+++ b/src/features/dashboard/settings/webhooks/table-row.tsx
@@ -1,6 +1,8 @@
'use client'
+import { useRouter } from 'next/navigation'
import { Fragment, useState } from 'react'
+import { PROTECTED_URLS } from '@/configs/urls'
import { SandboxLifecycleEventTypeSchema } from '@/core/modules/sandboxes/lifecycle-event-types'
import { useClipboard } from '@/lib/hooks/use-clipboard'
import { defaultSuccessToast, toast } from '@/lib/hooks/use-toast'
@@ -30,6 +32,7 @@ import {
TooltipContent,
TooltipTrigger,
} from '@/ui/primitives/tooltip'
+import { RowHoverFrame } from '@/ui/row-hover-frame'
import { useDashboard } from '../../context'
import { UserAvatar } from '../../shared'
import { WEBHOOK_EVENT_LABELS } from './constants'
@@ -85,7 +88,12 @@ const WebhookNameAndUrl = ({ name, url }: WebhookNameAndUrlProps) => {
-
{name}
+
+ {name}
+
@@ -102,7 +110,7 @@ const WebhookNameAndUrl = ({ name, url }: WebhookNameAndUrlProps) => {
)
}
-const rowCellClassName = 'p-0 py-1.5 align-middle [tr:first-child>&]:pt-0'
+const rowCellClassName = 'p-0 py-1.5 align-middle'
const rowContentClassName = 'flex items-center'
const actionIconClassName = 'size-4 text-fg-tertiary'
@@ -157,7 +165,10 @@ const WebhookRowActions = ({ webhook }: WebhookRowActionsProps) => {
return (
-
+ e.stopPropagation()}
+ >
@@ -187,6 +198,7 @@ const WebhookRowActions = ({ webhook }: WebhookRowActionsProps) => {
export const WebhookTableRow = ({ webhook }: WebhookRowProps) => {
const { team } = useDashboard()
+ const router = useRouter()
const createdAt = webhook.createdAt
? new Date(webhook.createdAt).toLocaleDateString('en-US', {
@@ -196,9 +208,30 @@ export const WebhookTableRow = ({ webhook }: WebhookRowProps) => {
})
: '-'
+ const webhookHref = PROTECTED_URLS.WEBHOOK(team.slug, webhook.id)
+ const handleRowClick = (event: React.MouseEvent) => {
+ if (!(event.target instanceof Node)) return
+ if (!event.currentTarget.contains(event.target)) return
+
+ router.push(webhookHref)
+ }
+
return (
-
+
+
@@ -208,9 +241,9 @@ export const WebhookTableRow = ({ webhook }: WebhookRowProps) => {