+
{children}
) : null}
diff --git a/src/features/dashboard/layouts/header.tsx b/src/features/dashboard/layouts/header.tsx
index e1a780ee7..e8c2accd8 100644
--- a/src/features/dashboard/layouts/header.tsx
+++ b/src/features/dashboard/layouts/header.tsx
@@ -1,10 +1,13 @@
'use client'
+import { useSuspenseQuery } from '@tanstack/react-query'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Fragment } from 'react'
import { getDashboardLayoutConfig, type TitleSegment } from '@/configs/layout'
+import { PROTECTED_URLS } from '@/configs/urls'
import { cn } from '@/lib/utils'
+import { useTRPC } from '@/trpc/client'
import ClientOnly from '@/ui/client-only'
import CopyButton from '@/ui/copy-button'
import { SidebarTrigger } from '@/ui/primitives/sidebar'
@@ -22,6 +25,7 @@ export default function DashboardLayoutHeader({
const pathname = usePathname()
const config = getDashboardLayoutConfig(pathname)
const copyableValue = config.copyValue ?? null
+ const webhookRoute = getWebhookRoute(pathname)
return (
-
+ {webhookRoute ? (
+
+ ) : (
+
+ )}
{copyableValue && (
{
+ const parts = pathname.split('/')
+ const teamSlug = parts[2]
+ const resource = parts[3]
+ const webhookId = parts[4]
+
+ if (resource !== 'webhooks' || !teamSlug || !webhookId) return null
+ return { teamSlug, webhookId }
+}
+
+function WebhookHeaderTitle({
+ teamSlug,
+ webhookId,
+}: {
+ teamSlug: string
+ webhookId: string
+}) {
+ const trpc = useTRPC()
+ const { data } = useSuspenseQuery(
+ trpc.webhooks.get.queryOptions({ teamSlug, webhookId })
+ )
+
+ return (
+
+
+ Webhooks
+
+ /
+ {data.webhook.name}
+
+ )
+}
+
function HeaderTitle({ title }: { title: string | TitleSegment[] }) {
if (typeof title === 'string') {
return title
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}
-
-
+
+
+
+
+
+ Event
+
+
+ Sandbox ID
+
+
+ Status
+
+
+ Last attempt
+
+
+ Attempts
+
+
+ Duration
+
+
+ Request headers
+
+
+ Request body
+
+
+ Response HTTP
+
+
+ Response headers
+
+
+ Response body
+
+
+
+
+ {isLoading ? (
+
+ ) : groups.length === 0 ? (
+
+
+
+ {emptyStateLabel}
+
+
+ ) : (
+
+ )}
+
+ )
+}
+
+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(
+ () =>
+ 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 event types 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/header.tsx b/src/features/dashboard/settings/webhooks/detail/header.tsx
new file mode 100644
index 000000000..2f9d4159c
--- /dev/null
+++ b/src/features/dashboard/settings/webhooks/detail/header.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { WebhookEventBadges } from '@/features/dashboard/settings/webhooks/event-badges'
+import { Timestamp } from '@/features/dashboard/shared'
+import { defaultSuccessToast, toast } from '@/lib/hooks/use-toast'
+import { useTRPC } from '@/trpc/client'
+import CopyButton from '@/ui/copy-button'
+import { DetailsItem, DetailsRow } from '../../../layouts/details-row'
+
+type WebhookDetailHeaderProps = {
+ teamSlug: string
+ webhookId: string
+}
+
+export const WebhookDetailHeader = ({
+ teamSlug,
+ webhookId,
+}: WebhookDetailHeaderProps) => {
+ const trpc = useTRPC()
+ const { data } = useSuspenseQuery(
+ trpc.webhooks.get.queryOptions({ teamSlug, webhookId })
+ )
+ const latestDeliveryQuery = useSuspenseQuery(
+ trpc.webhooks.listDeliveries.queryOptions({
+ teamSlug,
+ webhookId,
+ limit: 1,
+ })
+ )
+ const { webhook } = data
+ const latestAttempt =
+ latestDeliveryQuery.data?.groups[0]?.latestAttempt ?? null
+
+ return (
+
+
+
+
+
+ {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..16a8f4de6
--- /dev/null
+++ b/src/features/dashboard/settings/webhooks/detail/layout.tsx
@@ -0,0 +1,41 @@
+'use client'
+
+import { PROTECTED_URLS } from '@/configs/urls'
+import { DashboardTabsList } from '@/ui/dashboard-tabs'
+import { ListIcon, TrendIcon } from '@/ui/primitives/icons'
+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..4644cff9a
--- /dev/null
+++ b/src/features/dashboard/settings/webhooks/detail/overview-content.tsx
@@ -0,0 +1,486 @@
+'use client'
+
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { useQueryStates } from 'nuqs'
+import type { ReactNode } from 'react'
+import { useMemo } from 'react'
+import { type TRPCRouterOutputs, useTRPC } from '@/trpc/client'
+import { WebhookRangeSelector } from './range-selector'
+import {
+ getValidWebhookStatsBounds,
+ getWebhookStatsApiBounds,
+ getWebhookStatsRange,
+ getWebhookStatsRangeFromBounds,
+ type WebhookStatsRange,
+ type WebhookStatsRangeBounds,
+ webhookStatsTimeframeParams,
+} from './stats-range'
+import {
+ WebhookStatsChart,
+ type WebhookStatsChartPoint,
+ type WebhookStatsChartSeries,
+} from './webhook-stats-chart'
+
+type WebhookOverviewContentProps = {
+ teamSlug: string
+ webhookId: string
+ initialRangeBounds: WebhookStatsRangeBounds
+}
+
+type MetricPanelProps = {
+ label: string
+ value: string
+ description: string
+}
+
+type ChartPanelProps = {
+ children: ReactNode
+ title: string
+}
+
+type WebhookDeliveryStats =
+ TRPCRouterOutputs['webhooks']['getDeliveryStats']['stats']
+
+type ResponseTimeTimestampStats = {
+ count: number
+ maxDurationMs: number
+ minDurationMs: number
+ timestampMs: number
+ totalDurationMs: number
+}
+
+type WebhookStatsGrouping = 'day' | 'timestamp'
+type WebhookDeliveryStatsBucket = WebhookDeliveryStats['buckets'][number]
+type WebhookDeliveryStatus = 'failed'
+
+const DAY_MS = 24 * 60 * 60 * 1000
+const MINUTE_MS = 60 * 1000
+
+const MetricPanel = ({ label, value, description }: MetricPanelProps) => (
+
+ {label}
+
+ {value}
+
+ {description}
+
+)
+
+const ChartPanel = ({ children, title }: ChartPanelProps) => (
+
+)
+
+const getStartOfDay = (timestampMs: number) => {
+ const date = new Date(timestampMs)
+ date.setHours(0, 0, 0, 0)
+
+ return date.getTime()
+}
+
+const getSeriesTimestamp = (
+ timestamp: string,
+ grouping: WebhookStatsGrouping
+) => {
+ const timestampMs = new Date(timestamp).getTime()
+ if (grouping === 'day') return getStartOfDay(timestampMs)
+
+ return timestampMs
+}
+
+// Groups delivery buckets by chart granularity, e.g. minute buckets from one day -> one daily count.
+const getDeliveryCountSeriesData = (
+ buckets: WebhookDeliveryStatsBucket[],
+ rangeBounds: WebhookStatsRangeBounds,
+ grouping: WebhookStatsGrouping,
+ status?: WebhookDeliveryStatus
+) => {
+ const countByTimestamp = new Map<
+ number,
+ { count: number; timestampMs: number }
+ >()
+
+ for (const bucket of buckets) {
+ const count = status === 'failed' ? bucket.failed : bucket.total
+ if (count <= 0) continue
+
+ const timestampMs = getSeriesTimestamp(bucket.timestamp, grouping)
+ const bucketTimestampMs =
+ grouping === 'day'
+ ? timestampMs
+ : Math.floor(timestampMs / MINUTE_MS) * MINUTE_MS
+ const current = countByTimestamp.get(bucketTimestampMs)
+
+ countByTimestamp.set(bucketTimestampMs, {
+ count: (current?.count ?? 0) + count,
+ timestampMs: Math.max(current?.timestampMs ?? timestampMs, timestampMs),
+ })
+ }
+
+ if (grouping === 'day') {
+ const points = []
+ const start = getStartOfDay(rangeBounds.start)
+ const end = getStartOfDay(rangeBounds.end)
+
+ for (let timestampMs = start; timestampMs <= end; timestampMs += DAY_MS) {
+ const value = countByTimestamp.get(timestampMs)?.count ?? 0
+
+ points.push({
+ synthetic: value === 0,
+ timestamp: new Date(timestampMs).toISOString(),
+ value,
+ })
+ }
+
+ return points
+ }
+
+ const points: WebhookStatsChartPoint[] = [
+ {
+ synthetic: true,
+ timestamp: new Date(rangeBounds.start).toISOString(),
+ value: 0,
+ },
+ ]
+
+ for (const [, bucket] of Array.from(countByTimestamp).sort(
+ ([left], [right]) => left - right
+ )) {
+ const timestampMs = bucket.timestampMs
+
+ points.push(
+ {
+ synthetic: true,
+ timestamp: new Date(
+ Math.max(rangeBounds.start, timestampMs - 1)
+ ).toISOString(),
+ value: 0,
+ },
+ {
+ timestamp: new Date(timestampMs).toISOString(),
+ value: bucket.count,
+ },
+ {
+ synthetic: true,
+ timestamp: new Date(
+ Math.min(rangeBounds.end, timestampMs + 1)
+ ).toISOString(),
+ value: 0,
+ }
+ )
+ }
+
+ points.push({
+ synthetic: true,
+ timestamp: new Date(rangeBounds.end).toISOString(),
+ value: 0,
+ })
+
+ return points
+}
+
+// Builds a zero-value baseline for an empty range, e.g. [May 19 10am, May 19 2pm] -> 0 deliveries line.
+const getEmptyDeliveryCountSeriesData = (
+ rangeBounds: WebhookStatsRangeBounds,
+ grouping: WebhookStatsGrouping
+) => {
+ if (grouping === 'day') {
+ const points = []
+ const start = getStartOfDay(rangeBounds.start)
+ const end = getStartOfDay(rangeBounds.end)
+
+ for (let timestampMs = start; timestampMs <= end; timestampMs += DAY_MS) {
+ points.push({
+ synthetic: true,
+ timestamp: new Date(timestampMs).toISOString(),
+ value: 0,
+ })
+ }
+
+ return points
+ }
+
+ return [
+ {
+ synthetic: true,
+ timestamp: new Date(rangeBounds.start).toISOString(),
+ value: 0,
+ },
+ {
+ synthetic: true,
+ timestamp: new Date(rangeBounds.end).toISOString(),
+ value: 0,
+ },
+ ]
+}
+
+const hideInactiveZeroValuePoints = (points: WebhookStatsChartPoint[]) =>
+ points.map((point, index) => {
+ if (point.value !== 0) return point
+
+ const hasNearbyValue = [-2, -1, 1, 2].some(
+ (offset) => (points[index + offset]?.value ?? 0) > 0
+ )
+ if (hasNearbyValue) return point
+
+ return { ...point, synthetic: true, value: null }
+ })
+
+// Groups response-time buckets by chart granularity, e.g. minute buckets from one day -> one daily min/avg/max point.
+const getResponseTimeSeriesData = (
+ buckets: WebhookDeliveryStatsBucket[],
+ rangeBounds: WebhookStatsRangeBounds,
+ grouping: WebhookStatsGrouping,
+ metric: 'avg' | 'max' | 'min'
+) => {
+ const statsByTimestamp = new Map()
+
+ for (const bucket of buckets) {
+ if (bucket.total <= 0) continue
+
+ const timestampMs = getSeriesTimestamp(bucket.timestamp, grouping)
+ const bucketTimestampMs =
+ grouping === 'day'
+ ? timestampMs
+ : Math.floor(timestampMs / MINUTE_MS) * MINUTE_MS
+ const currentStats = statsByTimestamp.get(bucketTimestampMs)
+ const durationTotal = bucket.durationMs.average * bucket.total
+
+ statsByTimestamp.set(
+ bucketTimestampMs,
+ currentStats
+ ? {
+ count: currentStats.count + bucket.total,
+ maxDurationMs: Math.max(
+ currentStats.maxDurationMs,
+ bucket.durationMs.maximum
+ ),
+ minDurationMs: Math.min(
+ currentStats.minDurationMs,
+ bucket.durationMs.minimum
+ ),
+ timestampMs: Math.max(currentStats.timestampMs, timestampMs),
+ totalDurationMs: currentStats.totalDurationMs + durationTotal,
+ }
+ : {
+ count: bucket.total,
+ maxDurationMs: bucket.durationMs.maximum,
+ minDurationMs: bucket.durationMs.minimum,
+ timestampMs,
+ totalDurationMs: durationTotal,
+ }
+ )
+ }
+
+ const points: WebhookStatsChartPoint[] = [
+ {
+ synthetic: true,
+ timestamp: new Date(rangeBounds.start).toISOString(),
+ value: 0,
+ },
+ ]
+
+ points.push(
+ ...Array.from(statsByTimestamp)
+ .sort(([left], [right]) => left - right)
+ .map(([, stats]) => {
+ const value = stats
+ ? metric === 'avg'
+ ? stats.totalDurationMs / stats.count
+ : metric === 'max'
+ ? stats.maxDurationMs
+ : stats.minDurationMs
+ : null
+
+ return {
+ timestamp: new Date(stats.timestampMs).toISOString(),
+ value,
+ }
+ })
+ )
+
+ return points
+}
+
+export const WebhookOverviewContent = ({
+ teamSlug,
+ webhookId,
+ initialRangeBounds,
+}: WebhookOverviewContentProps) => {
+ const [timeframeParams, setTimeframeParams] = useQueryStates(
+ webhookStatsTimeframeParams,
+ {
+ history: 'push',
+ shallow: true,
+ }
+ )
+ const rangeBounds = useMemo(
+ () =>
+ getValidWebhookStatsBounds({
+ start: timeframeParams.start ?? initialRangeBounds.start,
+ end: timeframeParams.end ?? initialRangeBounds.end,
+ }),
+ [timeframeParams.start, timeframeParams.end, initialRangeBounds]
+ )
+ const apiRangeBounds = useMemo(
+ () => getWebhookStatsApiBounds(rangeBounds),
+ [rangeBounds]
+ )
+ const range = getWebhookStatsRangeFromBounds(rangeBounds)
+ const trpc = useTRPC()
+ const { data } = useSuspenseQuery(
+ trpc.webhooks.getDeliveryStats.queryOptions({
+ teamSlug,
+ webhookId,
+ ...apiRangeBounds,
+ })
+ )
+ const stats = data.stats
+ const buckets = stats.buckets
+ const failureRate =
+ stats.total > 0
+ ? `${((stats.failed / stats.total) * 100).toFixed(1)}%`
+ : '0%'
+ const rangeStartMs = rangeBounds.start
+ const rangeEndMs = rangeBounds.end
+ const grouping: WebhookStatsGrouping =
+ range === 'this-week' ? 'day' : 'timestamp'
+ const xAxisScale =
+ range === '4h'
+ ? 'four-hour'
+ : range === '12h'
+ ? 'twelve-hour'
+ : range === 'today'
+ ? 'today'
+ : 'daily'
+ const hasFailedDeliveries = buckets.some((bucket) => bucket.failed > 0)
+ const deliverySeries = [
+ {
+ name: 'Total deliveries',
+ colorVar: '--accent-info-highlight',
+ showSymbol: true,
+ z: 2,
+ data:
+ buckets.length > 0
+ ? getDeliveryCountSeriesData(buckets, rangeBounds, grouping)
+ : getEmptyDeliveryCountSeriesData(rangeBounds, grouping),
+ },
+ {
+ name: 'Failed deliveries',
+ colorVar: '--accent-error-highlight',
+ showSymbol: true,
+ z: hasFailedDeliveries ? 3 : 1,
+ data:
+ buckets.length > 0
+ ? hideInactiveZeroValuePoints(
+ getDeliveryCountSeriesData(
+ buckets,
+ rangeBounds,
+ grouping,
+ 'failed'
+ )
+ )
+ : [],
+ },
+ ] satisfies WebhookStatsChartSeries[]
+ const latencySeries = [
+ {
+ name: 'Min',
+ colorVar: '--accent-info-highlight',
+ connectNulls: true,
+ lineWidth: 2,
+ showSymbol: true,
+ z: 1,
+ data: getResponseTimeSeriesData(buckets, rangeBounds, grouping, 'min'),
+ },
+ {
+ name: 'Avg',
+ colorVar: '--accent-main-highlight',
+ connectNulls: true,
+ lineWidth: 2,
+ showSymbol: true,
+ z: 3,
+ data: getResponseTimeSeriesData(buckets, rangeBounds, grouping, 'avg'),
+ },
+ {
+ name: 'Max',
+ colorVar: '--accent-warning-highlight',
+ connectNulls: true,
+ lineWidth: 2,
+ showSymbol: true,
+ z: 2,
+ data: getResponseTimeSeriesData(buckets, rangeBounds, grouping, 'max'),
+ },
+ ] satisfies WebhookStatsChartSeries[]
+ const handleRangeChange = (nextRange: WebhookStatsRange) => {
+ setTimeframeParams(getWebhookStatsRange(nextRange))
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `${value.toLocaleString('en-US', {
+ minimumFractionDigits: 1,
+ maximumFractionDigits: 1,
+ })}ms`
+ }
+ yAxisValueFormatter={(value) =>
+ `${Math.round(value).toLocaleString()}ms`
+ }
+ />
+
+
+
+
+
+
+ ${item.name}
+
+
+ ${valueFormatter(point.value)}
+
`,
+ ]
+ })
+
+ if (rows.length === 0) return ''
+
+ return `
+
${formatTooltipTimestamp(timestampMs, xAxisScale)}
+
${rows.join('')}
+
+
+
+ )
+})
+
+export {
+ WebhookStatsChart,
+ type WebhookStatsChartPoint,
+ type WebhookStatsChartSeries,
+}
diff --git a/src/features/dashboard/settings/webhooks/event-badges.tsx b/src/features/dashboard/settings/webhooks/event-badges.tsx
new file mode 100644
index 000000000..b19df45b7
--- /dev/null
+++ b/src/features/dashboard/settings/webhooks/event-badges.tsx
@@ -0,0 +1,54 @@
+import { Fragment } from 'react'
+import { SandboxLifecycleEventTypeSchema } from '@/core/modules/sandboxes/lifecycle-event-types'
+import { Badge } from '@/ui/primitives/badge'
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from '@/ui/primitives/tooltip'
+import { WEBHOOK_EVENT_LABELS } from './constants'
+
+type WebhookEventBadgesProps = {
+ events: readonly string[]
+}
+
+const getWebhookEventLabel = (event: string): string => {
+ const matchedEvent = SandboxLifecycleEventTypeSchema.options.find(
+ (webhookEvent) => webhookEvent === event
+ )
+ if (!matchedEvent) return event
+ return WEBHOOK_EVENT_LABELS[matchedEvent]
+}
+
+export const WebhookEventBadges = ({ events }: WebhookEventBadgesProps) => {
+ const isAllEvents =
+ events.length === SandboxLifecycleEventTypeSchema.options.length
+
+ if (isAllEvents) {
+ return (
+
+
+ ALL ({events.length})
+
+
+
+ {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 c0b9c824b..fcadab409 100644
--- a/src/features/dashboard/settings/webhooks/table-row.tsx
+++ b/src/features/dashboard/settings/webhooks/table-row.tsx
@@ -1,11 +1,11 @@
'use client'
-import { Fragment, useState } from 'react'
-import { SandboxLifecycleEventTypeSchema } from '@/core/modules/sandboxes/lifecycle-event-types'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { PROTECTED_URLS } from '@/configs/urls'
import { useClipboard } from '@/lib/hooks/use-clipboard'
import { defaultSuccessToast, toast } from '@/lib/hooks/use-toast'
import { cn } from '@/lib/utils'
-import { Badge } from '@/ui/primitives/badge'
import { Button } from '@/ui/primitives/button'
import {
DropdownMenu,
@@ -25,15 +25,10 @@ import {
WebhookIcon,
} from '@/ui/primitives/icons'
import { TableCell, TableRow } from '@/ui/primitives/table'
-import {
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from '@/ui/primitives/tooltip'
import { useDashboard } from '../../context'
import { UserAvatar } from '../../shared'
-import { WEBHOOK_EVENT_LABELS } from './constants'
import { DeleteWebhookDialog } from './delete-webhook-dialog'
+import { WebhookEventBadges } from './event-badges'
import type { Webhook } from './types'
import { UpdateWebhookSecretDialog } from './update-webhook-secret-dialog'
import { UpsertWebhookDialog } from './upsert-webhook-dialog'
@@ -85,7 +80,12 @@ const WebhookNameAndUrl = ({ name, url }: WebhookNameAndUrlProps) => {
-
{name}
+
+ {name}
+
@@ -102,62 +102,20 @@ 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'
-const getWebhookEventLabel = (event: string): string => {
- const matchedEvent = SandboxLifecycleEventTypeSchema.options.find(
- (webhookEvent) => webhookEvent === event
- )
- if (!matchedEvent) return event
- return WEBHOOK_EVENT_LABELS[matchedEvent]
-}
-
-type WebhookEventBadgesProps = {
- events: readonly string[]
-}
-
-const WebhookEventBadges = ({ events }: WebhookEventBadgesProps) => {
- const isAllEvents =
- events.length === SandboxLifecycleEventTypeSchema.options.length
-
- if (isAllEvents) {
- return (
-
-
- ALL ({events.length})
-
-
-
- {SandboxLifecycleEventTypeSchema.options.map((event, index) => (
-
- {index > 0 && (
-
- ·
-
- )}
- {WEBHOOK_EVENT_LABELS[event]}
-
- ))}
-
-
-
- )
- }
-
- return events.map((event) => (
-
{getWebhookEventLabel(event)}
- ))
-}
-
const WebhookRowActions = ({ webhook }: WebhookRowActionsProps) => {
const [dropDownOpen, setDropDownOpen] = useState(false)
return (
-
+ e.stopPropagation()}
+ >
@@ -187,6 +145,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,8 +155,19 @@ 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 +178,9 @@ export const WebhookTableRow = ({ webhook }: WebhookRowProps) => {
-
+
-
+
{createdAt}
diff --git a/src/features/dashboard/settings/webhooks/table.tsx b/src/features/dashboard/settings/webhooks/table.tsx
index dd34cb992..1b8f393e0 100644
--- a/src/features/dashboard/settings/webhooks/table.tsx
+++ b/src/features/dashboard/settings/webhooks/table.tsx
@@ -20,7 +20,7 @@ interface WebhooksTableProps {
}
const headerCellClassName =
- 'h-[17px] p-0 pb-2 align-top font-sans! text-[12px] leading-[17px] text-left font-normal text-fg-tertiary uppercase'
+ 'h-[17px] p-0 pb-0.5 align-top font-sans! text-[12px] leading-[17px] text-left font-normal text-fg-tertiary uppercase'
export const WebhooksTable = ({
webhooks,
@@ -34,11 +34,16 @@ export const WebhooksTable = ({
: 'No webhooks match your search'
return (
-
+
-
+
diff --git a/src/features/dashboard/shared/event-type-badge.tsx b/src/features/dashboard/shared/event-type-badge.tsx
new file mode 100644
index 000000000..7f41f8b68
--- /dev/null
+++ b/src/features/dashboard/shared/event-type-badge.tsx
@@ -0,0 +1,24 @@
+import { SandboxLifecycleEventTypeSchema } from '@/core/modules/sandboxes/lifecycle-event-types'
+import { Badge } from '@/ui/primitives/badge'
+import { SANDBOX_EVENT_TYPE_MAP } from './event-type-map'
+
+export const SandboxEventTypeBadge = ({ type }: { type: string }) => {
+ const parsed = SandboxLifecycleEventTypeSchema.safeParse(type)
+
+ if (!parsed.success) {
+ return (
+
+ {type}
+
+ )
+ }
+
+ const { icon: IconComponent, label } = SANDBOX_EVENT_TYPE_MAP[parsed.data]
+
+ return (
+
+
+ {label}
+
+ )
+}
diff --git a/src/features/dashboard/shared/event-type-filter-params.ts b/src/features/dashboard/shared/event-type-filter-params.ts
new file mode 100644
index 000000000..c57e4f0b8
--- /dev/null
+++ b/src/features/dashboard/shared/event-type-filter-params.ts
@@ -0,0 +1,24 @@
+import { createParser, parseAsArrayOf } from 'nuqs/server'
+import {
+ SANDBOX_LIFECYCLE_EVENT_TYPE_PREFIX,
+ type SandboxLifecycleEventType,
+ SandboxLifecycleEventTypeSchema,
+} from '@/core/modules/sandboxes/lifecycle-event-types'
+
+// Maps URL value to lifecycle event type, e.g. "created" -> "sandbox.lifecycle.created".
+const eventTypeParser = createParser({
+ parse: (value) => {
+ const result = SandboxLifecycleEventTypeSchema.safeParse(
+ `${SANDBOX_LIFECYCLE_EVENT_TYPE_PREFIX}${value}`
+ )
+ return result.success ? result.data : null
+ },
+ serialize: (value: SandboxLifecycleEventType) =>
+ value.slice(SANDBOX_LIFECYCLE_EVENT_TYPE_PREFIX.length),
+})
+
+const eventTypeFilterParams = {
+ types: parseAsArrayOf(eventTypeParser),
+}
+
+export { eventTypeFilterParams }
diff --git a/src/features/dashboard/shared/event-type-filter.tsx b/src/features/dashboard/shared/event-type-filter.tsx
new file mode 100644
index 000000000..6d19d4df4
--- /dev/null
+++ b/src/features/dashboard/shared/event-type-filter.tsx
@@ -0,0 +1,79 @@
+'use client'
+
+import {
+ type SandboxLifecycleEventType,
+ SandboxLifecycleEventTypeSchema,
+} from '@/core/modules/sandboxes/lifecycle-event-types'
+import { Button } from '@/ui/primitives/button'
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/ui/primitives/dropdown-menu'
+import { SandboxEventTypeBadge } from './event-type-badge'
+import { SANDBOX_EVENT_TYPE_MAP } from './event-type-map'
+
+const getTriggerLabel = (selected: SandboxLifecycleEventType[]) => {
+ if (selected.length === SandboxLifecycleEventTypeSchema.options.length)
+ return 'All'
+ if (selected.length === 0) return 'None'
+ const [first] = selected
+ if (selected.length === 1 && first) return SANDBOX_EVENT_TYPE_MAP[first].label
+ return `${selected.length}/${SandboxLifecycleEventTypeSchema.options.length}`
+}
+
+interface EventTypeFilterProps {
+ types: SandboxLifecycleEventType[]
+ onTypesChange: (types: SandboxLifecycleEventType[]) => void
+}
+
+export const EventTypeFilter = ({
+ types,
+ onTypesChange,
+}: EventTypeFilterProps) => {
+ const isAllSelected =
+ types.length === SandboxLifecycleEventTypeSchema.options.length
+
+ const toggleType = (type: SandboxLifecycleEventType) => {
+ const next = types.includes(type)
+ ? types.filter((t) => t !== type)
+ : [...types, type]
+ onTypesChange(next)
+ }
+
+ const toggleAll = (checked: boolean) => {
+ onTypesChange(checked ? [...SandboxLifecycleEventTypeSchema.options] : [])
+ }
+
+ return (
+
+
+
+
+
+ e.preventDefault()}
+ >
+ All events
+
+
+ {SandboxLifecycleEventTypeSchema.options.map((type) => (
+ toggleType(type)}
+ onSelect={(e) => e.preventDefault()}
+ >
+
+
+ ))}
+
+
+ )
+}
diff --git a/src/features/dashboard/shared/event-type-map.ts b/src/features/dashboard/shared/event-type-map.ts
new file mode 100644
index 000000000..fb94cc123
--- /dev/null
+++ b/src/features/dashboard/shared/event-type-map.ts
@@ -0,0 +1,22 @@
+import type { SandboxLifecycleEventType } from '@/core/modules/sandboxes/lifecycle-event-types'
+import {
+ BlockIcon,
+ CheckIcon,
+ type Icon,
+ PausedIcon,
+ RefreshIcon,
+ RunningIcon,
+} from '@/ui/primitives/icons'
+
+const SANDBOX_EVENT_TYPE_MAP: Record<
+ SandboxLifecycleEventType,
+ { icon: Icon; label: string }
+> = {
+ 'sandbox.lifecycle.created': { icon: CheckIcon, label: 'Created' },
+ 'sandbox.lifecycle.updated': { icon: RefreshIcon, label: 'Updated' },
+ 'sandbox.lifecycle.paused': { icon: PausedIcon, label: 'Paused' },
+ 'sandbox.lifecycle.resumed': { icon: RunningIcon, label: 'Resumed' },
+ 'sandbox.lifecycle.killed': { icon: BlockIcon, label: 'Killed' },
+}
+
+export { SANDBOX_EVENT_TYPE_MAP }
diff --git a/src/features/dashboard/shared/index.ts b/src/features/dashboard/shared/index.ts
index 9722c392c..d913954eb 100644
--- a/src/features/dashboard/shared/index.ts
+++ b/src/features/dashboard/shared/index.ts
@@ -1,2 +1,6 @@
+export { SandboxEventTypeBadge } from './event-type-badge'
+export { EventTypeFilter } from './event-type-filter'
+export { eventTypeFilterParams } from './event-type-filter-params'
export { IdBadge } from './id-badge'
+export { Timestamp } from './timestamp'
export { UserAvatar } from './user-avatar'
diff --git a/src/features/dashboard/shared/timestamp.tsx b/src/features/dashboard/shared/timestamp.tsx
new file mode 100644
index 000000000..aaca2bc1b
--- /dev/null
+++ b/src/features/dashboard/shared/timestamp.tsx
@@ -0,0 +1,9 @@
+import { formatDisplayTimestamp } from '@/lib/utils/formatting'
+
+type TimestampProps = {
+ value: string
+}
+
+export const Timestamp = ({ value }: TimestampProps) => {
+ return {formatDisplayTimestamp(value)}
+}
diff --git a/src/lib/utils/formatting.ts b/src/lib/utils/formatting.ts
index d0c2ece7c..3f609e740 100644
--- a/src/lib/utils/formatting.ts
+++ b/src/lib/utils/formatting.ts
@@ -135,6 +135,29 @@ export function formatChartTimestampUTC(
return formatInTimeZone(date, 'UTC', 'h:mm:ss a')
}
+/** Formats a timestamp with a relative day label, e.g. "2026-05-19T14:35:10Z" -> "Today, 2:35:10 PM". */
+export const formatDisplayTimestamp = (value: string | number | Date) => {
+ const date = new Date(value)
+ const now = new Date()
+ const yesterday = new Date()
+ yesterday.setDate(now.getDate() - 1)
+
+ const isToday = date.toDateString() === now.toDateString()
+ const isYesterday = date.toDateString() === yesterday.toDateString()
+ const prefix = isToday
+ ? 'Today'
+ : isYesterday
+ ? 'Yesterday'
+ : date.toLocaleDateString()
+ const timeStr = date.toLocaleTimeString([], {
+ hour: 'numeric',
+ minute: '2-digit',
+ second: '2-digit',
+ })
+
+ return `${prefix}, ${timeStr}`
+}
+
/** Formats elapsed time as a compact relative label; e.g. `new Date(Date.now() - 7200000)` -> `"2h ago"` */
export const formatRelativeAgo = (date: Date): string => {
const now = Date.now()
diff --git a/src/ui/copy-button.tsx b/src/ui/copy-button.tsx
index 825b7e346..8c8eec7df 100644
--- a/src/ui/copy-button.tsx
+++ b/src/ui/copy-button.tsx
@@ -1,10 +1,10 @@
'use client'
import { AnimatePresence, motion } from 'motion/react'
-import { FC } from 'react'
+import type { FC } from 'react'
import { useClipboard } from '@/lib/hooks/use-clipboard'
import { EASE_APPEAR } from '@/lib/utils/ui'
-import { IconButton, IconButtonProps } from '@/ui/primitives/icon-button'
+import { IconButton, type IconButtonProps } from '@/ui/primitives/icon-button'
import { CheckIcon, CopyIcon } from '@/ui/primitives/icons'
interface CopyButtonProps extends IconButtonProps {
diff --git a/src/ui/primitives/icons.tsx b/src/ui/primitives/icons.tsx
index 126e7797a..a24432e42 100644
--- a/src/ui/primitives/icons.tsx
+++ b/src/ui/primitives/icons.tsx
@@ -1048,8 +1048,8 @@ export const BugIcon = ({ className, ...props }: IconProps) => (
)
@@ -1065,14 +1065,14 @@ export const FeedbackIcon = ({ className, ...props }: IconProps) => (
)
@@ -1216,21 +1216,21 @@ export const UnlockIcon = ({ className, ...props }: IconProps) => (
)
@@ -1456,14 +1456,14 @@ export const ArrowRightIcon = ({ className, ...props }: IconProps) => (
)
@@ -1479,14 +1479,14 @@ export const ArrowLeftIcon = ({ className, ...props }: IconProps) => (
)