thebird 1.2.92 → 1.2.94

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/docs/app.js

@@ -66,14 +66,15 @@ class BirdChat extends HTMLElement {
 
   renderBaseUrlInput() {
     const { providerType, baseUrl } = this.state;
-    if (providerType !== 'custom' && providerType !== 'kilo' && providerType !== 'opencode') return null;
-    const ph = providerType === 'kilo' ? 'http://localhost:4780' : (providerType === 'opencode' ? 'http://localhost:4790' : 'https://your-endpoint/v1');
+    if (providerType !== 'custom' && providerType !== 'kilo' && providerType !== 'opencode' && providerType !== 'acp2openai') return null;
+    const phMap = { kilo: 'http://localhost:4780', opencode: 'http://localhost:4790', acp2openai: 'http://localhost:4800/v1', custom: 'https://your-endpoint/v1' };
+    const ph = phMap[providerType] || phMap.custom;
     return html`<input type="text" class="tui-input" style="flex:1;min-width:140px" placeholder=${ph} value=${baseUrl}
       onchange=${e => { localStorage.setItem('provider_base_url', e.target.value); this.setState({ baseUrl: e.target.value }); }} />`;
   }
   renderApiKeyInput() {
     const { providerType, apiKey } = this.state;
-    if (providerType === 'kilo' || providerType === 'opencode') return null;
+    if (providerType === 'kilo' || providerType === 'opencode' || providerType === 'acp2openai') return null;
     const provDef = PROVIDERS[providerType] || PROVIDERS.custom;
     return html`<input id="api-key-input" type="password" class="tui-input" style="flex:1;min-width:120px" placeholder=${provDef.keyPlaceholder} value=${apiKey}
       onchange=${e => { const v = e.target.value.trim(); localStorage.setItem('provider_api_key', v); this.setState({ apiKey: v }); if (v) this.loadModels(); }} />`;
@@ -128,7 +129,7 @@ class BirdChat extends HTMLElement {
     const text = input?.value.trim();
     if (!text || this.state.streaming) return;
     const { apiKey, model, providerType, baseUrl } = this.state;
-    if (!apiKey && providerType !== 'kilo' && providerType !== 'opencode') { this.setState({ status: 'Enter an API key above.' }); return; }
+    if (!apiKey && providerType !== 'kilo' && providerType !== 'opencode' && providerType !== 'acp2openai') { this.setState({ status: 'Enter an API key above.' }); return; }
     input.value = '';
     input.style.height = 'auto';
     const normalizedMessages = [...this.state.messages, { role: 'user', content: text }].map(m => ({

package/docs/chat-providers.js

@@ -8,6 +8,7 @@ export const PROVIDERS = {
   cerebras: { label: 'Cerebras',        baseUrl: 'https://api.cerebras.ai/v1',                      keyPlaceholder: 'CEREBRAS_API_KEY', models: ['gpt-oss-120b', 'llama3.1-8b'] },
   kilo:     { label: 'Kilo Code',              baseUrl: 'http://localhost:4780',                     keyPlaceholder: '(no key needed)', models: ['x-ai/grok-code-fast-1:optimized:free', 'kilo-auto/free', 'openrouter/free', 'stepfun/step-3.5-flash:free', 'nvidia/nemotron-3-super-120b-a12b:free', 'bytedance-seed/dola-seed-2.0-pro:free'] },
   opencode: { label: 'opencode (zen)',         baseUrl: 'http://localhost:4790',                     keyPlaceholder: '(needs opencode auth login)', models: ['minimax-m2.5-free', 'nemotron-3-super-free'] },
+  acp2openai: { label: 'acp2openai (OpenAI-compat)', baseUrl: 'http://localhost:4800/v1',             keyPlaceholder: '(no key needed)', models: ['kilo/x-ai/grok-code-fast-1:optimized:free', 'kilo/kilo-auto/free', 'kilo/openrouter/free', 'opencode/minimax-m2.5-free'] },
   custom:   { label: 'Custom (OpenAI-compat)', baseUrl: '',                                          keyPlaceholder: 'API_KEY',        models: [] },
 };
 
@@ -37,17 +38,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.92",
+  "version": "1.2.94",
   "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"