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>

docs/design/ui_kits/app/BoardScreen.js.txt

@@ -0,0 +1,80 @@
+// Board — kanban over inferred lifecycle, with Gantt/Dependencies stubs
+function BoardScreen({ onOpenIssue }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Card, Tag, Badge, Tabs, IconButton, Input, Icon } = DS;
+  const d = window.CT_DATA;
+  const [tab, setTab] = React.useState('board');
+  const [query, setQuery] = React.useState('');
+  const q = query.trim().toLowerCase();
+  const filtered = d.columns.map((c) => ({ ...c, issues: q ? c.issues.filter((i) => (i.title + ' #' + i.id).toLowerCase().includes(q)) : c.issues }));
+  const anyMatch = filtered.some((c) => c.issues.length > 0);
+  const openCount = d.columns.reduce((n, c) => n + (c.id === 'done' ? 0 : c.issues.length), 0);
+
+  const IssueCard = ({ issue }) => (
+    <div
+      onClick={() => onOpenIssue(issue)}
+      style={{
+        background: 'var(--surface-card)', border: '1px solid var(--line-1)',
+        borderRadius: 'var(--radius-2)', padding: '10px 12px', cursor: 'pointer',
+        boxShadow: 'var(--shadow-1)', display: 'flex', flexDirection: 'column', gap: 8,
+      }}
+      onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--line-2)'; }}
+      onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--line-1)'; }}
+    >
+      <div style={{ font: 'var(--text-small)', fontWeight: 500, color: 'var(--ink-1)' }}>{issue.title}</div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+        <span style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)' }}>#{issue.id}</span>
+        {issue.labels.map((l) => <Tag key={l} label={l} style={{ transform: 'scale(0.95)', transformOrigin: 'left center' }} />)}
+        {issue.days ? <span style={{ font: '400 11px var(--font-mono)', color: 'var(--warn)' }}>{issue.days}</span> : null}
+        {issue.pr ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, font: '400 11px var(--font-mono)', color: 'var(--info)' }}><Icon name="git-pull-request" size={12} />{issue.pr}</span> : null}
+        <span style={{
+          marginLeft: 'auto', width: 20, height: 20, borderRadius: '50%',
+          background: 'var(--spruce-2)', color: 'var(--accent-text)',
+          font: '600 9px/20px var(--font-sans)', textAlign: 'center', flexShrink: 0,
+        }}>{issue.who}</span>
+      </div>
+    </div>
+  );
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 14, height: '100%', minHeight: 0 }}>
+      <header style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
+        <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0, whiteSpace: 'nowrap' }}>The pot</h1>
+        <div style={{ width: 240 }}><Input icon="search" placeholder="Search the pot…" value={query} onChange={(e) => setQuery(e.target.value)} /></div>
+      </header>
+      <Tabs
+        items={[
+          { id: 'board', label: 'Board', icon: 'square-kanban', count: openCount },
+          { id: 'gantt', label: 'Gantt', icon: 'chart-no-axes-gantt' },
+          { id: 'deps', label: 'Dependencies', icon: 'network' },
+        ]}
+        active={tab} onChange={setTab}
+      />
+      {tab === 'board' ? (
+        anyMatch ? (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12, alignItems: 'start', flex: 1, minHeight: 0, overflow: 'auto' }}>
+          {filtered.map((col) => (
+            <div key={col.id} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '2px 2px 4px', borderBottom: '1px solid var(--line-1)', whiteSpace: 'nowrap' }}>
+                <span style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-2)' }}>{col.label}</span>
+                <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}>{col.issues.length}</span>
+              </div>
+              {col.issues.map((i) => <IssueCard key={i.id} issue={i} />)}
+            </div>
+          ))}
+        </div>
+        ) : (
+          <div style={{ flex: 1, border: '1px dashed var(--line-2)', borderRadius: 'var(--radius-3)' }}>
+            <window.EmptyState icon="search" title="Nothing by that name"
+              line={`The pot holds ${d.columns.reduce((n, c) => n + c.issues.length, 0)} issues; none of them answer to “${query.trim()}”.`} />
+          </div>
+        )
+      ) : tab === 'deps' ? (
+        <window.DepsGraph onOpenIssue={onOpenIssue} />
+      ) : (
+        <window.GanttView onOpenIssue={onOpenIssue} />
+      )}
+    </div>
+  );
+}
+Object.assign(window, { BoardScreen });

docs/design/ui_kits/app/CalibrationScreen.js.txt

@@ -0,0 +1,128 @@
+// Calibration report — estimate-vs-actual evidence behind the cones
+function CalibrationScreen({ onBack }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Card, Badge, Icon } = DS;
+  const c = window.CT_DATA.calibration;
+
+  // scatter chart geometry
+  const W = 420, H = 300, pad = { l: 36, r: 16, t: 14, b: 30 };
+  const maxD = 9;
+  const X = (d) => pad.l + (d / maxD) * (W - pad.l - pad.r);
+  const Y = (d) => H - pad.b - (d / maxD) * (H - pad.t - pad.b);
+
+  const BiasBar = ({ bias }) => {
+    if (bias == null) return <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}>n too small</span>;
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1 }}>
+        <div style={{ position: 'relative', flex: 1, height: 10, background: 'var(--paper-2)', borderRadius: 3 }}>
+          <div style={{ position: 'absolute', left: '30%', top: -2, bottom: -2, width: 1.5, background: 'var(--line-2)' }}></div>
+          <div style={{
+            position: 'absolute', left: '30%', top: 1.5, height: 7, width: `${Math.min(bias * 1.6, 66)}%`,
+            background: bias > 15 ? 'var(--warn)' : 'var(--ok)', borderRadius: '0 3px 3px 0', opacity: 0.75,
+          }}></div>
+        </div>
+        <span style={{ font: '500 11.5px var(--font-mono)', color: bias > 15 ? 'var(--warn)' : 'var(--ok)', width: 42, textAlign: 'right' }}>+{bias}%</span>
+      </div>
+    );
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <div>
+        <button type="button" onClick={onBack} style={{
+          display: 'inline-flex', alignItems: 'center', gap: 6, background: 'none', border: 'none',
+          font: '500 12.5px var(--font-sans)', color: 'var(--ink-2)', cursor: 'pointer', padding: '2px 0', marginBottom: 10,
+        }}>
+          <Icon name="arrow-left" size={14} /> Runway
+        </button>
+        <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
+          <div>
+            <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Calibration</h1>
+            <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '6px 0 0', whiteSpace: 'nowrap' }}>{c.n} closed issues with estimates · evidence, not opinion</p>
+          </div>
+          <Badge tone="ok" dot>curve active · n ≥ 20</Badge>
+        </header>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, alignItems: 'start' }}>
+        {/* scatter */}
+        <Card overline="Estimate vs actual" title="The shape of hope" jade>
+          <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ display: 'block' }}>
+            {[1, 3, 5, 8].map((d) => (
+              <React.Fragment key={d}>
+                <line x1={X(d)} x2={X(d)} y1={pad.t} y2={H - pad.b} stroke="var(--line-1)" strokeWidth="1" />
+                <text x={X(d)} y={H - 12} textAnchor="middle" style={{ font: '400 10px var(--font-mono)', fill: 'var(--ink-3)' }}>{d}d</text>
+                <line x1={pad.l} x2={W - pad.r} y1={Y(d)} y2={Y(d)} stroke="var(--line-1)" strokeWidth="1" />
+                <text x={pad.l - 6} y={Y(d) + 3} textAnchor="end" style={{ font: '400 10px var(--font-mono)', fill: 'var(--ink-3)' }}>{d}d</text>
+              </React.Fragment>
+            ))}
+            {/* perfect line */}
+            <line x1={X(0)} y1={Y(0)} x2={X(maxD)} y2={Y(maxD)} stroke="var(--line-2)" strokeWidth="1.2" strokeDasharray="4 4" />
+            <text x={X(7.6)} y={Y(7.6) + 14} style={{ font: '400 10px var(--font-mono)', fill: 'var(--ink-3)' }}>honest</text>
+            {/* fit */}
+            <line x1={X(0)} y1={Y(0)} x2={X(maxD / c.fit)} y2={Y(maxD)} stroke="var(--cone-line)" strokeWidth="1.6" />
+            <text x={X(4.1)} y={Y(4.1 * c.fit) - 8} style={{ font: '500 10px var(--font-mono)', fill: 'var(--cone-line)' }}>you · ×{c.fit}</text>
+            {/* points */}
+            {c.scatter.map(([e, a], i) => (
+              <circle key={i} cx={X(e) + ((i % 5) - 2) * 3} cy={Y(a)} r="3" fill="var(--accent)" opacity="0.55" />
+            ))}
+          </svg>
+          <p style={{ font: 'var(--text-caption)', color: 'var(--ink-3)', margin: '8px 0 0' }}>estimated (x) vs actual days (y) · actuals inferred from git events, never tracked</p>
+        </Card>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+          {/* per-label bias */}
+          <Card overline="Bias by estimate label" flush>
+            <div>
+              {c.labels.map((r, i) => (
+                <div key={r.label} style={{
+                  display: 'flex', alignItems: 'center', gap: 14, padding: '10px 20px',
+                  borderTop: i === 0 ? 'none' : '1px solid var(--line-1)',
+                }}>
+                  <span style={{ font: '500 11.5px var(--font-mono)', color: 'var(--ink-1)', width: 52 }}>{r.label}</span>
+                  <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', width: 66 }}>n={r.n} · {r.median}</span>
+                  <BiasBar bias={r.bias} />
+                </div>
+              ))}
+            </div>
+          </Card>
+
+          {/* per-person */}
+          <Card overline="By person" flush>
+            <div>
+              {c.people.map((p, i) => (
+                <div key={p.who} style={{
+                  display: 'flex', alignItems: 'center', gap: 12, padding: '11px 20px',
+                  borderTop: i === 0 ? 'none' : '1px solid var(--line-1)',
+                }}>
+                  <span style={{
+                    width: 24, height: 24, borderRadius: '50%', background: 'var(--spruce-2)', color: 'var(--accent-text)',
+                    font: '600 9px/24px var(--font-sans)', textAlign: 'center', flexShrink: 0,
+                  }}>{p.who.split(' ').map((w) => w[0]).join('')}</span>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <span style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)' }}>{p.who}</span>
+                    <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}> · n={p.n} · {p.note}</span>
+                  </div>
+                  <span style={{ font: '500 12px var(--font-mono)', color: p.bias > 15 ? 'var(--warn)' : 'var(--ok)' }}>+{p.bias}%</span>
+                </div>
+              ))}
+            </div>
+          </Card>
+
+          {/* effect on forecasts */}
+          <Card overline="What this does to your forecasts">
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
+              <span style={{ font: '400 12.5px var(--font-mono)', color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>{c.effect.raw}</span>
+              <Icon name="arrow-right" size={14} style={{ color: 'var(--ink-3)' }} />
+              <span style={{ font: '500 12.5px var(--font-mono)', color: 'var(--ink-1)', whiteSpace: 'nowrap' }}>{c.effect.banded}</span>
+            </div>
+            <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: '10px 0 0' }}>
+              You are not bad at estimating; you are optimistic in a very stable way. Stable, I can work with.
+            </p>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
+Object.assign(window, { CalibrationScreen });

docs/design/ui_kits/app/CaptureScreen.js.txt

@@ -0,0 +1,185 @@
+// Capture interview — braindump → interview → approved ticket set (< 2 min)
+function CaptureScreen({ onDone }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Button, Card, Tag, Badge, Select, Icon } = DS;
+
+  const [stage, setStage] = React.useState('dump'); // dump | interview | review | filed
+  const [dump, setDump] = React.useState(
+    'auth is flaky \u2014 token refresh dies silently, sometimes session storage goes stale. ' +
+    'also the webhook debounce thing keeps double-firing. and we owe docs for auth setup'
+  );
+  const [qi, setQi] = React.useState(0);
+  const [log, setLog] = React.useState([]);
+  const [split, setSplit] = React.useState(null);
+  const [webEst, setWebEst] = React.useState(null);
+  const [secs, setSecs] = React.useState(0);
+
+  const running = stage === 'interview' || stage === 'review';
+  React.useEffect(() => {
+    if (!running) return;
+    const t = setInterval(() => setSecs((s) => s + 1), 1000);
+    return () => clearInterval(t);
+  }, [running]);
+  const clock = `${Math.floor(secs / 60)}:${String(secs % 60).padStart(2, '0')}`;
+
+  const QUESTIONS = [
+    { q: 'The auth work \u2014 one ticket, or shall I split token refresh from session storage? They fail differently.',
+      chips: ['One ticket', 'Split them'], set: (a) => setSplit(a === 'Split them') },
+    { q: 'The webhook double-fire \u2014 how long? I should mention your "quick" has averaged two days.',
+      chips: ['est/1d', 'est/2d', 'est/3d'], set: (a) => setWebEst(a) },
+    { q: 'Milestone Beta, I presume? It has room, provided the auth work stays under four days.',
+      chips: ['Beta', 'New milestone'], set: () => {} },
+  ];
+
+  const answer = (a) => {
+    QUESTIONS[qi].set(a);
+    setLog((l) => [...l, { q: QUESTIONS[qi].q, a }]);
+    if (qi + 1 < QUESTIONS.length) setQi(qi + 1);
+    else setStage('review');
+  };
+
+  // draft tickets build as the interview progresses
+  const tickets = [];
+  if (split === true) {
+    tickets.push({ title: 'Token refresh: retry with backoff', est: 'est/2d', p: 'p/2' });
+    tickets.push({ title: 'Session storage: stale reads on wake', est: 'est/1d', p: 'p/3' });
+  } else if (split === false) {
+    tickets.push({ title: 'Auth: token refresh + session storage', est: 'est/3d', p: 'p/2' });
+  }
+  if (webEst) tickets.push({ title: 'Webhook debounce: double-fire guard', est: webEst, p: 'p/1', dep: 'blocked by auth work' });
+  if (stage === 'review' || stage === 'filed') {
+    tickets.push({ title: 'Docs: auth setup guide', est: 'est/1d', p: 'p/4', byReginald: true });
+  }
+  const totalDays = tickets.reduce((n, t) => n + parseInt(t.est.replace('est/', '')), 0);
+
+  const estOptions = ['est/1d', 'est/2d', 'est/3d', 'est/5d', 'est/8d'].map((v) => ({ value: v, label: v }));
+  const pOptions = ['p/1', 'p/2', 'p/3', 'p/4'].map((v) => ({ value: v, label: v }));
+
+  const Tray = ({ editable }) => (
+    <Card overline="The tray" title={tickets.length ? `${tickets.length} draft${tickets.length > 1 ? 's' : ''}` : 'Empty, for now'} flush>
+      <div>
+        {tickets.length === 0 ? (
+          <p style={{ font: 'var(--text-agent)', color: 'var(--ink-3)', margin: 0, padding: '14px 20px 18px' }}>
+            Tickets appear here as we talk.
+          </p>
+        ) : tickets.map((t, i) => (
+          <div key={t.title} style={{
+            display: 'flex', flexDirection: 'column', gap: 8,
+            padding: '12px 20px', borderTop: i === 0 ? 'none' : '1px solid var(--line-1)',
+          }}>
+            <div style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)' }}>{t.title}</div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+              {editable ? (
+                <>
+                  <Select options={estOptions} defaultValue={t.est} style={{ width: 96 }} />
+                  <Select options={pOptions} defaultValue={t.p} style={{ width: 76 }} />
+                </>
+              ) : (
+                <>
+                  <Tag label={t.est} />
+                  <Tag label={t.p} />
+                </>
+              )}
+              {t.dep ? <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="network" size={11} />{t.dep}</span> : null}
+              {t.byReginald ? <Badge tone="jade">added by Reginald</Badge> : null}
+            </div>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
+        <div>
+          <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Capture</h1>
+          <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '6px 0 0', whiteSpace: 'nowrap' }}>braindump → approved tickets</p>
+        </div>
+        {stage !== 'dump' ? (
+          <div style={{ textAlign: 'right' }}>
+            <div style={{ font: '400 24px/1 var(--font-serif-display)', color: secs > 120 ? 'var(--warn)' : 'var(--ink-1)' }}>{clock}</div>
+            <div style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', marginTop: 4 }}>budget 2:00</div>
+          </div>
+        ) : null}
+      </header>
+
+      {stage === 'dump' ? (
+        <Card overline="Braindump" title="Tell me what you're planning" jade>
+          <textarea
+            value={dump}
+            onChange={(e) => setDump(e.target.value)}
+            rows={5}
+            style={{
+              width: '100%', resize: 'vertical', font: 'var(--text-body)', color: 'var(--ink-1)',
+              background: 'var(--paper-0)', border: '1px solid var(--line-2)', borderRadius: 'var(--radius-2)',
+              padding: '10px 12px', outline: 'none', lineHeight: 1.55,
+            }}
+          ></textarea>
+          <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: '10px 0 14px' }}>
+            Sentences, fragments, grievances — all welcome. I'll sort it into tickets and only ask what I can't infer.
+          </p>
+          <Button icon="sparkles" onClick={() => setStage('interview')}>Brew tickets</Button>
+        </Card>
+      ) : null}
+
+      {stage === 'interview' ? (
+        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 14, alignItems: 'start' }}>
+          <Card overline={`Interview \u00b7 ${qi + 1} of ${QUESTIONS.length}`} jade>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+              {log.map((e, i) => (
+                <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6, opacity: 0.66 }}>
+                  <span style={{ font: 'var(--text-agent)', color: 'var(--ink-2)' }}>{e.q}</span>
+                  <span style={{ alignSelf: 'flex-start', font: 'var(--text-small)', background: 'var(--paper-2)', borderRadius: 'var(--radius-round)', padding: '4px 11px' }}>{e.a}</span>
+                </div>
+              ))}
+              <p style={{ font: 'var(--text-agent-lg)', color: 'var(--ink-1)', margin: 0 }}>{QUESTIONS[qi].q}</p>
+              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                {QUESTIONS[qi].chips.map((c) => (
+                  <Button key={c} variant="secondary" size="sm" onClick={() => answer(c)}>{c}</Button>
+                ))}
+              </div>
+            </div>
+          </Card>
+          <Tray />
+        </div>
+      ) : null}
+
+      {stage === 'review' ? (
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 14, alignItems: 'start' }}>
+          <Card overline="Consequence" title={`${tickets.length} tickets \u00b7 ~${totalDays}d of work`} jade
+                footer={<>
+                  <Button onClick={() => setStage('filed')}>Approve all</Button>
+                  <Button variant="ghost" onClick={() => { setStage('dump'); setQi(0); setLog([]); setSplit(null); setWebEst(null); setSecs(0); }}>Discard</Button>
+                </>}>
+            <p style={{ font: 'var(--text-body)', margin: '0 0 8px' }}>
+              Beta's 80% window moves <span style={{ font: 'var(--text-data)' }}>Mar 3–12 → Mar 5–14</span>. Capacity absorbs the rest.
+            </p>
+            <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+              I added the docs ticket you mentioned and wired the dependency. Shall I make it so?
+            </p>
+          </Card>
+          <Tray editable />
+        </div>
+      ) : null}
+
+      {stage === 'filed' ? (
+        <Card jade style={{ maxWidth: 560 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-start' }}>
+            <span style={{ color: 'var(--ok)', display: 'inline-flex', alignItems: 'center', gap: 8, font: 'var(--text-title)' }}>
+              <Icon name="circle-check" size={22} /> Filed
+            </span>
+            <p style={{ font: 'var(--text-body)', margin: 0 }}>
+              {tickets.length} issues opened in gitea with <span style={{ font: 'var(--text-data)' }}>est/*</span> and <span style={{ font: 'var(--text-data)' }}>p/*</span> labels — nothing else touched.
+            </p>
+            <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+              Elapsed {clock} — under budget. No bot comments, no synthetic issues; your repo remains yours.
+            </p>
+            <Button iconRight="arrow-right" onClick={onDone}>To morning service</Button>
+          </div>
+        </Card>
+      ) : null}
+    </div>
+  );
+}
+Object.assign(window, { CaptureScreen });

docs/design/ui_kits/app/Chart.js.txt

@@ -0,0 +1,70 @@
+// Burn-up chart with Monte Carlo forecast cone — geometry, not decoration.
+function BurnUpCone({ width = 640, height = 220 }) {
+  const pad = { l: 34, r: 96, t: 16, b: 26 };
+  const W = width - pad.l - pad.r;
+  const H = height - pad.t - pad.b;
+  const x = (f) => pad.l + f * W;
+  const y = (f) => pad.t + (1 - f) * H;
+
+  // scope line (total work), actual completed, cone from today
+  const today = 0.58;
+  const actual = [[0, 0], [0.08, 0.05], [0.18, 0.13], [0.26, 0.16], [0.36, 0.27], [0.46, 0.38], [0.58, 0.47]];
+  const coneHi = [[0.58, 0.47], [0.72, 0.66], [0.86, 0.88], [0.95, 1.0]];
+  const coneLo = [[0.58, 0.47], [0.74, 0.58], [0.9, 0.74], [1.0, 0.86]];
+  const mid = [[0.58, 0.47], [0.76, 0.63], [0.92, 0.83], [1.0, 0.93]];
+  const pts = (arr) => arr.map(([a, b]) => `${x(a)},${y(b)}`).join(' ');
+  const cone = [...coneHi, ...[...coneLo].reverse()];
+
+  return (
+    <svg width="100%" viewBox={`0 0 ${width} ${height}`} style={{ display: 'block' }}>
+      {/* gridlines */}
+      {[0, 0.25, 0.5, 0.75, 1].map((f) => (
+        <line key={f} x1={pad.l} x2={width - pad.r} y1={y(f)} y2={y(f)}
+              stroke="var(--line-1)" strokeWidth="1" />
+      ))}
+      {/* scope */}
+      <line x1={pad.l} x2={width - pad.r} y1={y(1)} y2={y(1)} stroke="var(--line-2)" strokeWidth="1.5" />
+      <text x={pad.l} y={y(1) - 6} style={{ font: '400 10.5px var(--font-mono)', fill: 'var(--ink-3)' }}>scope · 42 issues</text>
+      {/* cone */}
+      <polygon points={pts(cone)} fill="var(--cone-fill)" />
+      <polyline points={pts(coneHi)} fill="none" stroke="var(--cone-line)" strokeWidth="1.2" strokeDasharray="3 3" />
+      <polyline points={pts(coneLo)} fill="none" stroke="var(--cone-line)" strokeWidth="1.2" strokeDasharray="3 3" />
+      <polyline points={pts(mid)} fill="none" stroke="var(--cone-line)" strokeWidth="1.4" />
+      {/* actual */}
+      <polyline points={pts(actual)} fill="none" stroke="var(--cone-actual)" strokeWidth="2" />
+      <circle cx={x(0.58)} cy={y(0.47)} r="3.5" fill="var(--cone-actual)" />
+      {/* today rule */}
+      <line x1={x(today)} x2={x(today)} y1={pad.t} y2={height - pad.b} stroke="var(--jade)" strokeWidth="1" />
+      <text x={x(today) + 5} y={pad.t + 10} style={{ font: '400 10.5px var(--font-mono)', fill: 'var(--jade-7)' }}>today</text>
+      {/* 80% band bracket */}
+      <line x1={x(0.95) + 4} x2={x(0.95) + 4} y1={y(1.0)} y2={y(0.86) + H * 0.14 * 0 + (y(0.86) - y(0.86))} stroke="none" />
+      <text x={width - pad.r + 10} y={y(0.95)} style={{ font: '500 11.5px var(--font-mono)', fill: 'var(--ink-1)' }}>80%</text>
+      <text x={width - pad.r + 10} y={y(0.95) + 14} style={{ font: '400 11px var(--font-mono)', fill: 'var(--ink-2)' }}>Mar 3–12</text>
+      {/* x labels */}
+      <text x={pad.l} y={height - 8} style={{ font: '400 10.5px var(--font-mono)', fill: 'var(--ink-3)' }}>Jan 6</text>
+      <text x={width - pad.r - 34} y={height - 8} style={{ font: '400 10.5px var(--font-mono)', fill: 'var(--ink-3)' }}>Mar 15</text>
+    </svg>
+  );
+}
+
+// Runway bar: milestone due date vs forecast range position
+function RunwayBar({ m }) {
+  const toneColor = m.tone === 'warn' ? 'var(--warn)' : 'var(--ok)';
+  const left = Math.max(0, (m.pos - m.spread / 2) * 100);
+  const w = Math.min(100 - left, m.spread * 100);
+  return (
+    <div style={{ position: 'relative', height: 22, background: 'var(--paper-2)', borderRadius: 4, overflow: 'hidden' }}>
+      <div style={{
+        position: 'absolute', left: `${left}%`, width: `${w}%`, top: 0, bottom: 0,
+        background: 'var(--cone-fill)', borderLeft: `1.5px solid ${toneColor}`, borderRight: `1.5px solid ${toneColor}`,
+      }}></div>
+      <div style={{
+        position: 'absolute', left: `${m.pos * 100}%`, top: 0, bottom: 0, width: 2, background: toneColor,
+      }}></div>
+      {/* due marker */}
+      <div style={{ position: 'absolute', left: 'calc(88% - 1px)', top: 0, bottom: 0, width: 2, background: 'var(--ink-1)' }}></div>
+    </div>
+  );
+}
+
+Object.assign(window, { BurnUpCone, RunwayBar });

docs/design/ui_kits/app/ChatPanel.js.txt

@@ -0,0 +1,98 @@
+// Agent panel — chat is the write-path
+function ChatPanel({ onOpenDirectives, offline }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Icon, IconButton } = DS;
+  const d = window.CT_DATA;
+  const [msgs, setMsgs] = React.useState(d.chat);
+  const [text, setText] = React.useState('');
+  const [thinking, setThinking] = React.useState(false);
+  const scrollRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [msgs, thinking]);
+
+  const send = () => {
+    const t = text.trim();
+    if (!t) return;
+    setMsgs((m) => [...m, { from: 'user', text: t }]);
+    setText('');
+    setThinking(true);
+    setTimeout(() => {
+      setThinking(false);
+      setMsgs((m) => [...m, { from: 'agent', text: d.cannedReply }]);
+    }, 900);
+  };
+
+  return (
+    <aside style={{
+      width: 330, flexShrink: 0, display: 'flex', flexDirection: 'column',
+      background: 'var(--surface-card)', borderLeft: '1px solid var(--line-1)', minHeight: 0,
+    }}>
+      <header style={{
+        display: 'flex', alignItems: 'center', gap: 8, padding: '14px 16px',
+        borderBottom: '1px solid var(--line-1)', flexShrink: 0,
+      }}>
+        <Icon name="sparkles" size={16} style={{ color: offline ? 'var(--ink-3)' : 'var(--jade)' }} />
+        <span style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)' }}>Reginald</span>
+        <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', marginLeft: 'auto' }}>{offline ? 'offline · queueing' : 'gemma-4b · local'}</span>
+        <IconButton icon="history" label="Directive log" size="sm" onClick={onOpenDirectives} />
+      </header>
+
+      <div ref={scrollRef} style={{ flex: 1, overflowY: 'auto', padding: 16, display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0 }}>
+        {msgs.map((m, i) => m.from === 'agent' ? (
+          <div key={i} style={{ font: 'var(--text-agent)', color: 'var(--ink-1)', lineHeight: 1.55 }}>{m.text}</div>
+        ) : (
+          <div key={i} style={{
+            alignSelf: 'flex-end', maxWidth: '85%',
+            background: 'var(--paper-2)', borderRadius: '10px 10px 2px 10px',
+            padding: '8px 12px', font: 'var(--text-small)', color: 'var(--ink-1)',
+          }}>{m.text}</div>
+        ))}
+        {offline ? (
+          <div style={{ font: 'var(--text-agent)', color: 'var(--ink-3)' }}>The model is away from its desk. Reads still work; writes will wait their turn.</div>
+        ) : null}
+        {thinking ? (
+          <div style={{ font: 'var(--text-agent)', color: 'var(--ink-3)' }}>considering…</div>
+        ) : null}
+      </div>
+
+      <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', flexShrink: 0 }}>
+        <div style={{
+          display: 'flex', alignItems: 'flex-end', gap: 8,
+          background: 'var(--paper-0)', border: '1px solid var(--line-2)',
+          borderRadius: 'var(--radius-2)', padding: '8px 8px 8px 12px',
+        }}>
+          <textarea
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }}
+            placeholder={offline ? 'Writes wait for the connection…' : 'Tell me what to do…'}
+            disabled={offline}
+            rows={1}
+            style={{
+              flex: 1, resize: 'none', border: 'none', outline: 'none', background: 'transparent',
+              font: 'var(--text-body)', color: 'var(--ink-1)', lineHeight: 1.45, maxHeight: 96,
+            }}
+          ></textarea>
+          <button
+            type="button"
+            onClick={send}
+            aria-label="Send"
+            disabled={offline}
+            style={{
+              width: 30, height: 30, borderRadius: 'var(--radius-2)', border: 'none', cursor: offline ? 'not-allowed' : 'pointer',
+              background: offline ? 'var(--paper-3)' : 'var(--accent)', color: offline ? 'var(--ink-3)' : 'var(--ink-inverse)',
+              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+            }}
+          ><Icon name="send" size={14} /></button>
+        </div>
+        <p style={{ font: 'var(--text-caption)', color: 'var(--ink-3)', margin: '8px 2px 0' }}>
+          Chat is the write-path. Destructive changes are proposed, never assumed.
+        </p>
+      </div>
+    </aside>
+  );
+}
+Object.assign(window, { ChatPanel });

docs/design/ui_kits/app/DepsGraph.js.txt

@@ -0,0 +1,128 @@
+// Dependency graph drill-in — layered DAG, critical path in spruce
+function DepsGraph({ onOpenIssue }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Tag, Icon } = DS;
+  const g = window.CT_DATA.deps;
+
+  const PAD = 14, COLW = 206, ROWH = 106, NW = 176, NH = 84;
+  const X = (c) => PAD + c * COLW;
+  const Y = (r) => PAD + r * ROWH;
+  const maxCol = g.milestone.col;
+  const maxRow = Math.max(...g.nodes.map((n) => n.row), g.milestone.row);
+  const W = PAD * 2 + maxCol * COLW + NW;
+  const H = PAD * 2 + maxRow * ROWH + NH;
+  const MSW = 158, MSH = 44;
+
+  const pos = {};
+  g.nodes.forEach((n) => { pos[n.id] = { x: X(n.col), y: Y(n.row), w: NW, h: NH }; });
+  pos['ms'] = { x: X(g.milestone.col), y: Y(g.milestone.row) + (NH - MSH) / 2, w: MSW, h: MSH };
+
+  const edgePath = (e) => {
+    const a = pos[e.from], b = pos[e.to];
+    const x1 = a.x + a.w, y1 = a.y + a.h / 2;
+    const x2 = b.x, y2 = b.y + b.h / 2;
+    const dx = Math.max(28, (x2 - x1) / 2);
+    return `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2 - 5} ${y2}`;
+  };
+
+  const STATES = {
+    done: { icon: 'circle-check', color: 'var(--ok)', label: 'done' },
+    steeping: { icon: 'clock', color: 'var(--warn)', label: 'steeping' },
+    review: { icon: 'git-pull-request', color: 'var(--info)', label: 'in review' },
+    triage: { icon: 'circle-dot', color: 'var(--ink-3)', label: 'triage' },
+    diagnosis: { icon: 'circle-dashed', color: 'var(--ink-3)', label: 'diagnosis' },
+  };
+
+  const Node = ({ n }) => {
+    const st = STATES[n.state];
+    const crit = g.critical.includes(n.id);
+    return (
+      <div
+        onClick={() => onOpenIssue({ id: n.id, title: n.title, labels: n.tags, rationale: n.rationale, days: n.state === 'steeping' ? n.days : undefined })}
+        style={{
+          position: 'absolute', left: pos[n.id].x, top: pos[n.id].y, width: NW, height: NH,
+          background: n.state === 'done' ? 'var(--paper-2)' : 'var(--surface-card)',
+          border: `1px solid ${crit ? 'var(--spruce-5)' : 'var(--line-1)'}`,
+          boxShadow: crit ? 'var(--shadow-1), inset 2px 0 0 var(--accent)' : 'var(--shadow-1)',
+          borderRadius: 'var(--radius-2)', padding: '9px 11px', cursor: 'pointer',
+          display: 'flex', flexDirection: 'column', gap: 6,
+          opacity: n.state === 'done' ? 0.72 : 1,
+          transition: 'border-color var(--duration-fast) var(--ease-out)',
+        }}
+        onMouseEnter={(e) => { e.currentTarget.style.borderColor = crit ? 'var(--accent)' : 'var(--line-2)'; }}
+        onMouseLeave={(e) => { e.currentTarget.style.borderColor = crit ? 'var(--spruce-5)' : 'var(--line-1)'; }}
+      >
+        <div style={{
+          font: '500 12px/1.3 var(--font-sans)', color: 'var(--ink-1)',
+          display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden',
+        }}>{n.title}</div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 'auto' }}>
+          <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}>#{n.id}</span>
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, font: '400 10.5px var(--font-mono)', color: st.color, whiteSpace: 'nowrap' }}>
+            <Icon name={st.icon} size={11} />
+            {st.label}{n.state === 'steeping' && n.days ? ` ${n.days}` : ''}
+          </span>
+          {n.tags.filter((t) => t.startsWith('p/')).map((t) => (
+            <span key={t} style={{ font: '500 10.5px var(--font-mono)', color: 'var(--ink-3)', marginLeft: 'auto' }}>{t}</span>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, flex: 1, minHeight: 0 }}>
+      {/* legend */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 18, font: '400 11.5px var(--font-mono)', color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>
+        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
+          <span style={{ width: 22, height: 2, background: 'var(--accent)', display: 'inline-block' }}></span>critical path
+        </span>
+        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
+          <span style={{ width: 22, height: 0, borderTop: '1.5px solid var(--line-2)', display: 'inline-block' }}></span>blocks
+        </span>
+        <span style={{ marginLeft: 'auto', color: 'var(--ink-3)' }}>unattached: {g.unattached.map((i) => `#${i}`).join(' · ')}</span>
+      </div>
+
+      {/* graph canvas */}
+      <div style={{ overflow: 'auto', flex: 1, minHeight: 0, border: '1px solid var(--line-1)', borderRadius: 'var(--radius-3)', background: 'var(--surface-app)' }}>
+        <div style={{ position: 'relative', width: W, height: H }}>
+          <svg width={W} height={H} style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
+            <defs>
+              <marker id="dg-arrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+                <path d="M 0 0.5 L 7.5 4 L 0 7.5 z" fill="var(--line-2)"></path>
+              </marker>
+              <marker id="dg-arrow-crit" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+                <path d="M 0 0.5 L 7.5 4 L 0 7.5 z" fill="var(--accent)"></path>
+              </marker>
+            </defs>
+            {g.edges.map((e, i) => (
+              <path key={i} d={edgePath(e)} fill="none"
+                    stroke={e.crit ? 'var(--accent)' : 'var(--line-2)'}
+                    strokeWidth={e.crit ? 2 : 1.5}
+                    markerEnd={`url(#${e.crit ? 'dg-arrow-crit' : 'dg-arrow'})`} />
+            ))}
+          </svg>
+          {g.nodes.map((n) => <Node key={n.id} n={n} />)}
+          {/* milestone terminal */}
+          <div style={{
+            position: 'absolute', left: pos['ms'].x, top: pos['ms'].y, width: MSW, height: MSH,
+            display: 'flex', alignItems: 'center', gap: 8, padding: '0 14px',
+            background: 'var(--accent)', color: 'var(--ink-inverse)',
+            borderRadius: 'var(--radius-round)', boxShadow: 'var(--shadow-2)',
+          }}>
+            <Icon name="milestone" size={15} />
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <span style={{ font: '600 12.5px/1.2 var(--font-sans)' }}>{g.milestone.name}</span>
+              <span style={{ font: '400 10.5px/1.2 var(--font-mono)', opacity: 0.8 }}>due {g.milestone.due}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+        Four issues sit on the critical path, and #87 is the cork in the bottle. Remove it and everything pours.
+      </p>
+    </div>
+  );
+}
+Object.assign(window, { DepsGraph });

docs/design/ui_kits/app/DirectivesScreen.js.txt

@@ -0,0 +1,103 @@
+// Directive log — append-only ledger + the consequence diff (propose-approve)
+function DirectivesScreen() {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Card, Button, Badge, Icon } = DS;
+  const d = window.CT_DATA.directives;
+  const [pending, setPending] = React.useState(d.pending);
+  const [entries, setEntries] = React.useState(d.entries);
+
+  const resolve = (status) => {
+    setEntries((e) => [{
+      seq: pending.seq, who: pending.who, when: pending.when, what: pending.what, why: 'pilot demo on the 14th',
+      status, consequence: status === 'applied' ? '#78 +5d · Beta 80% Mar 5–14' : 'withdrawn before apply',
+    }, ...e]);
+    setPending(null);
+  };
+
+  const toneColor = { ok: 'var(--ok)', warn: 'var(--warn)', info: 'var(--info)', danger: 'var(--danger)' };
+  const statusBadge = {
+    applied: { tone: 'ok', label: 'applied' },
+    withdrawn: { tone: 'neutral', label: 'withdrawn' },
+    superseded: { tone: 'info', label: 'superseded' },
+  };
+
+  return (
+    <div style={{ maxWidth: 760, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14 }}>
+        <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Directives</h1>
+        <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '6px 0 0' }}>append-only · JSONL in pm-state · who, when, what, why</p>
+      </header>
+
+      {pending ? (
+        <Card overline={`Awaiting your word · directive #00${pending.seq}`} title="Consequence diff" jade
+              footer={<>
+                <Button onClick={() => resolve('applied')}>Make it so</Button>
+                <Button variant="secondary" onClick={() => {}}>Amend</Button>
+                <Button variant="ghost" onClick={() => resolve('withdrawn')}>Withdraw</Button>
+              </>}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+            <p style={{ font: 'var(--text-body)', margin: 0, color: 'var(--ink-2)' }}>
+              <span style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)' }}>{pending.who}</span>
+              <span style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)' }}> · {pending.when}</span>
+              <br />“{pending.what}”
+            </p>
+            <div style={{ borderTop: '1px solid var(--line-1)' }}>
+              {pending.diff.map((r) => (
+                <div key={r.change} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0', borderBottom: '1px solid var(--line-1)' }}>
+                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: toneColor[r.tone], flexShrink: 0 }}></span>
+                  <span style={{ font: 'var(--text-small)', color: 'var(--ink-1)', flex: 1 }}>{r.change}</span>
+                  <span style={{ font: '400 12px var(--font-mono)', color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>
+                    {r.from} <span style={{ color: 'var(--ink-2)' }}>→</span> <span style={{ color: r.tone === 'warn' ? 'var(--warn)' : 'var(--ink-1)' }}>{r.to}</span>
+                  </span>
+                </div>
+              ))}
+            </div>
+            <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+              Cheap, as consequences go. Shall I make it so?
+            </p>
+          </div>
+        </Card>
+      ) : (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, font: 'var(--text-small)', color: 'var(--ink-3)', padding: '2px 2px' }}>
+          <Icon name="circle-check" size={14} style={{ color: 'var(--ok)' }} />
+          Nothing awaits your word. Directives are given in chat; consequences appear here first.
+        </div>
+      )}
+
+      <Card overline="The ledger" flush>
+        <div>
+          {entries.map((e, i) => {
+            const sb = statusBadge[e.status];
+            return (
+              <div key={e.seq} style={{ display: 'flex', gap: 14, padding: '14px 20px', borderTop: i === 0 ? 'none' : '1px solid var(--line-1)' }}>
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, flexShrink: 0 }}>
+                  <span style={{ font: '500 11px var(--font-mono)', color: 'var(--ink-3)' }}>#00{e.seq}</span>
+                  <span style={{ width: 1, flex: 1, background: 'var(--line-1)' }}></span>
+                </div>
+                <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 5 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                    <span style={{
+                      width: 20, height: 20, borderRadius: '50%', background: 'var(--spruce-2)', color: 'var(--accent-text)',
+                      font: '600 8.5px/20px var(--font-sans)', textAlign: 'center', flexShrink: 0,
+                    }}>{e.who.split(' ').map((w) => w[0]).join('')}</span>
+                    <span style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)', whiteSpace: 'nowrap' }}>{e.who}</span>
+                    <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>{e.when}</span>
+                    {e.why ? <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>· why: {e.why}</span> : null}
+                    <span style={{ marginLeft: 'auto' }}><Badge tone={sb.tone}>{sb.label}</Badge></span>
+                  </div>
+                  <p style={{ font: 'var(--text-body)', color: 'var(--ink-1)', margin: 0 }}>“{e.what}”</p>
+                  <p style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-2)', margin: 0 }}>{e.consequence}</p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </Card>
+
+      <p style={{ font: 'var(--text-caption)', color: 'var(--ink-3)', margin: 0 }}>
+        Entries are never edited. Corrections are new entries — the ledger remembers everything, politely.
+      </p>
+    </div>
+  );
+}
+Object.assign(window, { DirectivesScreen });

docs/design/ui_kits/app/FocusScreen.js.txt

@@ -0,0 +1,52 @@
+// Morning service — focus screen
+function FocusScreen({ onOpenIssue }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Card, Tag, Badge, Button, IconButton } = DS;
+  const d = window.CT_DATA;
+
+  const FocusRow = ({ slot, issue, jade }) => (
+    <Card overline={slot} jade={jade}
+          title={<a href="#" onClick={(e) => { e.preventDefault(); onOpenIssue(issue); }}
+                   style={{ color: 'inherit', border: 'none' }}>{issue.title}</a>}
+          actions={<IconButton icon="ellipsis" label="More" size="sm" />}
+          footer={jade ? <>
+            <Button size="sm">Start</Button>
+            <Button size="sm" variant="ghost">Defer</Button>
+            <span style={{ marginLeft: 'auto', font: 'var(--text-caption)', color: 'var(--ink-3)' }}>scheduler pick · critical path</span>
+          </> : null}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10, flexWrap: 'wrap' }}>
+        <span style={{ font: 'var(--text-data)', color: 'var(--ink-3)' }}>#{issue.id}</span>
+        {issue.labels.map((l) => <Tag key={l} label={l} />)}
+        {issue.steeping ? <Badge tone="warn" dot>steeping {issue.steeping}</Badge> : null}
+      </div>
+      <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>{issue.rationale}</p>
+    </Card>
+  );
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
+        <div>
+          <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Morning service</h1>
+          <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '6px 0 0', whiteSpace: 'nowrap' }}>{d.today} · reconcile 3.2s</p>
+        </div>
+        <Badge tone="ok" dot>ahead of forecast</Badge>
+      </header>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 14, alignItems: 'start' }}>
+        <FocusRow slot="Now" issue={d.focus.now} jade />
+        <FocusRow slot="Next" issue={d.focus.next} />
+        <FocusRow slot="Later" issue={d.focus.later} />
+      </div>
+
+      <Card overline="Milestone · Beta" title={<>80% this lands <span style={{ whiteSpace: 'nowrap' }}>Mar 3–12</span></>}
+            actions={<IconButton icon="chart-line" label="Open runway" size="sm" />}>
+        <window.BurnUpCone />
+        <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: '10px 0 0' }}>
+          The cone has narrowed since Friday. I'm quietly pleased.
+        </p>
+      </Card>
+    </div>
+  );
+}
+Object.assign(window, { FocusScreen });

docs/design/ui_kits/app/GanttView.js.txt

@@ -0,0 +1,103 @@
+// Gantt drill-in — scheduler-derived bars, critical chain, 80% forecast tails
+function GanttView({ onOpenIssue }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Icon } = DS;
+  const g = window.CT_DATA.gantt;
+
+  const LABELW = 232, DAYW = 21, ROWH = 36, HEADH = 30;
+  const chartW = g.days * DAYW;
+  const W = LABELW + chartW;
+  const H = HEADH + g.rows.length * ROWH;
+  const X = (d) => LABELW + d * DAYW;
+
+  const BAR = {
+    done: { bg: 'var(--paper-3)', border: 'transparent', text: 'var(--ink-3)' },
+    steeping: { bg: 'var(--accent)', border: 'transparent', text: 'var(--ink-inverse)' },
+    review: { bg: 'var(--info-tint)', border: 'var(--info)', text: 'var(--info)' },
+    scheduled: { bg: 'var(--spruce-2)', border: 'var(--spruce-3)', text: 'var(--accent-text)' },
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, flex: 1, minHeight: 0 }}>
+      {/* legend */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 16, font: '400 11.5px var(--font-mono)', color: 'var(--ink-2)', whiteSpace: 'nowrap', flexWrap: 'wrap' }}>
+        {[['steeping', 'in work'], ['review', 'in review'], ['scheduled', 'scheduled'], ['done', 'done']].map(([k, label]) => (
+          <span key={k} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+            <span style={{ width: 16, height: 9, borderRadius: 3, background: BAR[k].bg, border: `1px solid ${BAR[k].border}`, display: 'inline-block' }}></span>{label}
+          </span>
+        ))}
+        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+          <span style={{ width: 18, height: 0, borderTop: '2px dotted var(--cone-line)', display: 'inline-block' }}></span>80% tail
+        </span>
+        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+          <span style={{ width: 2, height: 12, background: 'var(--jade)', display: 'inline-block' }}></span>today
+        </span>
+      </div>
+
+      {/* chart */}
+      <div style={{ overflow: 'auto', flex: 1, minHeight: 0, border: '1px solid var(--line-1)', borderRadius: 'var(--radius-3)', background: 'var(--surface-card)' }}>
+        <div style={{ position: 'relative', width: W, height: H }}>
+          {/* week gridlines + labels */}
+          {g.weeks.map((w) => (
+            <React.Fragment key={w.at}>
+              <div style={{ position: 'absolute', left: X(w.at), top: HEADH, bottom: 0, width: 1, background: 'var(--line-1)' }}></div>
+              <span style={{ position: 'absolute', left: X(w.at) + 5, top: 8, font: '400 10.5px var(--font-mono)', color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>{w.label}</span>
+            </React.Fragment>
+          ))}
+          {/* milestone 80% band */}
+          <div style={{ position: 'absolute', left: X(g.band.from), width: (g.band.to - g.band.from) * DAYW, top: HEADH, bottom: 0, background: 'var(--cone-fill)' }}></div>
+          <span style={{ position: 'absolute', left: X(g.band.from) + 5, bottom: 6, font: '500 10.5px var(--font-mono)', color: 'var(--cone-line)', whiteSpace: 'nowrap' }}>{g.band.label}</span>
+          {/* due marker */}
+          <div style={{ position: 'absolute', left: X(g.due.at) - 1, top: HEADH, bottom: 0, width: 2, background: 'var(--ink-1)' }}></div>
+          <span style={{ position: 'absolute', left: X(g.due.at) - 4, top: HEADH - 12, width: 8, height: 8, background: 'var(--ink-1)', transform: 'rotate(45deg)' }}></span>
+          {/* today rule */}
+          <div style={{ position: 'absolute', left: X(g.today), top: HEADH, bottom: 0, width: 2, background: 'var(--jade)' }}></div>
+
+          {/* rows */}
+          {g.rows.map((r, i) => {
+            const top = HEADH + i * ROWH;
+            const st = BAR[r.state];
+            return (
+              <React.Fragment key={r.id}>
+                {/* row hairline */}
+                <div style={{ position: 'absolute', left: 0, right: 0, top: top, height: 1, background: 'var(--line-1)', opacity: 0.6 }}></div>
+                {/* label cell (sticky) */}
+                <div
+                  onClick={() => onOpenIssue({ id: r.id, title: r.title, labels: [], days: r.state === 'steeping' ? '4d' : undefined })}
+                  style={{
+                    position: 'absolute', left: 0, width: LABELW, height: ROWH, top: top, zIndex: 2, cursor: 'pointer',
+                    display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px 0 14px', background: 'var(--surface-card)',
+                    borderRight: '1px solid var(--line-1)',
+                    boxShadow: r.crit ? 'inset 2px 0 0 var(--accent)' : 'none',
+                  }}
+                >
+                  <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', flexShrink: 0 }}>#{r.id}</span>
+                  <span style={{ font: '500 12px/1.3 var(--font-sans)', color: 'var(--ink-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title}</span>
+                  <span style={{ font: '600 8.5px/16px var(--font-sans)', color: 'var(--accent-text)', background: 'var(--spruce-2)', width: 16, height: 16, borderRadius: '50%', textAlign: 'center', flexShrink: 0, marginLeft: 'auto' }}>{r.who}</span>
+                </div>
+                {/* bar */}
+                <div style={{
+                  position: 'absolute', left: X(r.start), width: (r.end - r.start) * DAYW, top: top + 9, height: 18,
+                  background: st.bg, border: `1px solid ${st.border}`, borderRadius: 4,
+                  boxShadow: r.crit && r.state !== 'steeping' ? 'inset 0 -2px 0 var(--accent)' : 'none',
+                }}></div>
+                {/* 80% tail */}
+                {r.p80 ? (
+                  <>
+                    <div style={{ position: 'absolute', left: X(r.end), width: (r.p80 - r.end) * DAYW, top: top + 17, height: 0, borderTop: '2px dotted var(--cone-line)' }}></div>
+                    <div style={{ position: 'absolute', left: X(r.p80) - 1, top: top + 13, width: 2, height: 10, background: 'var(--cone-line)' }}></div>
+                  </>
+                ) : null}
+              </React.Fragment>
+            );
+          })}
+        </div>
+      </div>
+
+      <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+        The path holds if #87 lands by Wednesday. The dotted tails are your own history, wagging.
+      </p>
+    </div>
+  );
+}
+Object.assign(window, { GanttView });

docs/design/ui_kits/app/InboxScreen.js.txt

@@ -0,0 +1,95 @@
+// Inbox — Reginald only rings the bell when it matters
+function InboxScreen({ onOpenIssue, onOpenDirectives, readIds, setReadIds }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Card, Tabs, Button, Icon } = DS;
+  const all = window.CT_DATA.inbox;
+  const [tab, setTab] = React.useState('all');
+
+  const isRead = (n) => !n.unread || readIds.includes(n.id);
+  const unreadCount = all.filter((n) => !isRead(n)).length;
+
+  const FILTERS = {
+    all: () => true,
+    mentions: (n) => n.type === 'mention' || n.type === 'assignment',
+    drift: (n) => n.type === 'drift' || n.type === 'nag' || n.type === 'milestone',
+    system: (n) => n.type === 'system' || n.type === 'review',
+  };
+  const items = all.filter(FILTERS[tab]);
+  const days = [...new Set(items.map((n) => n.day))];
+
+  const toneColor = { ok: 'var(--ok)', warn: 'var(--warn)', info: 'var(--info)', neutral: 'var(--ink-3)' };
+
+  const open = (n) => {
+    setReadIds((r) => (r.includes(n.id) ? r : [...r, n.id]));
+    if (n.issue) onOpenIssue(n.issue);
+    else if (n.to === 'directives') onOpenDirectives();
+  };
+
+  return (
+    <div style={{ maxWidth: 760, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 14 }}>
+      <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
+        <div>
+          <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Inbox</h1>
+          <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '6px 0 0', whiteSpace: 'nowrap' }}>
+            {unreadCount ? `${unreadCount} unread` : 'all read'} · nothing here rings twice
+          </p>
+        </div>
+        {unreadCount ? (
+          <Button variant="ghost" size="sm" onClick={() => setReadIds(all.map((n) => n.id))}>Mark all read</Button>
+        ) : null}
+      </header>
+
+      <Tabs
+        items={[
+          { id: 'all', label: 'All', count: all.length },
+          { id: 'mentions', label: 'Mentions', icon: 'message-square' },
+          { id: 'drift', label: 'Drift', icon: 'chart-line' },
+          { id: 'system', label: 'System', icon: 'refresh-cw' },
+        ]}
+        active={tab} onChange={setTab}
+      />
+
+      <Card flush>
+        <div>
+          {days.map((day) => (
+            <div key={day}>
+              <div style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-3)', padding: '12px 20px 4px' }}>{day}</div>
+              {items.filter((n) => n.day === day).map((n) => {
+                const read = isRead(n);
+                return (
+                  <div key={n.id}
+                    onClick={() => open(n)}
+                    style={{
+                      display: 'flex', alignItems: 'flex-start', gap: 12, padding: '11px 20px',
+                      cursor: n.issue || n.to ? 'pointer' : 'default',
+                      opacity: read ? 0.72 : 1,
+                    }}
+                    onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--paper-2)'; }}
+                    onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
+                  >
+                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: read ? 'transparent' : 'var(--accent)', flexShrink: 0, marginTop: 7 }}></span>
+                    <span style={{ color: toneColor[n.tone], display: 'inline-flex', marginTop: 1, flexShrink: 0 }}>
+                      <Icon name={n.icon} size={15} />
+                    </span>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ font: read ? 'var(--text-body)' : 'var(--text-body-strong)', color: 'var(--ink-1)' }}>
+                        {n.who ? <span style={{ fontWeight: 600 }}>{n.who} </span> : null}{n.text}
+                      </div>
+                      <div style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-2)', marginTop: 2 }}>{n.detail}</div>
+                    </div>
+                    <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', whiteSpace: 'nowrap', marginTop: 2 }}>{n.time}</span>
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+        I only ring the bell when it matters. The rest can wait for morning service.
+      </p>
+    </div>
+  );
+}
+Object.assign(window, { InboxScreen });

docs/design/ui_kits/app/IssueScreen.js.txt

@@ -0,0 +1,172 @@
+// Issue detail — human intent (gitea) on the left, machine-derived (pm-state) on the right
+function IssueScreen({ issue, onBack, onOpenIssue }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Card, Tag, Badge, Button, Icon } = DS;
+  const det = window.CT_DATA.issueDetail[issue.id] || {
+    state: 'triage',
+    assignee: 'Stephen',
+    milestone: 'Beta',
+    body: '',
+    comments: [],
+    lifecycle: [
+      { stage: 'Diagnosis', event: 'issue opened', when: 'Feb 4 · 10:20', icon: 'circle-dot', done: true },
+      { stage: 'Triage', event: 'labeled · milestoned Beta', when: 'Feb 5 · 09:12', icon: 'tag', done: true },
+      { stage: 'Work start', event: 'first branch or commit ref', when: 'pending', icon: 'git-commit-horizontal', done: false },
+      { stage: 'Deploy', event: 'PR merged', when: 'pending', icon: 'git-merge', done: false },
+      { stage: 'Complete', event: 'issue closed', when: 'pending', icon: 'circle-check', done: false },
+    ],
+    forecast: { p80: 'starts wk of Feb 16', note: 'queue position from scheduler' },
+    blocks: [],
+    blockedBy: [],
+    note: null,
+  };
+  const stateBadge = {
+    steeping: { tone: 'warn', label: `steeping${issue.days || issue.steeping ? ' ' + (issue.days || issue.steeping) : ''}` },
+    triage: { tone: 'neutral', label: 'triage' },
+    review: { tone: 'info', label: 'in review' },
+    done: { tone: 'ok', label: 'done' },
+  }[det.state] || { tone: 'neutral', label: det.state };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* breadcrumb + header */}
+      <div>
+        <button type="button" onClick={onBack} style={{
+          display: 'inline-flex', alignItems: 'center', gap: 6, background: 'none', border: 'none',
+          font: '500 12.5px var(--font-sans)', color: 'var(--ink-2)', cursor: 'pointer', padding: '2px 0', marginBottom: 10,
+        }}>
+          <Icon name="arrow-left" size={14} /> Back
+        </button>
+        <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14, display: 'flex', alignItems: 'flex-start', gap: 16 }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <p style={{ font: '400 13px var(--font-mono)', color: 'var(--ink-3)', margin: '0 0 6px' }}>#{issue.id} · stephen/commitea</p>
+            <h1 style={{ font: 'var(--text-title)', color: 'var(--ink-1)', margin: 0 }}>{issue.title}</h1>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10, flexWrap: 'wrap' }}>
+              <Badge tone={stateBadge.tone} dot>{stateBadge.label}</Badge>
+              {(issue.labels || []).map((l) => <Tag key={l} label={l} />)}
+              <span style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+                <Icon name="milestone" size={12} />{det.milestone}
+              </span>
+              <span style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+                <Icon name="user" size={12} />{det.assignee}
+              </span>
+            </div>
+          </div>
+          <Button variant="secondary" icon="arrow-up-right">Open in Gitea</Button>
+        </header>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: 16, alignItems: 'start' }}>
+        {/* left: human intent */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <Card overline="Description">
+            {det.body ? (
+              <p style={{ font: 'var(--text-body)', color: 'var(--ink-1)', margin: 0, lineHeight: 1.6 }}>{det.body}</p>
+            ) : (
+              <p style={{ font: 'var(--text-agent)', color: 'var(--ink-3)', margin: 0 }}>
+                No description was written. I have opinions about that, but I'll keep them warm.
+              </p>
+            )}
+          </Card>
+
+          <Card overline={`Comments · ${det.comments.length}`} flush>
+            <div>
+              {det.comments.map((c, i) => (
+                <div key={i} style={{ display: 'flex', gap: 12, padding: '14px 20px', borderBottom: '1px solid var(--line-1)' }}>
+                  <span style={{
+                    width: 24, height: 24, borderRadius: '50%', background: 'var(--spruce-2)', color: 'var(--accent-text)',
+                    font: '600 9px/24px var(--font-sans)', textAlign: 'center', flexShrink: 0,
+                  }}>{c.who.split(' ').map((w) => w[0]).join('')}</span>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
+                      <span style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)', whiteSpace: 'nowrap' }}>{c.who}</span>
+                      <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>{c.when}</span>
+                    </div>
+                    <p style={{ font: 'var(--text-body)', color: 'var(--ink-1)', margin: '4px 0 0' }}>{c.text}</p>
+                  </div>
+                </div>
+              ))}
+              <div style={{ display: 'flex', gap: 8, padding: '14px 20px', alignItems: 'flex-end' }}>
+                <textarea placeholder="Comment — this writes to gitea, as you" rows={2} style={{
+                  flex: 1, resize: 'none', font: 'var(--text-body)', color: 'var(--ink-1)', lineHeight: 1.5,
+                  background: 'var(--paper-0)', border: '1px solid var(--line-2)', borderRadius: 'var(--radius-2)',
+                  padding: '8px 11px', outline: 'none',
+                }}></textarea>
+                <Button size="sm" variant="secondary">Comment</Button>
+              </div>
+            </div>
+          </Card>
+
+          {det.note ? (
+            <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0, padding: '0 2px' }}>{det.note}</p>
+          ) : null}
+        </div>
+
+        {/* right: machine-derived sidecar */}
+        <Card overline="Machine-derived" flush>
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            {/* lifecycle */}
+            <div style={{ padding: '14px 20px', display: 'flex', flexDirection: 'column', gap: 0 }}>
+              {det.lifecycle.map((s, i) => (
+                <div key={s.stage} style={{ display: 'flex', gap: 10 }}>
+                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                    <span style={{ display: 'inline-flex', color: s.done ? 'var(--ok)' : 'var(--ink-3)', padding: '2px 0' }}>
+                      <Icon name={s.icon} size={14} />
+                    </span>
+                    {i < det.lifecycle.length - 1 ? <span style={{ width: 1, flex: 1, minHeight: 14, background: s.done ? 'var(--spruce-3)' : 'var(--line-1)' }}></span> : null}
+                  </div>
+                  <div style={{ paddingBottom: i < det.lifecycle.length - 1 ? 12 : 0 }}>
+                    <div style={{ font: `500 12px var(--font-sans)`, color: s.done ? 'var(--ink-1)' : 'var(--ink-3)' }}>{s.stage}</div>
+                    <div style={{ font: '400 10.5px var(--font-mono)', color: 'var(--ink-3)', marginTop: 2, whiteSpace: 'nowrap' }}>{s.event}</div>
+                    <div style={{ font: '400 10.5px var(--font-mono)', color: s.done ? 'var(--ink-2)' : 'var(--ink-3)', whiteSpace: 'nowrap' }}>{s.when}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+            {/* forecast */}
+            <div style={{ padding: '12px 20px', borderTop: '1px solid var(--line-1)' }}>
+              <div style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 6 }}>Forecast</div>
+              <div style={{ font: '500 13px var(--font-mono)', color: 'var(--ink-1)' }}>80% {det.forecast.p80}</div>
+              <div style={{ font: '400 10.5px var(--font-mono)', color: 'var(--ink-3)', marginTop: 3 }}>{det.forecast.note}</div>
+            </div>
+            {/* dependencies */}
+            <div style={{ padding: '12px 20px', borderTop: '1px solid var(--line-1)' }}>
+              <div style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 6 }}>Dependencies</div>
+              {det.blocks.length === 0 && det.blockedBy.length === 0 ? (
+                <div style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)' }}>none</div>
+              ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                  {det.blocks.length ? (
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+                      <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}>blocks</span>
+                      {det.blocks.map((b) => (
+                        <button key={b} type="button"
+                          onClick={() => onOpenIssue({ id: b, title: b === 91 ? 'Webhook listener: reconcile on reconnect' : 'Monte Carlo engine: percentile bands', labels: b === 91 ? ['est/3d', 'p/2'] : ['est/5d', 'p/1'] })}
+                          style={{ font: '500 11px var(--font-mono)', color: 'var(--accent-text)', background: 'var(--spruce-1)', border: '1px solid var(--spruce-2)', borderRadius: 'var(--radius-1)', padding: '2px 7px', cursor: 'pointer' }}>
+                          #{b}
+                        </button>
+                      ))}
+                    </div>
+                  ) : null}
+                  {det.blockedBy.length ? (
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                      <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}>blocked by</span>
+                      {det.blockedBy.map((b) => <span key={b} style={{ font: '500 11px var(--font-mono)', color: 'var(--ink-2)' }}>#{b}</span>)}
+                    </div>
+                  ) : null}
+                </div>
+              )}
+            </div>
+            {/* provenance note */}
+            <div style={{ padding: '10px 20px 14px', borderTop: '1px solid var(--line-1)' }}>
+              <p style={{ font: 'var(--text-caption)', color: 'var(--ink-3)', margin: 0 }}>
+                Lives in pm-state. Your repo never sees any of it.
+              </p>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
+Object.assign(window, { IssueScreen });

docs/design/ui_kits/app/MilestoneScreen.js.txt

@@ -0,0 +1,98 @@
+// Milestone detail — scope, cone, issues; forecasts stay ranges
+function MilestoneScreen({ onBack, onOpenIssue }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Card, Tag, Badge, Button, Icon } = DS;
+  const cols = window.CT_DATA.columns;
+  const byState = (ids) => cols.flatMap((c) => c.issues.map((i) => ({ ...i, col: c.label }))).filter((i) => ids.includes(i.id));
+
+  const groups = [
+    { label: 'Steeping', issues: byState([87, 84]) },
+    { label: 'In review', issues: byState([92]) },
+    { label: 'Queued', issues: byState([102, 103, 99, 96, 78]) },
+    { label: 'Done', issues: byState([71, 69, 65]), muted: true },
+  ];
+
+  const Stat = ({ label, value, tone }) => (
+    <div style={{ flex: 1, padding: '12px 18px', borderRight: '1px solid var(--line-1)' }}>
+      <div style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 5 }}>{label}</div>
+      <div style={{ font: `500 14px var(--font-mono)`, color: tone || 'var(--ink-1)', whiteSpace: 'nowrap' }}>{value}</div>
+    </div>
+  );
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <div>
+        <button type="button" onClick={onBack} style={{
+          display: 'inline-flex', alignItems: 'center', gap: 6, background: 'none', border: 'none',
+          font: '500 12.5px var(--font-sans)', color: 'var(--ink-2)', cursor: 'pointer', padding: '2px 0', marginBottom: 10,
+        }}>
+          <Icon name="arrow-left" size={14} /> Runway
+        </button>
+        <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14, display: 'flex', alignItems: 'flex-start', gap: 16 }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <p style={{ font: '400 12px var(--font-mono)', color: 'var(--ink-3)', margin: '0 0 6px', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+              <Icon name="milestone" size={13} /> milestone · due Mar 15 · soft — scope may flex
+            </p>
+            <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Beta</h1>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10 }}>
+              <Badge tone="ok" dot>ahead of forecast</Badge>
+              <span style={{ font: '400 12px var(--font-mono)', color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>80% Mar 3–12</span>
+            </div>
+          </div>
+          <Button variant="secondary" icon="arrow-up-right">Open in Gitea</Button>
+        </header>
+      </div>
+
+      {/* stats strip */}
+      <Card flush>
+        <div style={{ display: 'flex' }}>
+          <Stat label="Scope" value="42 issues · est 61d" />
+          <Stat label="Done" value="24 · 57%" />
+          <Stat label="Forecast" value="80% Mar 3–12" />
+          <div style={{ flex: 1, padding: '12px 18px' }}>
+            <div style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 5 }}>Drift · 7d</div>
+            <div style={{ font: '500 14px var(--font-mono)', color: 'var(--ok)', whiteSpace: 'nowrap' }}>−2d · cone narrowed</div>
+          </div>
+        </div>
+      </Card>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 14, alignItems: 'start' }}>
+        <Card overline="Burn-up" title={<>80% this lands <span style={{ whiteSpace: 'nowrap' }}>Mar 3–12</span></>} jade>
+          <window.BurnUpCone />
+          <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: '10px 0 0' }}>
+            Comfortably ahead. Beta needs #87 more than it needs my commentary.
+          </p>
+        </Card>
+
+        <Card overline="Issues" flush>
+          <div>
+            {groups.map((g) => (
+              <div key={g.label}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '10px 20px 6px' }}>
+                  <span style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-3)' }}>{g.label}</span>
+                  <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}>{g.issues.length}</span>
+                </div>
+                {g.issues.map((i) => (
+                  <div key={i.id}
+                    onClick={() => onOpenIssue({ id: i.id, title: i.title, labels: i.labels, days: i.days })}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: 8, padding: '7px 20px', cursor: 'pointer',
+                      opacity: g.muted ? 0.6 : 1,
+                    }}
+                    onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--paper-2)'; }}
+                    onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
+                  >
+                    <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', width: 34, flexShrink: 0 }}>#{i.id}</span>
+                    <span style={{ font: 'var(--text-small)', color: 'var(--ink-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{i.title}</span>
+                    {(i.labels || []).filter((l) => l.startsWith('est/')).map((l) => <Tag key={l} label={l} />)}
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
+Object.assign(window, { MilestoneScreen });

docs/design/ui_kits/app/OnboardingScreen.js.txt

@@ -0,0 +1,167 @@
+// Onboarding / first connect — welcome → connect gitea → choose repo → bootstrap
+function OnboardingScreen({ onDone }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Button, Input, Radio, Tag, Badge, Icon } = DS;
+  const [step, setStep] = React.useState(0);
+  const [conn, setConn] = React.useState('idle'); // idle | testing | ok
+  const [repo, setRepo] = React.useState('stephen/commitea');
+  const [boot, setBoot] = React.useState(-1); // -1 idle, 0..2 running, 3 done
+
+  React.useEffect(() => {
+    if (conn !== 'testing') return;
+    const t = setTimeout(() => setConn('ok'), 1100);
+    return () => clearTimeout(t);
+  }, [conn]);
+
+  React.useEffect(() => {
+    if (boot < 0 || boot >= 3) return;
+    const t = setTimeout(() => setBoot(boot + 1), 700);
+    return () => clearTimeout(t);
+  }, [boot]);
+
+  const STEPS = ['Welcome', 'Connect', 'Repo', 'Bootstrap'];
+  const BOOT_TASKS = [
+    'Create stephen/pm-state (the sidecar)',
+    'Apply the label schema to stephen/commitea',
+    'Install a webhook · endpoint :48731',
+  ];
+
+  const Frame = ({ children, footer }) => (
+    <div style={{
+      background: 'var(--surface-card)', border: '1px solid var(--line-1)', borderRadius: 'var(--radius-3)',
+      boxShadow: 'var(--shadow-jade-line), var(--shadow-2)', padding: '30px 36px',
+      display: 'flex', flexDirection: 'column', gap: 16, width: '100%',
+    }}>
+      {children}
+      {footer ? <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', borderTop: '1px solid var(--line-1)', paddingTop: 16 }}>{footer}</div> : null}
+    </div>
+  );
+
+  return (
+    <div style={{
+      minHeight: '100vh', background: 'var(--surface-app)', display: 'flex', flexDirection: 'column',
+      alignItems: 'center', justifyContent: 'center', padding: 32, gap: 22,
+    }} data-screen-label="onboarding">
+      {/* brand */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+        <img src="../../assets/logo-icon.png" width="34" height="34" alt="" style={{ borderRadius: 8, display: 'block' }} />
+        <span style={{ font: '400 27px/1 var(--font-serif-display)', color: 'var(--ink-1)' }}>
+          Commi<span style={{ color: 'var(--accent-text)' }}>Tea</span>
+        </span>
+      </div>
+
+      {/* stepper */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+        {STEPS.map((s, i) => (
+          <div key={s} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
+              <span style={{
+                width: 20, height: 20, borderRadius: '50%', textAlign: 'center',
+                font: '500 10.5px/20px var(--font-mono)',
+                background: i < step ? 'var(--accent)' : i === step ? 'var(--spruce-2)' : 'var(--paper-2)',
+                color: i < step ? 'var(--ink-inverse)' : i === step ? 'var(--accent-text)' : 'var(--ink-3)',
+              }}>{i < step ? '\u2713' : i + 1}</span>
+              <span style={{ font: `${i === step ? 600 : 400} 12px/1 var(--font-sans)`, color: i === step ? 'var(--ink-1)' : 'var(--ink-3)' }}>{s}</span>
+            </span>
+            {i < STEPS.length - 1 ? <span style={{ width: 24, height: 1, background: 'var(--line-2)' }}></span> : null}
+          </div>
+        ))}
+      </div>
+
+      <div style={{ width: 'min(540px, 100%)' }}>
+        {step === 0 ? (
+          <Frame footer={<Button iconRight="arrow-right" onClick={() => setStep(1)}>Begin</Button>}>
+            <h1 style={{ font: 'var(--text-title)', color: 'var(--ink-1)', margin: 0 }}>Good morning.</h1>
+            <p style={{ font: 'var(--text-agent-lg)', color: 'var(--ink-2)', margin: 0 }}>
+              I'm Reginald, your project manager. I interview you instead of making you fill in forms,
+              I forecast in honest ranges, and I never do the arithmetic myself — there's a scheduler for that.
+            </p>
+            <p style={{ font: 'var(--text-body)', color: 'var(--ink-2)', margin: 0 }}>
+              Your plans live in your own Gitea as ordinary issues and labels. Delete me and nothing human is lost.
+            </p>
+          </Frame>
+        ) : null}
+
+        {step === 1 ? (
+          <Frame footer={<>
+            <Button variant="ghost" onClick={() => setStep(0)}>Back</Button>
+            <Button iconRight="arrow-right" disabled={conn !== 'ok'} onClick={() => setStep(2)}>Continue</Button>
+          </>}>
+            <h1 style={{ font: 'var(--text-title)', color: 'var(--ink-1)', margin: 0 }}>Your Gitea</h1>
+            <Input label="Base URL" icon="link" mono defaultValue="https://gitea.stephenmann.io" />
+            <Input label="Access token" icon="keyboard" mono type="password" defaultValue="ct_9f2e81c4a7d6" hint="Scopes: repo, issue. Nothing more." />
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+              <Button variant="secondary" icon={conn === 'testing' ? 'loader-circle' : 'zap'} disabled={conn === 'testing'} onClick={() => setConn('testing')}>
+                {conn === 'testing' ? 'Ringing the bell…' : 'Test connection'}
+              </Button>
+              {conn === 'ok' ? <Badge tone="ok" dot>connected · 3 repos visible</Badge> : null}
+            </div>
+          </Frame>
+        ) : null}
+
+        {step === 2 ? (
+          <Frame footer={<>
+            <Button variant="ghost" onClick={() => setStep(1)}>Back</Button>
+            <Button iconRight="arrow-right" onClick={() => setStep(3)}>Continue</Button>
+          </>}>
+            <h1 style={{ font: 'var(--text-title)', color: 'var(--ink-1)', margin: 0 }}>Which repo shall I manage?</h1>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+              {['stephen/commitea', 'stephen/novelpad', 'stephen/infra'].map((r) => (
+                <label key={r} style={{
+                  display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', cursor: 'pointer',
+                  background: repo === r ? 'var(--spruce-1)' : 'var(--paper-0)',
+                  border: `1px solid ${repo === r ? 'var(--spruce-3)' : 'var(--line-1)'}`,
+                  borderRadius: 'var(--radius-2)',
+                }}>
+                  <Radio name="repo" checked={repo === r} onChange={() => setRepo(r)} />
+                  <Icon name="git-branch" size={14} style={{ color: 'var(--ink-3)' }} />
+                  <span style={{ font: 'var(--text-data)', color: 'var(--ink-1)' }}>{r}</span>
+                </label>
+              ))}
+            </div>
+            <p style={{ font: 'var(--text-caption)', color: 'var(--ink-3)', margin: 0 }}>One to start. You can add more later in Settings.</p>
+          </Frame>
+        ) : null}
+
+        {step === 3 ? (
+          <Frame footer={boot === 3 ? <>
+            <Button variant="ghost" onClick={() => onDone('focus')}>Just look around</Button>
+            <Button icon="sparkles" onClick={() => onDone('capture')}>Start a capture</Button>
+          </> : <>
+            <Button variant="ghost" onClick={() => setStep(2)} disabled={boot >= 0}>Back</Button>
+            <Button disabled={boot >= 0} onClick={() => setBoot(0)}>Make it so</Button>
+          </>}>
+            <h1 style={{ font: 'var(--text-title)', color: 'var(--ink-1)', margin: 0 }}>
+              {boot === 3 ? 'All set.' : 'With your approval'}
+            </h1>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+              {BOOT_TASKS.map((t, i) => (
+                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                  <span style={{ display: 'inline-flex', color: boot > i ? 'var(--ok)' : boot === i ? 'var(--warn)' : 'var(--ink-3)' }}>
+                    <Icon name={boot > i ? 'circle-check' : boot === i ? 'loader-circle' : 'circle-dashed'} size={15} />
+                  </span>
+                  <span style={{ font: 'var(--text-body)', color: boot > i ? 'var(--ink-1)' : 'var(--ink-2)', whiteSpace: 'nowrap' }}>{t}</span>
+                </div>
+              ))}
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, paddingLeft: 25 }}>
+                {['est/1d', 'est/2d', 'est/3d', 'est/5d', 'est/8d', 'p/1', 'p/2', 'p/3', 'p/4', 'deadline/hard'].map((l) => <Tag key={l} label={l} />)}
+              </div>
+            </div>
+            {boot === 3 ? (
+              <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+                The pot is empty. Tell me what you're planning and I'll draw up the tickets.
+              </p>
+            ) : (
+              <p style={{ font: 'var(--text-caption)', color: 'var(--ink-3)', margin: 0 }}>
+                No bot comments, no body frontmatter, no synthetic issues — ever. Labels are the only footprint.
+              </p>
+            )}
+          </Frame>
+        ) : null}
+      </div>
+
+      <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}>first run · everything reversible</span>
+    </div>
+  );
+}
+Object.assign(window, { OnboardingScreen });

docs/design/ui_kits/app/README.md

@@ -0,0 +1,22 @@
+# 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).

docs/design/ui_kits/app/RunwayScreen.js.txt

@@ -0,0 +1,73 @@
+// Runway — capacity vs milestone dates; ranges, never points
+function RunwayScreen({ onOpenCalibration, onOpenMilestone }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Card, Badge, Tag, Icon } = DS;
+  const d = window.CT_DATA;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14 }}>
+        <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Runway</h1>
+        <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '6px 0 0' }}>capacity vs milestone dates · calibrated on 27 closed issues</p>
+      </header>
+
+      <Card overline="Milestones" flush>
+        <div>
+          {d.runway.map((m, i) => (
+            <div key={m.name} onClick={onOpenMilestone} style={{
+              display: 'grid', gridTemplateColumns: '160px 1fr 150px 90px', gap: 16, alignItems: 'center', cursor: 'pointer',
+              padding: '14px 20px', borderTop: i === 0 ? 'none' : '1px solid var(--line-1)',
+            }}
+            onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--paper-2)'; }}
+            onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
+              <div>
+                <div style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)', display: 'flex', alignItems: 'center', gap: 7 }}>
+                  <Icon name="milestone" size={14} style={{ color: 'var(--ink-3)' }} />{m.name}
+                </div>
+                <div style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)', marginTop: 3 }}>
+                  due {m.due}{m.hard ? ' ' : ''}
+                </div>
+                {m.hard ? <Tag label="deadline/hard" style={{ marginTop: 5 }} /> : null}
+              </div>
+              <window.RunwayBar m={m} />
+              <span style={{ font: '400 12px var(--font-mono)', color: 'var(--ink-2)' }}>80% {m.p80}</span>
+              <Badge tone={m.tone} dot>{m.note}</Badge>
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, alignItems: 'start' }}>
+        <Card overline="Capacity" flush>
+          <div>
+            {d.capacity.map((p, i) => (
+              <div key={p.who} style={{
+                display: 'flex', alignItems: 'center', gap: 12, padding: '12px 20px',
+                borderTop: i === 0 ? 'none' : '1px solid var(--line-1)',
+              }}>
+                <span style={{
+                  width: 26, height: 26, borderRadius: '50%', background: 'var(--spruce-2)', color: 'var(--accent-text)',
+                  font: '600 10px/26px var(--font-sans)', textAlign: 'center', flexShrink: 0,
+                }}>{p.who.split(' ').map(w => w[0]).join('')}</span>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ font: 'var(--text-body-strong)' }}>{p.who}</div>
+                  <div style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)', marginTop: 2 }}>{p.slices}</div>
+                </div>
+                <span style={{ font: '400 12px var(--font-mono)', color: 'var(--ink-2)' }}>{p.hours}</span>
+              </div>
+            ))}
+          </div>
+        </Card>
+        <Card overline="Calibration" actions={<DS.IconButton icon="arrow-up-right" label="Full report" size="sm" onClick={onOpenCalibration} />}>
+          <p style={{ font: 'var(--text-body)', margin: '0 0 8px' }}>
+            Your estimates run <strong>18% optimistic</strong> on <code>est/3d</code> and above. Smaller tickets are honest.
+          </p>
+          <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+            I widen the cone accordingly. No judgement — it's the most common shape of hope.
+          </p>
+        </Card>
+      </div>
+    </div>
+  );
+}
+Object.assign(window, { RunwayScreen });

docs/design/ui_kits/app/SettingsScreen.js.txt

@@ -0,0 +1,136 @@
+// Settings — gitea connection, sync, model roles, labels, rituals, appearance
+function SettingsScreen({ dark, setDark }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Card, Input, Select, Switch, Radio, Button, IconButton, Tag, Badge, Icon } = DS;
+  const [webhooks, setWebhooks] = React.useState(true);
+  const [reconcile, setReconcile] = React.useState(true);
+  const [poll, setPoll] = React.useState(true);
+  const [nag, setNag] = React.useState(true);
+
+  const Row = ({ children, style }) => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 12, ...style }}>{children}</div>
+  );
+  const Note = ({ children }) => (
+    <p style={{ font: 'var(--text-caption)', color: 'var(--ink-3)', margin: 0 }}>{children}</p>
+  );
+
+  return (
+    <div style={{ maxWidth: 720, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14 }}>
+        <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Settings</h1>
+        <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '6px 0 0' }}>config lives in pm-state · versioned, portable</p>
+      </header>
+
+      <Card overline="Gitea" title="Connection">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+          <Input label="Base URL" icon="link" mono defaultValue="https://gitea.stephenmann.io" />
+          <Input label="Access token" icon="keyboard" mono type="password" defaultValue="ct_9f2e81c4a7d6" hint="Scopes: repo, issue. Nothing more." />
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <span style={{ font: '600 13px/1.2 var(--font-sans)', color: 'var(--ink-1)' }}>Managed repos</span>
+            <Row style={{ padding: '8px 12px', background: 'var(--paper-0)', border: '1px solid var(--line-1)', borderRadius: 'var(--radius-2)' }}>
+              <Icon name="git-branch" size={14} style={{ color: 'var(--ink-3)' }} />
+              <span style={{ font: 'var(--text-data)', color: 'var(--ink-1)', flex: 1 }}>stephen/commitea</span>
+              <Badge tone="ok" dot>syncing</Badge>
+              <IconButton icon="x" label="Stop managing" size="sm" />
+            </Row>
+            <Row style={{ padding: '8px 12px', background: 'var(--paper-0)', border: '1px solid var(--line-1)', borderRadius: 'var(--radius-2)' }}>
+              <Icon name="layers" size={14} style={{ color: 'var(--ink-3)' }} />
+              <span style={{ font: 'var(--text-data)', color: 'var(--ink-1)', flex: 1 }}>stephen/pm-state</span>
+              <Badge>sidecar</Badge>
+            </Row>
+            <Note>The sidecar holds machine-derived state only. Delete it and resync — no truth is lost.</Note>
+            <Button variant="secondary" size="sm" icon="plus" style={{ alignSelf: 'flex-start' }}>Add repo</Button>
+          </div>
+        </div>
+      </Card>
+
+      <Card overline="Sync" title="Staying current">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <Row>
+            <Switch label="Webhooks while running" checked={webhooks} onChange={(e) => setWebhooks(e.target.checked)} />
+            <span style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)', marginLeft: 'auto' }}>endpoint :48731 · healthy</span>
+          </Row>
+          <Switch label="Full reconcile on launch" checked={reconcile} onChange={(e) => setReconcile(e.target.checked)} />
+          <Row>
+            <Switch label="Poll fallback" checked={poll} onChange={(e) => setPoll(e.target.checked)} />
+            <div style={{ marginLeft: 'auto', width: 140 }}>
+              <Select options={[{ value: '2', label: 'every 2 min' }, { value: '5', label: 'every 5 min' }, { value: '15', label: 'every 15 min' }]} defaultValue="5" />
+            </div>
+          </Row>
+          <Note>last reconcile 3.2s · 500 issues · nothing lost</Note>
+        </div>
+      </Card>
+
+      <Card overline="Models" title="The router">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 14px' }}>
+            <Select label="Prose & rituals" options={[
+              { value: 'gemma-4b', label: 'gemma-4b · local' },
+              { value: 'qwen-7b', label: 'qwen-7b · local' },
+            ]} defaultValue="gemma-4b" />
+            <Input label="Base URL" mono defaultValue="http://localhost:1234/v1" />
+            <Select label="Decomposition & negotiation" options={[
+              { value: 'qwen-72b', label: 'qwen-72b · lm-studio box' },
+              { value: 'gpt-4o', label: 'gpt-4o · OpenAI API' },
+            ]} defaultValue="qwen-72b" />
+            <Input label="Base URL" mono defaultValue="http://10.0.0.42:1234/v1" />
+          </div>
+          <Row>
+            <span style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)' }}>hot memory ≤ 2k tokens · math is never delegated to either</span>
+          </Row>
+          <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+            The small one writes my standup; the large one argues with your estimates. Neither is allowed near the arithmetic.
+          </p>
+        </div>
+      </Card>
+
+      <Card overline="Labels" title="Schema">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+          <Row style={{ flexWrap: 'wrap', gap: 6 }}>
+            {['est/1d', 'est/2d', 'est/3d', 'est/5d', 'est/8d'].map((l) => <Tag key={l} label={l} />)}
+          </Row>
+          <Row style={{ flexWrap: 'wrap', gap: 6 }}>
+            {['p/1', 'p/2', 'p/3', 'p/4'].map((l) => <Tag key={l} label={l} />)}
+            <Tag label="deadline/hard" />
+          </Row>
+          <Note>Fixed sets, human-meaningful, visible in gitea. Not configurable — that is rather the point.</Note>
+        </div>
+      </Card>
+
+      <Card overline="Rituals" title="Reginald's calendar">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <Row>
+            <span style={{ font: 'var(--text-body)', color: 'var(--ink-1)' }}>Morning standup</span>
+            <div style={{ marginLeft: 'auto', width: 120 }}>
+              <Select options={[{ value: '0630', label: '06:30' }, { value: '0700', label: '07:00' }, { value: '0800', label: '08:00' }]} defaultValue="0700" />
+            </div>
+          </Row>
+          <Row>
+            <Switch label="Stale-blocker nagging" checked={nag} onChange={(e) => setNag(e.target.checked)} />
+            <div style={{ marginLeft: 'auto', width: 140 }}>
+              <Select options={[{ value: '2', label: 'after 2 days' }, { value: '3', label: 'after 3 days' }, { value: '5', label: 'after 5 days' }]} defaultValue="3" />
+            </div>
+          </Row>
+        </div>
+      </Card>
+
+      <Card overline="Appearance" title="Service">
+        <div style={{ display: 'flex', gap: 20 }}>
+          <Radio name="theme" label="Morning (light)" checked={!dark} onChange={() => setDark(false)} />
+          <Radio name="theme" label="Evening (dark)" checked={dark} onChange={() => setDark(true)} />
+        </div>
+      </Card>
+
+      <Card>
+        <Row>
+          <div style={{ flex: 1 }}>
+            <div style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)' }}>Forget this gitea</div>
+            <Note>Removes the connection and the local cache. Gitea itself is untouched.</Note>
+          </div>
+          <Button variant="danger">Forget</Button>
+        </Row>
+      </Card>
+    </div>
+  );
+}
+Object.assign(window, { SettingsScreen });

docs/design/ui_kits/app/Shell.js.txt

@@ -0,0 +1,113 @@
+// App shell — left rail + content + agent panel, issue page, theme toggle
+function Shell() {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Icon, Switch } = DS;
+  const [view, setView] = React.useState('focus');
+  const [prevView, setPrevView] = React.useState('focus');
+  const [dark, setDark] = React.useState(false);
+  const [issue, setIssue] = React.useState(null);
+  const [offline, setOffline] = React.useState(false);
+  const [readIds, setReadIds] = React.useState([]);
+  const inboxUnread = window.CT_DATA.inbox.filter((n) => n.unread && !readIds.includes(n.id)).length;
+
+  const openIssue = (i) => {
+    setIssue(i);
+    if (view !== 'issue') setPrevView(view);
+    setView('issue');
+  };
+
+  React.useEffect(() => {
+    document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
+  }, [dark]);
+
+  if (view === 'firstrun') {
+    return <window.OnboardingScreen onDone={(dest) => setView(dest)} />;
+  }
+
+  const NAV = [
+    { id: 'standup', label: 'Standup', icon: 'sun' },
+    { id: 'focus', label: 'Morning service', icon: 'coffee' },
+    { id: 'inbox', label: 'Inbox', icon: 'bell', count: inboxUnread || null },
+    { id: 'capture', label: 'Capture', icon: 'plus' },
+    { id: 'board', label: 'The pot', icon: 'square-kanban' },
+    { id: 'runway', label: 'Runway', icon: 'chart-line' },
+    { id: 'directives', label: 'Directives', icon: 'flag' },
+  ];
+
+  const NavItem = ({ item }) => {
+    const active = view === item.id || (view === 'issue' && prevView === item.id) || ((view === 'calibration' || view === 'milestone') && item.id === 'runway');
+    return (
+      <button
+        type="button"
+        onClick={() => setView(item.id)}
+        style={{
+          display: 'flex', alignItems: 'center', gap: 10, width: '100%',
+          font: `${active ? 600 : 500} 13.5px/1 var(--font-sans)`,
+          color: active ? 'var(--ink-1)' : 'var(--ink-2)',
+          background: active ? 'var(--paper-2)' : 'transparent',
+          border: 'none', borderRadius: 'var(--radius-2)',
+          padding: '9px 12px', cursor: 'pointer', textAlign: 'left',
+          transition: 'background var(--duration-fast) var(--ease-out)',
+        }}
+      >
+        <Icon name={item.icon} size={16} style={{ color: active ? 'var(--accent-text)' : 'var(--ink-3)' }} />
+        {item.label}
+        {item.count ? <span style={{ marginLeft: 'auto', font: '500 10.5px/16px var(--font-mono)', color: 'var(--accent-text)', background: 'var(--spruce-2)', borderRadius: 'var(--radius-round)', padding: '0 6px' }}>{item.count}</span> : null}
+      </button>
+    );
+  };
+
+  return (
+    <div style={{ display: 'flex', height: '100vh', minWidth: 1280, background: 'var(--surface-app)', overflow: 'hidden' }} data-screen-label={`app-${view}`}>
+      {/* left rail */}
+      <nav style={{
+        width: 208, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 4,
+        padding: '18px 12px 14px', borderRight: '1px solid var(--line-1)',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '0 12px 16px' }}>
+          <img src="../../assets/logo-icon.png" width="24" height="24" alt="" style={{ borderRadius: 6, display: 'block' }} />
+          <span style={{ font: '400 21px/1 var(--font-serif-display)', color: 'var(--ink-1)' }}>
+            Commi<span style={{ color: 'var(--accent-text)' }}>Tea</span>
+          </span>
+        </div>
+        {NAV.map((n) => <NavItem key={n.id} item={n} />)}
+        <div style={{ borderTop: '1px solid var(--line-1)', margin: '10px 8px' }}></div>
+        <NavItem item={{ id: 'settings', label: 'Settings', icon: 'settings-2' }} />
+        <NavItem item={{ id: 'firstrun', label: 'First run', icon: 'play' }} />
+        <NavItem item={{ id: 'states', label: 'States', icon: 'circle-dashed' }} />
+        <div style={{ marginTop: 'auto', padding: '0 12px', display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <button type="button" onClick={() => setOffline(!offline)} title="Toggle the connection (demo)" style={{
+            font: '400 11px var(--font-mono)', color: 'var(--ink-3)', display: 'flex', alignItems: 'center', gap: 6,
+            background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left',
+          }}>
+            <span style={{ width: 6, height: 6, borderRadius: '50%', background: offline ? 'var(--danger)' : 'var(--ok)', display: 'inline-block' }}></span>
+            gitea.stephenmann.io
+          </button>
+          <Switch label={<span style={{ font: 'var(--text-caption)' }}>Evening service</span>} checked={dark} onChange={(e) => setDark(e.target.checked)} />
+        </div>
+      </nav>
+
+      {/* main */}
+      <main style={{ flex: 1, minWidth: 0, overflowY: 'auto', padding: '24px 28px' }}>
+        <div style={{ maxWidth: 1120, margin: '0 auto', height: view === 'board' ? '100%' : 'auto', display: 'flex', flexDirection: 'column', gap: 14 }}>
+          {offline ? <window.OfflineBanner /> : null}
+          {view === 'focus' ? <window.FocusScreen onOpenIssue={openIssue} /> : null}
+          {view === 'board' ? <window.BoardScreen onOpenIssue={openIssue} /> : null}
+          {view === 'runway' ? <window.RunwayScreen onOpenCalibration={() => setView('calibration')} onOpenMilestone={() => setView('milestone')} /> : null}
+          {view === 'capture' ? <window.CaptureScreen onDone={() => setView('focus')} /> : null}
+          {view === 'standup' ? <window.StandupScreen onBegin={() => setView('focus')} onOpenIssue={openIssue} /> : null}
+          {view === 'settings' ? <window.SettingsScreen dark={dark} setDark={setDark} /> : null}
+          {view === 'directives' ? <window.DirectivesScreen /> : null}
+          {view === 'issue' && issue ? <window.IssueScreen issue={issue} onBack={() => setView(prevView)} onOpenIssue={openIssue} /> : null}
+          {view === 'calibration' ? <window.CalibrationScreen onBack={() => setView('runway')} /> : null}
+          {view === 'milestone' ? <window.MilestoneScreen onBack={() => setView('runway')} onOpenIssue={openIssue} /> : null}
+          {view === 'states' ? <window.StatesScreen onCapture={() => setView('capture')} /> : null}
+          {view === 'inbox' ? <window.InboxScreen onOpenIssue={openIssue} onOpenDirectives={() => setView('directives')} readIds={readIds} setReadIds={setReadIds} /> : null}
+        </div>
+      </main>
+
+      <window.ChatPanel onOpenDirectives={() => setView('directives')} offline={offline} />
+    </div>
+  );
+}
+Object.assign(window, { Shell });

docs/design/ui_kits/app/StandupScreen.js.txt

@@ -0,0 +1,112 @@
+// Morning standup ritual — a typeset letter from Reginald: drift, plan, nag
+const standupCSS = `
+@keyframes ct-standup-settle {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: none; }
+}
+.ct-standup-section { opacity: 1; }
+@media (prefers-reduced-motion: no-preference) {
+  .ct-standup-section { animation: ct-standup-settle 320ms var(--ease-out) both; }
+}
+`;
+(function inject() {
+  if (typeof document !== 'undefined' && !document.getElementById('ct-standup-css')) {
+    const s = document.createElement('style'); s.id = 'ct-standup-css'; s.textContent = standupCSS;
+    document.head.appendChild(s);
+  }
+})();
+
+function StandupScreen({ onBegin, onOpenIssue }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Button, Tag, Badge, Icon } = DS;
+  const s = window.CT_DATA.standup;
+
+  const Section = ({ overline, children, order }) => (
+    <section className="ct-standup-section" style={{ animationDelay: `${order * 90}ms`, display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <p style={{
+        font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase',
+        color: 'var(--ink-3)', margin: 0, borderTop: '1px solid var(--line-1)', paddingTop: 14,
+      }}>{overline}</p>
+      {children}
+    </section>
+  );
+
+  const toneColor = { ok: 'var(--ok)', warn: 'var(--warn)', danger: 'var(--danger)' };
+
+  return (
+    <div style={{ maxWidth: 660, margin: '0 auto' }}>
+      <article style={{
+        background: 'var(--surface-card)', border: '1px solid var(--line-1)',
+        borderRadius: 'var(--radius-3)', boxShadow: 'var(--shadow-jade-line), var(--shadow-1)',
+        padding: '36px 44px 32px', display: 'flex', flexDirection: 'column', gap: 20,
+      }}>
+        {/* letterhead */}
+        <header className="ct-standup-section" style={{ borderBottom: 'var(--rule-double)', paddingBottom: 16 }}>
+          <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '0 0 8px' }}>{s.date} · prepared 07:00</p>
+          <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Morning standup</h1>
+        </header>
+
+        <Section overline="Overnight drift" order={1}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+            {s.drift.map((d) => (
+              <div key={d.text} style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
+                <span style={{ width: 7, height: 7, borderRadius: '50%', background: toneColor[d.tone], flexShrink: 0, position: 'relative', top: -1 }}></span>
+                <span style={{ font: 'var(--text-body)', color: 'var(--ink-1)', flex: 1 }}>{d.text}</span>
+                <span style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>{d.delta}</span>
+              </div>
+            ))}
+          </div>
+        </Section>
+
+        <Section overline="Today's plan" order={2}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+            {s.plan.map((p) => (
+              <div key={p.who} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
+                <span style={{
+                  width: 26, height: 26, borderRadius: '50%', background: 'var(--spruce-2)', color: 'var(--accent-text)',
+                  font: '600 10px/26px var(--font-sans)', textAlign: 'center', flexShrink: 0,
+                }}>{p.who.split(' ').map((w) => w[0]).join('')}</span>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                    <span style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)', whiteSpace: 'nowrap' }}>{p.who}</span>
+                    <span style={{ font: '400 12px var(--font-mono)', color: 'var(--ink-2)' }}>{p.pick}</span>
+                    <span style={{ font: 'var(--text-small)', color: 'var(--ink-2)' }}>{p.title}</span>
+                  </div>
+                  <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: '4px 0 0' }}>{p.why}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+
+        <Section overline="Stale blockers" order={3}>
+          <div
+            onClick={() => onOpenIssue({ id: s.nag.id, title: 'Fix lifecycle inference on merge events', labels: ['est/2d', 'p/1'], days: s.nag.days })}
+            style={{
+              display: 'flex', gap: 10, alignItems: 'flex-start', cursor: 'pointer',
+              background: 'var(--warn-tint)', borderRadius: 'var(--radius-2)', padding: '12px 14px',
+            }}
+          >
+            <span style={{ color: 'var(--warn)', display: 'inline-flex', marginTop: 2 }}><Icon name="clock" size={15} /></span>
+            <div style={{ flex: 1 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                <span style={{ font: '500 12.5px var(--font-mono)', color: 'var(--ink-1)' }}>#{s.nag.id}</span>
+                <Badge tone="warn" dot>steeping {s.nag.days}</Badge>
+                <span style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)' }}>blocks {s.nag.blocks.join(', ')}</span>
+              </div>
+              <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: '5px 0 0' }}>{s.nag.text}</p>
+            </div>
+          </div>
+        </Section>
+
+        {/* sign-off */}
+        <footer className="ct-standup-section" style={{ animationDelay: '360ms', borderTop: '1px solid var(--line-1)', paddingTop: 16, display: 'flex', alignItems: 'center', gap: 10 }}>
+          <p style={{ font: 'var(--text-agent-lg)', color: 'var(--ink-1)', margin: 0, flex: 1 }}>The kettle's on. — R.</p>
+          <Button variant="ghost" onClick={onBegin}>Ask about the drift</Button>
+          <Button iconRight="arrow-right" onClick={onBegin}>Begin the day</Button>
+        </footer>
+      </article>
+    </div>
+  );
+}
+Object.assign(window, { StandupScreen });

docs/design/ui_kits/app/StatesGallery.js.txt

@@ -0,0 +1,130 @@
+// Shared empty/trouble states + the States gallery screen
+function EmptyState({ icon, title, line, action, onAction, compact }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Button, Icon } = DS;
+  return (
+    <div style={{
+      display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 10,
+      padding: compact ? '28px 20px' : '52px 24px',
+    }}>
+      <span style={{
+        width: 44, height: 44, borderRadius: '50%', background: 'var(--paper-2)', color: 'var(--ink-3)',
+        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+      }}><Icon name={icon} size={19} /></span>
+      <div style={{ font: '400 20px/1.25 var(--font-serif-display)', color: 'var(--ink-1)' }}>{title}</div>
+      <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0, maxWidth: 380 }}>{line}</p>
+      {action ? <Button style={{ marginTop: 6 }} onClick={onAction}>{action}</Button> : null}
+    </div>
+  );
+}
+
+function OfflineBanner({ retryIn }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Icon } = DS;
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', gap: 10,
+      background: 'var(--warn-tint)', border: '1px solid var(--warn)', borderRadius: 'var(--radius-2)',
+      padding: '9px 14px',
+    }}>
+      <span style={{ color: 'var(--warn)', display: 'inline-flex' }}><Icon name="triangle-alert" size={15} /></span>
+      <span style={{ font: 'var(--text-small)', color: 'var(--ink-1)', flex: 1 }}>
+        Gitea isn't answering. I'll keep trying and say nothing more about it.
+      </span>
+      <span style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>
+        retry in {retryIn || '0:12'} · reads from cache
+      </span>
+    </div>
+  );
+}
+
+function ModelAwayState() {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Icon, Badge } = DS;
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '14px 16px' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <span style={{ color: 'var(--ink-3)', display: 'inline-flex' }}><Icon name="sparkles" size={15} /></span>
+        <span style={{ font: 'var(--text-body-strong)', color: 'var(--ink-2)' }}>Reginald</span>
+        <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}>model offline</span>
+        <span style={{ marginLeft: 'auto' }}><Badge>queued: 1 directive</Badge></span>
+      </div>
+      <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+        The model is away from its desk. Reads still work; writes will wait their turn.
+      </p>
+    </div>
+  );
+}
+
+function StatesScreen({ onCapture }) {
+  const DS = window.CommiTeaDesignSystem_20e63b;
+  const { Button, Badge, Icon } = DS;
+
+  const Specimen = ({ label, children }) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}>{label}</span>
+      <div style={{ border: '1px dashed var(--line-2)', borderRadius: 'var(--radius-3)', background: 'var(--surface-card)', overflow: 'hidden' }}>
+        {children}
+      </div>
+    </div>
+  );
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14 }}>
+        <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>States</h1>
+        <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '6px 0 0' }}>empty & trouble · specimens as wired in the app</p>
+      </header>
+
+      <p style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-3)', margin: '4px 0 0' }}>Empty</p>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
+        <Specimen label="the pot · no issues">
+          <EmptyState compact icon="inbox" title="The pot is empty"
+            line="Tell me what you're planning and I'll draw up the tickets."
+            action="Start a capture" onAction={onCapture} />
+        </Specimen>
+        <Specimen label="morning service · nothing scheduled">
+          <EmptyState compact icon="coffee" title="Nothing to pour"
+            line="Capture some work, or enjoy the silence — it never lasts." />
+        </Specimen>
+        <Specimen label="directives · no entries">
+          <EmptyState compact icon="flag" title="No directives yet"
+            line="When you overrule the scheduler, it goes on the record here — who, when, what, why." />
+        </Specimen>
+        <Specimen label="board search · no match">
+          <EmptyState compact icon="search" title="Nothing by that name"
+            line="The pot holds 24 issues; none of them answer to that." />
+        </Specimen>
+      </div>
+
+      <p style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-3)', margin: '8px 0 0' }}>Trouble</p>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+        <Specimen label="gitea unreachable · banner above main content (toggle the rail's connection dot to see it live)">
+          <div style={{ padding: 12 }}><OfflineBanner /></div>
+        </Specimen>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
+          <Specimen label="reginald's panel · model offline">
+            <ModelAwayState />
+          </Specimen>
+          <Specimen label="webhooks down · poll fallback">
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px' }}>
+              <Badge tone="warn" dot>webhooks down</Badge>
+              <span style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-2)' }}>polling every 2 min · updates may lag</span>
+            </div>
+          </Specimen>
+        </div>
+        <Specimen label="first reconcile failed · full-screen">
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '8px 0 20px' }}>
+            <EmptyState compact icon="refresh-cw" title="The reconcile failed"
+              line="Gitea answered, then hung up mid-sentence. Your cache is intact; nothing human is lost." />
+            <div style={{ display: 'flex', gap: 8, marginTop: -6 }}>
+              <Button>Try again</Button>
+              <Button variant="ghost">Work from cache</Button>
+            </div>
+          </div>
+        </Specimen>
+      </div>
+    </div>
+  );
+}
+Object.assign(window, { EmptyState, OfflineBanner, ModelAwayState, StatesScreen });

docs/design/ui_kits/app/data.js

@@ -0,0 +1,203 @@
+// CommiTea fixture data — human-authored intent (gitea) + machine-derived state (sidecar)
+window.CT_DATA = {
+  today: 'Tuesday 7 July 2026',
+  milestone: {
+    name: 'Beta',
+    due: '2026-03-15',
+    hard: false,
+    forecast: { p80: 'Mar 3–12', p50: 'Mar 5–8', drift: '+0d' },
+  },
+  focus: {
+    now: {
+      id: 87, title: 'Fix lifecycle inference on merge events',
+      labels: ['est/2d', 'p/1'], steeping: '4d',
+      rationale: 'It blocks #91 and #92. I\u2019d take it first \u2014 the critical path agrees with me.',
+    },
+    next: {
+      id: 91, title: 'Webhook listener: reconcile on reconnect',
+      labels: ['est/3d', 'p/2'],
+      rationale: 'Ready the moment #87 lands. The estimate is yours; history says add a day.',
+    },
+    later: {
+      id: 78, title: 'Calibration store cold-start distributions',
+      labels: ['est/5d', 'p/3'],
+      rationale: 'Nothing depends on it yet. It can steep.',
+    },
+  },
+  columns: [
+    { id: 'diagnosis', label: 'Diagnosis', issues: [
+      { id: 102, title: 'Scheduler ignores standing allocation slices', labels: ['p/2'], who: 'SM' },
+      { id: 103, title: 'Dark theme: cone fill too faint', labels: ['p/4'], who: 'SM' },
+    ]},
+    { id: 'triage', label: 'Triage', issues: [
+      { id: 99, title: 'Directive log: conflict-free merge test', labels: ['est/1d', 'p/2'], who: 'SM' },
+      { id: 96, title: 'Label schema bootstrap for new repos', labels: ['est/2d', 'p/3'], who: 'AK' },
+      { id: 78, title: 'Calibration store cold-start distributions', labels: ['est/5d', 'p/3'], who: 'SM' },
+    ]},
+    { id: 'steeping', label: 'Steeping', issues: [
+      { id: 87, title: 'Fix lifecycle inference on merge events', labels: ['est/2d', 'p/1'], who: 'SM', blocked: false, days: '4d' },
+      { id: 84, title: 'Capacity model: focus factor per person', labels: ['est/3d', 'p/2'], who: 'AK', days: '1d' },
+    ]},
+    { id: 'review', label: 'In review', issues: [
+      { id: 92, title: 'Monte Carlo engine: percentile bands', labels: ['est/5d', 'p/1'], who: 'SM', pr: '#141' },
+    ]},
+    { id: 'done', label: 'Done', issues: [
+      { id: 71, title: 'Gitea client: token auth + retries', labels: ['est/2d', 'p/2'], who: 'SM' },
+      { id: 69, title: 'pm-state repo bootstrap', labels: ['est/1d', 'p/1'], who: 'SM' },
+      { id: 65, title: 'Electron shell + window state', labels: ['est/3d', 'p/2'], who: 'AK' },
+    ]},
+  ],
+  runway: [
+    { name: 'Beta', due: 'Mar 15', hard: false, p80: 'Mar 3–12', pos: 0.62, spread: 0.18, tone: 'ok', note: 'ahead' },
+    { name: 'Pilot-ready', due: 'Apr 30', hard: true, p80: 'Apr 21 – May 9', pos: 0.94, spread: 0.26, tone: 'warn', note: 'drifting' },
+    { name: 'v1.0', due: 'Jun 12', hard: false, p80: 'May 30 – Jun 20', pos: 0.88, spread: 0.3, tone: 'ok', note: 'on watch' },
+  ],
+  capacity: [
+    { who: 'Stephen', hours: '5.2h/day', focus: 0.65, slices: 'dev 70% · pilots 20% · compliance 10%' },
+    { who: 'Ana K.', hours: '3.8h/day', focus: 0.8, slices: 'dev 100%' },
+  ],
+  chat: [
+    { from: 'agent', text: 'Morning service. Two things drifted overnight; one needs your opinion.' },
+    { from: 'agent', text: '#84 grew a dependency on #92 \u2014 I\u2019ve reordered. And #87 has been steeping for four days; it blocks two others. Worth a look.' },
+    { from: 'user', text: 'Push the calibration work to next week, pilots come first' },
+    { from: 'agent', text: 'Done \u2014 #78 moves to next week. Milestone Beta is unmoved; the cone doesn\u2019t care for calibration either. Logged as a directive.' },
+  ],
+  cannedReply: 'Noted and logged as a directive. The scheduler is re-running \u2014 I\u2019ll show you the consequence diff in a moment.',
+  standup: {
+    date: 'Tuesday 7 July 2026',
+    drift: [
+      { tone: 'warn', text: '#84 grew a dependency on #92 overnight.', delta: 'reordered \u00b7 no date impact' },
+      { tone: 'warn', text: '#92 has sat in review for two days.', delta: 'Beta 80% +1d if idle past Thu' },
+      { tone: 'ok', text: 'Webhook outage 02:14\u201302:31; full reconcile ran.', delta: 'nothing lost' },
+    ],
+    plan: [
+      { who: 'Stephen', pick: '#87', title: 'Fix lifecycle inference on merge events', why: 'It blocks two others and the critical path runs straight through it.' },
+      { who: 'Ana K.', pick: '#84', title: 'Capacity model: focus factor per person', why: 'Already steeping \u2014 finish it before anything new is poured.' },
+    ],
+    nag: { id: 87, days: '4d', blocks: ['#91', '#92'], text: 'Four days is a long steep. It blocks #91 and #92 \u2014 worth a look before it stains.' },
+  },
+  calibration: {
+    n: 27,
+    active: true,
+    labels: [
+      { label: 'est/1d', n: 8, median: '1.1d', bias: 8 },
+      { label: 'est/2d', n: 9, median: '2.4d', bias: 18 },
+      { label: 'est/3d', n: 6, median: '3.7d', bias: 22 },
+      { label: 'est/5d', n: 3, median: '6.5d', bias: 30 },
+      { label: 'est/8d', n: 1, median: '8.5d', bias: null },
+    ],
+    people: [
+      { who: 'Stephen', n: 19, bias: 21, note: 'optimism grows with ticket size' },
+      { who: 'Ana K.', n: 8, bias: 9, note: 'close to honest \u2014 suspicious' },
+    ],
+    scatter: [
+      [1, 1], [1, 1.2], [1, 0.9], [1, 1.5], [1, 1.1], [1, 0.8], [1, 1.3], [1, 1.2],
+      [2, 2], [2, 2.5], [2, 3.1], [2, 2.2], [2, 2.6], [2, 1.8], [2, 2.4], [2, 2.9], [2, 2.3],
+      [3, 3.5], [3, 4.1], [3, 3.1], [3, 4.6], [3, 3.6], [3, 3.9],
+      [5, 6.1], [5, 7.2], [5, 6.4],
+      [8, 8.5],
+    ],
+    fit: 1.18,
+    effect: { raw: '42d of estimates', banded: '80% band 46\u201353d', p50: '48d' },
+  },
+  inbox: [
+    { id: 1, day: 'Today', type: 'drift', icon: 'chart-line', tone: 'warn', text: 'Beta\u2019s 80% window moved', detail: 'Mar 3\u201312 \u2192 Mar 5\u201314 \u00b7 directive #007', time: '09:14', unread: true, to: 'directives' },
+    { id: 2, day: 'Today', type: 'mention', icon: 'message-square', tone: 'info', who: 'Ana K.', text: 'mentioned you on #92', detail: '\u201cpercentile bands ready for a second pair of eyes\u201d', time: '08:52', unread: true, issue: { id: 92, title: 'Monte Carlo engine: percentile bands', labels: ['est/5d', 'p/1'] } },
+    { id: 3, day: 'Today', type: 'nag', icon: 'clock', tone: 'warn', text: '#87 is steeping \u00b7 4d', detail: 'blocks #91 and #92 \u2014 worth a look before it stains', time: '07:00', unread: true, issue: { id: 87, title: 'Fix lifecycle inference on merge events', labels: ['est/2d', 'p/1'], days: '4d' } },
+    { id: 4, day: 'Yesterday', type: 'review', icon: 'git-pull-request', tone: 'info', text: 'PR #141 awaits review', detail: '#92 \u00b7 idle two days', time: '16:20', unread: false, issue: { id: 92, title: 'Monte Carlo engine: percentile bands', labels: ['est/5d', 'p/1'] } },
+    { id: 5, day: 'Yesterday', type: 'assignment', icon: 'user', tone: 'neutral', who: 'Ana K.', text: 'took #96 from the pot', detail: 'Label schema bootstrap for new repos', time: '11:03', unread: false, issue: { id: 96, title: 'Label schema bootstrap for new repos', labels: ['est/2d', 'p/3'] } },
+    { id: 6, day: 'Yesterday', type: 'system', icon: 'refresh-cw', tone: 'ok', text: 'Webhook outage 02:14\u201302:31', detail: 'full reconcile ran \u00b7 nothing lost', time: '02:31', unread: false },
+    { id: 7, day: 'Yesterday', type: 'milestone', icon: 'milestone', tone: 'ok', text: 'P2 \u2014 Scheduler closed two days early', detail: 'the calibration noticed. So did I.', time: '09:40', unread: false },
+  ],
+  issueDetail: {
+    87: {
+      state: 'steeping',
+      assignee: 'Stephen',
+      milestone: 'Beta',
+      body: 'Squash-merges emit events out of order when CI runs long: the PR-closed webhook lands before the merge event, so lifecycle inference marks deploy before work-end and the actuals go negative. Regular merges infer correctly.',
+      comments: [
+        { who: 'Ana K.', when: 'Feb 8 \u00b7 14:12', text: 'Repro: squash-merge only. Regular merges infer fine.' },
+        { who: 'Stephen', when: 'Feb 9 \u00b7 09:30', text: 'Confirmed \u2014 the event order flips whenever CI takes more than ~5 minutes.' },
+      ],
+      lifecycle: [
+        { stage: 'Diagnosis', event: 'issue opened', when: 'Feb 2 \u00b7 09:14', icon: 'circle-dot', done: true },
+        { stage: 'Triage', event: 'labeled est/2d \u00b7 milestoned Beta', when: 'Feb 3 \u00b7 10:02', icon: 'tag', done: true },
+        { stage: 'Work start', event: 'first commit ref a41f09', when: 'Feb 6 \u00b7 11:47', icon: 'git-commit-horizontal', done: true },
+        { stage: 'Deploy', event: 'PR merged', when: 'pending', icon: 'git-merge', done: false },
+        { stage: 'Complete', event: 'issue closed', when: 'pending', icon: 'circle-check', done: false },
+      ],
+      forecast: { p80: 'done Feb 11\u201313', note: 'from your est/2d history \u00b7 n=14' },
+      blocks: [91, 92],
+      blockedBy: [],
+      note: 'It blocks #91 and #92. I\u2019d take it first \u2014 the critical path agrees with me.',
+    },
+  },
+  directives: {
+    pending: {
+      seq: 7,
+      who: 'Stephen',
+      when: 'today 09:12',
+      what: 'Pilots before calibration \u2014 push #78 to next week.',
+      diff: [
+        { tone: 'info', change: '#78 Calibration store', from: 'this week', to: 'wk of Feb 23' },
+        { tone: 'warn', change: 'Beta \u00b7 80% window', from: 'Mar 3\u201312', to: 'Mar 5\u201314' },
+        { tone: 'ok', change: "Today's plan", from: '#87', to: '#87 \u00b7 unchanged' },
+      ],
+    },
+    entries: [
+      { seq: 6, who: 'Stephen', when: 'Feb 8 \u00b7 16:40', what: 'Ana takes nothing new until #84 lands.', why: 'context thrash', status: 'applied', consequence: 'WIP capped \u00b7 v1.0 unmoved' },
+      { seq: 5, who: 'Stephen', when: 'Feb 6 \u00b7 09:03', what: 'Ship Beta a week early.', why: 'board meeting', status: 'withdrawn', consequence: '80% would need scope \u22129d \u2014 withdrawn after diff' },
+      { seq: 4, who: 'Stephen', when: 'Feb 3 \u00b7 11:21', what: 'deadline/hard on Pilot-ready.', why: 'contract date', status: 'applied', consequence: 'label applied \u00b7 runway flag raised' },
+      { seq: 3, who: 'Stephen', when: 'Jan 28 \u00b7 08:47', what: 'Webhook work ahead of UI polish.', why: '', status: 'applied', consequence: '#91 +2 ranks \u00b7 Beta unmoved' },
+      { seq: 2, who: 'Stephen', when: 'Jan 20 \u00b7 14:02', what: 'Estimates in days, never hours.', why: 'sanity', status: 'applied', consequence: 'label schema est/* confirmed' },
+      { seq: 1, who: 'Stephen', when: 'Jan 19 \u00b7 09:00', what: 'CommiTea manages its own backlog.', why: 'dogfood', status: 'applied', consequence: 'stephen/commitea under management' },
+    ],
+  },
+  gantt: {
+    // day offsets from Feb 2; chart spans 42 days (Feb 2 – Mar 16)
+    days: 42,
+    weeks: [
+      { at: 0, label: 'Feb 2' }, { at: 7, label: 'Feb 9' }, { at: 14, label: 'Feb 16' },
+      { at: 21, label: 'Feb 23' }, { at: 28, label: 'Mar 2' }, { at: 35, label: 'Mar 9' }, { at: 41, label: 'Mar 15' },
+    ],
+    today: 8,
+    band: { from: 29, to: 38, label: '80% · Mar 3–12' },
+    due: { at: 41, label: 'Beta due' },
+    rows: [
+      { id: 71, title: 'Gitea client: token auth + retries', who: 'SM', state: 'done', start: 0, end: 4 },
+      { id: 69, title: 'pm-state repo bootstrap', who: 'SM', state: 'done', start: 0, end: 1 },
+      { id: 87, title: 'Fix lifecycle inference on merge events', who: 'SM', state: 'steeping', start: 4, end: 9, p80: 11, crit: true },
+      { id: 92, title: 'Monte Carlo engine: percentile bands', who: 'SM', state: 'review', start: 9, end: 18, p80: 21, crit: true },
+      { id: 91, title: 'Webhook listener: reconcile on reconnect', who: 'AK', state: 'scheduled', start: 9, end: 14, p80: 16 },
+      { id: 99, title: 'Directive log: conflict-free merge test', who: 'SM', state: 'scheduled', start: 10, end: 11 },
+      { id: 96, title: 'Label schema bootstrap for new repos', who: 'AK', state: 'scheduled', start: 14, end: 16 },
+      { id: 84, title: 'Capacity model: focus factor per person', who: 'AK', state: 'scheduled', start: 18, end: 23, p80: 26, crit: true },
+      { id: 102, title: 'Scheduler ignores standing allocation slices', who: 'SM', state: 'scheduled', start: 23, end: 25, p80: 28, crit: true },
+      { id: 78, title: 'Calibration store cold-start distributions', who: 'SM', state: 'scheduled', start: 25, end: 30 },
+    ],
+  },
+  deps: {
+    nodes: [
+      { id: 71, title: 'Gitea client: token auth + retries', tags: ['est/2d'], state: 'done', col: 0, row: 0.2 },
+      { id: 69, title: 'pm-state repo bootstrap', tags: ['est/1d'], state: 'done', col: 0, row: 1.9 },
+      { id: 87, title: 'Fix lifecycle inference on merge events', tags: ['est/2d', 'p/1'], state: 'steeping', days: '4d', col: 1, row: 0.7, rationale: 'It blocks #91 and #92. I\u2019d take it first \u2014 the critical path agrees with me.' },
+      { id: 99, title: 'Directive log: conflict-free merge test', tags: ['est/1d', 'p/2'], state: 'triage', col: 1, row: 1.9 },
+      { id: 91, title: 'Webhook listener: reconcile on reconnect', tags: ['est/3d', 'p/2'], state: 'triage', col: 2, row: 0 },
+      { id: 92, title: 'Monte Carlo engine: percentile bands', tags: ['est/5d', 'p/1'], state: 'review', col: 2, row: 1.4 },
+      { id: 84, title: 'Capacity model: focus factor per person', tags: ['est/3d', 'p/2'], state: 'steeping', days: '1d', col: 3, row: 1.4 },
+      { id: 102, title: 'Scheduler ignores standing allocation slices', tags: ['p/2'], state: 'diagnosis', col: 4, row: 1.4 },
+    ],
+    milestone: { name: 'Beta', due: 'Mar 15', col: 5, row: 1.4 },
+    edges: [
+      { from: 71, to: 87 },
+      { from: 69, to: 99 },
+      { from: 87, to: 91 },
+      { from: 87, to: 92, crit: true },
+      { from: 92, to: 84, crit: true },
+      { from: 84, to: 102, crit: true },
+      { from: 102, to: 'ms', crit: true },
+    ],
+    critical: [87, 92, 84, 102],
+    unattached: [78, 96, 103, 65],
+  },
+};

docs/design/ui_kits/app/index.html

@@ -0,0 +1,43 @@
+<!-- handoff copy (card tag removed) -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>CommiTea</title>
+<link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+<script src="data.js"></script>
+<style>
+  html, body { height: 100%; }
+  body { overflow: auto; }
+</style>
+</head>
+<body>
+<div id="root" style="height: 100%;"></div>
+<script type="text/babel" src="Chart.js.txt"></script>
+<script type="text/babel" src="DepsGraph.js.txt"></script>
+<script type="text/babel" src="GanttView.js.txt"></script>
+<script type="text/babel" src="ChatPanel.js.txt"></script>
+<script type="text/babel" src="FocusScreen.js.txt"></script>
+<script type="text/babel" src="BoardScreen.js.txt"></script>
+<script type="text/babel" src="RunwayScreen.js.txt"></script>
+<script type="text/babel" src="CaptureScreen.js.txt"></script>
+<script type="text/babel" src="StandupScreen.js.txt"></script>
+<script type="text/babel" src="SettingsScreen.js.txt"></script>
+<script type="text/babel" src="OnboardingScreen.js.txt"></script>
+<script type="text/babel" src="DirectivesScreen.js.txt"></script>
+<script type="text/babel" src="IssueScreen.js.txt"></script>
+<script type="text/babel" src="CalibrationScreen.js.txt"></script>
+<script type="text/babel" src="MilestoneScreen.js.txt"></script>
+<script type="text/babel" src="StatesGallery.js.txt"></script>
+<script type="text/babel" src="InboxScreen.js.txt"></script>
+<script type="text/babel" src="Shell.js.txt"></script>
+<script type="text/babel">
+ReactDOM.createRoot(document.getElementById('root')).render(<window.Shell />);
+</script>
+</body>
+</html>