railwatch 0.9.4 → 1.0.0

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

@@ -1,295 +0,0 @@
-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

@@ -1,159 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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>
-  )
-}