From 9eb61c59305858d7892acafee5bfda2cd8c24bcb Mon Sep 17 00:00:00 2001
From: marsh15 <santoshkumarsp2004@gmail.com>
Date: Wed, 30 Sep 2026 19:39:07 +0530
Subject: [PATCH] feat: polish the evidence workbench design and interactions

Unify the neutral interface, improve mobile record reading and report hierarchy, and make evidence inspection and authenticated request recovery easier to navigate. Preserve source provenance and saved/live result labels.
---
 DESIGN.md                                  | 11 ++++
 frontend/e2e/openai-auth.spec.ts           |  3 +
 frontend/src/components/AppShell.tsx       | 74 +++++++---------------
 frontend/src/components/Auth.tsx           | 51 ++++++++++++---
 frontend/src/components/EvidenceDrawer.tsx | 35 +++++-----
 frontend/src/components/IncidentAi.tsx     | 25 +++++---
 frontend/src/components/Usage.tsx          | 21 +++++-
 frontend/src/components/ui/button.tsx      |  2 +-
 frontend/src/components/ui/input.tsx       |  2 +-
 frontend/src/components/ui/sheet.tsx       |  6 +-
 frontend/src/components/ui/table.tsx       |  6 +-
 frontend/src/index.css                     | 41 ++++++++++--
 frontend/src/pages/Comparison.tsx          | 40 ++++++------
 frontend/src/pages/Imports.tsx             | 24 +++----
 frontend/src/pages/IncidentEvaluation.tsx  | 30 ++++-----
 frontend/src/pages/IncidentImports.tsx     | 17 ++---
 frontend/src/pages/IncidentLibrary.tsx     | 31 +++++----
 frontend/src/pages/IncidentWorkbench.tsx   | 29 +++++----
 frontend/src/pages/Library.tsx             | 16 ++---
 frontend/src/pages/Notes.tsx               | 12 ++--
 20 files changed, 284 insertions(+), 192 deletions(-)
 create mode 100644 DESIGN.md

diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..d1ec4c1
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,11 @@
+# FloorReplay design
+
+FloorReplay is a quiet evidence workbench. Its visual identity follows the manufacturing investigation: recorded output, source rows, knowledge cutoffs, immutable revisions, and human decisions. It uses warm neutral page surfaces, white documents, charcoal navigation, and restrained amber for evidence limitations and observed shortfall. Status text always explains color.
+
+Inter is the interface face. JetBrains Mono is self-hosted for source identifiers, formulas, and structured records. Headings use a clear size hierarchy with modest negative tracking. Numeric tables use tabular figures. No decorative charts, confidence gauges, neon accents, or staged entrances.
+
+The shell shares one 72rem content grid. Mobile navigation wraps into its own row. Pages have a title, explanation, task controls, and report content in that order. Incident investigations offer direct section links. Related production measurements form one divided document row rather than disconnected dashboard cards.
+
+Controls provide visible focus and short feedback. Frequent inspection actions stay immediate. Popovers dismiss with Escape, restore trigger focus, and align to their trigger. Motion respects reduced-motion preferences. Touch controls have larger hit areas. Tables scroll within their containers; incident library records have a narrow-screen reading layout.
+
+Saved deterministic bundles, live analyses, historical model outputs, and unavailable capabilities retain explicit labels. Design changes must preserve evidence provenance and synthetic-data notices.
diff --git a/frontend/e2e/openai-auth.spec.ts b/frontend/e2e/openai-auth.spec.ts
index 5f8d58b..04506c5 100644
--- a/frontend/e2e/openai-auth.spec.ts
+++ b/frontend/e2e/openai-auth.spec.ts
@@ -30,6 +30,7 @@ test('reviewer auth stays in memory and a disconnected AI operation is recovered
   await page.getByRole('button', { name: 'Continue', exact: true }).click()
   await expect(page.getByText('Shift reviewer · reviewer')).toBeVisible()
   await page.getByRole('button', { name: 'Generate draft' }).click()
+  await page.getByText('Recover an interrupted request', { exact: true }).click()
   await expect(page.getByRole('button', { name: 'Recover existing request' })).toBeVisible()
   await page.getByRole('button', { name: 'Recover existing request' }).click()
   await expect(page.getByText('The output record establishes a shortfall.')).toBeVisible()
@@ -72,6 +73,7 @@ for (const terminal of [
     await page.getByRole('button', { name: 'Generate draft' }).click()
     await expect(page.getByRole('alert').filter({ hasText: terminal.displayed })).toBeVisible()
     await expect(page.getByText(/Awaiting human review/)).toHaveCount(0)
+    await page.getByText('Recover an interrupted request', { exact: true }).click()
     await page.getByRole('button', { name: 'Recover existing request' }).click()
     await expect(page.getByRole('alert').filter({ hasText: terminal.displayed })).toBeVisible()
     const identity = await page.getByLabel('Request identity').inputValue()
@@ -81,6 +83,7 @@ for (const terminal of [
     await page.getByLabel('Password').fill('test-password')
     await page.getByRole('button', { name: 'Continue', exact: true }).click()
     await expect(page.getByRole('button', { name: 'Generate draft' })).toBeDisabled()
+    await page.getByText('Recover an interrupted request', { exact: true }).click()
     await page.getByLabel('Request identity').fill(identity)
     await page.getByRole('button', { name: 'Recover existing request' }).click()
     await expect(page.getByRole('alert').filter({ hasText: terminal.displayed })).toBeVisible()
diff --git a/frontend/src/components/AppShell.tsx b/frontend/src/components/AppShell.tsx
index ccc3e84..f998a0d 100644
--- a/frontend/src/components/AppShell.tsx
+++ b/frontend/src/components/AppShell.tsx
@@ -1,9 +1,5 @@
-/**
- * App shell: quiet top bar, two primary destinations. Light theme is
- * locked for this workbench; state colors supplement labels everywhere.
- */
-
 import { useQuery } from '@tanstack/react-query'
+import { ArrowLeftRight, FlaskConical, Library } from 'lucide-react'
 import { Link, useLocation } from 'react-router'
 import { api } from '@/lib/api'
 import { UsagePanel } from '@/components/Usage'
@@ -11,62 +7,38 @@ import { SignInControl } from '@/components/Auth'
 import { cn } from '@/lib/utils'
 
 const NAV = [
-  { to: '/', label: 'Incidents' },
-  { to: '/evaluation', label: 'Evaluation lab' },
-  { to: '/coverage', label: 'Coverage archive' },
+  { to: '/', label: 'Incidents', icon: Library },
+  { to: '/evaluation', label: 'Evaluation lab', icon: FlaskConical },
+  { to: '/coverage', label: 'Coverage archive', icon: ArrowLeftRight },
 ]
 
 export function AppShell({ children }: { children: React.ReactNode }) {
   const { pathname } = useLocation()
-  const capabilities = useQuery({
-    queryKey: ['capabilities'],
-    queryFn: api.capabilities,
-    staleTime: 60_000,
-  })
+  const capabilities = useQuery({ queryKey: ['capabilities'], queryFn: api.capabilities, staleTime: 60_000 })
   return (
-    <div className="min-h-[100dvh] bg-zinc-50">
-      <header className="border-b border-zinc-200 bg-white">
-        <div className="mx-auto flex h-14 max-w-6xl items-center gap-6 px-4">
-          <Link to="/" className="flex items-baseline gap-2 focus-visible:outline-2 focus-visible:outline-offset-4">
-            <span className="text-sm font-semibold tracking-tight">FloorReplay</span>
-            <span className="hidden text-xs text-zinc-500 sm:inline">
-              Synthetic manufacturing data
-            </span>
+    <div className="app-shell flex min-h-[100dvh] flex-col">
+      <a href="#main-content" className="skip-link">Skip to content</a>
+      <header className="app-header border-b border-zinc-200 bg-white">
+        <div className="mx-auto flex max-w-6xl flex-wrap items-center gap-x-6 gap-y-3 px-4 py-4 sm:px-6 lg:px-8">
+          <Link to="/" className="flex shrink-0 items-center gap-3 rounded-sm">
+            <span aria-hidden="true" className="flex size-9 items-center justify-center rounded-lg bg-zinc-900 text-white"><ArrowLeftRight size={18} strokeWidth={1.6} /></span>
+            <span><span className="block text-base font-semibold tracking-tight">FloorReplay</span><span className="block text-[11px] text-zinc-600">Synthetic manufacturing data</span></span>
           </Link>
-          <nav className="ml-auto flex flex-wrap gap-1" aria-label="Primary">
-            {NAV.map((item) => {
-              const active = item.to === '/' ? pathname === '/' || pathname.startsWith('/incidents/') : pathname === item.to || pathname.startsWith(`${item.to}/`)
-              return (
-                <Link
-                  key={item.to}
-                  to={item.to}
-                  aria-current={active ? 'page' : undefined}
-                  className={cn(
-                    'rounded-md px-3 py-1.5 text-sm transition-colors',
-                    active
-                      ? 'bg-zinc-900 text-white'
-                      : 'text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900',
-                  )}
-                >
-                  {item.label}
-                </Link>
-              )
+          <div className="ml-auto flex items-center gap-3 sm:order-3">
+            <SignInControl />
+            {capabilities.isError && <span className="hidden max-w-28 text-xs text-red-700 lg:block" title={capabilities.error.message}>Capabilities unavailable</span>}
+          </div>
+          <nav className="flex w-full gap-1 border-t border-zinc-100 pt-3 sm:order-2 sm:ml-auto sm:w-auto sm:border-0 sm:pt-0" aria-label="Primary">
+            {NAV.map(({ to, label, icon: Icon }) => {
+              const active = to === '/' ? pathname === '/' || pathname.startsWith('/incidents/') : pathname === to || pathname.startsWith(`${to}/`)
+              return <Link key={to} to={to} aria-current={active ? 'page' : undefined} className={cn('nav-link flex min-h-10 flex-1 items-center justify-center gap-2 rounded-md px-2.5 text-xs font-medium sm:flex-none sm:text-sm', active ? 'bg-zinc-900 text-white' : 'text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900')}><Icon aria-hidden="true" className="hidden size-4 md:block" strokeWidth={1.7} />{label}</Link>
             })}
           </nav>
-          <SignInControl />
-          {capabilities.isError ? (
-            <span className="text-[10px] text-red-700" title={capabilities.error.message}>
-              Capabilities unavailable
-            </span>
-          ) : null}
         </div>
       </header>
-      <main className="mx-auto max-w-6xl px-4 py-6"><UsagePanel /><div className="mt-4">{children}</div></main>
-      <footer className="mx-auto max-w-6xl px-4 pb-8 pt-2">
-        <p className="text-xs text-zinc-400">
-          FloorReplay is an unofficial engineering exploration using synthetic data. It is not
-          affiliated with Genorai and has not been validated in a real factory.
-        </p>
+      <main id="main-content" tabIndex={-1} className="mx-auto w-full max-w-6xl flex-1 px-4 py-7 sm:px-6 sm:py-10 lg:px-8"><UsagePanel />{children}</main>
+      <footer className="mx-auto w-full max-w-6xl px-4 pb-6 pt-8 sm:px-6 lg:px-8">
+        <p className="max-w-3xl border-t border-zinc-200 pt-4 text-xs leading-5 text-zinc-600">FloorReplay is an unofficial engineering exploration using synthetic data. It is not affiliated with Genorai and has not been validated in a real factory.</p>
       </footer>
     </div>
   )
diff --git a/frontend/src/components/Auth.tsx b/frontend/src/components/Auth.tsx
index ba450a8..226da7c 100644
--- a/frontend/src/components/Auth.tsx
+++ b/frontend/src/components/Auth.tsx
@@ -1,10 +1,12 @@
 import type { components } from '@/lib/generated-api'
-import { createContext, useContext, useState } from 'react'
+import { createContext, useContext, useRef, useState } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { API_BASE, ApiError } from '@/lib/api'
 import { session } from '@/lib/session'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { Popover } from 'radix-ui'
+import { LogIn, X } from 'lucide-react'
 
 export interface AuthUser { id: string; username: string; display_name: string; role: 'owner' | 'reviewer' }
 interface AuthContextValue { user: AuthUser | null; signIn: (username: string, password: string) => Promise<void>; signOut: () => Promise<void> }
@@ -34,15 +36,48 @@ export function useAuth() {
 export function SignInControl() {
   const { user, signIn, signOut } = useAuth()
   const [open, setOpen] = useState(false)
+  const usernameInput = useRef<HTMLInputElement>(null)
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
   const [error, setError] = useState('')
   const [pending, setPending] = useState(false)
-  if (user) return <div className="flex items-center gap-2 text-xs"><span>{user.display_name} · {user.role}</span><Button size="sm" variant="outline" onClick={() => void signOut()}>Sign out</Button></div>
-  return <div><Button size="sm" variant="outline" onClick={() => setOpen(!open)}>Sign in</Button>{open && <form className="absolute right-4 top-16 z-50 w-72 space-y-3 rounded border bg-white p-4 shadow-lg" onSubmit={async (event) => {
-    event.preventDefault(); setPending(true); setError('')
-    try { await signIn(username.trim(), password); setPassword(''); setOpen(false) }
-    catch (failure) { setError(failure instanceof Error ? failure.message : 'Sign-in failed') }
-    finally { setPending(false) }
-  }}><p className="text-sm font-medium">Owner or invited reviewer</p><label className="block text-xs">Username<Input autoComplete="username" value={username} onChange={(event) => setUsername(event.target.value)} required /></label><label className="block text-xs">Password<Input type="password" autoComplete="current-password" value={password} onChange={(event) => setPassword(event.target.value)} required /></label><p className="text-xs text-zinc-500">Sign in again after reloading this page.</p>{error && <p role="alert" className="text-xs text-red-700">{error}</p>}<Button size="sm" disabled={pending}>{pending ? 'Signing in…' : 'Continue'}</Button></form>}</div>
+
+  if (user) return (
+    <div className="flex flex-wrap items-center justify-end gap-3 text-xs">
+      <span className="text-right"><span className="font-medium">{user.display_name}</span><span className="ml-2 text-muted-foreground"> · {user.role}</span></span>
+      <Button size="sm" variant="outline" disabled={pending} onClick={async () => {
+        setPending(true)
+        try { await signOut() }
+        finally { setPending(false) }
+      }}>{pending ? 'Signing out…' : 'Sign out'}</Button>
+    </div>
+  )
+
+  return (
+    <Popover.Root open={open} onOpenChange={(nextOpen) => { setOpen(nextOpen); if (!nextOpen) setPassword('') }}>
+      <Popover.Trigger asChild>
+        <Button size="sm" variant="outline"><LogIn aria-hidden="true" />Sign in</Button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content onOpenAutoFocus={(event) => { event.preventDefault(); usernameInput.current?.focus() }} align="end" sideOffset={10} collisionPadding={16} aria-labelledby="sign-in-heading" className="z-50 w-[min(22rem,calc(100vw-2rem))] rounded-xl bg-popover p-5 text-popover-foreground shadow-[0_8px_32px_-8px_rgba(24,35,30,0.22)] outline-none">
+          <div className="mb-5 flex items-start justify-between gap-4">
+            <div><h2 id="sign-in-heading" className="text-base font-semibold">Reviewer access</h2><p className="mt-1 text-xs leading-relaxed text-muted-foreground">Sign in as an owner or invited reviewer.</p></div>
+            <Popover.Close asChild><Button variant="ghost" size="icon-sm" aria-label="Close sign-in"><X aria-hidden="true" /></Button></Popover.Close>
+          </div>
+          <form className="space-y-4" aria-busy={pending} onSubmit={async (event) => {
+            event.preventDefault(); setPending(true); setError('')
+            try { await signIn(username.trim(), password); setPassword(''); setOpen(false) }
+            catch (failure) { setError(failure instanceof Error ? failure.message : 'Sign-in failed') }
+            finally { setPending(false) }
+          }}>
+            <label className="block space-y-1.5 text-xs font-medium"><span>Username</span><Input ref={usernameInput} autoComplete="username" value={username} onChange={(event) => setUsername(event.target.value)} required disabled={pending} /></label>
+            <label className="block space-y-1.5 text-xs font-medium"><span>Password</span><Input type="password" autoComplete="current-password" value={password} onChange={(event) => setPassword(event.target.value)} required disabled={pending} /></label>
+            {error && <p role="alert" className="rounded-md bg-red-50 p-3 text-xs leading-relaxed text-red-800">{error}</p>}
+            <Button className="w-full" size="sm" disabled={pending}>{pending ? 'Signing in…' : 'Continue'}</Button>
+            <p className="text-xs leading-relaxed text-muted-foreground">Sign in again after reloading this page.</p>
+          </form>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  )
 }
diff --git a/frontend/src/components/EvidenceDrawer.tsx b/frontend/src/components/EvidenceDrawer.tsx
index c989851..eee1dc9 100644
--- a/frontend/src/components/EvidenceDrawer.tsx
+++ b/frontend/src/components/EvidenceDrawer.tsx
@@ -10,6 +10,7 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { api, type EvidenceRef } from '@/lib/api'
 import { formatInstant } from '@/lib/status'
 import { Mono } from '@/components/status'
+import { Button } from '@/components/ui/button'
 import {
   Table,
   TableBody,
@@ -42,7 +43,7 @@ export function EvidenceDrawer({
   open: boolean
   onOpenChange: (open: boolean) => void
 }) {
-  const { data, isPending, isError, error } = useQuery({
+  const { data, isPending, isError, error, refetch } = useQuery({
     queryKey: ['snapshot', evidence?.snapshot_id],
     queryFn: () => api.snapshot(evidence!.snapshot_id),
     enabled: open && evidence !== null && evidence.snapshot_id !== 'event',
@@ -55,9 +56,9 @@ export function EvidenceDrawer({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
-        <SheetHeader>
-          <SheetTitle className="font-mono text-sm">
+      <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
+        <SheetHeader className="border-b p-6 pr-16">
+          <SheetTitle className="break-all font-mono text-sm">
             {evidence ? evidence.snapshot_id : ''}
           </SheetTitle>
           <SheetDescription>
@@ -69,28 +70,26 @@ export function EvidenceDrawer({
           </SheetDescription>
         </SheetHeader>
 
-        {isPending && !isEvent ? (
-          <div className="space-y-2 px-4">
+        {isPending && evidence && !isEvent ? (
+          <div role="status" aria-label="Loading pinned snapshot" className="space-y-2 px-6">
             <Skeleton className="h-6 w-3/4" />
             <Skeleton className="h-6 w-full" />
             <Skeleton className="h-6 w-5/6" />
           </div>
         ) : isError ? (
-          <p className="px-4 text-sm text-red-700">
-            Snapshot could not be loaded: {error.message}
-          </p>
+          <div role="alert" className="space-y-3 px-6 text-sm"><p className="text-red-800">Snapshot could not be loaded: {error.message}</p><Button variant="outline" size="sm" onClick={() => void refetch()}>Retry snapshot</Button></div>
         ) : isEvent ? (
-          <div className="px-4 text-sm">
+          <div className="px-6 text-sm leading-relaxed">
             <p className="text-muted-foreground">
               This evidence reference points at the confirmed unavailability event pinned to the
               scenario revision, not a snapshot row.
             </p>
           </div>
         ) : data ? (
-          <div className="space-y-4 px-4 pb-8">
-            <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-xs">
+          <div className="space-y-6 px-6 pb-8">
+            <dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-xs">
               <dt className="text-muted-foreground">Scope</dt>
-              <dd>{data.scope}</dd>
+              <dd className="break-words">{data.scope}</dd>
               <dt className="text-muted-foreground">Evidence time</dt>
               <dd>{formatInstant(data.declared_evidence_at)}</dd>
               <dt className="text-muted-foreground">Coverage</dt>
@@ -101,13 +100,14 @@ export function EvidenceDrawer({
               </dd>
             </dl>
 
+            {evidence?.source_ref && <p className="rounded-md border border-amber-200 bg-amber-50 p-3 text-xs leading-relaxed text-amber-950">Referenced source row: <Mono className="break-all">{evidence.source_ref}</Mono>{rows.some((row) => row.source_ref === evidence.source_ref) ? ' · Marked below' : ' · No matching row in this snapshot'}</p>}
             {rows.length > 0 ? (
               <div className="rounded-lg border">
-                <Table>
+                <Table aria-label="Pinned source rows">
                   <TableHeader>
                     <TableRow>
                       {columns.map((column) => (
-                        <TableHead key={column} className="text-xs">
+                        <TableHead scope="col" key={column} className="text-xs">
                           {column}
                         </TableHead>
                       ))}
@@ -120,12 +120,13 @@ export function EvidenceDrawer({
                       return (
                         <TableRow
                           key={index}
-                          className={highlighted ? 'bg-amber-500/15' : undefined}
+                          aria-current={highlighted ? true : undefined}
+                          className={highlighted ? 'bg-amber-50 hover:bg-amber-50' : undefined}
                         >
                           {columns.map((column) => (
                             <TableCell key={column} className="px-2 py-1.5 text-xs">
                               {column === 'source_ref' ? (
-                                <Mono>{String(row[column] ?? '')}</Mono>
+                                <><Mono>{String(row[column] ?? '')}</Mono>{highlighted && <span className="ml-2 inline-block rounded border border-amber-200 px-1.5 py-0.5 text-[10px] font-medium text-amber-950">Referenced</span>}</>
                               ) : (
                                 String(row[column] ?? '')
                               )}
diff --git a/frontend/src/components/IncidentAi.tsx b/frontend/src/components/IncidentAi.tsx
index a8c8349..0a6706a 100644
--- a/frontend/src/components/IncidentAi.tsx
+++ b/frontend/src/components/IncidentAi.tsx
@@ -6,6 +6,9 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { useAuth } from '@/components/Auth'
 
+const selectClass = 'mt-1.5 h-9 w-full rounded-md border border-input bg-background px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 disabled:opacity-50'
+const evidenceLinkClass = 'rounded-sm font-mono text-xs underline decoration-border underline-offset-4 hover:decoration-current focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
 const TASKS: AiTask[] = ['question', 'investigation', 'summary', 'recovery', 'note']
 export function OpenAiPanel({ report, enabled, reasons, onEvidence }: { report: AnalysisReport; enabled: boolean; reasons: string[]; onEvidence: (id: string) => void }) {
   const { user } = useAuth()
@@ -23,20 +26,22 @@ export function OpenAiPanel({ report, enabled, reasons, onEvidence }: { report:
   const current = status.data ?? run
   const output = current?.status === 'COMPLETED' ? current.result?.output : undefined
   const claims = output?.claims ?? output?.selected_claims ?? output?.hypotheses?.map((item) => item.explanation) ?? output?.assertions?.map((item) => item.assertion) ?? []
-  return <section className="space-y-3 rounded border bg-white p-4"><h2 className="text-base font-semibold">OpenAI draft</h2><p className="text-xs text-zinc-600">Drafts require human review. Calculated metrics and uncertainty remain attached to every draft.</p>
+  return <section className="space-y-4 rounded-lg border bg-card p-5"><h2 className="text-base font-semibold">OpenAI draft</h2><p className="text-xs text-zinc-600">Drafts require human review. Calculated metrics and uncertainty remain attached to every draft.</p>
     {!enabled && <p role="status" className="text-sm text-amber-900">{reasons.join(' ')}</p>}
-    <div className="flex flex-wrap gap-3"><label className="text-xs">Task<select aria-label="OpenAI task" className="ml-2 rounded border p-2" value={task} onChange={(event) => { const value = TASKS.find((item) => item === event.target.value); if (value) setTask(value) }}>{TASKS.map((item) => <option key={item}>{item}</option>)}</select></label></div>
-    <label className="block text-xs">Evidence retrieval<select className="ml-2 rounded border p-2" value={retrievalMode} onChange={(event) => setRetrievalMode(event.target.value === 'hybrid' ? 'hybrid' : 'evidence_only')}><option value="evidence_only">Current evidence only</option><option value="hybrid">Hybrid historical retrieval</option></select></label>{retrievalMode === 'hybrid' && <label className="block text-xs">Corpus release<select className="ml-2 rounded border p-2" value={selectedCorpus} onChange={(event) => setCorpusId(event.target.value)}>{corpora.data?.items.map((item) => <option key={item.id}>{item.id}</option>)}</select></label>}
+    <div className="grid gap-4"><label className="block text-xs font-medium">Task<select aria-label="OpenAI task" className={selectClass} value={task} onChange={(event) => { const value = TASKS.find((item) => item === event.target.value); if (value) setTask(value) }}>{TASKS.map((item) => <option key={item} value={item}>{item[0].toUpperCase() + item.slice(1)}</option>)}</select></label></div>
+    <label className="block text-xs">Evidence retrieval<select className={selectClass} value={retrievalMode} onChange={(event) => setRetrievalMode(event.target.value === 'hybrid' ? 'hybrid' : 'evidence_only')}><option value="evidence_only">Current evidence only</option><option value="hybrid">Hybrid historical retrieval</option></select></label>{retrievalMode === 'hybrid' && <label className="block text-xs">Corpus release<select className={selectClass} value={selectedCorpus} disabled={corpora.isPending || !corpora.data?.items.length} onChange={(event) => setCorpusId(event.target.value)}>{!corpora.data?.items.length && <option value="">{corpora.isPending ? 'Loading corpus releases…' : 'No indexed corpus available'}</option>}{corpora.data?.items.map((item) => <option key={item.id} value={item.id}>{item.id}</option>)}</select></label>}
+    {retrievalMode === 'hybrid' && !corpora.isPending && !selectedCorpus && <p role="status" className="text-xs text-muted-foreground">No indexed corpus available. Use current evidence only.</p>}
+    {retrievalMode === 'hybrid' && corpora.isError && <p role="alert" className="text-xs text-red-800">Corpus releases could not be loaded: {corpora.error.message}</p>}
     {task === 'note' && <p className="text-xs text-zinc-600">Extract observations from the pinned source evidence. Confirm draft assertions before publication.</p>}
-    <label className="block text-xs">Question or task instruction<textarea className="mt-1 min-h-20 w-full rounded border p-2 text-sm" value={question} maxLength={500} onChange={(event) => setQuestion(event.target.value)} /></label>
-    <Button size="sm" disabled={!enabled || create.isPending || current?.status === 'RUNNING' || question.trim().length < 3 || retrievalMode === 'hybrid' && !selectedCorpus} onClick={() => { const key = crypto.randomUUID(); setRequestKey(key); setRun(null); create.mutate(key) }}>{create.isPending ? 'Request in progress…' : 'Generate draft'}</Button>
-    <div className="space-y-2 border-t pt-3"><label className="block text-xs">Request identity<Input aria-label="Request identity" value={requestKey} onChange={(event) => setRequestKey(event.target.value)} /></label><Button size="sm" variant="outline" disabled={!user || !requestKey.trim() || recover.isPending} onClick={() => recover.mutate()}>Recover existing request</Button><p className="text-xs text-zinc-500">A lookup retrieves the original operation without starting another paid request. Keep this identity to recover after a connection interruption.</p></div>
+    <label className="block text-xs font-medium">Question or task instruction<textarea className="mt-1.5 min-h-24 w-full resize-y rounded-md border border-input bg-background p-3 text-sm leading-relaxed outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40" value={question} maxLength={500} onChange={(event) => setQuestion(event.target.value)} /></label>
+    <Button size="sm" disabled={!enabled || create.isPending || current?.status === 'RUNNING' || question.trim().length < 3 || retrievalMode === 'hybrid' && !selectedCorpus} onClick={() => { const key = crypto.randomUUID(); setRequestKey(key); setRun(null); create.mutate(key) }}>{create.isPending ? 'Request in progress…' : current?.status === 'RUNNING' ? 'Draft running…' : 'Generate draft'}</Button>
+    <details className="border-t pt-4"><summary className="cursor-pointer text-xs font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring">Recover an interrupted request</summary><div className="mt-3 space-y-3"><label className="block space-y-1.5 text-xs">Request identity<Input aria-label="Request identity" value={requestKey} onChange={(event) => setRequestKey(event.target.value)} /></label><Button size="sm" variant="outline" disabled={!user || !requestKey.trim() || recover.isPending} onClick={() => recover.mutate()}>{recover.isPending ? 'Looking up request…' : 'Recover existing request'}</Button><p className="text-xs text-zinc-500">A lookup retrieves the original operation without starting another paid request. Keep this identity to recover after a connection interruption.</p></div></details>
     {(create.error || recover.error || status.error) && <p role="alert" className="text-sm text-red-700">{(create.error ?? recover.error ?? status.error)?.message}</p>}
     {current && <div aria-live="polite" className="space-y-3 border-t pt-3"><p className="text-xs font-semibold">{current.status} · {current.configuration?.generation_model ?? 'OpenAI'}{output ? ' · Awaiting human review' : ''}</p>{current.result?.reason && <p>{current.result.reason}</p>}{current.result?.errors?.map((error, index) => <p role="alert" key={index} className="text-sm text-red-700">{error === 'MODEL_ACCESS_UNAVAILABLE' ? 'The configured model is unavailable to this API project.' : error === 'PROVIDER_TEMPORARILY_UNAVAILABLE' ? 'The provider is temporarily unavailable.' : error}</p>)}
-      {claims.map((claim, index) => <article key={index} className="space-y-2 rounded bg-zinc-50 p-3"><p className="text-sm">{claim.text}</p><div className="flex flex-wrap gap-2">{claim.evidence_ids.map((id) => <button key={id} className="text-xs underline" onClick={() => onEvidence(id)}>{id}</button>)}</div>{claim.historical_refs?.map((id) => { const excerpt = current.packet?.historical_evidence?.find((item) => item.id === id); return <blockquote key={id} className="border-l-2 pl-2 text-xs"><strong>Historical excerpt · {id}:</strong> {excerpt?.text ?? excerpt?.excerpt ?? 'Unavailable'}</blockquote> })}{claim.metric_ids.map((id) => { const metric = claim.rendered_metrics?.find((item) => item.id === id) ?? current.packet?.metrics?.find((item) => item.id === id); return <p key={id} className="text-xs"><strong>{id}:</strong> {metric ? `${metric.value ?? 'Unavailable'} ${metric.unit}` : 'Metric reference unavailable'}{metric?.formula && ` · ${metric.formula}`}{metric?.input_refs?.map((ref) => <button key={ref} className="ml-2 text-xs underline" onClick={() => onEvidence(ref)}>{ref}</button>)}</p> })}</article>)}
+      {claims.map((claim, index) => <article key={index} className="space-y-2 border-t py-4"><p className="text-sm">{claim.text}</p><div className="flex flex-wrap gap-2">{claim.evidence_ids.map((id) => <button key={id} className={evidenceLinkClass} onClick={() => onEvidence(id)}>{id}</button>)}</div>{claim.historical_refs?.map((id) => { const excerpt = current.packet?.historical_evidence?.find((item) => item.id === id); return <blockquote key={id} className="border-l border-border pl-3 text-xs leading-relaxed"><strong>Historical excerpt · {id}:</strong> {excerpt?.text ?? excerpt?.excerpt ?? 'Unavailable'}</blockquote> })}{claim.metric_ids.map((id) => { const metric = claim.rendered_metrics?.find((item) => item.id === id) ?? current.packet?.metrics?.find((item) => item.id === id); return <p key={id} className="text-xs"><strong>{id}:</strong> {metric ? `${metric.value ?? 'Unavailable'} ${metric.unit}` : 'Metric reference unavailable'}{metric?.formula && ` · ${metric.formula}`}{metric?.input_refs?.map((ref) => <button key={ref} className={`ml-2 ${evidenceLinkClass}`} onClick={() => onEvidence(ref)}>{ref}</button>)}</p> })}</article>)}
       {output?.hypotheses?.map((item, index) => <div key={index} className="space-y-1 text-xs"><p><strong>Counterevidence:</strong> {item.counterevidence_ids.join(', ') || 'None cited'}</p><p><strong>Limitations:</strong> {item.limitations.join('; ')}</p><p><strong>Next checks:</strong> {item.next_checks.join('; ')}</p></div>)}
       {output?.assertions?.map((item, index) => <div key={index} className="space-y-1 text-xs"><blockquote className="border-l-2 pl-2">{item.source_span}</blockquote><p>Source: {item.source_id} · Mentioned: {item.mentioned_entities.join(', ')}</p><p>Uncertainty: {item.uncertainty}</p></div>)}
-      {output?.proposals?.map((item, index) => <div key={index} className="space-y-1 rounded border p-3 text-sm"><p>{item.catalog_action_id} · {item.owner_role}</p><p className="text-xs">Prerequisites: {item.prerequisites.join('; ')}</p><div className="flex gap-2">{item.evidence_ids.map((id) => <button key={id} className="text-xs underline" onClick={() => onEvidence(id)}>{id}</button>)}</div><p className="text-xs text-amber-900">Draft recommendation · requires a version-bound human review.</p></div>)}
+      {output?.proposals?.map((item, index) => <div key={index} className="space-y-2 border-t py-4 text-sm"><p>{item.catalog_action_id} · {item.owner_role}</p><p className="text-xs">Prerequisites: {item.prerequisites.join('; ')}</p><div className="flex gap-2">{item.evidence_ids.map((id) => <button key={id} className={evidenceLinkClass} onClick={() => onEvidence(id)}>{id}</button>)}</div><p className="text-xs text-amber-900">Draft recommendation · requires a version-bound human review.</p></div>)}
       {[...(output?.limitations ?? []), ...(output?.abstention_reasons ?? []), ...(output?.unresolved_issues ?? []), ...(current.result?.validation?.errors ?? [])].map((item, index) => <p key={index} className="text-xs text-amber-900">{item}</p>)}
       {current.task === 'note' && output && <p className="text-xs text-amber-900">Extracted assertions are drafts. An owner must confirm the source and import it before it becomes incident evidence.</p>}
     </div>}
@@ -49,9 +54,9 @@ export function HybridPanel({ report, enabled }: { report: AnalysisReport; enabl
   const corpora = useQuery({ queryKey: ['corpora'], queryFn: incidentApi.corpora, enabled })
   const selected = corpusId || corpora.data?.items[0]?.id || ''
   const search = useMutation({ mutationFn: () => incidentApi.hybridSearch({ query, corpus_id: selected, cutoff: report.cutoff, exclude_id: report.incident_id, idempotency_key: crypto.randomUUID() }) })
-  return <section className="space-y-3 rounded border bg-white p-4"><h2 className="font-semibold">Hybrid precedent search</h2>{enabled ? <><label className="block text-xs">Pinned corpus<select className="ml-2 rounded border p-2" value={selected} onChange={(event) => setCorpusId(event.target.value)}>{corpora.data?.items.map((item) => <option key={item.id}>{item.id}</option>)}</select></label><label className="block text-xs">Search evidence<Input value={query} onChange={(event) => setQuery(event.target.value)} /></label><Button size="sm" disabled={!selected || !query.trim() || search.isPending} onClick={() => search.mutate()}>Search hybrid precedents</Button></> : <p className="text-xs text-zinc-600">Sign in with reviewer access and use an indexed corpus for semantic retrieval. Lexical precedents remain available below.</p>}{search.error && <p role="alert" className="text-xs text-red-700">{search.error.message}</p>}{search.data && <p className="text-xs text-zinc-500">Pinned release: {search.data.manifest.corpus_id} · cutoff: {search.data.manifest.cutoff}</p>}{search.data?.results.map((item) => <article key={`${item.id}-${item.revision}`} className="space-y-2 border-t pt-3"><Link className="text-sm underline" to={`/incidents/${encodeURIComponent(item.id)}?revision=${item.revision}`}>{item.title}</Link><p className="text-xs">{item.match_reason}</p><p className="text-xs"><strong>Differences:</strong> {item.differences.join('; ')}</p>{item.excerpts?.map((excerpt) => <blockquote key={excerpt.id} className="border-l-2 pl-2 text-xs">{excerpt.text ?? excerpt.excerpt} · {excerpt.source_id ?? excerpt.id}</blockquote>)}</article>)}</section>
+  return <section className="space-y-4 rounded-lg border bg-card p-5"><h2 className="font-semibold">Hybrid precedent search</h2>{enabled ? <><label className="block text-xs">Pinned corpus<select className={selectClass} value={selected} disabled={corpora.isPending || !corpora.data?.items.length} onChange={(event) => setCorpusId(event.target.value)}>{!corpora.data?.items.length && <option value="">{corpora.isPending ? 'Loading corpus releases…' : 'No indexed corpus available'}</option>}{corpora.data?.items.map((item) => <option key={item.id} value={item.id}>{item.id}</option>)}</select></label><label className="block text-xs">Search evidence<Input value={query} onChange={(event) => setQuery(event.target.value)} /></label><Button size="sm" disabled={!selected || !query.trim() || search.isPending} onClick={() => search.mutate()}>{search.isPending ? 'Searching precedents…' : 'Search hybrid precedents'}</Button></> : <p className="text-xs text-zinc-600">Sign in with reviewer access and use an indexed corpus for semantic retrieval. Lexical precedents remain available below.</p>}{search.error && <p role="alert" className="text-xs text-red-700">{search.error.message}</p>}{search.data && <p className="text-xs text-zinc-500">Pinned release: {search.data.manifest.corpus_id} · cutoff: {search.data.manifest.cutoff}</p>}{search.data && search.data.results.length === 0 && <p role="status" className="border-t pt-4 text-sm text-muted-foreground">No matching precedents in this pinned corpus.</p>}{corpora.isError && <p role="alert" className="text-xs text-red-800">Corpus releases could not be loaded: {corpora.error.message}</p>}{search.data?.results.map((item) => <article key={`${item.id}-${item.revision}`} className="space-y-2 border-t pt-3"><Link className="font-medium underline decoration-border underline-offset-4 hover:decoration-current focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring" to={`/incidents/${encodeURIComponent(item.id)}?revision=${item.revision}`}>{item.title}</Link><p className="text-xs">{item.match_reason}</p><p className="text-xs"><strong>Differences:</strong> {item.differences.join('; ')}</p>{item.excerpts?.map((excerpt) => <blockquote key={excerpt.id} className="border-l border-border pl-3 text-xs leading-relaxed">{excerpt.text ?? excerpt.excerpt} · {excerpt.source_id ?? excerpt.id}</blockquote>)}</article>)}</section>
 }
 export function ExportReport({ report, enabled }: { report: AnalysisReport; enabled: boolean }) {
   const exportFile = useMutation({ mutationFn: () => incidentApi.exportReport(report.id), onSuccess: (blob) => { const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `${report.incident_id}-revision-${report.revision}.json`; link.click(); URL.revokeObjectURL(url) } })
-  return <div><Button className="mt-3" size="sm" variant="outline" disabled={!enabled || exportFile.isPending} onClick={() => exportFile.mutate()}>Export portable report</Button>{!enabled && <p className="mt-1 text-xs text-zinc-500">Reviewer sign-in required for export.</p>}{exportFile.error && <p role="alert" className="text-xs text-red-700">{exportFile.error.message}</p>}</div>
+  return <div><Button className="mt-3" size="sm" variant="outline" disabled={!enabled || exportFile.isPending} onClick={() => exportFile.mutate()}>{exportFile.isPending ? 'Preparing export…' : 'Export portable report'}</Button>{!enabled && <p className="mt-1 text-xs text-zinc-500">Reviewer sign-in required for export.</p>}{exportFile.error && <p role="alert" className="text-xs text-red-700">{exportFile.error.message}</p>}</div>
 }
diff --git a/frontend/src/components/Usage.tsx b/frontend/src/components/Usage.tsx
index 4836c9e..5e290c5 100644
--- a/frontend/src/components/Usage.tsx
+++ b/frontend/src/components/Usage.tsx
@@ -1,9 +1,28 @@
 import { useQuery } from '@tanstack/react-query'
 import { useAuth } from '@/components/Auth'
 import { incidentApi } from '@/lib/incidents'
+import { Button } from '@/components/ui/button'
+
 export function UsagePanel() {
   const { user } = useAuth()
   const usage = useQuery({ queryKey: ['usage'], queryFn: incidentApi.usage, enabled: user?.role === 'owner', refetchInterval: 30000 })
   if (user?.role !== 'owner') return null
-  return <details className="rounded border bg-white p-3 text-xs"><summary className="cursor-pointer font-medium">Owner API allowance</summary>{usage.data ? <div className="mt-3 space-y-2"><p>₹{usage.data.available_inr.toFixed(2)} available · ₹{usage.data.committed_inr.toFixed(2)} committed · ₹{usage.data.total_ceiling_inr} ceiling</p><p>{usage.data.active_operations} active provider operations</p>{Object.entries(usage.data.purpose_available_inr).map(([purpose, amount]) => <p key={purpose}>{purpose}: ₹{amount.toFixed(2)} available</p>)}<p>Uncertain calls keep their allowance reserved. The ledger uses the configured accounting conversion.</p><ul>{usage.data.entries.map((entry) => <li key={entry.id}>{entry.operation} · {entry.status} · ₹{(entry.status === 'SETTLED' ? entry.charged_inr : entry.reserved_inr).toFixed(2)}</li>)}</ul></div> : <p className="mt-2">{usage.error?.message ?? 'Loading allowance…'}</p>}</details>
+  return (
+    <details className="mb-6 rounded-lg border bg-card text-xs">
+      <summary className="cursor-pointer rounded-lg px-4 py-3 font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring">Owner API allowance</summary>
+      {usage.data ? (
+        <div className="space-y-4 border-t px-4 py-4">
+          <dl className="grid grid-cols-3 gap-3 tabular-nums">
+            <div><dt className="text-muted-foreground">Available</dt><dd className="mt-1 font-medium">₹{usage.data.available_inr.toFixed(2)}</dd></div>
+            <div><dt className="text-muted-foreground">Committed</dt><dd className="mt-1 font-medium">₹{usage.data.committed_inr.toFixed(2)}</dd></div>
+            <div><dt className="text-muted-foreground">Ceiling</dt><dd className="mt-1 font-medium">₹{usage.data.total_ceiling_inr}</dd></div>
+          </dl>
+          <p>{usage.data.active_operations} active provider operations</p>
+          <dl className="space-y-2">{Object.entries(usage.data.purpose_available_inr).map(([purpose, amount]) => <div key={purpose} className="flex flex-wrap justify-between gap-2"><dt>{purpose.replaceAll('_', ' ')}</dt><dd className="tabular-nums">₹{amount.toFixed(2)} available</dd></div>)}</dl>
+          <p className="leading-relaxed text-muted-foreground">Uncertain calls keep their allowance reserved. The ledger uses the configured accounting conversion.</p>
+          {usage.data.entries.length ? <ul className="divide-y border-t">{usage.data.entries.map((entry) => <li className="flex flex-wrap items-center justify-between gap-2 py-2.5" key={entry.id}><span className="break-all">{entry.operation} · {entry.status}</span><span className="tabular-nums">₹{(entry.status === 'SETTLED' ? entry.charged_inr : entry.reserved_inr).toFixed(2)}</span></li>)}</ul> : <p className="text-muted-foreground">No provider operations recorded.</p>}
+        </div>
+      ) : usage.isError ? <div role="alert" className="space-y-2 border-t p-4"><p className="text-red-800">Allowance could not be loaded: {usage.error.message}</p><Button size="sm" variant="outline" onClick={() => void usage.refetch()}>Retry allowance</Button></div> : <p role="status" className="border-t p-4 text-muted-foreground">Loading allowance…</p>}
+    </details>
+  )
 }
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index cd6f789..d8267c9 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -4,7 +4,7 @@ import { cn } from "cn"
 import { Slot } from "radix-ui"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[background-color,color,border-color,box-shadow,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:scale-[0.98] motion-reduce:active:scale-100 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index cb769c9..59c3cf8 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -7,7 +7,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-[border-color,box-shadow] duration-150 motion-reduce:transition-none outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
diff --git a/frontend/src/components/ui/sheet.tsx b/frontend/src/components/ui/sheet.tsx
index d6d13f5..ac51a6c 100644
--- a/frontend/src/components/ui/sheet.tsx
+++ b/frontend/src/components/ui/sheet.tsx
@@ -37,7 +37,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-black/10 duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:animate-none",
         className
       )}
       {...props}
@@ -62,7 +62,7 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:animate-none data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
           className
         )}
         {...props}
@@ -72,7 +72,7 @@ function SheetContent({
           <SheetPrimitive.Close data-slot="sheet-close" asChild>
             <Button
               variant="ghost"
-              className="absolute top-4 right-4"
+              className="absolute top-4 right-4" aria-label="Close panel"
               size="icon-sm"
             >
               <XIcon
diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
index d0baee6..031c2bf 100644
--- a/frontend/src/components/ui/table.tsx
+++ b/frontend/src/components/ui/table.tsx
@@ -54,7 +54,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        "border-b transition-colors duration-100 hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
         className
       )}
       {...props}
@@ -67,7 +67,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        "h-10 bg-muted/60 px-3 text-left align-middle text-xs font-medium whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}
@@ -80,7 +80,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        "px-3 py-2.5 align-middle whitespace-nowrap tabular-nums [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a3003e9..6b884d8 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -50,7 +50,7 @@
 }
 
 :root {
-    --background: oklch(1 0 0);
+    --background: #f7f7f4;
     --foreground: oklch(0.145 0 0);
     --card: oklch(1 0 0);
     --card-foreground: oklch(0.145 0 0);
@@ -61,13 +61,13 @@
     --secondary: oklch(0.97 0 0);
     --secondary-foreground: oklch(0.205 0 0);
     --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
+    --muted-foreground: #61615c;
     --accent: oklch(0.97 0 0);
     --accent-foreground: oklch(0.205 0 0);
     --destructive: oklch(0.577 0.245 27.325);
     --border: oklch(0.922 0 0);
     --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
+    --ring: #84652f;
     --chart-1: oklch(0.87 0 0);
     --chart-2: oklch(0.556 0 0);
     --chart-3: oklch(0.439 0 0);
@@ -128,4 +128,37 @@
   html {
     @apply font-sans;
     }
-}
\ No newline at end of file
+}
+/* Quiet surfaces and precise browser affordances for evidence inspection. */
+:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }
+body { margin: 0; -webkit-font-smoothing: antialiased; }
+::selection { background: #eadbbd; color: #24221e; }
+:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
+#main-content:focus { outline: none; }
+h1 { text-wrap: balance; }
+p { text-wrap: pretty; }
+a { text-underline-offset: 4px; }
+button, summary, select { -webkit-tap-highlight-color: transparent; }
+button:not(:disabled), summary, select { cursor: pointer; }
+input, textarea { caret-color: #84652f; }
+input::placeholder, textarea::placeholder { color: #686863; }
+select, textarea { max-width: 100%; }
+table { font-variant-numeric: tabular-nums; }
+th { vertical-align: middle; }
+td { vertical-align: top; }
+pre { white-space: pre-wrap; overflow-wrap: anywhere; }
+.app-shell { background: var(--background); }
+.nav-link { transition: background-color 140ms ease, color 140ms ease; }
+.skip-link { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 16px; background: #24221e; color: white; border-radius: 6px; transform: translateY(-160%); }
+.skip-link:focus { transform: translateY(0); }
+.evidence-link { min-height: 28px; transition: background-color 140ms ease, border-color 140ms ease; }
+@media (hover: hover) and (pointer: fine) {
+  .evidence-link:hover { background: #f4efe4; border-color: #b4a17b; }
+  tbody tr:hover { background-color: #f7f7f4; }
+}
+@media (pointer: coarse) {
+  button[data-slot="button"], .evidence-link, select { min-height: 44px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
+}
diff --git a/frontend/src/pages/Comparison.tsx b/frontend/src/pages/Comparison.tsx
index e989246..6fff069 100644
--- a/frontend/src/pages/Comparison.tsx
+++ b/frontend/src/pages/Comparison.tsx
@@ -49,7 +49,7 @@ function ClassificationBadge({ classification }: { classification: Classificatio
 function SidePanel({ title, side }: { title: string; side: ComparisonSide }) {
   return (
     <div className="rounded-lg border bg-white p-3">
-      <p className="text-xs font-semibold tracking-wide text-zinc-400 uppercase">{title}</p>
+      <p className="text-sm font-semibold text-zinc-800">{title}</p>
       <div className="mt-1.5 flex flex-wrap items-center gap-2">
         {side.outcome ? <OutcomeBadge outcome={side.outcome} /> : null}
         <Badge variant="secondary" className="text-[10px]">
@@ -190,23 +190,23 @@ export function ComparisonPage() {
   const totals = report?.totals
 
   return (
-    <div className="space-y-4">
-      <div>
-        <h1 className="text-lg font-semibold tracking-tight">Comparison report</h1>
-        <p className="mt-0.5 text-sm text-zinc-500">
+    <div className="space-y-6">
+      <div className="border-b border-zinc-200 pb-5">
+        <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">Comparison report</h1>
+        <p className="mt-2 max-w-2xl text-sm leading-6 text-zinc-600">
           Execute the pinned suite ({suite?.case_count ?? 0} cases) under two configurations and
           inspect which behavior changed. Pass/fail is judgment; behavior changes are reported
           separately.
         </p>
       </div>
 
-      <div className="flex flex-wrap items-end gap-3 rounded-lg border bg-white p-3">
+      <div className="grid items-end gap-4 rounded-xl border bg-white p-5 sm:grid-cols-2 lg:grid-cols-[1fr_1fr_auto]">
         <label className="text-xs">
           <span className="mb-1 block font-medium text-zinc-600">Baseline configuration</span>
           <select
             value={baselineId}
             onChange={(event) => setBaselineId(event.target.value)}
-            className="rounded-md border border-zinc-300 px-2 py-1.5 text-sm focus-visible:outline-2"
+            className="h-10 w-full rounded-md border border-zinc-300 bg-white px-3 text-sm focus-visible:outline-2"
           >
             {configurations.map((config) => (
               <option key={config.id} value={config.id}>
@@ -220,7 +220,7 @@ export function ComparisonPage() {
           <select
             value={candidateId}
             onChange={(event) => setCandidateId(event.target.value)}
-            className="rounded-md border border-zinc-300 px-2 py-1.5 text-sm focus-visible:outline-2"
+            className="h-10 w-full rounded-md border border-zinc-300 bg-white px-3 text-sm focus-visible:outline-2"
           >
             {configurations.map((config) => (
               <option key={config.id} value={config.id}>
@@ -258,7 +258,7 @@ export function ComparisonPage() {
             </Alert>
           ) : null}
 
-          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+          <div className="grid grid-cols-2 gap-y-5 rounded-xl border bg-white px-5 py-5 sm:grid-cols-4">
             {(
               [
                 ['unchanged_pass', 'Unchanged pass'],
@@ -267,14 +267,14 @@ export function ComparisonPage() {
                 ['unchanged_fail', 'Unchanged fail'],
               ] as const
             ).map(([key, label]) => (
-              <div key={key} className="rounded-lg border bg-white p-3">
-                <p className="text-2xl font-semibold tabular-nums">{totals?.[key] ?? 0}</p>
+              <div key={key} className="px-3">
+                <p className="text-lg font-semibold tabular-nums">{totals?.[key] ?? 0}</p>
                 <p className="mt-0.5 text-xs text-zinc-500">{label}</p>
               </div>
             ))}
           </div>
 
-          <p className="text-xs text-zinc-400">
+          <p className="text-xs text-zinc-600">
             Baseline <Mono>{report.baseline_config_id}</Mono> vs candidate{' '}
             <Mono>{report.candidate_config_id}</Mono> · Suite {report.suite_id}@
             {report.suite_revision} · executed {formatInstant(report.created_at)} · persisted
@@ -282,7 +282,7 @@ export function ComparisonPage() {
           </p>
 
           <div className="overflow-x-auto rounded-lg border bg-white">
-            <Table>
+            <Table className="min-w-[860px]">
               <TableHeader>
                 <TableRow>
                   <SortHead sort="scenario" activeKey={sortKey} ascending={sortAsc} onSort={headerClick}>
@@ -316,7 +316,7 @@ export function ComparisonPage() {
                       tabIndex={0}
                       aria-label={`Toggle detail for ${item.scenario_id}`}
                       className={cn(
-                        'cursor-pointer',
+                        'cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-[-2px]',
                         expanded === item.scenario_id && 'bg-zinc-100',
                         item.classification === 'REGRESSION' && 'bg-red-600/5',
                       )}
@@ -324,7 +324,7 @@ export function ComparisonPage() {
                     >
                       <TableCell>
                         <span className="font-medium">{item.title}</span>
-                        <Mono className="ml-1 text-zinc-400">{item.scenario_id}</Mono>
+                        <Mono className="ml-1 text-zinc-600">{item.scenario_id}</Mono>
                       </TableCell>
                       <TableCell>
                         <Badge variant="secondary" className="text-[10px]">
@@ -332,7 +332,7 @@ export function ComparisonPage() {
                         </Badge>
                       </TableCell>
                       <TableCell>
-                        <div className="flex items-center gap-1.5">
+                        <div className="flex flex-wrap items-center gap-1.5">
                           <ClassificationBadge classification={item.classification} />
                           {item.behavior_changed ? (
                             <Badge variant="outline" className="border-blue-600/25 bg-blue-600/10 text-[10px] text-blue-800">
@@ -342,7 +342,7 @@ export function ComparisonPage() {
                         </div>
                       </TableCell>
                       <TableCell>
-                        <div className="flex items-center gap-1.5">
+                        <div className="flex flex-wrap items-center gap-1.5">
                           {item.baseline.outcome ? (
                             <OutcomeBadge outcome={item.baseline.outcome} />
                           ) : null}
@@ -352,7 +352,7 @@ export function ComparisonPage() {
                         </div>
                       </TableCell>
                       <TableCell>
-                        <div className="flex items-center gap-1.5">
+                        <div className="flex flex-wrap items-center gap-1.5">
                           {item.candidate.outcome ? (
                             <OutcomeBadge outcome={item.candidate.outcome} />
                           ) : null}
@@ -400,7 +400,7 @@ export function ComparisonPage() {
 
       {historyQuery.data && historyQuery.data.items.length > 0 ? (
         <section className="space-y-2">
-          <h2 className="text-xs font-semibold tracking-wide text-zinc-400 uppercase">
+          <h2 className="text-sm font-semibold text-zinc-800">
             Recent comparisons
           </h2>
           <ul className="divide-y divide-zinc-200 rounded-lg border bg-white text-sm">
@@ -423,7 +423,7 @@ export function ComparisonPage() {
                     regression {entry.totals.regression}
                   </Badge>
                 ) : null}
-                <span className="ml-auto text-xs text-zinc-400">
+                <span className="ml-auto text-xs text-zinc-600">
                   {formatInstant(entry.created_at)}
                 </span>
               </li>
diff --git a/frontend/src/pages/Imports.tsx b/frontend/src/pages/Imports.tsx
index a52e94f..a52d6a0 100644
--- a/frontend/src/pages/Imports.tsx
+++ b/frontend/src/pages/Imports.tsx
@@ -175,8 +175,8 @@ export function ImportsPage() {
   return (
     <div className="space-y-5">
       <div>
-        <h1 className="text-lg font-semibold tracking-tight">Imports</h1>
-        <p className="mt-0.5 text-sm text-zinc-500">
+        <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">Imports</h1>
+        <p className="mt-2 max-w-2xl text-sm leading-6 text-zinc-600">
           Upload a source export, inspect exactly what the system understood, and publish it as
           an immutable snapshot. Publication is all-or-nothing: a malformed row can never quietly
           disappear.
@@ -185,7 +185,7 @@ export function ImportsPage() {
 
       {/* Step 1: profile */}
       <section className="space-y-2">
-        <h2 className="text-xs font-semibold tracking-wide text-zinc-400 uppercase">
+        <h2 className="text-sm font-semibold text-zinc-800">
           Source profile
         </h2>
         <div className="grid gap-2 sm:grid-cols-2">
@@ -218,7 +218,7 @@ export function ImportsPage() {
 
       {/* Step 2: metadata + CSV */}
       <section className="space-y-2">
-        <h2 className="text-xs font-semibold tracking-wide text-zinc-400 uppercase">
+        <h2 className="text-sm font-semibold text-zinc-800">
           Upload and source metadata
         </h2>
         <div className="space-y-3 rounded-lg border bg-white p-3">
@@ -233,7 +233,7 @@ export function ImportsPage() {
                 className="w-full rounded-md border border-zinc-300 px-2 py-1.5 font-mono text-xs focus-visible:outline-2"
                 placeholder="2026-09-22T07:55:00+05:30"
               />
-              <span className="mt-1 block text-zinc-400">
+              <span className="mt-1 block text-zinc-600">
                 Never taken from the upload clock; must carry a UTC offset.
               </span>
             </label>
@@ -248,7 +248,7 @@ export function ImportsPage() {
                 <span className="block font-medium text-zinc-600">
                   Source asserts complete coverage
                 </span>
-                <span className="mt-1 block text-zinc-400">
+                <span className="mt-1 block text-zinc-600">
                   The application cannot prove an external export's completeness; this is the
                   importer's assertion and it is recorded on the snapshot.
                 </span>
@@ -280,7 +280,7 @@ export function ImportsPage() {
               Choose CSV file
             </Button>
             <Separator orientation="vertical" className="h-5" />
-            <span className="text-xs text-zinc-400">Curated examples:</span>
+            <span className="text-xs text-zinc-600">Curated examples:</span>
             {CURATED_EXAMPLES.map((example) => (
               <Button key={example.id} variant="secondary" size="sm" onClick={() => loadExample(example)}>
                 {example.label}
@@ -294,7 +294,7 @@ export function ImportsPage() {
       {/* Step 3: preview */}
       <section className="space-y-2">
         <div className="flex items-center gap-3">
-          <h2 className="text-xs font-semibold tracking-wide text-zinc-400 uppercase">
+          <h2 className="text-sm font-semibold text-zinc-800">
             Normalized preview
           </h2>
           <Button
@@ -336,11 +336,11 @@ export function ImportsPage() {
                 {preview.counts.warning} warnings
               </Badge>
               {preview.ignored_columns.length > 0 ? (
-                <span className="text-zinc-400">
+                <span className="text-zinc-600">
                   Ignored extra columns: {preview.ignored_columns.join(', ')}
                 </span>
               ) : null}
-              <span className="ml-auto text-zinc-400">
+              <span className="ml-auto text-zinc-600">
                 Evidence time {formatInstant(preview.declared_evidence_at)} ·{' '}
                 <Mono>{shortDigest(preview.preview_digest)}</Mono>
               </span>
@@ -374,7 +374,7 @@ export function ImportsPage() {
                       }
                     >
                       <TableCell>
-                        <Mono className="text-zinc-400">{row.row}</Mono>
+                        <Mono className="text-zinc-600">{row.row}</Mono>
                       </TableCell>
                       <TableCell className="font-mono text-[11px] text-zinc-500">
                         {Object.entries(row.raw)
@@ -428,7 +428,7 @@ export function ImportsPage() {
       {/* Step 4: publish + fork */}
       {published ? (
         <section className="space-y-2">
-          <h2 className="text-xs font-semibold tracking-wide text-zinc-400 uppercase">
+          <h2 className="text-sm font-semibold text-zinc-800">
             Published
           </h2>
           <div className="rounded-lg border border-emerald-600/30 bg-emerald-600/5 p-3">
diff --git a/frontend/src/pages/IncidentEvaluation.tsx b/frontend/src/pages/IncidentEvaluation.tsx
index d1465a8..7763701 100644
--- a/frontend/src/pages/IncidentEvaluation.tsx
+++ b/frontend/src/pages/IncidentEvaluation.tsx
@@ -18,11 +18,11 @@ function Metric({ name, data }: { name: string; data: unknown }) {
   const numerator = detail?.numerator ?? detail?.passed ?? detail?.correct
   const denominator = detail?.denominator ?? detail?.total ?? detail?.evaluated
   const display = denominator === 0 && numerator == null ? 'Not evaluated' : detail?.value == null && detail?.score == null && detail?.rate == null && numerator != null && denominator != null ? `${valueText(numerator)} / ${valueText(denominator)}` : valueText(shown)
-  return <div className="rounded border border-zinc-200 bg-white p-4">
-    <h3 className="text-xs font-medium uppercase tracking-wide text-zinc-600">{title(name)}</h3>
-    <p className="mt-2 text-2xl font-semibold tabular-nums">{display}</p>
-    <p className="mt-1 text-xs text-zinc-500">{denominator != null ? `Denominator: ${valueText(denominator)}${denominator === 0 ? ' · no measured cases' : ''}` : 'Denominator not reported'}</p>
-    {detail?.unit != null && <p className="mt-1 text-xs text-zinc-500">Unit: {valueText(detail.unit)}</p>}
+  return <div className="grid gap-2 px-4 py-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] sm:gap-6">
+    <div><h3 className="text-sm font-medium text-zinc-800">{title(name)}</h3>
+    <p className="mt-1 text-xs leading-5 text-zinc-600">{denominator != null ? `Denominator: ${valueText(denominator)}${denominator === 0 ? ' · no measured cases' : ''}` : 'Denominator not reported'}</p>
+    {detail?.unit != null && <p className="mt-1 text-xs text-zinc-600">Unit: {valueText(detail.unit)}</p>}</div>
+    <p className="self-center break-words text-base font-semibold tabular-nums text-zinc-900 sm:text-right">{display}</p>
   </div>
 }
 
@@ -32,8 +32,8 @@ function RetrievalComparison({ data }: { data: NonNullable<IncidentEvaluationRep
     { name: 'Candidate · cutoff-visible evidence card', value: data.candidate, failures: data.failed_candidate_queries },
   ]
   return <section className="space-y-3">
-    <div className="border-b border-zinc-200 pb-2"><h2 className="text-base font-semibold">Common-label retrieval comparison</h2><p className="mt-0.5 text-xs text-zinc-500">Both configurations use the same {data.label_revision} relevance labels. Counts are top-five results.</p></div>
-    <div className="overflow-x-auto rounded border border-zinc-200 bg-white"><table className="w-full min-w-[600px] text-left text-sm"><caption className="sr-only">Title-only baseline and cutoff-visible evidence-card retrieval measured against common labels</caption><thead className="border-b bg-zinc-50 text-xs uppercase text-zinc-500"><tr><th scope="col" className="px-4 py-2">Retriever</th><th scope="col" className="px-4 py-2">Hit at 5</th><th scope="col" className="px-4 py-2">Recall at 5</th></tr></thead><tbody className="divide-y divide-zinc-100">{rows.map((row) => <tr key={row.name}><th scope="row" className="px-4 py-3 text-sm font-medium">{row.name}<span className="mt-1 block font-mono text-xs font-normal text-zinc-500">{row.value.configuration}</span></th><td className="px-4 py-3 font-mono text-sm tabular-nums">{row.value.hit_at_5.passed} / {row.value.hit_at_5.total}</td><td className="px-4 py-3 font-mono text-sm tabular-nums">{row.value.recall_at_5.passed} / {row.value.recall_at_5.total}</td></tr>)}</tbody></table></div>
+    <div className="border-b border-zinc-200 pb-2"><h2 className="text-base font-semibold">Common-label retrieval comparison</h2><p className="mt-0.5 text-xs text-zinc-600">Both configurations use the same {data.label_revision} relevance labels. Counts are top-five results.</p></div>
+    <div className="overflow-x-auto rounded border border-zinc-200 bg-white"><table className="w-full min-w-[600px] text-left text-sm"><caption className="sr-only">Title-only baseline and cutoff-visible evidence-card retrieval measured against common labels</caption><thead className="border-b bg-zinc-50 text-xs uppercase text-zinc-600"><tr><th scope="col" className="px-4 py-2">Retriever</th><th scope="col" className="px-4 py-2">Hit at 5</th><th scope="col" className="px-4 py-2">Recall at 5</th></tr></thead><tbody className="divide-y divide-zinc-100 [&_tr]:align-top">{rows.map((row) => <tr key={row.name}><th scope="row" className="px-4 py-3 text-sm font-medium">{row.name}<span className="mt-1 block font-mono text-xs font-normal text-zinc-600">{row.value.configuration}</span></th><td className="px-4 py-3 font-mono text-sm tabular-nums">{row.value.hit_at_5.passed} / {row.value.hit_at_5.total}</td><td className="px-4 py-3 font-mono text-sm tabular-nums">{row.value.recall_at_5.passed} / {row.value.recall_at_5.total}</td></tr>)}</tbody></table></div>
     <dl className="grid gap-3 text-xs sm:grid-cols-2">{rows.map((row) => <div key={row.name} className="rounded border border-zinc-200 bg-white p-3"><dt className="font-medium text-zinc-700">Failed queries · {row.name}</dt><dd className="mt-1 text-zinc-600">{row.failures.length ? row.failures.join(', ') : 'None in this labeled set'}</dd></div>)}</dl>
   </section>
 }
@@ -42,23 +42,23 @@ export function IncidentEvaluationPage() {
   const release = useQuery({ queryKey: ['release-evaluation'], queryFn: incidentApi.releaseEvaluation, retry: false })
   const report = useQuery({ queryKey: ['incident-evaluation', 'incident-core-v1'], queryFn: () => incidentApi.evaluationReport('incident-core-v1'), retry: false })
   return <div className="space-y-7">
-    <header className="border-b border-zinc-200 pb-5"><p className="text-xs font-semibold uppercase tracking-widest text-amber-700">Engineering view</p><h1 className="mt-2 text-2xl font-semibold tracking-tight">Incident evaluation lab</h1><p className="mt-1 max-w-2xl text-sm text-zinc-600">Measured quality on a pinned synthetic dataset. Failures and limitations stay visible alongside scores.</p></header>
-    <section className="space-y-3 rounded border bg-white p-4"><h2 className="font-semibold">Release dataset integrity</h2>{release.data ? <><p className="text-xs text-zinc-600">{release.data.release} · {release.data.status}</p><div className="grid gap-3 sm:grid-cols-4"><div><p className="text-xs text-zinc-500">Historical episodes</p><p className="text-xl font-semibold">{release.data.split_counts.historical}</p></div><div><p className="text-xs text-zinc-500">Development investigations</p><p className="text-xl font-semibold">{release.data.split_counts.development}</p></div><div><p className="text-xs text-zinc-500">Locked investigations</p><p className="text-xl font-semibold">{release.data.split_counts.locked}</p></div><div><p className="text-xs text-zinc-500">Arithmetic and structure checks</p><p className="text-xl font-semibold">{release.data.arithmetic_and_structure_cases_checked} / 60</p></div></div><p className="text-xs">{release.data.authored_templates} authored templates · {release.data.leakage_audit}</p><p className="text-xs text-amber-900">Independent semantic support review: {release.data.human_support_precision == null ? 'Not reviewed' : release.data.human_support_precision}. OpenAI: {(report.data?.current_provider?.status ?? release.data.provider_status).replaceAll('_', ' ').toLowerCase()}.</p>{[...release.data.problems, ...release.data.limitations].map((item, index) => <p key={index} className="text-xs text-zinc-600">{item}</p>)}</> : <p className="text-xs text-zinc-600">{release.error ? 'Release integrity report unavailable; no current dataset measurement is shown.' : 'Loading release integrity…'}</p>}</section>
-    <section className="space-y-3 rounded border bg-white p-4"><h2 className="font-semibold">Current OpenAI evaluation</h2><p role="status" className="text-sm text-amber-900">{report.data?.current_provider?.status && report.data.current_provider.status !== 'NOT_EVALUATED' ? `OpenAI: ${report.data.current_provider.status.replaceAll('_', ' ').toLowerCase()}.` : 'OpenAI not evaluated.'}</p>{report.data?.current_provider && <><dl className="grid gap-3 text-xs sm:grid-cols-4">{['attempted', 'completed', 'failed', 'running', 'unverified_completed', 'reviewed'].map((name) => <div key={name}><dt className="capitalize text-zinc-500">{name.replaceAll('_', ' ')}</dt><dd className="mt-1 text-xl font-semibold">{({ attempted: report.data.current_provider?.attempted, completed: report.data.current_provider?.completed, failed: report.data.current_provider?.failed, running: report.data.current_provider?.running, unverified_completed: report.data.current_provider?.unverified_completed, reviewed: report.data.current_provider?.reviewed })[name] ?? 'Not reported'}</dd></div>)}</dl><p className="text-xs">Human-reviewed claim support: {report.data.current_provider.reviewed_claims ? `${report.data.current_provider.supported_claims ?? 'Not reported'} / ${report.data.current_provider.reviewed_claims}` : 'Not reviewed'}. Valid citation references alone do not establish claim support.</p>{report.data.current_provider.review_policy && <p className="text-xs text-zinc-600">{report.data.current_provider.review_policy}</p>}{report.data.current_provider.limitations?.map((item, index) => <p key={index} className="text-xs text-zinc-600">{item}</p>)}</>}</section>
+    <header className="border-b border-zinc-200 pb-5"><h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">Incident evaluation lab</h1><p className="mt-2 max-w-2xl text-sm leading-6 text-zinc-600">Measured quality on a pinned synthetic dataset. Failures and limitations stay visible alongside scores.</p></header>
+    <section className="space-y-4 rounded-xl border border-zinc-200 bg-white p-5 sm:p-6"><h2 className="font-semibold">Release dataset integrity</h2>{release.data ? <><p className="text-xs text-zinc-600">{release.data.release} · {release.data.status}</p><div className="grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-4"><div><p className="text-xs text-zinc-600">Historical episodes</p><p className="text-xl font-semibold">{release.data.split_counts.historical}</p></div><div><p className="text-xs text-zinc-600">Development investigations</p><p className="text-xl font-semibold">{release.data.split_counts.development}</p></div><div><p className="text-xs text-zinc-600">Locked investigations</p><p className="text-xl font-semibold">{release.data.split_counts.locked}</p></div><div><p className="text-xs text-zinc-600">Arithmetic and structure checks</p><p className="text-xl font-semibold">{release.data.arithmetic_and_structure_cases_checked} / 60</p></div></div><p className="text-xs">{release.data.authored_templates} authored templates · {release.data.leakage_audit}</p><p className="text-xs text-amber-900">Independent semantic support review: {release.data.human_support_precision == null ? 'Not reviewed' : release.data.human_support_precision}. OpenAI: {(report.data?.current_provider?.status ?? release.data.provider_status).replaceAll('_', ' ').toLowerCase()}.</p>{[...release.data.problems, ...release.data.limitations].map((item, index) => <p key={index} className="text-xs text-zinc-600">{item}</p>)}</> : <p className="text-xs text-zinc-600">{release.error ? 'Release integrity report unavailable; no current dataset measurement is shown.' : 'Loading release integrity…'}</p>}</section>
+    <section className="space-y-4 rounded-xl border border-zinc-200 bg-white p-5 sm:p-6"><h2 className="font-semibold">Current OpenAI evaluation</h2><p role="status" className="text-sm text-amber-900">{report.data?.current_provider?.status && report.data.current_provider.status !== 'NOT_EVALUATED' ? `OpenAI: ${report.data.current_provider.status.replaceAll('_', ' ').toLowerCase()}.` : report.isPending ? 'Loading current evaluation…' : report.isError ? 'Current evaluation unavailable.' : 'OpenAI not evaluated.'}</p>{report.data?.current_provider && <><dl className="grid grid-cols-2 gap-x-6 gap-y-4 text-xs sm:grid-cols-3">{['attempted', 'completed', 'failed', 'running', 'unverified_completed', 'reviewed'].map((name) => <div key={name}><dt className="capitalize text-zinc-600">{name.replaceAll('_', ' ')}</dt><dd className="mt-1 text-xl font-semibold">{({ attempted: report.data.current_provider?.attempted, completed: report.data.current_provider?.completed, failed: report.data.current_provider?.failed, running: report.data.current_provider?.running, unverified_completed: report.data.current_provider?.unverified_completed, reviewed: report.data.current_provider?.reviewed })[name] ?? 'Not reported'}</dd></div>)}</dl><p className="text-xs">Human-reviewed claim support: {report.data.current_provider.reviewed_claims ? `${report.data.current_provider.supported_claims ?? 'Not reported'} / ${report.data.current_provider.reviewed_claims}` : 'Not reviewed'}. Valid citation references alone do not establish claim support.</p>{report.data.current_provider.review_policy && <p className="text-xs text-zinc-600">{report.data.current_provider.review_policy}</p>}{report.data.current_provider.limitations?.map((item, index) => <p key={index} className="text-xs text-zinc-600">{item}</p>)}</>}</section>
     <p className="rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900">Provider results below are historical Qwen measurements and retain their original author-review labels.</p>
     {report.isPending ? <div className="space-y-3" aria-busy="true" aria-label="Loading evaluation report"><Skeleton className="h-20" /><Skeleton className="h-36" /><Skeleton className="h-48" /></div> : report.isError ? <div role="alert" className="rounded border border-red-200 bg-red-50 p-5"><h2 className="text-sm font-semibold text-red-900">Evaluation report unavailable</h2><p className="mt-1 text-sm text-red-800">{report.error.message}</p><Button className="mt-3" variant="outline" size="sm" onClick={() => report.refetch()}>Retry</Button></div> : <>
       {report.data.execution_kind === 'saved_evaluation' && <p role="status" className="rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900">API unavailable. Showing the bundled saved evaluation report.</p>}
-      <section className="rounded border border-zinc-200 bg-white p-4"><h2 className="text-sm font-semibold">Pinned run</h2><dl className="mt-3 grid gap-3 text-xs sm:grid-cols-2 lg:grid-cols-4"><div><dt className="text-zinc-500">Dataset revision</dt><dd className="mt-1 font-mono">{report.data.dataset_revision}</dd></div><div><dt className="text-zinc-500">Label revision</dt><dd className="mt-1 font-mono">{report.data.label_revision}</dd></div><div><dt className="text-zinc-500">Cases</dt><dd className="mt-1 font-mono">{report.data.case_count}</dd></div><div><dt className="text-zinc-500">Execution mode</dt><dd className="mt-1 font-mono">{report.data.execution_kind ? title(report.data.execution_kind) : 'Not reported'}</dd></div></dl><p className="mt-3 border-t border-zinc-100 pt-3 text-xs text-zinc-600"><strong>Configuration:</strong> {valueText(report.data.configuration)}</p>{report.data.runtime != null && <p className="mt-1 text-xs text-zinc-600"><strong>Runtime:</strong> {valueText(report.data.runtime)}</p>}{report.data.hardware != null && <p className="mt-1 text-xs text-zinc-600"><strong>Hardware:</strong> {valueText(report.data.hardware)}</p>}{report.data.model != null && <p className="mt-1 text-xs text-zinc-600"><strong>Model:</strong> {valueText(report.data.model)}</p>}</section>
+      <section className="rounded-xl border border-zinc-200 bg-white p-5 sm:p-6"><h2 className="text-sm font-semibold">Pinned run</h2><dl className="mt-3 grid gap-3 text-xs sm:grid-cols-2 lg:grid-cols-4"><div><dt className="text-zinc-600">Dataset revision</dt><dd className="mt-1 font-mono">{report.data.dataset_revision}</dd></div><div><dt className="text-zinc-600">Label revision</dt><dd className="mt-1 font-mono">{report.data.label_revision}</dd></div><div><dt className="text-zinc-600">Cases</dt><dd className="mt-1 font-mono">{report.data.case_count}</dd></div><div><dt className="text-zinc-600">Execution mode</dt><dd className="mt-1">{report.data.execution_kind ? title(report.data.execution_kind) : 'Not reported'}</dd></div></dl><p className="mt-3 border-t border-zinc-100 pt-3 text-xs text-zinc-600"><strong>Configuration:</strong> {valueText(report.data.configuration)}</p>{report.data.runtime != null && <p className="mt-1 text-xs text-zinc-600"><strong>Runtime:</strong> {valueText(report.data.runtime)}</p>}{report.data.hardware != null && <p className="mt-1 text-xs text-zinc-600"><strong>Hardware:</strong> {valueText(report.data.hardware)}</p>}{report.data.model != null && <p className="mt-1 text-xs text-zinc-600"><strong>Model:</strong> {valueText(report.data.model)}</p>}</section>
 
-      <section className="space-y-3"><div className="border-b border-zinc-200 pb-2"><h2 className="text-base font-semibold">Historical Qwen and deterministic results</h2><p className="mt-0.5 text-xs text-zinc-500">Each metric states its reported denominator. Missing denominators are shown explicitly.</p></div>{Object.keys(report.data.metrics).length ? <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">{Object.entries(report.data.metrics).map(([name, data]) => <Metric key={name} name={name} data={data} />)}</div> : <p className="rounded border border-dashed p-5 text-sm text-zinc-600">No metrics were published in this report.</p>}</section>
+      <section className="space-y-3"><div className="border-b border-zinc-200 pb-2"><h2 className="text-base font-semibold">Historical Qwen and deterministic results</h2><p className="mt-0.5 text-xs text-zinc-600">Each metric states its reported denominator. Missing denominators are shown explicitly.</p></div>{Object.keys(report.data.metrics).length ? <div className="divide-y divide-zinc-200 rounded-xl border border-zinc-200 bg-white">{Object.entries(report.data.metrics).map(([name, data]) => <Metric key={name} name={name} data={data} />)}</div> : <p className="rounded border border-dashed p-5 text-sm text-zinc-600">No metrics were published in this report.</p>}</section>
 
       {report.data.baseline_comparison && <RetrievalComparison data={report.data.baseline_comparison} />}
 
-      <section className="space-y-3"><div className="border-b border-zinc-200 pb-2"><h2 className="text-base font-semibold">Failed cases</h2><p className="mt-0.5 text-xs text-zinc-500">{report.data.failures.length} reported failures</p></div>{report.data.failures.length ? <ul className="space-y-2">{report.data.failures.map((failure, index) => <li key={index} className="rounded border border-amber-200 bg-amber-50 p-4"><h3 className="text-sm font-semibold">{valueText(failure.case ?? failure.case_id ?? failure.id ?? `Case ${index + 1}`)}</h3><dl className="mt-2 space-y-1 text-xs text-zinc-700">{Object.entries(failure).filter(([key]) => !['case', 'case_id', 'id'].includes(key)).map(([key, value]) => <div key={key}><dt className="inline font-medium">{title(key)}: </dt><dd className="inline">{valueText(value)}</dd></div>)}</dl></li>)}</ul> : <p className="rounded border border-zinc-200 bg-white p-5 text-sm text-zinc-600">No failures are listed. Check the metric denominators and limitations before drawing conclusions.</p>}</section>
+      <section className="space-y-3"><div className="border-b border-zinc-200 pb-2"><h2 className="text-base font-semibold">Failed cases</h2><p className="mt-0.5 text-xs text-zinc-600">{report.data.failures.length} reported failures</p></div>{report.data.failures.length ? <ul className="space-y-2">{report.data.failures.map((failure, index) => <li key={index} className="rounded border border-amber-200 bg-amber-50 p-4"><h3 className="text-sm font-semibold">{valueText(failure.case ?? failure.case_id ?? failure.id ?? `Case ${index + 1}`)}</h3><dl className="mt-2 space-y-1 text-xs text-zinc-700">{Object.entries(failure).filter(([key]) => !['case', 'case_id', 'id'].includes(key)).map(([key, value]) => <div key={key}><dt className="inline font-medium">{title(key)}: </dt><dd className="inline">{valueText(value)}</dd></div>)}</dl></li>)}</ul> : <p className="rounded border border-zinc-200 bg-white p-5 text-sm text-zinc-600">No failures are listed. Check the metric denominators and limitations before drawing conclusions.</p>}</section>
 
-      {report.data.cases.length > 0 && <section className="space-y-3"><div className="border-b border-zinc-200 pb-2"><h2 className="text-base font-semibold">Case results</h2><p className="mt-0.5 text-xs text-zinc-500">All {report.data.cases.length} published case records</p></div><div className="overflow-x-auto rounded border border-zinc-200 bg-white"><table className="w-full min-w-[640px] text-left text-sm"><thead className="border-b bg-zinc-50 text-xs uppercase text-zinc-500"><tr><th scope="col" className="px-4 py-2">Case</th><th scope="col" className="px-4 py-2">Result</th><th scope="col" className="px-4 py-2">Details</th></tr></thead><tbody className="divide-y divide-zinc-100">{report.data.cases.map((item, index) => <tr key={index}><td className="px-4 py-3 font-mono text-xs">{valueText(item.incident_id ?? item.case_id ?? item.id ?? index + 1)}</td><td className="px-4 py-3">{valueText(item.status ?? item.verdict ?? item.result ?? (item.numeric_pass === true && item.category_pass === true ? 'PASS' : 'FAIL'))}</td><td className="px-4 py-3 text-xs text-zinc-600">{Object.entries(item).filter(([key]) => !['incident_id', 'case_id', 'id', 'status', 'verdict', 'result'].includes(key)).map(([key, value]) => `${title(key)}: ${valueText(value)}`).join(' · ')}</td></tr>)}</tbody></table></div></section>}
+      {report.data.cases.length > 0 && <section className="space-y-3"><div className="border-b border-zinc-200 pb-2"><h2 className="text-base font-semibold">Case results</h2><p className="mt-0.5 text-xs text-zinc-600">All {report.data.cases.length} published case records</p></div><div className="overflow-x-auto rounded border border-zinc-200 bg-white"><table className="w-full min-w-[640px] text-left text-sm"><thead className="border-b bg-zinc-50 text-xs uppercase text-zinc-600"><tr><th scope="col" className="px-4 py-2">Case</th><th scope="col" className="px-4 py-2">Result</th><th scope="col" className="px-4 py-2">Details</th></tr></thead><tbody className="divide-y divide-zinc-100 [&_tr]:align-top">{report.data.cases.map((item, index) => <tr key={index}><td className="px-4 py-3 font-mono text-xs">{valueText(item.incident_id ?? item.case_id ?? item.id ?? index + 1)}</td><td className="px-4 py-3">{valueText(item.status ?? item.verdict ?? item.result ?? (item.numeric_pass === true && item.category_pass === true ? 'PASS' : 'FAIL'))}</td><td className="px-4 py-3 text-xs text-zinc-600">{Object.entries(item).filter(([key]) => !['incident_id', 'case_id', 'id', 'status', 'verdict', 'result'].includes(key)).map(([key, value]) => `${title(key)}: ${valueText(value)}`).join(' · ')}</td></tr>)}</tbody></table></div></section>}
 
-      {!!report.data.retrieval_cases?.length && <section className="space-y-3"><div className="border-b border-zinc-200 pb-2"><h2 className="text-base font-semibold">Retrieval checks</h2><p className="mt-0.5 text-xs text-zinc-500">Relevant labels and retrieved IDs from live lexical search</p></div><div className="overflow-x-auto rounded border border-zinc-200 bg-white"><table className="w-full min-w-[640px] text-left text-sm"><thead className="border-b bg-zinc-50 text-xs uppercase text-zinc-500"><tr><th scope="col" className="px-4 py-2">Query</th><th scope="col" className="px-4 py-2">Relevant</th><th scope="col" className="px-4 py-2">Retrieved</th><th scope="col" className="px-4 py-2">Hits</th></tr></thead><tbody className="divide-y divide-zinc-100">{report.data.retrieval_cases.map((item, index) => <tr key={index}><td className="px-4 py-3">{valueText(item.query)}</td><td className="px-4 py-3 font-mono text-xs">{valueText(item.relevant)}</td><td className="px-4 py-3 font-mono text-xs">{valueText(item.retrieved)}</td><td className="px-4 py-3 font-mono text-xs">{valueText(item.hits)}</td></tr>)}</tbody></table></div></section>}
+      {!!report.data.retrieval_cases?.length && <section className="space-y-3"><div className="border-b border-zinc-200 pb-2"><h2 className="text-base font-semibold">Retrieval checks</h2><p className="mt-0.5 text-xs text-zinc-600">Relevant labels and retrieved IDs from live lexical search</p></div><div className="overflow-x-auto rounded border border-zinc-200 bg-white"><table className="w-full min-w-[640px] text-left text-sm"><thead className="border-b bg-zinc-50 text-xs uppercase text-zinc-600"><tr><th scope="col" className="px-4 py-2">Query</th><th scope="col" className="px-4 py-2">Relevant</th><th scope="col" className="px-4 py-2">Retrieved</th><th scope="col" className="px-4 py-2">Hits</th></tr></thead><tbody className="divide-y divide-zinc-100 [&_tr]:align-top">{report.data.retrieval_cases.map((item, index) => <tr key={index}><td className="px-4 py-3">{valueText(item.query)}</td><td className="px-4 py-3 font-mono text-xs">{valueText(item.relevant)}</td><td className="px-4 py-3 font-mono text-xs">{valueText(item.retrieved)}</td><td className="px-4 py-3 font-mono text-xs">{valueText(item.hits)}</td></tr>)}</tbody></table></div></section>}
 
       <section className="space-y-3"><div className="border-b border-zinc-200 pb-2"><h2 className="text-base font-semibold">Limits of this evaluation</h2></div>{report.data.limitations.length ? <ul className="list-disc space-y-2 pl-5 text-sm text-zinc-700">{report.data.limitations.map((limit, index) => <li key={index}>{limit}</li>)}</ul> : <p className="text-sm text-zinc-600">No limitations were supplied with this report.</p>}</section>
     </>}
diff --git a/frontend/src/pages/IncidentImports.tsx b/frontend/src/pages/IncidentImports.tsx
index a9f8d77..2b4b598 100644
--- a/frontend/src/pages/IncidentImports.tsx
+++ b/frontend/src/pages/IncidentImports.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { Link } from 'react-router'
+import { ArrowLeft } from 'lucide-react'
 import { api } from '@/lib/api'
 import { incidentApi, type IncidentImportBody, type IncidentImportPreview, type NewIncidentBody } from '@/lib/incidents'
 import { Button } from '@/components/ui/button'
@@ -75,19 +76,19 @@ export function IncidentImportsPage() {
   }
 
   return <div className="space-y-6">
-    <div><Link to="/" className="text-xs text-zinc-600 underline underline-offset-4">← Incident library</Link><p className="mt-5 text-xs font-semibold uppercase tracking-widest text-amber-700">Local owner tool</p><h1 className="mt-2 text-2xl font-semibold tracking-tight">Import incident evidence</h1><p className="mt-1 max-w-2xl text-sm text-zinc-600">Preview a local source file and its row diagnostics before adding it to an incident.</p></div>
+    <div className="border-b border-zinc-200 pb-5"><Link to="/" className="inline-flex items-center gap-1.5 text-xs text-zinc-600 underline underline-offset-4"><ArrowLeft aria-hidden="true" className="size-3.5" />Incident library</Link><h1 className="mt-4 text-2xl font-semibold tracking-tight sm:text-3xl">Import incident evidence</h1><p className="mt-2 max-w-2xl text-sm leading-6 text-zinc-600">Preview a local source file and its row diagnostics before adding it to an incident.</p></div>
     {capabilities.isPending ? <Skeleton className="h-32" /> : capabilities.isError ? <div role="alert" className="rounded border border-red-200 bg-red-50 p-4 text-sm text-red-800">Could not check permissions: {capabilities.error.message}</div> : !capabilities.data?.imports_enabled ? <div className="rounded border border-zinc-200 bg-white p-5 text-sm text-zinc-700">Sign in with an owner account to import source evidence.</div> : <>
       <div className="rounded border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">Publishing creates an immutable incident revision. Existing reports and reviews remain attached to their original revisions. A new baseline requires a new incident.</div>
-      {incidents.isPending ? <Skeleton className="h-64" /> : incidents.isError ? <div role="alert" className="rounded border border-red-200 bg-red-50 p-4 text-sm text-red-800">Could not load incidents: {incidents.error.message}</div> : <form className="space-y-5 rounded border border-zinc-200 bg-white p-5" onSubmit={(event) => { event.preventDefault(); setPreview(null); previewMutation.mutate() }}>
-        <div><label htmlFor="import-mode" className="mb-1 block text-xs font-medium">Import into</label><select id="import-mode" value={mode} onChange={(event) => { setMode(event.target.value as 'existing' | 'new'); changed() }} className="h-9 w-full max-w-sm rounded border border-zinc-300 bg-white px-2 text-sm focus-visible:outline-2"><option value="existing">Existing incident · new revision</option><option value="new">New incident · baseline plan</option></select></div>
-        {mode === 'existing' ? <div className="grid gap-4 sm:grid-cols-2"><div><label htmlFor="import-incident" className="mb-1 block text-xs font-medium">Incident</label><select id="import-incident" required value={incidentId} onChange={(event) => chooseIncident(event.target.value)} className="h-9 w-full rounded border border-zinc-300 bg-white px-2 text-sm focus-visible:outline-2"><option value="">Select an incident…</option>{incidents.data.items.map((item) => <option key={item.id} value={item.id}>{item.id} · {item.title}</option>)}</select></div><div><label htmlFor="import-revision" className="mb-1 block text-xs font-medium">Base revision</label><select id="import-revision" required value={baseRevision} onChange={(event) => { setBaseRevision(Number(event.target.value)); changed() }} disabled={!selected} className="h-9 w-full rounded border border-zinc-300 bg-white px-2 text-sm focus-visible:outline-2">{Array.from({ length: selected?.revision ?? 1 }, (_, index) => index + 1).map((value) => <option key={value} value={value}>Revision {value}{value === selected?.revision ? ' · latest' : ' · historical'}</option>)}</select><p className="mt-1 text-xs text-zinc-500">Publication requires the latest revision.</p></div></div> : <div className="grid gap-4 sm:grid-cols-2"><div><label htmlFor="new-id" className="mb-1 block text-xs font-medium">New incident ID</label><Input id="new-id" required maxLength={64} value={newId} onChange={(event) => { setNewId(event.target.value); changed() }} placeholder="INC-201" /></div><div><label htmlFor="new-title" className="mb-1 block text-xs font-medium">Incident title</label><Input id="new-title" required minLength={3} maxLength={200} value={newTitle} onChange={(event) => { setNewTitle(event.target.value); changed() }} placeholder="Delayed output on sewing line S2" /></div><div><label htmlFor="new-factory" className="mb-1 block text-xs font-medium">Factory</label><Input id="new-factory" required value={factory} onChange={(event) => { setFactory(event.target.value); changed() }} /></div><div><label htmlFor="new-line" className="mb-1 block text-xs font-medium">Sewing line</label><Input id="new-line" required value={line} onChange={(event) => { setLine(event.target.value); changed() }} /></div><div><label htmlFor="new-order" className="mb-1 block text-xs font-medium">Order ID</label><Input id="new-order" required value={order} onChange={(event) => { setOrder(event.target.value); changed() }} /></div><div><label htmlFor="new-style" className="mb-1 block text-xs font-medium">Style ID</label><Input id="new-style" required value={style} onChange={(event) => { setStyle(event.target.value); changed() }} /></div><div><label htmlFor="new-window-start" className="mb-1 block text-xs font-medium">Window start</label><Input id="new-window-start" required value={windowStart} onChange={(event) => { setWindowStart(event.target.value); changed() }} placeholder="2026-09-28T09:00:00+05:30" /></div><div><label htmlFor="new-window-end" className="mb-1 block text-xs font-medium">Window end</label><Input id="new-window-end" required value={windowEnd} onChange={(event) => { setWindowEnd(event.target.value); changed() }} placeholder="2026-09-28T12:00:00+05:30" /></div><p className="text-xs text-zinc-600 sm:col-span-2">Scope is sewing stage, good_units. The file must include matching 15-minute baseline plan records.</p></div>}
-        <div className="grid gap-4 sm:grid-cols-2"><div>{mode === 'existing' ? <><label htmlFor="import-profile" className="mb-1 block text-xs font-medium">Source profile</label><select id="import-profile" value={profile} onChange={(event) => { setProfile(event.target.value as IncidentImportBody['profile']); changed() }} className="h-9 w-full rounded border border-zinc-300 bg-white px-2 text-sm focus-visible:outline-2"><option value="operations-v1">Operations</option><option value="notes-v1">Notes</option><option value="production-v1">Production output</option></select></> : <p className="text-sm text-zinc-700"><strong>Source profile:</strong> Production baseline</p>}</div><div><label htmlFor="import-file" className="mb-1 block text-xs font-medium">Local file</label><Input id="import-file" type="file" required accept=".csv,.json,.jsonl" onChange={(event) => { const next = event.target.files?.[0] ?? null; setFile(next); setFileError(next && next.size > MAX_BYTES ? 'File exceeds 2 MiB.' : ''); changed() }} /><p className="mt-1 text-xs text-zinc-500">UTF-8 · CSV, JSON, or JSONL · up to 10,000 rows and 2 MiB</p>{fileError && <p role="alert" className="text-xs text-red-700">{fileError}</p>}</div></div>
-        <div className="grid gap-4 sm:grid-cols-2"><div><label htmlFor="import-source" className="mb-1 block text-xs font-medium">Source system</label><Input id="import-source" required value={sourceSystem} onChange={(event) => { setSourceSystem(event.target.value); changed() }} /></div><div><label htmlFor="import-timezone" className="mb-1 block text-xs font-medium">Source timezone</label><Input id="import-timezone" required value={timezone} onChange={(event) => { setTimezone(event.target.value); changed() }} /><p className="mt-1 text-xs text-zinc-500">IANA timezone, for example Asia/Kolkata</p></div></div>
-        <div className="grid gap-4 sm:grid-cols-2"><div><label htmlFor="import-cutoff" className="mb-1 block text-xs font-medium">Knowledge cutoff</label><Input id="import-cutoff" required value={cutoff} onChange={(event) => { setCutoff(event.target.value); changed() }} placeholder="2026-09-28T11:30:00+05:30" /><p className="mt-1 text-xs text-zinc-500">ISO timestamp with offset{mode === 'existing' ? '; later than the base revision’s cutoff.' : '; at or after window start.'}</p></div>{(mode === 'new' || profile === 'production-v1') && <div><label htmlFor="import-unit" className="mb-1 block text-xs font-medium">Production unit</label><Input id="import-unit" required value={unit} onChange={(event) => { setUnit(event.target.value); changed() }} /><p className="mt-1 text-xs text-zinc-500">Use good_units. Counts must be 15-minute deltas.</p></div>}</div>
+      {incidents.isPending ? <Skeleton className="h-64" /> : incidents.isError ? <div role="alert" className="rounded border border-red-200 bg-red-50 p-4 text-sm text-red-800">Could not load incidents: {incidents.error.message}</div> : <form className="space-y-6 rounded-xl border border-zinc-200 bg-white p-5 sm:p-6" onSubmit={(event) => { event.preventDefault(); setPreview(null); previewMutation.mutate() }}>
+        <div className="border-b border-zinc-200 pb-5"><h2 className="mb-4 text-base font-semibold">Incident destination</h2><label htmlFor="import-mode" className="mb-1 block text-xs font-medium">Import into</label><select id="import-mode" value={mode} onChange={(event) => { setMode(event.target.value as 'existing' | 'new'); changed() }} className="h-10 w-full max-w-sm rounded border border-zinc-300 bg-white px-2 text-sm focus-visible:outline-2"><option value="existing">Existing incident · new revision</option><option value="new">New incident · baseline plan</option></select></div>
+        {mode === 'existing' ? <div className="grid gap-4 sm:grid-cols-2"><div><label htmlFor="import-incident" className="mb-1 block text-xs font-medium">Incident</label><select id="import-incident" required value={incidentId} onChange={(event) => chooseIncident(event.target.value)} className="h-10 w-full rounded border border-zinc-300 bg-white px-2 text-sm focus-visible:outline-2"><option value="">Select an incident…</option>{incidents.data.items.map((item) => <option key={item.id} value={item.id}>{item.id} · {item.title}</option>)}</select></div><div><label htmlFor="import-revision" className="mb-1 block text-xs font-medium">Base revision</label><select id="import-revision" required value={baseRevision} onChange={(event) => { setBaseRevision(Number(event.target.value)); changed() }} disabled={!selected} className="h-10 w-full rounded border border-zinc-300 bg-white px-2 text-sm focus-visible:outline-2">{Array.from({ length: selected?.revision ?? 1 }, (_, index) => index + 1).map((value) => <option key={value} value={value}>Revision {value}{value === selected?.revision ? ' · latest' : ' · historical'}</option>)}</select><p className="mt-1 text-xs text-zinc-600">Publication requires the latest revision.</p></div></div> : <div className="grid gap-4 sm:grid-cols-2"><div><label htmlFor="new-id" className="mb-1 block text-xs font-medium">New incident ID</label><Input id="new-id" required maxLength={64} value={newId} onChange={(event) => { setNewId(event.target.value); changed() }} placeholder="INC-201" /></div><div><label htmlFor="new-title" className="mb-1 block text-xs font-medium">Incident title</label><Input id="new-title" required minLength={3} maxLength={200} value={newTitle} onChange={(event) => { setNewTitle(event.target.value); changed() }} placeholder="Delayed output on sewing line S2" /></div><div><label htmlFor="new-factory" className="mb-1 block text-xs font-medium">Factory</label><Input id="new-factory" required value={factory} onChange={(event) => { setFactory(event.target.value); changed() }} /></div><div><label htmlFor="new-line" className="mb-1 block text-xs font-medium">Sewing line</label><Input id="new-line" required value={line} onChange={(event) => { setLine(event.target.value); changed() }} /></div><div><label htmlFor="new-order" className="mb-1 block text-xs font-medium">Order ID</label><Input id="new-order" required value={order} onChange={(event) => { setOrder(event.target.value); changed() }} /></div><div><label htmlFor="new-style" className="mb-1 block text-xs font-medium">Style ID</label><Input id="new-style" required value={style} onChange={(event) => { setStyle(event.target.value); changed() }} /></div><div><label htmlFor="new-window-start" className="mb-1 block text-xs font-medium">Window start</label><Input id="new-window-start" required value={windowStart} onChange={(event) => { setWindowStart(event.target.value); changed() }} placeholder="2026-09-28T09:00:00+05:30" /></div><div><label htmlFor="new-window-end" className="mb-1 block text-xs font-medium">Window end</label><Input id="new-window-end" required value={windowEnd} onChange={(event) => { setWindowEnd(event.target.value); changed() }} placeholder="2026-09-28T12:00:00+05:30" /></div><p className="text-xs text-zinc-600 sm:col-span-2">Scope is sewing stage, good_units. The file must include matching 15-minute baseline plan records.</p></div>}
+        <div className="grid gap-4 border-t border-zinc-200 pt-5 sm:grid-cols-2"><h2 className="text-base font-semibold sm:col-span-2">Source evidence</h2><div>{mode === 'existing' ? <><label htmlFor="import-profile" className="mb-1 block text-xs font-medium">Source profile</label><select id="import-profile" value={profile} onChange={(event) => { setProfile(event.target.value as IncidentImportBody['profile']); changed() }} className="h-10 w-full rounded border border-zinc-300 bg-white px-2 text-sm focus-visible:outline-2"><option value="operations-v1">Operations</option><option value="notes-v1">Notes</option><option value="production-v1">Production output</option></select></> : <p className="text-sm text-zinc-700"><strong>Source profile:</strong> Production baseline</p>}</div><div><label htmlFor="import-file" className="mb-1 block text-xs font-medium">Local file</label><Input id="import-file" type="file" required accept=".csv,.json,.jsonl" onChange={(event) => { const next = event.target.files?.[0] ?? null; setFile(next); setFileError(next && next.size > MAX_BYTES ? 'File exceeds 2 MiB.' : ''); changed() }} /><p className="mt-1 text-xs text-zinc-600">UTF-8 · CSV, JSON, or JSONL · up to 10,000 rows and 2 MiB</p>{fileError && <p role="alert" className="text-xs text-red-700">{fileError}</p>}</div></div>
+        <div className="grid gap-4 sm:grid-cols-2"><div><label htmlFor="import-source" className="mb-1 block text-xs font-medium">Source system</label><Input id="import-source" required value={sourceSystem} onChange={(event) => { setSourceSystem(event.target.value); changed() }} /></div><div><label htmlFor="import-timezone" className="mb-1 block text-xs font-medium">Source timezone</label><Input id="import-timezone" required value={timezone} onChange={(event) => { setTimezone(event.target.value); changed() }} /><p className="mt-1 text-xs text-zinc-600">IANA timezone, for example Asia/Kolkata</p></div></div>
+        <div className="grid gap-4 sm:grid-cols-2"><div><label htmlFor="import-cutoff" className="mb-1 block text-xs font-medium">Knowledge cutoff</label><Input id="import-cutoff" required value={cutoff} onChange={(event) => { setCutoff(event.target.value); changed() }} placeholder="2026-09-28T11:30:00+05:30" /><p className="mt-1 text-xs text-zinc-600">ISO timestamp with offset{mode === 'existing' ? '; later than the base revision’s cutoff.' : '; at or after window start.'}</p></div>{(mode === 'new' || profile === 'production-v1') && <div><label htmlFor="import-unit" className="mb-1 block text-xs font-medium">Production unit</label><Input id="import-unit" required value={unit} onChange={(event) => { setUnit(event.target.value); changed() }} /><p className="mt-1 text-xs text-zinc-600">Use good_units. Counts must be 15-minute deltas.</p></div>}</div>
         <Button type="submit" size="sm" disabled={!(mode === 'new' ? newId.trim() : incidentId) || !file || !!fileError || previewMutation.isPending}>{previewMutation.isPending ? 'Checking rows…' : 'Preview source'}</Button>
         {previewMutation.isError && <p role="alert" className="text-sm text-red-700">{previewMutation.error.message}</p>}
       </form>}
-      {preview && <section className="space-y-3 rounded border border-zinc-200 bg-white p-5" aria-label="Import preview"><div className="flex flex-wrap items-center justify-between gap-2"><div><h2 className="text-base font-semibold">Preview: {preview.result.status}</h2><p className="mt-1 text-xs text-zinc-600">{preview.result.row_count} rows · {preview.result.plan_buckets.length} plan · {preview.result.output_buckets.length} output · {preview.result.events.length} events</p></div><span className="rounded bg-zinc-100 px-2 py-1 font-mono text-xs">{preview.result.raw_digest.slice(0, 12)}…</span></div>
+      {preview && <section className="space-y-4 rounded-xl border border-zinc-200 bg-white p-5 sm:p-6" aria-label="Import preview"><div className="flex flex-wrap items-center justify-between gap-2"><div><h2 className="text-base font-semibold">Preview: {preview.result.status}</h2><p className="mt-1 text-xs text-zinc-600">{preview.result.row_count} rows · {preview.result.plan_buckets.length} plan · {preview.result.output_buckets.length} output · {preview.result.events.length} events</p></div><span className="rounded bg-zinc-100 px-2 py-1 font-mono text-xs">{preview.result.raw_digest.slice(0, 12)}…</span></div>
         {preview.result.issues.length ? <div className="overflow-x-auto rounded border border-red-200"><table className="w-full min-w-[500px] text-left text-sm"><thead className="bg-red-50 text-xs uppercase text-red-900"><tr><th scope="col" className="px-3 py-2">Row</th><th scope="col" className="px-3 py-2">Field</th><th scope="col" className="px-3 py-2">Issue</th></tr></thead><tbody className="divide-y divide-red-100">{preview.result.issues.map((issue, index) => <tr key={index}><td className="px-3 py-2 tabular-nums">{issue.row}</td><td className="px-3 py-2">{issue.field}</td><td className="px-3 py-2">{issue.message}</td></tr>)}</tbody></table></div> : <p className="text-sm text-zinc-700">All rows passed validation. Publication is all or nothing.</p>}
         {preview.newIncident ? preview.result.plan_buckets.length === 0 && <p className="text-xs text-amber-800">A new incident requires baseline plan records in the file.</p> : preview.result.plan_buckets.length > 0 && <p className="text-xs text-amber-800">Existing baselines are immutable. This file cannot be published into the selected incident.</p>}
         <Button size="sm" disabled={preview.result.status !== 'READY' || (preview.newIncident ? preview.result.plan_buckets.length === 0 : preview.result.plan_buckets.length > 0) || publish.isPending} onClick={() => publish.mutate()}>{publish.isPending ? 'Publishing…' : preview.newIncident ? 'Create incident' : 'Publish new revision'}</Button>
diff --git a/frontend/src/pages/IncidentLibrary.tsx b/frontend/src/pages/IncidentLibrary.tsx
index e6b7e76..56b6ea4 100644
--- a/frontend/src/pages/IncidentLibrary.tsx
+++ b/frontend/src/pages/IncidentLibrary.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Link } from 'react-router'
+import { ArrowUpRight, Search } from 'lucide-react'
 import { api } from '@/lib/api'
 import { incidentApi } from '@/lib/incidents'
 import { formatInstant } from '@/lib/status'
@@ -20,20 +21,19 @@ export function IncidentLibraryPage() {
     <div className="space-y-6">
       <div className="flex flex-wrap items-end justify-between gap-4 border-b border-zinc-200 pb-5">
         <div>
-          <p className="text-xs font-semibold uppercase tracking-widest text-amber-700">Manufacturing incident intelligence</p>
-          <h1 className="mt-2 text-2xl font-semibold tracking-tight">Incident library</h1>
-          <p className="mt-1 max-w-2xl text-sm text-zinc-600">Investigate a line delay from recorded production, operational evidence, and human review.</p>
+          <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">Incident library</h1>
+          <p className="mt-2 max-w-2xl text-sm leading-6 text-zinc-600">Investigate a line delay from recorded production, operational evidence, and human review.</p>
         </div>
-        <span className="rounded border border-zinc-200 bg-white px-3 py-1.5 text-xs text-zinc-600">Synthetic data · deterministic analysis</span>
+        <span className="text-xs leading-5 text-zinc-600">Synthetic data · deterministic analysis</span>
       </div>
 
-      <div className="flex flex-wrap items-center justify-between gap-3">
+      <div className="flex flex-wrap items-end justify-between gap-4">
         <div className="w-full max-w-sm">
           <label htmlFor="incident-search" className="mb-1 block text-xs font-medium text-zinc-700">Find an incident</label>
-          <Input id="incident-search" type="search" placeholder="Search incident or line" value={query} onChange={(event) => setQuery(event.target.value)} />
+          <div className="relative"><Search aria-hidden="true" className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-zinc-500" /><Input className="pl-9" id="incident-search" type="search" placeholder="Search incident or line" value={query} onChange={(event) => setQuery(event.target.value)} /></div>
         </div>
         {incidents.data && !query && <p className="text-xs text-zinc-500" role="status">{items.length} incidents</p>}
-        {capabilities.data?.imports_enabled && <Link to="/incidents/imports" className="rounded border border-zinc-300 bg-white px-3 py-2 text-xs font-medium text-zinc-700 hover:bg-zinc-50 focus-visible:outline-2">Import incident evidence</Link>}
+        {capabilities.data?.imports_enabled && <Link to="/incidents/imports" className="inline-flex min-h-10 items-center gap-2 rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus-visible:outline-2">Import incident evidence<ArrowUpRight aria-hidden="true" className="size-4" /></Link>}
       </div>
 
       {saved && <div role="status" className="rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900">API unavailable. Showing one bundled saved deterministic investigation. Live search, review, and OpenAI drafts are unavailable.</div>}
@@ -47,12 +47,17 @@ export function IncidentLibraryPage() {
           <Button className="mt-3" size="sm" variant="outline" onClick={() => incidents.refetch()}>Retry</Button>
         </div>
       ) : query.trim() ? (
-        saved ? <div className="rounded border border-dashed border-amber-300 bg-white p-5 text-sm text-zinc-700">Live search is unavailable while the API is offline. Clear the search to open the bundled investigation.</div> : search.isPending ? <Skeleton className="h-24" /> : search.isError ? <div role="alert" className="rounded border border-red-200 bg-red-50 p-5 text-sm text-red-800">Live search unavailable: {search.error.message}</div> : search.data.items.length ? <div className="space-y-2"><p className="text-xs text-zinc-500">{search.data.items.length} live lexical results</p>{search.data.items.map((item) => <article key={`${item.id}-${item.revision}`} className="rounded border border-zinc-200 bg-white p-4"><Link className="text-sm font-medium underline underline-offset-4" to={`/incidents/${encodeURIComponent(item.id)}?revision=${item.revision}`}>{item.title}</Link><p className="mt-1 text-xs text-zinc-600">{item.line} · {item.match_reason}</p>{item.differences.length > 0 && <p className="mt-1 text-xs text-zinc-500">{item.differences.join(' ')}</p>}</article>)}</div> : <div className="rounded border border-dashed border-zinc-300 bg-white p-5 text-sm text-zinc-600">No live search results match this query.</div>
+        saved ? <div className="rounded border border-dashed border-amber-300 bg-white p-5 text-sm text-zinc-700">Live search is unavailable while the API is offline. Clear the search to open the bundled investigation. <Button size="sm" variant="outline" className="mt-3 block" onClick={() => setQuery('')}>Clear search</Button></div> : search.isPending ? <Skeleton className="h-24" /> : search.isError ? <div role="alert" className="rounded border border-red-200 bg-red-50 p-5 text-sm text-red-800">Live search unavailable: {search.error.message}</div> : search.data.items.length ? <div className="space-y-2"><p className="text-xs text-zinc-500">{search.data.items.length} live lexical results</p>{search.data.items.map((item) => <article key={`${item.id}-${item.revision}`} className="rounded border border-zinc-200 bg-white p-4"><Link className="text-sm font-medium underline underline-offset-4" to={`/incidents/${encodeURIComponent(item.id)}?revision=${item.revision}`}>{item.title}</Link><p className="mt-1 text-xs text-zinc-600">{item.line} · {item.match_reason}</p>{item.differences.length > 0 && <p className="mt-1 text-xs text-zinc-500">{item.differences.join(' ')}</p>}</article>)}</div> : <div className="rounded border border-dashed border-zinc-300 bg-white p-5 text-sm text-zinc-600">No live search results match this query.</div>
       ) : items.length === 0 ? (
         <div className="rounded border border-dashed border-zinc-300 bg-white p-10 text-center text-sm text-zinc-600">No incidents are available yet.</div>
       ) : (
-        <div className="overflow-x-auto rounded border border-zinc-200 bg-white">
-          <table className="w-full min-w-[760px] text-left text-sm">
+        <div className="overflow-hidden rounded-xl border border-zinc-200 bg-white">
+          <div className="divide-y divide-zinc-200 md:hidden">{items.map((item, index) => <article key={item.id} className="p-4">
+            <div className="flex items-start justify-between gap-3"><div className="min-w-0"><Link className="text-base font-semibold leading-6 text-zinc-900 underline decoration-zinc-300 underline-offset-4 focus-visible:outline-2" to={`/incidents/${encodeURIComponent(item.id)}?revision=${item.revision}`}>{item.title}</Link><p className="mt-1 text-xs text-zinc-600">{item.line} · revision {item.revision}{index === 0 ? ' · featured investigation' : ''}</p></div><ArrowUpRight className="mt-1 size-4 shrink-0 text-zinc-500" aria-hidden="true" /></div>
+            <dl className="mt-4 grid grid-cols-2 gap-x-4 gap-y-3 text-xs"><div className="col-span-2"><dt className="text-zinc-500">Investigation window</dt><dd className="mt-1 text-zinc-700">{formatInstant(item.window_start)} to {formatInstant(item.window_end)}</dd></div><div><dt className="text-zinc-500">Observed shortfall</dt><dd className="mt-1 font-medium tabular-nums">{item.shortfall == null ? 'Unavailable' : `${item.shortfall} good units`}</dd></div><div><dt className="text-zinc-500">Evidence</dt><dd className="mt-1 text-zinc-700">{item.evidence_completeness ?? 'See report'}</dd></div><div className="col-span-2"><dt className="text-zinc-500">Analysis</dt><dd className="mt-1 text-zinc-700">{item.status}</dd></div></dl>
+          </article>)}</div>
+          <div className="hidden overflow-x-auto md:block"><table className="w-full min-w-[760px] text-left text-sm">
+            <caption className="sr-only">Recorded incidents and their evidence, shortfall, and analysis status</caption>
             <thead className="border-b border-zinc-200 bg-zinc-50 text-xs uppercase tracking-wide text-zinc-500"><tr>
               <th scope="col" className="px-4 py-3 font-medium">Incident / line</th>
               <th scope="col" className="px-4 py-3 font-medium">Investigation window</th>
@@ -61,7 +66,7 @@ export function IncidentLibraryPage() {
               <th scope="col" className="px-4 py-3 font-medium">Analysis</th>
             </tr></thead>
             <tbody className="divide-y divide-zinc-100">
-              {items.map((item, index) => <tr key={item.id} className={index === 0 ? 'bg-amber-50/40' : ''}>
+              {items.map((item, index) => <tr key={item.id} className="align-top hover:bg-zinc-50">
                 <td className="px-4 py-4"><Link className="font-medium text-zinc-900 underline decoration-zinc-300 underline-offset-4 hover:decoration-zinc-900 focus-visible:outline-2" to={`/incidents/${encodeURIComponent(item.id)}?revision=${item.revision}`}>{item.title}</Link><span className="mt-1 block text-xs text-zinc-500">{item.line} · revision {item.revision}{index === 0 ? ' · featured investigation' : ''}</span></td>
                 <td className="px-4 py-4 text-zinc-700">{formatInstant(item.window_start)}<span className="block text-xs text-zinc-500">to {formatInstant(item.window_end)}</span></td>
                 <td className="px-4 py-4 font-medium tabular-nums">{item.shortfall == null ? 'Unavailable' : `${item.shortfall} good units`}</td>
@@ -69,10 +74,10 @@ export function IncidentLibraryPage() {
                 <td className="px-4 py-4"><span className="rounded bg-zinc-100 px-2 py-1 text-xs text-zinc-700">{item.status}</span></td>
               </tr>)}
             </tbody>
-          </table>
+          </table></div>
         </div>
       )}
-      <p className="text-xs text-zinc-500">A report uses evidence available by its knowledge cutoff. Later records create a new revision and preserve the earlier view.</p>
+      <p className="text-xs leading-5 text-zinc-600">A report uses evidence available by its knowledge cutoff. Later records create a new revision and preserve the earlier view.</p>
     </div>
   )
 }
diff --git a/frontend/src/pages/IncidentWorkbench.tsx b/frontend/src/pages/IncidentWorkbench.tsx
index 67d7aad..94de0a4 100644
--- a/frontend/src/pages/IncidentWorkbench.tsx
+++ b/frontend/src/pages/IncidentWorkbench.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { ArrowLeft, FileText } from 'lucide-react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { Link, useParams, useSearchParams } from 'react-router'
 import { incidentApi, type AnalysisReport, type Hypothesis, type RecoveryProposal } from '@/lib/incidents'
@@ -12,7 +13,7 @@ import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '
 import savedAi from '@/data/hero-ai.json'
 
 function EvidenceLink({ id, onOpen }: { id: string; onOpen: (id: string) => void }) {
-  return <button type="button" onClick={() => onOpen(id)} className="rounded border border-zinc-300 bg-white px-1.5 py-0.5 font-mono text-xs text-zinc-700 underline-offset-2 hover:underline focus-visible:outline-2">{id}</button>
+  return <button type="button" onClick={() => onOpen(id)} className="evidence-link inline-flex items-center rounded border border-zinc-300 bg-white px-2 py-1 font-mono text-xs text-zinc-700 underline-offset-2 hover:underline focus-visible:outline-2">{id}</button>
 }
 
 function EvidenceList({ ids, onOpen }: { ids: string[]; onOpen: (id: string) => void }) {
@@ -20,7 +21,7 @@ function EvidenceList({ ids, onOpen }: { ids: string[]; onOpen: (id: string) =>
 }
 
 function Section({ title, detail, children }: { title: string; detail?: string; children: React.ReactNode }) {
-  return <section className="space-y-3"><div className="border-b border-zinc-200 pb-2"><h2 className="text-base font-semibold tracking-tight">{title}</h2>{detail && <p className="mt-0.5 text-xs text-zinc-500">{detail}</p>}</div>{children}</section>
+  return <section id={title.toLowerCase().replaceAll(/[^a-z0-9]+/g, '-')} className="scroll-mt-6 space-y-4"><div className="border-b border-zinc-200 pb-3"><h2 className="text-lg font-semibold tracking-tight">{title}</h2>{detail && <p className="mt-0.5 text-xs text-zinc-500">{detail}</p>}</div>{children}</section>
 }
 
 function HypothesisCard({ item, onEvidence }: { item: Hypothesis; onEvidence: (id: string) => void }) {
@@ -31,7 +32,7 @@ function HypothesisCard({ item, onEvidence }: { item: Hypothesis; onEvidence: (i
       <div><dt className="mb-1 font-medium text-zinc-600">Supporting evidence</dt><dd><EvidenceList ids={item.supporting_evidence} onOpen={onEvidence} /></dd></div>
       <div><dt className="mb-1 font-medium text-zinc-600">Contradictions</dt><dd><EvidenceList ids={item.contradicting_evidence} onOpen={onEvidence} /></dd></div>
     </dl>
-    <p className="mt-3 border-l-2 border-amber-500 pl-3 text-xs text-zinc-700"><strong>Next check:</strong> {item.next_check}</p>
+    <p className="mt-3 rounded bg-amber-50 p-3 text-xs leading-5 text-amber-950"><strong>Next check:</strong> {item.next_check}</p>
   </article>
 }
 
@@ -111,17 +112,23 @@ export function IncidentWorkbenchPage() {
   const refresh = () => queryClient.invalidateQueries({ queryKey: ['incident-analysis', id, revision] })
   const changeRevision = (value: number) => { setEvidenceId(null); setParams({ revision: String(value) }) }
 
-  return <div className="space-y-7">
-    <Link to="/" className="text-xs text-zinc-600 underline underline-offset-4 hover:text-zinc-900">← Incident library</Link>
+  return <div className="space-y-8">
+    <Link to="/" className="inline-flex min-h-8 items-center gap-2 rounded-sm text-xs text-zinc-600 hover:text-zinc-900"><ArrowLeft aria-hidden="true" size={14} />Incident library</Link>
     {incident.isPending ? <div aria-busy="true" aria-label="Loading incident"><Skeleton className="h-12 w-2/3" /><Skeleton className="mt-4 h-32" /></div> : incident.isError ? <div role="alert" className="rounded border border-red-200 bg-red-50 p-5 text-sm text-red-800">Could not load incident: {incident.error.message} <Button variant="outline" size="sm" onClick={() => incident.refetch()}>Retry</Button></div> : <>
       <header className="border-b border-zinc-200 pb-5">
-        <p className="text-xs font-semibold uppercase tracking-widest text-amber-700">Incident investigation</p>
-        <div className="mt-2 flex flex-wrap items-start justify-between gap-4"><div><h1 className="text-2xl font-semibold tracking-tight">{incident.data.title}</h1><p className="mt-1 text-sm text-zinc-600">{incident.data.scope.line_id} · {formatInstant(incident.data.window.start)} to {formatInstant(incident.data.window.end)}</p></div><div className="flex items-end gap-2"><div><label htmlFor="revision" className="mb-1 block text-xs font-medium text-zinc-600">Evidence revision</label><select id="revision" value={revision} onChange={(event) => changeRevision(Number(event.target.value))} className="h-9 rounded border border-zinc-300 bg-white px-3 text-sm focus-visible:outline-2">{(report?.execution_kind === 'saved_deterministic' ? [revision] : incident.data.available_revisions).map((value) => <option key={value} value={value}>Revision {value}</option>)}</select></div></div></div>
-        <div className="mt-3 flex flex-wrap gap-x-5 gap-y-1 text-xs text-zinc-500"><span>Knowledge cutoff: {formatInstant(incident.data.cutoff)}</span><span>Report: {report?.execution_kind === 'saved_deterministic' ? 'Saved deterministic result' : 'Live deterministic analysis'}</span><span>Factory data: synthetic</span></div>
+        <div className="flex flex-wrap items-start justify-between gap-4"><div><h1 className="max-w-2xl text-2xl font-semibold leading-tight tracking-tight sm:text-3xl">{incident.data.title}</h1><p className="mt-1 text-sm text-zinc-600">{incident.data.scope.line_id} · {formatInstant(incident.data.window.start)} to {formatInstant(incident.data.window.end)}</p></div><div className="flex items-end gap-2"><div><label htmlFor="revision" className="mb-1 block text-xs font-medium text-zinc-600">Evidence revision</label><select id="revision" value={revision} onChange={(event) => changeRevision(Number(event.target.value))} className="h-9 rounded border border-zinc-300 bg-white px-3 text-sm focus-visible:outline-2">{(report?.execution_kind === 'saved_deterministic' ? [revision] : incident.data.available_revisions).map((value) => <option key={value} value={value}>Revision {value}</option>)}</select></div></div></div>
+        <div className="mt-3 flex flex-wrap gap-x-5 gap-y-1 text-xs text-zinc-500"><span>Knowledge cutoff: {formatInstant(incident.data.cutoff)}</span><span>Report: {reportQuery.isPending ? 'Building analysis' : reportQuery.isError ? 'Analysis unavailable' : report?.execution_kind === 'saved_deterministic' ? 'Saved deterministic result' : 'Live deterministic analysis'}</span><span>Factory data: synthetic</span></div>
       </header>
       {reportQuery.isPending ? <div aria-busy="true" aria-label="Building analysis" className="space-y-3"><Skeleton className="h-28" /><Skeleton className="h-48" /><Skeleton className="h-48" /></div> : reportQuery.isError ? <div role="alert" className="rounded border border-red-200 bg-red-50 p-5"><h2 className="text-sm font-semibold text-red-900">Analysis unavailable</h2><p className="mt-1 text-sm text-red-800">{reportQuery.error.message}</p><Button className="mt-3" size="sm" variant="outline" onClick={() => reportQuery.refetch()}>Retry analysis</Button></div> : report && <>
+        <nav aria-label="Investigation sections" className="flex flex-wrap gap-x-5 gap-y-2 border-b border-zinc-200 pb-4 text-xs font-medium text-zinc-600">
+          {['Observed situation', 'Evidence timeline', 'Explanations and open questions', 'Recovery options', 'Shift update'].map((title) => <a key={title} href={`#${title.toLowerCase().replaceAll(/[^a-z0-9]+/g, '-')}`} className="inline-flex min-h-8 items-center rounded-sm hover:text-zinc-900 hover:underline">{title}</a>)}
+        </nav>
         <Section title="Observed situation" detail="Calculated from comparable complete 15-minute buckets; missing data is not counted as zero.">
-          <div className="grid gap-3 sm:grid-cols-3"><div className="rounded border border-zinc-200 bg-white p-4"><p className="text-xs text-zinc-500">Baseline planned</p><p className="mt-1 text-2xl font-semibold tabular-nums">{report.metrics.planned ?? '—'}</p><p className="text-xs text-zinc-500">{report.metrics.unit.replaceAll('_', ' ')}</p></div><div className="rounded border border-zinc-200 bg-white p-4"><p className="text-xs text-zinc-500">Recorded good output</p><p className="mt-1 text-2xl font-semibold tabular-nums">{report.metrics.observed ?? '—'}</p><p className="text-xs text-zinc-500">{report.metrics.unit.replaceAll('_', ' ')}</p></div><div className="rounded border border-amber-300 bg-amber-50 p-4"><p className="text-xs text-amber-800">Observed shortfall</p><p className="mt-1 text-2xl font-semibold tabular-nums">{report.metrics.shortfall ?? '—'}</p><p className="text-xs text-amber-800">{report.metrics.status}</p></div></div>
+          <dl className="grid divide-y divide-zinc-200 overflow-hidden rounded-lg border border-zinc-200 bg-white sm:grid-cols-3 sm:divide-x sm:divide-y-0">
+            <div className="px-5 py-4"><dt className="text-xs font-medium text-zinc-600">Baseline planned</dt><dd className="mt-2 flex items-baseline gap-2"><span className="text-3xl font-semibold tracking-tight tabular-nums">{report.metrics.planned ?? '—'}</span><span className="text-xs text-zinc-600">{report.metrics.unit.replaceAll('_', ' ')}</span></dd></div>
+            <div className="px-5 py-4"><dt className="text-xs font-medium text-zinc-600">Recorded good output</dt><dd className="mt-2 flex items-baseline gap-2"><span className="text-3xl font-semibold tracking-tight tabular-nums">{report.metrics.observed ?? '—'}</span><span className="text-xs text-zinc-600">{report.metrics.unit.replaceAll('_', ' ')}</span></dd></div>
+            <div className="bg-amber-50 px-5 py-4"><dt className="text-xs font-medium text-amber-900">Observed shortfall</dt><dd className="mt-2 flex flex-wrap items-baseline gap-2"><span className="text-3xl font-semibold tracking-tight text-amber-950 tabular-nums">{report.metrics.shortfall ?? '—'}</span><span className="text-xs text-amber-900">{report.metrics.status}</span></dd></div>
+          </dl>
           {report.metrics.planned != null && report.metrics.observed != null && report.metrics.planned > 0 && <div className="rounded border border-zinc-200 bg-white p-4"><div className="mb-2 flex justify-between text-xs text-zinc-600"><span>Recorded output against baseline</span><span>{Math.round(report.metrics.observed / report.metrics.planned * 100)}%</span></div><div className="h-3 overflow-hidden rounded bg-zinc-200"><div className="h-full bg-zinc-800" style={{ width: `${Math.min(100, Math.max(0, report.metrics.observed / report.metrics.planned * 100))}%` }} /></div></div>}
           <p className="text-xs text-zinc-600">{report.metrics.matched_buckets.length} matched buckets · {report.metrics.missing_buckets.length} missing · {report.metrics.unfinished_buckets.length} unfinished{report.metrics.blocked_minutes != null ? ` · ${report.metrics.blocked_minutes} established line-block minutes` : ''}</p>
           <div className="rounded border border-zinc-200 bg-white">
@@ -140,11 +147,11 @@ export function IncidentWorkbenchPage() {
         <HybridPanel report={report} enabled={capabilities.data?.ai?.index_ready === true && capabilities.data?.reviews_enabled === true} />
         <Section title="Historical precedents" detail="Live lexical search. Similar cases can guide checks; differences limit what can be inferred.">{report.precedents?.length ? <div className="grid gap-3 lg:grid-cols-2">{report.precedents.map((item, index) => <article key={item.id ?? item.incident_id ?? index} className="rounded border bg-white p-4"><h3 className="text-sm font-semibold">{item.title ?? item.incident_id ?? 'Historical incident'}</h3>{item.match_reason || item.match_reasons?.length ? <p className="mt-2 text-xs text-zinc-700"><strong>Similar:</strong> {item.match_reason ?? item.match_reasons?.join('; ')}</p> : null}{item.differences?.length ? <p className="mt-2 text-xs text-zinc-700"><strong>Different:</strong> {item.differences.join('; ')}</p> : null}{(item.incident_id || item.id) && <Link className="mt-3 inline-block text-xs underline" to={`/incidents/${encodeURIComponent(item.incident_id ?? item.id!)}`}>Open precedent</Link>}</article>)}</div> : <p className="rounded border border-dashed p-5 text-sm text-zinc-600">No eligible historical precedents were retrieved.</p>}</Section>
         <Section title="Recovery options" detail="Proposals are versioned requests for human review.">{report.proposals.length ? <div className="grid gap-3 lg:grid-cols-2">{report.proposals.map((item) => <ProposalCard key={`${report.id}-${item.id}-${item.state}`} item={item} report={report} currentRevision={summary?.revision ?? revision} canReview={capabilities.data?.reviews_enabled === true && report.execution_kind !== 'saved_deterministic'} onEvidence={setEvidenceId} onChanged={refresh} />)}</div> : <p className="rounded border border-dashed p-5 text-sm text-zinc-600">No action proposal is supported by this evidence.</p>}</Section>
-        <Section title="Shift update" detail="Evidence-linked report summary"><blockquote className="border-l-2 border-zinc-900 bg-white py-3 pl-4 text-sm leading-7 text-zinc-700">{report.summary}</blockquote><ExportReport report={report} enabled={capabilities.data?.reviews_enabled === true} /></Section>
+        <Section title="Shift update" detail="Evidence-linked report summary"><blockquote className="rounded-lg border border-zinc-200 bg-white p-5 text-sm leading-7 text-zinc-700">{report.summary}</blockquote><ExportReport report={report} enabled={capabilities.data?.reviews_enabled === true} /></Section>
         {report.incident_id === savedAi.incident_id && report.revision === savedAi.revision && <SavedAiPanel onEvidence={setEvidenceId} />}
         <OpenAiPanel key={`${report.id}:${user?.id ?? 'anonymous'}`} report={report} enabled={capabilities.data?.ai?.generation_available === true && report.execution_kind !== 'saved_deterministic'} reasons={capabilities.data?.ai?.reason ? [capabilities.data.ai.reason.replaceAll('_', ' ').toLowerCase()] : ['OpenAI drafts are available to authenticated reviewers.']} onEvidence={setEvidenceId} />
       </>}
     </>}
-    <Sheet open={evidenceId !== null} onOpenChange={(open) => { if (!open) setEvidenceId(null) }}><SheetContent className="overflow-y-auto"><SheetHeader><SheetTitle>Source evidence</SheetTitle><SheetDescription>{evidenceId}</SheetDescription></SheetHeader><div className="px-4 pb-6">{evidence.isPending ? <Skeleton className="h-32" /> : evidence.isError ? <p role="alert" className="text-sm text-red-700">{evidence.error.message}</p> : evidence.data ? <dl className="space-y-3 text-sm">{Object.entries(evidence.data).map(([key, value]) => <div key={key} className="border-b border-zinc-100 pb-2"><dt className="text-xs font-medium uppercase tracking-wide text-zinc-500">{key.replace(/_/g, ' ')}</dt><dd className="mt-1 break-words font-mono text-xs text-zinc-800">{typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value ?? '—')}</dd></div>)}</dl> : null}</div></SheetContent></Sheet>
+    <Sheet open={evidenceId !== null} onOpenChange={(open) => { if (!open) setEvidenceId(null) }}><SheetContent className="overflow-y-auto"><SheetHeader><SheetTitle className="flex items-center gap-2"><FileText aria-hidden="true" size={18} />Source evidence</SheetTitle><SheetDescription className="break-all font-mono text-xs">{evidenceId}</SheetDescription></SheetHeader><div className="px-4 pb-6">{evidence.isPending ? <Skeleton className="h-32" /> : evidence.isError ? <p role="alert" className="text-sm text-red-700">{evidence.error.message}</p> : evidence.data ? <dl className="space-y-3 text-sm">{Object.entries(evidence.data).map(([key, value]) => <div key={key} className="border-b border-zinc-100 pb-2"><dt className="text-xs font-medium uppercase tracking-wide text-zinc-500">{key.replace(/_/g, ' ')}</dt><dd className="mt-1 whitespace-pre-wrap break-words font-mono text-xs leading-5 text-zinc-800">{typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value ?? '—')}</dd></div>)}</dl> : null}</div></SheetContent></Sheet>
   </div>
 }
diff --git a/frontend/src/pages/Library.tsx b/frontend/src/pages/Library.tsx
index 146a7e7..e4f12a1 100644
--- a/frontend/src/pages/Library.tsx
+++ b/frontend/src/pages/Library.tsx
@@ -67,10 +67,10 @@ export function LibraryPage() {
   }
 
   return (
-    <div className="space-y-4">
-      <div>
-        <h1 className="text-lg font-semibold tracking-tight">Scenario library</h1>
-        <p className="mt-0.5 text-sm text-zinc-500">
+    <div className="space-y-6">
+      <div className="border-b border-zinc-200 pb-5">
+        <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">Scenario library</h1>
+        <p className="mt-2 max-w-2xl text-sm leading-6 text-zinc-600">
           Pinned operational episodes. Each revision freezes its evidence; corrections create new
           revisions and never rewrite history.
         </p>
@@ -91,7 +91,7 @@ export function LibraryPage() {
         </div>
       ) : (
         <div className="overflow-x-auto rounded-lg border bg-white">
-          <Table>
+          <Table className="min-w-[800px]">
             <TableHeader>
               <TableRow>
                 <TableHead className="w-[26%]">Scenario</TableHead>
@@ -114,7 +114,7 @@ export function LibraryPage() {
                         {item.title}
                       </Link>
                       <div className="mt-1 flex flex-wrap items-center gap-1">
-                        <Mono className="text-zinc-400">
+                        <Mono className="text-zinc-600">
                           {item.scenario_id}@{item.revision}
                         </Mono>
                         {Array.from(new Set(item.tags)).map((tag) => (
@@ -132,11 +132,11 @@ export function LibraryPage() {
                     </TableCell>
                     <TableCell>
                       {attempts.length === 0 ? (
-                        <span className="text-xs text-zinc-400">Not run in this database yet</span>
+                        <span className="text-xs text-zinc-600">Not run in this database yet</span>
                       ) : (
                         <ul className="space-y-1.5">
                           {attempts.map((attempt) => (
-                            <li key={attempt.configuration_id} className="flex items-center gap-2">
+                            <li key={attempt.configuration_id} className="flex flex-wrap items-center gap-2">
                               <Mono className="w-14 shrink-0 text-zinc-500">
                                 <ConfigLabel id={attempt.configuration_id} />
                               </Mono>
diff --git a/frontend/src/pages/Notes.tsx b/frontend/src/pages/Notes.tsx
index 1aa3650..9ea4d9d 100644
--- a/frontend/src/pages/Notes.tsx
+++ b/frontend/src/pages/Notes.tsx
@@ -95,8 +95,8 @@ export function NotesPage() {
   return (
     <div className="space-y-5">
       <div>
-        <h1 className="text-lg font-semibold tracking-tight">Floor notes</h1>
-        <p className="mt-0.5 text-sm text-zinc-500">
+        <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">Floor notes</h1>
+        <p className="mt-2 max-w-2xl text-sm leading-6 text-zinc-600">
           The parser produces a draft, never an event. Mentions resolve by exact id or curated
           alias; ambiguity stays ambiguous. A human confirms the structured event, which forks a
           new scenario revision. History is never rewritten.
@@ -104,7 +104,7 @@ export function NotesPage() {
       </div>
 
       <section className="space-y-2">
-        <h2 className="text-xs font-semibold tracking-wide text-zinc-400 uppercase">
+        <h2 className="text-sm font-semibold text-zinc-800">
           Note (English, max 2,000 characters)
         </h2>
         <textarea
@@ -125,7 +125,7 @@ export function NotesPage() {
           <Button size="sm" variant="outline" onClick={() => { setParse(null); setSourceKind('manual') }}>
             Skip parsing: manual entry
           </Button>
-          <span className="ml-auto text-xs text-zinc-400">
+          <span className="ml-auto text-xs text-zinc-600">
             {parse ? (
               <>
                 draft by <Mono>{parse.parser_kind}</Mono>
@@ -146,7 +146,7 @@ export function NotesPage() {
 
       {parse ? (
         <section className="space-y-2">
-          <h2 className="text-xs font-semibold tracking-wide text-zinc-400 uppercase">
+          <h2 className="text-sm font-semibold text-zinc-800">
             Draft and resolution
           </h2>
           {!draftIsCurrent ? (
@@ -204,7 +204,7 @@ export function NotesPage() {
       ) : null}
 
       <section className="space-y-2">
-        <h2 className="text-xs font-semibold tracking-wide text-zinc-400 uppercase">
+        <h2 className="text-sm font-semibold text-zinc-800">
           Confirm structured event
         </h2>
         <div className="grid gap-3 rounded-lg border bg-white p-3 sm:grid-cols-2">