# CommiTea app — UI kit

High-fidelity recreation of the CommiTea Electron app (one window). Built from the product plan (`uploads/commitea.md`); no production UI existed yet, so this kit **is** the reference design.

Surfaces (per the plan's UI section):

- **Onboarding / first run** ("First run" in the nav) — full-window takeover, no rail or chat: Reginald introduces himself → connect Gitea (test connection) → choose the managed repo → propose-approve bootstrap (pm-state sidecar, label schema, webhook) ending at "Start a capture".
- **Standup** — the morning ritual as a typeset letter from Reginald: overnight drift report (with mono consequence deltas), today's plan per person, and the stale-blocker nag. Sections settle in once, 320ms, reduced-motion-safe.
- **Morning service (Focus)** — Now/Next/Later focus cards with the scheduler's pick and Reginald's one-line rationale; burn-up chart with Monte Carlo forecast cone.
- **Board** — kanban over the inferred lifecycle (diagnosis → triage → steeping → review → done), with Gantt and Dependencies drill-in tabs: the Gantt shows scheduler-derived bars with 80% forecast tails and Beta's landing band; Dependencies is a layered DAG with the critical path in spruce.
- **Issue detail** (click any issue anywhere) — the purity rule made visible: human intent from gitea on the left (description, comments, composer that "writes to gitea, as you"), machine-derived sidecar on the right (inferred lifecycle timeline from git events, per-issue forecast, dependencies) with the provenance note "Lives in pm-state. Your repo never sees any of it."
- **Inbox** — the bell Reginald only rings when it matters: drift, mentions, nags, reviews, system events — day-grouped, filter tabs, unread dots with a live count in the rail; rows navigate to the issue or directive concerned. "Nothing here rings twice."
- **Directives** — the append-only ledger (who/when/what/why) plus the consequence diff: scheduler re-runs after a directive and Reginald presents before → after deltas for approval ("Make it so" / Amend / Withdraw). Also reachable from the history icon in Reginald's panel.
- **Runway** — capacity vs milestone dates; forecast ranges, never point dates. Its calibration card drills into the **Calibration report**: estimate-vs-actual scatter ("the shape of hope") with honest-diagonal and fitted ×1.18 line, bias by estimate label, per-person bias, and the effect on forecast bands. Milestone rows drill into **Milestone detail**: stats strip (scope / done / forecast / drift), burn-up cone, and the issue list grouped by lifecycle state.
- **Capture** — the plan's headline goal: braindump → interview → approved ticket set in under 2:00, with a running clock. Reginald asks only what he can't infer; drafts build in "the tray" as you answer; review shows the consequence (cone shift) before "Approve all"; filing touches labels only.
- **Reginald's panel** (right side, always present) — chat is the write-path; UI is the read-path. Reginald speaks in upright Caslon serif.

- **States** (nav, bottom) — gallery of empty & trouble states as wired in the app: empty pot / nothing scheduled / no directives / search miss; gitea-unreachable banner, model-offline chat state, webhook poll-fallback, failed first reconcile. Two are live: board search shows the real empty state, and clicking the rail's connection dot toggles offline mode (banner app-wide, Reginald queues writes, composer disabled).

Interactive: nav switching, issue click → detail page, chat replies (canned), light/dark theme toggle, offline simulation.

Files: `index.html` (entry), `Shell.jsx` (rail + layout), `OnboardingScreen.jsx`, `StandupScreen.jsx`, `FocusScreen.jsx`, `InboxScreen.jsx`, `BoardScreen.jsx`, `DepsGraph.jsx`, `GanttView.jsx`, `RunwayScreen.jsx`, `CalibrationScreen.jsx`, `MilestoneScreen.jsx`, `CaptureScreen.jsx`, `DirectivesScreen.jsx`, `IssueScreen.jsx`, `SettingsScreen.jsx`, `StatesGallery.jsx`, `ChatPanel.jsx`, `Chart.jsx` (burn-up cone SVG), `data.js` (fixture data).