Add bundled demo samples to PolicyTrace UI

src/api.py

@@ -4,6 +4,8 @@ api.py — FastAPI server for the UK Motor Insurance Visual Audit Review UI.
 Endpoints
 ─────────
   GET  /api/health
+  GET  /api/samples                  - list bundled synthetic demo PDFs
+  GET  /api/samples/{file}           - download a bundled synthetic demo PDF
   POST /api/process                   — upload PDFs, run pipeline, return session_id
   GET  /api/session/{id}              — full GoldenRecordWithProvenance JSON
   GET  /api/pdf/{session_id}/{file}   — serve source PDF (path-traversal safe)
@@ -26,6 +28,7 @@ import uuid
 from datetime import datetime
 from pathlib import Path
 from typing import Optional
+from urllib.parse import quote
 
 # ── Ensure src/ is on sys.path so sibling modules resolve regardless of CWD ─
 sys.path.insert(0, str(Path(__file__).parent))
@@ -59,6 +62,7 @@ _DEBUG_DIR = Path(__file__).parent.parent / "output" / "debug"
 _DEBUG_DIR.mkdir(parents=True, exist_ok=True)
 
 _STATIC_DIR = Path(__file__).parent.parent / "ui" / "dist"
+_SAMPLE_PACK_DIR = Path(__file__).parent.parent / "sample_data" / "policytrace_demo_pack"
 
 # ---------------------------------------------------------------------------
 # App
@@ -136,6 +140,33 @@ def _count_leaves(obj: object) -> int:
     return 1
 
 
+def _sample_pdf_paths() -> list[Path]:
+    """Return demo PDFs in manifest order, falling back to alphabetical order."""
+    if not _SAMPLE_PACK_DIR.exists():
+        return []
+
+    pdfs_by_name = {
+        path.name: path
+        for path in sorted(_SAMPLE_PACK_DIR.glob("*.pdf"), key=lambda p: p.name.lower())
+    }
+    manifest_file = _SAMPLE_PACK_DIR / "manifest.json"
+    if not manifest_file.exists():
+        return list(pdfs_by_name.values())
+
+    try:
+        manifest = json.loads(manifest_file.read_text(encoding="utf-8"))
+    except json.JSONDecodeError:
+        return list(pdfs_by_name.values())
+
+    ordered: list[Path] = []
+    for filename in manifest.get("files", []):
+        path = pdfs_by_name.pop(Path(filename).name, None)
+        if path:
+            ordered.append(path)
+    ordered.extend(pdfs_by_name.values())
+    return ordered
+
+
 # ---------------------------------------------------------------------------
 # Endpoints
 # ---------------------------------------------------------------------------
@@ -146,6 +177,74 @@ async def health():
     return {"status": "ok", "version": "1.0.0"}
 
 
+class SampleFileInfo(BaseModel):
+    filename: str
+    size_bytes: int
+    url: str
+
+
+class SamplePackResponse(BaseModel):
+    pack_name: str
+    description: str
+    warning: str
+    expected_policy_number: Optional[str] = None
+    expected_vrm: Optional[str] = None
+    files: list[SampleFileInfo]
+
+
+@app.get("/api/samples", response_model=SamplePackResponse)
+async def list_samples():
+    """Return the bundled synthetic PDFs that are safe for public demos."""
+    manifest: dict = {}
+    manifest_file = _SAMPLE_PACK_DIR / "manifest.json"
+    if manifest_file.exists():
+        try:
+            manifest = json.loads(manifest_file.read_text(encoding="utf-8"))
+        except json.JSONDecodeError:
+            logger.warning("Could not parse sample manifest at %s", manifest_file)
+
+    files = [
+        SampleFileInfo(
+            filename=path.name,
+            size_bytes=path.stat().st_size,
+            url=f"/api/samples/{quote(path.name)}",
+        )
+        for path in _sample_pdf_paths()
+    ]
+    return SamplePackResponse(
+        pack_name="PolicyTrace demo pack",
+        description=manifest.get(
+            "purpose",
+            "Synthetic demo data for AI Tool Stack PolicyTrace.",
+        ),
+        warning=manifest.get(
+            "warning",
+            "No real customer, insurer, vehicle, or policy data is included.",
+        ),
+        expected_policy_number=manifest.get("expected_policy_number"),
+        expected_vrm=manifest.get("expected_vrm"),
+        files=files,
+    )
+
+
+@app.get("/api/samples/{filename}")
+async def serve_sample_pdf(filename: str):
+    """Serve a bundled synthetic PDF from the public demo pack."""
+    safe_name = Path(filename).name
+    if not safe_name.lower().endswith(".pdf"):
+        raise HTTPException(status_code=400, detail="Only PDF files can be served.")
+
+    pdf_path = _SAMPLE_PACK_DIR / safe_name
+    if not pdf_path.exists() or not pdf_path.is_file():
+        raise HTTPException(status_code=404, detail=f"Sample PDF '{safe_name}' not found.")
+
+    return FileResponse(
+        str(pdf_path),
+        media_type="application/pdf",
+        headers={"Content-Disposition": f'inline; filename="{safe_name}"'},
+    )
+
+
 # ── POST /api/process ────────────────────────────────────────────────────────
 
 class ProcessResponse(BaseModel):

ui/src/UploadPage.tsx

@@ -1,13 +1,15 @@
-import { useCallback, useState } from 'react'
+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: '#1F2937',
-  blue: '#2563EB',
-  teal: '#008080',
+  dark: '#07111D',
+  blue: '#5166D6',
+  teal: '#4EA8A8',
+  mint: '#63E0DC',
 } as const
 
 export function UploadPage() {
@@ -18,19 +20,56 @@ export function UploadPage() {
   const [error, setError] = useState<string | null>(null)
   const [files, setFiles] = useState<File[]>([])
   const [dragOver, setDragOver] = useState(false)
+  const [samplePack, setSamplePack] = useState<SamplePack | null>(null)
+  const [loadingSamples, setLoadingSamples] = useState(false)
 
-  const handleFiles = useCallback((incoming: FileList | null) => {
-    if (!incoming) return
-    const pdfs = Array.from(incoming).filter((f) => f.name.toLowerCase().endsWith('.pdf'))
+  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) => {
       const names = new Set(prev.map((f) => f.name))
       return [...prev, ...pdfs.filter((f) => !names.has(f.name))]
     })
   }, [])
 
+  const handleFiles = useCallback((incoming: FileList | null) => {
+    if (!incoming) return
+    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)
+    }
+  }
+
   const handleSubmit = async () => {
     if (!files.length) return
     setLoading(true)
@@ -71,9 +110,9 @@ export function UploadPage() {
           <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.dark} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-                <path d="M4 14L14 18L24 14" stroke={BRAND.blue} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-                <path d="M4 10L14 14L24 10L14 6L4 10Z" stroke={BRAND.teal} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                <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
@@ -128,6 +167,51 @@ export function UploadPage() {
             />
           </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">

ui/src/api.ts

@@ -1,9 +1,19 @@
 import axios from 'axios'
-import type { ProcessResponse, ReviewAction, ReviewState, SessionData } from './types'
+import type { ProcessResponse, ReviewAction, ReviewState, SampleFile, SamplePack, SessionData } from './types'
 
 const http = axios.create({ baseURL: '/' })
 
 export const api = {
+  async getSamples(): Promise<SamplePack> {
+    const { data } = await http.get<SamplePack>('/api/samples')
+    return data
+  },
+
+  async downloadSampleFile(sample: SampleFile): Promise<File> {
+    const { data } = await http.get<Blob>(sample.url, { responseType: 'blob' })
+    return new File([data], sample.filename, { type: 'application/pdf' })
+  },
+
   async processDocuments(files: File[]): Promise<ProcessResponse> {
     const form = new FormData()
     for (const f of files) form.append('files', f)

ui/src/types.ts

@@ -168,3 +168,18 @@ export interface ProcessResponse {
   fields_extracted: number
   provenance_coverage: number
 }
+
+export interface SampleFile {
+  filename: string
+  size_bytes: number
+  url: string
+}
+
+export interface SamplePack {
+  pack_name: string
+  description: string
+  warning: string
+  expected_policy_number?: string
+  expected_vrm?: string
+  files: SampleFile[]
+}