railwatch 0.9.3 → 1.0.0

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

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

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

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

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

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

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

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

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