thebird 1.2.76 → 1.2.77

package/CHANGELOG.md

@@ -8,6 +8,11 @@
 - `lib/circuit-breaker.js`: `createCircuitBreaker()` — per-provider failure tracking with auto-recovery after cooldown
 - `lib/capabilities.js`: `getCapabilities()` / `stripUnsupported()` — provider capability metadata with automatic feature stripping and warnings
 - `lib/router-stream.js`: Router logic extracted from index.js — circuit breaker and capability checks integrated
+- `docs/tui.css`: TUI (text user interface) theme — monospace, green-on-black, box-drawing borders, scanline overlay, ASCII spinner
+
+### Changed
+- `docs/index.html`: Restyled to TUI aesthetic — ASCII art header, bracket-style tabs, removed Tailwind/RippleUI dependencies
+- `docs/app.js`: Chat UI uses TUI-styled classes — monospace messages with `> ` / `< ` prefixes, bracket buttons
 
 ### Changed
 - `index.js`: Trimmed from 177 to 104 lines by extracting router logic to lib/router-stream.js

package/docs/app.js

@@ -103,51 +103,44 @@ class BirdChat extends HTMLElement {
       html`<option value=${id} selected=${id === providerType}>${p.label}</option>`);
 
     applyDiff(this, html`
-      <div class="flex flex-col h-full">
-        <header class="navbar bg-base-200 border-b border-base-300 gap-2 flex-wrap px-4 py-2">
-          <span class="text-primary font-bold text-lg mr-2">🐦 thebird</span>
-          <div class="flex gap-2 flex-1 min-w-0 items-center flex-wrap">
-            <select class="select select-sm select-bordered"
-              onchange=${e => this.setProvider(e.target.value)}>${provOpts}</select>
-            ${(providerType === 'custom' || providerType === 'acp') ? html`
-              <input type="text" class="input input-sm input-bordered flex-1 min-w-[160px]"
-                placeholder=${providerType === 'acp' ? 'ws://localhost:3000' : 'https://your-endpoint/v1'} value=${baseUrl}
-                onchange=${e => { localStorage.setItem('provider_base_url', e.target.value); this.setState({ baseUrl: e.target.value }); }} />` : ''}
-            ${providerType !== 'acp' ? html`<input id="api-key-input" type="password" class="input input-sm input-bordered flex-1 min-w-[140px]"
-              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();
-              }} />` : ''}
-            <div class="relative">
-              ${modelsLoading
-                ? html`<span class="loading loading-spinner loading-sm text-primary"></span>`
-                : html`<select class="select select-sm select-bordered" value=${model}
-                    onchange=${e => { localStorage.setItem('provider_model', e.target.value); this.setState({ model: e.target.value }); }}>${opts}</select>`}
-            </div>
-            <button class="btn btn-sm btn-ghost" onclick=${() => this.setState({ messages: [], status: '' })}>Clear</button>
-          </div>
-        </header>
-
-        <div id="msg-list" class="flex-1 overflow-y-auto flex flex-col gap-3 p-4">
+      <div style="display:flex;flex-direction:column;height:100%">
+        <div class="tui-toolbar">
+          <label>provider:</label>
+          <select class="tui-select" onchange=${e => this.setProvider(e.target.value)}>${provOpts}</select>
+          ${(providerType === 'custom' || providerType === 'acp') ? html`
+            <input type="text" class="tui-input" style="flex:1;min-width:140px"
+              placeholder=${providerType === 'acp' ? 'ws://localhost:3000' : 'https://your-endpoint/v1'} value=${baseUrl}
+              onchange=${e => { localStorage.setItem('provider_base_url', e.target.value); this.setState({ baseUrl: e.target.value }); }} />` : ''}
+          ${providerType !== 'acp' ? 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();
+            }} />` : ''}
+          ${modelsLoading
+            ? html`<span class="tui-spinner"></span>`
+            : html`<select class="tui-select" value=${model}
+                onchange=${e => { localStorage.setItem('provider_model', e.target.value); this.setState({ model: e.target.value }); }}>${opts}</select>`}
+          <button class="tui-btn" onclick=${() => this.setState({ messages: [], status: '' })}>[clear]</button>
+        </div>
+
+        <div id="msg-list" class="tui-msglist">
           ${messages.map((m, i) => html`
-            <div key=${i} class=${'flex ' + (m.role === 'user' ? 'justify-end' : 'justify-start')}>
-              <div class=${'msg-bubble card px-4 py-3 text-sm leading-relaxed ' + (m.role === 'user' ? 'bg-primary text-primary-content' : 'bg-base-200 text-base-content')}>${m.content}</div>
-            </div>`)}
-          ${streaming && !streamingText && html`<div class="flex justify-start"><div class="card bg-base-200 px-4 py-3"><span class="loading loading-dots loading-sm"></span></div></div>`}
+            <div key=${i} class=${'tui-msg ' + m.role}>${m.content}</div>`)}
+          ${streaming && !streamingText && html`<div class="tui-msg assistant"><span class="tui-spinner"></span> thinking...</div>`}
         </div>
 
-        ${status && html`<div class="text-xs text-error px-4 pb-1">${status}</div>`}
+        ${status && html`<div class="tui-error-text" style="padding:0 1ch">${status}</div>`}
 
-        <form class="flex gap-2 p-3 border-t border-base-300 bg-base-200" onsubmit=${e => { e.preventDefault(); this.send(); }}>
-          <textarea id="chat-input" class="textarea textarea-bordered flex-1 resize-none min-h-[42px] max-h-[120px] text-sm"
-            placeholder="Message… (Shift+Enter for newline)" rows="1" disabled=${streaming}
+        <form class="tui-compose" onsubmit=${e => { e.preventDefault(); this.send(); }}>
+          <textarea id="chat-input" class="tui-textarea" style="flex:1;resize:none;min-height:24px;max-height:120px"
+            placeholder="type message... (shift+enter for newline)" rows="1" disabled=${streaming}
             onkeydown=${e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); this.send(); } }}
             oninput=${e => { e.target.style.height = 'auto'; e.target.style.height = Math.min(e.target.scrollHeight, 120) + 'px'; }}></textarea>
-          <button type="submit" class="btn btn-primary self-end" disabled=${streaming}>
-            ${streaming ? html`<span class="loading loading-spinner loading-sm"></span>` : 'Send'}
+          <button type="submit" class="tui-btn primary" disabled=${streaming}>
+            ${streaming ? html`<span class="tui-spinner"></span>` : '[send]'}
           </button>
         </form>
       </div>`);
@@ -167,12 +160,11 @@ class BirdChat extends HTMLElement {
     try {
       let full = '';
       const streamEl = document.createElement('div');
-      streamEl.className = 'msg-bubble card bg-base-200 text-base-content px-4 py-3 text-sm leading-relaxed';
+      streamEl.className = 'tui-msg assistant';
       const cursor = document.createElement('span');
-      cursor.className = 'animate-pulse ml-1';
-      cursor.textContent = '▋';
+      cursor.style.cssText = 'animation:blink 0.5s step-end infinite';
+      cursor.textContent = '█';
       const wrap = document.createElement('div');
-      wrap.className = 'flex justify-start';
       wrap.appendChild(streamEl);
       wrap.appendChild(cursor);
       const list = this.querySelector('#msg-list');

package/docs/index.html

@@ -1,43 +1,38 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark">
+<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="version" content="1.2.23">
-<title>thebird — Gemini chat + terminal</title>
+<title>thebird — TUI</title>
 <script>window.coi = { coepDegrade: () => false };</script>
 <script src="coi-serviceworker.js"></script>
-<link rel="stylesheet" href="vendor/tailwind.css" />
-<link rel="stylesheet" href="vendor/rippleui.css" />
 <link rel="stylesheet" href="vendor/xterm.css" />
-<style>
-  html, body { height: 100%; background: #0f1117; }
-  .tab-active { border-bottom: 2px solid oklch(var(--p)); }
-bird-chat { display: flex; flex-direction: column; height: 100%; }
-  .msg-bubble { max-width: 680px; white-space: pre-wrap; word-break: break-word; }
-  #msg-list { scroll-behavior: smooth; }
-</style>
+<link rel="stylesheet" href="tui.css" />
 </head>
-<body class="bg-base-100 text-base-content h-full">
-<div class="flex flex-col h-full">
-  <div class="flex border-b border-base-300 bg-base-200 gap-2 px-4 pt-2 shrink-0">
-    <button id="tab-chat" class="px-3 py-1 text-sm tab-active" onclick="switchTab('chat')">Chat</button>
-    <button id="tab-term" class="px-3 py-1 text-sm" onclick="switchTab('term')">Terminal</button>
-    <button id="tab-preview" class="px-3 py-1 text-sm" onclick="switchTab('preview')">Preview</button>
+<body>
+<div style="display:flex;flex-direction:column;height:100%">
+  <div class="tui-header"><pre class="logo" style="margin:0;padding:2px 1ch">  ▀█▀ █░█ █▀▀ █▄▄ █ █▀█ █▀▄   <span class="ver">v1.2</span>
+   █  █▀█ ██▄ █▄█ █ █▀▄ █▄▀   <span style="color:#1a9a1a">anthropic → gemini/openai bridge</span></pre></div>
+  <div class="tui-tabs">
+    <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>
   </div>
-  <div id="pane-chat" class="flex-1 overflow-hidden">
+  <div id="pane-chat" style="flex:1;overflow:hidden;display:flex;flex-direction:column">
     <bird-chat></bird-chat>
   </div>
-  <div id="pane-term" class="flex flex-col flex-1 overflow-hidden hidden bg-black">
-    <div id="term-container" class="flex-1"></div>
+  <div id="pane-term" class="hidden" style="flex:1;overflow:hidden;display:flex;flex-direction:column">
+    <div id="term-container" style="flex:1"></div>
   </div>
-  <div id="pane-preview" class="flex flex-col flex-1 overflow-hidden hidden">
-    <div class="flex gap-2 px-3 py-1 bg-base-200 border-b border-base-300 shrink-0">
-      <button class="btn btn-xs btn-ghost" onclick="refreshPreview()">↺ Reload</button>
+  <div id="pane-preview" class="hidden" style="flex:1;overflow:hidden;display:flex;flex-direction:column">
+    <div class="tui-toolbar">
+      <button class="tui-btn" onclick="refreshPreview()">[reload]</button>
     </div>
-    <iframe id="preview-frame" class="w-full flex-1 border-0" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>
+    <iframe id="preview-frame" style="width:100%;flex:1;border:0;background:#000" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>
   </div>
 </div>
+<div class="tui-scanline"></div>
 <script>
 function callExpressRoute(path, method) {
   const handlers = window.__debug?.shell?.httpHandlers || {};
@@ -64,12 +59,13 @@ async function refreshPreview() {
   if (result) { iframe.srcdoc = result.body; return; }
   const snap = window.__debug?.idbSnapshot || {};
   if (snap['index.html']) { iframe.srcdoc = snap['index.html']; return; }
-  iframe.srcdoc = '<p style="font-family:sans-serif;padding:2rem;color:#888">No express app running and no index.html in filesystem.<br>Run <code>node app.js</code> in the terminal.</p>';
+  iframe.srcdoc = '<pre style="color:#33ff33;padding:1ch;font-family:monospace">No express app running.\nRun node app.js in terminal.</pre>';
 }
 function switchTab(t) {
   ['chat', 'term', 'preview'].forEach(id => {
     document.getElementById('pane-' + id).classList.toggle('hidden', id !== t);
-    document.getElementById('tab-' + id).classList.toggle('tab-active', id === t);
+    const tab = document.getElementById('tab-' + id);
+    tab.classList.toggle('active', id === t);
   });
   if (t === 'preview') refreshPreview();
 }

package/docs/tui.css

@@ -0,0 +1,131 @@
+:root {
+  --tui-fg: #33ff33;
+  --tui-fg-dim: #1a9a1a;
+  --tui-fg-bright: #66ff66;
+  --tui-bg: #0a0a0a;
+  --tui-bg-alt: #111311;
+  --tui-border: #33ff33;
+  --tui-border-dim: #1a5a1a;
+  --tui-accent: #ffcc00;
+  --tui-error: #ff3333;
+  --tui-user: #00ccff;
+}
+*, *::before, *::after { font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'SF Mono', 'Consolas', monospace !important; }
+html, body { background: var(--tui-bg); color: var(--tui-fg); height: 100%; margin: 0; font-size: 14px; line-height: 1.4; }
+::selection { background: var(--tui-fg); color: var(--tui-bg); }
+.tui-header {
+  border-bottom: 1px solid var(--tui-border-dim);
+  background: var(--tui-bg);
+  padding: 0;
+  white-space: pre;
+  font-size: 11px;
+  line-height: 1.2;
+  color: var(--tui-fg-dim);
+  overflow: hidden;
+}
+.tui-header .logo { color: var(--tui-fg-bright); }
+.tui-header .ver { color: var(--tui-accent); }
+.tui-tabs {
+  display: flex;
+  gap: 0;
+  background: var(--tui-bg);
+  border-bottom: 1px solid var(--tui-border-dim);
+  padding: 0 1ch;
+}
+.tui-tab {
+  background: none;
+  border: 1px solid var(--tui-border-dim);
+  border-bottom: none;
+  color: var(--tui-fg-dim);
+  padding: 2px 2ch;
+  cursor: pointer;
+  font-size: 13px;
+  margin-bottom: -1px;
+  position: relative;
+}
+.tui-tab:hover { color: var(--tui-fg); }
+.tui-tab.active {
+  color: var(--tui-accent);
+  border-color: var(--tui-border);
+  background: var(--tui-bg-alt);
+  border-bottom: 1px solid var(--tui-bg-alt);
+}
+.tui-input, .tui-select, .tui-textarea {
+  background: var(--tui-bg);
+  border: 1px solid var(--tui-border-dim);
+  color: var(--tui-fg);
+  padding: 2px 1ch;
+  font-size: 13px;
+  outline: none;
+}
+.tui-input:focus, .tui-select:focus, .tui-textarea:focus {
+  border-color: var(--tui-border);
+  box-shadow: 0 0 4px rgba(51, 255, 51, 0.15);
+}
+.tui-select { appearance: none; padding-right: 2ch; 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='%2333ff33'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5ch center; }
+.tui-btn {
+  background: var(--tui-bg);
+  border: 1px solid var(--tui-border-dim);
+  color: var(--tui-fg);
+  padding: 2px 2ch;
+  cursor: pointer;
+  font-size: 13px;
+}
+.tui-btn:hover { border-color: var(--tui-border); color: var(--tui-fg-bright); }
+.tui-btn.primary { border-color: var(--tui-accent); color: var(--tui-accent); }
+.tui-btn.primary:hover { background: var(--tui-accent); color: var(--tui-bg); }
+.tui-msg {
+  max-width: 72ch;
+  padding: 4px 1ch;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 13px;
+  line-height: 1.4;
+}
+.tui-msg.user { color: var(--tui-user); }
+.tui-msg.user::before { content: '> '; color: var(--tui-user); }
+.tui-msg.assistant { color: var(--tui-fg); }
+.tui-msg.assistant::before { content: '< '; color: var(--tui-fg-dim); }
+.tui-status { color: var(--tui-accent); font-size: 12px; }
+.tui-error-text { color: var(--tui-error); font-size: 12px; }
+.tui-spinner::after { content: '⠋'; animation: tui-spin 0.6s steps(6) infinite; }
+@keyframes tui-spin {
+  0% { content: '⠋'; } 16% { content: '⠙'; } 33% { content: '⠹'; }
+  50% { content: '⠸'; } 66% { content: '⠼'; } 83% { content: '⠴'; }
+}
+.tui-toolbar {
+  display: flex;
+  gap: 1ch;
+  padding: 2px 1ch;
+  border-bottom: 1px solid var(--tui-border-dim);
+  background: var(--tui-bg);
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 13px;
+}
+.tui-toolbar label { color: var(--tui-fg-dim); font-size: 12px; }
+.tui-msglist {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1ch;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.tui-compose {
+  display: flex;
+  gap: 1ch;
+  padding: 4px 1ch;
+  border-top: 1px solid var(--tui-border-dim);
+  background: var(--tui-bg);
+}
+.tui-scanline {
+  pointer-events: none;
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
+  z-index: 9999;
+}
+@keyframes blink { 50% { opacity: 0; } }
+#pane-term { background: #000; }
+.hidden { display: none !important; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thebird",
-  "version": "1.2.76",
+  "version": "1.2.77",
   "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"