railwatch 0.9.4 → 1.0.0

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

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

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

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

@@ -1,185 +0,0 @@
-import { usePage } from "@inertiajs/react"
-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.
-//
-// Only the live reload rolls. It keeps the page's URL, and anything that
-// changes the URL -- a new window, range, step or filter -- is a different
-// number rather than the same one moving, so the roll is keyed by the URL:
-// the new number is a fresh first paint, static and immediate, not a roll
-// held back behind the last one's coalescing window.
-function RollingStatValue({ value, format }: RollingValue) {
-  const { url } = usePage()
-  const live = useIsLive()
-  const reducedMotion = useReducedMotion()
-  const formatted = format(value)
-  const animate = DIGIT_ROLL_ENABLED && live && !reducedMotion
-  return (
-    <>
-      <span aria-hidden="true">
-        {animate ? (
-          <DigitRoll key={url} 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

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

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