railwatch 0.6.1 → 0.7.0

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>
+  )
+}

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

@@ -0,0 +1,42 @@
+import { usePage } from "@inertiajs/react"
+import type { ReactNode } from "react"
+
+import type { SharedProps } from "@/types"
+
+import { LiveToggle } from "./live-toggle"
+import { StepPicker } from "./step-picker"
+import { WindowPicker } from "./window-picker"
+
+// Page title row. On phones the controls drop under the title and wrap onto
+// as many rows as they need, so nothing is clipped at the viewport edge.
+export function PageHeader({
+  title,
+  description,
+  actions,
+  withWindow = true,
+}: {
+  title: ReactNode
+  description?: ReactNode
+  actions?: ReactNode
+  withWindow?: boolean
+}) {
+  const { environment } = usePage<SharedProps>().props
+  return (
+    <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between md:gap-4">
+      <div className="min-w-0">
+        <h1 className="truncate text-xl font-semibold tracking-tight md:text-2xl">
+          {title}
+        </h1>
+        {description && (
+          <p className="text-muted-foreground mt-0.5 text-sm">{description}</p>
+        )}
+      </div>
+      <div className="flex flex-wrap items-center gap-2 md:shrink-0 md:justify-end">
+        {environment && <LiveToggle environmentId={environment.id} />}
+        {actions}
+        {withWindow && <StepPicker />}
+        {withWindow && <WindowPicker />}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,18 @@
+import { Segmented, SegmentedItem } from "@/components/railwatch/segmented"
+import { usePercentile } from "@/hooks/use-percentile"
+import type { Percentile } from "@/types"
+
+const PERCENTILES: Percentile[] = ["p50", "p95", "p99"]
+
+export function PercentilePicker() {
+  const { percentile, set } = usePercentile()
+  return (
+    <Segmented>
+      {PERCENTILES.map((p) => (
+        <SegmentedItem key={p} active={percentile === p} onClick={() => set(p)}>
+          {p}
+        </SegmentedItem>
+      ))}
+    </Segmented>
+  )
+}

data/app/frontend/components/railwatch/relative-time.tsx

@@ -0,0 +1,18 @@
+import { useTicker } from "@/hooks/use-ticker"
+import { ago, when } from "@/lib/format"
+
+export function RelativeTime({
+  iso,
+  className,
+}: {
+  iso: string | null | undefined
+  className?: string
+}) {
+  useTicker()
+  if (!iso) return <span className={className}>never</span>
+  return (
+    <span className={className} title={when(iso)}>
+      {ago(iso)}
+    </span>
+  )
+}

data/app/frontend/components/railwatch/saved-views.tsx

@@ -0,0 +1,232 @@
+import { router, usePage } from "@inertiajs/react"
+import {
+  Bookmark,
+  BookmarkPlus,
+  Check,
+  ChevronDown,
+  Link2,
+  Pin,
+  PinOff,
+  Trash2,
+} from "lucide-react"
+import { useState } from "react"
+
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils"
+import * as R from "@/routes"
+import type { SavedView, SharedProps } from "@/types"
+
+// A view's URL and the browser's differ only in the order of their query
+// params, so both are normalised (empty values dropped, keys sorted) before
+// comparing. Used by the menu and by both navigations to mark the view the
+// page is currently showing.
+function normalize(url: string) {
+  const [path, search] = url.split("?")
+  const params = [...new URLSearchParams(search)]
+    .filter(([, value]) => value !== "")
+    .sort(([a], [b]) => a.localeCompare(b))
+  return `${path}?${new URLSearchParams(params).toString()}`
+}
+
+export function isViewActive(currentUrl: string, viewUrl: string) {
+  return normalize(currentUrl) === normalize(viewUrl)
+}
+
+export function samePage(viewUrl: string, pageHref: string) {
+  return viewUrl.split("?")[0] === pageHref.split("?")[0]
+}
+
+// Saved views for one page, as a PageHeader action: a menu of everyone's
+// visible views, a dialog that saves the filters currently in the URL, and
+// a copy-link button for sharing the exact page you are looking at.
+export function SavedViewsMenu({ page }: { page: string }) {
+  const inertia = usePage<SharedProps>()
+  const { environment, saved_views: allViews = [] } = inertia.props
+  const [saving, setSaving] = useState(false)
+  const [name, setName] = useState("")
+  const [pinned, setPinned] = useState(true)
+  const [shared, setShared] = useState(true)
+  const [copied, setCopied] = useState(false)
+  const a = environment!.application_id
+  const e = environment!.id
+  const views = allViews.filter((v) => v.page === page)
+  const search = new URLSearchParams(inertia.url.split("?")[1] ?? "")
+
+  const viewPath = (v: SavedView) =>
+    R.applicationEnvironmentSavedViewPath(a, e, v.id)
+
+  const save = () => {
+    const params: Record<string, string> = {}
+    for (const [key, value] of search) {
+      if (key !== "window" && key !== "q" && value) params[key] = value
+    }
+    router.post(
+      R.applicationEnvironmentSavedViewsPath(a, e),
+      {
+        name: name.trim(),
+        page,
+        query: search.get("q") ?? "",
+        window: search.get("window") ?? inertia.props.window ?? "",
+        pinned,
+        shared,
+        params,
+      },
+      { preserveScroll: true },
+    )
+    setSaving(false)
+    setName("")
+  }
+
+  const copyLink = () => {
+    void navigator.clipboard?.writeText(globalThis.location.href)
+    setCopied(true)
+    globalThis.setTimeout(() => setCopied(false), 1500)
+  }
+
+  return (
+    <>
+      <div className="flex shrink-0 items-center gap-1">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm" className="h-8 gap-1.5 px-2">
+              <Bookmark className="size-3.5" />
+              <span className="label-caps text-foreground">Views</span>
+              <ChevronDown className="size-3 opacity-60" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-64">
+            <DropdownMenuLabel className="label-caps">
+              Saved views
+            </DropdownMenuLabel>
+            {views.length === 0 && (
+              <DropdownMenuItem disabled>No saved views yet</DropdownMenuItem>
+            )}
+            {views.map((v) => (
+              <DropdownMenuItem
+                key={v.id}
+                onSelect={() => router.visit(v.url)}
+                className={cn(isViewActive(inertia.url, v.url) && "bg-accent")}
+              >
+                <span className="truncate">{v.name}</span>
+                {v.mine && (
+                  <span className="ml-auto flex shrink-0 items-center gap-0.5">
+                    <button
+                      type="button"
+                      aria-label={`${v.pinned ? "Unpin" : "Pin"} ${v.name}`}
+                      className="text-muted-foreground hover:text-foreground p-0.5"
+                      onClick={(event) => {
+                        event.preventDefault()
+                        event.stopPropagation()
+                        router.patch(
+                          viewPath(v),
+                          { pinned: !v.pinned },
+                          { preserveScroll: true },
+                        )
+                      }}
+                    >
+                      {v.pinned ? (
+                        <PinOff className="size-3.5" />
+                      ) : (
+                        <Pin className="size-3.5" />
+                      )}
+                    </button>
+                    <button
+                      type="button"
+                      aria-label={`Delete ${v.name}`}
+                      className="text-muted-foreground hover:text-destructive p-0.5"
+                      onClick={(event) => {
+                        event.preventDefault()
+                        event.stopPropagation()
+                        router.delete(viewPath(v), { preserveScroll: true })
+                      }}
+                    >
+                      <Trash2 className="size-3.5" />
+                    </button>
+                  </span>
+                )}
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onSelect={() => setSaving(true)}>
+              <BookmarkPlus className="size-3.5" />
+              Save current view…
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 px-2"
+          aria-label="Copy link to this view"
+          onClick={copyLink}
+        >
+          {copied ? (
+            <Check className="size-3.5" />
+          ) : (
+            <Link2 className="size-3.5" />
+          )}
+        </Button>
+      </div>
+      <Dialog open={saving} onOpenChange={setSaving}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Save this view</DialogTitle>
+            <DialogDescription>
+              Keeps the filters, window, and sort currently in the URL under a
+              name you can link to.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-3">
+            <div className="grid gap-1.5">
+              <Label htmlFor="saved-view-name">Name</Label>
+              <Input
+                id="saved-view-name"
+                value={name}
+                onChange={(event) => setName(event.target.value)}
+                placeholder="5xx checkout requests"
+              />
+            </div>
+            <Label className="gap-2 font-normal">
+              <Checkbox
+                checked={pinned}
+                onCheckedChange={(value) => setPinned(value === true)}
+              />
+              Pin to the sidebar
+            </Label>
+            <Label className="gap-2 font-normal">
+              <Checkbox
+                checked={shared}
+                onCheckedChange={(value) => setShared(value === true)}
+              />
+              Share with the team
+            </Label>
+          </div>
+          <DialogFooter>
+            <Button size="sm" onClick={save} disabled={!name.trim()}>
+              Save view
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}