railwatch 0.9.4 → 1.0.0

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

@@ -1,64 +0,0 @@
-import type { ReactNode } from "react"
-
-import { cn } from "@/lib/utils"
-
-// Nightwatch's period bar: a bordered pill holding mono buttons, the selected
-// one filled blue. Used for time windows, percentiles, and status tabs so
-// every segmented choice in the app looks the same.
-export function Segmented({
-  children,
-  className,
-}: {
-  children: ReactNode
-  className?: string
-}) {
-  return (
-    <div
-      className={cn(
-        "bg-card flex h-8 shrink-0 items-center gap-px rounded-lg border p-0.5",
-        className,
-      )}
-    >
-      {children}
-    </div>
-  )
-}
-
-export function SegmentedItem({
-  active,
-  onClick,
-  children,
-  className,
-  mono = true,
-  disabled,
-  "aria-label": ariaLabel,
-}: {
-  active: boolean
-  onClick: () => void
-  children: ReactNode
-  className?: string
-  mono?: boolean
-  disabled?: boolean
-  "aria-label"?: string
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      aria-pressed={active}
-      aria-label={ariaLabel}
-      className={cn(
-        "flex h-full min-w-8 items-center justify-center gap-1.5 rounded-md border px-2.5 text-xs whitespace-nowrap transition-colors",
-        mono && "font-mono uppercase",
-        active
-          ? "bg-primary border-primary text-primary-foreground"
-          : "text-muted-foreground hover:bg-accent hover:text-foreground border-transparent",
-        disabled && "cursor-not-allowed opacity-50",
-        className,
-      )}
-    >
-      {children}
-    </button>
-  )
-}

data/app/frontend/components/railwatch/series-chart.tsx

@@ -1,400 +0,0 @@
-import {
-  Area,
-  AreaChart,
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Line,
-  LineChart,
-  ReferenceLine,
-  XAxis,
-  YAxis,
-} from "recharts"
-
-import { useChartHover } from "@/components/railwatch/chart-hover"
-import {
-  type ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart"
-import { ms } from "@/lib/format"
-import type {
-  DeployMarker,
-  Percentile,
-  SeriesPoint,
-  SessionStatusPoint,
-} from "@/types"
-
-// Status vocabulary, same as the badges: ok is quiet grey so the amber and
-// red slices are what the eye lands on; latency lines use the accent for
-// the chosen percentile and a muted amber for the average.
-const config = {
-  count: { label: "OK", color: "var(--ok)" },
-  errors: { label: "5xx", color: "var(--danger)" },
-  client_errors: { label: "4xx", color: "var(--warning)" },
-  p50: { label: "p50", color: "var(--primary)" },
-  p95: { label: "p95", color: "var(--primary)" },
-  p99: { label: "p99", color: "var(--primary)" },
-  avg: { label: "avg", color: "var(--warning)" },
-} satisfies ChartConfig
-
-// Bucket width in ms, read off the data so the axis needs no page context:
-// a minute chart labels ticks by time, a day chart by date.
-function bucketWidth(data: { t: string }[]) {
-  if (data.length < 2) return 0
-  return new Date(data[1].t).getTime() - new Date(data[0].t).getTime()
-}
-
-const DAY = 24 * 60 * 60 * 1000
-
-function tickFormatter(data: { t: string }[]) {
-  const width = bucketWidth(data)
-  const span =
-    data.length > 1
-      ? new Date(data[data.length - 1].t).getTime() -
-        new Date(data[0].t).getTime()
-      : 0
-  if (width >= DAY || span > 2 * DAY)
-    return (t: string) =>
-      new Date(t).toLocaleDateString(undefined, {
-        month: "short",
-        day: "numeric",
-      })
-  return (t: string) =>
-    new Date(t).toLocaleTimeString(undefined, {
-      hour: "2-digit",
-      minute: "2-digit",
-    })
-}
-
-function stamp(t: string) {
-  const d = new Date(t)
-  return d.toLocaleString(undefined, {
-    day: "2-digit",
-    month: "short",
-    hour: "2-digit",
-    minute: "2-digit",
-  })
-}
-
-const axisTick = { fontSize: 10, fontFamily: "var(--font-mono)" }
-
-// A line only joins neighbouring points, so a bucket with data between two
-// quiet ones (common at a minute's width) would draw nothing. Mark those
-// lone points with a dot; everything else stays a plain line. Recharts can
-// call this with an index past the array it was built over (a live reload
-// swapping in a shorter series mid-render did, LC-43), so neighbours are
-// looked up defensively rather than assumed.
-export function loneDot(
-  data: Record<string, unknown>[],
-  key: string,
-  color: string,
-) {
-  const LoneDot = (props: { cx?: number; cy?: number; index?: number }) => {
-    const { cx, cy, index } = props
-    if (cx == null || cy == null || index == null) return <g key={index} />
-    const before = data[index - 1]?.[key] ?? null
-    const after = data[index + 1]?.[key] ?? null
-    if (before != null || after != null) return <g key={index} />
-    return <circle key={index} cx={cx} cy={cy} r={2} fill={color} />
-  }
-  return LoneDot
-}
-
-function markers(deploys: DeployMarker[] = []) {
-  return deploys.map((d) => (
-    <ReferenceLine
-      key={d.deploy}
-      x={new Date(d.at).toISOString()}
-      stroke="var(--primary)"
-      strokeDasharray="3 3"
-      label={{
-        value: d.ref,
-        position: "insideTopRight",
-        fontSize: 9,
-        fill: "var(--primary)",
-        fontFamily: "var(--font-mono)",
-      }}
-    />
-  ))
-}
-
-// Recharts calls onMouseMove with the hovered point's x value as
-// `activeLabel` (our bucket ISO timestamp) — feed that into ChartHoverProvider
-// so a table elsewhere on the page can highlight the matching row.
-function useBucketHover() {
-  const { setHoveredKey } = useChartHover()
-  return {
-    onMouseMove: (state: { activeLabel?: string | number }) => {
-      if (typeof state?.activeLabel === "string")
-        setHoveredKey(state.activeLabel)
-    },
-    onMouseLeave: () => setHoveredKey(null),
-  }
-}
-
-// Bucket-range caption under a chart, like Nightwatch's "02 Nov 18:00 UTC".
-function Range({ data }: { data: { t: string }[] }) {
-  if (data.length === 0) return null
-  return (
-    <div className="text-muted-foreground mt-1 flex justify-between font-mono text-[10px]">
-      <span>{stamp(data[0].t)}</span>
-      <span>{stamp(data[data.length - 1].t)}</span>
-    </div>
-  )
-}
-
-export function ThroughputChart({
-  data,
-  deploys,
-  label = "Requests",
-  className = "h-40",
-}: {
-  data: SeriesPoint[]
-  deploys?: DeployMarker[]
-  label?: string
-  className?: string
-}) {
-  const cfg = { ...config, count: { ...config.count, label } }
-  const hover = useBucketHover()
-  const tick = tickFormatter(data)
-  return (
-    <div>
-      <ChartContainer config={cfg} className={`${className} w-full`}>
-        <BarChart
-          data={data.map((d) => ({
-            ...d,
-            t: new Date(d.t).toISOString(),
-            ok: Math.max(0, d.count - d.errors - d.client_errors),
-          }))}
-          barCategoryGap={2}
-          onMouseMove={hover.onMouseMove}
-          onMouseLeave={hover.onMouseLeave}
-        >
-          <CartesianGrid vertical={false} strokeDasharray="2 4" />
-          <XAxis
-            dataKey="t"
-            tickFormatter={tick}
-            tickLine={false}
-            axisLine={false}
-            minTickGap={40}
-            tick={axisTick}
-          />
-          <YAxis
-            width={36}
-            tickLine={false}
-            axisLine={false}
-            tick={axisTick}
-            tickFormatter={(v) => compact(Number(v))}
-          />
-          <ChartTooltip
-            content={
-              <ChartTooltipContent labelFormatter={(v) => stamp(String(v))} />
-            }
-          />
-          <Bar
-            dataKey="ok"
-            name="count"
-            fill="var(--color-count)"
-            stackId="a"
-          />
-          <Bar
-            dataKey="client_errors"
-            fill="var(--color-client_errors)"
-            stackId="a"
-          />
-          <Bar
-            dataKey="errors"
-            fill="var(--color-errors)"
-            stackId="a"
-            radius={[2, 2, 0, 0]}
-          />
-          {markers(deploys)}
-        </BarChart>
-      </ChartContainer>
-      <Range data={data} />
-    </div>
-  )
-}
-
-// Release health's own vocabulary: sessions stacked by the worst status
-// they reached, so a regression reads as amber and red eating the band.
-const sessionConfig = {
-  ok: { label: "ok", color: "var(--ok)" },
-  errored: { label: "errored", color: "var(--warning)" },
-  crashed: { label: "crashed", color: "var(--danger)" },
-} satisfies ChartConfig
-
-export function SessionStatusChart({
-  data,
-  deploys,
-  className = "h-40",
-}: {
-  data: SessionStatusPoint[]
-  deploys?: DeployMarker[]
-  className?: string
-}) {
-  const hover = useBucketHover()
-  const tick = tickFormatter(data)
-  return (
-    <div>
-      <ChartContainer config={sessionConfig} className={`${className} w-full`}>
-        <AreaChart
-          data={data.map((d) => ({ ...d, t: new Date(d.t).toISOString() }))}
-          onMouseMove={hover.onMouseMove}
-          onMouseLeave={hover.onMouseLeave}
-        >
-          <CartesianGrid vertical={false} strokeDasharray="2 4" />
-          <XAxis
-            dataKey="t"
-            tickFormatter={tick}
-            tickLine={false}
-            axisLine={false}
-            minTickGap={40}
-            tick={axisTick}
-          />
-          <YAxis
-            width={36}
-            tickLine={false}
-            axisLine={false}
-            tick={axisTick}
-            tickFormatter={(v) => compact(Number(v))}
-          />
-          <ChartTooltip
-            content={
-              <ChartTooltipContent labelFormatter={(v) => stamp(String(v))} />
-            }
-          />
-          {(["ok", "errored", "crashed"] as const).map((key) => (
-            <Area
-              key={key}
-              dataKey={key}
-              stackId="sessions"
-              stroke={`var(--color-${key})`}
-              fill={`var(--color-${key})`}
-              fillOpacity={0.3}
-              strokeWidth={1.25}
-              isAnimationActive={false}
-            />
-          ))}
-          {markers(deploys)}
-        </AreaChart>
-      </ChartContainer>
-      <Range data={data} />
-    </div>
-  )
-}
-
-export function LatencyChart({
-  data,
-  deploys,
-  percentile = "p95",
-  className = "h-40",
-}: {
-  data: SeriesPoint[]
-  deploys?: DeployMarker[]
-  percentile?: Percentile
-  className?: string
-}) {
-  const hover = useBucketHover()
-  const tick = tickFormatter(data)
-  const points = data.map((d) => ({ ...d, t: new Date(d.t).toISOString() }))
-  return (
-    <div>
-      <ChartContainer config={config} className={`${className} w-full`}>
-        <LineChart
-          data={points}
-          onMouseMove={hover.onMouseMove}
-          onMouseLeave={hover.onMouseLeave}
-        >
-          <CartesianGrid vertical={false} strokeDasharray="2 4" />
-          <XAxis
-            dataKey="t"
-            tickFormatter={tick}
-            tickLine={false}
-            axisLine={false}
-            minTickGap={40}
-            tick={axisTick}
-          />
-          <YAxis
-            width={44}
-            tickLine={false}
-            axisLine={false}
-            tick={axisTick}
-            tickFormatter={(v) => ms(Number(v), 0)}
-          />
-          <ChartTooltip
-            content={
-              <ChartTooltipContent
-                labelFormatter={(v) => stamp(String(v))}
-                formatter={(value, name) => [
-                  value == null ? "—" : ms(Number(value)),
-                  String(name),
-                ]}
-              />
-            }
-          />
-          <Line
-            dataKey={percentile}
-            stroke={`var(--color-${percentile})`}
-            dot={loneDot(points, percentile, `var(--color-${percentile})`)}
-            strokeWidth={1.75}
-            isAnimationActive={false}
-          />
-          <Line
-            dataKey="avg"
-            stroke="var(--color-avg)"
-            dot={loneDot(points, "avg", "var(--color-avg)")}
-            strokeWidth={1.25}
-            strokeOpacity={0.8}
-            isAnimationActive={false}
-          />
-          {markers(deploys)}
-        </LineChart>
-      </ChartContainer>
-      <Range data={data} />
-    </div>
-  )
-}
-
-export function Sparkline({
-  data,
-  className = "h-10 w-32",
-  hoverKey,
-}: {
-  data: number[]
-  className?: string
-  hoverKey?: string
-}) {
-  const { hoveredKey, setHoveredKey } = useChartHover()
-  const active = hoverKey != null && hoveredKey === hoverKey
-  return (
-    <ChartContainer config={config} className={className}>
-      {/* recharts pads every side by 5px by default, which leaves a table
-          cell's 10px-tall sparkline no plot area at all; the stroke's
-          half-width is the only margin a chart this small needs. */}
-      <AreaChart
-        data={data.map((v) => ({ v }))}
-        margin={{ top: 1, right: 1, bottom: 1, left: 1 }}
-        onMouseEnter={hoverKey ? () => setHoveredKey(hoverKey) : undefined}
-        onMouseLeave={hoverKey ? () => setHoveredKey(null) : undefined}
-      >
-        <Area
-          dataKey="v"
-          stroke={active ? "var(--primary)" : "var(--muted-foreground)"}
-          fill={active ? "var(--primary)" : "var(--muted-foreground)"}
-          fillOpacity={active ? 0.35 : 0.15}
-          strokeWidth={active ? 2 : 1.25}
-          isAnimationActive={false}
-        />
-      </AreaChart>
-    </ChartContainer>
-  )
-}
-
-function compact(n: number) {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
-  if (n >= 1_000) return `${(n / 1_000).toFixed(n >= 10_000 ? 0 : 1)}k`
-  return String(n)
-}

data/app/frontend/components/railwatch/shortcuts-dialog.tsx

@@ -1,89 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-
-interface Shortcut {
-  keys: string[]
-  description: string
-}
-
-const GROUPS: { title: string; shortcuts: Shortcut[] }[] = [
-  {
-    title: "Navigation",
-    shortcuts: [
-      { keys: ["⌘", "K"], description: "Open command palette" },
-      { keys: ["g", "d"], description: "Go to dashboard" },
-      { keys: ["g", "o"], description: "Go to Overview" },
-      { keys: ["g", "r"], description: "Go to Requests" },
-      { keys: ["g", "j"], description: "Go to Jobs" },
-      { keys: ["g", "q"], description: "Go to Queries" },
-      { keys: ["g", "i"], description: "Go to Issues" },
-      { keys: ["?"], description: "Show this help" },
-    ],
-  },
-  {
-    title: "Lists (requests, jobs, queries, issues, logs, …)",
-    shortcuts: [
-      { keys: ["j"], description: "Move highlight down" },
-      { keys: ["k"], description: "Move highlight up" },
-      { keys: ["↵"], description: "Open highlighted row" },
-      { keys: ["o"], description: "Open highlighted row in a new tab" },
-      { keys: ["Esc"], description: "Clear highlight" },
-      { keys: ["/"], description: "Focus the filter bar" },
-    ],
-  },
-]
-
-export function ShortcutsDialog({
-  open,
-  onOpenChange,
-}: {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}) {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-sm">
-        <DialogHeader>
-          <DialogTitle>Keyboard shortcuts</DialogTitle>
-          <DialogDescription>Available anywhere in the app.</DialogDescription>
-        </DialogHeader>
-        <div className="flex flex-col gap-4">
-          {GROUPS.map((group) => (
-            <div key={group.title} className="flex flex-col gap-2">
-              <div className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
-                {group.title}
-              </div>
-              <ul className="flex flex-col gap-2">
-                {group.shortcuts.map((shortcut) => (
-                  <li
-                    key={shortcut.description}
-                    className="flex items-center justify-between text-sm"
-                  >
-                    <span className="text-muted-foreground">
-                      {shortcut.description}
-                    </span>
-                    <span className="flex items-center gap-1">
-                      {shortcut.keys.map((key, i) => (
-                        <kbd
-                          key={i}
-                          className="bg-muted rounded border px-1.5 py-0.5 font-mono text-xs"
-                        >
-                          {key}
-                        </kbd>
-                      ))}
-                    </span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}

data/app/frontend/components/railwatch/signal-toast.tsx

@@ -1,121 +0,0 @@
-import { X } from "lucide-react"
-import { toast } from "sonner"
-
-import { cn } from "@/lib/utils"
-
-// Notices spoken in the signal vocabulary the rest of the UI uses. The
-// aspect carries the meaning, so there is no icon to interpret: green is
-// clear (done, saved, sent), amber is caution (something to look at, still
-// safe), red is stop (this failed). The head sits at the left of the card
-// like a lineside signal; the lit lamp is the only colour on the card.
-export type ToastAspect = "clear" | "caution" | "stop"
-
-const LAMP_CLASS: Record<ToastAspect, string> = {
-  stop: "bg-danger",
-  caution: "bg-warning",
-  clear: "bg-live",
-}
-const LAMP_ORDER: ToastAspect[] = ["stop", "caution", "clear"]
-
-// Clear notices leave on their own; the line is clear and there is nothing
-// to act on. Caution and stop wait to be read.
-const DURATION: Record<ToastAspect, number> = {
-  clear: 4000,
-  caution: 8000,
-  stop: Infinity,
-}
-
-function Head({ aspect }: { aspect: ToastAspect }) {
-  return (
-    <span
-      aria-hidden
-      className="border-foreground/30 bg-background/60 inline-flex w-3 shrink-0 flex-col items-center justify-between rounded-full border px-px py-1"
-      style={{ height: 30 }}
-    >
-      {LAMP_ORDER.map((lamp) => (
-        <span key={lamp} className="relative inline-flex size-2">
-          {lamp === aspect && (
-            <span
-              className={cn(
-                "absolute inline-flex h-full w-full rounded-full opacity-40 blur-[2px]",
-                LAMP_CLASS[lamp],
-              )}
-            />
-          )}
-          <span
-            className={cn(
-              "relative inline-flex size-2 rounded-full",
-              lamp === aspect ? LAMP_CLASS[lamp] : "bg-neutral-400/15",
-            )}
-          />
-        </span>
-      ))}
-    </span>
-  )
-}
-
-// The card itself. `onDismiss` is what the X does; the marketing hero
-// renders one with no dismiss as a static example.
-export function SignalCard({
-  aspect,
-  title,
-  description,
-  onDismiss,
-  className,
-}: {
-  aspect: ToastAspect
-  title: string
-  description?: string
-  onDismiss?: () => void
-  className?: string
-}) {
-  const role = aspect === "stop" ? "alert" : "status"
-  return (
-    <div
-      role={onDismiss ? role : undefined}
-      data-aspect={aspect}
-      className={cn(
-        "bg-popover text-popover-foreground flex w-full items-start gap-3 rounded-lg border px-3.5 py-3 shadow-lg md:w-[360px]",
-        className,
-      )}
-    >
-      <Head aspect={aspect} />
-      <div className="min-w-0 flex-1 pt-0.5">
-        <p className="text-sm leading-snug font-medium">{title}</p>
-        {description && (
-          <p className="text-muted-foreground mt-0.5 text-xs leading-relaxed">
-            {description}
-          </p>
-        )}
-      </div>
-      {onDismiss && (
-        <button
-          type="button"
-          onClick={onDismiss}
-          aria-label="Dismiss"
-          className="text-muted-foreground hover:text-foreground -mt-0.5 -mr-1 rounded p-1"
-        >
-          <X className="size-3.5" />
-        </button>
-      )}
-    </div>
-  )
-}
-
-export function signalToast(
-  aspect: ToastAspect,
-  title: string,
-  description?: string,
-) {
-  return toast.custom(
-    (id) => (
-      <SignalCard
-        aspect={aspect}
-        title={title}
-        description={description}
-        onDismiss={() => toast.dismiss(id)}
-      />
-    ),
-    { duration: DURATION[aspect], unstyled: true },
-  )
-}

data/app/frontend/components/railwatch/sort-header.tsx

@@ -1,37 +0,0 @@
-import { ArrowDown, ArrowUp } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-// Clickable DataTable column header for a sortable numeric column. Dumb by
-// design: the page builds the sort/dir URL with its own route helper and
-// passes the click handler in.
-export function SortHeader({
-  label,
-  active,
-  dir,
-  onClick,
-}: {
-  label: string
-  active: boolean
-  dir: "asc" | "desc"
-  onClick: () => void
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={cn(
-        "hover:text-foreground inline-flex items-center gap-1",
-        active && "text-foreground font-semibold",
-      )}
-    >
-      {label}
-      {active &&
-        (dir === "asc" ? (
-          <ArrowUp className="size-3" />
-        ) : (
-          <ArrowDown className="size-3" />
-        ))}
-    </button>
-  )
-}