commitea/docs/design/ui_kits/app

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).