Design system: dual-theme audit-grade frontend + /dashboard/kpis

[div0rce]

Summary

Applies the Sentinel design system (dual-theme, audit-grade) to the existing frontend/, and adds a real backend endpoint to power the dashboard KPI row. The product's real IA, react-router routes, typed API client, and Recharts are unchanged — only the visual layer changes (plus the new KPI feed). All sample data is synthetic.

Implemented from a design handoff after a plan-first review; the KPI row was explicitly scoped to a real endpoint rather than hardcoded numbers.

Backend — GET /dashboard/kpis

A new endpoint returning four operational KPIs, all derived from real rows:

• Docs ingested — total, + count in the last 24h.
• Auto-approved rate — share of workflow items auto-approved, with a delta in percentage points (last-24h vs preceding-24h cohort).
• Avg confidence — mean of every per-field confidence value, with a 24h-vs-prior delta.
• SLA at risk — items past the threshold over the needs-review total (reuses /sla).

24h deltas are emitted only when a comparison window has data (otherwise null/flat) — no fabricated numbers or deltas, per the project's no-fabrication rule. generated_at is a real UTC timestamp so the dashboard footnote shows an honest refresh time. The endpoint server-formats display/delta_display strings (UI renders verbatim) and also exposes raw value/delta for stable assertions.

Frontend — design system

• Token layer lifted into styles.css: :root (dark, default) + [data-theme="light"]. Every surface/text role is a CSS variable, so switching theme only remaps tokens.
• Theme toggle persisted to localStorage["sentinel-theme"], with an inline pre-paint script in index.html to avoid a flash. Default dark.
• IBM Plex Sans/Mono self-hosted via @fontsource (latin subset → offline-safe, CI-friendly); lucide-react for the small fixed icon set.
• Header / Query / Review / Dashboard restyled to the kit specs (themed wordmark, icon nav as router links, citation rails, cited/refused result cards, code-chip review rows with an audit-id flash, KPI grid + footnote).
• Recharts kept and restyled with token var() fills + per-bar <Cell> colors (confidence by bucket, SLA by age band), so charts re-theme live with the toggle.

Data-honesty notes

• The Review row renders only fields the /review payload returns. The prototype's schema.field/value/confidence are extraction-level details absent from the queue API, so they're not invented.
• The refusal card surfaces the API's real reason instead of a hardcoded threshold string.

Test impact

• Backend: +4 KPI tests (empty corpus, value/formatting, auto-approved delta, threshold validation) and an extended frontend-contract shape test.
• Frontend: Query heading matchers relaxed to substrings (headings now lead with a status badge); App test gains a /dashboard/kpis fetch-stub branch; Review test asserts the audit-event id surfaces in the flash.

Verification

make check is green locally:

• Backend: 201 pytest passed; ruff + mypy clean.
• Frontend: 7 Vitest passed; tsc -b --noEmit clean; vite build succeeds. Dashboard stays lazy-loaded (Recharts in its own vendor chunk).

Notes / out of scope

• No changes to retrieval, extraction, workflow, audit, or deploy surfaces.
• Backend logic unchanged except the additive KPI endpoint.

All sample and benchmark data is synthetic.

https://claude.ai/code/session_01Q6uP1XdiuNcMiHmtXCJfed

---

Generated by Claude Code

[div0rce]

@codex review

[chatgpt-codex-connector]

Codex Review: Didn't find any major issues. Swish!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".