thebird 1.2.28 → 1.2.30

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 ## [Unreleased]
 
 ### Added
+- `docs/agent-chat.js`: Gemini function-calling agentic loop; tools `read_file`, `write_file`, `run_command` dispatch to `window.__debug.container` (WebContainer FS + spawn)
+- `docs/app.js`: imports `agentGenerate` from `agent-chat.js`; chat `send()` now runs agentic tool loop; `window.__debug` constructor uses `Object.assign` merge to not overwrite terminal.js keys; `streamGenerate` removed; `convertMessages` simplified
+
+### Added (prev)
 - `docs/index.html`: GEMINI_API_KEY input + Run Agent button in Terminal tab toolbar for in-browser agent validation
 - `docs/terminal.js`: `window.__debug.runAgent(key, task)` spawns `node agent.js` with env, pipes output to terminal, tracks `{ running, output, exitCode }` in `window.__debug.validation`
 

package/CLAUDE.md

@@ -82,6 +82,27 @@ Arguments parsed in index.js lines 88-115.
 - Download errors logged with context
 - Progress logged per view: `[1/4] front view...`
 
+## docs/ Build System
+
+All frontend dependencies are vendored to `docs/vendor/` to eliminate CDN brittleness.
+
+**Vendored files:**
+- `ui-libs.js` (7.7KB): webjsx + htm — bundled with esbuild
+- `xterm-bundle.js` (345KB): @xterm/xterm + @xterm/addon-fit — bundled with esbuild
+- `webcontainer.js` (12KB): @webcontainer/api — bundled with esbuild (no runtime CDN deps)
+- `tailwind.css` (13KB): generated by @tailwindcss/cli v4, purged from `docs/**/*.{html,js}`
+- `rippleui.css` (4.7MB): downloaded directly (includes Tailwind v3 preflight, not utilities)
+- `xterm.css` (7KB): downloaded directly
+
+**Regenerate:**
+- esbuild bundles: install devDeps then run esbuild with entry files in project root
+- Tailwind: `tailwindcss --input '_tw-input.css' --output docs/vendor/tailwind.css --minify` where input contains `@import "tailwindcss"`
+- CSS files: fetch from jsdelivr directly
+
+**Key detail**: esm.sh returns stub files by default — fetch the actual `.mjs` bundle URL paths directly when downloading from esm.sh.
+
+**DevDeps**: esbuild, @tailwindcss/cli, @xterm/xterm, @xterm/addon-fit, @webcontainer/api, webjsx, htm.
+
 ## Development Constraints
 
 - Max 200 lines per file (split before hitting limit)

package/docs/agent-chat.js

@@ -0,0 +1,55 @@
+const TOOLS = [
+  { name: 'read_file', description: 'Read a file from the filesystem', parameters: { type: 'OBJECT', properties: { path: { type: 'STRING' } }, required: ['path'] } },
+  { name: 'write_file', description: 'Write content to a file', parameters: { type: 'OBJECT', properties: { path: { type: 'STRING' }, content: { type: 'STRING' } }, required: ['path', 'content'] } },
+  { name: 'run_command', description: 'Run a shell command', parameters: { type: 'OBJECT', properties: { command: { type: 'STRING' } }, required: ['command'] } },
+];
+
+const toolHandlers = {
+  read_file: async ({ path }) => {
+    const c = window.__debug.container;
+    if (!c) throw new Error('container not ready');
+    return await c.fs.readFile(path, 'utf-8');
+  },
+  write_file: async ({ path, content }) => {
+    const c = window.__debug.container;
+    if (!c) throw new Error('container not ready');
+    await c.fs.writeFile(path, content);
+    return 'written: ' + path;
+  },
+  run_command: async ({ command }) => {
+    const c = window.__debug.container;
+    if (!c) throw new Error('container not ready');
+    const proc = await c.spawn('sh', ['-c', command]);
+    let out = '';
+    await proc.output.pipeTo(new WritableStream({ write: d => { out += d; } }));
+    return out || '(no output)';
+  },
+};
+
+const BASE = 'https://generativelanguage.googleapis.com/v1beta';
+
+export async function agentGenerate(apiKey, model, contents, onChunk, onTool) {
+  while (true) {
+    const res = await fetch(`${BASE}/models/${model}:generateContent?key=${apiKey}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ contents, tools: [{ functionDeclarations: TOOLS }], generationConfig: { maxOutputTokens: 8192 } }),
+    });
+    if (!res.ok) throw new Error('Generate API ' + res.status + ': ' + await res.text());
+    const data = await res.json();
+    const parts = data.candidates?.[0]?.content?.parts || [];
+    const finish = data.candidates?.[0]?.finishReason;
+    for (const p of parts) if (p.text) onChunk(p.text);
+    const calls = parts.filter(p => p.functionCall);
+    if (finish === 'STOP' || calls.length === 0) break;
+    const toolResults = await Promise.all(calls.map(async p => {
+      const { name, args } = p.functionCall;
+      onTool(name, args);
+      let output;
+      try { output = String(await toolHandlers[name](args)); }
+      catch (e) { output = 'error: ' + e.message; }
+      return { functionResponse: { name, response: { output } } };
+    }));
+    contents = [...contents, { role: 'model', parts }, { role: 'user', parts: toolResults }];
+  }
+}

package/docs/app.js

@@ -1,5 +1,5 @@
-import { createElement, applyDiff } from 'https://esm.sh/webjsx@0.0.73';
-import htm from 'https://esm.sh/htm@3';
+import { createElement, applyDiff, htm } from './vendor/ui-libs.js';
+import { agentGenerate } from './agent-chat.js';
 
 const html = htm.bind(createElement);
 
@@ -14,53 +14,18 @@ async function fetchModels(apiKey) {
     .map(m => ({ id: m.name.replace('models/', ''), label: m.displayName || m.name }));
 }
 
-async function streamGenerate(apiKey, model, contents, onChunk) {
-  const res = await fetch(`${BASE}/models/${model}:streamGenerateContent?alt=sse&key=${apiKey}`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ contents, generationConfig: { maxOutputTokens: 8192, temperature: 0.7 } }),
-  });
-  if (!res.ok) throw new Error(`Generate API ${res.status}: ${await res.text()}`);
-  const reader = res.body.getReader();
-  const dec = new TextDecoder();
-  let buf = '';
-  while (true) {
-    const { done, value } = await reader.read();
-    if (done) break;
-    buf += dec.decode(value, { stream: true });
-    const lines = buf.split('\n');
-    buf = lines.pop();
-    for (const line of lines) {
-      if (!line.startsWith('data: ')) continue;
-      const json = line.slice(6).trim();
-      if (!json || json === '[DONE]') continue;
-      try {
-        const chunk = JSON.parse(json);
-        for (const c of (chunk.candidates || []))
-          for (const p of (c.content?.parts || []))
-            if (p.text && !p.thought) onChunk(p.text);
-      } catch {}
-    }
-  }
-}
-
 function convertMessages(messages) {
-  const contents = [];
+  const out = [];
   for (const m of messages) {
     const role = m.role === 'assistant' ? 'model' : 'user';
     if (typeof m.content === 'string') {
-      if (m.content) contents.push({ role, parts: [{ text: m.content }] });
-      continue;
-    }
-    if (Array.isArray(m.content)) {
-      const parts = m.content.map(b => {
-        if (b.type === 'text' && b.text) return { text: b.text };
-        return null;
-      }).filter(Boolean);
-      if (parts.length) contents.push({ role, parts });
+      if (m.content) out.push({ role, parts: [{ text: m.content }] });
+    } else if (Array.isArray(m.content)) {
+      const parts = m.content.flatMap(b => b.type === 'text' && b.text ? [{ text: b.text }] : []);
+      if (parts.length) out.push({ role, parts });
     }
   }
-  return contents;
+  return out;
 }
 
 class BirdChat extends HTMLElement {
@@ -72,11 +37,11 @@ class BirdChat extends HTMLElement {
       models: [], modelsLoading: false, status: '', streamingText: '',
     };
     const self = this;
-    window.__debug = {
+    Object.assign(window.__debug = window.__debug || {}, {
       get state() { return self.state; },
       get messages() { return self.state.messages; },
       get models() { return self.state.models; },
-    };
+    });
   }
 
   connectedCallback() {
@@ -167,12 +132,10 @@ class BirdChat extends HTMLElement {
       wrap.appendChild(cursor);
       const list = this.querySelector('#msg-list');
       if (list) list.appendChild(wrap);
-      await streamGenerate(apiKey, model, convertMessages(messages), chunk => {
-        full += chunk;
-        streamEl.textContent = full;
-        const l = this.querySelector('#msg-list');
-        if (l) l.scrollTop = l.scrollHeight;
-      });
+      await agentGenerate(apiKey, model, convertMessages(messages),
+        chunk => { full += chunk; streamEl.textContent = full; const l = this.querySelector('#msg-list'); if (l) l.scrollTop = l.scrollHeight; },
+        (name, args) => { full += `\n[tool: ${name}(${JSON.stringify(args)})]\n`; streamEl.textContent = full; }
+      );
       wrap.remove();
       this.setState({ messages: [...messages, { role: 'assistant', content: full || '(empty)' }], streaming: false, streamingText: '' });
       const l2 = this.querySelector('#msg-list');

package/docs/index.html

@@ -7,9 +7,9 @@
 <title>thebird — Gemini chat + terminal</title>
 <script>window.coi = { coepDegrade: () => false };</script>
 <script src="coi-serviceworker.js"></script>
-<script src="https://cdn.tailwindcss.com"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rippleui@1.12.1/dist/css/styles.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm/css/xterm.css" />
+<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)); }

package/docs/terminal.js

@@ -1,6 +1,5 @@
-import { WebContainer } from 'https://esm.sh/@webcontainer/api';
-import { Terminal } from 'https://esm.sh/@xterm/xterm';
-import { FitAddon } from 'https://esm.sh/@xterm/addon-fit';
+import { WebContainer } from './vendor/webcontainer.js';
+import { Terminal, FitAddon } from './vendor/xterm-bundle.js';
 
 const IDB_KEY = 'thebird_fs_v2';