railwatch 0.6.1 → 0.7.0

data/app/frontend/components/railwatch/frames.tsx

@@ -0,0 +1,295 @@
+import { Fragment, useState } from "react"
+
+import { SourceLink } from "@/components/railwatch/source-link"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+import type { ExceptionDetail, Frame, TimelineEntry } from "@/types"
+
+// A hashed build asset -- "assets/index-Bq1x9K2v.js", what a browser frame
+// points at in production. It is the app's own code, but not at any path
+// that exists in the repository, so there is nothing to link it to until
+// Railwatch can resolve it through a source map (docs/roadmap.md); until then
+// it is shown exactly as the browser named it.
+const HASHED_ASSET = /-[A-Za-z0-9_-]{8,}\.(?:js|mjs|cjs|css)$/
+
+function FrameRow({
+  frame,
+  deploy,
+  open,
+  onToggle,
+}: {
+  frame: Frame
+  deploy?: string | null
+  open: boolean
+  onToggle: () => void
+}) {
+  const lines = frame.code ? Object.entries(frame.code) : []
+  const linkable = frame.in_app && !HASHED_ASSET.test(frame.file)
+  return (
+    <div
+      className={cn(
+        "border-b last:border-b-0",
+        frame.in_app ? "bg-background" : "bg-muted/40",
+      )}
+    >
+      <div className="hover:bg-muted/60 flex w-full items-center gap-2 px-3 py-1.5 font-mono text-xs">
+        {linkable && (
+          <SourceLink
+            location={`${frame.file}:${frame.line}`}
+            deploy={deploy}
+          />
+        )}
+        <button
+          type="button"
+          onClick={onToggle}
+          className="flex min-w-0 flex-1 items-center gap-2 text-left"
+        >
+          {!linkable && (
+            <span className="text-muted-foreground truncate">
+              {frame.file}:{frame.line}
+            </span>
+          )}
+          <span className="text-muted-foreground ml-auto truncate">
+            in {frame.function}
+          </span>
+          {frame.in_app && (
+            <Badge variant="outline" className="shrink-0 text-[10px]">
+              app
+            </Badge>
+          )}
+        </button>
+      </div>
+      {open && lines.length > 0 && (
+        <pre className="bg-muted/60 overflow-x-auto px-3 py-2 font-mono text-xs leading-5">
+          {lines.map(([n, src]) => (
+            <div
+              key={n}
+              className={cn(
+                "flex gap-3 border-l-2 border-transparent pl-2",
+                Number(n) === frame.line &&
+                  "border-destructive bg-destructive/10 font-semibold",
+              )}
+            >
+              <span className="text-muted-foreground w-10 shrink-0 text-right select-none">
+                {n}
+              </span>
+              <span className="whitespace-pre">{src}</span>
+            </div>
+          ))}
+        </pre>
+      )}
+    </div>
+  )
+}
+
+export function Frames({
+  frames,
+  deploy,
+}: {
+  frames: Frame[]
+  deploy?: string | null
+}) {
+  const appIndexes = frames.flatMap((f, i) => (f.in_app ? [i] : []))
+  const [open, setOpen] = useState<Set<number>>(
+    new Set(appIndexes.length > 0 ? appIndexes : [0]),
+  )
+  const [showAll, setShowAll] = useState(false)
+  const visible = showAll ? frames : frames.filter((f, i) => f.in_app || i < 3)
+
+  function toggle(idx: number) {
+    setOpen((prev) => {
+      const next = new Set(prev)
+      if (next.has(idx)) next.delete(idx)
+      else next.add(idx)
+      return next
+    })
+  }
+
+  return (
+    <div className="overflow-hidden rounded-lg border">
+      {visible.map((f) => {
+        const idx = frames.indexOf(f)
+        return (
+          <FrameRow
+            key={idx}
+            frame={f}
+            deploy={deploy}
+            open={open.has(idx)}
+            onToggle={() => toggle(idx)}
+          />
+        )
+      })}
+      {visible.length < frames.length && (
+        <button
+          type="button"
+          className="text-muted-foreground w-full px-3 py-1.5 text-left text-xs hover:underline"
+          onClick={() => setShowAll(true)}
+        >
+          Show {frames.length - visible.length} framework frames
+        </button>
+      )}
+    </div>
+  )
+}
+
+export function ExceptionCard({
+  exception,
+  deploy,
+}: {
+  exception: ExceptionDetail
+  deploy?: string | null
+}) {
+  return (
+    <div className="space-y-3">
+      <div>
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="font-mono text-sm font-semibold">
+            {exception.class_name}
+          </span>
+          <Badge variant={exception.handled ? "secondary" : "destructive"}>
+            {exception.handled ? "handled" : "unhandled"}
+          </Badge>
+          {exception.severity && (
+            <Badge variant="outline">{exception.severity}</Badge>
+          )}
+          {exception.source && (
+            <span className="text-muted-foreground font-mono text-xs">
+              {exception.source}
+            </span>
+          )}
+        </div>
+        <p className="mt-1 font-mono text-sm break-words">
+          {exception.message}
+        </p>
+        {exception.cause && (
+          <p className="text-muted-foreground mt-1 font-mono text-xs">
+            caused by {exception.cause.class}: {exception.cause.message}
+          </p>
+        )}
+      </div>
+      <Frames frames={exception.frames} deploy={deploy} />
+      {exception.locals && Object.keys(exception.locals).length > 0 && (
+        <div className="overflow-hidden rounded-lg border">
+          <div className="label-caps border-b px-3 py-1.5">
+            Local variables at the raise site
+          </div>
+          <dl className="grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1 px-3 py-2 font-mono text-xs">
+            {Object.entries(exception.locals).map(([name, value]) => (
+              <Fragment key={name}>
+                <dt className="text-muted-foreground">{name}</dt>
+                <dd className="break-all">{value}</dd>
+              </Fragment>
+            ))}
+          </dl>
+        </div>
+      )}
+      {exception.context && exception.context !== "{}" && (
+        <pre className="bg-muted/60 overflow-x-auto rounded-lg p-3 font-mono text-xs">
+          {exception.context}
+        </pre>
+      )}
+    </div>
+  )
+}
+
+const crumbColors: Record<string, string> = {
+  query: "bg-sky-500",
+  transaction: "bg-sky-300",
+  cache_event: "bg-violet-500",
+  outgoing_request: "bg-orange-500",
+  mail: "bg-pink-500",
+  broadcast: "bg-teal-500",
+  enqueued_job: "bg-amber-500",
+  view_render: "bg-emerald-500",
+  storage_op: "bg-indigo-500",
+  exception: "bg-red-500",
+  log: "bg-neutral-400",
+}
+
+// Sentry-style breadcrumbs: what the execution did in the run-up to the
+// exception, oldest first, each with its offset from the start.
+export function Breadcrumbs({ entries }: { entries: TimelineEntry[] }) {
+  if (entries.length === 0) return null
+  return (
+    <div className="overflow-hidden rounded-lg border">
+      <div className="label-caps border-b px-3 py-1.5">
+        Breadcrumbs · {entries.length} events before the exception
+      </div>
+      <ol className="divide-y">
+        {entries.map((e) => (
+          <li
+            key={`${e.type}-${e.id}`}
+            className="grid grid-cols-[3.5rem_5rem_1fr_4rem] items-center gap-2 px-3 py-1 font-mono text-xs"
+          >
+            <span className="text-muted-foreground tabular-nums">
+              +{e.offset.toFixed(1)}ms
+            </span>
+            <span className="text-muted-foreground flex items-center gap-1.5 truncate">
+              <span
+                className={cn(
+                  "inline-block size-1.5 shrink-0 rounded-full",
+                  crumbColors[e.type] ?? "bg-neutral-500",
+                )}
+              />
+              {e.type.replace("_", " ")}
+            </span>
+            <span className="truncate">{e.label}</span>
+            <span className="text-muted-foreground text-right tabular-nums">
+              {e.duration != null ? `${e.duration.toFixed(1)}ms` : ""}
+            </span>
+          </li>
+        ))}
+      </ol>
+    </div>
+  )
+}
+
+export interface BrowserCrumb {
+  at: number
+  kind: string
+  text: string
+}
+
+const browserCrumbColors: Record<string, string> = {
+  console: "bg-red-500",
+  click: "bg-violet-500",
+  navigate: "bg-sky-500",
+}
+
+// The browser's half of the same idea: what the user did in the run-up to a
+// JavaScript error -- console errors, clicks, Inertia navigations -- offset
+// from the first of them, since a browser error has no execution whose
+// timeline would mean anything (its execution is the beacon that carried it).
+export function BrowserBreadcrumbs({ crumbs }: { crumbs: BrowserCrumb[] }) {
+  if (crumbs.length === 0) return null
+  const start = crumbs[0].at
+  return (
+    <div className="overflow-hidden rounded-lg border">
+      <div className="label-caps border-b px-3 py-1.5">
+        Breadcrumbs · {crumbs.length} events before the error
+      </div>
+      <ol className="divide-y">
+        {crumbs.map((c, i) => (
+          <li
+            key={`${c.at}-${c.kind}-${i}`}
+            className="grid grid-cols-[3.5rem_5rem_1fr] items-center gap-2 px-3 py-1 font-mono text-xs"
+          >
+            <span className="text-muted-foreground tabular-nums">
+              +{((c.at - start) / 1000).toFixed(1)}s
+            </span>
+            <span className="text-muted-foreground flex items-center gap-1.5 truncate">
+              <span
+                className={cn(
+                  "inline-block size-1.5 shrink-0 rounded-full",
+                  browserCrumbColors[c.kind] ?? "bg-neutral-500",
+                )}
+              />
+              {c.kind}
+            </span>
+            <span className="truncate">{c.text}</span>
+          </li>
+        ))}
+      </ol>
+    </div>
+  )
+}

data/app/frontend/components/railwatch/json-viewer.tsx

@@ -0,0 +1,159 @@
+import { Check, ChevronDown, ChevronRight, Copy } from "lucide-react"
+import { useState } from "react"
+
+import { Button } from "@/components/ui/button"
+import { useClipboard } from "@/hooks/use-clipboard"
+import { cn } from "@/lib/utils"
+
+type Json = null | boolean | number | string | Json[] | { [key: string]: Json }
+
+function isContainer(v: unknown): v is Json[] | Record<string, Json> {
+  return v !== null && typeof v === "object"
+}
+
+function primitiveClass(v: Json) {
+  if (v === null) return "text-muted-foreground"
+  if (typeof v === "string") return "text-emerald-600 dark:text-emerald-400"
+  if (typeof v === "number") return "text-amber-600 dark:text-amber-400"
+  if (typeof v === "boolean") return "text-primary"
+  return ""
+}
+
+function Primitive({ value }: { value: string | number | boolean | null }) {
+  const text =
+    value === null
+      ? "null"
+      : typeof value === "string"
+        ? `"${value}"`
+        : String(value)
+  return <span className={primitiveClass(value)}>{text}</span>
+}
+
+function Node({
+  label,
+  value,
+  depth,
+  collapsed,
+}: {
+  label?: string
+  value: Json
+  depth: number
+  collapsed: boolean
+}) {
+  const [open, setOpen] = useState(!collapsed)
+  const indent = { paddingLeft: `${depth * 12}px` }
+
+  if (!isContainer(value)) {
+    return (
+      <div style={indent}>
+        {label !== undefined && (
+          <span className="text-muted-foreground">{label}: </span>
+        )}
+        <Primitive value={value} />
+      </div>
+    )
+  }
+
+  const entries = Array.isArray(value)
+    ? value.map((v, i) => [String(i), v] as const)
+    : Object.entries(value)
+  const [open_, close_] = Array.isArray(value) ? ["[", "]"] : ["{", "}"]
+
+  if (entries.length === 0) {
+    return (
+      <div style={indent}>
+        {label !== undefined && (
+          <span className="text-muted-foreground">{label}: </span>
+        )}
+        <span className="text-muted-foreground">
+          {open_}
+          {close_}
+        </span>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="hover:bg-muted/60 inline-flex items-center gap-0.5 rounded"
+        style={indent}
+      >
+        {open ? (
+          <ChevronDown className="text-muted-foreground size-3" />
+        ) : (
+          <ChevronRight className="text-muted-foreground size-3" />
+        )}
+        {label !== undefined && (
+          <span className="text-muted-foreground">{label}:</span>
+        )}
+        <span className="text-muted-foreground">
+          {open_}
+          {!open && `…${entries.length}…${close_}`}
+        </span>
+      </button>
+      {open && (
+        <div>
+          {entries.map(([k, v]) => (
+            <Node
+              key={k}
+              label={Array.isArray(value) ? undefined : k}
+              value={v}
+              depth={depth + 1}
+              collapsed={collapsed}
+            />
+          ))}
+          <div className="text-muted-foreground" style={indent}>
+            {close_}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function JsonViewer({
+  data,
+  collapsed = false,
+  className,
+}: {
+  data: unknown
+  collapsed?: boolean
+  className?: string
+}) {
+  const [, copy] = useClipboard()
+  const [copied, setCopied] = useState(false)
+  return (
+    <div
+      className={cn(
+        "bg-muted/60 relative rounded p-2 pr-8 font-mono text-xs",
+        className,
+      )}
+    >
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-sm"
+        className="absolute top-1 right-1"
+        onClick={() => {
+          void (async () => {
+            const ok = await copy(JSON.stringify(data, null, 2))
+            if (ok) {
+              setCopied(true)
+              setTimeout(() => setCopied(false), 1200)
+            }
+          })()
+        }}
+      >
+        {copied ? (
+          <Check className="size-3.5" />
+        ) : (
+          <Copy className="size-3.5" />
+        )}
+      </Button>
+      <Node value={data as Json} depth={0} collapsed={collapsed} />
+    </div>
+  )
+}

data/app/frontend/components/railwatch/live-dot.tsx

@@ -0,0 +1,78 @@
+import { useTicker } from "@/hooks/use-ticker"
+import { cn } from "@/lib/utils"
+
+function isFresh(lastSeenAt: string | null, thresholdMs: number): boolean {
+  if (lastSeenAt === null) return false
+  return Date.now() - new Date(lastSeenAt).getTime() < thresholdMs
+}
+
+const UNLIT = "bg-neutral-400/15"
+
+// A three-aspect signal head standing in for the usual status dot, lamps
+// in their real order: stop on top, caution in the middle, clear at the
+// bottom. Fresh telemetry lights the bottom lamp green and pings it; stale
+// lights the middle one amber; nothing yet leaves all three unlit. `erroring`
+// lights the top lamp red instead, for an environment that is reporting
+// but reporting failures. Same colour vocabulary as the empty-state signal
+// and the status badges.
+export function LiveDot({
+  lastSeenAt,
+  thresholdMs = 60_000,
+  erroring = false,
+  className,
+}: {
+  lastSeenAt: string | null
+  thresholdMs?: number
+  erroring?: boolean
+  className?: string
+}) {
+  useTicker()
+  const fresh = isFresh(lastSeenAt, thresholdMs)
+  const state =
+    lastSeenAt === null
+      ? "none"
+      : erroring
+        ? "stop"
+        : fresh
+          ? "clear"
+          : "caution"
+
+  return (
+    <span
+      className={cn(
+        "border-foreground/30 bg-background/60 inline-flex w-2.5 shrink-0 flex-col items-center justify-between rounded-full border px-px py-[3px]",
+        className,
+      )}
+      style={{ height: 24 }}
+    >
+      <span className="relative inline-flex size-1.5">
+        {state === "stop" && (
+          <span className="bg-danger absolute inline-flex h-full w-full animate-ping rounded-full opacity-75" />
+        )}
+        <span
+          className={cn(
+            "relative inline-flex size-1.5 rounded-full transition-colors duration-300",
+            state === "stop" ? "bg-danger" : UNLIT,
+          )}
+        />
+      </span>
+      <span
+        className={cn(
+          "inline-flex size-1.5 rounded-full transition-colors duration-300",
+          state === "caution" ? "bg-warning" : UNLIT,
+        )}
+      />
+      <span className="relative inline-flex size-1.5">
+        {state === "clear" && (
+          <span className="bg-live absolute inline-flex h-full w-full animate-ping rounded-full opacity-75" />
+        )}
+        <span
+          className={cn(
+            "relative inline-flex size-1.5 rounded-full transition-colors duration-300",
+            state === "clear" ? "bg-live" : UNLIT,
+          )}
+        />
+      </span>
+    </span>
+  )
+}

data/app/frontend/components/railwatch/live-toggle.tsx

@@ -0,0 +1,76 @@
+import { usePage } from "@inertiajs/react"
+
+import { badgeVariants } from "@/components/ui/badge"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { useLive } from "@/hooks/use-live"
+import { useTicker } from "@/hooks/use-ticker"
+import { ago } from "@/lib/format"
+import { cn } from "@/lib/utils"
+import type { SharedProps } from "@/types"
+
+import { LiveDot } from "./live-dot"
+
+// Small pill embedded in every environment page's PageHeader: pulses while
+// live ingest events are flowing, click to pause/resume the automatic
+// background reloads that keep the page's data fresh.
+export function LiveToggle({ environmentId }: { environmentId: number }) {
+  useTicker()
+  const { environment, telemetry_freshness: freshness } =
+    usePage<SharedProps>().props
+  const { connected, lastEventAt, lastRefreshedAt, paused, setPaused } =
+    useLive(environmentId)
+  const lastEventIso =
+    lastEventAt != null
+      ? new Date(lastEventAt).toISOString()
+      : (freshness?.received_at ?? environment?.last_seen_at ?? null)
+  const refreshedIso =
+    lastRefreshedAt != null ? new Date(lastRefreshedAt).toISOString() : null
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-pressed={paused}
+          aria-label={paused ? "Resume live updates" : "Pause live updates"}
+          onClick={() => setPaused(!paused)}
+          className={cn(
+            badgeVariants({ variant: "outline" }),
+            "hover:bg-accent h-7 cursor-pointer gap-1.5 rounded-md font-mono text-[11px] tracking-wide uppercase",
+          )}
+        >
+          <LiveDot
+            lastSeenAt={connected ? lastEventIso : null}
+            thresholdMs={10_000}
+          />
+          {paused ? "Paused" : connected ? "Live" : "Disconnected"}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>
+          {lastEventIso
+            ? `Telemetry received ${ago(lastEventIso)}`
+            : "No telemetry received yet"}
+        </p>
+        <p>
+          {refreshedIso
+            ? `Page refreshed ${ago(refreshedIso)}`
+            : "No live refresh yet"}
+        </p>
+        {freshness?.processing_lag_seconds != null && (
+          <p>
+            Ingest processing pending:{" "}
+            {Math.round(freshness.processing_lag_seconds)}s
+          </p>
+        )}
+        {freshness?.aggregated_at && (
+          <p>Charts updated {ago(freshness.aggregated_at)}</p>
+        )}
+      </TooltipContent>
+    </Tooltip>
+  )
+}