railwatch 0.9.3 → 1.0.0

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

@@ -1,405 +0,0 @@
-import { useMemo, useState } from "react"
-
-import { SqlBlock } from "@/components/railwatch/sql-block"
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/components/ui/hover-card"
-import { ms, usd } from "@/lib/format"
-import { cn } from "@/lib/utils"
-import type { TimelineEntry } from "@/types"
-
-const colors: 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",
-  span: "bg-fuchsia-500",
-  attachment: "bg-lime-500",
-  llm_call: "bg-cyan-400",
-}
-
-const typeLabels: Record<string, string> = {
-  query: "Query",
-  cache_event: "Cache",
-  outgoing_request: "Outgoing",
-  mail: "Mail",
-  broadcast: "Broadcast",
-  log: "Log",
-  exception: "Exception",
-  view_render: "View",
-  storage_op: "Storage",
-  enqueued_job: "Job",
-  transaction: "Transaction",
-  span: "Span",
-  attachment: "Attachment",
-  llm_call: "LLM",
-}
-
-const stageOrder = [
-  "middleware_before",
-  "action",
-  "render",
-  "middleware_after",
-  "body",
-]
-
-const stageLabels: Record<string, string> = {
-  middleware_before: "before middleware",
-  action: "action",
-  render: "render",
-  middleware_after: "after middleware",
-  body: "body",
-}
-
-// Candidate gridline intervals (ms); pick the smallest that keeps the axis
-// under ~8 ticks for the current span.
-const INTERVALS = [
-  10, 25, 50, 100, 250, 500, 1000, 2500, 5000, 10000, 30000, 60000,
-]
-
-function pickInterval(span: number) {
-  const target = span / 8
-  return INTERVALS.find((i) => i >= target) ?? INTERVALS[INTERVALS.length - 1]
-}
-
-function axisTicks(span: number, interval: number) {
-  const out: number[] = []
-  for (let t = 0; t <= span; t += interval) out.push(t)
-  return out
-}
-
-// Row/axis/stage-bar all share this grid so the ms axis and gridlines line
-// up exactly with every bar regardless of content.
-// Phones drop the type column and shrink the label so the bars keep room.
-const GRID =
-  "grid grid-cols-[6rem_1fr_3.5rem] items-center gap-2 md:grid-cols-[5rem_13rem_1fr_4rem]"
-const TYPE_COL = "hidden md:block"
-
-function EntryBody({
-  entry,
-  showSource,
-}: {
-  entry: TimelineEntry
-  showSource?: boolean
-}) {
-  const d = entry.detail ?? {}
-  return (
-    <div className="space-y-1.5">
-      <div className="text-muted-foreground flex items-center gap-2 text-[10px] tracking-wide uppercase">
-        <span>{typeLabels[entry.type] ?? entry.type}</span>
-        {entry.stage && (
-          <span>· {stageLabels[entry.stage] ?? entry.stage}</span>
-        )}
-      </div>
-      {entry.type === "query" && entry.sql ? (
-        <SqlBlock sql={entry.sql} wrap className="text-[11px]" />
-      ) : entry.type === "cache_event" ? (
-        <div className="font-mono text-xs break-all">
-          {String(d.op ?? "")}{" "}
-          <span className="font-semibold">{String(d.key ?? "")}</span>
-        </div>
-      ) : entry.type === "outgoing_request" ? (
-        <div className="font-mono text-xs break-all">
-          {String(d.method ?? "")} {String(d.url ?? entry.label)}
-          {d.status != null && (
-            <span className="text-muted-foreground"> → {String(d.status)}</span>
-          )}
-          {showSource && typeof d.body === "string" && d.body !== "" && (
-            <pre className="bg-muted mt-1.5 max-h-48 overflow-auto rounded p-2 text-[10px] break-all whitespace-pre-wrap">
-              {d.body}
-            </pre>
-          )}
-        </div>
-      ) : entry.type === "llm_call" ? (
-        <div className="font-mono text-xs break-all">
-          {String(d.tool ?? entry.label)}
-          {d.input_tokens != null && (
-            <span className="text-muted-foreground">
-              {" "}
-              · {String(d.input_tokens)} in / {String(d.output_tokens ?? 0)} out
-            </span>
-          )}
-          {d.cost != null && (
-            <span className="text-muted-foreground">
-              {" "}
-              · {usd(Number(d.cost))}
-            </span>
-          )}
-          {d.step != null && (
-            <span className="text-muted-foreground">
-              {" "}
-              · {String(d.workflow ?? "")} / {String(d.step)}
-            </span>
-          )}
-          {d.error != null && (
-            <div className="text-destructive mt-1">{String(d.error)}</div>
-          )}
-        </div>
-      ) : entry.type === "mail" ? (
-        <div className="font-mono text-xs break-all">
-          {String(d.subject ?? entry.label)}
-        </div>
-      ) : entry.type === "log" ? (
-        <div className="font-mono text-xs break-words">
-          <span className="text-muted-foreground uppercase">
-            {String(d.level ?? "")}
-          </span>{" "}
-          {String(d.message ?? entry.label)}
-        </div>
-      ) : entry.type === "exception" ? (
-        <div className="text-destructive font-mono text-xs break-words">
-          {entry.label}
-        </div>
-      ) : (
-        <div className="font-mono text-xs break-words">{entry.label}</div>
-      )}
-      <div className="text-muted-foreground flex flex-wrap gap-x-3 text-[11px] tabular-nums">
-        <span>+{ms(entry.offset)}</span>
-        {entry.duration != null && <span>{ms(entry.duration)}</span>}
-      </div>
-      {showSource && entry.source && (
-        <div className="text-muted-foreground border-t pt-1 font-mono text-[11px] break-all">
-          {entry.source}
-        </div>
-      )}
-    </div>
-  )
-}
-
-function Gridlines({ ticks, span }: { ticks: number[]; span: number }) {
-  return (
-    <>
-      {ticks.map((t) => (
-        <div
-          key={t}
-          className="bg-border/60 pointer-events-none absolute top-0 h-full w-px"
-          style={{ left: `${(t / span) * 100}%` }}
-        />
-      ))}
-    </>
-  )
-}
-
-export function Timeline({
-  entries,
-  total,
-  stages,
-}: {
-  entries: TimelineEntry[]
-  total: number
-  stages: Record<string, number>
-}) {
-  const [hidden, setHidden] = useState<Set<string>>(new Set())
-  const [expanded, setExpanded] = useState<string | null>(null)
-
-  const span = Math.max(
-    total,
-    ...entries.map((e) => e.offset + (e.duration ?? 0)),
-    1,
-  )
-  const interval = pickInterval(span)
-  const ticks = axisTicks(span, interval)
-
-  const counts = useMemo(() => {
-    const c = new Map<string, number>()
-    for (const e of entries) c.set(e.type, (c.get(e.type) ?? 0) + 1)
-    return c
-  }, [entries])
-
-  const visible = entries.filter((e) => !hidden.has(e.type))
-
-  function toggleType(type: string) {
-    setHidden((prev) => {
-      const next = new Set(prev)
-      if (next.has(type)) next.delete(type)
-      else next.add(type)
-      return next
-    })
-  }
-
-  const stageBars = stageOrder
-    .filter((s) => stages[s] !== undefined)
-    .reduce<{ name: string; start: number; width: number }[]>((acc, s) => {
-      const start =
-        acc.length > 0
-          ? acc[acc.length - 1].start + acc[acc.length - 1].width
-          : 0
-      acc.push({ name: s, start, width: stages[s] })
-      return acc
-    }, [])
-
-  return (
-    <div className="space-y-2">
-      {counts.size > 0 && (
-        <div className="flex flex-wrap items-center gap-1.5">
-          {[...counts.entries()].map(([type, n]) => (
-            <button
-              key={type}
-              type="button"
-              onClick={() => toggleType(type)}
-              className={cn(
-                "flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors",
-                hidden.has(type)
-                  ? "text-muted-foreground opacity-50"
-                  : "hover:bg-muted/60",
-              )}
-            >
-              <span
-                className={cn(
-                  "size-1.5 rounded-full",
-                  colors[type] ?? "bg-neutral-500",
-                )}
-              />
-              {typeLabels[type] ?? type}
-              <span className="text-muted-foreground tabular-nums">{n}</span>
-            </button>
-          ))}
-        </div>
-      )}
-
-      <div className={cn(GRID, "px-2 text-[10px]")}>
-        <div className={TYPE_COL} />
-        <div />
-        <div className="relative h-4 select-none">
-          {ticks.map((t) => (
-            <span
-              key={t}
-              className="text-muted-foreground absolute -translate-x-1/2 tabular-nums"
-              style={{ left: `${(t / span) * 100}%` }}
-            >
-              {ms(t, 0)}
-            </span>
-          ))}
-        </div>
-        <div />
-      </div>
-
-      <div className={cn(GRID, "px-2")}>
-        <div className={TYPE_COL} />
-        <div />
-        <div className="bg-muted/40 relative h-5 overflow-hidden rounded text-[10px]">
-          <Gridlines ticks={ticks} span={span} />
-          {stageBars.map((s) => (
-            <div
-              key={s.name}
-              className="border-background bg-primary/20 absolute top-0 flex h-full items-center overflow-hidden border-r px-1 whitespace-nowrap"
-              style={{
-                left: `${(s.start / span) * 100}%`,
-                width: `${(s.width / span) * 100}%`,
-              }}
-              title={`${stageLabels[s.name] ?? s.name} ${ms(s.width)}`}
-            >
-              {stageLabels[s.name] ?? s.name} {ms(s.width, 0)}
-            </div>
-          ))}
-        </div>
-        <div />
-      </div>
-
-      <div className="max-h-[32rem] overflow-y-auto rounded-lg border">
-        {entries.length === 0 && (
-          <div className="text-muted-foreground p-4 text-center text-sm">
-            No child events recorded.
-          </div>
-        )}
-        {entries.length > 0 && visible.length === 0 && (
-          <div className="text-muted-foreground p-4 text-center text-sm">
-            No events match the active filters.
-          </div>
-        )}
-        {visible.map((e) => {
-          const key = `${e.type}-${e.id}`
-          const isSlow = span > 0 && (e.duration ?? 0) / span > 0.1
-          const isException = e.type === "exception"
-          return (
-            <div
-              key={key}
-              className="border-b last:border-b-0"
-              style={{
-                contentVisibility: "auto",
-                containIntrinsicSize: "0 28px",
-              }}
-            >
-              <HoverCard openDelay={150}>
-                <HoverCardTrigger asChild>
-                  <button
-                    type="button"
-                    onClick={() => setExpanded(expanded === key ? null : key)}
-                    className={cn(
-                      GRID,
-                      "hover:bg-muted/40 w-full px-2 py-1 text-left text-xs",
-                    )}
-                  >
-                    <span
-                      className={cn(
-                        "text-muted-foreground truncate font-mono",
-                        TYPE_COL,
-                      )}
-                    >
-                      {typeLabels[e.type] ?? e.type}
-                    </span>
-                    {e.type === "query" && e.sql ? (
-                      <SqlBlock sql={e.sql} />
-                    ) : (
-                      <span className="truncate font-mono">{e.label}</span>
-                    )}
-                    <div className="bg-muted/30 relative h-3 rounded">
-                      <Gridlines ticks={ticks} span={span} />
-                      {isException ? (
-                        <div
-                          className="absolute top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rotate-45 bg-red-500"
-                          style={{
-                            left: `${Math.min(100, (e.offset / span) * 100)}%`,
-                          }}
-                        />
-                      ) : (
-                        <div
-                          className={cn(
-                            "absolute top-0 h-full rounded",
-                            colors[e.type] ?? "bg-neutral-500",
-                            isSlow
-                              ? "ring-foreground/30 opacity-100 ring-1 ring-inset"
-                              : "opacity-70",
-                          )}
-                          style={{
-                            left: `${Math.min(100, (e.offset / span) * 100)}%`,
-                            width: `${Math.max(0.3, ((e.duration ?? 0) / span) * 100)}%`,
-                          }}
-                        />
-                      )}
-                    </div>
-                    <span
-                      className={cn(
-                        "text-muted-foreground text-right tabular-nums",
-                        isSlow && "text-foreground font-semibold",
-                      )}
-                    >
-                      {e.duration != null ? ms(e.duration) : "–"}
-                    </span>
-                  </button>
-                </HoverCardTrigger>
-                <HoverCardContent className="w-80" align="start">
-                  <EntryBody entry={e} />
-                </HoverCardContent>
-              </HoverCard>
-              {expanded === key && (
-                <div className="bg-muted/20 border-t px-4 py-2">
-                  <EntryBody entry={e} showSource />
-                </div>
-              )}
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}

data/app/frontend/components/railwatch/utilisation-bar.tsx

@@ -1,44 +0,0 @@
-import { cn } from "@/lib/utils"
-
-// busy-out-of-max as a hairline bar plus the raw pair, for thread pools and
-// connection pools. Same tone thresholds the Processes stat strip uses:
-// amber from 70%, red from 90%.
-export function UtilisationBar({
-  busy,
-  max,
-  className,
-}: {
-  busy: number | null
-  max: number | null
-  className?: string
-}) {
-  if (!max) return <span className="text-muted-foreground">–</span>
-  const ratio = Math.min(1, (busy ?? 0) / max)
-  return (
-    <span className={cn("flex items-center gap-1.5", className)}>
-      <span
-        role="meter"
-        aria-label="Utilisation"
-        aria-valuenow={busy ?? 0}
-        aria-valuemin={0}
-        aria-valuemax={max}
-        className="bg-muted-foreground/25 relative h-1.5 w-10 shrink-0 overflow-hidden rounded-full"
-      >
-        <span
-          className={cn(
-            "absolute inset-y-0 left-0 rounded-full",
-            ratio >= 0.9
-              ? "bg-danger"
-              : ratio >= 0.7
-                ? "bg-warning"
-                : "bg-live",
-          )}
-          style={{ width: `${Math.max(4, ratio * 100)}%` }}
-        />
-      </span>
-      <span className="font-mono tabular-nums">
-        {busy ?? 0}/{max}
-      </span>
-    </span>
-  )
-}

data/app/frontend/components/railwatch/window-picker.tsx

@@ -1,147 +0,0 @@
-import { CalendarClock } from "lucide-react"
-import { useState } from "react"
-
-import { Segmented, SegmentedItem } from "@/components/railwatch/segmented"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-import { WINDOWS, useWindow } from "@/hooks/use-window"
-
-function toLocalInputValue(iso: string) {
-  const d = new Date(iso)
-  const pad = (n: number) => String(n).padStart(2, "0")
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
-}
-
-function startOfDay(d: Date) {
-  const x = new Date(d)
-  x.setHours(0, 0, 0, 0)
-  return x
-}
-
-const PRESETS: { label: string; range: () => [Date, Date] }[] = [
-  { label: "Today", range: () => [startOfDay(new Date()), new Date()] },
-  {
-    label: "Yesterday",
-    range: () => {
-      const end = startOfDay(new Date())
-      const start = startOfDay(new Date(end.getTime() - 24 * 60 * 60 * 1000))
-      return [start, end]
-    },
-  },
-  {
-    label: "This week",
-    range: () => {
-      const start = startOfDay(new Date())
-      start.setDate(start.getDate() - start.getDay())
-      return [start, new Date()]
-    },
-  },
-]
-
-// Fixed 1h–30d toggle plus a "Custom" popover with quick presets and
-// from/to datetime-local inputs; both write through useWindow().
-export function WindowPicker() {
-  const { window, from, to, set, setRange, label } = useWindow()
-  const [open, setOpen] = useState(false)
-  const [fromInput, setFromInput] = useState(() =>
-    toLocalInputValue(
-      from ?? new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
-    ),
-  )
-  const [toInput, setToInput] = useState(() =>
-    toLocalInputValue(to ?? new Date().toISOString()),
-  )
-
-  const applyRange = (f: Date, t: Date) => {
-    setFromInput(toLocalInputValue(f.toISOString()))
-    setToInput(toLocalInputValue(t.toISOString()))
-    setRange(f.toISOString(), t.toISOString())
-    setOpen(false)
-  }
-
-  const applyInputs = () => {
-    const f = new Date(fromInput)
-    const t = new Date(toInput)
-    if (!Number.isNaN(f.getTime()) && !Number.isNaN(t.getTime()))
-      applyRange(f, t)
-  }
-
-  return (
-    <Segmented>
-      {WINDOWS.map((w) => (
-        <SegmentedItem
-          key={w.value}
-          active={window === w.value}
-          onClick={() => set(w.value)}
-          aria-label={w.label}
-        >
-          {w.value}
-        </SegmentedItem>
-      ))}
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <SegmentedItem
-            active={window === "custom"}
-            onClick={() => setOpen(true)}
-            aria-label="Custom range"
-            className="px-2"
-          >
-            <CalendarClock className="size-3" />
-            <span className="hidden sm:inline">
-              {window === "custom" ? label : "Custom"}
-            </span>
-          </SegmentedItem>
-        </PopoverTrigger>
-        <PopoverContent className="w-72" align="end">
-          <div className="flex flex-col gap-3">
-            <div className="flex flex-wrap gap-1">
-              {PRESETS.map((preset) => (
-                <Button
-                  key={preset.label}
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    const [f, t] = preset.range()
-                    applyRange(f, t)
-                  }}
-                >
-                  {preset.label}
-                </Button>
-              ))}
-            </div>
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="window-picker-from" className="text-xs">
-                From
-              </Label>
-              <Input
-                id="window-picker-from"
-                type="datetime-local"
-                value={fromInput}
-                onChange={(e) => setFromInput(e.target.value)}
-              />
-              <Label htmlFor="window-picker-to" className="text-xs">
-                To
-              </Label>
-              <Input
-                id="window-picker-to"
-                type="datetime-local"
-                value={toInput}
-                onChange={(e) => setToInput(e.target.value)}
-              />
-            </div>
-            <Button type="button" size="sm" onClick={applyInputs}>
-              Apply
-            </Button>
-          </div>
-        </PopoverContent>
-      </Popover>
-    </Segmented>
-  )
-}

data/app/frontend/components/ui/avatar.tsx

@@ -1,51 +0,0 @@
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-import type * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  )
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Avatar, AvatarFallback, AvatarImage }

data/app/frontend/components/ui/badge.tsx

@@ -1,46 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-import { type VariantProps, cva } from "class-variance-authority"
-import type * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-)
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }