railwatch 0.6.1 → 0.7.0

data/app/frontend/components/railwatch/source-link.tsx

@@ -0,0 +1,57 @@
+import { usePage } from "@inertiajs/react"
+import { ExternalLink } from "lucide-react"
+
+import { sourceUrl } from "@/lib/source-link"
+import { cn } from "@/lib/utils"
+import type { SharedProps } from "@/types"
+
+// A "file:line" location, linked to the line on the code host (pinned to the
+// deploy that produced it) or opened in the viewer's editor, depending on
+// their profile. Renders plain text when we can't build a URL.
+export function SourceLink({
+  location,
+  deploy,
+  className,
+}: {
+  location: string
+  // The deploy the location came from, used as the git ref so the link points
+  // at the code that was actually running. (Named `deploy`, not `ref`: React
+  // treats a `ref` prop as an element ref.)
+  deploy?: string | null
+  className?: string
+}) {
+  const { auth, environment } = usePage<SharedProps>().props
+  const match = /^(.*):(\d+)$/.exec(location)
+  const url = match
+    ? sourceUrl({
+        file: match[1],
+        line: Number(match[2]),
+        repositoryUrl: environment?.repository_url,
+        ref: deploy,
+        defaultBranch: environment?.default_branch,
+        editor: auth.user.editor,
+        editorRoot: auth.user.editor_root,
+      })
+    : null
+
+  if (!url)
+    return (
+      <span className={cn("truncate font-mono text-xs", className)}>
+        {location}
+      </span>
+    )
+  const external = url.startsWith("http")
+  return (
+    <a
+      href={url}
+      {...(external ? { target: "_blank", rel: "noreferrer" } : {})}
+      className={cn(
+        "inline-flex min-w-0 items-center gap-1 font-mono text-xs hover:underline",
+        className,
+      )}
+    >
+      <span className="truncate">{location}</span>
+      <ExternalLink className="size-3 shrink-0 opacity-60" />
+    </a>
+  )
+}

data/app/frontend/components/railwatch/sparkline-cell.tsx

@@ -0,0 +1,14 @@
+import { Sparkline } from "@/components/railwatch/series-chart"
+
+// Compact trend cell for a DataTable row: a 32x10 area chart, no axes.
+// `hoverKey` (typically the row's group_hash) wires it into
+// ChartHoverProvider so hovering the row emphasizes its own sparkline.
+export function SparklineCell({
+  data,
+  hoverKey,
+}: {
+  data: number[]
+  hoverKey?: string
+}) {
+  return <Sparkline data={data} className="h-[10px] w-8" hoverKey={hoverKey} />
+}

data/app/frontend/components/railwatch/sql-block.tsx

@@ -0,0 +1,116 @@
+import { cn } from "@/lib/utils"
+
+const KEYWORDS = new Set([
+  "SELECT",
+  "FROM",
+  "WHERE",
+  "JOIN",
+  "LEFT",
+  "INNER",
+  "ON",
+  "AND",
+  "OR",
+  "ORDER",
+  "BY",
+  "GROUP",
+  "LIMIT",
+  "OFFSET",
+  "INSERT",
+  "INTO",
+  "VALUES",
+  "UPDATE",
+  "SET",
+  "DELETE",
+  "RETURNING",
+  "AS",
+  "IN",
+  "IS",
+  "NULL",
+  "NOT",
+  "DISTINCT",
+  "COUNT",
+  "SUM",
+  "AVG",
+  "MAX",
+  "MIN",
+  "CASE",
+  "WHEN",
+  "THEN",
+  "ELSE",
+  "END",
+])
+
+type TokenKind =
+  "identifier" | "string" | "placeholder" | "number" | "keyword" | "text"
+
+interface Token {
+  text: string
+  kind: TokenKind
+}
+
+// Quoted identifier | string literal | `?` bind placeholder | number | bare word.
+// Anything not matched (whitespace, punctuation) falls through as plain text.
+const TOKEN_RE =
+  /("(?:[^"]|"")*"|`(?:[^`]|``)*`)|('(?:[^']|'')*')|(\?)|(\b\d+(?:\.\d+)?\b)|(\b[A-Za-z_][A-Za-z_0-9]*\b)/g
+
+function tokenize(sql: string): Token[] {
+  const tokens: Token[] = []
+  let last = 0
+  TOKEN_RE.lastIndex = 0
+  let m: RegExpExecArray | null
+  while ((m = TOKEN_RE.exec(sql))) {
+    if (m.index > last)
+      tokens.push({ text: sql.slice(last, m.index), kind: "text" })
+    const [full, ident, str, placeholder, number] = m
+    if (ident) tokens.push({ text: full, kind: "identifier" })
+    else if (str) tokens.push({ text: full, kind: "string" })
+    else if (placeholder) tokens.push({ text: full, kind: "placeholder" })
+    else if (number) tokens.push({ text: full, kind: "number" })
+    else if (KEYWORDS.has(full.toUpperCase()))
+      tokens.push({ text: full, kind: "keyword" })
+    else tokens.push({ text: full, kind: "text" })
+    last = TOKEN_RE.lastIndex
+  }
+  if (last < sql.length) tokens.push({ text: sql.slice(last), kind: "text" })
+  return tokens
+}
+
+const toneClass: Record<TokenKind, string> = {
+  keyword: "text-primary font-semibold",
+  string: "text-emerald-600 dark:text-emerald-400",
+  number: "text-amber-600 dark:text-amber-400",
+  placeholder: "text-primary font-semibold",
+  identifier: "text-muted-foreground",
+  text: "",
+}
+
+export function SqlBlock({
+  sql,
+  wrap = false,
+  inline = false,
+  className,
+}: {
+  sql: string
+  wrap?: boolean
+  inline?: boolean
+  className?: string
+}) {
+  const tokens = tokenize(sql)
+  const Tag = inline ? "span" : "code"
+  return (
+    <Tag
+      className={cn(
+        "font-mono text-xs",
+        wrap ? "break-words whitespace-pre-wrap" : "block max-w-full truncate",
+        className,
+      )}
+      title={wrap ? undefined : sql}
+    >
+      {tokens.map((t, i) => (
+        <span key={i} className={toneClass[t.kind] || undefined}>
+          {t.text}
+        </span>
+      ))}
+    </Tag>
+  )
+}

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

@@ -0,0 +1,173 @@
+import { ArrowDown, ArrowUp } from "lucide-react"
+import type { ReactNode } from "react"
+
+import {
+  DIGIT_ROLL_ENABLED,
+  DigitRoll,
+} from "@/components/railwatch/digit-roll"
+import { useIsLive } from "@/hooks/use-live"
+import { useReducedMotion } from "@/hooks/use-reduced-motion"
+import { cn } from "@/lib/utils"
+
+function Delta({
+  current,
+  previous,
+  goodDirection,
+  caption,
+}: {
+  current: number
+  previous: number
+  goodDirection: "up" | "down"
+  caption?: ReactNode
+}) {
+  if (!previous) return null
+  const change = ((current - previous) / previous) * 100
+  if (change === 0) return null
+  const direction = change > 0 ? "up" : "down"
+  const good = direction === goodDirection
+  const Icon = direction === "up" ? ArrowUp : ArrowDown
+  return (
+    <>
+      <span
+        className={cn(
+          "inline-flex items-center gap-0.5 font-mono text-xs tabular-nums",
+          good ? "text-live" : "text-destructive",
+        )}
+      >
+        <Icon className="size-3" />
+        {Math.abs(change).toFixed(1)}%
+      </span>
+      {caption && (
+        <span className="text-muted-foreground text-[11px]">{caption}</span>
+      )}
+    </>
+  )
+}
+
+// A metric a page is happy to see move: the raw number, and the formatter
+// that turns it into what the cell reads. Passing this instead of `value` is
+// how a page opts into the digit roll, which is deliberately the wrong way
+// round from a prop that opts out -- a page that says nothing gets no
+// motion, so a new incident page (issues, executions, traces) cannot inherit
+// it by accident.
+export interface RollingValue {
+  value: number
+  format: (value: number) => string
+}
+
+// The rolling digits are decoration, so they are hidden from assistive tech
+// and the number itself sits beside them in one plain text node. Not an
+// aria-live region: a value that changes every few seconds read aloud all
+// day is not an improvement, and fast live regions misbehave across screen
+// readers anyway. A metric that genuinely needs announcing wants its own
+// debounced role="status" saying what happened, not the number.
+//
+// Four gates stand between a rolling number and motion on the screen, and
+// all of them have to be open: the global switch, the page having opted in
+// at all (this component only renders for `roll`), live updates actually
+// flowing, and the user not having asked for less motion. Live off, paused,
+// disconnected, or reduced motion each mean an instant swap -- which is
+// also WCAG 2.2.2's pause/stop mechanism: the live toggle in the page
+// header stops the motion, not just the data.
+function RollingStatValue({ value, format }: RollingValue) {
+  const live = useIsLive()
+  const reducedMotion = useReducedMotion()
+  const formatted = format(value)
+  const animate = DIGIT_ROLL_ENABLED && live && !reducedMotion
+  return (
+    <>
+      <span aria-hidden="true">
+        {animate ? <DigitRoll value={value} format={format} /> : formatted}
+      </span>
+      <span className="sr-only">{formatted}</span>
+    </>
+  )
+}
+
+// One metric. Nightwatch-style: a small uppercase mono label, a large
+// tabular number, and an optional sub-line. Renders as a cell, not a card,
+// so a row of them reads as one strip (see StatStrip); pass `card` to get
+// the standalone bordered version.
+export function Stat({
+  label,
+  value,
+  roll,
+  hint,
+  tone,
+  delta,
+  deltaCaption,
+  card = false,
+  className,
+}: {
+  label: string
+  hint?: ReactNode
+  tone?: "default" | "destructive" | "warning" | "success"
+  delta?: {
+    current: number
+    previous: number
+    goodDirection: "up" | "down"
+  }
+  // e.g. "vs previous 24 hours" — shown next to the delta so it's clear what
+  // period the percentage compares against.
+  deltaCaption?: ReactNode
+  card?: boolean
+  className?: string
+  // A pre-formatted value, or a `roll` the digits of which may animate --
+  // one or the other, never both.
+} & (
+  { value: ReactNode; roll?: never } | { value?: never; roll: RollingValue }
+)) {
+  return (
+    <div
+      className={cn(
+        "flex min-w-0 flex-col gap-1 px-4 py-3",
+        card && "bg-card rounded-lg border",
+        className,
+      )}
+    >
+      <div className="label-caps truncate">{label}</div>
+      <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
+        <div
+          className={cn(
+            "text-xl font-semibold tracking-tight tabular-nums sm:text-2xl",
+            tone === "destructive" && "text-destructive",
+            tone === "warning" && "text-warning",
+            tone === "success" && "text-live",
+          )}
+        >
+          {roll ? <RollingStatValue {...roll} /> : value}
+        </div>
+        {delta && <Delta {...delta} caption={deltaCaption} />}
+      </div>
+      {hint && (
+        <div className="text-muted-foreground truncate font-mono text-[11px]">
+          {hint}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// A row of Stats sharing one border, divided by hairlines, that wraps to
+// two columns on phones. The header strip on every Nightwatch page.
+export function StatStrip({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        "bg-card divide-border grid grid-cols-2 divide-y overflow-hidden rounded-lg border sm:divide-x sm:divide-y-0",
+        "[&>*:nth-child(odd)]:border-r sm:[&>*:nth-child(odd)]:border-r-0",
+        "[&>*:nth-child(odd):last-child]:col-span-2 [&>*:nth-child(odd):last-child]:border-r-0 sm:[&>*:nth-child(odd):last-child]:col-span-1",
+        "sm:auto-cols-fr sm:grid-flow-col",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}

data/app/frontend/components/railwatch/status-badge.tsx

@@ -0,0 +1,79 @@
+import { Badge } from "@/components/ui/badge"
+import { statusTone } from "@/lib/format"
+import { cn } from "@/lib/utils"
+
+// The one status vocabulary: grey is fine, amber is a warning (4xx, elevated),
+// red is broken (5xx, failed, unhandled, open). Small mono caps like
+// Nightwatch's [ALERT] / HANDLED / UNHANDLED chips.
+const tones: Record<string, string> = {
+  success: "border-live/30 bg-live/10 text-live",
+  warning: "border-warning/40 bg-warning/10 text-warning",
+  destructive: "border-danger/40 bg-danger/10 text-danger",
+  muted: "border-border bg-muted text-muted-foreground",
+}
+
+const base = "rounded-sm px-1.5 font-mono text-[10px] tracking-wider uppercase"
+
+export function StatusBadge({
+  status,
+  outcome,
+  label,
+}: {
+  status?: number | null
+  outcome?: string | null
+  label?: string
+}) {
+  const tone = statusTone(status, outcome)
+  return (
+    <Badge variant="outline" className={cn(base, "tabular-nums", tones[tone])}>
+      {label ?? outcome ?? status ?? "–"}
+    </Badge>
+  )
+}
+
+export function LevelBadge({ level }: { level: string }) {
+  const tone =
+    level === "error" || level === "fatal"
+      ? "destructive"
+      : level === "warn"
+        ? "warning"
+        : level === "event"
+          ? "success"
+          : "muted"
+  return (
+    <Badge variant="outline" className={cn(base, tones[tone])}>
+      {level}
+    </Badge>
+  )
+}
+
+export function IssueStatusBadge({ status }: { status: string }) {
+  const tone =
+    status === "open"
+      ? "destructive"
+      : status === "resolved"
+        ? "success"
+        : "muted"
+  return (
+    <Badge variant="outline" className={cn(base, tones[tone])}>
+      {status}
+    </Badge>
+  )
+}
+
+// Generic tinted chip for kinds and categories (EXCEPTION, REQUEST, JOB…).
+export function KindBadge({
+  children,
+  tone = "muted",
+  className,
+}: {
+  children: React.ReactNode
+  tone?: keyof typeof tones
+  className?: string
+}) {
+  return (
+    <Badge variant="outline" className={cn(base, tones[tone], className)}>
+      {children}
+    </Badge>
+  )
+}

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

@@ -0,0 +1,57 @@
+import { ChevronDown } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { STEP_LABELS, useStep } from "@/hooks/use-step"
+import type { Step } from "@/types"
+
+// Bucket width for every chart on the page, next to the window picker:
+// "1m", "5m", ... as a mono chip opening a menu of the widths the window
+// offers. Hidden when the window offers only one.
+export function StepPicker() {
+  const { step, steps, set } = useStep()
+  if (steps.length < 2) return null
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 gap-1 px-2 font-mono text-xs uppercase"
+          aria-label={`Chart buckets: ${STEP_LABELS[step]}`}
+        >
+          <span className="text-muted-foreground normal-case">per</span>
+          {step}
+          <ChevronDown className="text-muted-foreground size-3" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-44">
+        <DropdownMenuLabel className="label-caps">
+          Chart buckets
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup
+          value={step}
+          onValueChange={(value) => set(value as Step)}
+        >
+          {steps.map((s) => (
+            <DropdownMenuRadioItem key={s} value={s} className="text-xs">
+              <span className="font-mono uppercase">{s}</span>
+              <span className="text-muted-foreground ml-auto">
+                {STEP_LABELS[s]}
+              </span>
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}