@chatpanel/bridge 0.5.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatpanel/bridge",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "type": "module",
   "description": "Local bridge that exposes the AI coding agents installed on your machine — Claude Code (CLI), Codex (CLI), and Gemini CLI — to the ChatPanel Chrome extension over a localhost SSE endpoint. Bring your own agent.",
   "keywords": [

package/src/engines/claude.js

@@ -195,13 +195,32 @@ export async function chat({ messages, system, options, images }, emit) {
   // Explicit project dir, else null → CLI runs in home (or WSL home).
   const cwd = options.workingDir ? path.resolve(options.workingDir) : null;
 
+  const tag = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
   const args = ['--print', '--output-format', 'stream-json', '--include-partial-messages', '--verbose'];
 
+  // Browser-tools relay: ChatPanel hands this CLI the page-action tools over an
+  // HTTP MCP server the bridge hosts (which relays each call to the extension).
+  // options.mcp = { url, serverName, specs }. We pre-allow the tools so a headless
+  // run doesn't block on approval, and merge alongside the user's own MCP servers.
+  const mcpFiles = [];
+  const mcpAllow = [];
+  if (options.mcp?.url && Array.isArray(options.mcp.specs) && options.mcp.specs.length) {
+    const serverName = options.mcp.serverName || 'chatpanel_browser';
+    const cfgFile = path.join(os.tmpdir(), `chatpanel-mcp-${tag}.json`);
+    await writeFile(cfgFile, JSON.stringify({ mcpServers: { [serverName]: { type: 'http', url: options.mcp.url } } }));
+    mcpFiles.push(cfgFile);
+    args.push('--mcp-config', cfgFile);
+    for (const s of options.mcp.specs) mcpAllow.push(`mcp__${serverName}__${s.name}`);
+  }
+
   // Gate writes/shell behind the chosen mode; otherwise restrict to read-only
-  // tools so headless runs never block on an approval prompt.
+  // tools so headless runs never block on an approval prompt. The relayed browser
+  // tools are always pre-allowed (the user explicitly armed them this turn).
   if (permissionMode === 'bypassPermissions') args.push('--permission-mode', 'bypassPermissions');
-  else if (permissionMode === 'acceptEdits') args.push('--permission-mode', 'acceptEdits');
-  else args.push('--allowedTools', ...READONLY_TOOLS);
+  else if (permissionMode === 'acceptEdits') {
+    args.push('--permission-mode', 'acceptEdits');
+    if (mcpAllow.length) args.push('--allowedTools', ...mcpAllow);
+  } else args.push('--allowedTools', ...READONLY_TOOLS, ...mcpAllow);
 
   // Native Claude Code behavior; append the user's own system prompt if they set
   // one (no ChatPanel persona injected).
@@ -213,9 +232,11 @@ export async function chat({ messages, system, options, images }, emit) {
 
   // Attach images by writing them to temp files and asking Claude Code to Read
   // them — its Read tool loads images as vision (no special flag needed).
-  const tag = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
   const imageFiles = await writeImages(images, tag);
-  const cleanup = () => imageFiles.forEach((f) => unlink(f).catch(() => {}));
+  const cleanup = () => {
+    imageFiles.forEach((f) => unlink(f).catch(() => {}));
+    mcpFiles.forEach((f) => unlink(f).catch(() => {}));
+  };
   let prompt = buildPrompt(messages);
   if (imageFiles.length) {
     prompt += `\n\nThe user attached ${imageFiles.length} image file(s). Use the Read tool to view ${

package/src/engines/codex.js

@@ -19,7 +19,7 @@ import { readFile, unlink, writeFile } from 'node:fs/promises';
 import { existsSync, mkdirSync, symlinkSync, readFileSync } from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
-import { findAgentBin } from '../env.js';
+import { findAgentBin, selfMcpStdio } from '../env.js';
 
 // Idle timeout: re-armed on every stdout/stderr chunk, so a long run that keeps
 // streaming never trips it — only true silence does. Override with
@@ -146,6 +146,15 @@ export async function chat({ messages, system, options, images }, emit) {
   // local-config mode). The sandbox above still bounds what can actually happen.
   args.push('-c', 'approval_policy=never');
   if (REASONING) args.push('-c', `model_reasoning_effort=${REASONING}`);
+  // Browser tools: register the bridge's MCP server as a stdio MCP server (the
+  // bridge binary in --mcp-stdio mode), so Codex can call our page-action tools.
+  // `-c key=value` parses value as TOML; JSON.stringify yields valid TOML here.
+  if (options.mcp?.url) {
+    const name = options.mcp.serverName || 'chatpanel_browser';
+    const { command, args: pargs } = selfMcpStdio(options.mcp.url);
+    args.push('-c', `mcp_servers.${name}.command=${JSON.stringify(command)}`);
+    args.push('-c', `mcp_servers.${name}.args=${JSON.stringify(pargs)}`);
+  }
   if (options.model) args.push('-m', options.model);
   for (const f of imageFiles) args.push('-i', f); // attach images to the initial prompt
   args.push('-');

package/src/engines/custom.js

@@ -19,7 +19,7 @@ import { spawn } from 'node:child_process';
 import { writeFile, unlink } from 'node:fs/promises';
 import os from 'node:os';
 import path from 'node:path';
-import { resolveCommand, buildSpawnSpec } from '../env.js';
+import { resolveCommand, buildSpawnSpec, selfMcpStdio } from '../env.js';
 import { isProEntitled } from '../entitlement.js';
 import { handleMessage } from './claude.js';
 
@@ -187,7 +187,26 @@ export async function runSpec(spec, { messages, system, options = {}, images },
   // just before the prompt (arg mode) or get appended (stdin mode).
   const tag = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
   const imageFiles = spec.imageArg ? await writeImages(images, tag) : [];
-  const cleanup = () => imageFiles.forEach((f) => unlink(f).catch(() => {}));
+  const mcpFiles = [];
+  const cleanup = () => [...imageFiles, ...mcpFiles].forEach((f) => unlink(f).catch(() => {}));
+
+  // Browser tools: when armed (options.mcp) AND this CLI knows how to take an MCP
+  // config file (spec.mcpArg, e.g. "--mcp-config {file}"), write a standard
+  // mcpServers JSON pointing at the bridge's stdio MCP proxy and inject the flag.
+  // Covers any CLI that reads the de-facto {mcpServers:{name:{command,args}}} shape.
+  if (options.mcp?.url && spec.mcpArg) {
+    const name = options.mcp.serverName || 'chatpanel_browser';
+    const { command, args: pargs } = selfMcpStdio(options.mcp.url);
+    const cfgFile = path.join(os.tmpdir(), `chatpanel-mcp-${tag}.json`);
+    await writeFile(cfgFile, JSON.stringify({ mcpServers: { [name]: { command, args: pargs } } }));
+    mcpFiles.push(cfgFile);
+    const tmpl = String(spec.mcpArg);
+    const tokens = tmpl.includes('{file}')
+      ? tmpl.replaceAll('{file}', cfgFile).split(/\s+/).filter(Boolean)
+      : [...tmpl.split(/\s+/).filter(Boolean), cfgFile];
+    args = [...tokens, ...args];
+  }
+
   const imageTokens = imageTokensFor(spec.imageArg, imageFiles);
   let placedImages = false;
   if (imageTokens.length) {

package/src/env.js

@@ -48,6 +48,19 @@ export function isCompiledBinary() {
   return !(base.startsWith('node') || base.startsWith('bun'));
 }
 
+// How to re-invoke THIS bridge as a child process running the stdio↔HTTP MCP
+// proxy (`--mcp-stdio <url>`). Lets ANY stdio-capable MCP CLI (Codex, a custom
+// CLI) reach the bridge's HTTP MCP server using the bridge itself as the server
+// command — no extra runtime to install. Compiled binary → the binary; Node →
+// node + this entry script. Returns { command, args }.
+export function selfMcpStdio(url) {
+  const args = ['--mcp-stdio', url];
+  if (isCompiledBinary()) return { command: process.execPath, args };
+  // Node/Bun: re-run this same entry script (server.js) under the same runtime.
+  const entry = process.argv[1] || path.join(process.cwd(), 'src', 'server.js');
+  return { command: process.execPath, args: [entry, ...args] };
+}
+
 // Ask the user's login shell to locate a command — no hardcoded locations, works
 // wherever the user actually installed it.
 function shellWhich(name) {

package/src/server.js

@@ -16,6 +16,7 @@
 
 import { createServer } from 'node:http';
 import os from 'node:os';
+import { randomUUID } from 'node:crypto';
 import * as claude from './engines/claude.js';
 import * as codex from './engines/codex.js';
 import * as antigravity from './engines/antigravity.js';
@@ -24,11 +25,12 @@ import * as custom from './engines/custom.js';
 import { installService, uninstallService, serviceStatus, restartService } from './service.js';
 import { enrichPath, findAgentBin, resolveCommand } from './env.js';
 import { checkForUpdate, selfUpdate } from './update.js';
+import { callLocalMcp } from './mcp-local.js';
 
 // Hardcoded (not read from package.json) so it survives Bun's single-file
 // --compile, where package.json isn't on a readable FS. CI fails the publish if
 // this drifts from package.json, so the two can't silently diverge.
-const VERSION = '0.5.0';
+const VERSION = '0.7.0';
 const HOST = process.env.CHATPANEL_BRIDGE_HOST || '127.0.0.1';
 const PORT = Number(process.env.CHATPANEL_BRIDGE_PORT) || 4319;
 
@@ -45,6 +47,59 @@ const ENGINES = {
   custom: { engine: custom, label: 'Custom', hidden: true },
 };
 
+// --------------------------------------------------------------------------
+// Browser-tools relay. When the extension arms "Act on page" for a CLI agent, it
+// sends the tool specs in /chat. We host an HTTP MCP server (/mcp/<session>) the
+// CLI connects to; each tools/call is RELAYED to the extension over the chat SSE
+// stream (a `tool_request` event), executed there (it owns the browser), and the
+// result POSTed back to /tool-result. The bridge itself never touches the page.
+// --------------------------------------------------------------------------
+const sessions = new Map(); // sessionId -> { id, emit, specs, pending: Map, nextId }
+
+function createSession(emit, specs) {
+  const id = randomUUID();
+  const s = { id, emit, specs, pending: new Map(), nextId: 0 };
+  sessions.set(id, s);
+  return s;
+}
+
+function deleteSession(id) {
+  const s = sessions.get(id);
+  if (!s) return;
+  for (const p of s.pending.values()) p.reject(new Error('chat ended'));
+  sessions.delete(id);
+}
+
+// Ask the extension to run a tool and await its result. Resolves to MCP content.
+function relayToolCall(session, name, input) {
+  return new Promise((resolve, reject) => {
+    const id = `t${++session.nextId}`;
+    const timer = setTimeout(() => {
+      session.pending.delete(id);
+      reject(new Error('tool call timed out'));
+    }, 120_000);
+    session.pending.set(id, {
+      resolve: (result) => { clearTimeout(timer); resolve(toMcpContent(result)); },
+      reject: (e) => { clearTimeout(timer); reject(e); },
+    });
+    session.emit({ type: 'tool_request', session: session.id, id, name, input });
+  });
+}
+
+// The extension returns a string OR { text, image(dataURL) }; map to MCP content.
+function toMcpContent(result) {
+  if (result == null) return { content: [{ type: 'text', text: 'ok' }] };
+  if (typeof result === 'string') return { content: [{ type: 'text', text: result }] };
+  const content = [];
+  if (result.text) content.push({ type: 'text', text: String(result.text) });
+  if (typeof result.image === 'string') {
+    const m = /^data:([^;]+);base64,(.+)$/s.exec(result.image);
+    if (m) content.push({ type: 'image', data: m[2], mimeType: m[1] });
+  }
+  if (!content.length) content.push({ type: 'text', text: 'ok' });
+  return { content };
+}
+
 // --------------------------------------------------------------------------
 // CORS — allow the extension (chrome-extension://…) and localhost dev origins.
 // --------------------------------------------------------------------------
@@ -139,26 +194,133 @@ async function handleChat(req, res) {
   let closed = false;
   req.on('close', () => (closed = true));
 
+  const safeEmit = (obj) => { if (!closed) emit(obj); };
+
+  // Browser-tools relay: when the extension sends page-tool specs, host an MCP
+  // server for this turn and tell the engine to point the CLI at it.
+  const options = { ...(body.options || {}) };
+  let session = null;
+  if (body.pageTools?.specs?.length) {
+    session = createSession(safeEmit, body.pageTools.specs);
+    options.mcp = {
+      url: `http://${HOST}:${PORT}/mcp/${session.id}`,
+      serverName: 'chatpanel_browser',
+      specs: body.pageTools.specs,
+    };
+  }
+
   try {
     await target.engine.chat(
       {
         messages: Array.isArray(body.messages) ? body.messages : [],
         system: body.system || '',
-        options: body.options || {},
+        options,
         images: Array.isArray(body.images) ? body.images : [],
       },
-      (obj) => {
-        if (!closed) emit(obj);
-      },
+      safeEmit,
     );
   } catch (e) {
     log('error', `${body.agent} chat failed: ${e?.message || e}`);
     emit({ type: 'error', error: e?.message || String(e) });
   } finally {
+    if (session) deleteSession(session.id);
     if (!res.writableEnded) res.end();
   }
 }
 
+// POST /mcp/<session> — the HTTP MCP server the CLI agent connects to. JSON-RPC
+// over POST; tools/call relays to the extension and waits for /tool-result.
+async function handleMcp(req, res, sessionId) {
+  let msg;
+  try {
+    msg = await readBody(req);
+  } catch {
+    return json(res, 200, { jsonrpc: '2.0', id: null, error: { code: -32700, message: 'Parse error' } });
+  }
+  const session = sessions.get(sessionId);
+  const reply = (result) => {
+    if (sessionId) res.setHeader('Mcp-Session-Id', sessionId);
+    json(res, 200, { jsonrpc: '2.0', id: msg.id ?? null, result });
+  };
+  const fail = (code, message) => json(res, 200, { jsonrpc: '2.0', id: msg.id ?? null, error: { code, message } });
+
+  // Notifications (no id) — ack and ignore.
+  if (msg.id == null) { res.writeHead(202); return res.end(); }
+
+  if (msg.method === 'initialize') {
+    return reply({
+      protocolVersion: msg.params?.protocolVersion || '2025-06-18',
+      capabilities: { tools: { listChanged: false } },
+      serverInfo: { name: 'chatpanel-browser', version: VERSION },
+    });
+  }
+  if (!session) return fail(-32001, 'Session not found (chat already ended)');
+  if (msg.method === 'tools/list') {
+    return reply({
+      tools: session.specs.map((s) => ({
+        name: s.name,
+        description: s.description,
+        inputSchema: s.parameters || { type: 'object', properties: {} },
+      })),
+    });
+  }
+  if (msg.method === 'tools/call') {
+    try {
+      return reply(await relayToolCall(session, msg.params?.name, msg.params?.arguments || {}));
+    } catch (e) {
+      return reply({ content: [{ type: 'text', text: `error: ${e?.message || e}` }], isError: true });
+    }
+  }
+  return fail(-32601, `Method not found: ${msg.method}`);
+}
+
+// POST /mcp-local — proxy one JSON-RPC message to a user-configured STDIO MCP
+// server that the bridge spawns and keeps alive. Body: { server:{id,command,args,
+// env?,cwd?}, message }. Returns the full JSON-RPC response (or 202 for a
+// notification). Lets the extension use local MCP servers it can't spawn itself.
+async function handleMcpLocal(req, res) {
+  let body;
+  try {
+    body = await readBody(req);
+  } catch (e) {
+    return json(res, 400, { error: 'Bad JSON: ' + e.message });
+  }
+  const server = body.server || {};
+  const message = body.message;
+  if (!server.command || !message) return json(res, 400, { error: 'need server.command and message' });
+  try {
+    const result = await callLocalMcp(
+      { key: server.id, command: server.command, args: server.args, env: server.env, cwd: server.cwd },
+      message,
+    );
+    if (message.id == null) { res.writeHead(202); return res.end(); }
+    return json(res, 200, result); // the full JSON-RPC response message
+  } catch (e) {
+    return json(res, 200, {
+      jsonrpc: '2.0',
+      id: message.id ?? null,
+      error: { code: -32000, message: String(e?.message || e) },
+    });
+  }
+}
+
+// POST /tool-result — the extension returns a relayed tool's result.
+async function handleToolResult(req, res) {
+  let body;
+  try {
+    body = await readBody(req);
+  } catch (e) {
+    return json(res, 400, { error: 'Bad JSON: ' + e.message });
+  }
+  const session = sessions.get(body.session);
+  if (!session) return json(res, 404, { error: 'no such session' });
+  const pending = session.pending.get(body.id);
+  if (!pending) return json(res, 404, { error: 'no such pending call' });
+  session.pending.delete(body.id);
+  pending.resolve(body.result);
+  return json(res, 200, { ok: true });
+}
+
 // POST /complete → { agent, prompt, model? } → { text } — a fast, single-shot
 // completion for prompt autocomplete. Uses the engine's complete() if it has one
 // (Claude: Haiku, no tools), else a one-shot chat collected into text.
@@ -262,6 +424,14 @@ const server = createServer(async (req, res) => {
       });
     }
     if (req.method === 'POST' && url.pathname === '/chat') return handleChat(req, res);
+    if (url.pathname.startsWith('/mcp/')) {
+      const sid = decodeURIComponent(url.pathname.slice(5));
+      if (req.method === 'POST') return handleMcp(req, res, sid);
+      if (req.method === 'GET') { res.writeHead(405); return res.end(); } // no server-initiated stream
+      if (req.method === 'DELETE') { deleteSession(sid); res.writeHead(204); return res.end(); }
+    }
+    if (req.method === 'POST' && url.pathname === '/tool-result') return handleToolResult(req, res);
+    if (req.method === 'POST' && url.pathname === '/mcp-local') return handleMcpLocal(req, res);
     if (req.method === 'POST' && url.pathname === '/complete') return handleComplete(req, res);
     if (req.method === 'POST' && url.pathname === '/list-models') return handleListModels(req, res);
     if (req.method === 'POST' && url.pathname === '/agent-check') return handleAgentCheck(req, res);
@@ -277,6 +447,59 @@ function log(level, msg) {
   fn(`[chatpanel-bridge] ${msg}`);
 }
 
+// `--mcp-stdio <url>` — run as a stdio↔HTTP MCP proxy: read newline-delimited
+// JSON-RPC from stdin, forward each message to the bridge's HTTP MCP endpoint
+// (<url> = http://127.0.0.1:PORT/mcp/<session>), and write responses to stdout.
+// This lets ANY stdio-MCP CLI (Codex, a custom CLI) use the browser tools with
+// the bridge binary itself as the MCP server command — no extra runtime needed.
+function runMcpStdioProxy(url) {
+  let buf = '';
+  const queue = [];
+  let draining = false;
+  let ended = false;
+  const maybeExit = () => { if (ended && !draining && !queue.length) process.exit(0); };
+  const drain = async () => {
+    if (draining) return;
+    draining = true;
+    while (queue.length) {
+      const line = queue.shift();
+      let msg;
+      try { msg = JSON.parse(line); } catch { continue; }
+      try {
+        const res = await fetch(url, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+          body: line,
+        });
+        if (msg.id == null) continue; // notification — no response expected
+        const text = (await res.text()).trim();
+        if (text) process.stdout.write(text + '\n');
+      } catch (e) {
+        if (msg.id != null) {
+          process.stdout.write(
+            JSON.stringify({ jsonrpc: '2.0', id: msg.id, error: { code: -32000, message: String(e?.message || e) } }) + '\n',
+          );
+        }
+      }
+    }
+    draining = false;
+    maybeExit(); // stdin closed mid-flight → exit only after the queue is drained
+  };
+  process.stdin.setEncoding('utf8');
+  process.stdin.on('data', (chunk) => {
+    buf += chunk;
+    let nl;
+    while ((nl = buf.indexOf('\n')) >= 0) {
+      const line = buf.slice(0, nl).trim();
+      buf = buf.slice(nl + 1);
+      if (line) queue.push(line);
+    }
+    drain();
+  });
+  process.stdin.on('end', () => { ended = true; maybeExit(); });
+  process.stdin.resume();
+}
+
 function startServer() {
   enrichPath(); // so codex/gemini are found even under a minimal service PATH
   server.listen(PORT, HOST, async () => {
@@ -350,7 +573,15 @@ function runCli() {
   return false;
 }
 
-if (process.argv.includes('--update')) {
+const mcpStdioIdx = process.argv.indexOf('--mcp-stdio');
+if (mcpStdioIdx >= 0) {
+  const url = process.argv[mcpStdioIdx + 1];
+  if (!url) {
+    console.error('--mcp-stdio requires a URL');
+    process.exit(1);
+  }
+  runMcpStdioProxy(url);
+} else if (process.argv.includes('--update')) {
   (async () => {
     try {
       const r = await selfUpdate(VERSION);