Spaces:

AItoolstack
/

AI-PolicyTrace

Sleeping

App Files Files Community

AItoolstack commited on 22 days ago

Commit

140c7b5

verified ·

1 Parent(s): 4579742

Rebrand review UI and move to Groq gpt-oss models

Browse files

Files changed (13) hide show

config/settings.yaml +2 -2
src/agents.py +15 -2
ui/index.html +6 -2
ui/public/favicon.svg +1 -0
ui/src/Brand.tsx +56 -0
ui/src/FieldRow.tsx +110 -123
ui/src/PDFPane.tsx +29 -25
ui/src/RecordPane.tsx +58 -13
ui/src/ReviewDashboard.tsx +45 -49
ui/src/SessionPage.tsx +6 -8
ui/src/UploadPage.tsx +142 -211
ui/src/index.css +46 -17
ui/tailwind.config.js +39 -9

config/settings.yaml CHANGED Viewed

@@ -10,9 +10,9 @@
 llm:
   # Model served by Groq. Override at runtime via GROQ_MODEL env var.
-  model: "meta-llama/llama-4-scout-17b-16e-instruct"
   # Fast model for document classification. Override via GROQ_CLASSIFIER_MODEL env var.
-  classifier_model: "llama-3.1-8b-instant"
   # Number of instructor self-correction retries on Pydantic validation failure.
   max_retries: 2

 llm:
   # Model served by Groq. Override at runtime via GROQ_MODEL env var.
+  model: "openai/gpt-oss-120b"  # llama-4-scout was retired by Groq on 2026-07-17
   # Fast model for document classification. Override via GROQ_CLASSIFIER_MODEL env var.
+  classifier_model: "openai/gpt-oss-20b"  # llama-3.1-8b-instant retired 2026-08-16
   # Number of instructor self-correction retries on Pydantic validation failure.
   max_retries: 2

src/agents.py CHANGED Viewed

@@ -63,6 +63,17 @@ _EXTRACTION_MODEL: str = settings.llm.model
 _CLASSIFIER_MODEL: str = settings.llm.classifier_model
 def _build_docling_converter() -> DocumentConverter:
     """Build a DocumentConverter configured from settings.docling."""
     opts = PdfPipelineOptions()
@@ -231,10 +242,11 @@ class InsuranceExtractionAgents:
                         "content": "Classify this document:\n\n" + markdown_text[:4000],
                     },
                 ],
-                max_tokens=10,
                 temperature=0,
             )
-            llm_result = response.choices[0].message.content.strip().split()[0]
             valid = {"Schedule", "Certificate", "StatementOfFact", "PolicyBooklet", "Unknown"}
             if llm_result in valid:
                 if llm_result != keyword_result:
@@ -494,6 +506,7 @@ class InsuranceExtractionAgents:
                 model=_EXTRACTION_MODEL,
                 response_model=UKMotorGoldenRecord,
                 max_retries=self._max_retries,
                 messages=[
                     {"role": "system", "content": system_prompt.strip()},
                     {"role": "user", "content": user_message},

 _CLASSIFIER_MODEL: str = settings.llm.classifier_model
+def _reasoning_kwargs(model: str, max_tokens: int) -> dict:
+    """Extra Groq params for reasoning models (gpt-oss), which spend output tokens thinking.
+    Without a larger budget and low reasoning effort they truncate structured output
+    ("output is incomplete due to max_tokens") or return an empty classification.
+    """
+    if "gpt-oss" in model:
+        return {"max_tokens": max_tokens, "reasoning_effort": "low"}
+    return {}
 def _build_docling_converter() -> DocumentConverter:
     """Build a DocumentConverter configured from settings.docling."""
     opts = PdfPipelineOptions()
                         "content": "Classify this document:\n\n" + markdown_text[:4000],
                     },
                 ],
                 temperature=0,
+                **({"max_tokens": 10} | _reasoning_kwargs(_CLASSIFIER_MODEL, 256)),
             )
+            content = (response.choices[0].message.content or "").strip()
+            llm_result = content.split()[0].strip(".,") if content else ""
             valid = {"Schedule", "Certificate", "StatementOfFact", "PolicyBooklet", "Unknown"}
             if llm_result in valid:
                 if llm_result != keyword_result:
                 model=_EXTRACTION_MODEL,
                 response_model=UKMotorGoldenRecord,
                 max_retries=self._max_retries,
+                **_reasoning_kwargs(_EXTRACTION_MODEL, 4096),
                 messages=[
                     {"role": "system", "content": system_prompt.strip()},
                     {"role": "user", "content": user_message},

ui/index.html CHANGED Viewed

@@ -2,9 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PolicyTrace — Motor Insurance IDP · AI Tool Stack</title>
   </head>
   <body>
     <div id="root"></div>

 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#121826" />
+    <meta name="description" content="PolicyTrace: reviewable Document AI for UK motor insurance PDF packs. A reference system from ai·toolstack." />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+    <link rel="preload" as="font" type="font/woff2" href="https://cdn.jsdelivr.net/npm/geist@1.8.1/dist/fonts/geist-sans/Geist-Variable.woff2" crossorigin />
+    <title>PolicyTrace · ai·toolstack</title>
   </head>
   <body>
     <div id="root"></div>

ui/public/favicon.svg ADDED Viewed

ui/src/Brand.tsx ADDED Viewed

	@@ -0,0 +1,56 @@

+/** ai·toolstack brand primitives shared by every PolicyTrace screen. */
+export function Mark({ size = 24 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 56 56" aria-hidden="true" focusable="false">
+      <rect x="0.5" y="0.5" width="55" height="55" rx="12" fill="#1F2940" stroke="#2C3752" />
+      <rect x="12" y="14" width="32" height="6" rx="2" fill="#E0A946" />
+      <rect x="16" y="25" width="28" height="6" rx="2" fill="#ECEAE4" />
+      <rect x="12" y="36" width="32" height="6" rx="2" fill="#56617A" />
+    </svg>
+  )
+}
+export function Lockup({ product = 'PolicyTrace' }: { product?: string }) {
+  return (
+    <div className="flex items-center gap-3 min-w-0">
+      <a
+        href="https://www.ai-toolstack.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex items-center gap-2.5 text-ink-100"
+        aria-label="ai·toolstack home"
+      >
+        <Mark size={26} />
+        <span className="text-[17px] font-semibold tracking-[-0.035em] hidden sm:inline">
+          <span className="font-mono font-medium text-ink-300">ai·</span>toolstack
+        </span>
+      </a>
+      <span className="text-ink-600 select-none hidden sm:inline" aria-hidden="true">/</span>
+      <span className="text-[15px] font-semibold tracking-[-0.02em] text-ink-100 truncate">{product}</span>
+    </div>
+  )
+}
+export function ExternalIcon() {
+  return (
+    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"
+      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" />
+    </svg>
+  )
+}
+export function Spinner({ className = 'h-4 w-4' }: { className?: string }) {
+  return (
+    <svg className={`animate-spin ${className}`} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
+      <path className="opacity-90" fill="currentColor" d="M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z" />
+    </svg>
+  )
+}
+export const LINKS = {
+  chapters: 'https://www.ai-toolstack.com/projects/policytrace/',
+  github: 'https://github.com/AItoolstack/ai-policytrace',
+}

ui/src/FieldRow.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type CSSProperties, useState } from 'react'
 import type { FieldEntry, FieldReview } from './types'
 import { useStore } from './store'
@@ -21,19 +21,19 @@ export function FieldRow({ entry, sessionId, isActive, review, onClick }: Props)
     ? review.overridden_value
     : entry.value
-  const isVerified  = review?.action === 'verify'
-  const isRejected  = review?.action === 'reject'
   const isOverridden = review?.action === 'override'
-  const borderStyle: CSSProperties = isVerified
-    ? { borderColor: '#16a34a', backgroundColor: '#f0fdf4' }
     : isRejected
-    ? { borderColor: '#fca5a5', backgroundColor: '#fef2f2' }
     : isOverridden
-    ? { borderColor: '#2563EB', backgroundColor: '#eff6ff' }
     : isActive
-    ? { borderColor: '#008080', backgroundColor: '#f0fdfc' }
-    : { borderColor: 'transparent', backgroundColor: '#ffffff' }
   const handleSaveOverride = async () => {
     await overrideField(sessionId, entry.fieldPath, editValue)
@@ -42,39 +42,29 @@ export function FieldRow({ entry, sessionId, isActive, review, onClick }: Props)
   return (
     <div
-      className="rounded-lg border px-3 py-2 cursor-pointer transition-all hover:shadow-sm"
-      style={borderStyle}
       onClick={onClick}
     >
-      <div className="flex items-start gap-2">
-        {/* Label + value */}
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2 flex-wrap">
-            <span className="text-xs font-semibold text-gray-500 shrink-0">
-              {entry.label}
-            </span>
-            {isVerified && (
-              <span className="inline-flex items-center gap-0.5 text-xs text-green-700 font-medium">
-                <CheckIcon /> Verified
-              </span>
-            )}
-            {isOverridden && (
-              <span className="text-xs text-blue-700 font-medium">Overridden</span>
-            )}
-            {isRejected && (
-              <span className="text-xs text-red-600 font-medium">Flagged</span>
-            )}
           </div>
-          {/* Value */}
           {editing ? (
-            <div
-              className="flex gap-2 mt-1"
-              onClick={(e) => e.stopPropagation()}
-            >
               <input
                 autoFocus
-                className="flex-1 text-xs border rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-400"
                 value={editValue}
                 onChange={(e) => setEditValue(e.target.value)}
                 onKeyDown={(e) => {
@@ -82,120 +72,117 @@ export function FieldRow({ entry, sessionId, isActive, review, onClick }: Props)
                   if (e.key === 'Escape') setEditing(false)
                 }}
               />
-              <button
-                onClick={handleSaveOverride}
-                className="text-xs px-2 py-1 bg-blue-600 text-white rounded hover:bg-blue-700"
-              >
-                Save
-              </button>
-              <button
-                onClick={() => setEditing(false)}
-                className="text-xs px-2 py-1 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
-              >
-                Cancel
-              </button>
             </div>
           ) : (
-            <p className="text-sm text-gray-800 mt-0.5 truncate">
-              {displayValue ?? (
-                <span className="text-gray-300 italic">Not extracted</span>
-              )}
             </p>
           )}
-          {/* Provenance source hint — or explicit "no location" notice */}
           {!editing && (
             entry.provenance ? (
-              <p className="text-xs text-gray-400 mt-0.5 truncate">
-                {entry.provenance.source_filename} · p.{entry.provenance.location.page} ·{' '}
-                <span className="italic">"{entry.provenance.matched_text.slice(0, 60)}{entry.provenance.matched_text.length > 60 ? '…' : ''}"</span>
               </p>
             ) : (
-              <p className="text-xs mt-0.5">
-                <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-gray-100 text-gray-400 font-medium">
-                  <span aria-hidden>—</span> No location data
-                </span>
-              </p>
             )
           )}
         </div>
-        {/* Right side: confidence badge + action buttons */}
-        <div
-          className="flex items-center gap-1 flex-shrink-0"
-          onClick={(e) => e.stopPropagation()}
-        >
-          {entry.provenance && (
-            <ConfidenceBadge score={entry.provenance.match_score} />
-          )}
-          {/* Verify */}
-          <button
-            title="Mark as verified"
-            onClick={() => verifyField(sessionId, entry.fieldPath)}
-            className={`w-7 h-7 rounded flex items-center justify-center text-sm transition-colors ${
-              isVerified
-                ? 'bg-green-500 text-white'
-                : 'bg-gray-100 text-gray-500 hover:bg-green-100 hover:text-green-700'
-            }`}
-          >
-            ✓
-          </button>
-          {/* Edit */}
-          <button
-            title="Override value"
-            onClick={() => {
-              setEditValue(displayValue ?? '')
-              setEditing(true)
-            }}
-            className="w-7 h-7 rounded flex items-center justify-center text-sm transition-colors"
-            style={{ backgroundColor: '#f3f4f6', color: '#6b7280' }}
-            onMouseEnter={e => { (e.currentTarget as HTMLElement).style.backgroundColor = '#eff6ff'; (e.currentTarget as HTMLElement).style.color = '#2563EB' }}
-            onMouseLeave={e => { (e.currentTarget as HTMLElement).style.backgroundColor = '#f3f4f6'; (e.currentTarget as HTMLElement).style.color = '#6b7280' }}
-          >
-            ✎
-          </button>
-          {/* Flag */}
-          <button
-            title="Flag for review"
-            onClick={() => rejectField(sessionId, entry.fieldPath)}
-            className={`w-7 h-7 rounded flex items-center justify-center text-sm transition-colors ${
-              isRejected
-                ? 'bg-red-500 text-white'
-                : 'bg-gray-100 text-gray-500 hover:bg-red-100 hover:text-red-600'
-            }`}
-          >
-            ⚑
-          </button>
         </div>
       </div>
     </div>
   )
 }
-function ConfidenceBadge({ score }: { score: number }) {
-  const pct = Math.round(score * 100)
-  const [bg, text] =
-    pct >= 90
-      ? ['bg-green-100 text-green-700', '']
-      : pct >= 70
-      ? ['bg-yellow-100 text-yellow-700', '']
-      : ['bg-red-100 text-red-600', '']
   return (
-    <span className={`text-xs font-mono px-1.5 py-0.5 rounded ${bg} ${text}`}>
-      {pct}%
-    </span>
   )
 }
-function CheckIcon() {
   return (
-    <svg className="w-3 h-3" viewBox="0 0 12 12" fill="currentColor">
-      <path d="M10 3L5 8.5 2 5.5" stroke="currentColor" strokeWidth="1.5"
-        strokeLinecap="round" strokeLinejoin="round" fill="none" />
-    </svg>
   )
 }

+import { useState } from 'react'
 import type { FieldEntry, FieldReview } from './types'
 import { useStore } from './store'
     ? review.overridden_value
     : entry.value
+  const isVerified = review?.action === 'verify'
+  const isRejected = review?.action === 'reject'
   const isOverridden = review?.action === 'override'
+  const shell = isVerified
+    ? 'border-state-pass/40 bg-state-pass-tint'
     : isRejected
+    ? 'border-state-flag/45 bg-state-flag-tint'
     : isOverridden
+    ? 'border-state-override/40 bg-state-override-tint'
     : isActive
+    ? 'border-signal bg-paper-sheet ring-2 ring-signal/30'
+    : 'border-paper-rule bg-paper-sheet hover:border-[#CFCBC0]'
   const handleSaveOverride = async () => {
     await overrideField(sessionId, entry.fieldPath, editValue)
   return (
     <div
+      className={`group rounded-lg border px-3.5 py-2.5 cursor-pointer transition-colors shadow-sheet ${shell}`}
       onClick={onClick}
+      role="button"
+      tabIndex={0}
+      aria-pressed={isActive}
+      onKeyDown={(e) => { if ((e.key === 'Enter' || e.key === ' ') && !editing) { e.preventDefault(); onClick() } }}
     >
+      <div className="flex items-start gap-3">
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2 flex-wrap">
+            <span className="text-[12px] font-medium text-paper-muted">{entry.label}</span>
+            {isVerified && <StatusPill tone="pass">Verified</StatusPill>}
+            {isOverridden && <StatusPill tone="override">Overridden</StatusPill>}
+            {isRejected && <StatusPill tone="flag">Flagged</StatusPill>}
           </div>
           {editing ? (
+            <div className="flex gap-2 mt-1.5" onClick={(e) => e.stopPropagation()}>
+              <label className="sr-only" htmlFor={`edit-${entry.fieldPath}`}>New value for {entry.label}</label>
               <input
+                id={`edit-${entry.fieldPath}`}
                 autoFocus
+                className="flex-1 min-w-0 text-[13px] text-paper-ink border border-paper-rule rounded-md px-2.5 py-1.5 bg-white focus:outline-none focus:border-signal focus:ring-2 focus:ring-signal/30"
                 value={editValue}
                 onChange={(e) => setEditValue(e.target.value)}
                 onKeyDown={(e) => {
                   if (e.key === 'Escape') setEditing(false)
                 }}
               />
+              <button onClick={handleSaveOverride} className="text-[12px] font-medium px-3 rounded-md bg-ink text-ink-100 hover:bg-ink-700">Save</button>
+              <button onClick={() => setEditing(false)} className="text-[12px] font-medium px-3 rounded-md border border-paper-rule text-paper-ink hover:bg-paper">Cancel</button>
             </div>
           ) : (
+            <p className="text-[14px] text-paper-ink mt-0.5 truncate font-medium" title={displayValue ?? undefined}>
+              {displayValue != null
+                ? formatValue(displayValue, entry.fieldPath, isOverridden)
+                : <span className="text-paper-muted italic font-normal">Not extracted</span>}
             </p>
           )}
           {!editing && (
             entry.provenance ? (
+              <p className="mt-1 font-mono text-[11px] text-paper-muted truncate">
+                {shortName(entry.provenance.source_filename)} · p.{entry.provenance.location.page} · “{entry.provenance.matched_text.slice(0, 56)}{entry.provenance.matched_text.length > 56 ? '…' : ''}”
               </p>
             ) : (
+              <p className="mt-1 font-mono text-[11px] text-[#9A4321]">no source location · check manually</p>
             )
           )}
         </div>
+        <div className="flex items-center gap-1 flex-shrink-0" onClick={(e) => e.stopPropagation()}>
+          {entry.provenance && <ConfidenceBadge score={entry.provenance.match_score} />}
+          <IconButton label={`Verify ${entry.label}`} active={isVerified} tone="pass"
+            onClick={() => verifyField(sessionId, entry.fieldPath)}>
+            <path d="M5 12.5l4.5 4.5L19 7.5" />
+          </IconButton>
+          <IconButton label={`Override ${entry.label}`} active={isOverridden} tone="override"
+            onClick={() => { setEditValue(displayValue ?? ''); setEditing(true) }}>
+            <path d="M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4z" />
+          </IconButton>
+          <IconButton label={`Flag ${entry.label} for review`} active={isRejected} tone="flag"
+            onClick={() => rejectField(sessionId, entry.fieldPath)}>
+            <path d="M5 21V4h11l-1.5 4L16 12H5" />
+          </IconButton>
         </div>
       </div>
     </div>
   )
 }
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+const MONEY_PATH = /(excess|premium|optional_extras)/
+/** Human-readable display of a stored value. The raw value stays in the title attribute. */
+function formatValue(value: string, fieldPath: string, isOverride: boolean): string {
+  if (isOverride) return value
+  const dt = value.match(/^(\d{4})-(\d{2})-(\d{2})(?:T(\d{2}):(\d{2}))?/)
+  if (dt) {
+    const [, y, m, d, hh, mm] = dt
+    const date = `${Number(d)} ${MONTHS[Number(m) - 1]} ${y}`
+    return hh != null ? `${date}, ${hh}:${mm}` : date
+  }
+  if (value === 'true') return 'Yes'
+  if (value === 'false') return 'No'
+  if (MONEY_PATH.test(fieldPath) && /^-?\d+(\.\d+)?$/.test(value)) {
+    return `£${Number(value).toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+  }
+  if (fieldPath.endsWith('annual_mileage') && /^\d+$/.test(value)) {
+    return `${Number(value).toLocaleString('en-GB')} miles`
+  }
+  return value
+}
+function shortName(filename: string) {
+  return filename.replace(/\.pdf$/i, '').replace(/ - Demo$/i, '')
+}
+const TONE = {
+  pass: { on: 'bg-state-pass text-white', hover: 'hover:text-state-pass hover:bg-state-pass-tint' },
+  override: { on: 'bg-state-override text-white', hover: 'hover:text-state-override hover:bg-state-override-tint' },
+  flag: { on: 'bg-state-flag text-white', hover: 'hover:text-state-flag hover:bg-state-flag-tint' },
+} as const
+function IconButton({ label, active, tone, onClick, children }: {
+  label: string; active: boolean; tone: keyof typeof TONE; onClick: () => void; children: React.ReactNode
+}) {
   return (
+    <button
+      type="button"
+      title={label}
+      aria-label={label}
+      aria-pressed={active}
+      onClick={onClick}
+      className={`h-8 w-8 grid place-items-center rounded-md transition-colors ${
+        active ? TONE[tone].on : `text-paper-muted ${TONE[tone].hover}`
+      }`}
+    >
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
+        strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{children}</svg>
+    </button>
   )
 }
+function StatusPill({ tone, children }: { tone: keyof typeof TONE; children: React.ReactNode }) {
+  const cls = tone === 'pass' ? 'text-state-pass bg-state-pass/10'
+    : tone === 'override' ? 'text-state-override bg-state-override/10'
+    : 'text-state-flag bg-state-flag/10'
+  return <span className={`font-mono text-[10px] font-medium uppercase tracking-[0.08em] px-1.5 py-0.5 rounded ${cls}`}>{children}</span>
+}
+function ConfidenceBadge({ score }: { score: number }) {
+  const pct = Math.round(score * 100)
+  const cls = pct >= 90 ? 'text-state-pass border-state-pass/30'
+    : pct >= 75 ? 'text-signal-deep border-signal/50'
+    : 'text-state-flag border-state-flag/40'
   return (
+    <span className={`font-mono text-[11px] px-1.5 py-0.5 rounded border bg-white mr-1 ${cls}`} title="Citation match score">
+      {pct}%
+    </span>
   )
 }

ui/src/PDFPane.tsx CHANGED Viewed

@@ -36,10 +36,10 @@ export function PDFPane({ sessionId }: Props) {
     const el = containerRef.current
     if (!el) return
     const obs = new ResizeObserver(([entry]) => {
-      setContainerWidth(Math.floor(entry.contentRect.width) - 24)
     })
     obs.observe(el)
-    setContainerWidth(Math.floor(el.clientWidth) - 24)
     return () => obs.disconnect()
   }, [])
@@ -100,28 +100,32 @@ export function PDFPane({ sessionId }: Props) {
   return (
     <div className="flex flex-col h-full">
       {/* PDF file selector */}
-      {pdfFiles.length > 1 && (
-        <div className="flex flex-wrap gap-2 p-3 border-b flex-shrink-0" style={{ backgroundColor: '#1F2937' }}>
-          {pdfFiles.map((f) => (
             <button
               key={f}
               onClick={() => setActivePdf(f)}
-              className="px-3 py-1 rounded text-xs font-medium transition-colors"
-              style={activePdfFile === f
-                ? { backgroundColor: '#008080', color: '#ffffff' }
-                : { backgroundColor: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)', color: 'rgba(255,255,255,0.7)' }
-              }
             >
-              {f}
             </button>
-          ))}
-        </div>
-      )}
       {/* PDF scroll area */}
       <div
         ref={containerRef}
-        className="flex-1 overflow-y-auto pdf-scroll-container bg-gray-200 p-3 space-y-4"
       >
         {pdfUrl ? (
           <Document
@@ -151,8 +155,8 @@ export function PDFPane({ sessionId }: Props) {
                   // Use block + explicit width so the overlay div always matches
                   // the canvas dimensions exactly (inline-block can shrink-wrap)
                   style={{ position: 'relative', width: containerWidth }}
-                  className={`rounded shadow-md transition-shadow overflow-hidden ${
-                    hasActive ? 'ring-4 ring-blue-500' : ''
                   }`}
                 >
                   <Page
@@ -181,14 +185,14 @@ export function PDFPane({ sessionId }: Props) {
                             width: `${x1 - x0}%`,
                             height: `${y1 - y0}%`,
                             background: isActive
-                              ? 'rgba(59, 130, 246, 0.35)'   /* blue-500 fill */
-                              : 'rgba(134, 239, 172, 0.35)', /* green-300 fill */
                             border: isActive
-                              ? '3px solid rgba(37, 99, 235, 1)'   /* blue-700 solid */
-                              : '2px solid rgba(22, 163, 74, 0.9)', /* green-600 */
                             borderRadius: 3,
                             boxShadow: isActive
-                              ? '0 0 0 2px rgba(147, 197, 253, 0.6)' /* blue glow */
                               : 'none',
                             transition: 'background 0.15s, border 0.15s',
                           }}
@@ -202,7 +206,7 @@ export function PDFPane({ sessionId }: Props) {
             })}
           </Document>
         ) : (
-          <div className="flex items-center justify-center h-full text-gray-400 text-sm">
             No PDF selected
           </div>
         )}
@@ -213,7 +217,7 @@ export function PDFPane({ sessionId }: Props) {
 function LoadingPlaceholder() {
   return (
-    <div className="flex items-center justify-center p-12 text-gray-400 text-sm">
       Loading PDF…
     </div>
   )
@@ -221,7 +225,7 @@ function LoadingPlaceholder() {
 function ErrorPlaceholder() {
   return (
-    <div className="flex items-center justify-center p-12 text-red-400 text-sm">
       Failed to load PDF.
     </div>
   )

     const el = containerRef.current
     if (!el) return
     const obs = new ResizeObserver(([entry]) => {
+      setContainerWidth(Math.floor(entry.contentRect.width) - 48)
     })
     obs.observe(el)
+    setContainerWidth(Math.floor(el.clientWidth) - 48)
     return () => obs.disconnect()
   }, [])
   return (
     <div className="flex flex-col h-full">
       {/* PDF file selector */}
+      <div className="flex items-center gap-1 px-3 h-[52px] border-b border-ink-700 bg-ink-800 flex-shrink-0 overflow-x-auto scroll-ink" role="tablist" aria-label="Source documents">
+        {pdfFiles.map((f) => {
+          const on = activePdfFile === f
+          const count = (sessionData?.provenance ?? []).filter((p) => p.source_filename === f).length
+          return (
             <button
               key={f}
+              role="tab"
+              aria-selected={on}
               onClick={() => setActivePdf(f)}
+              className={`relative shrink-0 inline-flex items-center gap-2 h-9 px-3 rounded-md text-[13px] transition-colors ${
+                on ? 'bg-ink-700 text-ink-100' : 'text-ink-300 hover:text-ink-100 hover:bg-ink-700/60'
+              }`}
             >
+              <span className="truncate max-w-[14rem]">{f.replace(/\.pdf$/i, '').replace(/ - Demo$/i, '')}</span>
+              <span className={`font-mono text-[11px] ${on ? 'text-signal' : 'text-ink-400'}`}>{count}</span>
+              {on && <span className="absolute left-3 right-3 -bottom-[9px] h-[2px] bg-signal rounded-full" aria-hidden="true" />}
             </button>
+          )
+        })}
+      </div>
       {/* PDF scroll area */}
       <div
         ref={containerRef}
+        className="flex-1 overflow-y-auto pdf-scroll-container scroll-ink grid-bg bg-ink-900 p-4 sm:p-6 space-y-6"
       >
         {pdfUrl ? (
           <Document
                   // Use block + explicit width so the overlay div always matches
                   // the canvas dimensions exactly (inline-block can shrink-wrap)
                   style={{ position: 'relative', width: containerWidth }}
+                  className={`rounded-sm overflow-hidden transition-shadow ${
+                    hasActive ? 'ring-2 ring-signal ring-offset-4 ring-offset-ink-900' : ''
                   }`}
                 >
                   <Page
                             width: `${x1 - x0}%`,
                             height: `${y1 - y0}%`,
                             background: isActive
+                              ? 'rgba(224, 169, 70, 0.30)'   /* signal amber */
+                              : 'rgba(224, 169, 70, 0.10)',
                             border: isActive
+                              ? '2px solid #E0A946'
+                              : '1px solid rgba(183, 121, 31, 0.55)',
                             borderRadius: 3,
                             boxShadow: isActive
+                              ? '0 0 0 4px rgba(224, 169, 70, 0.22)'
                               : 'none',
                             transition: 'background 0.15s, border 0.15s',
                           }}
             })}
           </Document>
         ) : (
+          <div className="flex items-center justify-center h-full text-ink-400 text-sm">
             No PDF selected
           </div>
         )}
 function LoadingPlaceholder() {
   return (
+    <div className="flex items-center justify-center p-12 text-ink-400 text-sm font-mono">
       Loading PDF…
     </div>
   )
 function ErrorPlaceholder() {
   return (
+    <div className="flex items-center justify-center p-12 text-[#F2A35E] text-sm font-mono">
       Failed to load PDF.
     </div>
   )

ui/src/RecordPane.tsx CHANGED Viewed

@@ -32,24 +32,50 @@ export function RecordPane({ sessionId }: Props) {
   if (!sessionData) return null
   return (
-    <div className="flex flex-col h-full">
       {/* Header */}
-      <div className="px-5 py-4 border-b flex-shrink-0" style={{ backgroundColor: '#1F2937' }}>
-        <h2 className="text-sm font-semibold text-white">Golden Record</h2>
-        <p className="text-xs mt-0.5" style={{ color: 'rgba(255,255,255,0.5)' }}>
-          Click any field to highlight its source location in the PDF.
-        </p>
       </div>
       {/* Scrollable field list */}
-      <div className="flex-1 overflow-y-auto px-4 py-3 space-y-5">
         {fieldsBySection.map(({ section, entries }) => (
           <section key={section}>
-            <h3 className="text-xs font-semibold uppercase tracking-wider mb-2 px-1" style={{ color: '#008080' }}>
-              {SECTION_LABELS[section] ?? section}
-            </h3>
-            <div className="space-y-1">
               {entries.map((entry) => (
                 <FieldRow
                   key={entry.fieldPath}
@@ -158,7 +184,7 @@ function walkObject(
     } else {
       out.push({
         fieldPath: path,
-        label: formatLabel(key),
         value: String(val),
         section: pathPrefix.split('.')[0],
         provenance: provenanceMap[path],
@@ -167,8 +193,27 @@ function walkObject(
   }
 }
 function formatLabel(key: string): string {
-  return key
     .replace(/_/g, ' ')
     .replace(/\b\w/g, (c) => c.toUpperCase())
 }

   if (!sessionData) return null
+  const conflicts = sessionData.conflicts ?? []
   return (
+    <div className="flex flex-col h-full bg-paper">
       {/* Header */}
+      <div className="px-5 h-[52px] flex items-center justify-between gap-3 border-b border-ink-700 bg-ink-800 flex-shrink-0">
+        <div className="min-w-0">
+          <h2 className="text-[14px] font-semibold text-ink-100 tracking-[-0.01em]">Golden Record</h2>
+        </div>
+        <p className="text-[12px] text-ink-400 truncate">Select a field to see its source in the PDF</p>
       </div>
       {/* Scrollable field list */}
+      <div className="flex-1 overflow-y-auto scroll-paper px-4 sm:px-5 py-5 space-y-7">
+        {conflicts.length > 0 && (
+          <section aria-label="Cross-document conflicts" className="rounded-xl border border-signal/50 bg-signal-tint px-4 py-3.5">
+            <p className="eyebrow text-signal-deep">
+              {conflicts.length} cross-document conflict{conflicts.length > 1 ? 's' : ''} · resolved by authority rules
+            </p>
+            <ul className="mt-2 space-y-2">
+              {conflicts.map((c) => (
+                <li key={c.field} className="text-[13px] text-paper-ink">
+                  <span className="font-mono text-[12px] text-paper-muted">{c.field}</span>
+                  <span className="block mt-0.5">
+                    Winner: <span className="font-semibold capitalize">{c.winner}</span>
+                    {c.schedule_value && c.certificate_value ? (
+                      <span className="text-paper-muted"> · schedule and certificate wording differ</span>
+                    ) : null}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
         {fieldsBySection.map(({ section, entries }) => (
           <section key={section}>
+            <div className="flex items-baseline justify-between mb-2.5 px-1">
+              <h3 className="eyebrow text-signal-deep">{SECTION_LABELS[section] ?? section}</h3>
+              <span className="font-mono text-[11px] text-paper-muted">
+                {entries.filter((e) => e.provenance).length}/{entries.length} located
+              </span>
+            </div>
+            <div className="space-y-1.5">
               {entries.map((entry) => (
                 <FieldRow
                   key={entry.fieldPath}
     } else {
       out.push({
         fieldPath: path,
+        label: driverPrefix(pathPrefix) + formatLabel(key),
         value: String(val),
         section: pathPrefix.split('.')[0],
         provenance: provenanceMap[path],
   }
 }
+const LABELS: Record<string, string> = {
+  vrm: 'Registration (VRM)',
+  dob: 'Date of Birth',
+  license_type: 'Licence Type',
+  is_main_driver: 'Main Driver',
+  has_security_device: 'Security Device',
+  overnight_postcode: 'Overnight Postcode',
+  standard_compulsory: 'Compulsory Excess',
+  total_accidental_damage: 'Accidental Damage Excess',
+  own_repairer_additional_excess: 'Own Repairer Excess',
+  years: 'NCD Years',
+  protected: 'NCD Protected',
+}
 function formatLabel(key: string): string {
+  return LABELS[key] ?? key
     .replace(/_/g, ' ')
     .replace(/\b\w/g, (c) => c.toUpperCase())
 }
+function driverPrefix(pathPrefix: string): string {
+  const m = pathPrefix.match(/^driver_details\[(\d+)\]$/)
+  return m ? `Driver ${Number(m[1]) + 1} · ` : ''
+}

ui/src/ReviewDashboard.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { PDFPane } from './PDFPane'
 import { RecordPane } from './RecordPane'
 import { useStore } from './store'
-import logoUrl from './assets/ai-toolstack-logo.svg'
 interface Props {
   sessionId: string
@@ -11,48 +11,50 @@ export function ReviewDashboard({ sessionId }: Props) {
   const sessionData = useStore((s) => s.sessionData)
   const reviewState = useStore((s) => s.reviewState)
-  const verified = Object.values(reviewState).filter((r) => r.action === 'verify').length
-  const overridden = Object.values(reviewState).filter((r) => r.action === 'override').length
   const provTotal = sessionData?.provenance.length ?? 0
   const fieldTotal = sessionData ? _countLeaves(sessionData.record) : 0
   return (
-    <div className="flex flex-col h-screen overflow-hidden" style={{ backgroundColor: '#f1f5f9' }}>
-      {/* ── Top bar ─────────────────────────────────────────────────── */}
-      <header className="flex items-center justify-between px-6 py-3 bg-white border-b border-gray-200 shadow-sm z-10 flex-shrink-0">
-        <div className="flex items-center gap-4">
-          <a href="https://www.ai-toolstack.com/" target="_blank" rel="noopener noreferrer">
-            <img src={logoUrl} alt="AI Tool Stack" className="h-6 w-auto" />
-          </a>
-          {/* Divider */}
-          <span className="text-gray-200 select-none">|</span>
-          <div className="flex items-center gap-2">
-            <svg width="16" height="16" viewBox="0 0 28 28" fill="none" aria-hidden="true">
-              <path d="M4 18L14 22L24 18" stroke="#1F2937" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
-              <path d="M4 14L14 18L24 14" stroke="#2563EB" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
-              <path d="M4 10L14 14L24 10L14 6L4 10Z" stroke="#008080" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
-            </svg>
-            <span className="text-sm font-semibold" style={{ color: '#1F2937' }}>PolicyTrace</span>
-          </div>
-          <span className="text-xs text-gray-400 font-mono bg-gray-50 px-2 py-0.5 rounded-lg border border-gray-200">
-            {sessionId.slice(0, 8)}…
           </span>
         </div>
-        <div className="flex items-center gap-3 text-xs text-gray-500">
-          <Stat label="Fields" value={fieldTotal} />
-          <StatDivider />
-          <Stat label="Located" value={provTotal} />
-          <StatDivider />
-          <Stat label="Verified" value={verified} color="#16a34a" />
-          <StatDivider />
-          <Stat label="Overridden" value={overridden} color="#2563EB" />
         </div>
       </header>
-      {/* ── 2-column body ───────────────────────────────────────────── */}
       <div className="flex flex-1 overflow-hidden">
-        <div className="w-1/2 border-r border-gray-200 flex flex-col overflow-hidden">
           <PDFPane sessionId={sessionId} />
         </div>
         <div className="w-1/2 flex flex-col overflow-hidden">
@@ -63,24 +65,18 @@ export function ReviewDashboard({ sessionId }: Props) {
   )
 }
-function StatDivider() {
-  return <span className="text-gray-200 select-none">·</span>
-}
-function Stat({
-  label,
-  value,
-  color = '#374151',
-}: {
-  label: string
-  value: number
-  color?: string
-}) {
   return (
-    <span>
-      {label}:{' '}
-      <span className="font-semibold" style={{ color }}>{value}</span>
-    </span>
   )
 }

 import { PDFPane } from './PDFPane'
 import { RecordPane } from './RecordPane'
 import { useStore } from './store'
+import { ExternalIcon, LINKS, Lockup } from './Brand'
 interface Props {
   sessionId: string
   const sessionData = useStore((s) => s.sessionData)
   const reviewState = useStore((s) => s.reviewState)
+  const reviews = Object.values(reviewState)
+  const verified = reviews.filter((r) => r.action === 'verify').length
+  const overridden = reviews.filter((r) => r.action === 'override').length
+  const flagged = reviews.filter((r) => r.action === 'reject').length
   const provTotal = sessionData?.provenance.length ?? 0
   const fieldTotal = sessionData ? _countLeaves(sessionData.record) : 0
+  const reviewed = verified + overridden + flagged
   return (
+    <div className="flex flex-col h-screen overflow-hidden bg-ink">
+      {/* ── Top bar ─────────────────────────────────────────────── */}
+      <header className="flex items-center justify-between gap-4 px-4 sm:px-6 h-14 border-b border-ink-700 flex-shrink-0">
+        <div className="flex items-center gap-3 min-w-0">
+          <Lockup />
+          <span className="hidden md:inline font-mono text-[11px] text-ink-400 border border-ink-600 rounded-md px-2 py-1">
+            session {sessionId.slice(0, 8)}
           </span>
         </div>
+        <dl className="hidden lg:flex items-center gap-1 font-mono text-[12px]">
+          <Stat label="fields" value={fieldTotal} />
+          <Stat label="located" value={`${provTotal}`} />
+          <Stat label="verified" value={verified} tone="pass" />
+          <Stat label="overridden" value={overridden} tone="override" />
+          <Stat label="flagged" value={flagged} tone="flag" />
+        </dl>
+        <div className="flex items-center gap-3">
+          <div className="hidden sm:flex items-center gap-2" aria-label={`${reviewed} of ${fieldTotal} fields reviewed`}>
+            <div className="h-1.5 w-28 rounded-full bg-ink-700 overflow-hidden">
+              <div className="h-full bg-signal transition-all" style={{ width: `${fieldTotal ? Math.min(100, (reviewed / fieldTotal) * 100) : 0}%` }} />
+            </div>
+            <span className="font-mono text-[11px] text-ink-400">{reviewed}/{fieldTotal}</span>
+          </div>
+          <a href={LINKS.chapters} target="_blank" rel="noopener noreferrer"
+            className="hidden md:inline-flex items-center gap-1.5 text-[13px] text-ink-300 hover:text-ink-100">
+            How it’s built <ExternalIcon />
+          </a>
         </div>
       </header>
+      {/* ── 2-column body ───────────────────────────────────────── */}
       <div className="flex flex-1 overflow-hidden">
+        <div className="w-1/2 border-r border-ink-700 flex flex-col overflow-hidden">
           <PDFPane sessionId={sessionId} />
         </div>
         <div className="w-1/2 flex flex-col overflow-hidden">
   )
 }
+const TONES = {
+  pass: 'text-[#6FCF97]',
+  override: 'text-[#A9B8E0]',
+  flag: 'text-[#F2A35E]',
+} as const
+function Stat({ label, value, tone }: { label: string; value: number | string; tone?: keyof typeof TONES }) {
   return (
+    <div className="flex items-baseline gap-1.5 px-2.5 py-1 rounded-md">
+      <dd className={`font-medium ${tone ? TONES[tone] : 'text-ink-100'}`}>{value}</dd>
+      <dt className="text-ink-400">{label}</dt>
+    </div>
   )
 }

ui/src/SessionPage.tsx CHANGED Viewed

@@ -44,14 +44,13 @@ export function SessionPage() {
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: '#f8fafc' }}>
         <div className="text-center space-y-3">
-          <svg className="animate-spin h-8 w-8 mx-auto" viewBox="0 0 24 24" fill="none"
-            style={{ color: '#008080' }}>
             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
             <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
           </svg>
-          <p className="text-sm text-gray-500">Loading session…</p>
         </div>
       </div>
     )
@@ -59,15 +58,14 @@ export function SessionPage() {
   if (error) {
     return (
-      <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: '#f8fafc' }}>
         <div className="text-center space-y-4 max-w-sm">
-          <p className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-xl px-4 py-3">
             {error}
           </p>
           <button
             onClick={() => navigate('/')}
-            className="text-sm font-medium underline"
-            style={{ color: '#2563EB' }}
           >
             ← Back to upload
           </button>

   if (loading) {
     return (
+      <div className="min-h-screen flex items-center justify-center bg-ink grid-bg">
         <div className="text-center space-y-3">
+          <svg className="animate-spin h-8 w-8 mx-auto text-signal" viewBox="0 0 24 24" fill="none">
             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
             <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
           </svg>
+          <p className="font-mono text-sm text-ink-300">Loading session…</p>
         </div>
       </div>
     )
   if (error) {
     return (
+      <div className="min-h-screen flex items-center justify-center bg-ink grid-bg">
         <div className="text-center space-y-4 max-w-sm">
+          <p role="alert" className="text-sm text-[#F2B79A] bg-state-flag/10 border border-state-flag/40 rounded-xl px-4 py-3">
             {error}
           </p>
           <button
             onClick={() => navigate('/')}
+            className="text-sm font-medium text-signal hover:text-signal-hover"
           >
             ← Back to upload
           </button>

ui/src/UploadPage.tsx CHANGED Viewed

@@ -1,22 +1,27 @@
-import { useCallback, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { api } from './api'
 import { useStore } from './store'
 import type { SamplePack } from './types'
-import logoUrl from './assets/ai-toolstack-logo.svg'
-const BRAND = {
-  dark: '#07111D',
-  blue: '#5166D6',
-  teal: '#4EA8A8',
-  mint: '#63E0DC',
-} as const
 export function UploadPage() {
   const navigate = useNavigate()
   const setSession = useStore((s) => s.setSession)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [files, setFiles] = useState<File[]>([])
   const [dragOver, setDragOver] = useState(false)
@@ -26,17 +31,19 @@ export function UploadPage() {
   useEffect(() => {
     let isMounted = true
     api.getSamples()
-      .then((pack) => {
-        if (isMounted) setSamplePack(pack)
-      })
-      .catch(() => {
-        if (isMounted) setSamplePack(null)
-      })
-    return () => {
-      isMounted = false
-    }
   }, [])
   const addPdfFiles = useCallback((incoming: File[]) => {
     const pdfs = incoming.filter((f) => f.name.toLowerCase().endsWith('.pdf'))
     setFiles((prev) => {
@@ -50,21 +57,17 @@ export function UploadPage() {
     addPdfFiles(Array.from(incoming))
   }, [addPdfFiles])
-  const removeFile = (name: string) =>
-    setFiles((prev) => prev.filter((f) => f.name !== name))
   const handleLoadSamples = async () => {
     if (!samplePack?.files.length) return
     setLoadingSamples(true)
     setError(null)
     try {
-      const demoFiles = await Promise.all(
-        samplePack.files.map((sample) => api.downloadSampleFile(sample)),
-      )
       addPdfFiles(demoFiles)
     } catch (err: unknown) {
-      const msg = err instanceof Error ? err.message : 'Could not load the demo sample files.'
-      setError(msg)
     } finally {
       setLoadingSamples(false)
     }
@@ -80,214 +83,142 @@ export function UploadPage() {
       setSession(sessionData)
       navigate(`/session/${resp.session_id}`)
     } catch (err: unknown) {
-      const msg = err instanceof Error ? err.message : 'An unknown error occurred.'
-      setError(msg)
       setLoading(false)
     }
   }
   return (
-    <div className="min-h-screen flex flex-col" style={{ backgroundColor: '#f8fafc' }}>
-      {/* ── Top nav ─────────────────────────────────────────────────── */}
-      <header className="flex items-center justify-between px-8 py-4 border-b border-gray-200 bg-white">
-        <a href="https://www.ai-toolstack.com/" target="_blank" rel="noopener noreferrer">
-          <img src={logoUrl} alt="AI Tool Stack" className="h-7 w-auto" />
-        </a>
-        <span
-          className="text-xs font-medium px-2 py-1 rounded-full"
-          style={{ backgroundColor: '#f0fdfc', color: BRAND.teal }}
-        >
-          Beta
-        </span>
       </header>
-      {/* ── Hero ────────────────────────────────────────────────────── */}
-      <main className="flex-1 flex flex-col items-center justify-center px-8 py-12">
-        <div className="w-full max-w-lg">
-          {/* Title */}
-          <div className="mb-8 text-center">
-            <div className="inline-flex items-center gap-2 mb-4">
-              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
-                <path d="M4 18L14 22L24 18" stroke={BRAND.blue} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-                <path d="M4 14L14 18L24 14" stroke={BRAND.teal} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-                <path d="M4 10L14 14L24 10L14 6L4 10Z" stroke={BRAND.mint} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-              </svg>
-              <h1 className="text-2xl font-bold tracking-tight" style={{ color: BRAND.dark }}>
-                PolicyTrace
-              </h1>
-            </div>
-            <p className="text-sm text-gray-500 leading-relaxed">
-              Upload UK motor insurance PDFs — the pipeline classifies, extracts, and merges
-              them into a verified Golden Record with full field-level provenance.
             </p>
-          </div>
-          {/* Drop zone */}
-          <div
-            onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
-            onDragLeave={() => setDragOver(false)}
-            onDrop={(e) => {
-              e.preventDefault()
-              setDragOver(false)
-              handleFiles(e.dataTransfer.files)
-            }}
-            onClick={() => document.getElementById('file-input')?.click()}
-            className="rounded-2xl border-2 border-dashed p-10 text-center cursor-pointer transition-all"
-            style={{
-              borderColor: dragOver ? BRAND.blue : '#d1d5db',
-              backgroundColor: dragOver ? '#eff6ff' : '#ffffff',
-            }}
-          >
-            <svg
-              className="mx-auto mb-3 h-10 w-10 transition-colors"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              style={{ color: dragOver ? BRAND.blue : '#9ca3af' }}
             >
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
-                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
-            </svg>
-            <p className="text-sm font-medium text-gray-700">
-              Drop PDF files here, or{' '}
-              <span style={{ color: BRAND.blue }}>click to browse</span>
-            </p>
-            <p className="text-xs text-gray-400 mt-1">
-              Schedule · Certificate · Statement of Fact · Policy Booklet
-            </p>
-            <input
-              id="file-input"
-              type="file"
-              accept=".pdf"
-              multiple
-              className="hidden"
-              onChange={(e) => handleFiles(e.target.files)}
-            />
-          </div>
-          {samplePack?.files.length ? (
-            <section className="mt-4 rounded-2xl border border-teal-100 bg-white p-4 shadow-sm">
-              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                <div>
-                  <h2 className="text-sm font-semibold" style={{ color: BRAND.dark }}>
-                    Try the synthetic demo pack
-                  </h2>
-                  <p className="mt-1 text-xs leading-relaxed text-gray-500">
-                    Safe sample PDFs are bundled with the Hugging Face Space. Load them here,
-                    then run the same upload and review flow.
-                  </p>
-                  {(samplePack.expected_policy_number || samplePack.expected_vrm) && (
-                    <p className="mt-2 text-xs font-medium" style={{ color: BRAND.teal }}>
-                      Expected: {samplePack.expected_policy_number}
-                      {samplePack.expected_vrm ? ` / ${samplePack.expected_vrm}` : ''}
                     </p>
-                  )}
                 </div>
-                <button
-                  type="button"
-                  onClick={handleLoadSamples}
-                  disabled={loadingSamples}
-                  className="shrink-0 rounded-xl px-4 py-2 text-xs font-semibold text-white transition-colors disabled:opacity-50"
-                  style={{ backgroundColor: BRAND.teal }}
-                >
-                  {loadingSamples ? 'Loading samples...' : 'Load demo PDFs'}
-                </button>
               </div>
-              <div className="mt-3 flex flex-wrap gap-2">
-                {samplePack.files.map((sample) => (
-                  <a
-                    key={sample.filename}
-                    href={sample.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-block max-w-full truncate rounded-full border border-gray-200 bg-gray-50 px-3 py-1 text-xs font-medium text-gray-600 hover:border-teal-200 hover:text-teal-700"
-                  >
-                    {sample.filename}
-                  </a>
                 ))}
-              </div>
-            </section>
-          ) : null}
-          {/* File list */}
-          {files.length > 0 && (
-            <ul className="mt-4 space-y-2">
-              {files.map((f) => (
-                <li
-                  key={f.name}
-                  className="flex items-center justify-between bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm shadow-sm"
-                >
-                  <div className="flex items-center gap-2 min-w-0">
-                    <span
-                      className="shrink-0 text-xs font-semibold px-1.5 py-0.5 rounded"
-                      style={{ backgroundColor: '#fee2e2', color: '#991b1b' }}
-                    >
-                      PDF
-                    </span>
-                    <span className="text-gray-700 truncate">{f.name}</span>
-                  </div>
-                  <button
-                    onClick={() => removeFile(f.name)}
-                    className="text-gray-300 hover:text-red-500 ml-3 shrink-0 transition-colors"
-                    aria-label={`Remove ${f.name}`}
-                  >
-                    ✕
-                  </button>
-                </li>
-              ))}
-            </ul>
-          )}
-          {/* Error */}
-          {error && (
-            <div className="mt-4 rounded-xl bg-red-50 border border-red-200 p-3 text-sm text-red-700">
-              {error}
-            </div>
-          )}
-          {/* CTA */}
-          <button
-            onClick={handleSubmit}
-            disabled={!files.length || loading}
-            className="mt-6 w-full py-3 px-6 rounded-xl font-semibold text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-            style={{ backgroundColor: loading ? BRAND.teal : BRAND.blue }}
-          >
-            {loading ? (
-              <span className="flex items-center justify-center gap-2">
-                <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
-                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
-                </svg>
-                Extracting — this may take 60 s…
-              </span>
-            ) : (
-              'Extract & Review'
             )}
-          </button>
-          {loading && (
-            <p className="text-center text-xs text-gray-400 mt-3">
-              Classifying documents · Masking PII · Calling Groq LLM · Building provenance index
             </p>
-          )}
         </div>
       </main>
-      {/* ── Footer ──────────────────────────────────────��───────────── */}
-      <footer className="text-center py-4 text-xs text-gray-400 border-t border-gray-200 bg-white">
-        Built on{' '}
-        <a
-          href="https://www.ai-toolstack.com/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="underline hover:text-gray-600 transition-colors"
-        >
-          AI Tool Stack
-        </a>{' '}
-        · Powered by Groq &amp; Docling
       </footer>
     </div>
   )

+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { api } from './api'
 import { useStore } from './store'
 import type { SamplePack } from './types'
+import { ExternalIcon, LINKS, Lockup, Spinner } from './Brand'
+const PIPELINE = [
+  ['01', 'parse', 'Docling layout + text'],
+  ['02', 'pii_mask', 'Presidio, before any model call'],
+  ['03', 'classify', 'route each document'],
+  ['04', 'extract', 'typed record + verbatim citations'],
+  ['05', 'arbitrate', 'source-authority rules'],
+  ['06', 'provenance', 'match citations to PDF geometry'],
+  ['07', 'review', 'you verify, flag or override'],
+] as const
 export function UploadPage() {
   const navigate = useNavigate()
   const setSession = useStore((s) => s.setSession)
+  const inputRef = useRef<HTMLInputElement>(null)
   const [loading, setLoading] = useState(false)
+  const [step, setStep] = useState(0)
   const [error, setError] = useState<string | null>(null)
   const [files, setFiles] = useState<File[]>([])
   const [dragOver, setDragOver] = useState(false)
   useEffect(() => {
     let isMounted = true
     api.getSamples()
+      .then((pack) => { if (isMounted) setSamplePack(pack) })
+      .catch(() => { if (isMounted) setSamplePack(null) })
+    return () => { isMounted = false }
   }, [])
+  // Advance the visual pipeline while the (synchronous) request runs.
+  useEffect(() => {
+    if (!loading) return
+    setStep(0)
+    const t = setInterval(() => setStep((s) => Math.min(s + 1, PIPELINE.length - 2)), 6000)
+    return () => clearInterval(t)
+  }, [loading])
   const addPdfFiles = useCallback((incoming: File[]) => {
     const pdfs = incoming.filter((f) => f.name.toLowerCase().endsWith('.pdf'))
     setFiles((prev) => {
     addPdfFiles(Array.from(incoming))
   }, [addPdfFiles])
+  const removeFile = (name: string) => setFiles((prev) => prev.filter((f) => f.name !== name))
   const handleLoadSamples = async () => {
     if (!samplePack?.files.length) return
     setLoadingSamples(true)
     setError(null)
     try {
+      const demoFiles = await Promise.all(samplePack.files.map((sample) => api.downloadSampleFile(sample)))
       addPdfFiles(demoFiles)
     } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Could not load the demo sample files.')
     } finally {
       setLoadingSamples(false)
     }
       setSession(sessionData)
       navigate(`/session/${resp.session_id}`)
     } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'An unknown error occurred.')
       setLoading(false)
     }
   }
   return (
+    <div className="min-h-screen flex flex-col bg-ink">
+      {/* ── Top bar ─────────────────────────────────────────────── */}
+      <header className="flex items-center justify-between gap-4 px-5 sm:px-8 h-16 border-b border-ink-700">
+        <Lockup />
+        <nav className="flex items-center gap-1 text-sm">
+          <a href={LINKS.chapters} target="_blank" rel="noopener noreferrer"
+            className="hidden sm:inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-ink-300 hover:text-ink-100 hover:bg-ink-800">
+            How it’s built <ExternalIcon />
+          </a>
+          <a href={LINKS.github} target="_blank" rel="noopener noreferrer"
+            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-ink-300 hover:text-ink-100 hover:bg-ink-800">
+            Source <ExternalIcon />
+          </a>
+        </nav>
       </header>
+      {/* ── Body ────────────────────────────────────────────────── */}
+      <main className="flex-1 grid-bg">
+        <div className="mx-auto max-w-6xl px-5 sm:px-8 py-12 lg:py-20 grid gap-10 lg:gap-16 lg:grid-cols-[1.05fr_1fr] items-start">
+          {/* Left: what this is */}
+          <section className="space-y-7 lg:pt-4">
+            <p className="eyebrow text-signal">Reference system · Document AI</p>
+            <h1 className="text-[40px] sm:text-[52px] leading-[1.0] font-semibold tracking-[-0.045em] text-ink-100">
+              Reviewable extraction for motor insurance packs.
+            </h1>
+            <p className="text-[17px] leading-relaxed text-ink-300 max-w-[34rem]">
+              Upload a Schedule, Certificate, Statement of Fact and Policy Booklet. PolicyTrace builds one typed
+              Golden Record, resolves disagreements between documents, and links every field back to the exact
+              place it came from in the PDF.
             </p>
+            <ol className="rounded-xl border border-ink-600 bg-ink-800/90 font-mono text-[13px] overflow-hidden" aria-label="Pipeline">
+              {PIPELINE.map(([n, name, desc], i) => {
+                const state = !loading ? 'idle' : i < step ? 'done' : i === step ? 'active' : 'idle'
+                return (
+                  <li key={n} className="flex items-center gap-4 px-4 py-2.5 border-b border-dashed border-ink-700 last:border-b-0">
+                    <span className="w-6 text-ink-400">{n}</span>
+                    <span className={`w-24 ${state === 'active' ? 'text-signal' : 'text-ink-100'}`}>{name}</span>
+                    <span className="flex-1 text-ink-400 truncate">{desc}</span>
+                    <span className="w-14 text-right">
+                      {state === 'done' && <span className="text-[#6FCF97]">ok</span>}
+                      {state === 'active' && <span className="inline-flex text-signal"><Spinner className="h-3.5 w-3.5" /></span>}
+                    </span>
+                  </li>
+                )
+              })}
+            </ol>
+          </section>
+          {/* Right: upload card */}
+          <section className="rounded-2xl border border-ink-600 bg-ink-800 p-5 sm:p-6 shadow-page" aria-label="Upload documents">
+            <div
+              role="button"
+              tabIndex={0}
+              aria-label="Add PDF files"
+              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') inputRef.current?.click() }}
+              onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
+              onDragLeave={() => setDragOver(false)}
+              onDrop={(e) => { e.preventDefault(); setDragOver(false); handleFiles(e.dataTransfer.files) }}
+              onClick={() => inputRef.current?.click()}
+              className={`rounded-xl border border-dashed px-6 py-10 text-center cursor-pointer transition-colors ${
+                dragOver ? 'border-signal bg-signal/10' : 'border-ink-500 hover:border-ink-400 bg-ink-900/40'
+              }`}
             >
+              <svg className={`mx-auto mb-4 h-9 w-9 ${dragOver ? 'text-signal' : 'text-ink-400'}`} fill="none" viewBox="0 0 24 24"
+                stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 16V4m0 0-4 4m4-4 4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" />
+              </svg>
+              <p className="text-[15px] font-medium text-ink-100">
+                Drop PDFs here or <span className="text-signal">browse</span>
+              </p>
+              <p className="mt-1.5 font-mono text-[12px] text-ink-400">Schedule · Certificate · Statement of Fact · Booklet</p>
+              <input ref={inputRef} type="file" accept=".pdf" multiple className="hidden"
+                onChange={(e) => handleFiles(e.target.files)} />
+            </div>
+            {samplePack?.files.length ? (
+              <div className="mt-4 rounded-xl border border-ink-600 bg-ink-900/50 p-4">
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                  <div>
+                    <p className="text-sm font-medium text-ink-100">No documents to hand?</p>
+                    <p className="mt-0.5 text-[13px] text-ink-300">
+                      Load the synthetic demo pack{samplePack.expected_policy_number ? <> (<span className="font-mono">{samplePack.expected_policy_number}</span>)</> : null}. No real customer data.
                     </p>
+                  </div>
+                  <button type="button" onClick={handleLoadSamples} disabled={loadingSamples} className="btn-ghost text-sm shrink-0">
+                    {loadingSamples ? <><Spinner /> Loading…</> : 'Load demo pack'}
+                  </button>
                 </div>
               </div>
+            ) : null}
+            {files.length > 0 && (
+              <ul className="mt-4 space-y-2" aria-label="Selected files">
+                {files.map((f) => (
+                  <li key={f.name} className="flex items-center justify-between gap-3 rounded-lg border border-ink-600 bg-ink-900/40 px-3.5 py-2.5">
+                    <div className="flex items-center gap-3 min-w-0">
+                      <span className="shrink-0 rounded font-mono text-[10px] font-medium px-1.5 py-0.5 bg-ink-700 text-ink-300">PDF</span>
+                      <span className="text-sm text-ink-200 truncate">{f.name}</span>
+                    </div>
+                    <button onClick={() => removeFile(f.name)} aria-label={`Remove ${f.name}`}
+                      className="shrink-0 h-8 w-8 grid place-items-center rounded-md text-ink-400 hover:text-ink-100 hover:bg-ink-700">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18" /></svg>
+                    </button>
+                  </li>
                 ))}
+              </ul>
+            )}
+            {error && (
+              <div role="alert" className="mt-4 rounded-lg border border-state-flag/40 bg-state-flag/10 px-3.5 py-3 text-sm text-[#F2B79A]">
+                {error}
+              </div>
             )}
+            <button onClick={handleSubmit} disabled={!files.length || loading} className="btn-signal w-full mt-5 text-[15px]">
+              {loading ? <><Spinner /> Extracting · usually 30–90 s</> : <>Extract &amp; review{files.length ? ` ${files.length} file${files.length > 1 ? 's' : ''}` : ''}</>}
+            </button>
+            <p className="mt-4 text-[12px] leading-relaxed text-ink-400">
+              Public demo. Use synthetic or redacted documents only.
             </p>
+          </section>
         </div>
       </main>
+      <footer className="border-t border-ink-700 px-5 sm:px-8 py-4 flex flex-wrap gap-x-6 gap-y-1 justify-between font-mono text-[12px] text-ink-400">
+        <span>PolicyTrace · a reference system from <a className="text-ink-300 hover:text-signal" href="https://www.ai-toolstack.com/" target="_blank" rel="noopener noreferrer">ai·toolstack</a></span>
+        <span>Docling · Presidio · Groq · Instructor · FastAPI · React</span>
       </footer>
     </div>
   )

ui/src/index.css CHANGED Viewed

@@ -2,30 +2,59 @@
 @tailwind components;
 @tailwind utilities;
 @layer base {
   body {
-    @apply bg-gray-50 text-gray-900;
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   }
 }
-/* ── Brand accent utilities ─────────────────────────────────────── */
-.btn-primary {
-  @apply py-3 px-6 rounded-xl font-semibold text-white transition-colors;
-  background-color: #2563EB;
 }
-.btn-primary:hover  { background-color: #1d4ed8; }
-.btn-primary:disabled { @apply opacity-50 cursor-not-allowed; }
 /* ── react-pdf ──────────────────────────────────────────────────── */
-.react-pdf__Page {
-  @apply shadow-md;
-}
-.react-pdf__Page__canvas {
-  @apply block;
-}
-/* Smooth scroll for the PDF pane */
-.pdf-scroll-container {
-  scroll-behavior: smooth;
 }

 @tailwind components;
 @tailwind utilities;
+/* Geist 1.8.1 (SIL OFL) — same files as ai-toolstack.com */
+@font-face {
+  font-family: "Geist";
+  src: url("https://cdn.jsdelivr.net/npm/geist@1.8.1/dist/fonts/geist-sans/Geist-Variable.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Geist Mono";
+  src: url("https://cdn.jsdelivr.net/npm/geist@1.8.1/dist/fonts/geist-mono/GeistMono-Variable.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
 @layer base {
+  html { -webkit-text-size-adjust: 100%; }
   body {
+    @apply bg-ink text-ink-100 font-sans antialiased;
+    text-rendering: optimizeLegibility;
   }
+  ::selection { background: rgba(224, 169, 70, 0.35); }
+  :focus-visible { outline: 2px solid #E0A946; outline-offset: 2px; border-radius: 6px; }
 }
+@layer components {
+  .eyebrow {
+    @apply font-mono text-[11px] font-medium uppercase tracking-[0.12em];
+  }
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 font-medium transition-colors
+      disabled:opacity-50 disabled:cursor-not-allowed;
+    min-height: 44px;
+  }
+  .btn-signal { @apply btn bg-signal text-ink hover:bg-signal-hover; }
+  .btn-ghost { @apply btn border border-ink-600 text-ink-100 hover:bg-ink-800; }
+  .grid-bg {
+    background-image:
+      linear-gradient(rgba(44, 55, 82, 0.35) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(44, 55, 82, 0.35) 1px, transparent 1px);
+    background-size: 56px 56px;
+  }
 }
 /* ── react-pdf ──────────────────────────────────────────────────── */
+.react-pdf__Page { @apply shadow-page; }
+.react-pdf__Page__canvas { @apply block; }
+.pdf-scroll-container { scroll-behavior: smooth; }
+/* Thin scrollbars that suit both panes */
+.scroll-ink { scrollbar-color: #2C3752 transparent; scrollbar-width: thin; }
+.scroll-paper { scrollbar-color: #D3D0C6 transparent; scrollbar-width: thin; }
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
 }

ui/tailwind.config.js CHANGED Viewed

@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
     "./index.html",
@@ -7,18 +8,47 @@ export default {
   theme: {
     extend: {
       colors: {
-        brand: {
-          dark:  '#1F2937',
-          blue:  '#2563EB',
-          teal:  '#008080',
-          50:    '#f0fdfc',
-          100:   '#ccfbf1',
-          600:   '#2563EB',
-          700:   '#1d4ed8',
         },
       },
       fontFamily: {
-        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
       },
     },
   },

 /** @type {import('tailwindcss').Config} */
+// ai·toolstack design tokens (mirrors the ai-toolstack.com theme)
 export default {
   content: [
     "./index.html",
   theme: {
     extend: {
       colors: {
+        ink: {
+          DEFAULT: '#121826', // midnight slate ground
+          900: '#121826',
+          800: '#182033',     // surface
+          700: '#1F2940',     // raised
+          600: '#2C3752',     // rule
+          500: '#3A4766',
+          400: '#7E88A2',     // dim text (AA on ink)
+          300: '#9CA6BA',     // muted text
+          200: '#CDD3DE',     // body text on ink
+          100: '#ECEAE4',     // bone
+        },
+        paper: {
+          DEFAULT: '#F6F5F1',
+          sheet: '#FFFFFF',
+          rule: '#E2E0D9',
+          muted: '#5A6478',
+          ink: '#2B3245',
+        },
+        signal: {
+          DEFAULT: '#E0A946', // amber accent
+          hover: '#ECBE6A',
+          deep: '#8F5A0E',    // amber for text on paper (AA)
+          tint: '#FBF3E4',
+        },
+        state: {
+          pass: '#1F7A4D',
+          'pass-tint': '#EDF6F0',
+          override: '#3B4A6B',
+          'override-tint': '#EEF1F6',
+          flag: '#B4532A',
+          'flag-tint': '#F8EDE7',
         },
       },
       fontFamily: {
+        sans: ['Geist', 'ui-sans-serif', 'system-ui', '-apple-system', 'Segoe UI', 'sans-serif'],
+        mono: ['"Geist Mono"', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Consolas', 'monospace'],
+      },
+      boxShadow: {
+        sheet: '0 1px 0 rgba(18,24,38,0.04), 0 8px 24px -16px rgba(18,24,38,0.25)',
+        page: '0 24px 60px -30px rgba(0,0,0,0.65)',
       },
     },
   },