thebird 1.2.91 → 1.2.93

package/CHANGELOG.md

@@ -1,4 +1,14 @@
 
+## [unreleased] 2026-04-21 theme system + richer chat output
+- feat: dark/light theme via [data-theme] attribute; pre-paint boot script respects localStorage + prefers-color-scheme
+- feat: theme toggle button (◐) in tabs row; window.setTheme / toggleTheme / __debug.theme
+- feat: xterm terminal re-themes live on tui-theme-change event (reads CSS vars)
+- feat: preview iframe + "no files yet" placeholder inherit current theme
+- fix: select arrow uses CSS gradients instead of hardcoded-fill SVG — theme-reactive
+- feat: tool-event now renders output + error inline (not just input)
+- feat: tool-event sig includes input length + output presence — multiple state snapshots during streaming
+- feat: unknown-part carries raw part.text for diagnostic visibility
+
 ## [unreleased] 2026-04-21 chat observability — rich ACP/kilo/opencode event stream
 - feat: kilo-http-stream emits status, model-info, reasoning-delta, tool-event, file-event, step-start/finish, file-mirrored, unknown-part
 - feat: PART_HANDLERS dispatch table replaces part-type branching (kilo + opencode unified)

package/CLAUDE.md

@@ -171,6 +171,24 @@ Run examples against real Gemini API to validate message translation.
 - `stripUnsupported(params, caps)` — removes unsupported features, returns warnings
 - Defaults: streaming, toolUse, vision, systemMessage = true; jsonMode = false
 
+## Chat Observability (docs/)
+
+`docs/kilo-http-stream.js` emits rich events via `PART_HANDLERS` dispatch table (kilo HTTP + opencode SSE unified):
+- `status` — lifecycle (connecting, session id, POST status, mirror step)
+- `model-info` — { providerID, modelID } actually routed to (may differ from requested when gm agent plugin hijacks)
+- `text-delta` / `reasoning-delta` — accumulating growth
+- `tool-event` — { toolName, status, input, output, error, id } from `part.type === 'tool'` state
+- `file-event` / `file-mirrored` — agent file writes / sandbox mirror results
+- `step-start` / `step-finish` — { id, tokens?, cost? } boundaries
+- `unknown-part` — diagnostic for unhandled part.type
+
+`window.__debug.agent` permanent registry (populated by `agent-chat.js`):
+`{ provider, model, modelActual, providerActual, active, startedAt, finishedAt, durationMs, textChars, reasoningChars, toolCalls, files, steps, lastTool, lastError, events: [...rolling 300] }`
+
+Per-provider rolling logs: `window.__debug.kilo.events`, `window.__debug.opencode.events`.
+
+UI consumes via 3 channels: `onChunk(delta)` text streaming | `onEvent(ev)` badge rendering via `renderEvent()` dispatch table in `docs/chat-providers.js` | 4Hz poll on `window.__debug.agent` → `#agent-stats` strip (live counters).
+
 ## Files
 
 - `lib/convert.js`: Message/tool translation logic

package/docs/chat-providers.js

@@ -37,17 +37,24 @@ export async function fetchModels(providerType, baseUrl, apiKey) {
 const fmtArgs = a => { try { const s = JSON.stringify(a); return s.length > 140 ? s.slice(0, 137) + '...' : s; } catch { return '?'; } };
 const badge = (label, cls) => `\n\n[${cls}] ${label}\n`;
 
+const fmtOut = o => { if (o == null) return ''; const s = typeof o === 'string' ? o : JSON.stringify(o); return s.length > 400 ? s.slice(0, 397) + '...' : s; };
+
 const RENDERERS = {
   status: ev => badge('status: ' + ev.message, 'i'),
   'model-info': ev => badge('model: ' + (ev.providerID || '') + '/' + ev.modelID, 'i'),
-  'tool-event': ev => badge('tool ' + (ev.status || '') + ': ' + ev.toolName + ' ' + fmtArgs(ev.input), 't'),
+  'tool-event': ev => {
+    const head = badge('tool ' + (ev.status || '') + ': ' + ev.toolName + ' ' + fmtArgs(ev.input), 't');
+    const out = ev.output != null ? '\n  → ' + fmtOut(ev.output).replace(/\n/g, '\n    ') + '\n' : '';
+    const err = ev.error ? '\n  ✗ ' + fmtOut(ev.error) + '\n' : '';
+    return head + out + err;
+  },
   'tool-call': ev => badge('tool: ' + ev.toolName + ' ' + fmtArgs(ev.args), 't'),
   'file-event': ev => badge('file: ' + (ev.filename || ev.url || '?'), 'f'),
   'file-mirrored': ev => badge('wrote: ' + ev.path, 'f'),
   'reasoning-delta': ev => ev.textDelta,
   'step-start': () => badge('step start', 's'),
   'step-finish': ev => badge('step finish' + (ev.tokens ? ' tokens=' + JSON.stringify(ev.tokens) : ''), 's'),
-  'unknown-part': ev => badge('?part ' + ev.partType, 'i'),
+  'unknown-part': ev => badge('?part ' + ev.partType + (ev.text ? ' text=' + fmtOut(ev.text) : ''), 'i'),
 };
 
 export function renderEvent(ev) { const r = RENDERERS[ev.type]; return r ? r(ev) : ''; }

package/docs/index.html

@@ -7,6 +7,22 @@
 <title>thebird — TUI</title>
 <link rel="stylesheet" href="vendor/xterm.css" />
 <link rel="stylesheet" href="tui.css" />
+<script>
+(() => {
+  const saved = localStorage.getItem('tui_theme');
+  const prefDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+  const theme = saved || (prefDark ? 'dark' : 'light');
+  document.documentElement.setAttribute('data-theme', theme);
+  window.setTheme = t => {
+    document.documentElement.setAttribute('data-theme', t);
+    localStorage.setItem('tui_theme', t);
+    window.dispatchEvent(new CustomEvent('tui-theme-change', { detail: t }));
+  };
+  window.toggleTheme = () => window.setTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
+  window.matchMedia?.('(prefers-color-scheme: dark)').addEventListener?.('change', e => { if (!localStorage.getItem('tui_theme')) window.setTheme(e.matches ? 'dark' : 'light'); });
+  (window.__debug = window.__debug || {}).theme = { get current() { return document.documentElement.getAttribute('data-theme'); }, set: window.setTheme, toggle: window.toggleTheme };
+})();
+</script>
 </head>
 <body>
 <div style="display:flex;flex-direction:column;height:100%">
@@ -16,6 +32,7 @@
     <button id="tab-chat" class="tui-tab active" onclick="switchTab('chat')">Chat</button>
     <button id="tab-term" class="tui-tab" onclick="switchTab('term')">Terminal</button>
     <button id="tab-preview" class="tui-tab" onclick="switchTab('preview')">Preview</button>
+    <button class="tui-tab" style="margin-left:auto" onclick="toggleTheme()" title="Toggle dark/light">◐</button>
   </div>
   <div id="pane-chat" style="flex:1;overflow:hidden;display:flex;flex-direction:column">
     <bird-chat></bird-chat>
@@ -27,7 +44,7 @@
     <div class="tui-toolbar">
       <button class="tui-btn" onclick="refreshPreview()">[reload]</button>
     </div>
-    <iframe id="preview-frame" style="width:100%;flex:1;border:0;background:#000" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>
+    <iframe id="preview-frame" style="width:100%;flex:1;border:0;background:var(--paper)" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>
   </div>
 </div>
 <script>
@@ -77,7 +94,9 @@ async function refreshPreview() {
   const htmlFiles = Object.keys(snap).filter(k => k.endsWith('.html'));
   const pick = htmlFiles.find(k => k === 'index.html') || htmlFiles[0];
   if (pick) { iframe.srcdoc = snap[pick]; return; }
-  iframe.srcdoc = '<pre style="color:#0B0B09;background:#EFE9DD;padding:1ch;font-family:monospace">no files yet</pre>';
+  const cs = getComputedStyle(document.documentElement);
+  const fg = cs.getPropertyValue('--ink').trim(), bg = cs.getPropertyValue('--paper').trim();
+  iframe.srcdoc = `<pre style="color:${fg};background:${bg};padding:1ch;font-family:monospace">no files yet</pre>`;
 }
 function switchTab(t) {
   ['chat', 'term', 'preview'].forEach(id => {

package/docs/kilo-http-stream.js

@@ -18,9 +18,9 @@ const PART_HANDLERS = {
     }
   },
   tool: (part, st, emit) => {
-    const key = part.id + ':' + (part.state?.status || '');
-    if (st.seenTool.has(key)) return;
-    st.seenTool.add(key);
+    const sig = part.id + ':' + (part.state?.status || '') + ':' + JSON.stringify(part.state?.input || '').length + ':' + (part.state?.output ? 1 : 0);
+    if (st.seenTool.has(sig)) return;
+    st.seenTool.add(sig);
     emit({ type: 'tool-event', toolName: part.tool || part.state?.tool, status: part.state?.status, input: part.state?.input, output: part.state?.output, error: part.state?.error, id: part.id });
   },
   file: (part, st, emit) => {
@@ -80,7 +80,7 @@ export async function* streamKiloHTTP({ url, model, messages, providerType, agen
           if (part?.sessionID !== sessionId || !assistantMsgs.has(part.messageID)) return;
           const h = PART_HANDLERS[part.type];
           if (h) h(part, st, push);
-          else push({ type: 'unknown-part', partType: part.type, id: part.id });
+          else push({ type: 'unknown-part', partType: part.type, id: part.id, text: part.text, raw: part });
         }
       } catch (_) {}
     };
@@ -113,7 +113,7 @@ export async function* streamKiloHTTP({ url, model, messages, providerType, agen
       const pending = [];
       const pushLocal = ev => { emit(ev); pending.push(ev); };
       if (h) h(part, st, pushLocal);
-      else pushLocal({ type: 'unknown-part', partType: part.type, id: part.id });
+      else pushLocal({ type: 'unknown-part', partType: part.type, id: part.id, text: part.text, raw: part });
       for (const ev of pending) yield ev;
     }
   }

package/docs/terminal.js

@@ -57,12 +57,22 @@ async function boot() {
   window.__debug = window.__debug || {};
   window.__debug.terminal = { get state() { return bootActor.getSnapshot().value; } };
 
-  const term = new Terminal({ theme: { background: '#000000', foreground: '#33ff33' }, convertEol: true });
+  const readTermTheme = () => {
+    const cs = getComputedStyle(document.documentElement);
+    return {
+      background: cs.getPropertyValue('--paper').trim() || '#000',
+      foreground: cs.getPropertyValue('--ink').trim() || '#ccc',
+      cursor: cs.getPropertyValue('--green').trim() || '#3FA93A',
+      selectionBackground: cs.getPropertyValue('--green').trim() || '#3FA93A',
+    };
+  };
+  const term = new Terminal({ theme: readTermTheme(), convertEol: true });
   const fit = new FitAddon();
   term.loadAddon(fit);
   term.open(el);
   fit.fit();
   window.addEventListener('resize', () => fit.fit());
+  window.addEventListener('tui-theme-change', () => { term.options.theme = readTermTheme(); });
 
   const saved = await idbLoad();
   let files;

package/docs/tui.css

@@ -1,7 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
-:root {
+:root, [data-theme="light"] {
   --paper: #EFE9DD;
   --ink: #0B0B09;
+  --ink-rgb: 11,11,9;
+  --paper-rgb: 239,233,221;
   --ink-dim: rgba(11,11,9,0.55);
   --ink-hair: rgba(11,11,9,0.18);
   --surface: #F6F1E7;
@@ -19,6 +21,22 @@
   --dur-base: 160ms;
   --ease: cubic-bezier(0.2,0,0,1);
 }
+[data-theme="dark"] {
+  --paper: #0B0B09;
+  --ink: #EFE9DD;
+  --ink-rgb: 239,233,221;
+  --paper-rgb: 11,11,9;
+  --ink-dim: rgba(239,233,221,0.55);
+  --ink-hair: rgba(239,233,221,0.18);
+  --surface: #17160F;
+  --surface-2: rgba(239,233,221,0.04);
+  --green: #3FA93A;
+  --green-fg: #0B0B09;
+  --green-deep: #6CE06A;
+  --flame: #FF6B4A;
+  --link: #7FA2FF;
+  --user: #7FA2FF;
+}
 *, *::before, *::after { box-sizing: border-box; border: 0; outline: 0; border-radius: 0; font-family: var(--ff-mono); }
 :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
 html, body { background: var(--paper); color: var(--ink); height: 100%; margin: 0; font-size: 13px; line-height: 1.45; }
@@ -71,7 +89,15 @@ html, body { background: var(--paper); color: var(--ink); height: 100%; margin:
   border-bottom-color: var(--green);
   background: var(--paper);
 }
-.tui-select { appearance: none; padding-right: 3ch; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%230B0B09'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75ch center; }
+.tui-select {
+  appearance: none;
+  padding-right: 3ch;
+  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%);
+  background-position: right 1.2ch center, right 0.6ch center;
+  background-size: 5px 5px, 5px 5px;
+  background-repeat: no-repeat;
+}
+.tui-select::-ms-expand { display: none; }
 .tui-btn {
   background: transparent;
   color: var(--ink);
@@ -155,6 +181,6 @@ html, body { background: var(--paper); color: var(--ink); height: 100%; margin:
   background: var(--surface);
 }
 @keyframes blink { 50% { opacity: 0; } }
-#pane-term { background: var(--ink); }
+#pane-term { background: var(--paper); }
 #pane-term .xterm { padding: 1ch; }
 .hidden { display: none !important; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thebird",
-  "version": "1.2.91",
+  "version": "1.2.93",
   "description": "Anthropic SDK to Gemini streaming bridge — drop-in proxy that translates Anthropic message format and tool calls to Google Gemini",
   "scripts": {
     "start": "node serve.js"