railwatch 0.6.0 → 0.7.0

data/app/frontend/components/railwatch/json-viewer.tsx

@@ -0,0 +1,159 @@
+import { Check, ChevronDown, ChevronRight, Copy } from "lucide-react"
+import { useState } from "react"
+
+import { Button } from "@/components/ui/button"
+import { useClipboard } from "@/hooks/use-clipboard"
+import { cn } from "@/lib/utils"
+
+type Json = null | boolean | number | string | Json[] | { [key: string]: Json }
+
+function isContainer(v: unknown): v is Json[] | Record<string, Json> {
+  return v !== null && typeof v === "object"
+}
+
+function primitiveClass(v: Json) {
+  if (v === null) return "text-muted-foreground"
+  if (typeof v === "string") return "text-emerald-600 dark:text-emerald-400"
+  if (typeof v === "number") return "text-amber-600 dark:text-amber-400"
+  if (typeof v === "boolean") return "text-primary"
+  return ""
+}
+
+function Primitive({ value }: { value: string | number | boolean | null }) {
+  const text =
+    value === null
+      ? "null"
+      : typeof value === "string"
+        ? `"${value}"`
+        : String(value)
+  return <span className={primitiveClass(value)}>{text}</span>
+}
+
+function Node({
+  label,
+  value,
+  depth,
+  collapsed,
+}: {
+  label?: string
+  value: Json
+  depth: number
+  collapsed: boolean
+}) {
+  const [open, setOpen] = useState(!collapsed)
+  const indent = { paddingLeft: `${depth * 12}px` }
+
+  if (!isContainer(value)) {
+    return (
+      <div style={indent}>
+        {label !== undefined && (
+          <span className="text-muted-foreground">{label}: </span>
+        )}
+        <Primitive value={value} />
+      </div>
+    )
+  }
+
+  const entries = Array.isArray(value)
+    ? value.map((v, i) => [String(i), v] as const)
+    : Object.entries(value)
+  const [open_, close_] = Array.isArray(value) ? ["[", "]"] : ["{", "}"]
+
+  if (entries.length === 0) {
+    return (
+      <div style={indent}>
+        {label !== undefined && (
+          <span className="text-muted-foreground">{label}: </span>
+        )}
+        <span className="text-muted-foreground">
+          {open_}
+          {close_}
+        </span>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="hover:bg-muted/60 inline-flex items-center gap-0.5 rounded"
+        style={indent}
+      >
+        {open ? (
+          <ChevronDown className="text-muted-foreground size-3" />
+        ) : (
+          <ChevronRight className="text-muted-foreground size-3" />
+        )}
+        {label !== undefined && (
+          <span className="text-muted-foreground">{label}:</span>
+        )}
+        <span className="text-muted-foreground">
+          {open_}
+          {!open && `…${entries.length}…${close_}`}
+        </span>
+      </button>
+      {open && (
+        <div>
+          {entries.map(([k, v]) => (
+            <Node
+              key={k}
+              label={Array.isArray(value) ? undefined : k}
+              value={v}
+              depth={depth + 1}
+              collapsed={collapsed}
+            />
+          ))}
+          <div className="text-muted-foreground" style={indent}>
+            {close_}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function JsonViewer({
+  data,
+  collapsed = false,
+  className,
+}: {
+  data: unknown
+  collapsed?: boolean
+  className?: string
+}) {
+  const [, copy] = useClipboard()
+  const [copied, setCopied] = useState(false)
+  return (
+    <div
+      className={cn(
+        "bg-muted/60 relative rounded p-2 pr-8 font-mono text-xs",
+        className,
+      )}
+    >
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-sm"
+        className="absolute top-1 right-1"
+        onClick={() => {
+          void (async () => {
+            const ok = await copy(JSON.stringify(data, null, 2))
+            if (ok) {
+              setCopied(true)
+              setTimeout(() => setCopied(false), 1200)
+            }
+          })()
+        }}
+      >
+        {copied ? (
+          <Check className="size-3.5" />
+        ) : (
+          <Copy className="size-3.5" />
+        )}
+      </Button>
+      <Node value={data as Json} depth={0} collapsed={collapsed} />
+    </div>
+  )
+}

data/app/frontend/components/railwatch/live-dot.tsx

@@ -0,0 +1,78 @@
+import { useTicker } from "@/hooks/use-ticker"
+import { cn } from "@/lib/utils"
+
+function isFresh(lastSeenAt: string | null, thresholdMs: number): boolean {
+  if (lastSeenAt === null) return false
+  return Date.now() - new Date(lastSeenAt).getTime() < thresholdMs
+}
+
+const UNLIT = "bg-neutral-400/15"
+
+// A three-aspect signal head standing in for the usual status dot, lamps
+// in their real order: stop on top, caution in the middle, clear at the
+// bottom. Fresh telemetry lights the bottom lamp green and pings it; stale
+// lights the middle one amber; nothing yet leaves all three unlit. `erroring`
+// lights the top lamp red instead, for an environment that is reporting
+// but reporting failures. Same colour vocabulary as the empty-state signal
+// and the status badges.
+export function LiveDot({
+  lastSeenAt,
+  thresholdMs = 60_000,
+  erroring = false,
+  className,
+}: {
+  lastSeenAt: string | null
+  thresholdMs?: number
+  erroring?: boolean
+  className?: string
+}) {
+  useTicker()
+  const fresh = isFresh(lastSeenAt, thresholdMs)
+  const state =
+    lastSeenAt === null
+      ? "none"
+      : erroring
+        ? "stop"
+        : fresh
+          ? "clear"
+          : "caution"
+
+  return (
+    <span
+      className={cn(
+        "border-foreground/30 bg-background/60 inline-flex w-2.5 shrink-0 flex-col items-center justify-between rounded-full border px-px py-[3px]",
+        className,
+      )}
+      style={{ height: 24 }}
+    >
+      <span className="relative inline-flex size-1.5">
+        {state === "stop" && (
+          <span className="bg-danger absolute inline-flex h-full w-full animate-ping rounded-full opacity-75" />
+        )}
+        <span
+          className={cn(
+            "relative inline-flex size-1.5 rounded-full transition-colors duration-300",
+            state === "stop" ? "bg-danger" : UNLIT,
+          )}
+        />
+      </span>
+      <span
+        className={cn(
+          "inline-flex size-1.5 rounded-full transition-colors duration-300",
+          state === "caution" ? "bg-warning" : UNLIT,
+        )}
+      />
+      <span className="relative inline-flex size-1.5">
+        {state === "clear" && (
+          <span className="bg-live absolute inline-flex h-full w-full animate-ping rounded-full opacity-75" />
+        )}
+        <span
+          className={cn(
+            "relative inline-flex size-1.5 rounded-full transition-colors duration-300",
+            state === "clear" ? "bg-live" : UNLIT,
+          )}
+        />
+      </span>
+    </span>
+  )
+}

data/app/frontend/components/railwatch/live-toggle.tsx

@@ -0,0 +1,76 @@
+import { usePage } from "@inertiajs/react"
+
+import { badgeVariants } from "@/components/ui/badge"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { useLive } from "@/hooks/use-live"
+import { useTicker } from "@/hooks/use-ticker"
+import { ago } from "@/lib/format"
+import { cn } from "@/lib/utils"
+import type { SharedProps } from "@/types"
+
+import { LiveDot } from "./live-dot"
+
+// Small pill embedded in every environment page's PageHeader: pulses while
+// live ingest events are flowing, click to pause/resume the automatic
+// background reloads that keep the page's data fresh.
+export function LiveToggle({ environmentId }: { environmentId: number }) {
+  useTicker()
+  const { environment, telemetry_freshness: freshness } =
+    usePage<SharedProps>().props
+  const { connected, lastEventAt, lastRefreshedAt, paused, setPaused } =
+    useLive(environmentId)
+  const lastEventIso =
+    lastEventAt != null
+      ? new Date(lastEventAt).toISOString()
+      : (freshness?.received_at ?? environment?.last_seen_at ?? null)
+  const refreshedIso =
+    lastRefreshedAt != null ? new Date(lastRefreshedAt).toISOString() : null
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-pressed={paused}
+          aria-label={paused ? "Resume live updates" : "Pause live updates"}
+          onClick={() => setPaused(!paused)}
+          className={cn(
+            badgeVariants({ variant: "outline" }),
+            "hover:bg-accent h-7 cursor-pointer gap-1.5 rounded-md font-mono text-[11px] tracking-wide uppercase",
+          )}
+        >
+          <LiveDot
+            lastSeenAt={connected ? lastEventIso : null}
+            thresholdMs={10_000}
+          />
+          {paused ? "Paused" : connected ? "Live" : "Disconnected"}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>
+          {lastEventIso
+            ? `Telemetry received ${ago(lastEventIso)}`
+            : "No telemetry received yet"}
+        </p>
+        <p>
+          {refreshedIso
+            ? `Page refreshed ${ago(refreshedIso)}`
+            : "No live refresh yet"}
+        </p>
+        {freshness?.processing_lag_seconds != null && (
+          <p>
+            Ingest processing pending:{" "}
+            {Math.round(freshness.processing_lag_seconds)}s
+          </p>
+        )}
+        {freshness?.aggregated_at && (
+          <p>Charts updated {ago(freshness.aggregated_at)}</p>
+        )}
+      </TooltipContent>
+    </Tooltip>
+  )
+}

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

@@ -0,0 +1,112 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
+
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart"
+
+export interface MetricPoint {
+  t: string
+  value: number
+}
+
+const axisTick = { fontSize: 10, fontFamily: "var(--font-mono)" }
+
+// Time-of-day ticks up to two days, dates beyond, like series-chart.tsx.
+const DAY = 24 * 60 * 60 * 1000
+
+function tickFormatter(data: { t: string }[]) {
+  const span =
+    data.length > 1
+      ? new Date(data[data.length - 1].t).getTime() -
+        new Date(data[0].t).getTime()
+      : 0
+  if (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) {
+  return new Date(t).toLocaleString(undefined, {
+    day: "2-digit",
+    month: "short",
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}
+
+// One plain {t, value} metric over time — health samples rather than
+// rollups, so there is no ok/4xx/5xx vocabulary to stack. Same axes,
+// gridlines and bucket-range caption as series-chart.tsx.
+export function MetricChart({
+  label,
+  data,
+  format,
+  color = "var(--primary)",
+  className = "h-32",
+}: {
+  label: string
+  data: MetricPoint[]
+  format: (value: number) => string
+  color?: string
+  className?: string
+}) {
+  const config = { value: { label, color } } satisfies ChartConfig
+  const tick = tickFormatter(data)
+  return (
+    <div>
+      <ChartContainer config={config} className={`${className} w-full`}>
+        <AreaChart data={data}>
+          <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) => format(Number(v))}
+          />
+          <ChartTooltip
+            content={
+              <ChartTooltipContent
+                labelFormatter={(v) => stamp(String(v))}
+                formatter={(value) => [format(Number(value)), label]}
+              />
+            }
+          />
+          <Area
+            dataKey="value"
+            stroke="var(--color-value)"
+            fill="var(--color-value)"
+            fillOpacity={0.15}
+            strokeWidth={1.75}
+            isAnimationActive={false}
+          />
+        </AreaChart>
+      </ChartContainer>
+      {data.length > 0 && (
+        <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>
+      )}
+    </div>
+  )
+}

data/app/frontend/components/railwatch/mobile-page-switcher.tsx

@@ -0,0 +1,89 @@
+import { router, usePage } from "@inertiajs/react"
+import { Bookmark, ChevronDown } from "lucide-react"
+
+import { isViewActive, samePage } from "@/components/railwatch/saved-views"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { ENV_PAGE_GROUPS, envPages } from "@/lib/env-pages"
+import { cn } from "@/lib/utils"
+import type { SharedProps } from "@/types"
+
+// Phone-only replacement for the sidebar's environment navigation: the
+// current page's name in the header opens a menu of every environment page.
+export function MobilePageSwitcher() {
+  const page = usePage<SharedProps>()
+  const { environment } = page.props
+  if (!environment) return null
+  const items = envPages(
+    environment.application_id,
+    environment.id,
+    page.props.window as string,
+  )
+  const current = page.url.split("?")[0]
+  const pinnedViews = (page.props.saved_views ?? []).filter((v) => v.pinned)
+  // Overview's path is a prefix of every other page's, so prefer the
+  // longest matching path rather than the first.
+  const active =
+    items
+      .filter((i) => {
+        const path = i.href.split("?")[0]
+        return current === path || current.startsWith(path + "/")
+      })
+      .sort((a, b) => b.href.length - a.href.length)[0] ?? items[0]
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="flex min-w-0 items-center gap-1 text-sm font-medium">
+        {active.icon && <active.icon className="size-4 shrink-0 opacity-70" />}
+        <span className="truncate">{active.title}</span>
+        <ChevronDown className="size-3.5 shrink-0 opacity-60" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="start"
+        className="max-h-[70vh] w-60 overflow-y-auto"
+      >
+        {ENV_PAGE_GROUPS.map((group, gi) => (
+          <div key={group.key}>
+            {gi > 0 && <DropdownMenuSeparator />}
+            <DropdownMenuLabel className="label-caps">
+              {group.title}
+            </DropdownMenuLabel>
+            {items
+              .filter((i) => i.group === group.key)
+              .map((item) => (
+                <div key={item.title}>
+                  <DropdownMenuItem
+                    onSelect={() => router.visit(item.href)}
+                    className={item === active ? "bg-accent" : undefined}
+                  >
+                    {item.icon && <item.icon className="size-4" />}
+                    {item.title}
+                  </DropdownMenuItem>
+                  {pinnedViews
+                    .filter((view) => samePage(view.url, item.href))
+                    .map((view) => (
+                      <DropdownMenuItem
+                        key={view.id}
+                        onSelect={() => router.visit(view.url)}
+                        className={cn(
+                          "pl-8 text-xs",
+                          isViewActive(page.url, view.url) && "bg-accent",
+                        )}
+                      >
+                        <Bookmark className="size-3.5 opacity-60" />
+                        {view.name}
+                      </DropdownMenuItem>
+                    ))}
+                </div>
+              ))}
+          </div>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

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

@@ -0,0 +1,91 @@
+import { Link, router } from "@inertiajs/react"
+import { RefreshCwIcon } from "lucide-react"
+
+import { CopyBlock } from "@/components/railwatch/copy-block"
+import { LiveDot } from "@/components/railwatch/live-dot"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { settingsProfilePath } from "@/routes"
+
+// Shown on Overview and the Application show page while an environment has
+// no events yet (environment.last_seen_at is null): a step list to wire up
+// the gem plus a "waiting for first event..." status that live-checks via
+// router.reload (no full navigation needed once events start arriving).
+export function Onboarding({
+  tokenPrefix,
+  newToken,
+  className,
+}: {
+  tokenPrefix: string
+  newToken?: string | null
+  className?: string
+}) {
+  const token = newToken ?? `${tokenPrefix}…`
+  const checkNow = () => router.reload()
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle>Set up this environment</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <ol className="list-inside list-decimal space-y-3 text-sm">
+          <li>
+            Add the gem
+            <CopyBlock code={'gem "railwatch"'} className="mt-1.5" />
+          </li>
+          <li>
+            Run the generator
+            <CopyBlock
+              code="bin/rails generate railwatch:install --cloud"
+              className="mt-1.5"
+            />
+          </li>
+          <li>
+            Set the token in the app&apos;s environment
+            <CopyBlock code={`RAILWATCH_TOKEN=${token}`} className="mt-1.5" />
+            {!newToken && (
+              <p className="text-muted-foreground mt-1 text-xs">
+                Showing the token prefix only. The full token is shown once,
+                right after an environment is created.
+              </p>
+            )}
+          </li>
+          <li>
+            Check every piece is wired up
+            <CopyBlock code="bin/rails railwatch:doctor" className="mt-1.5" />
+            <p className="text-muted-foreground mt-1 text-xs">
+              Prints a ✓/✗ line per check — token, ingest, middleware, routes,
+              deploy marker, browser client, test matchers — and exits non-zero
+              if anything required is missing.
+            </p>
+          </li>
+          <li>
+            Connect your AI assistant
+            <p className="text-muted-foreground mt-1 text-xs">
+              Generate a personal token on your{" "}
+              <Link
+                href={settingsProfilePath()}
+                className="underline underline-offset-4"
+              >
+                profile page
+              </Link>{" "}
+              for paste-ready Claude Code, Cursor, VS Code, and Zed config.
+            </p>
+          </li>
+          <li>Deploy</li>
+        </ol>
+        <div className="flex items-center justify-between border-t pt-3">
+          <div className="text-muted-foreground flex items-center gap-2 text-xs">
+            <LiveDot lastSeenAt={null} />
+            Waiting for first event…
+          </div>
+          <Button type="button" variant="outline" size="sm" onClick={checkNow}>
+            <RefreshCwIcon className="size-3.5" />
+            Check now
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

data/app/frontend/components/railwatch/origin-identity.tsx

@@ -0,0 +1,84 @@
+import { Link } from "@inertiajs/react"
+
+import { tenantPath } from "@/pages/tenants/tenant-path"
+import * as R from "@/routes"
+import type { TelemetryTimeParams, Window, WindowRange } from "@/types"
+
+export interface OriginIdentityData {
+  user_ref: string | null
+  tenant: string | null
+  person: { ref: string; name: string } | null
+}
+
+function personPath(
+  applicationId: number,
+  environmentId: number,
+  ref: string,
+  timeParams: TelemetryTimeParams,
+) {
+  const url = String(
+    R.applicationEnvironmentPersonPath(applicationId, environmentId, ref, {
+      ...timeParams,
+    }),
+  )
+  const [path, query] = url.split("?")
+  return `${path.replace(/\./g, "%2E")}${query ? `?${query}` : ""}`
+}
+
+interface Props extends OriginIdentityData {
+  applicationId: number
+  environmentId: number
+  kind: "user" | "tenant"
+  window?: Window
+  range?: WindowRange
+}
+
+function identityTimeParams(
+  window: Window | undefined,
+  range: WindowRange | undefined,
+): TelemetryTimeParams {
+  if (window === "custom") {
+    if (!range) throw new Error("Custom telemetry window requires a range")
+    return { from: range.from, to: range.to }
+  }
+  return { window: window ?? "24h" }
+}
+
+// A propagated job identity describes the enqueue origin. A Person link is
+// only offered when this environment has a matching user record; the raw ref
+// remains useful for older payloads that never emitted one.
+export function OriginIdentity({
+  applicationId,
+  environmentId,
+  kind,
+  person,
+  range,
+  tenant,
+  user_ref,
+  window,
+}: Props) {
+  if (kind === "user") {
+    if (!user_ref) return <span className="text-muted-foreground">–</span>
+    if (!person) return <span className="font-mono text-xs">{user_ref}</span>
+    const timeParams = identityTimeParams(window, range)
+    return (
+      <Link
+        className="font-mono text-xs hover:underline"
+        href={personPath(applicationId, environmentId, person.ref, timeParams)}
+      >
+        {person.name}
+      </Link>
+    )
+  }
+
+  if (!tenant) return <span className="text-muted-foreground">–</span>
+  const timeParams = identityTimeParams(window, range)
+  return (
+    <Link
+      className="font-mono text-xs hover:underline"
+      href={tenantPath(applicationId, environmentId, tenant, timeParams)}
+    >
+      {tenant}
+    </Link>
+  )
+}