railwatch 0.6.1 → 0.7.0

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

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

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

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

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

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