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/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 });