docs: add web ui design plan and phase 8 tasks

Author: sanmaxdev

TASKS.md

@@ -198,6 +198,54 @@ Status legend: `[ ]` todo, `[x]` done, `[~]` in progress, `[!]` blocked
 
 ---
 
+## Phase 8 - Web UI (design: [UI_PLAN.md](UI_PLAN.md))
+
+### UI-0 Foundation
+- [ ] **P8-01** `frontend/` workspace: Vite, React 18, TypeScript strict, Tailwind v4, shadcn/ui; ESLint + Prettier aligned with repo style
+- [ ] **P8-02** Design tokens from UI_PLAN §5 (color, type, spacing) with dark mode as a first-class theme; self-hosted Inter + JetBrains Mono
+- [ ] **P8-03** FastAPI server in `ragproof/ui/` behind the `ragproof[ui]` extra; binds 127.0.0.1 by default, warning on `--host` override
+- [ ] **P8-04** `ragproof ui` command: starts server, opens browser, `--dev` proxies Vite; clear install hint when the extra is missing
+- [ ] **P8-05** Build pipeline: CI builds the bundle into `ragproof/ui/static/`, wheel ships it, Python jobs never need Node
+- [ ] **P8-06** Bundle scan test: no external URLs in built assets; CSP `default-src 'self'`
+- [ ] **P8-07** UI CI job: typecheck, lint, Vitest, build
+
+### UI-1 Runs and Run detail
+- [ ] **P8-08** Read API: `/api/meta`, `/api/projects`, paginated `/api/runs`, `/api/runs/{ref}` reusing `reports/data.py`
+- [ ] **P8-09** Runs table: status dot, label, relative time, case counts, pinned ScoreCells with micro-distributions, delta vs selected baseline
+- [ ] **P8-10** Column picker persisted per project; two-row select enables Compare
+- [ ] **P8-11** Run detail Overview: header chips (judge, hashes, cost, cache), metric cards with histograms and threshold lines, worst-cases strip
+- [ ] **P8-12** Metadata tab; polling for running runs
+- [ ] **P8-13** Loading, empty (teaches the CLI command), error, and partial states on every screen
+- [ ] **P8-14** Consistency test: `/api/runs/{ref}` equals CLI `--json` on the same store
+
+### UI-2 Case triage
+- [ ] **P8-15** `/api/runs/{ref}/cases` with filters, sort, cursor pagination; `/cases/{key}` detail
+- [ ] **P8-16** Virtualized cases grid with metric columns, worst-first sort, status/kind filters
+- [ ] **P8-17** Routed case side panel: question, answer, retrieved chunks with cited highlighted, per-claim verdict checklist from judge_raw, raw JSON CodeBlock
+- [ ] **P8-18** Keyboard triage loop: j/k, Esc, deep links restore filter + selection
+
+### UI-3 Compare and Trends
+- [ ] **P8-19** `/api/compare` + Compare screen: delta table with CI whiskers, mixed-judge blocking banner, dataset mismatch warning
+- [ ] **P8-20** Changed-cases diff grid, worst regression first; split case view baseline vs candidate
+- [ ] **P8-21** `/api/trends` + Trends screen: mean per run, 0-1 domain, threshold lines, verdict-colored points, click-through to runs
+
+### UI-4 Gate, Datasets, Calibration
+- [ ] **P8-22** Gate tab rendering GateOutcome via `/api/runs/{ref}/gate`; identical verdicts to the CLI asserted in CI
+- [ ] **P8-23** Datasets list and detail (generation metadata, case browser, runs over dataset)
+- [ ] **P8-24** Calibration screen with agreement bars vs thresholds
+- [ ] **P8-25** Command palette (Ctrl/Cmd-K): jump to run, case, screen
+
+### UI-5 Polish and release
+- [ ] **P8-26** A11y pass: AA contrast both themes, focus order, reduced motion, no color-only status
+- [ ] **P8-27** Performance pass against a 1,000-run seeded store; bundle under 300KB gzipped, route code-splitting
+- [ ] **P8-28** Playwright smoke in CI: boot `ragproof ui`, walk Runs -> Run -> Case -> Compare
+- [ ] **P8-29** `docs/ui.md`; README screenshots and GIF
+- [ ] **P8-30** Ship: wheel includes bundle, `ragproof[ui]` extra documented, tag `phase-8-complete`
+
+**Acceptance:** `ragproof ui` gives a keyboard-operable, dark-mode-native dashboard whose every number matches the CLI on the same store; quality bar in UI_PLAN §8 met.
+
+---
+
 ## Cross-cutting (every phase, every PR)
 
 - [ ] Conventional commits; small reviewable diffs