Spaces:

ClaimCheck
/

ClaimCheckAI

Runtime error

App Files Files Community

stutiagrawal commited on Aug 16, 2025

Commit

a45ece3

1 Parent(s): 83fc25d

adding the ui files

Browse files

Files changed (34) hide show

README.md +9 -1
app/agents/claims.py +1 -1
ui/claimcheck-ui/.eslintrc.cjs +17 -0
ui/claimcheck-ui/.gitignore +8 -0
ui/claimcheck-ui/.prettierrc +5 -0
ui/claimcheck-ui/README_RUN_UI.md +39 -0
ui/claimcheck-ui/index.html +12 -0
ui/claimcheck-ui/package.json +44 -0
ui/claimcheck-ui/postcss.config.js +6 -0
ui/claimcheck-ui/src/App.tsx +120 -0
ui/claimcheck-ui/src/components/ClaimsTable.tsx +115 -0
ui/claimcheck-ui/src/components/EvidenceDrawer.tsx +63 -0
ui/claimcheck-ui/src/components/Header.tsx +45 -0
ui/claimcheck-ui/src/components/ResultsSummary.tsx +55 -0
ui/claimcheck-ui/src/components/RunHistory.tsx +34 -0
ui/claimcheck-ui/src/components/SettingsPanel.tsx +40 -0
ui/claimcheck-ui/src/components/Stepper.tsx +32 -0
ui/claimcheck-ui/src/components/TranscriptPanel.tsx +45 -0
ui/claimcheck-ui/src/components/TranscriptViewer.tsx +38 -0
ui/claimcheck-ui/src/components/UploadPanel.tsx +79 -0
ui/claimcheck-ui/src/components/index.ts +10 -0
ui/claimcheck-ui/src/env.d.ts +9 -0
ui/claimcheck-ui/src/index.css +74 -0
ui/claimcheck-ui/src/lib/api.ts +40 -0
ui/claimcheck-ui/src/lib/types.ts +45 -0
ui/claimcheck-ui/src/lib/utils.ts +49 -0
ui/claimcheck-ui/src/main.tsx +25 -0
ui/claimcheck-ui/src/mocks/sampleReport.json +28 -0
ui/claimcheck-ui/src/store/appStore.ts +112 -0
ui/claimcheck-ui/src/store/nanoid.ts +10 -0
ui/claimcheck-ui/tailwind.config.ts +67 -0
ui/claimcheck-ui/tsconfig.json +22 -0
ui/claimcheck-ui/tsconfig.node.json +10 -0
ui/claimcheck-ui/vite.config.ts +16 -0

README.md CHANGED Viewed

@@ -98,7 +98,15 @@ If you change the KB, rebuild the index by deleting the `kb/index/` folder.
 KMP_DUPLICATE_LIB_OK=TRUE OMP_NUM_THREADS=1 uvicorn app.main:app --reload
 ```
-### 5) Try it
 **Transcript path (no audio):**
 ```bash

 KMP_DUPLICATE_LIB_OK=TRUE OMP_NUM_THREADS=1 uvicorn app.main:app --reload
 ```
+### 5) Run the UI
+```bash
+cd ui
+pnpm install
+pnpm dev
+```
+- If you change the UI dev port/host, add it to `allow_origins` in `app/main.py`.
+### 6) Try it
 **Transcript path (no audio):**
 ```bash

app/agents/claims.py CHANGED Viewed

@@ -113,7 +113,7 @@ def run_claim_extractor(transcript: str) -> Dict[str, Any]:
     repair_payload = {
         "input": f"Return ONLY valid JSON object with key 'claims'. Fix and output JSON:\n\n{txt}",
         "parameters": {"decoding_method": "greedy", "max_new_tokens": 400, "temperature": 0.0},
-        "model_id": CLAIM_MODEL_ID,
         "project_id": WATSONX_PROJECT
     }
     repaired = _gen_post(repair_payload)

     repair_payload = {
         "input": f"Return ONLY valid JSON object with key 'claims'. Fix and output JSON:\n\n{txt}",
         "parameters": {"decoding_method": "greedy", "max_new_tokens": 400, "temperature": 0.0},
+        "model_id": IBM_CLAIM_MODEL_ID,
         "project_id": WATSONX_PROJECT
     }
     repaired = _gen_post(repair_payload)

ui/claimcheck-ui/.eslintrc.cjs ADDED Viewed

	@@ -0,0 +1,17 @@

+module.exports = {
+  root: true,
+  env: { browser: true, es2021: true, node: true },
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh', '@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:react-refresh/recommended',
+    'prettier',
+  ],
+  settings: { react: { version: 'detect' } },
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
+}

ui/claimcheck-ui/.gitignore ADDED Viewed

	@@ -0,0 +1,8 @@

+node_modules
+.DS_Store
+/dist
+/.turbo
+pnpm-lock.yaml
+npm-debug.log*
+yarn.lock
+.env

ui/claimcheck-ui/.prettierrc ADDED Viewed

	@@ -0,0 +1,5 @@

+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

ui/claimcheck-ui/README_RUN_UI.md ADDED Viewed

	@@ -0,0 +1,39 @@

+# ClaimCheck.AI UI
+A React + Vite + TypeScript single-page app with TailwindCSS and minimal shadcn-style design.
+## Prerequisites
+- Node.js 18+
+- pnpm (preferred) or npm/yarn
+## Setup
+```bash
+pnpm install
+```
+## Run Dev Server
+```bash
+pnpm dev
+```
+- App: `http://localhost:5173`
+- Backend base URL is read from `VITE_API_BASE` (default `http://127.0.0.1:8000`).
+  - Create `.env` and set `VITE_API_BASE=http://127.0.0.1:8000` if needed.
+## Build
+```bash
+pnpm build
+pnpm preview
+```
+## Features
+- Upload audio or paste transcript and run
+- Pipeline stepper with optimistic progression
+- Results summary with copy/download/print
+- Claims table with verdict filters and evidence drawer
+- Transcript viewer (collapsible)
+- Run history (localStorage) and sample data
+## Accessibility
+- Keyboard navigable
+- AA contrast
+- Roles/aria on tabs, tables, dialogs

ui/claimcheck-ui/index.html ADDED Viewed

	@@ -0,0 +1,12 @@

+<!doctype html>
+<html lang="en" class="h-full">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ClaimCheck.AI</title>
+  </head>
+  <body class="h-full">
+    <div id="root" class="h-full"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

ui/claimcheck-ui/package.json ADDED Viewed

	@@ -0,0 +1,44 @@

+{
+  "name": "claimcheck-ai-ui",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .ts,.tsx",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/react-switch": "^1.0.3",
+    "axios": "^1.7.2",
+    "classnames": "^2.5.1",
+    "lucide-react": "^0.454.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.52.0",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.9",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/parser": "^7.16.1",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "postcss": "^8.4.38",
+    "prettier": "^3.3.2",
+    "tailwindcss": "^3.4.7",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.1"
+  }
+}

ui/claimcheck-ui/postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

ui/claimcheck-ui/src/App.tsx ADDED Viewed

	@@ -0,0 +1,120 @@

+import { useEffect } from 'react'
+import { Header } from '@/components/Header'
+import { UploadPanel } from '@/components/UploadPanel'
+import { TranscriptPanel } from '@/components/TranscriptPanel'
+import { SettingsPanel } from '@/components/SettingsPanel'
+import { Stepper } from '@/components/Stepper'
+import { ResultsSummary } from '@/components/ResultsSummary'
+import { ClaimsTable } from '@/components/ClaimsTable'
+import { EvidenceDrawer } from '@/components/EvidenceDrawer'
+import { TranscriptViewer } from '@/components/TranscriptViewer'
+import { RunHistory } from '@/components/RunHistory'
+import { useAppStore } from '@/store/appStore'
+export default function App() {
+  const currentRun = useAppStore((s) => s.runs.find((r) => r.id === s.currentRunId))
+  const loadFromStorage = useAppStore((s) => s.loadFromStorage)
+  useEffect(() => {
+    loadFromStorage()
+  }, [loadFromStorage])
+  return (
+    <div className="min-h-full">
+      <Header />
+      <main className="px-4 sm:px-6 lg:px-8 py-6 max-w-7xl mx-auto">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+          <section className="lg:col-span-5 space-y-6" aria-label="Input panel and run history">
+            <div className="bg-card text-card-foreground rounded-lg border">
+              <div className="p-4">
+                <SettingsTabs />
+              </div>
+            </div>
+            <RunHistory />
+          </section>
+          <section className="lg:col-span-7 space-y-4" aria-label="Results panel">
+            <Stepper />
+            {currentRun?.report ? (
+              <div className="space-y-4">
+                <ResultsSummary />
+                <ClaimsTable />
+                <TranscriptViewer />
+                <EvidenceDrawer />
+              </div>
+            ) : (
+              <EmptyState />)
+            }
+          </section>
+        </div>
+      </main>
+    </div>
+  )
+}
+function SettingsTabs() {
+  // Simple tabs without external lib for accessibility
+  // 0: Upload, 1: Transcript, 2: Settings
+  const tab = useAppStore((s) => s.ui.tab)
+  const setTab = useAppStore((s) => s.setTab)
+  return (
+    <div role="tablist" aria-label="Input tabs" className="w-full">
+      <div className="flex gap-2 border-b pb-2">
+        <button
+          role="tab"
+          aria-selected={tab === 0}
+          className={`px-3 py-2 rounded-md text-sm font-medium ${tab === 0 ? 'bg-accent text-accent-foreground' : 'hover:bg-muted'}`}
+          onClick={() => setTab(0)}
+        >
+          Upload Audio
+        </button>
+        <button
+          role="tab"
+          aria-selected={tab === 1}
+          className={`px-3 py-2 rounded-md text-sm font-medium ${tab === 1 ? 'bg-accent text-accent-foreground' : 'hover:bg-muted'}`}
+          onClick={() => setTab(1)}
+        >
+          Paste Transcript
+        </button>
+        <button
+          role="tab"
+          aria-selected={tab === 2}
+          className={`px-3 py-2 rounded-md text-sm font-medium ${tab === 2 ? 'bg-accent text-accent-foreground' : 'hover:bg-muted'}`}
+          onClick={() => setTab(2)}
+        >
+          KB & Settings
+        </button>
+      </div>
+      <div className="mt-4">
+        {tab === 0 && <UploadPanel />}
+        {tab === 1 && <TranscriptPanel />}
+        {tab === 2 && <SettingsPanel />}
+      </div>
+    </div>
+  )
+}
+function EmptyState() {
+  return (
+    <div className="bg-card text-card-foreground rounded-lg border p-8">
+      <h2 className="text-lg font-semibold">Welcome to ClaimCheck.AI</h2>
+      <p className="text-sm text-muted-foreground mt-2">
+        Upload an audio file or paste a transcript to verify claims against your knowledge base. Use the sample data to explore the UI.
+      </p>
+      <div className="mt-4">
+        <SampleDataButton />
+      </div>
+    </div>
+  )
+}
+function SampleDataButton() {
+  const loadSample = useAppStore((s) => s.loadSample)
+  return (
+    <button onClick={loadSample} className="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-primary text-primary-foreground hover:opacity-90">
+      Use Sample Data
+    </button>
+  )
+}

ui/claimcheck-ui/src/components/ClaimsTable.tsx ADDED Viewed

	@@ -0,0 +1,115 @@

+import { useMemo, useState } from 'react'
+import { useAppStore } from '@/store/appStore'
+import type { VerdictLabel } from '@/lib/types'
+import { confidencePercent, verdictColor } from '@/lib/utils'
+export function ClaimsTable() {
+  const run = useAppStore((s) => s.runs.find((r) => r.id === s.currentRunId))
+  const filter = useAppStore((s) => s.ui.filter)
+  const setFilter = useAppStore((s) => s.setFilter)
+  const openEvidence = useAppStore((s) => s.openEvidence)
+  const [sortAsc, setSortAsc] = useState<boolean>(false)
+  const rows = useMemo(() => {
+    if (!run?.report) return []
+    const { claims, verdicts, evidence } = run.report
+    const byClaim: Record<string, any> = {}
+    for (const c of claims) byClaim[c.id] = { claim: c }
+    for (const v of verdicts) byClaim[v.claim_id] = { ...(byClaim[v.claim_id] || {}), verdict: v }
+    let data = Object.values(byClaim)
+    if (filter !== 'all') {
+      data = data.filter((r: any) => r.verdict?.label === filter)
+    }
+    data.sort((a: any, b: any) => (sortAsc ? (a.verdict?.confidence ?? 0) - (b.verdict?.confidence ?? 0) : (b.verdict?.confidence ?? 0) - (a.verdict?.confidence ?? 0)))
+    return data.map((r: any) => {
+      const evid = evidence.find((e) => e.doc_id === r.verdict?.best_evidence_id)
+      return { ...r, evidence: evid }
+    })
+  }, [run, filter, sortAsc])
+  if (!run?.report) return null
+  const filters: ('all' | VerdictLabel)[] = ['all', 'supported', 'refuted', 'insufficient']
+  return (
+    <div className="bg-card text-card-foreground rounded-lg border">
+      <div className="p-4 flex items-center justify-between">
+        <h3 className="font-medium">Claims</h3>
+        <div className="flex items-center gap-2">
+          {filters.map((f) => (
+            <button
+              key={f}
+              onClick={() => setFilter(f)}
+              className={`text-xs px-2 py-1 rounded-md border ${filter === f ? 'bg-accent' : 'hover:bg-muted'}`}
+            >
+              {f}
+            </button>
+          ))}
+          <button className="text-xs px-2 py-1 rounded-md border hover:bg-muted" onClick={() => setSortAsc((v) => !v)}>
+            Sort by confidence {sortAsc ? '↑' : '↓'}
+          </button>
+        </div>
+      </div>
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm" role="table" aria-label="Claims table">
+          <thead className="text-left text-muted-foreground">
+            <tr>
+              <th className="px-4 py-2 w-[50%]">Claim</th>
+              <th className="px-4 py-2">Verdict</th>
+              <th className="px-4 py-2">Confidence</th>
+              <th className="px-4 py-2">Evidence</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((r: any, idx: number) => (
+              <tr key={idx} className="border-t">
+                <td className="px-4 py-2 align-top">{r.claim?.text}</td>
+                <td className="px-4 py-2 align-top">
+                  {r.verdict && (
+                    <span className={`inline-flex items-center px-2 py-1 rounded-md border text-xs ${verdictColor(r.verdict.label)}`}>
+                      {labelText(r.verdict.label)}
+                    </span>
+                  )}
+                </td>
+                <td className="px-4 py-2 align-top">
+                  <div className="min-w-[100px]">
+                    <div className="h-2 rounded bg-muted">
+                      <div className="h-2 rounded bg-primary" style={{ width: `${confidencePercent(r.verdict?.confidence)}%` }} />
+                    </div>
+                    <div className="text-xs text-muted-foreground mt-1">{confidencePercent(r.verdict?.confidence)}%</div>
+                  </div>
+                </td>
+                <td className="px-4 py-2 align-top">
+                  {r.evidence ? (
+                    <button
+                      className="text-xs px-2 py-1 rounded-md border hover:bg-muted"
+                      onClick={() => openEvidence(r.claim.id)}
+                    >
+                      {r.evidence.source || r.evidence.doc_id}
+                    </button>
+                  ) : (
+                    <span className="text-xs text-muted-foreground">—</span>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+function labelText(v: VerdictLabel): string {
+  switch (v) {
+    case 'supported':
+      return 'Supported'
+    case 'refuted':
+      return 'Refuted'
+    default:
+      return 'Insufficient'
+  }
+}

ui/claimcheck-ui/src/components/EvidenceDrawer.tsx ADDED Viewed

	@@ -0,0 +1,63 @@

+import { useMemo } from 'react'
+import { useAppStore } from '@/store/appStore'
+export function EvidenceDrawer() {
+  const run = useAppStore((s) => s.runs.find((r) => r.id === s.currentRunId))
+  const isOpen = useAppStore((s) => s.ui.evidenceOpen)
+  const claimId = useAppStore((s) => s.ui.selectedClaimId)
+  const close = useAppStore((s) => s.closeEvidence)
+  const claim = useMemo(() => run?.report?.claims.find((c) => c.id === claimId), [run, claimId])
+  const verdict = useMemo(() => run?.report?.verdicts.find((v) => v.claim_id === claimId), [run, claimId])
+  const evidences = useMemo(() => {
+    if (!run?.report || !verdict) return []
+    const sorted = [...run.report.evidence].sort((a, b) => (b.score ?? 0) - (a.score ?? 0))
+    return sorted.slice(0, 5)
+  }, [run, verdict])
+  if (!isOpen) return null
+  return (
+    <div role="dialog" aria-modal="true" className="fixed inset-0 z-50">
+      <div className="absolute inset-0 bg-black/40" onClick={close} />
+      <div className="absolute top-0 right-0 h-full w-full sm:w-[420px] bg-card text-card-foreground border-l shadow-xl overflow-auto" tabIndex={-1} aria-labelledby="evidence-title">
+        <div className="p-4 border-b flex items-start justify-between">
+          <h3 id="evidence-title" className="font-semibold pr-4">Evidence & Rationale</h3>
+          <button className="text-sm px-2 py-1 rounded-md border hover:bg-muted" onClick={close}>Close</button>
+        </div>
+        <div className="p-4 space-y-4">
+          {claim && (
+            <div>
+              <div className="text-xs text-muted-foreground">Claim</div>
+              <div className="mt-1 text-sm">{claim.text}</div>
+            </div>
+          )}
+          <div>
+            <div className="text-xs text-muted-foreground">Top Evidence</div>
+            <ul className="mt-2 space-y-3">
+              {evidences.map((e) => (
+                <li key={e.doc_id} className="rounded-md border p-3">
+                  <div className="text-xs text-muted-foreground">{e.source || e.doc_id} • score {(e.score ?? 0).toFixed(2)}</div>
+                  <div className="mt-1 text-sm whitespace-pre-wrap">{e.snippet}</div>
+                  {e.metadata && (
+                    <pre className="mt-2 text-xs text-muted-foreground whitespace-pre-wrap">{JSON.stringify(e.metadata, null, 2)}</pre>
+                  )}
+                </li>
+              ))}
+              {evidences.length === 0 && <li className="text-sm text-muted-foreground">No evidence</li>}
+            </ul>
+          </div>
+          {verdict?.rationale && (
+            <div>
+              <div className="text-xs text-muted-foreground">Model Rationale</div>
+              <div className="mt-1 text-sm whitespace-pre-wrap">{verdict.rationale}</div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

ui/claimcheck-ui/src/components/Header.tsx ADDED Viewed

	@@ -0,0 +1,45 @@

+import { useEffect, useState } from 'react'
+import { Moon, Sun } from 'lucide-react'
+export function Header() {
+  return (
+    <header className="border-b bg-background/60 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <span className="text-lg font-bold">ClaimCheck.AI</span>
+          <span className="text-xs px-2 py-1 rounded-full border bg-muted text-muted-foreground">IBM watsonx powered</span>
+        </div>
+        <ThemeToggle />
+      </div>
+    </header>
+  )
+}
+function ThemeToggle() {
+  const [isDark, setIsDark] = useState(false)
+  useEffect(() => {
+    const saved = localStorage.getItem('cc_theme')
+    const prefers = window.matchMedia('(prefers-color-scheme: dark)').matches
+    const dark = saved ? saved === 'dark' : prefers
+    setIsDark(dark)
+  }, [])
+  function toggle() {
+    const next = !isDark
+    setIsDark(next)
+    document.documentElement.classList.toggle('dark', next)
+    localStorage.setItem('cc_theme', next ? 'dark' : 'light')
+  }
+  return (
+    <button
+      className="inline-flex items-center gap-2 text-sm px-3 py-2 rounded-md border hover:bg-muted"
+      aria-label="Toggle color theme"
+      onClick={toggle}
+    >
+      {isDark ? <Sun size={16} /> : <Moon size={16} />}
+      <span className="hidden sm:inline">{isDark ? 'Light' : 'Dark'} mode</span>
+    </button>
+  )
+}

ui/claimcheck-ui/src/components/ResultsSummary.tsx ADDED Viewed

	@@ -0,0 +1,55 @@

+import { useMemo } from 'react'
+import { useAppStore } from '@/store/appStore'
+import { copyToClipboard, downloadJSON } from '@/lib/utils'
+import { Copy, Download, Printer } from 'lucide-react'
+export function ResultsSummary() {
+  const run = useAppStore((s) => s.runs.find((r) => r.id === s.currentRunId))
+  const report = run?.report
+  const summary = useMemo(() => report?.call_summary ?? '', [report])
+  if (!report) return null
+  function onCopy() {
+    copyToClipboard(summary)
+  }
+  function onDownload() {
+    downloadJSON(report)
+  }
+  function onPrint() {
+    window.print()
+  }
+  return (
+    <div className="bg-card text-card-foreground rounded-lg border p-4">
+      <div className="flex items-center justify-between">
+        <h3 className="font-semibold">Executive Summary</h3>
+        <div className="flex items-center gap-2">
+          <button className="inline-flex items-center gap-1 text-sm px-2 py-1 rounded-md border hover:bg-muted" onClick={onCopy}>
+            <Copy size={14} /> Copy
+          </button>
+          <button className="inline-flex items-center gap-1 text-sm px-2 py-1 rounded-md border hover:bg-muted" onClick={onDownload}>
+            <Download size={14} /> Download JSON
+          </button>
+          <button className="inline-flex items-center gap-1 text-sm px-2 py-1 rounded-md border hover:bg-muted" onClick={onPrint}>
+            <Printer size={14} /> Download PDF
+          </button>
+        </div>
+      </div>
+      <p className="mt-3 text-sm leading-6 whitespace-pre-line">{summary}</p>
+      {report.action_items?.length > 0 && (
+        <div className="mt-4">
+          <h4 className="font-medium">Action Items</h4>
+          <ul className="list-disc list-inside text-sm mt-2 space-y-1">
+            {report.action_items.map((a, idx) => (
+              <li key={idx}>{a}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}

ui/claimcheck-ui/src/components/RunHistory.tsx ADDED Viewed

	@@ -0,0 +1,34 @@

+import { useAppStore } from '@/store/appStore'
+import { History } from 'lucide-react'
+export function RunHistory() {
+  const runs = useAppStore((s) => s.runs)
+  const selectRun = useAppStore((s) => s.selectRun)
+  const currentRunId = useAppStore((s) => s.currentRunId)
+  return (
+    <div className="bg-card text-card-foreground rounded-lg border">
+      <div className="p-4 border-b flex items-center gap-2">
+        <History size={16} />
+        <h3 className="font-medium">Run History</h3>
+      </div>
+      <ul className="divide-y" role="list" aria-label="Recent runs">
+        {runs.length === 0 && (
+          <li className="p-4 text-sm text-muted-foreground">No runs yet</li>
+        )}
+        {runs.map((r) => (
+          <li key={r.id} className="p-3">
+            <button
+              className={`w-full text-left px-2 py-2 rounded-md hover:bg-muted ${currentRunId === r.id ? 'bg-muted' : ''}`}
+              onClick={() => selectRun(r.id)}
+            >
+              <div className="text-sm font-medium">{new Date(r.startedAt).toLocaleString()}</div>
+              <div className="text-xs text-muted-foreground">{r.inputKind}</div>
+              {r.error && <div className="mt-1 text-xs text-red-600">{r.error}</div>}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

ui/claimcheck-ui/src/components/SettingsPanel.tsx ADDED Viewed

	@@ -0,0 +1,40 @@

+import { useEffect, useState } from 'react'
+import { health, rebuildKb, type Health } from '@/lib/api'
+export function SettingsPanel() {
+  const [data, setData] = useState<Health | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  useEffect(() => {
+    health().then(setData).catch((e) => setError(e?.message || 'Failed to load health'))
+  }, [])
+  return (
+    <div className="space-y-4" aria-label="Settings">
+      <div>
+        <h3 className="font-medium">Models</h3>
+        {!data && !error && <p className="text-sm text-muted-foreground">Loading...</p>}
+        {error && <p className="text-sm text-red-600">{error}</p>}
+        {data && (
+          <div className="text-sm bg-secondary rounded-md p-3 overflow-auto">
+            <div>Status: {data.ok ? 'OK' : 'Degraded'}</div>
+            <div>watsonx: {data.watsonx ? 'Yes' : 'No'}</div>
+            <div>stt: {data.stt ? 'Yes' : 'No'}</div>
+            {data.models && (
+              <pre className="mt-2 text-xs whitespace-pre-wrap">{JSON.stringify(data.models, null, 2)}</pre>
+            )}
+          </div>
+        )}
+      </div>
+      <div>
+        <h3 className="font-medium">Knowledge Base</h3>
+        <button
+          onClick={async () => { try { await rebuildKb(); alert('KB rebuild requested'); } catch (e) { alert('Failed to rebuild KB'); } }}
+          className="inline-flex items-center gap-2 px-3 py-2 rounded-md border hover:bg-muted"
+        >
+          Rebuild Index
+        </button>
+      </div>
+    </div>
+  )
+}

ui/claimcheck-ui/src/components/Stepper.tsx ADDED Viewed

	@@ -0,0 +1,32 @@

+import { useAppStore, StepKey } from '@/store/appStore'
+import { AudioWaveform, FileText, ListChecks, Search, ShieldCheck } from 'lucide-react'
+const steps: { key: StepKey; label: string; icon: any }[] = [
+  { key: 'ASR', label: 'ASR', icon: AudioWaveform },
+  { key: 'Claims', label: 'Claims', icon: ListChecks },
+  { key: 'Retrieval', label: 'Retrieval', icon: Search },
+  { key: 'Verification', label: 'Verification', icon: ShieldCheck },
+  { key: 'Summary', label: 'Summary', icon: FileText },
+]
+export function Stepper() {
+  const state = useAppStore((s) => s.steps)
+  return (
+    <div className="bg-card text-card-foreground rounded-lg border p-3" role="group" aria-label="Pipeline status">
+      <ol className="grid grid-cols-1 sm:grid-cols-5 gap-2">
+        {steps.map(({ key, label, icon: Icon }) => {
+          const status = state[key]
+          return (
+            <li key={key} className="flex items-center gap-2">
+              <span className={`w-2 h-2 rounded-full ${status === 'done' ? 'bg-green-500' : status === 'running' ? 'bg-blue-500 animate-pulse' : status === 'error' ? 'bg-red-500' : 'bg-muted-foreground/40'}`} />
+              <span className="inline-flex items-center gap-2 text-sm">
+                <Icon size={16} /> {label}
+                {status === 'running' && <span className="ml-1 h-3 w-3 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" aria-label="Loading" />}
+              </span>
+            </li>
+          )
+        })}
+      </ol>
+    </div>
+  )
+}

ui/claimcheck-ui/src/components/TranscriptPanel.tsx ADDED Viewed

	@@ -0,0 +1,45 @@

+import { useState } from 'react'
+import { FileText, Play } from 'lucide-react'
+import { useAppStore } from '@/store/appStore'
+import { wordCount } from '@/lib/utils'
+const SAMPLE = `Agent: Thanks for joining. We saw improved adoption this quarter.\nCustomer: We plan to expand to 3 more teams next month.\nAgent: Pricing will remain the same.\nCustomer: If support SLAs slip again, we may churn.`
+export function TranscriptPanel() {
+  const [text, setText] = useState('')
+  const startRun = useAppStore((s) => s.startRun)
+  function loadSample() {
+    setText(SAMPLE)
+  }
+  return (
+    <div className="space-y-4" aria-label="Paste transcript">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <FileText size={16} /> Paste call transcript
+      </div>
+      <textarea
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        rows={10}
+        className="w-full rounded-md border bg-background p-3 outline-none focus:ring-2 focus:ring-ring"
+        placeholder="Paste transcript here..."
+      />
+      <div className="flex items-center justify-between text-xs text-muted-foreground">
+        <span>Word count: {wordCount(text)}</span>
+        <button onClick={loadSample} className="underline hover:no-underline">
+          Use sample text
+        </button>
+      </div>
+      <div className="flex justify-end">
+        <button
+          disabled={!text.trim()}
+          onClick={() => startRun('transcript', { text })}
+          className={`inline-flex items-center gap-2 px-4 py-2 rounded-md ${!text.trim() ? 'bg-muted text-muted-foreground' : 'bg-primary text-primary-foreground hover:opacity-90'}`}
+        >
+          <Play size={16} /> Run
+        </button>
+      </div>
+    </div>
+  )
+}

ui/claimcheck-ui/src/components/TranscriptViewer.tsx ADDED Viewed

	@@ -0,0 +1,38 @@

+import { useMemo, useState } from 'react'
+import { useAppStore } from '@/store/appStore'
+export function TranscriptViewer() {
+  const [open, setOpen] = useState(false)
+  const run = useAppStore((s) => s.runs.find((r) => r.id === s.currentRunId))
+  const segments = useMemo(() => {
+    const claims = run?.report?.claims ?? []
+    // synthesize segments if none: group by speaker or fallback single block
+    const text = (run?.report?.claim_table || []).map((c) => c.claim).join('\n')
+    return [
+      { speaker: 'Call', start: 0, end: 0, text, claims },
+    ]
+  }, [run])
+  if (!run?.report) return null
+  return (
+    <div className="bg-card text-card-foreground rounded-lg border">
+      <button className="w-full text-left p-4" onClick={() => setOpen((v) => !v)} aria-expanded={open}>
+        <span className="font-medium">Transcript</span>
+      </button>
+      {open && (
+        <div className="px-4 pb-4 space-y-4">
+          {segments.map((seg, idx) => (
+            <div key={idx} className="rounded-md border p-3">
+              <div className="text-xs text-muted-foreground">{seg.speaker}</div>
+              <div className="mt-1 text-sm whitespace-pre-wrap">
+                {seg.text}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

ui/claimcheck-ui/src/components/UploadPanel.tsx ADDED Viewed

	@@ -0,0 +1,79 @@

+import { useState, useCallback, useMemo } from 'react'
+import { Upload, Play } from 'lucide-react'
+import { useAppStore } from '@/store/appStore'
+import { formatBytes } from '@/lib/utils'
+export function UploadPanel() {
+  const [file, setFile] = useState<File | null>(null)
+  const [duration, setDuration] = useState<number | null>(null)
+  const startRun = useAppStore((s) => s.startRun)
+  const onFiles = useCallback((files: FileList | null) => {
+    if (!files || files.length === 0) return
+    const f = files[0]
+    setFile(f)
+    // compute duration
+    const url = URL.createObjectURL(f)
+    const audio = new Audio(url)
+    audio.addEventListener('loadedmetadata', () => {
+      setDuration(audio.duration)
+      URL.revokeObjectURL(url)
+    })
+  }, [])
+  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    onFiles(e.dataTransfer.files)
+  }, [onFiles])
+  const handleBrowse = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    onFiles(e.target.files)
+  }, [onFiles])
+  const disabled = !file
+  const durationText = useMemo(() => {
+    if (duration == null) return '—'
+    const m = Math.floor(duration / 60)
+    const s = Math.round(duration % 60)
+    return `${m}:${s.toString().padStart(2, '0')}`
+  }, [duration])
+  return (
+    <div className="space-y-4" aria-label="Upload audio">
+      <div
+        onDragOver={(e) => e.preventDefault()}
+        onDrop={handleDrop}
+        className="border-2 border-dashed rounded-lg p-6 text-center hover:bg-muted/50"
+      >
+        <div className="flex flex-col items-center gap-2">
+          <Upload />
+          <p className="text-sm text-muted-foreground">Drag and drop WAV/MP3/M4A here or click to browse</p>
+          <input
+            type="file"
+            accept="audio/wav, audio/mpeg, audio/mp4, audio/x-m4a, audio/aac"
+            onChange={handleBrowse}
+            className="mt-2"
+          />
+        </div>
+      </div>
+      {file && (
+        <div className="text-sm bg-secondary text-secondary-foreground rounded-md p-3 flex flex-wrap gap-4">
+          <span className="font-medium">{file.name}</span>
+          <span>Size: {formatBytes(file.size)}</span>
+          <span>Duration: {durationText}</span>
+        </div>
+      )}
+      <div className="flex justify-end">
+        <button
+          disabled={disabled}
+          onClick={() => file && startRun('audio', { file })}
+          className={`inline-flex items-center gap-2 px-4 py-2 rounded-md ${disabled ? 'bg-muted text-muted-foreground' : 'bg-primary text-primary-foreground hover:opacity-90'}`}
+        >
+          <Play size={16} /> Run
+        </button>
+      </div>
+    </div>
+  )
+}

ui/claimcheck-ui/src/components/index.ts ADDED Viewed

	@@ -0,0 +1,10 @@

+export * from './Header'
+export * from './Stepper'
+export * from './UploadPanel'
+export * from './TranscriptPanel'
+export * from './SettingsPanel'
+export * from './ResultsSummary'
+export * from './ClaimsTable'
+export * from './EvidenceDrawer'
+export * from './TranscriptViewer'
+export * from './RunHistory'

ui/claimcheck-ui/src/env.d.ts ADDED Viewed

	@@ -0,0 +1,9 @@

+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_API_BASE?: string
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

ui/claimcheck-ui/src/index.css ADDED Viewed

	@@ -0,0 +1,74 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.75rem;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+  }
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

ui/claimcheck-ui/src/lib/api.ts ADDED Viewed

	@@ -0,0 +1,40 @@

+import axios from 'axios'
+import type { CallReport } from '@/lib/types'
+const baseURL = import.meta.env.VITE_API_BASE ?? 'http://127.0.0.1:8000'
+export const api = axios.create({
+  baseURL,
+  timeout: 120000,
+})
+export type Health = {
+  ok: boolean
+  watsonx: boolean
+  stt: boolean
+  models?: Record<string, any>
+}
+export async function health(): Promise<Health> {
+  const { data } = await api.get('/health/ibm')
+  return data
+}
+export async function rebuildKb(): Promise<{ ok: boolean }> {
+  const { data } = await api.post('/kb/rebuild')
+  return data
+}
+export async function processAudio(file: File): Promise<CallReport> {
+  const form = new FormData()
+  form.append('file', file)
+  const { data } = await api.post('/process-audio', form, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  })
+  return data
+}
+export async function processTranscript(text: string): Promise<CallReport> {
+  const { data } = await api.post('/process-transcript', { text })
+  return data
+}

ui/claimcheck-ui/src/lib/types.ts ADDED Viewed

	@@ -0,0 +1,45 @@

+export type Claim = {
+  id: string
+  text: string
+  speaker?: string | null
+  start?: number
+  end?: number
+  confidence?: number
+}
+export type Evidence = {
+  doc_id: string
+  source?: string
+  snippet: string
+  score?: number
+  metadata?: Record<string, any>
+}
+export type VerdictLabel = 'supported' | 'refuted' | 'insufficient'
+export type Verdict = {
+  claim_id: string
+  label: VerdictLabel
+  confidence?: number
+  best_evidence_id?: string
+  rationale?: string
+}
+export type CallReport = {
+  call_summary: string
+  action_items: string[]
+  claim_table: { claim: string; status: string; evidence_source?: string }[]
+  claims: Claim[]
+  evidence: Evidence[]
+  verdicts: Verdict[]
+}
+export type InputKind = 'audio' | 'transcript' | 'sample'
+export type RunRecord = {
+  id: string
+  startedAt: number
+  inputKind: InputKind
+  report?: CallReport
+  error?: string
+}

ui/claimcheck-ui/src/lib/utils.ts ADDED Viewed

	@@ -0,0 +1,49 @@

+import type { CallReport, VerdictLabel } from '@/lib/types'
+export function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`
+}
+export function verdictColor(label: VerdictLabel): string {
+  switch (label) {
+    case 'supported':
+      return 'bg-supported/15 text-supported border-supported/30'
+    case 'refuted':
+      return 'bg-refuted/15 text-refuted border-refuted/30'
+    default:
+      return 'bg-insufficient/15 text-insufficient border-insufficient/30'
+  }
+}
+export function confidencePercent(v?: number): number {
+  if (!v && v !== 0) return 0
+  const pct = Math.max(0, Math.min(1, v)) * 100
+  return Math.round(pct)
+}
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch {
+    return false
+  }
+}
+export function downloadJSON(report: CallReport, filename = 'call_report.json') {
+  const blob = new Blob([JSON.stringify(report, null, 2)], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  a.click()
+  URL.revokeObjectURL(url)
+}
+export function wordCount(text: string): number {
+  return (text.trim().match(/\S+/g) || []).length
+}

ui/claimcheck-ui/src/main.tsx ADDED Viewed

	@@ -0,0 +1,25 @@

+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+function useSystemPrefersDark(): boolean {
+  if (typeof window === 'undefined') return false
+  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+function initTheme() {
+  const saved = localStorage.getItem('cc_theme')
+  const root = document.documentElement
+  const prefersDark = useSystemPrefersDark()
+  const isDark = saved ? saved === 'dark' : prefersDark
+  root.classList.toggle('dark', isDark)
+}
+initTheme()
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

ui/claimcheck-ui/src/mocks/sampleReport.json ADDED Viewed

	@@ -0,0 +1,28 @@

+{
+  "call_summary": "Customer plans to expand to three additional teams next month. Pricing to remain the same. Risk of churn if support SLAs slip again.",
+  "action_items": [
+    "Confirm expansion timeline and seats",
+    "Share support SLA improvements",
+    "Send pricing confirmation"
+  ],
+  "claim_table": [
+    { "claim": "Customer will expand to 3 more teams next month", "status": "supported", "evidence_source": "kb:success_story_12" },
+    { "claim": "Pricing will increase next quarter", "status": "refuted", "evidence_source": "kb:pricing_policy" },
+    { "claim": "Customer will churn if SLAs slip again", "status": "supported", "evidence_source": "kb:retention_playbook" }
+  ],
+  "claims": [
+    { "id": "c1", "text": "Customer will expand to 3 more teams next month", "speaker": "Customer", "start": 12, "end": 18, "confidence": 0.92 },
+    { "id": "c2", "text": "Pricing will increase next quarter", "speaker": "Agent", "start": 33, "end": 40, "confidence": 0.71 },
+    { "id": "c3", "text": "Customer will churn if SLAs slip again", "speaker": "Customer", "start": 62, "end": 74, "confidence": 0.88 }
+  ],
+  "evidence": [
+    { "doc_id": "kb:success_story_12", "source": "Case Study", "snippet": "The expansion plan includes onboarding three additional teams in the following month.", "score": 0.83 },
+    { "doc_id": "kb:pricing_policy", "source": "Policy", "snippet": "Pricing remains stable for existing contracts through the next quarter.", "score": 0.79 },
+    { "doc_id": "kb:retention_playbook", "source": "Playbook", "snippet": "Customers citing SLA concerns are at churn risk; ensure proactive communication.", "score": 0.76 }
+  ],
+  "verdicts": [
+    { "claim_id": "c1", "label": "supported", "confidence": 0.86, "best_evidence_id": "kb:success_story_12", "rationale": "KB confirms planned expansion to three teams next month." },
+    { "claim_id": "c2", "label": "refuted", "confidence": 0.81, "best_evidence_id": "kb:pricing_policy", "rationale": "Policy states no price increase next quarter for existing contracts." },
+    { "claim_id": "c3", "label": "supported", "confidence": 0.74, "best_evidence_id": "kb:retention_playbook", "rationale": "Playbook indicates churn risk when SLAs slip; aligns with customer statement." }
+  ]
+}

ui/claimcheck-ui/src/store/appStore.ts ADDED Viewed

	@@ -0,0 +1,112 @@

+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { nanoid } from '@/store/nanoid'
+import type { CallReport, InputKind, RunRecord, VerdictLabel } from '@/lib/types'
+import { processAudio, processTranscript } from '@/lib/api'
+export type StepKey = 'ASR' | 'Claims' | 'Retrieval' | 'Verification' | 'Summary'
+export type StepStatus = 'idle' | 'running' | 'done' | 'error'
+export type UIState = {
+  tab: 0 | 1 | 2
+  filter: 'all' | VerdictLabel
+  evidenceOpen: boolean
+  selectedClaimId?: string
+}
+type Store = {
+  runs: RunRecord[]
+  currentRunId?: string
+  steps: Record<StepKey, StepStatus>
+  ui: UIState
+  setTab: (tab: 0 | 1 | 2) => void
+  setFilter: (f: 'all' | VerdictLabel) => void
+  openEvidence: (claimId: string) => void
+  closeEvidence: () => void
+  startRun: (kind: InputKind, payload: { file?: File; text?: string }) => Promise<void>
+  loadSample: () => Promise<void>
+  loadFromStorage: () => void
+  selectRun: (id: string) => void
+}
+const initialSteps: Record<StepKey, StepStatus> = {
+  ASR: 'idle',
+  Claims: 'idle',
+  Retrieval: 'idle',
+  Verification: 'idle',
+  Summary: 'idle',
+}
+export const useAppStore = create<Store>()(
+  persist(
+    (set, get) => ({
+      runs: [],
+      currentRunId: undefined,
+      steps: initialSteps,
+      ui: { tab: 0, filter: 'all', evidenceOpen: false },
+      setTab: (tab) => set((s) => ({ ui: { ...s.ui, tab } })),
+      setFilter: (filter) => set((s) => ({ ui: { ...s.ui, filter } })),
+      openEvidence: (selectedClaimId) => set((s) => ({ ui: { ...s.ui, evidenceOpen: true, selectedClaimId } })),
+      closeEvidence: () => set((s) => ({ ui: { ...s.ui, evidenceOpen: false, selectedClaimId: undefined } })),
+      async startRun(kind, payload) {
+        const id = nanoid()
+        const startedAt = Date.now()
+        const newRun: RunRecord = { id, startedAt, inputKind: kind }
+        set((s) => ({ runs: [newRun, ...s.runs].slice(0, 5), currentRunId: id }))
+        // optimistic step progression
+        const audio = kind === 'audio'
+        set({ steps: {
+          ASR: audio ? 'running' : 'done',
+          Claims: 'idle',
+          Retrieval: 'idle',
+          Verification: 'idle',
+          Summary: 'idle',
+        } })
+        try {
+          let report: CallReport
+          if (kind === 'audio' && payload.file) {
+            report = await processAudio(payload.file)
+          } else if (kind === 'transcript' && payload.text) {
+            report = await processTranscript(payload.text)
+          } else {
+            throw new Error('Missing input')
+          }
+          // set done
+          set({ steps: { ASR: audio ? 'done' : 'done', Claims: 'done', Retrieval: 'done', Verification: 'done', Summary: 'done' } })
+          set((s) => ({ runs: s.runs.map((r) => (r.id === id ? { ...r, report } : r)) }))
+        } catch (err: any) {
+          set({ steps: { ...initialSteps, ASR: audio ? 'error' : 'done', Claims: 'error' } })
+          const message = err?.response?.data?.detail || err?.message || 'Failed to process request'
+          set((s) => ({ runs: s.runs.map((r) => (r.id === id ? { ...r, error: message } : r)) }))
+        }
+      },
+      async loadSample() {
+        const id = nanoid()
+        const startedAt = Date.now()
+        const newRun: RunRecord = { id, startedAt, inputKind: 'sample' }
+        set((s) => ({ runs: [newRun, ...s.runs].slice(0, 5), currentRunId: id }))
+        set({ steps: { ASR: 'done', Claims: 'done', Retrieval: 'done', Verification: 'done', Summary: 'done' } })
+        const data = await import('@/mocks/sampleReport.json')
+        const report = data.default
+        set((s) => ({ runs: s.runs.map((r) => (r.id === id ? { ...r, report } : r)) }))
+      },
+      loadFromStorage() {
+        // noop: handled by persist middleware rehydration
+      },
+      selectRun(id) {
+        set({ currentRunId: id })
+      },
+    }),
+    {
+      name: 'cc_runs',
+      partialize: (s) => ({ runs: s.runs, currentRunId: s.currentRunId }),
+    }
+  )
+)

ui/claimcheck-ui/src/store/nanoid.ts ADDED Viewed

	@@ -0,0 +1,10 @@

+const alphabet = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz-'
+export function nanoid(size = 12): string {
+  let id = ''
+  const bytes = crypto.getRandomValues(new Uint8Array(size))
+  for (let i = 0; i < size; i++) {
+    id += alphabet[bytes[i] & 63]
+  }
+  return id
+}

ui/claimcheck-ui/tailwind.config.ts ADDED Viewed

	@@ -0,0 +1,67 @@

+import type { Config } from 'tailwindcss'
+export default {
+  darkMode: ['class'],
+  content: [
+    './index.html',
+    './src/**/*.{ts,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        supported: '#16a34a',
+        refuted: '#dc2626',
+        insufficient: '#f59e0b',
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config

ui/claimcheck-ui/tsconfig.json ADDED Viewed

	@@ -0,0 +1,22 @@

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

ui/claimcheck-ui/tsconfig.node.json ADDED Viewed

	@@ -0,0 +1,10 @@

+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

ui/claimcheck-ui/vite.config.ts ADDED Viewed

	@@ -0,0 +1,16 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import path from 'path'
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  server: {
+    port: 5173,
+    host: true,
+  },
+})