railwatch 0.9.4 → 1.0.0

data/app/frontend/pages/issues/show.tsx

@@ -1,1367 +0,0 @@
-import { Form, Head, Link, router } from "@inertiajs/react"
-import { Check, ClipboardCopy, GitMerge, Globe, Split } from "lucide-react"
-import { useEffect, useState } from "react"
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  ReferenceLine,
-  XAxis,
-  YAxis,
-} from "recharts"
-
-import { DataTable } from "@/components/railwatch/data-table"
-import {
-  Breadcrumbs,
-  BrowserBreadcrumbs,
-  type BrowserCrumb,
-  ExceptionCard,
-} from "@/components/railwatch/frames"
-import { JsonViewer } from "@/components/railwatch/json-viewer"
-import { RelativeTime } from "@/components/railwatch/relative-time"
-import { SourceLink } from "@/components/railwatch/source-link"
-import { Stat, StatStrip } from "@/components/railwatch/stat"
-import { IssueStatusBadge } from "@/components/railwatch/status-badge"
-import { Avatar, AvatarFallback } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import {
-  type ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart"
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { Textarea } from "@/components/ui/textarea"
-import { useClipboard } from "@/hooks/use-clipboard"
-import { useInitials } from "@/hooks/use-initials"
-import AppLayout from "@/layouts/app-layout"
-import { executionPath } from "@/lib/execution-path"
-import { ago, bytes, count, when } from "@/lib/format"
-import * as R from "@/routes"
-import type { ExceptionDetail, IssueRow, TimelineEntry } from "@/types"
-
-// A 30-bar chart has no room to print deploy refs: on a week with a
-// deploy a day they overprint into noise. The dashed line marks the day
-// and the tooltip names what shipped.
-function deploysOn(deploys: { ref: string; at: string }[], day: string) {
-  return deploys.filter((d) => d.at.slice(0, 10) === day).map((d) => d.ref)
-}
-
-const dailyConfig = {
-  count: { label: "Occurrences", color: "var(--chart-5)" },
-} satisfies ChartConfig
-
-const detectionConfig = {
-  value: { label: "Measured value", color: "var(--chart-2)" },
-} satisfies ChartConfig
-
-const groupingHints: Record<string, string> = {
-  report: "Fingerprint passed to Railwatch.report.",
-  error: "Fingerprint from the error's own #railwatch_fingerprint.",
-  resolver: "Fingerprint from the app's Railwatch.fingerprint block.",
-  default:
-    "Railwatch's default: exception class, top in-app frame, and the message with its variable data removed.",
-}
-
-interface Occurrence {
-  id: number
-  message: string
-  handled: boolean
-  occurred_at: string
-  execution_id: string | null
-  execution_source: string | null
-  execution_preview: string | null
-  user_ref: string | null
-  tenant: string | null
-  deploy: string | null
-  server: string | null
-}
-interface DetectionRecord {
-  record_type: string
-  record_id: number
-  group_hash: string
-  execution_id: string | null
-  execution_source: string | null
-  execution_preview: string | null
-  name: string
-  occurred_at: string
-  duration_ms: number
-  deploy: string | null
-  status?: number | null
-  outcome?: string | null
-  source?: string | null
-  connection?: string | null
-  role?: string | null
-  drilldown: DetectionDrilldown | null
-}
-interface DetectionDrilldown {
-  kind: string
-  execution_id?: string | null
-  group_hash?: string | null
-}
-
-// Queries drill into their group; everything else is an execution, so reuse
-// the shared execution-path helper (which accepts both the "job" child wire
-// name and the "job_attempt" parent kind) rather than a second copy of it.
-function detectionPath(
-  issue: Props["issue"],
-  drilldown: DetectionDrilldown | null,
-): string | null {
-  if (!drilldown) return null
-  if (drilldown.kind === "query") {
-    return drilldown.group_hash
-      ? R.applicationEnvironmentQueryPath(
-          issue.application.id,
-          issue.environment.id,
-          drilldown.group_hash,
-        )
-      : null
-  }
-  return executionPath({
-    applicationId: issue.application.id,
-    environmentId: issue.environment.id,
-    source: drilldown.kind,
-    executionId: drilldown.execution_id,
-  })
-}
-interface DetectionDetail {
-  kind: "performance" | "anomaly"
-  available: boolean
-  message?: string
-  telemetry_type?: string
-  telemetry_group_hash?: string
-  target?: string
-  metric?: string
-  unit?: string
-  count_label: string
-  breached_windows: number
-  event_count?: number
-  window?: { from: string; to: string; minutes: number }
-  measurement?: { value?: number; limit?: number }
-  baseline?: {
-    mean?: number
-    stddev?: number
-    sigmas?: number
-    days?: number
-    deviation?: number
-  }
-  rule?: {
-    type?: string
-    task_key?: string
-    schedule?: string
-    last_run?: string
-    expected?: string
-  }
-  representative_records?: DetectionRecord[]
-  trend?: { day: string; value: number | null; count: number }[]
-  deploy_comparison?: {
-    deploy: string
-    events: number
-    avg_ms: number
-    max_ms: number
-  }[]
-}
-interface Props {
-  issue: IssueRow & {
-    first_seen_at: string
-    resolved_at: string | null
-    resolved_in_deploy: string | null
-    regressed_at: string | null
-    sample: Record<string, unknown>
-    application: { id: number; name: string }
-    environment: { id: number; name: string }
-  }
-  latest:
-    (ExceptionDetail & { ruby_version?: string; rails_version?: string }) | null
-  detection: DetectionDetail | null
-  occurrences: Occurrence[]
-  attachments: {
-    id: number
-    name: string
-    content_type: string | null
-    bytes: number
-    truncated: boolean
-    viewable: boolean
-    occurred_at: string
-    execution_id: string | null
-    execution_preview: string | null
-  }[]
-  breadcrumbs: TimelineEntry[]
-  browser_breadcrumbs: BrowserCrumb[]
-  fingerprint: string[]
-  fingerprint_source: string | null
-  distinct_messages: number
-  top_messages: { message: string; count: number }[]
-  daily: { day: string; count: number }[]
-  by_deploy: Record<string, number>
-  by_tenant: Record<string, number>
-  comments: { id: number; body: string; user: string; created_at: string }[]
-  members: { id: number; name: string }[]
-  deploys: { deploy: string; ref: string; at: string }[]
-  related_issues: {
-    id: number
-    key: string
-    title: string
-    status: string
-    environment: { id: number; name: string }
-  }[]
-  activities: {
-    id: number
-    kind: string
-    data: Record<string, unknown>
-    user: { id: number; name: string } | null
-    created_at: string
-  }[]
-  merged_into: { id: number; key: string; title: string } | null
-  merged_issues: { id: number; key: string; title: string }[]
-  alerts: {
-    id: number
-    event: string
-    status: string
-    sent_at: string | null
-    error: string | null
-    integration: { kind: string; name: string }
-  }[]
-}
-
-function activitySentence(
-  a: Props["activities"][number],
-  membersById: Map<number, string>,
-) {
-  const d = a.data as Record<string, string | number | null>
-  switch (a.kind) {
-    case "created":
-      return "opened this issue"
-    case "status":
-      return `changed status ${d.from} → ${d.to}`
-    case "priority":
-      return `changed priority ${d.from} → ${d.to}`
-    case "assignee": {
-      const from = d.from_id
-        ? (membersById.get(Number(d.from_id)) ?? "someone")
-        : "unassigned"
-      const to = d.to_id
-        ? (membersById.get(Number(d.to_id)) ?? "someone")
-        : "unassigned"
-      return `reassigned ${from} → ${to}`
-    }
-    case "merge":
-      return `merged this issue into ${d.target_key}`
-    case "absorbed":
-      return `merged ${d.source_key} into this issue (${d.occurrences} events)`
-    case "unmerge":
-      return "unmerged this issue"
-    case "split": {
-      const into = Array.isArray(a.data.into) ? (a.data.into as string[]) : []
-      return d.from_key
-        ? `split ${d.occurrences} events out of ${d.from_key}`
-        : `split ${d.occurrences} events by message into ${into.join(", ")}`
-    }
-    case "regressed":
-      return "regressed — a new occurrence reopened this issue"
-    case "alert":
-      return `sent a "${d.event}" alert via ${d.integration}`
-    case "agent":
-      return `acted via ${String(d.agent ?? "an AI agent")} (MCP)`
-    case "comment":
-      return "commented"
-    default:
-      return String(a.kind)
-  }
-}
-
-function copyForAiText(p: Props) {
-  const i = p.issue
-  const lines: string[] = []
-  lines.push(`# ${i.key}: ${i.title}`)
-  if (i.culprit) lines.push(`Culprit: ${i.culprit}`)
-  lines.push(`Environment: ${i.application.name} / ${i.environment.name}`)
-  if (p.detection?.available) {
-    lines.push("")
-    lines.push("## Detector measurement")
-    lines.push(
-      `${p.detection.metric} for ${p.detection.target}: ${measurement(p.detection.measurement?.value, p.detection.unit)}`,
-    )
-    if (p.detection.measurement?.limit != null) {
-      lines.push(
-        `Limit: ${measurement(p.detection.measurement.limit, p.detection.unit)}`,
-      )
-    }
-    if (p.detection.baseline?.mean != null) {
-      lines.push(
-        `Baseline: ${measurement(p.detection.baseline.mean, p.detection.unit)} (${p.detection.baseline.sigmas}σ)`,
-      )
-    }
-    lines.push(
-      `Underlying telemetry: ${p.detection.telemetry_type} ${p.detection.telemetry_group_hash}`,
-    )
-  }
-  if (p.latest) {
-    lines.push("")
-    lines.push(`## ${p.latest.class_name}`)
-    lines.push(p.latest.message)
-    const appFrames = p.latest.frames.filter((f) => f.in_app)
-    if (appFrames.length > 0) {
-      lines.push("")
-      lines.push("### Frames")
-      for (const f of appFrames) {
-        lines.push(`${f.file}:${f.line} in \`${f.function}\``)
-        if (f.code) {
-          for (const [ln, src] of Object.entries(f.code)) {
-            lines.push(`${ln}: ${src}`)
-          }
-        }
-      }
-    }
-    if (p.latest.context) {
-      lines.push("")
-      lines.push("### Context")
-      lines.push(String(p.latest.context))
-    }
-  }
-  return lines.join("\n")
-}
-
-function measurement(value: number | undefined, unit: string | undefined) {
-  if (value == null) return "–"
-  if (unit === "milliseconds") return `${value.toLocaleString()} ms`
-  if (unit === "percent") return `${value.toLocaleString()}%`
-  if (unit === "events_per_minute") return `${value.toLocaleString()} / min`
-  return value.toLocaleString()
-}
-
-function DetectionPanel({
-  issue,
-  detail,
-}: {
-  issue: Props["issue"]
-  detail: DetectionDetail
-}) {
-  // Issues opened before typed detection existed still carry their original
-  // detector sample. Show it rather than replacing real detail with a notice.
-  if (!detail.available) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Detector sample</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <JsonViewer data={issue.sample} />
-        </CardContent>
-      </Card>
-    )
-  }
-  const records = detail.representative_records ?? []
-  const deploys = detail.deploy_comparison ?? []
-  const trend = detail.trend ?? []
-  const missedSchedule = detail.metric === "missed"
-  return (
-    <>
-      <Card>
-        <CardHeader>
-          <CardTitle>
-            {missedSchedule
-              ? "Missed scheduled task"
-              : detail.kind === "anomaly"
-                ? "Anomaly measurement"
-                : "Threshold breach"}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-            <div>
-              <p className="text-muted-foreground text-xs">Target</p>
-              <p className="font-mono text-sm">{detail.target}</p>
-            </div>
-            <div>
-              <p className="text-muted-foreground text-xs">
-                {missedSchedule ? "Schedule" : "Metric"}
-              </p>
-              <p className="text-sm">
-                {missedSchedule ? detail.rule?.schedule : detail.metric}
-              </p>
-            </div>
-            <div>
-              <p className="text-muted-foreground text-xs">
-                {missedSchedule ? "Expected" : "Measured"}
-              </p>
-              <p className="text-sm font-semibold">
-                {missedSchedule && detail.rule?.expected
-                  ? when(detail.rule.expected)
-                  : measurement(detail.measurement?.value, detail.unit)}
-              </p>
-            </div>
-            <div>
-              <p className="text-muted-foreground text-xs">
-                {missedSchedule
-                  ? "Last run"
-                  : detail.kind === "anomaly"
-                    ? "Baseline"
-                    : "Limit"}
-              </p>
-              <p className="text-sm">
-                {missedSchedule && detail.rule?.last_run
-                  ? when(detail.rule.last_run)
-                  : detail.kind === "anomaly"
-                    ? measurement(detail.baseline?.mean, detail.unit)
-                    : measurement(detail.measurement?.limit, detail.unit)}
-              </p>
-            </div>
-          </div>
-          <p className="text-muted-foreground text-xs">
-            {detail.telemetry_type} group {detail.telemetry_group_hash} ·{" "}
-            {detail.window?.minutes} minute window
-            {detail.baseline?.sigmas != null &&
-              ` · ${detail.baseline.sigmas}σ above a ${detail.baseline.days}-day baseline`}
-          </p>
-        </CardContent>
-      </Card>
-      {trend.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle>{detail.metric} trend (30d)</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ChartContainer config={detectionConfig} className="h-48 w-full">
-              <BarChart data={trend}>
-                <CartesianGrid vertical={false} />
-                <XAxis
-                  dataKey="day"
-                  tickLine={false}
-                  axisLine={false}
-                  minTickGap={24}
-                  tickFormatter={(value: string) =>
-                    new Date(value).toLocaleDateString(undefined, {
-                      month: "short",
-                      day: "numeric",
-                    })
-                  }
-                />
-                <YAxis width={45} tickLine={false} axisLine={false} />
-                <ChartTooltip content={<ChartTooltipContent />} />
-                <Bar dataKey="value" fill="var(--color-value)" radius={2} />
-              </BarChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-      )}
-      <Card>
-        <CardHeader>
-          <CardTitle>Representative telemetry</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <DataTable
-            rows={records}
-            rowKey={(record) => `${record.record_type}-${record.record_id}`}
-            empty="Representative raw telemetry has been pruned."
-            onRowClick={(record) => {
-              const path = detectionPath(issue, record.drilldown)
-              if (path) router.visit(path)
-            }}
-            columns={[
-              {
-                key: "when",
-                header: "When",
-                cell: (record) => (
-                  <span className="text-xs">{when(record.occurred_at)}</span>
-                ),
-              },
-              {
-                key: "record",
-                header: "Record",
-                className: "max-w-0",
-                cell: (record) => (
-                  <span className="block truncate font-mono text-xs">
-                    {record.name}
-                  </span>
-                ),
-              },
-              {
-                key: "duration",
-                header: "Duration",
-                align: "right",
-                cell: (record) => `${record.duration_ms.toLocaleString()} ms`,
-              },
-              {
-                key: "deploy",
-                header: "Deploy",
-                cell: (record) => (
-                  <span className="font-mono text-xs">
-                    {record.deploy?.slice(0, 10)}
-                  </span>
-                ),
-              },
-            ]}
-          />
-        </CardContent>
-      </Card>
-      {deploys.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle>Deploy comparison (30d)</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <DataTable
-              rows={deploys}
-              rowKey={(deploy) => deploy.deploy}
-              columns={[
-                {
-                  key: "deploy",
-                  header: "Deploy",
-                  cell: (deploy) => (
-                    <span className="font-mono text-xs">
-                      {deploy.deploy.slice(0, 12)}
-                    </span>
-                  ),
-                },
-                {
-                  key: "events",
-                  header: "Events",
-                  align: "right",
-                  cell: (deploy) => count(deploy.events),
-                },
-                {
-                  key: "avg",
-                  header: "Avg",
-                  align: "right",
-                  cell: (deploy) => `${deploy.avg_ms} ms`,
-                },
-                {
-                  key: "max",
-                  header: "Max",
-                  align: "right",
-                  cell: (deploy) => `${deploy.max_ms} ms`,
-                },
-              ]}
-            />
-          </CardContent>
-        </Card>
-      )}
-    </>
-  )
-}
-
-export default function IssueShow(p: Props) {
-  const i = p.issue
-  const act = (action_name: string, extra: Record<string, unknown> = {}) =>
-    router.patch(
-      R.issuePath(i.id),
-      { action_name, ...extra },
-      { preserveScroll: true },
-    )
-  const [, copyAi] = useClipboard()
-  const [aiCopied, setAiCopied] = useState(false)
-  const [mergeOpen, setMergeOpen] = useState(false)
-  const [mergeQuery, setMergeQuery] = useState("")
-  const [mergeCandidates, setMergeCandidates] = useState<
-    { id: number; key: string; title: string }[]
-  >([])
-  const [mergeLoading, setMergeLoading] = useState(false)
-  const [mergeError, setMergeError] = useState(false)
-  const membersById = new Map(p.members.map((m) => [m.id, m.name]))
-  const getInitials = useInitials()
-  const occurrencePath = (occurrence: Occurrence) =>
-    executionPath({
-      applicationId: i.application.id,
-      environmentId: i.environment.id,
-      source: occurrence.execution_source,
-      executionId: occurrence.execution_id,
-    })
-  const latestPath = p.latest
-    ? executionPath({
-        applicationId: i.application.id,
-        environmentId: i.environment.id,
-        source: p.latest.execution_source,
-        executionId: p.latest.execution_id,
-      })
-    : null
-
-  useEffect(() => {
-    if (!mergeOpen) return
-
-    const controller = new AbortController()
-    const timeout = window.setTimeout(() => {
-      setMergeLoading(true)
-      setMergeError(false)
-      fetch(R.mergeCandidatesIssuePath(i.id, { q: mergeQuery }), {
-        headers: { Accept: "application/json" },
-        credentials: "same-origin",
-        signal: controller.signal,
-      })
-        .then((response) => {
-          if (!response.ok) throw new Error(`HTTP ${response.status}`)
-          return response.json() as Promise<{
-            issues: { id: number; key: string; title: string }[]
-          }>
-        })
-        .then(({ issues }) => setMergeCandidates(issues))
-        .catch(() => {
-          if (controller.signal.aborted) return
-          setMergeCandidates([])
-          setMergeError(true)
-        })
-        .finally(() => {
-          if (!controller.signal.aborted) setMergeLoading(false)
-        })
-    }, 150)
-
-    return () => {
-      window.clearTimeout(timeout)
-      controller.abort()
-    }
-  }, [i.id, mergeOpen, mergeQuery])
-
-  return (
-    <AppLayout
-      breadcrumbs={[
-        { title: "Issues", href: R.issuesPath() },
-        { title: i.key, href: R.issuePath(i.id) },
-      ]}
-    >
-      <Head title={`${i.key} ${i.title}`} />
-      <div className="flex flex-1 flex-col gap-4 p-3 md:gap-5 md:px-6 md:pt-2 md:pb-6">
-        <div className="flex flex-wrap items-start justify-between gap-4">
-          <div className="min-w-0">
-            <div className="flex flex-wrap items-center gap-2">
-              <span className="font-mono text-sm font-semibold">{i.key}</span>
-              <IssueStatusBadge status={i.status} />
-              <Badge variant="outline">{i.kind}</Badge>
-              {i.source === "browser" && (
-                <Badge variant="outline" className="gap-1">
-                  <Globe className="size-3" />
-                  browser
-                </Badge>
-              )}
-              <span className="text-muted-foreground text-xs">
-                {i.application.name} · {i.environment.name}
-              </span>
-            </div>
-            <h1 className="mt-1 text-lg font-semibold break-words">
-              {i.title}
-            </h1>
-            {i.culprit && (
-              <div className="text-muted-foreground">
-                <SourceLink
-                  location={i.culprit}
-                  deploy={i.sample.deploy as string | null}
-                />
-              </div>
-            )}
-          </div>
-          <div className="flex flex-wrap items-center gap-2">
-            <Select
-              value={i.priority}
-              onValueChange={(v) => act("priority", { priority: v })}
-            >
-              <SelectTrigger className="w-28">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {["low", "normal", "high", "urgent"].map((x) => (
-                  <SelectItem key={x} value={x}>
-                    {x}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Select
-              value={i.assignee ? String(i.assignee.id) : "none"}
-              onValueChange={(v) =>
-                act("assign", { assignee_id: v === "none" ? null : v })
-              }
-            >
-              <SelectTrigger className="w-40">
-                <SelectValue placeholder="Assign" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="none">Unassigned</SelectItem>
-                {p.members.map((m) => (
-                  <SelectItem key={m.id} value={String(m.id)}>
-                    {m.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            {i.status === "merged" ? (
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => act("unmerge")}
-              >
-                Unmerge
-              </Button>
-            ) : i.status === "open" ? (
-              <>
-                <Button size="sm" onClick={() => act("resolve")}>
-                  Resolve
-                </Button>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => act("ignore")}
-                >
-                  Ignore
-                </Button>
-              </>
-            ) : (
-              <Button size="sm" variant="outline" onClick={() => act("reopen")}>
-                Reopen
-              </Button>
-            )}
-            {i.status !== "merged" && (
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => setMergeOpen(true)}
-              >
-                <GitMerge data-icon="inline-start" />
-                Merge into…
-              </Button>
-            )}
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => {
-                void (async () => {
-                  const ok = await copyAi(copyForAiText(p))
-                  if (ok) {
-                    setAiCopied(true)
-                    setTimeout(() => setAiCopied(false), 1200)
-                  }
-                })()
-              }}
-            >
-              {aiCopied ? (
-                <Check className="size-3.5" />
-              ) : (
-                <ClipboardCopy className="size-3.5" />
-              )}
-              Copy for AI
-            </Button>
-          </div>
-        </div>
-        {p.merged_into && (
-          <div className="bg-muted flex flex-wrap items-center justify-between gap-2 rounded-md border px-4 py-3 text-sm">
-            <span>
-              Merged into{" "}
-              <Link
-                href={R.issuePath(p.merged_into.id)}
-                className="font-mono font-semibold underline"
-              >
-                {p.merged_into.key}
-              </Link>{" "}
-              <span className="text-muted-foreground">
-                {p.merged_into.title}
-              </span>
-            </span>
-            <Button size="sm" variant="outline" onClick={() => act("unmerge")}>
-              Unmerge
-            </Button>
-          </div>
-        )}
-        <CommandDialog
-          open={mergeOpen}
-          onOpenChange={(open) => {
-            setMergeOpen(open)
-            if (!open) {
-              setMergeQuery("")
-              setMergeCandidates([])
-              setMergeError(false)
-            }
-          }}
-          title="Merge into…"
-          description="Search issues to merge this one into"
-        >
-          <CommandInput
-            placeholder="Search issues by key or title…"
-            value={mergeQuery}
-            onValueChange={setMergeQuery}
-          />
-          <CommandList>
-            <CommandEmpty>
-              {mergeLoading
-                ? "Searching…"
-                : mergeError
-                  ? "Search failed. Try again."
-                  : "No open issues found."}
-            </CommandEmpty>
-            {mergeCandidates.length > 0 && (
-              <CommandGroup>
-                {mergeCandidates.map((m) => (
-                  <CommandItem
-                    key={m.id}
-                    value={`${m.key} ${m.title}`}
-                    onSelect={() => {
-                      act("merge", { target_id: m.id })
-                      setMergeOpen(false)
-                    }}
-                  >
-                    <span className="font-mono font-semibold">{m.key}</span>
-                    <span className="text-muted-foreground truncate">
-                      {m.title}
-                    </span>
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            )}
-          </CommandList>
-        </CommandDialog>
-        <StatStrip>
-          <Stat
-            label={p.detection?.count_label ?? "Events"}
-            value={count(p.detection?.breached_windows ?? i.occurrences)}
-          />
-          <Stat
-            label={p.detection ? "Events in measured window" : "Users affected"}
-            value={
-              p.detection
-                ? p.detection.event_count == null
-                  ? "–"
-                  : count(p.detection.event_count)
-                : i.affected_users
-            }
-          />
-          <Stat
-            label="First seen"
-            value={ago(i.first_seen_at)}
-            hint={when(i.first_seen_at)}
-          />
-          <Stat
-            label="Last seen"
-            value={ago(i.last_seen_at)}
-            hint={when(i.last_seen_at)}
-          />
-          <Stat
-            label={i.regressed_at ? "Regressed" : "Resolved"}
-            value={
-              i.regressed_at
-                ? ago(i.regressed_at)
-                : i.resolved_at
-                  ? ago(i.resolved_at)
-                  : "–"
-            }
-            hint={
-              i.resolved_in_deploy
-                ? `in ${i.resolved_in_deploy.slice(0, 12)}`
-                : undefined
-            }
-            tone={i.regressed_at ? "destructive" : undefined}
-          />
-        </StatStrip>
-        <div className="grid gap-6 lg:grid-cols-3">
-          <div className="space-y-6 lg:col-span-2">
-            {p.detection ? (
-              <DetectionPanel issue={i} detail={p.detection} />
-            ) : p.latest ? (
-              <Card>
-                <CardHeader className="flex-row items-center justify-between">
-                  <CardTitle>Latest occurrence</CardTitle>
-                  {latestPath && (
-                    <Link className="text-xs underline" href={latestPath}>
-                      Open {p.latest.execution_preview}
-                    </Link>
-                  )}
-                </CardHeader>
-                <CardContent>
-                  <ExceptionCard
-                    exception={p.latest}
-                    deploy={p.latest.deploy}
-                  />
-                  <div className="mt-4 space-y-4">
-                    <Breadcrumbs entries={p.breadcrumbs} />
-                    <BrowserBreadcrumbs crumbs={p.browser_breadcrumbs} />
-                  </div>
-                  {(p.latest.ruby_version ?? p.latest.rails_version) && (
-                    <p className="text-muted-foreground mt-3 text-xs">
-                      Ruby {p.latest.ruby_version} · Rails{" "}
-                      {p.latest.rails_version}
-                    </p>
-                  )}
-                </CardContent>
-              </Card>
-            ) : (
-              <Card>
-                <CardContent>
-                  <JsonViewer data={i.sample} />
-                </CardContent>
-              </Card>
-            )}
-            <Card className={p.detection ? "hidden" : undefined}>
-              <CardHeader>
-                <CardTitle>Occurrences (30d)</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <DataTable
-                  rows={p.occurrences}
-                  rowKey={(o) => o.id}
-                  empty="Raw occurrences have been pruned."
-                  onRowClick={(o) => {
-                    const path = occurrencePath(o)
-                    if (path) router.visit(path)
-                  }}
-                  columns={[
-                    {
-                      key: "when",
-                      header: "When",
-                      cell: (o) => (
-                        <span className="text-xs">{when(o.occurred_at)}</span>
-                      ),
-                    },
-                    {
-                      key: "in",
-                      header: "In",
-                      cell: (o) => (
-                        <span className="font-mono text-xs">
-                          {o.execution_source} {o.execution_preview}
-                        </span>
-                      ),
-                    },
-                    {
-                      key: "u",
-                      header: "User",
-                      cell: (o) => (
-                        <span className="font-mono text-xs">
-                          {o.user_ref ?? ""}
-                        </span>
-                      ),
-                    },
-                    {
-                      key: "t",
-                      header: "Tenant",
-                      cell: (o) => (
-                        <span className="font-mono text-xs">
-                          {o.tenant ?? ""}
-                        </span>
-                      ),
-                    },
-                    {
-                      key: "d",
-                      header: "Deploy",
-                      cell: (o) => (
-                        <span className="font-mono text-xs">
-                          {o.deploy?.slice(0, 10)}
-                        </span>
-                      ),
-                    },
-                    {
-                      key: "h",
-                      header: "",
-                      cell: (o) =>
-                        o.handled ? (
-                          <Badge variant="secondary">handled</Badge>
-                        ) : null,
-                    },
-                  ]}
-                />
-              </CardContent>
-            </Card>
-            {p.attachments.length > 0 && (
-              <Card>
-                <CardHeader>
-                  <CardTitle>Attachments</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <DataTable
-                    rows={p.attachments}
-                    rowKey={(f) => f.id}
-                    columns={[
-                      {
-                        key: "name",
-                        header: "Name",
-                        className: "max-w-0",
-                        cell: (f) => (
-                          <span className="flex items-center gap-1.5">
-                            <span className="truncate font-mono text-xs">
-                              {f.name}
-                            </span>
-                            {f.truncated && (
-                              <Badge variant="secondary">truncated</Badge>
-                            )}
-                          </span>
-                        ),
-                      },
-                      {
-                        key: "in",
-                        header: "In",
-                        cell: (f) => (
-                          <span className="text-muted-foreground font-mono text-xs">
-                            {f.execution_preview ?? "–"}
-                          </span>
-                        ),
-                      },
-                      {
-                        key: "size",
-                        header: "Size",
-                        align: "right",
-                        cell: (f) => bytes(f.bytes),
-                      },
-                      {
-                        key: "links",
-                        header: "",
-                        align: "right",
-                        cell: (f) => (
-                          <span className="flex justify-end gap-3">
-                            {f.viewable && (
-                              <a
-                                className="text-primary hover:underline"
-                                href={R.applicationEnvironmentAttachmentPath(
-                                  i.application.id,
-                                  i.environment.id,
-                                  f.id,
-                                  { view: 1 },
-                                )}
-                              >
-                                View
-                              </a>
-                            )}
-                            <a
-                              className="text-primary hover:underline"
-                              href={R.applicationEnvironmentAttachmentPath(
-                                i.application.id,
-                                i.environment.id,
-                                f.id,
-                              )}
-                            >
-                              Download
-                            </a>
-                          </span>
-                        ),
-                      },
-                    ]}
-                  />
-                </CardContent>
-              </Card>
-            )}
-          </div>
-          <div className="space-y-6">
-            <Card className={p.detection ? "hidden" : undefined}>
-              <CardHeader>
-                <CardTitle>Daily (30d)</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <ChartContainer config={dailyConfig} className="h-40 w-full">
-                  <BarChart data={p.daily}>
-                    <CartesianGrid vertical={false} />
-                    <XAxis
-                      dataKey="day"
-                      tickLine={false}
-                      axisLine={false}
-                      minTickGap={24}
-                      tickFormatter={(v: string) =>
-                        new Date(v).toLocaleDateString(undefined, {
-                          month: "short",
-                          day: "numeric",
-                        })
-                      }
-                    />
-                    <YAxis
-                      width={28}
-                      tickLine={false}
-                      axisLine={false}
-                      allowDecimals={false}
-                    />
-                    <ChartTooltip
-                      content={
-                        <ChartTooltipContent
-                          labelFormatter={(v) => {
-                            const refs = deploysOn(p.deploys, String(v))
-                            return refs.length > 0
-                              ? `${String(v)} · deployed ${refs.join(", ")}`
-                              : String(v)
-                          }}
-                        />
-                      }
-                    />
-                    <Bar dataKey="count" fill="var(--color-count)" radius={2} />
-                    {[...new Set(p.deploys.map((d) => d.at.slice(0, 10)))].map(
-                      (day) => (
-                        <ReferenceLine
-                          key={day}
-                          x={day}
-                          stroke="var(--muted-foreground)"
-                          strokeDasharray="3 3"
-                        />
-                      ),
-                    )}
-                  </BarChart>
-                </ChartContainer>
-              </CardContent>
-            </Card>
-            <Card className={p.detection ? "hidden" : undefined}>
-              <CardHeader>
-                <CardTitle>Grouping</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-3">
-                {p.fingerprint.length > 0 && (
-                  <div className="flex flex-wrap gap-1">
-                    {p.fingerprint.map((part, index) => (
-                      <span
-                        key={`${index}-${part}`}
-                        className="bg-muted rounded px-1.5 py-0.5 font-mono text-[11px] break-all"
-                      >
-                        {part}
-                      </span>
-                    ))}
-                  </div>
-                )}
-                <p className="text-muted-foreground text-xs">
-                  {groupingHints[p.fingerprint_source ?? "default"] ??
-                    `Fingerprint from ${p.fingerprint_source}.`}
-                </p>
-                {p.distinct_messages > 1 && (
-                  <>
-                    <div className="space-y-1">
-                      {p.top_messages.map((m) => (
-                        <div
-                          key={m.message}
-                          className="flex items-start justify-between gap-2 text-xs"
-                        >
-                          <span className="line-clamp-1 font-mono">
-                            {m.message}
-                          </span>
-                          <span className="text-muted-foreground">
-                            {count(m.count)}
-                          </span>
-                        </div>
-                      ))}
-                    </div>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => act("split", { by: "message" })}
-                    >
-                      <Split className="size-3.5" />
-                      Split into {p.distinct_messages} issues
-                    </Button>
-                  </>
-                )}
-              </CardContent>
-            </Card>
-            {p.related_issues.length > 0 && (
-              <Card>
-                <CardHeader>
-                  <CardTitle>Related issues</CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-2">
-                  {p.related_issues.map((r) => (
-                    <Link
-                      key={r.id}
-                      href={R.issuePath(r.id)}
-                      className="hover:bg-muted/60 -mx-2 flex flex-col rounded px-2 py-1 text-xs"
-                    >
-                      <span className="flex items-center gap-2">
-                        <span className="font-mono font-semibold">{r.key}</span>
-                        <IssueStatusBadge status={r.status} />
-                      </span>
-                      <span className="text-muted-foreground line-clamp-1">
-                        {r.title}
-                      </span>
-                      <span className="text-muted-foreground">
-                        {r.environment.name}
-                      </span>
-                    </Link>
-                  ))}
-                </CardContent>
-              </Card>
-            )}
-            {p.merged_issues.length > 0 && (
-              <Card>
-                <CardHeader>
-                  <CardTitle>Merged issues</CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-2">
-                  {p.merged_issues.map((m) => (
-                    <Link
-                      key={m.id}
-                      href={R.issuePath(m.id)}
-                      className="hover:bg-muted/60 -mx-2 flex flex-col rounded px-2 py-1 text-xs"
-                    >
-                      <span className="font-mono font-semibold">{m.key}</span>
-                      <span className="text-muted-foreground line-clamp-1">
-                        {m.title}
-                      </span>
-                    </Link>
-                  ))}
-                </CardContent>
-              </Card>
-            )}
-            {p.alerts.length > 0 && (
-              <Card>
-                <CardHeader>
-                  <CardTitle>Alerts</CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-2">
-                  {p.alerts.map((al) => (
-                    <div
-                      key={al.id}
-                      className="flex flex-col gap-0.5 text-xs"
-                      title={al.error ?? undefined}
-                    >
-                      <div className="flex items-center gap-2">
-                        <Badge
-                          variant={
-                            al.status === "failed" ? "destructive" : "outline"
-                          }
-                          className="capitalize"
-                        >
-                          {al.status}
-                        </Badge>
-                        <span>
-                          {al.event} via {al.integration.name}
-                        </span>
-                        <RelativeTime
-                          iso={al.sent_at}
-                          className="text-muted-foreground"
-                        />
-                      </div>
-                      {al.error && (
-                        <span className="text-destructive">{al.error}</span>
-                      )}
-                    </div>
-                  ))}
-                </CardContent>
-              </Card>
-            )}
-            <Card>
-              <CardHeader>
-                <CardTitle>By deploy</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <DataTable
-                  rows={Object.entries(p.by_deploy)}
-                  rowKey={([d]) => d ?? "none"}
-                  columns={[
-                    {
-                      key: "d",
-                      header: "Deploy",
-                      cell: ([d]) => (
-                        <span className="font-mono text-xs">
-                          {d ?? "unknown"}
-                        </span>
-                      ),
-                    },
-                    {
-                      key: "n",
-                      header: "Count",
-                      align: "right",
-                      cell: ([, n]) => n,
-                    },
-                  ]}
-                />
-              </CardContent>
-            </Card>
-            {Object.keys(p.by_tenant).length > 0 && (
-              <Card>
-                <CardHeader>
-                  <CardTitle>By tenant</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <DataTable
-                    rows={Object.entries(p.by_tenant)}
-                    rowKey={([t]) => t}
-                    columns={[
-                      {
-                        key: "t",
-                        header: "Tenant",
-                        cell: ([t]) => (
-                          <span className="font-mono text-xs">{t}</span>
-                        ),
-                      },
-                      {
-                        key: "n",
-                        header: "Count",
-                        align: "right",
-                        cell: ([, n]) => n,
-                      },
-                    ]}
-                  />
-                </CardContent>
-              </Card>
-            )}
-            <Card>
-              <CardHeader>
-                <CardTitle>Activity</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-3">
-                {p.activities.map((a) => {
-                  const fromLinear = a.data.source === "linear"
-                  const linearAuthor =
-                    typeof a.data.author_name === "string"
-                      ? a.data.author_name
-                      : "Linear"
-                  const actorName =
-                    a.user?.name ?? (fromLinear ? linearAuthor : "System")
-                  return (
-                    <div key={a.id} className="flex gap-2 text-sm">
-                      <Avatar className="size-6">
-                        <AvatarFallback className="text-[10px]">
-                          {a.user || fromLinear
-                            ? getInitials(actorName)
-                            : "sys"}
-                        </AvatarFallback>
-                      </Avatar>
-                      <div className="min-w-0 flex-1">
-                        <div className="text-xs">
-                          <span className="font-medium">{actorName}</span>{" "}
-                          <span className="text-muted-foreground">
-                            {activitySentence(a, membersById)}
-                          </span>{" "}
-                          <RelativeTime
-                            iso={a.created_at}
-                            className="text-muted-foreground"
-                          />
-                        </div>
-                        {a.kind === "comment" && (
-                          <div className="mt-0.5 whitespace-pre-wrap">
-                            {String(a.data.body)}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  )
-                })}
-                <Form
-                  method="post"
-                  action={R.issueCommentsPath(i.id)}
-                  options={{ preserveScroll: true }}
-                  resetOnSuccess
-                  className="space-y-2"
-                >
-                  {({ processing }) => (
-                    <>
-                      <Textarea
-                        name="body"
-                        placeholder="Add a comment…"
-                        required
-                        rows={3}
-                      />
-                      <Button size="sm" disabled={processing}>
-                        Comment
-                      </Button>
-                    </>
-                  )}
-                </Form>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </AppLayout>
-  )
-}