agentgui 1.0.934 → 1.0.936

package/AGENTS.md

@@ -2,7 +2,9 @@
 
 ## Architecture (2026-05-19 pivot — single surface)
 
-One surface. `server.js` serves `site/app/` at `/` and mounts `ccsniff`'s `/v1/history/*` Express router in-process. The legacy `static/` tree and the legacy `lib/routes-*`/`lib/db-queries-*`/`lib/jsonl-watcher.js` modules are gone. `acptoapi` is no longer used by this project.
+One surface. `server.js` serves `site/app/` under `BASE_URL` (default `/gm`) and mounts `ccsniff`'s `/v1/history/*` Express router in-process at both `/` and `BASE_URL`. The legacy `static/` tree and the legacy `lib/routes-*`/`lib/db-queries-*`/`lib/jsonl-watcher.js` modules are gone. `acptoapi` is no longer used by this project.
+
+When `PASSWORD` env var is set, every HTTP route is gated by `lib/http-handler.js` accepting **Basic auth**, **`Authorization: Bearer <pwd>`**, OR **`?token=<pwd>`** query param (added 2026-05-26 so `EventSource` and direct deep-links work — neither can set headers). WS `/sync` requires `?token=` only. The HTML head script injects `window.__BASE_URL`, `window.__SERVER_VERSION`, and `window.__WS_TOKEN`; `site/app/js/backend.js` reads `__WS_TOKEN` and threads it onto every fetch (Bearer header) / EventSource (qs) / WebSocket (qs).
 
 - `site/app/index.html` — shell + CSS, imports `anentrypoint-design` from unpkg
 - `site/app/js/backend.js` — same-origin client (`DEFAULT_BACKEND = ''`); `?backend=` query override for cross-origin debugging

package/lib/asset-server.js

@@ -96,7 +96,7 @@ export function serveFile(filePath, res, req, { compressAndSend, acceptsEncoding
       content = content.replace(/(href|src)="vendor\//g, `$1="${BASE_URL}/vendor/`);
       content = content.replace(/(src)="\/gm\/js\//g, `$1="${BASE_URL}/js/`);
       if (watch) {
-        content += `\n<script>(function(){const ws=new WebSocket((location.protocol==='https:'?'wss://':'ws://')+location.host+'${BASE_URL}/hot-reload');ws.onmessage=e=>{if(JSON.parse(e.data).type==='reload')location.reload()};})();</script>`;
+        content += `\n<script>(function(){const tok=window.__WS_TOKEN?'?token='+encodeURIComponent(window.__WS_TOKEN):'';const ws=new WebSocket((location.protocol==='https:'?'wss://':'ws://')+location.host+'${BASE_URL}/hot-reload'+tok);ws.onmessage=e=>{if(JSON.parse(e.data).type==='reload')location.reload()};})();</script>`;
       }
       compressAndSend(req, res, 200, contentType, content);
       if (!watch && acceptsEncoding(req, 'gzip')) {

package/lib/codec.js

@@ -1,4 +1,13 @@
-import { pack, unpack } from 'msgpackr';
-
-export function encode(obj) { return pack(obj); }
-export function decode(buf) { return unpack(buf instanceof Uint8Array ? buf : new Uint8Array(buf)); }
+// agentgui WS wire codec — plain JSON (UTF-8 text frames).
+// Browser-compatible (no msgpackr). encode() returns a string the ws library
+// sends as a text frame; decode() handles both Buffer/Uint8Array (Node) and
+// string (browser) inputs.
+
+export function encode(obj) { return JSON.stringify(obj); }
+
+export function decode(buf) {
+  if (typeof buf === 'string') return JSON.parse(buf);
+  if (buf instanceof Uint8Array) return JSON.parse(new TextDecoder().decode(buf));
+  if (buf && typeof buf.toString === 'function') return JSON.parse(buf.toString('utf8'));
+  return JSON.parse(String(buf));
+}

package/lib/http-handler.js

@@ -23,18 +23,31 @@ export function createHttpHandler({ BASE_URL, expressApp, queries, sendJSON, ser
     if (_pwd) {
       const _auth = req.headers['authorization'] || '';
       let _ok = false;
+      const _checkToken = (tok) => {
+        try { return tok.length === _pwd.length && crypto.timingSafeEqual(Buffer.from(tok), Buffer.from(_pwd)); }
+        catch { return false; }
+      };
       if (_auth.startsWith('Basic ')) {
         try {
           const _decoded = Buffer.from(_auth.slice(6), 'base64').toString('utf8');
           const _ci = _decoded.indexOf(':');
-          if (_ci !== -1) { const _p = _decoded.slice(_ci + 1); try { _ok = _p.length === _pwd.length && crypto.timingSafeEqual(Buffer.from(_p), Buffer.from(_pwd)); } catch { _ok = false; } }
+          if (_ci !== -1) _ok = _checkToken(_decoded.slice(_ci + 1));
+        } catch (_) {}
+      } else if (_auth.startsWith('Bearer ')) {
+        _ok = _checkToken(_auth.slice(7));
+      }
+      // EventSource and same-origin links can't set headers — accept ?token= as fallback.
+      if (!_ok) {
+        try {
+          const _qsTok = new URL(req.url, 'http://localhost').searchParams.get('token');
+          if (_qsTok) _ok = _checkToken(_qsTok);
         } catch (_) {}
       }
       if (!_ok) { res.writeHead(401, { 'WWW-Authenticate': 'Basic realm="agentgui"' }); res.end('Unauthorized'); return; }
     }
 
     const pathOnly = req.url.split('?')[0];
-    if (pathOnly.startsWith(BASE_URL + '/api/upload/') || pathOnly.startsWith(BASE_URL + '/files/') || pathOnly.startsWith('/v1/history')) return expressApp(req, res);
+    if (pathOnly.startsWith(BASE_URL + '/api/upload/') || pathOnly.startsWith(BASE_URL + '/files/') || pathOnly.startsWith('/v1/history') || (BASE_URL && pathOnly.startsWith(BASE_URL + '/v1/history'))) return expressApp(req, res);
 
     if (req.url === '/favicon.ico' || req.url === BASE_URL + '/favicon.ico') {
       const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="20" fill="#3b82f6"/><text x="50" y="68" font-size="50" font-family="sans-serif" font-weight="bold" fill="white" text-anchor="middle">G</text></svg>';
@@ -45,13 +58,14 @@ export function createHttpHandler({ BASE_URL, expressApp, queries, sendJSON, ser
     // serve index.html at root directly (no redirect)
 
     let routePath = req.url;
-    if (req.url.startsWith(BASE_URL + '/')) { routePath = req.url.slice(BASE_URL.length); }
-    else if (req.url === BASE_URL) { routePath = '/'; }
-    else if (req.url.startsWith('/api/') || req.url.startsWith('/js/') || req.url.startsWith('/css/') ||
-             req.url.startsWith('/vendor/') || req.url.startsWith('/sync') || req.url === '/' ||
-             req.url === '/health' || req.url.startsWith('/v1/') ||
-             req.url.startsWith('/api/terminal/') ||
-             req.url.startsWith('/conversations/')) { routePath = req.url; }
+    const _bareUrl = req.url.split('?')[0];
+    if (_bareUrl.startsWith(BASE_URL + '/')) { routePath = req.url.slice(BASE_URL.length); }
+    else if (_bareUrl === BASE_URL) { routePath = '/'; }
+    else if (_bareUrl.startsWith('/api/') || _bareUrl.startsWith('/js/') || _bareUrl.startsWith('/css/') ||
+             _bareUrl.startsWith('/vendor/') || _bareUrl.startsWith('/sync') || _bareUrl === '/' ||
+             _bareUrl === '/health' || _bareUrl.startsWith('/v1/') ||
+             _bareUrl.startsWith('/api/terminal/') ||
+             _bareUrl.startsWith('/conversations/')) { routePath = req.url; }
     else { res.writeHead(404); res.end('Not found'); return; }
 
     routePath = routePath || '/';
@@ -120,7 +134,8 @@ export function createHttpHandler({ BASE_URL, expressApp, queries, sendJSON, ser
 
       if (pathOnly.match(/^\/conversations\/[^\/]+$/)) { serveFile(path.join(staticDir, 'index.html'), res, req); return; }
 
-      let filePath = routePath === '/' ? '/index.html' : routePath;
+      const routePathBare = routePath.split('?')[0];
+      let filePath = routePathBare === '/' ? '/index.html' : routePathBare;
       filePath = path.join(staticDir, filePath);
       const normalizedPath = path.normalize(filePath);
       if (!normalizedPath.startsWith(staticDir)) { res.writeHead(403); res.end('Forbidden'); return; }

package/lib/server-startup2.js

@@ -28,7 +28,7 @@ export function createAutoImport({ queries, broadcastSync }) {
     try {
       if (process.env.AGENTGUI_SKIP_AUTO_IMPORT === '1') return;
       if (!hasIndexFilesChanged()) return;
-      const imported = queries.importClaudeCodeConversations();
+      const imported = queries.importClaudeCodeConversations() || [];
       if (imported.length > 0) {
         const importedCount = imported.filter(i => i.status === 'imported').length;
         if (importedCount > 0) {

package/lib/ws-handlers-util.js

@@ -1,7 +1,10 @@
 import fs from 'fs';
 import os from 'os';
 import path from 'path';
+import crypto from 'crypto';
 import { execSync, spawnSync } from 'child_process';
+import { runClaudeWithStreaming } from './claude-runner-run.js';
+import { registry } from './claude-runner-agents.js';
 
 function err(code, message) { const e = new Error(message); e.code = code; throw e; }
 
@@ -13,7 +16,106 @@ const SUB_AGENT_MAP = {
 };
 
 export function register(router, deps) {
-  const { queries, wsOptimizer, broadcastSync, getProviderConfigs, saveProviderConfig, STARTUP_CWD, discoveredAgents } = deps;
+  const { queries, wsOptimizer, broadcastSync, getProviderConfigs, saveProviderConfig, STARTUP_CWD, discoveredAgents, subscriptionIndex, activeChats } = deps;
+
+  // --- agents.list: enumerate registered ACP agents + claude-code ---
+  router.handle('agents.list', () => {
+    const agents = registry.list().map(a => ({
+      id: a.id,
+      name: a.name,
+      protocol: a.protocol,
+      supportsStdin: !!a.supportsStdin,
+      features: a.supportedFeatures || [],
+    }));
+    return { agents };
+  });
+
+  // --- conversation.subscribe: register this ws for sessionId broadcasts ---
+  router.handle('conversation.subscribe', (p, ws) => {
+    const sid = p?.sessionId;
+    if (!sid || typeof sid !== 'string') err(400, 'sessionId required');
+    if (!subscriptionIndex.has(sid)) subscriptionIndex.set(sid, new Set());
+    subscriptionIndex.get(sid).add(ws);
+    ws.subscriptions = ws.subscriptions || new Set();
+    ws.subscriptions.add(sid);
+    return { subscribed: true, sessionId: sid };
+  });
+
+  // --- chat.sendMessage: start a one-shot streaming chat with an agent.
+  // Bypasses the gutted db-queries layer entirely; calls runClaudeWithStreaming
+  // directly and broadcasts streaming_* events scoped to an ephemeral sessionId.
+  router.handle('chat.sendMessage', async (p, ws) => {
+    const content = (p?.content || '').toString();
+    if (!content) err(400, 'content required');
+    const agentId = p?.agentId || 'claude-code';
+    const model = p?.model || undefined;
+    const subAgent = p?.subAgent || undefined;
+    const cwd = p?.cwd || STARTUP_CWD;
+    if (!registry.has(agentId)) err(404, `Unknown agentId: ${agentId}`);
+
+    const sessionId = 'chat-' + crypto.randomBytes(8).toString('hex');
+    // Auto-subscribe the originating ws so it receives its own broadcasts.
+    if (!subscriptionIndex.has(sessionId)) subscriptionIndex.set(sessionId, new Set());
+    subscriptionIndex.get(sessionId).add(ws);
+    ws.subscriptions = ws.subscriptions || new Set();
+    ws.subscriptions.add(sessionId);
+
+    const ctrl = { aborted: false, proc: null };
+    activeChats.set(sessionId, ctrl);
+
+    // Fire-and-forget. Errors broadcast as streaming_error.
+    (async () => {
+      let eventCount = 0;
+      broadcastSync({ type: 'streaming_start', sessionId, agentId, timestamp: Date.now() });
+      const onEvent = (parsed) => {
+        eventCount++;
+        if (parsed?.type === 'assistant' && parsed.message?.content) {
+          for (const block of parsed.message.content) {
+            broadcastSync({ type: 'streaming_progress', sessionId, block, blockRole: 'assistant', seq: eventCount, timestamp: Date.now() });
+          }
+        } else if (parsed?.type === 'user' && parsed.message?.content) {
+          const blocks = Array.isArray(parsed.message.content) ? parsed.message.content : [];
+          for (const block of blocks) {
+            if (block?.type === 'tool_result') {
+              broadcastSync({ type: 'streaming_progress', sessionId, block, blockRole: 'tool_result', seq: eventCount, timestamp: Date.now() });
+            }
+          }
+        } else if (parsed?.type === 'result') {
+          const block = { type: 'result', result: parsed.result, subtype: parsed.subtype, duration_ms: parsed.duration_ms, total_cost_usd: parsed.total_cost_usd, is_error: !!parsed.is_error };
+          broadcastSync({ type: 'streaming_progress', sessionId, block, blockRole: 'result', seq: eventCount, isResult: true, timestamp: Date.now() });
+        }
+      };
+      try {
+        const config = {
+          verbose: true, outputFormat: 'stream-json', timeout: 1800000, print: true,
+          model, subAgent, onEvent,
+          onPid: () => {}, onProcess: (proc) => { ctrl.proc = proc; },
+        };
+        await runClaudeWithStreaming(content, cwd, agentId, config);
+        broadcastSync({ type: 'streaming_complete', sessionId, agentId, eventCount, timestamp: Date.now() });
+      } catch (e) {
+        broadcastSync({ type: 'streaming_error', sessionId, agentId, error: e.message || String(e), recoverable: false, timestamp: Date.now() });
+      } finally {
+        activeChats.delete(sessionId);
+      }
+    })();
+
+    return { sessionId, started: true };
+  });
+
+  // --- chat.cancel: abort an in-flight chat ---
+  router.handle('chat.cancel', (p) => {
+    const sid = p?.sessionId;
+    if (!sid) err(400, 'sessionId required');
+    const ctrl = activeChats.get(sid);
+    if (!ctrl) return { cancelled: false, reason: 'not-found' };
+    ctrl.aborted = true;
+    try { ctrl.proc?.kill?.(); } catch {}
+    activeChats.delete(sid);
+    return { cancelled: true };
+  });
+
+
 
   router.handle('home', () => ({ home: os.homedir(), cwd: STARTUP_CWD }));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.934",
+  "version": "1.0.936",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",
@@ -37,7 +37,6 @@
     "form-data": "^4.0.5",
     "fsbrowse": "latest",
     "lru-cache": "^11.2.7",
-    "msgpackr": "^1.11.8",
     "opencode-ai": "^1.2.15",
     "p-retry": "^7.1.1",
     "puppeteer-core": "^24.37.5",

package/scripts/smoke-ws-chat.mjs

@@ -0,0 +1,62 @@
+// Smoke-test the WS chat protocol added in this session.
+// Boots no server — assumes one is already running at ws://localhost:$PORT/sync.
+//
+// Usage: PORT=3990 node scripts/smoke-ws-chat.mjs
+//
+// Checks:
+//  1. WS connects, receives sync_connected.
+//  2. agents.list returns a non-empty array.
+//  3. (optional) conversation.subscribe returns subscribed:true.
+
+import WebSocket from 'ws';
+
+const PORT = process.env.PORT || 3000;
+const URL = `ws://localhost:${PORT}/sync`;
+
+const ws = new WebSocket(URL);
+let reqId = 0;
+const pending = new Map();
+
+const call = (method, params) => new Promise((resolve, reject) => {
+  const r = ++reqId;
+  pending.set(r, { resolve, reject });
+  ws.send(JSON.stringify({ m: method, r, p: params || {} }));
+  setTimeout(() => { if (pending.has(r)) { pending.delete(r); reject(new Error('timeout: ' + method)); } }, 5000);
+});
+
+ws.on('open', async () => {
+  console.log('WS open:', URL);
+});
+
+ws.on('message', async (data) => {
+  let msg;
+  try { msg = JSON.parse(data.toString('utf8')); } catch { console.log('decode fail:', data); return; }
+  const items = Array.isArray(msg) ? msg : [msg];
+  for (const m of items) {
+    if (m && m.r !== undefined && (m.d !== undefined || m.e !== undefined)) {
+      const p = pending.get(m.r);
+      if (!p) continue;
+      pending.delete(m.r);
+      if (m.e) p.reject(new Error(m.e.m));
+      else p.resolve(m.d);
+    } else if (m?.type === 'sync_connected') {
+      console.log('sync_connected, clientId =', m.clientId);
+      try {
+        const r1 = await call('agents.list');
+        console.log('agents.list OK, count =', r1.agents.length, '— first =', r1.agents[0]?.id);
+        const r2 = await call('conversation.subscribe', { sessionId: 'smoke-test-sid' });
+        console.log('conversation.subscribe OK =', r2);
+        console.log('PASS');
+        process.exit(0);
+      } catch (e) {
+        console.error('FAIL:', e.message);
+        process.exit(1);
+      }
+    }
+  }
+});
+
+ws.on('error', (e) => { console.error('ws error:', e.message); process.exit(1); });
+ws.on('close', (code, reason) => { console.log('ws close:', code, reason?.toString()); });
+
+setTimeout(() => { console.error('overall timeout'); process.exit(1); }, 15000);

package/server.js

@@ -11,6 +11,7 @@ import { runClaudeWithStreaming } from './lib/claude-runner-run.js';
 import { initializeDescriptors, getAgentDescriptor } from './lib/agent-descriptors.js';
 import { discoverExternalACPServers, initializeAgentDiscovery } from './lib/agent-discovery.js';
 import { createRegistry } from './lib/routes-registry.js';
+import { register as registerWsHandlers } from './lib/ws-handlers-util.js';
 import { BROADCAST_TYPES } from './lib/broadcast.js';
 import { WSOptimizer } from './lib/ws-optimizer.js';
 import { WsRouter } from './lib/ws-protocol.js';
@@ -72,7 +73,8 @@ const expressApp = createExpressApp({ queries, BASE_URL });
 try {
   const historyRouter = await createHistoryRouter({ projectsDir: process.env.CLAUDE_PROJECTS_DIR });
   expressApp.use('/', historyRouter);
-  console.log('[ccsniff] /v1/history/* mounted');
+  if (BASE_URL && BASE_URL !== '/') expressApp.use(BASE_URL, historyRouter);
+  console.log('[ccsniff] /v1/history/* mounted at / and ' + (BASE_URL || '/'));
 } catch (e) { console.error('[ccsniff] mount failed:', e.message); }
 
 let discoveredAgents = [];
@@ -123,8 +125,10 @@ const { processMessageWithStreaming } = createProcessMessage({
   scheduleRetry, drainMessageQueue, createEventHandler
 });
 
+const activeChats = new Map();
 const wsRouter = new WsRouter();
 createRegistry(wsRouter, { queries, sendJSON, parseBody, broadcastSync, debugLog, PORT, BASE_URL, rootDir, STARTUP_CWD, PKG_VERSION, processMessageWithStreaming, activeExecutions, activeProcessesByRunId, activeScripts, messageQueues, rateLimitState, cleanupExecution, discoveredAgents, getACPStatus, modelCache, getModelsForAgent, logError, syncClients, wsOptimizer, errLogPath, getJsonlWatcher: () => getJsonlWatcher(), routes: _routes });
+registerWsHandlers(wsRouter, { queries, wsOptimizer, broadcastSync, getProviderConfigs, saveProviderConfig, STARTUP_CWD, discoveredAgents, subscriptionIndex, activeChats });
 
 
 const { wss, hotReloadClients } = createWsSetup(server, {

package/site/app/js/app.js

@@ -18,9 +18,28 @@ const state = {
   events: [],
   searchQ: '',
   searchHits: null,
+  historyError: null,
+  showSubagents: false,
   live: { es: null, connected: false, lastEventTs: 0, error: null, eventCount: 0 },
 };
 
+function readHash() {
+  const m = (location.hash || '').match(/sid=([^&]+)/);
+  return m ? decodeURIComponent(m[1]) : null;
+}
+function writeHash(sid) {
+  const h = sid ? '#sid=' + encodeURIComponent(sid) : '';
+  if (location.hash !== h) history.replaceState(null, '', location.pathname + location.search + h);
+}
+function fmtRelTime(ts) {
+  if (!ts) return '';
+  const s = Math.round((Date.now() - ts) / 1000);
+  if (s < 60) return s + 's ago';
+  if (s < 3600) return Math.round(s/60) + 'm ago';
+  if (s < 86400) return Math.round(s/3600) + 'h ago';
+  return Math.round(s/86400) + 'd ago';
+}
+
 let render;
 let renderScheduled = false;
 function scheduleRender() {
@@ -242,34 +261,72 @@ async function sendChat() {
 
 // ── history ────────────────────────────────────────────────────────────────
 function historyMain() {
+  if (!state.selectedSid) {
+    return [PageHeader({
+      title: '§ history',
+      lede: 'pick a session from the sidebar — events stream live from ccsniff /v1/history.',
+    })];
+  }
+
+  const sess = (Array.isArray(state.sessions) ? state.sessions : []).find(s => s.sid === state.selectedSid);
+  const lede = sess
+    ? (sess.project || sess.cwd || '?') + ' · ' + (sess.events || 0) + ' events · ' + (sess.userTurns || 0) + ' turns · ' + fmtRelTime(sess.last)
+    : state.selectedSid;
+
   const head = PageHeader({
-    title: '§ history',
-    lede: state.selectedSid
-      ? 'session ' + state.selectedSid
-      : 'pick a session from the sidebar — events stream from ccsniff /v1/history.',
+    title: '§ ' + (sess?.title || state.selectedSid).slice(0, 80),
+    lede,
   });
 
-  if (!state.selectedSid)            return [head];
-  if (state.events.length === 0)     return [head, Panel({ title: 'events', children: h('p', { class: 'lede' }, '◌ loading…') })];
+  const actions = h('div', { key: 'acts', style: 'display:flex;gap:.5em;padding:0 0 .75em 0' },
+    Btn({ key: 'resume', primary: true, onClick: () => resumeInChat(sess || { sid: state.selectedSid }), children: '▶ open in chat' }),
+    Btn({ key: 'copy', onClick: () => { try { navigator.clipboard.writeText(state.selectedSid); } catch {} }, children: '⎘ copy sid' }),
+  );
+
+  if (state.events.length === 0) {
+    return [head, actions, Panel({ title: 'events', children: h('p', { class: 'lede' }, '◌ loading…') })];
+  }
 
   return [
     head,
+    actions,
     Panel({
       title: state.events.length + ' events',
       children: EventList({
-        items: state.events.map((e, i) => ({
-          key: 'ev' + i,
-          code: String(i + 1).padStart(3, '0'),
-          title: (e.text || '').slice(0, 200) || '(empty)',
-          sub: new Date(e.ts).toLocaleString() + ' · ' + (e.role || '?') + ' · ' + (e.type || '?') + (e.tool ? ' · ⌘ ' + e.tool : ''),
-        })),
+        items: state.events.slice(-300).map((e, i) => {
+          const role = e.role || '?';
+          const type = e.type || '?';
+          const tool = e.tool ? ' · ⌘ ' + e.tool : '';
+          const errMark = e.isError ? ' · ⚠' : '';
+          const text = (e.text || '').replace(/\s+/g, ' ').trim();
+          return {
+            key: 'ev' + (e.i ?? i),
+            code: String((e.i ?? i) + 1).padStart(4, '0'),
+            title: text.slice(0, 220) || '(' + type + ')',
+            sub: new Date(e.ts).toLocaleString() + ' · ' + role + ' · ' + type + tool + errMark,
+          };
+        }),
       }),
     }),
   ];
 }
 
+function resumeInChat(sess) {
+  state.tab = 'chat';
+  closeLiveStream();
+  state.chat.draft = '/resume ' + (sess?.sid || state.selectedSid);
+  render();
+}
+
+function visibleSessions() {
+  const arr = Array.isArray(state.sessions) ? state.sessions : [];
+  const filtered = state.showSubagents ? arr : arr.filter(s => !s.isSubagent);
+  return filtered.slice().sort((a, b) => (b.last || 0) - (a.last || 0));
+}
+
 function historySide() {
   const searching = !!state.searchHits;
+  const sessionsView = visibleSessions();
   const rows = searching
     ? state.searchHits.results.slice(0, 60).map((r, i) =>
         Row({
@@ -281,17 +338,18 @@ function historySide() {
           onClick: () => loadSession(r.sid),
         })
       )
-    : state.sessions.slice(0, 120).map((s, i) =>
+    : sessionsView.slice(0, 120).map((s, i) =>
         Row({
-          key: 'sess' + i,
+          key: 'sess' + s.sid,
           rank: String(i + 1).padStart(3, '0'),
-          title: s.title || s.project || s.sid,
-          sub: s.events + ' ev · ' + s.tools + ' tools' + (s.errors ? ' · ' + s.errors + ' err' : ''),
-          rail: s.errors ? 'flame' : 'green',
+          title: (s.isSubagent ? '↳ ' : '') + (s.title || s.project || s.sid),
+          sub: fmtRelTime(s.last) + ' · ' + (s.events || 0) + ' ev · ' + (s.tools || 0) + ' tools' + (s.errors ? ' · ' + s.errors + ' err' : ''),
+          rail: s.errors ? 'flame' : (s.isSubagent ? 'purple' : 'green'),
           active: s.sid === state.selectedSid,
           onClick: () => loadSession(s.sid),
         })
       );
+  const subagentCount = (Array.isArray(state.sessions) ? state.sessions : []).filter(s => s.isSubagent).length;
 
   return [
     Side({
@@ -307,7 +365,7 @@ function historySide() {
       ],
     }),
     Panel({
-      title: searching ? 'matches' : 'sessions',
+      title: searching ? 'matches' : ('sessions · ' + sessionsView.length + (subagentCount && !state.showSubagents ? ' (+'+subagentCount+' sub)' : '')),
       children: [
         SearchInput({
           key: 'searchInput',
@@ -315,7 +373,14 @@ function historySide() {
           value: state.searchQ,
           onInput: (v) => { state.searchQ = v; runSearch(); },
         }),
-        rows.length ? h('div', { key: 'rows' }, ...rows) : h('p', { key: 'empty', class: 'lede' }, 'no sessions yet'),
+        !searching && subagentCount
+          ? h('label', { key: 'subtog', class: 'lede', style: 'display:flex;gap:.5em;align-items:center;padding:.25em 0' },
+              h('input', { type: 'checkbox', checked: state.showSubagents, onChange: (e) => { state.showSubagents = e.target.checked; render(); } }),
+              'show subagents (' + subagentCount + ')')
+          : null,
+        state.historyError
+          ? h('p', { key: 'err', class: 'lede' }, '⚠ ' + state.historyError)
+          : (rows.length ? h('div', { key: 'rows' }, ...rows) : h('p', { key: 'empty', class: 'lede' }, 'no sessions yet')),
       ],
     }),
   ];
@@ -363,7 +428,7 @@ function settingsMain() {
               key: 'm' + i,
               rank: String(i + 1).padStart(3, '0'),
               title: m.id,
-              sub: m.owned_by || m.object || 'model',
+              sub: m.name ? (m.name + ' · ' + (m.protocol || 'agent')) : (m.protocol || 'agent'),
               rail: m.id === state.selectedModel ? 'green' : 'purple',
               onClick: () => { state.selectedModel = m.id; render(); },
             })
@@ -375,8 +440,15 @@ function settingsMain() {
 
 // ── data ──────────────────────────────────────────────────────────────────
 async function refreshHistory() {
-  try { state.sessions = await B.listSessions(state.backend); render(); }
-  catch (e) { console.warn('history fetch failed:', e.message); }
+  try {
+    state.sessions = await B.listSessions(state.backend);
+    state.historyError = null;
+    render();
+  } catch (e) {
+    state.historyError = e.message;
+    console.warn('history fetch failed:', e.message);
+    render();
+  }
 }
 
 async function runSearch() {
@@ -393,6 +465,7 @@ async function runSearch() {
 async function loadSession(sid) {
   state.selectedSid = sid;
   state.events = [];
+  writeHash(sid);
   render();
   try { state.events = await B.getSessionEvents(state.backend, sid); render(); }
   catch (e) {
@@ -414,6 +487,21 @@ async function init() {
     if (!state.selectedModel && state.models[0]) state.selectedModel = state.models[0].id;
     render();
   } catch (e) { console.warn('models fetch failed:', e.message); }
+
+  const initialSid = readHash();
+  if (initialSid) {
+    navTo('history');
+    await refreshHistory();
+    await loadSession(initialSid);
+  }
+
+  B.onWsStatus?.((s) => {
+    if (s === 'closed' || s === 'error') {
+      if (state.health.status === 'ok') { state.health = { ...state.health, ws: 'reconnecting' }; render(); }
+    } else if (s === 'open') {
+      if (state.health.ws) { delete state.health.ws; render(); }
+    }
+  });
 }
 
 render = mount(document.getElementById('app'), view);

package/site/app/js/backend.js

@@ -1,9 +1,32 @@
-// agentgui backend client. Resolves base URL from ?backend= or localStorage or default
-// (same-origin). Talks to the local agentgui server: ccsniff history routes, /health,
-// and the /sync WebSocket for chat streaming.
+// agentgui backend client. Same-origin by default. Talks to:
+//  - HTTP: /health, /v1/history/* (served by ccsniff)
+//  - WS  : /sync   (JSON envelope: requests {m, r, p}; replies {r, d|e};
+//          broadcasts {type, sessionId, ...})
+// No external acptoapi dependency. Chat + agent listing flow over the WS.
+
+import { encode, decode } from './codec.js';
+
 const KEY = 'agentgui.backend';
 const DEFAULT_BACKEND = '';
 
+function authToken() {
+  try { return (typeof window !== 'undefined' && window.__WS_TOKEN) || ''; } catch { return ''; }
+}
+
+function authedFetch(url, opts = {}) {
+  const tok = authToken();
+  if (!tok) return fetch(url, opts);
+  const h = new Headers(opts.headers || {});
+  h.set('Authorization', 'Bearer ' + tok);
+  return fetch(url, { ...opts, headers: h });
+}
+
+function withToken(url) {
+  const tok = authToken();
+  if (!tok) return url;
+  return url + (url.includes('?') ? '&' : '?') + 'token=' + encodeURIComponent(tok);
+}
+
 export function getBackend() {
   const u = new URL(location.href);
   const fromQs = u.searchParams.get('backend');
@@ -11,49 +34,42 @@ export function getBackend() {
   return localStorage.getItem(KEY) || DEFAULT_BACKEND;
 }
 
-export function setBackend(url) {
-  localStorage.setItem(KEY, url);
-}
+export function setBackend(url) { localStorage.setItem(KEY, url); }
 
 export async function probeBackend(base) {
   try {
-    const r = await fetch(base + '/health', { method: 'GET' });
+    const r = await authedFetch(base + '/health', { method: 'GET' });
     if (!r.ok) return { ok: false, status: r.status };
-    const j = await r.json();
-    return { ok: true, info: j };
+    return { ok: true, info: await r.json() };
   } catch (e) {
     return { ok: false, error: e.message };
   }
 }
 
-export async function listModels(base) {
-  const r = await fetch(base + '/v1/models');
-  if (!r.ok) throw new Error('models: ' + r.status);
-  const j = await r.json();
-  return j.data || [];
-}
+// ---------- History (HTTP, served by ccsniff) ----------
 
 export async function listSessions(base) {
-  const r = await fetch(base + '/v1/history/sessions');
+  const r = await authedFetch(base + '/v1/history/sessions');
   if (!r.ok) throw new Error('sessions: ' + r.status);
-  return r.json();
+  const j = await r.json();
+  return Array.isArray(j) ? j : (j.sessions || []);
 }
 
 export async function getSessionEvents(base, sid) {
-  const r = await fetch(base + '/v1/history/sessions/' + encodeURIComponent(sid) + '/events');
+  const r = await authedFetch(base + '/v1/history/sessions/' + encodeURIComponent(sid) + '/events');
   if (!r.ok) throw new Error('events: ' + r.status);
   const j = await r.json();
   return j.events || [];
 }
 
 export async function searchHistory(base, q, limit = 50) {
-  const r = await fetch(base + '/v1/history/search?q=' + encodeURIComponent(q) + '&limit=' + limit);
+  const r = await authedFetch(base + '/v1/history/search?q=' + encodeURIComponent(q) + '&limit=' + limit);
   if (!r.ok) throw new Error('search: ' + r.status);
   return r.json();
 }
 
 export function streamHistory(base, onEvent) {
-  const es = new EventSource(base + '/v1/history/stream');
+  const es = new EventSource(withToken(base + '/v1/history/stream'));
   for (const k of ['hello', 'event', 'error', 'start', 'complete', 'conversation']) {
     es.addEventListener(k, ev => {
       let data; try { data = JSON.parse(ev.data); } catch { data = null; }
@@ -63,39 +79,191 @@ export function streamHistory(base, onEvent) {
   return es;
 }
 
-// Streaming chat completions using OpenAI-style SSE.
-export async function* streamChat(base, { model, messages, signal }) {
-  const r = await fetch(base + '/v1/chat/completions', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ model, messages, stream: true }),
-    signal,
-  });
-  if (!r.ok) {
-    const t = await r.text();
-    throw new Error('chat: ' + r.status + ' ' + t.slice(0, 300));
+// ---------- WebSocket client (/sync) ----------
+
+const SYNC_PATH = '/sync';
+let _ws = null;
+let _wsReady = null;       // Promise that resolves when ws is OPEN
+let _nextReqId = 1;
+const _pending = new Map();          // requestId → { resolve, reject }
+const _sessionListeners = new Map(); // sessionId → Set<(event)=>void>
+const _statusListeners = new Set();  // fn(state) where state in 'open'|'closed'|'error'
+
+export function onWsStatus(fn) { _statusListeners.add(fn); return () => _statusListeners.delete(fn); }
+function emitStatus(s) { for (const fn of _statusListeners) { try { fn(s); } catch {} } }
+
+function wsUrl(base) {
+  let proto, host;
+  if (base) {
+    try {
+      const u = new URL(base);
+      proto = u.protocol === 'https:' ? 'wss:' : 'ws:';
+      host = u.host;
+    } catch {}
+  }
+  if (!host) {
+    proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    host = location.host;
   }
-  const reader = r.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 });
-    let idx;
-    while ((idx = buf.indexOf('\n\n')) !== -1) {
-      const block = buf.slice(0, idx);
-      buf = buf.slice(idx + 2);
-      const line = block.split('\n').find(l => l.startsWith('data:'));
-      if (!line) continue;
-      const payload = line.slice(5).trim();
-      if (payload === '[DONE]') return;
+  const tok = authToken();
+  return proto + '//' + host + SYNC_PATH + (tok ? '?token=' + encodeURIComponent(tok) : '');
+}
+
+function ensureWs(base) {
+  if (_ws && _ws.readyState === 1) return _wsReady;
+  if (_ws && _ws.readyState === 0) return _wsReady;
+  _ws = new WebSocket(wsUrl(base));
+  _wsReady = new Promise((resolve, reject) => {
+    _ws.addEventListener('open', () => { emitStatus('open'); resolve(_ws); });
+    _ws.addEventListener('error', (e) => { emitStatus('error'); reject(e); });
+    _ws.addEventListener('close', () => {
+      emitStatus('closed');
+      for (const [, p] of _pending) p.reject(new Error('ws closed'));
+      _pending.clear();
+      _ws = null;
+      _wsReady = null;
+    });
+    _ws.addEventListener('message', (ev) => {
+      let msg;
       try {
-        const j = JSON.parse(payload);
-        const delta = j.choices?.[0]?.delta?.content;
-        if (delta) yield { type: 'text', text: delta };
-        if (j.error) yield { type: 'error', error: j.error };
-      } catch (_) {}
+        // Server sends text frames (JSON via codec). ev.data is string.
+        msg = typeof ev.data === 'string' ? JSON.parse(ev.data) : decode(ev.data);
+      } catch { return; }
+      // Reply to a prior request?
+      if (msg && msg.r !== undefined && (msg.d !== undefined || msg.e !== undefined)) {
+        const p = _pending.get(msg.r);
+        if (!p) return;
+        _pending.delete(msg.r);
+        if (msg.e) p.reject(new Error(msg.e.m || ('ws error ' + msg.e.c)));
+        else p.resolve(msg.d);
+        return;
+      }
+      // Unsolicited broadcast — route by sessionId to subscribers.
+      // Server may send a single event or a batch (array) per ws-optimizer.
+      const items = Array.isArray(msg) ? msg : [msg];
+      for (const item of items) {
+        const sid = item?.sessionId;
+        if (!sid) continue;
+        const subs = _sessionListeners.get(sid);
+        if (!subs) continue;
+        for (const fn of subs) { try { fn(item); } catch {} }
+      }
+    });
+  });
+  return _wsReady;
+}
+
+function wsCall(base, method, params) {
+  return ensureWs(base).then(() => new Promise((resolve, reject) => {
+    const r = _nextReqId++;
+    _pending.set(r, { resolve, reject });
+    _ws.send(encode({ m: method, r, p: params || {} }));
+  }));
+}
+
+function addSessionListener(sessionId, fn) {
+  if (!_sessionListeners.has(sessionId)) _sessionListeners.set(sessionId, new Set());
+  _sessionListeners.get(sessionId).add(fn);
+  return () => {
+    const s = _sessionListeners.get(sessionId);
+    if (s) { s.delete(fn); if (s.size === 0) _sessionListeners.delete(sessionId); }
+  };
+}
+
+// ---------- Agents / models (WS) ----------
+
+export async function listModels(base) {
+  const { agents } = await wsCall(base, 'agents.list', {});
+  // Compatibility shape: app.js expects an array of {id, name?, ...}
+  return agents || [];
+}
+
+// ---------- Streaming chat (WS) ----------
+//
+// Yields events of shape:
+//   { type: 'text',  text: '...' }    — assistant text deltas
+//   { type: 'tool',  block: {...} }   — tool_use blocks
+//   { type: 'result', block: {...} }  — terminal result block
+//   { type: 'error', error: '...' }
+//
+// Caller signature kept compatible with the previous HTTP/SSE impl.
+export async function* streamChat(base, { model, messages, signal, agentId }) {
+  // The last user message is the prompt; agentgui's claude-runner doesn't
+  // accept a full message list — it spawns the agent for a single prompt.
+  // For multi-turn, the agent's own session/resume handles continuity.
+  const last = messages[messages.length - 1];
+  const content = last?.content || '';
+  if (!content) return;
+
+  // app.js treats the "model" picker as the agent picker (selects from
+  // agents.list ids). If no explicit agentId is given, model IS the agent.
+  // If `model` looks like a real model id (has a slash), keep it as model
+  // and default agent to claude-code.
+  let resolvedAgentId = agentId;
+  let resolvedModel = model;
+  if (!resolvedAgentId) {
+    if (!model || /^[a-z][a-z0-9-]*$/.test(model)) {
+      // Bare slug — treat as agentId.
+      resolvedAgentId = model || 'claude-code';
+      resolvedModel = undefined;
+    } else {
+      resolvedAgentId = 'claude-code';
+    }
+  }
+
+  // Queue events here; the async iterator pulls from it.
+  const queue = [];
+  let resolveWait = null;
+  let done = false;
+  let errored = null;
+  const push = (ev) => { queue.push(ev); if (resolveWait) { resolveWait(); resolveWait = null; } };
+
+  // Kick off the chat on the server.
+  let started;
+  try {
+    started = await wsCall(base, 'chat.sendMessage', { content, agentId: resolvedAgentId, model: resolvedModel });
+  } catch (e) {
+    yield { type: 'error', error: e.message };
+    return;
+  }
+  const sessionId = started?.sessionId;
+  if (!sessionId) { yield { type: 'error', error: 'no sessionId from server' }; return; }
+
+  const unsub = addSessionListener(sessionId, (ev) => {
+    if (ev.type === 'streaming_progress') {
+      const block = ev.block;
+      if (block?.type === 'text' && block.text) push({ type: 'text', text: block.text });
+      else if (block?.type === 'tool_use') push({ type: 'tool', block });
+      else if (block?.type === 'tool_result') push({ type: 'tool', block });
+      else if (block?.type === 'result') push({ type: 'result', block });
+    } else if (ev.type === 'streaming_complete') {
+      done = true;
+      if (resolveWait) { resolveWait(); resolveWait = null; }
+    } else if (ev.type === 'streaming_error') {
+      errored = ev.error || 'streaming error';
+      done = true;
+      if (resolveWait) { resolveWait(); resolveWait = null; }
+    }
+  });
+
+  // Wire AbortSignal to chat.cancel.
+  const onAbort = () => { wsCall(base, 'chat.cancel', { sessionId }).catch(() => {}); };
+  if (signal) {
+    if (signal.aborted) onAbort();
+    else signal.addEventListener('abort', onAbort, { once: true });
+  }
+
+  try {
+    while (!done || queue.length > 0) {
+      if (queue.length === 0) {
+        await new Promise(r => { resolveWait = r; });
+        continue;
+      }
+      yield queue.shift();
     }
+    if (errored) yield { type: 'error', error: errored };
+  } finally {
+    unsub();
+    if (signal) signal.removeEventListener?.('abort', onAbort);
   }
 }

package/site/app/js/codec.js

@@ -0,0 +1,8 @@
+// Browser mirror of lib/codec.js. JSON over WS text frames.
+export function encode(obj) { return JSON.stringify(obj); }
+export function decode(buf) {
+  if (typeof buf === 'string') return JSON.parse(buf);
+  if (buf instanceof ArrayBuffer) return JSON.parse(new TextDecoder().decode(new Uint8Array(buf)));
+  if (buf instanceof Uint8Array) return JSON.parse(new TextDecoder().decode(buf));
+  return JSON.parse(String(buf));
+}