feat: build realtime event stream UI

Author: Yasir761

web/src/app/(dashboard)/streams/page.tsx

@@ -0,0 +1,7 @@
+import { StreamsWorkspace } from "@/components/streams/streams-workspace"
+
+export default function StreamsPage() {
+  return (
+    <StreamsWorkspace />
+  )
+}

web/src/components/streams/live-stream-table.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { StreamRow } from "./stream-row"
+
+type Row = {
+  provider: string
+  route: string
+  status: string
+  latency: string
+  timestamp: string
+  eventType: string
+}
+
+type Props = {
+  rows: Row[]
+  selected: Row | null
+  onSelect: (row: Row) => void
+}
+
+export function LiveStreamTable({
+  rows,
+  selected,
+  onSelect,
+}: Props) {
+  return (
+    <div className="h-full overflow-auto">
+
+      <div
+        className="
+          sticky top-0 z-10
+          grid
+          grid-cols-[120px_1fr_180px_120px_120px_140px]
+          border-b border-border
+          bg-background/95
+          px-5 py-3
+          text-xs uppercase tracking-wide
+          text-muted-foreground
+          backdrop-blur
+        "
+      >
+
+        <div>Provider</div>
+        <div>Route</div>
+        <div>Event</div>
+        <div>Status</div>
+        <div>Latency</div>
+        <div>Time</div>
+
+      </div>
+
+      {rows.map((row, i) => (
+        <StreamRow
+          key={i}
+          {...row}
+          selected={
+            selected === row
+          }
+          onClick={() =>
+            onSelect(row)
+          }
+        />
+      ))}
+
+    </div>
+  )
+}

web/src/components/streams/live-stream.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import { useMemo, useState } from "react"
+
+import {
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+} from "react-resizable-panels"
+
+import { LiveStreamTable } from "./live-stream-table"
+
+import { StreamInspector } from "./stream-inspector"
+
+const rows = Array.from({
+  length: 30,
+}).map((_, i) => ({
+  provider:
+    i % 2 === 0
+      ? "stripe"
+      : "github",
+
+  route:
+    i % 2 === 0
+      ? "/webhooks/stripe"
+      : "/webhooks/github",
+
+  eventType:
+    i % 2 === 0
+      ? "payment.succeeded"
+      : "repo.push",
+
+  status:
+    i % 4 === 0
+      ? "failed"
+      : "success",
+
+  latency: `${40 + i}ms`,
+
+  timestamp: `${i + 1}s ago`,
+}))
+
+type Props = {
+  query: string
+}
+
+export function LiveStream({
+  query,
+}: Props) {
+
+  const [selected, setSelected] =
+    useState<
+      (typeof rows)[number] | null
+    >(null)
+
+  const filtered =
+    useMemo(() => {
+
+      return rows.filter((row) =>
+        `
+          ${row.provider}
+          ${row.route}
+          ${row.eventType}
+        `
+          .toLowerCase()
+          .includes(query.toLowerCase())
+      )
+
+    }, [query])
+
+  return (
+    <PanelGroup direction="horizontal">
+
+      <Panel
+        defaultSize={72}
+        minSize={45}
+      >
+
+        <LiveStreamTable
+          rows={filtered}
+          selected={selected}
+          onSelect={setSelected}
+        />
+
+      </Panel>
+
+      <PanelResizeHandle className="w-2 bg-border/40" />
+
+      <Panel
+        defaultSize={28}
+        minSize={20}
+      >
+
+        <div className="h-full border-l border-border bg-background/20">
+
+          <StreamInspector
+            event={selected}
+          />
+
+        </div>
+
+      </Panel>
+
+    </PanelGroup>
+  )
+}

web/src/components/streams/stream-inspector.tsx

@@ -0,0 +1,152 @@
+"use client"
+
+import {
+  Clock3,
+  FileJson,
+  Globe,
+  Radio,
+} from "lucide-react"
+
+import { StreamJson } from "./stream-json"
+
+type StreamEvent = {
+  provider: string
+  route: string
+  status: string
+  latency: string
+  timestamp: string
+  eventType: string
+}
+
+type Props = {
+  event: StreamEvent | null
+}
+
+export function StreamInspector({
+  event,
+}: Props) {
+
+  if (!event) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+        Select a stream event
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+
+      {/* Header */}
+      <div className="border-b border-border p-5">
+
+        <div className="flex items-center gap-3">
+
+          <div
+            className="
+              flex h-11 w-11 items-center justify-center
+              rounded-xl border border-border
+              bg-background/40
+            "
+          >
+            <Radio className="h-5 w-5 text-orange-400" />
+          </div>
+
+          <div>
+
+            <h2 className="text-lg font-semibold">
+              Stream Inspector
+            </h2>
+
+            <p className="mt-1 text-sm text-muted-foreground">
+              live webhook payload
+            </p>
+
+          </div>
+
+        </div>
+
+      </div>
+
+      {/* Meta */}
+      <div className="space-y-3 border-b border-border p-5">
+
+        <MetaRow
+          icon={Globe}
+          label="Provider"
+          value={event.provider}
+        />
+
+        <MetaRow
+          icon={FileJson}
+          label="Event Type"
+          value={event.eventType}
+        />
+
+        <MetaRow
+          icon={Clock3}
+          label="Latency"
+          value={event.latency}
+        />
+
+      </div>
+
+      {/* Payload */}
+      <div className="flex-1 overflow-auto p-5">
+
+        <div className="mb-4">
+
+          <h3 className="text-sm font-semibold">
+            Payload
+          </h3>
+
+        </div>
+
+        <StreamJson
+          payload={{
+            id: "evt_12345",
+            route: event.route,
+            provider: event.provider,
+            type: event.eventType,
+            latency: event.latency,
+            metadata: {
+              retries: 1,
+              region: "eu-west",
+              worker: "worker-02",
+            },
+          }}
+        />
+
+      </div>
+
+    </div>
+  )
+}
+
+function MetaRow({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon: React.ElementType
+  label: string
+  value: string
+}) {
+  return (
+    <div className="flex items-center justify-between">
+
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+
+        <Icon className="h-4 w-4" />
+
+        {label}
+
+      </div>
+
+      <div className="text-sm font-medium">
+        {value}
+      </div>
+
+    </div>
+  )
+}

web/src/components/streams/stream-json.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import JsonView from "@uiw/react-json-view"
+
+type Props = {
+    payload: Record<string, unknown> | undefined
+  }
+
+export function StreamJson({
+  payload,
+}: Props) {
+  return (
+    <div
+      className="
+        overflow-hidden rounded-xl
+        border border-border
+        bg-background/40
+        p-4
+      "
+    >
+
+      <JsonView
+        value={payload}
+        displayDataTypes={false}
+        displayObjectSize={false}
+        enableClipboard
+      />
+
+    </div>
+  )
+}