Files
commitea/docs/design/ui_kits/app/README.md
Christian LeDoux 7a5cacc54c Scaffold CommiTea: yarn workspaces, Electron shell, core label schema, design system
- apps/desktop: electron-vite + React + Tailwind mapped onto design tokens
  (preflight off; tokens/base.css owns the reset); boots to a Reginald
  placeholder proving fonts/tokens/core wiring
- packages/core: pure TS; gitea label schema (est/*, p/*, deadline/hard)
  with pessimistic conflict resolution + 15 unit tests
- docs/design: full design handoff (tokens, 16 component contracts,
  interactive 14-screen prototype, Reginald voice rules)
- docs/PLAN.md: product plan (purity rule, pm-state repo, deterministic
  scheduler + Monte Carlo, directive log)
- Deliberate deviation from novelpad stack: no ElectricSQL/PGlite — local
  store is a rebuildable cache over gitea REST/webhooks (better-sqlite3
  in main process, arriving in P1)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-07 20:42:46 -04:00

23 lines
4.0 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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