@chatpanel/bridge 0.3.3 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatpanel/bridge",
-  "version": "0.3.3",
+  "version": "0.4.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

@@ -14,10 +14,27 @@
 // permissionMode is 'acceptEdits'/'bypassPermissions' in ChatPanel Settings.
 
 import { spawn } from 'node:child_process';
+import { writeFile, unlink } from 'node:fs/promises';
 import os from 'node:os';
 import path from 'node:path';
 import { resolveClaude, buildSpawnSpec, isCompiledBinary } from '../env.js';
 
+// Write base64 data-URL images to temp files. Claude Code reads them with its
+// Read tool (which feeds images to the model as vision), so we just reference the
+// paths in the prompt — no custom image flag needed. Returns paths (caller cleans).
+async function writeImages(images, tag) {
+  const files = [];
+  for (let i = 0; i < (images?.length || 0); i++) {
+    const m = /^data:([^;]+);base64,(.+)$/s.exec(images[i]?.dataUrl || '');
+    if (!m) continue;
+    const ext = (m[1].split('/')[1] || 'png').replace(/[^a-z0-9]/gi, '').slice(0, 5) || 'png';
+    const file = path.join(os.tmpdir(), `chatpanel-claude-img-${tag}-${i}.${ext}`);
+    await writeFile(file, Buffer.from(m[2], 'base64'));
+    files.push(file);
+  }
+  return files;
+}
+
 // Idle timeout: kill the run only after this long with NO output. The timer
 // re-arms on every stdout/stderr chunk, so a task that keeps streaming can run
 // indefinitely — only a truly stuck/silent process is killed. Override with
@@ -173,7 +190,7 @@ export function handleMessage(msg, emit, alreadyStreamed) {
   return out;
 }
 
-export async function chat({ messages, system, options }, emit) {
+export async function chat({ messages, system, options, images }, emit) {
   const permissionMode = options.permissionMode || 'default';
   // Explicit project dir, else null → CLI runs in home (or WSL home).
   const cwd = options.workingDir ? path.resolve(options.workingDir) : null;
@@ -194,10 +211,29 @@ export async function chat({ messages, system, options }, emit) {
   // "Use my local skills & config" off → run clean.
   if (options.useLocalConfig === false) args.push('--setting-sources', '');
 
-  const run = runClaude({ prompt: buildPrompt(messages), args, cwd, emit });
-  if (run === null) return sdkChat({ messages, system, options }, emit); // no CLI → SDK
-  const { streamedAny, resultText } = await run;
-  emit({ type: 'done', text: streamedAny ? '' : resultText });
+  // 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(() => {}));
+  let prompt = buildPrompt(messages);
+  if (imageFiles.length) {
+    prompt += `\n\nThe user attached ${imageFiles.length} image file(s). Use the Read tool to view ${
+      imageFiles.length === 1 ? 'it' : 'them'
+    }: ${imageFiles.join(', ')}`;
+  }
+
+  const run = runClaude({ prompt, args, cwd, emit });
+  if (run === null) {
+    cleanup(); // SDK fallback doesn't take images yet
+    return sdkChat({ messages, system, options }, emit);
+  }
+  try {
+    const { streamedAny, resultText } = await run;
+    emit({ type: 'done', text: streamedAny ? '' : resultText });
+  } finally {
+    cleanup();
+  }
 }
 
 // A fast, tool-free single-shot completion — used for prompt autocomplete. No

package/src/engines/codex.js

@@ -15,7 +15,7 @@
 // the agent to point it at a real project.
 
 import { spawn, spawnSync } from 'node:child_process';
-import { readFile, unlink } from 'node:fs/promises';
+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';
@@ -110,10 +110,27 @@ function buildPrompt(messages, system) {
   return p;
 }
 
-export async function chat({ messages, system, options }, emit) {
+// Write base64 data-URL images to temp files so `codex exec -i <file>` can
+// attach them to the prompt as vision input. Returns the paths (caller cleans up).
+async function writeImages(images, tag) {
+  const files = [];
+  for (let i = 0; i < (images?.length || 0); i++) {
+    const m = /^data:([^;]+);base64,(.+)$/s.exec(images[i]?.dataUrl || '');
+    if (!m) continue;
+    const ext = (m[1].split('/')[1] || 'png').replace(/[^a-z0-9]/gi, '').slice(0, 5) || 'png';
+    const file = path.join(os.tmpdir(), `chatpanel-codex-img-${tag}-${i}.${ext}`);
+    await writeFile(file, Buffer.from(m[2], 'base64'));
+    files.push(file);
+  }
+  return files;
+}
+
+export async function chat({ messages, system, options, images }, emit) {
   ensureScratch();
   const tag = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
   const outFile = path.join(os.tmpdir(), `chatpanel-codex-${tag}.txt`);
+  const imageFiles = await writeImages(images, tag);
+  const cleanupImages = () => imageFiles.forEach((f) => unlink(f).catch(() => {}));
 
   const cwd = options.workingDir ? path.resolve(options.workingDir) : SCRATCH;
   const sandbox =
@@ -130,6 +147,7 @@ export async function chat({ messages, system, options }, emit) {
   args.push('-c', 'approval_policy=never');
   if (REASONING) args.push('-c', `model_reasoning_effort=${REASONING}`);
   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('-');
 
   // Default: use the user's skills/config. Opt-out → isolated home.
@@ -145,6 +163,7 @@ export async function chat({ messages, system, options }, emit) {
     try {
       child = spawn('codex', args, { cwd, stdio: ['pipe', 'pipe', 'pipe'], env });
     } catch (e) {
+      cleanupImages();
       return reject(new Error(`Failed to start codex: ${e.message}`));
     }
 
@@ -178,6 +197,7 @@ export async function chat({ messages, system, options }, emit) {
     child.stderr.on('data', (d) => { armIdle(); stderr += d.toString(); });
     child.on('error', (e) => {
       clearTimeout(idleTimer);
+      cleanupImages();
       reject(e);
     });
     child.on('close', async (code) => {
@@ -189,6 +209,7 @@ export async function chat({ messages, system, options }, emit) {
         /* no message file */
       }
       unlink(outFile).catch(() => {});
+      cleanupImages();
       if (code === 0) {
         emit({ type: 'delta', text: text || '(no output)' });
         emit({ type: 'done', text: '' });

package/src/engines/custom.js

@@ -16,11 +16,44 @@
 //                      speak it), reusing the Claude engine's parser.
 
 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 { isProEntitled } from '../entitlement.js';
 import { handleMessage } from './claude.js';
 
+// Write base64 data-URL images to temp files so a custom CLI can take them via
+// its configured `imageArg` template (e.g. "-i {path}", "@{path}"). Returns paths.
+async function writeImages(images, tag) {
+  const files = [];
+  for (let i = 0; i < (images?.length || 0); i++) {
+    const m = /^data:([^;]+);base64,(.+)$/s.exec(images[i]?.dataUrl || '');
+    if (!m) continue;
+    const ext = (m[1].split('/')[1] || 'png').replace(/[^a-z0-9]/gi, '').slice(0, 5) || 'png';
+    const file = path.join(os.tmpdir(), `chatpanel-custom-img-${tag}-${i}.${ext}`);
+    await writeFile(file, Buffer.from(m[2], 'base64'));
+    files.push(file);
+  }
+  return files;
+}
+
+// Expand the user's `imageArg` template across the image files into argv tokens.
+// "{path}" is substituted per image; a template without it appends the path.
+function imageTokensFor(imageArg, files) {
+  const tmpl = String(imageArg || '').trim();
+  if (!tmpl || !files.length) return [];
+  const tokens = [];
+  for (const f of files) {
+    tokens.push(
+      ...(tmpl.includes('{path}')
+        ? tmpl.replaceAll('{path}', f).split(/\s+/).filter(Boolean)
+        : [...tmpl.split(/\s+/).filter(Boolean), f]),
+    );
+  }
+  return tokens;
+}
+
 // 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
 // CHATPANEL_CUSTOM_TIMEOUT_MS (ms).
@@ -92,7 +125,7 @@ function buildPrompt(messages, system) {
   return p;
 }
 
-export async function chat({ messages, system, options }, emit) {
+export async function chat({ messages, system, options, images }, emit) {
   // Pro gate — verified, not just UI. No valid signed entitlement → no run.
   if (!(await isProEntitled(options.entitlement))) {
     throw new Error('Custom agents require ChatPanel Pro. Upgrade in Settings to bring your own CLI agent.');
@@ -131,6 +164,24 @@ export async function chat({ messages, system, options }, emit) {
       : [...tmpl.split(/\s+/).filter(Boolean), options.model];
     args = [...injected, ...args];
   }
+  // Images: write to temp files, expand the agent's imageArg template, then place
+  // the tokens. An explicit {images} placeholder in args wins; otherwise they go
+  // 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 imageTokens = imageTokensFor(spec.imageArg, imageFiles);
+  let placedImages = false;
+  if (imageTokens.length) {
+    args = args.flatMap((a) => {
+      if (a === '{images}') {
+        placedImages = true;
+        return imageTokens;
+      }
+      return [a];
+    });
+  }
+
   if (promptVia === 'arg') {
     let placed = false;
     args = args.map((a) => {
@@ -140,7 +191,12 @@ export async function chat({ messages, system, options }, emit) {
       }
       return a;
     });
-    if (!placed) args.push(prompt);
+    if (!placed) {
+      if (imageTokens.length && !placedImages) args.push(...imageTokens); // images, then prompt
+      args.push(prompt);
+    }
+  } else if (imageTokens.length && !placedImages) {
+    args.push(...imageTokens); // stdin prompt: image tokens go on argv
   }
 
   const [bin, argv, opts] = buildSpawnSpec(resolved, args, cwd);
@@ -150,6 +206,7 @@ export async function chat({ messages, system, options }, emit) {
     try {
       child = spawn(bin, argv, opts);
     } catch (e) {
+      cleanup();
       return reject(new Error(`Failed to start ${label}: ${e.message}`));
     }
 
@@ -163,6 +220,7 @@ export async function chat({ messages, system, options }, emit) {
       clearTimeout(idleTimer);
       idleTimer = setTimeout(() => {
         child.kill('SIGKILL');
+        cleanup();
         reject(new Error(`${label} timed out — no output for ${Math.round(IDLE_MS / 1000)}s.`));
       }, IDLE_MS);
     };
@@ -196,10 +254,12 @@ export async function chat({ messages, system, options }, emit) {
     child.stderr.on('data', (d) => { armIdle(); stderr += d.toString(); });
     child.on('error', (e) => {
       clearTimeout(idleTimer);
+      cleanup();
       reject(new Error(`Failed to start ${label}: ${e.message}`));
     });
     child.on('close', (code) => {
       clearTimeout(idleTimer);
+      cleanup();
       if (code === 0) {
         emit({ type: 'done', text: streamedAny ? '' : resultText });
         resolve();

package/src/engines/gemini.js

@@ -9,7 +9,7 @@
 // Install: `npm i -g @google/gemini-cli`, then run `gemini` once to sign in.
 
 import { spawn, spawnSync } from 'node:child_process';
-import { mkdirSync } from 'node:fs';
+import { mkdirSync, writeFileSync, unlinkSync } from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
 import { findAgentBin } from '../env.js';
@@ -45,6 +45,24 @@ export async function available() {
     : { ok: false, reason: 'gemini not found on PATH. Install @google/gemini-cli, then run `gemini` once to sign in.' };
 }
 
+// Write base64 data-URL images into `dir` so Gemini's `@<file>` can read them.
+function writeImages(images, dir) {
+  const files = [];
+  for (let i = 0; i < (images?.length || 0); i++) {
+    const m = /^data:([^;]+);base64,(.+)$/s.exec(images[i]?.dataUrl || '');
+    if (!m) continue;
+    const ext = (m[1].split('/')[1] || 'png').replace(/[^a-z0-9]/gi, '').slice(0, 5) || 'png';
+    const file = path.join(dir, `chatpanel-img-${Date.now()}-${i}.${ext}`);
+    try {
+      writeFileSync(file, Buffer.from(m[2], 'base64'));
+      files.push(file);
+    } catch {
+      /* skip unwritable */
+    }
+  }
+  return files;
+}
+
 function buildPrompt(messages, system) {
   let p = system ? `${system}\n\n` : '';
   const history = messages.slice(0, -1);
@@ -58,7 +76,7 @@ function buildPrompt(messages, system) {
   return p;
 }
 
-export async function chat({ messages, system, options }, emit) {
+export async function chat({ messages, system, options, images }, emit) {
   try {
     mkdirSync(SCRATCH, { recursive: true });
   } catch {
@@ -66,10 +84,20 @@ export async function chat({ messages, system, options }, emit) {
   }
   const cwd = options.workingDir ? path.resolve(options.workingDir) : SCRATCH;
 
+  // Images: write them into the cwd so Gemini's `@file` reference (which reads
+  // files — including images — as multimodal input) can resolve them. Cleaned up
+  // after the run. Written into cwd (not tmp) because `@` resolves to the workspace.
+  const imageFiles = writeImages(images, cwd);
+  const cleanup = () => imageFiles.forEach((f) => { try { unlinkSync(f); } catch { /* gone */ } });
+  let prompt = buildPrompt(messages, system);
+  if (imageFiles.length) {
+    prompt += `\n\nThe user attached image(s): ${imageFiles.map((f) => '@' + path.basename(f)).join(' ')}`;
+  }
+
   // `-p` is non-interactive (no TTY prompts). `-m` picks the model. `-y` (yolo)
   // auto-approves tool calls when the user opted into bypassPermissions — without
   // it Gemini would block on an approval it can't show in a headless run.
-  const args = ['-p', buildPrompt(messages, system)];
+  const args = ['-p', prompt];
   if (options.model) args.push('-m', options.model);
   if (options.permissionMode === 'bypassPermissions') args.push('-y');
 
@@ -80,6 +108,7 @@ export async function chat({ messages, system, options }, emit) {
       // interactive "trust this folder?" dialog can block us.
       child = spawn('gemini', args, { cwd, stdio: ['ignore', 'pipe', 'pipe'], env: { ...process.env } });
     } catch (e) {
+      cleanup();
       return reject(new Error(`Failed to start gemini: ${e.message}`));
     }
 
@@ -91,6 +120,7 @@ export async function chat({ messages, system, options }, emit) {
       clearTimeout(idleTimer);
       idleTimer = setTimeout(() => {
         child.kill('SIGKILL');
+        cleanup();
         reject(new Error(`Gemini timed out — no output for ${Math.round(IDLE_MS / 1000)}s.`));
       }, IDLE_MS);
     };
@@ -106,10 +136,12 @@ export async function chat({ messages, system, options }, emit) {
     child.stderr.on('data', (d) => { armIdle(); err += d.toString(); });
     child.on('error', (e) => {
       clearTimeout(idleTimer);
+      cleanup();
       reject(new Error(`Failed to start gemini: ${e.message}`));
     });
     child.on('close', (code) => {
       clearTimeout(idleTimer);
+      cleanup();
       if (code === 0) {
         if (!streamed) emit({ type: 'delta', text: out.trim() || '(no output)' });
         emit({ type: 'done', text: '' });

package/src/server.js

@@ -27,7 +27,7 @@ import { checkForUpdate, selfUpdate } from './update.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.3.3';
+const VERSION = '0.4.0';
 const HOST = process.env.CHATPANEL_BRIDGE_HOST || '127.0.0.1';
 const PORT = Number(process.env.CHATPANEL_BRIDGE_PORT) || 4319;
 
@@ -117,6 +117,9 @@ async function handleChat(req, res) {
   }
   const target = ENGINES[body.agent];
   if (!target) return json(res, 404, { error: `Unknown agent "${body.agent}"` });
+  if (Array.isArray(body.images) && body.images.length) {
+    log('info', `chat: ${body.agent} received ${body.images.length} image(s)`);
+  }
 
   // Open the SSE stream.
   res.writeHead(200, {
@@ -138,6 +141,7 @@ async function handleChat(req, res) {
         messages: Array.isArray(body.messages) ? body.messages : [],
         system: body.system || '',
         options: body.options || {},
+        images: Array.isArray(body.images) ? body.images : [],
       },
       (obj) => {
         if (!closed) emit(obj);