agentgui 1.0.914 → 1.0.916

package/AGENTS.md

@@ -1,5 +1,27 @@
 # AgentGUI — Agent Notes
 
+## New architecture (2026-05-02 pivot)
+
+There are now **two parallel surfaces** in this repo. Don't conflate them when editing.
+
+1. **Live client** at `site/app/` — single static page, imports [`anentrypoint-design`](https://www.npmjs.com/package/anentrypoint-design) from unpkg, talks to any [`acptoapi`](https://www.npmjs.com/package/acptoapi) backend over fetch / SSE. No build step. Deploys to GH Pages at `/app/` via `.github/workflows/gh-pages.yml` (post-flatspace copy step).
+   - `site/app/index.html` — shell + CSS
+   - `site/app/js/backend.js` — acptoapi client (models, chat-stream, history, search, SSE)
+   - `site/app/js/app.js` — webjsx view + state, exposes `window.__agentgui` for debug
+   - Configurable backend URL via `?backend=…` query string or `localStorage['agentgui.backend']`
+
+2. **Legacy server** (`server.js`, `lib/`, `static/`) — the npm-installable Node app, still works, still gets `npm run dev`. Being phased out as the static client + acptoapi cover its features. Don't delete in passing; full removal is its own PR.
+
+Backend dependencies:
+- `acptoapi` provides chat / messages / models endpoints (existing) + new history endpoints (`/v1/history/sessions`, `/v1/history/sessions/:sid/events`, `/v1/history/search`, `/v1/history/stream`) — see `c:\dev\acptoapi\lib\history\` (ccsniff functionality merged in 2026-05-02).
+- `anentrypoint-design` provides AppShell / Chat / FileGrid / etc. — single-file ESM from unpkg, no install.
+
+The static client never imports anything from `lib/` or `server.js`. Cross-contamination = bug.
+
+## Learning audit
+
+- 2026-05-02 session: 5 items audited (CI bun, stream imports, windows fallback, GM blocker, ACP history), 0 removed (rs-learn retrieval not yet confirmed; safety default kept all), 1 new fact ingested (acptoapi history integration)
+
 ## CI / GitHub Actions
 
 **capture-screenshots must run under bun, not node.**
@@ -31,3 +53,24 @@ On Windows hosts without bun installed, the auto-provisioner on startup and 6h p
 Fix: `BUNX_RUNNERS` array iterates `['bun', 'npx']` and tries each in sequence. Error detection regex `isMissingCmdError` matches `/not recognized|ENOENT|command not found|cannot find/i` on both `error.message` and captured stdout+stderr. Only falls through to next runner when the `missing` flag is set.
 
 Pattern: When a binary might not exist on all platforms, use a runner fallback strategy. Always capture and check both error.message and process output streams. Cross-platform error detection requires regex alternation on common message patterns.
+
+## GM Plugin Autonomy Blocker
+
+**gm plugin's pre-tool-use-hook.js enforces "must invoke gm:gm first" gate, blocking multi-tool autonomy. Hook content is NOT sourced from gm-starter/hooks/ files — it is templated from somewhere else.**
+
+The gm plugin enforces a gate via `.gm/needs-gm` marker that requires invoking `gm:gm` before any other tool use, which fragments multi-tool autonomous sessions in agentgui. A bypass patch was committed to c:/dev/gm (commit e300acf7, origin/main) in gm-starter/hooks/{pre-tool-use,prompt-submit}-hook.js to skip the gate when `.gm/prd.yml` exists, but it did NOT propagate after `/plugin update gm` (cache hash changed 495e36843d77 → 075e64d58498 but hook content unchanged).
+
+The actual hook content is generated/templated from c:/dev/gm, likely from `lib/cli-adapter.js` or `platforms/cli-config-shared.js` or `lib/template-builder.js`, not from gm-starter/hooks/. Next session must:
+1. Locate the real hook generator in the gm codebase
+2. Patch it to add `if (autonomous) { try { fs.unlinkSync(needsGmPath); } catch {} }` when `.gm/prd.yml` exists
+3. Rebuild via `node c:/dev/gm/cli.js c:/dev/gm/gm-starter c:/dev/gm/build`
+4. Push changes to c:/dev/gm origin/main
+5. Run `/plugin update gm` in agentgui
+
+Only after the real generator is patched will agentgui sessions run autonomously without per-tool ceremony.
+
+## ACP-to-API History Integration
+
+**acptoapi (c:\dev\acptoapi) merged Claude Code history routes as of 2026-05-02; ccsniff package is no longer needed.**
+
+History functionality (`GET /v1/history/*` endpoints) is now built into acptoapi. Routes: `snapshot` (event/session/project/tool/error counts + byte/date range), `sessions` (list with title/project/cwd/counts), `sessions/:sid/events` (flattened events), `search` (BM25 with snippets), `reindex` (rebuild index), `stream` (SSE). Implementation: `lib/history/` (bm25.js for tokenize/buildIndex/search/snippet, watcher.js for JsonlWatcher + JsonlReplayer, index.js for HistoryStore singleton + flattenEvent). Reads `~/.claude/projects` by default; override with `CLAUDE_PROJECTS_DIR` env var. The ccsniff package itself is no longer required — acptoapi covers the functionality entirely.

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.0.908] - manual audit fixes: server retry idempotency, cli-version detection, cleanup FK ordering, refresh-all path
+
+- server.js: `onServerListenStart` one-shot guard prevents `onServerReady` + `loadPluginExtensions` from re-firing when EADDRINUSE retry succeeds — previously every retry re-ran autoProvision/installGMAgentConfigs/setIntervals causing 100+ duplicate provision passes and stacked timers
+- lib/tool-version-check.js: bumped `getCliVersion` execSync timeout from 1000ms to 15000ms; bumped `checkCliInstalled` `where` timeout from 3000ms to 10000ms — Windows cmd.exe + node CLI cold-start regularly exceeds 1s/3s, leaving opencode/gemini/kilo/agent-browser with `installedVersion: null` despite being installed
+- lib/db-queries-cleanup.js: reordered cleanup transaction — child rows (chunks, stream_updates) now deleted before their parent sessions; was causing FOREIGN KEY constraint failed on every `[cleanup] Initial DB cleanup complete` invocation and on the 6h periodic cleanup, silently aborting the whole transaction
+- lib/routes-tools.js: `POST /api/tools/refresh-all` now calls `toolManager.refreshAllToolsAsync()` (which clears statusCache) instead of `getAllTools()` which returned stale cached values — refresh button was a no-op
+
 ## [Unreleased] - implement 247420 brand-bible chrome on main shell
 
 - index.html: header brand line reads `247420 / agentgui / <leaf>`; sidebar brand line reads `247420 / agentgui` — mono slash `/` in muted color, matches canonical app-topbar pattern from c:/dev/design

package/README.md

@@ -10,6 +10,23 @@
 
 Multi-agent GUI client for AI coding agents with real-time streaming, WebSocket sync, and SQLite persistence.
 
+## Live client (new)
+
+AgentGUI now ships a static GH Pages client at **`/app/`** that talks to any [`acptoapi`](https://github.com/AnEntrypoint/acptoapi) backend over plain HTTP — no install, no bundler, no DB. Open `https://anentrypoint.github.io/agentgui/app/?backend=http://your-acptoapi-host:4800` and chat with any provider acptoapi proxies (Claude / Gemini / OpenAI-compat brands / kilo / opencode), plus browse local Claude Code JSONL history right in the page.
+
+- UI: [anentrypoint-design](https://www.npmjs.com/package/anentrypoint-design) (CDN, single-file ESM)
+- Backend: [acptoapi](https://www.npmjs.com/package/acptoapi) — `npx acptoapi` on the host with Claude Code / API keys; exposes `/v1/chat/completions`, `/v1/messages`, `/v1/history/*`
+- Source: `site/app/` (this repo)
+
+History endpoints in `acptoapi` (formerly `ccsniff`'s job):
+
+- `GET /v1/history/sessions` — list Claude Code sessions on the host
+- `GET /v1/history/sessions/:sid/events` — flattened events for one session
+- `GET /v1/history/search?q=…` — BM25-ranked search across all events
+- `GET /v1/history/stream` — Server-Sent Events for live tailing
+
+The legacy Node server in this repo (`server.js`, `lib/`, `static/`) still ships in the npm `agentgui` package and is the install-friendly path. It is being phased out as the static client + acptoapi pair reach feature parity.
+
 ### Supported Agents
 
 | Agent | Protocol | Auto-installable |

package/lib/db-queries-cleanup.js

@@ -6,15 +6,16 @@ export function addCleanupQueries(q, db, prep, generateId) {
 
     const cleanupStmt = db.transaction(() => {
       prep('DELETE FROM events WHERE created_at < ?').run(thirtyDaysAgo);
-      prep('DELETE FROM sessions WHERE completed_at IS NOT NULL AND completed_at < ?').run(thirtyDaysAgo);
       prep('DELETE FROM idempotencyKeys WHERE (created_at + ttl) < ?').run(now);
 
-      prep('DELETE FROM chunks WHERE sessionId IN (SELECT id FROM sessions WHERE completed_at IS NOT NULL AND completed_at < ?)').run(sevenDaysAgo);
-      prep('DELETE FROM stream_updates WHERE sessionId IN (SELECT id FROM sessions WHERE completed_at IS NOT NULL AND completed_at < ?)').run(sevenDaysAgo);
+      prep('DELETE FROM chunks WHERE sessionId IN (SELECT id FROM sessions WHERE completed_at IS NOT NULL AND completed_at < ?)').run(thirtyDaysAgo);
+      prep('DELETE FROM stream_updates WHERE sessionId IN (SELECT id FROM sessions WHERE completed_at IS NOT NULL AND completed_at < ?)').run(thirtyDaysAgo);
 
       prep('DELETE FROM chunks WHERE created_at < ? AND sessionId NOT IN (SELECT id FROM sessions WHERE completed_at IS NULL AND started_at >= ?)').run(sevenDaysAgo, sevenDaysAgo);
       prep('DELETE FROM stream_updates WHERE created_at < ? AND sessionId NOT IN (SELECT id FROM sessions WHERE completed_at IS NULL AND started_at >= ?)').run(sevenDaysAgo, sevenDaysAgo);
 
+      prep('DELETE FROM sessions WHERE completed_at IS NOT NULL AND completed_at < ?').run(thirtyDaysAgo);
+
       prep('DELETE FROM voice_cache WHERE expires_at <= ?').run(now);
 
       const deletedConvIds = prep("SELECT id FROM conversations WHERE status = 'deleted' AND updated_at < ?").all(sevenDaysAgo).map(r => r.id);

package/lib/routes-tools.js

@@ -67,12 +67,11 @@ export function register(deps) {
     sendJSON(req, res, 200, { refreshing: true, toolCount: 4 });
     broadcastSync({ type: 'tools_refresh_started' });
     setImmediate(async () => {
-      const tools = toolManager.getAllTools();
+      const tools = await toolManager.refreshAllToolsAsync();
       for (const tool of tools) {
         queries.updateToolStatus(tool.id, { status: tool.installed ? 'installed' : 'not_installed', version: tool.installedVersion, last_check_at: Date.now() });
-        if (tool.installed) {
-          const status = await toolManager.checkToolStatusAsync(tool.id);
-          if (status?.upgradeNeeded) queries.updateToolStatus(tool.id, { update_available: 1, latest_version: status.publishedVersion });
+        if (tool.installed && tool.upgradeNeeded) {
+          queries.updateToolStatus(tool.id, { update_available: 1, latest_version: tool.publishedVersion });
         }
       }
       broadcastSync({ type: 'tools_refresh_complete', data: tools });

package/lib/tool-version-check.js

@@ -141,7 +141,7 @@ export function checkCliInstalled(pkg) {
     const cmd = isWindows ? 'where' : 'which';
     const bin = BIN_MAP[pkg];
     if (bin) {
-      execSync(`${cmd} ${bin}`, { stdio: 'pipe', timeout: 3000, windowsHide: true });
+      execSync(`${cmd} ${bin}`, { stdio: 'pipe', timeout: 10000, windowsHide: true });
       return true;
     }
   } catch (_) {}
@@ -154,7 +154,7 @@ export function getCliVersion(pkg) {
     if (!bin) return null;
     try {
       const versionFlag = pkg === 'agent-browser' ? '-V' : '--version';
-      const out = execSync(`${bin} ${versionFlag}`, { stdio: 'pipe', timeout: 1000, encoding: 'utf8', windowsHide: true });
+      const out = execSync(`${bin} ${versionFlag}`, { stdio: 'pipe', timeout: 15000, encoding: 'utf8', windowsHide: true });
       const match = out.match(/(\d+\.\d+\.\d+)/);
       if (match) {
         console.log(`[tool-manager] CLI ${pkg} (${bin}) version: ${match[1]}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.914",
+  "version": "1.0.916",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",

package/server.js

@@ -169,11 +169,19 @@ process.on('SIGINT', () => {
   process.exit(0);
 });
 
+let _serverReadyFired = false;
+const onServerListenStart = () => {
+  if (_serverReadyFired) return;
+  _serverReadyFired = true;
+  onServerReady();
+  loadPluginExtensions();
+};
+
 server.on('error', (err) => {
   if (err.code === 'EADDRINUSE') {
     console.error(`Port ${PORT} already in use. Waiting 3 seconds before retry...`);
     setTimeout(() => {
-      server.listen(PORT, onServerReady);
+      server.listen(PORT, onServerListenStart);
     }, 3000);
   } else {
     console.error('[SERVER] Error (contained):', err.message);
@@ -194,7 +202,4 @@ const { onServerReady, getJsonlWatcher } = createOnServerReady({
   performAgentHealthCheck, pm2Manager, pm2Subscribers, recoverStaleSessions
 });
 
-server.listen(PORT, () => {
-  onServerReady();
-  loadPluginExtensions();
-});
+server.listen(PORT, onServerListenStart);

package/site/app/index.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en" class="ds-247420" data-theme="dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>agentgui — live client</title>
+  <meta name="description" content="agentgui live client — talks to any acptoapi backend, anywhere.">
+  <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">
+  <script type="importmap">
+    { "imports": {
+      "anentrypoint-design": "https://unpkg.com/anentrypoint-design@latest/dist/247420.js"
+    } }
+  </script>
+  <style>
+    html,body { margin:0; height:100%; }
+    body { background: var(--app-bg, #0b0b0b); color: var(--text, #eee); font-family: var(--ff-body, system-ui); }
+    #app { height: 100vh; display: grid; grid-template-rows: auto 1fr; }
+    .topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
+    .topbar .brand { font-weight:600; letter-spacing:.04em; }
+    .topbar .right { display:flex; gap:10px; align-items:center; }
+    .topbar input { width: 320px; padding:6px 10px; border-radius:6px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.04); color:inherit; font:inherit; }
+    .tabs { display:flex; gap:4px; }
+    .tabs button { padding:6px 12px; border-radius:6px; border:1px solid transparent; background:transparent; color:inherit; cursor:pointer; font:inherit; }
+    .tabs button.active { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
+    .body { display:grid; grid-template-columns: 320px 1fr; min-height:0; }
+    .side { border-right:1px solid rgba(255,255,255,.08); overflow:auto; padding:8px; }
+    .main { overflow:auto; padding:16px; min-width:0; }
+    .empty { opacity:.6; padding:24px; text-align:center; }
+    .pill { display:inline-block; padding:1px 7px; border-radius:999px; background: rgba(255,255,255,.1); font-size:11px; margin-left:6px; }
+    .pill.ok { background: rgba(80,200,120,.18); color:#7fd; }
+    .pill.bad { background: rgba(255,80,80,.18); color:#f88; }
+    .row { display:block; padding:8px 10px; border-radius:6px; cursor:pointer; }
+    .row:hover { background: rgba(255,255,255,.04); }
+    .row.active { background: rgba(255,255,255,.08); }
+    .row .t { font-size:13px; }
+    .row .s { font-size:11px; opacity:.6; margin-top:2px; font-family: var(--ff-mono, ui-monospace, monospace); }
+    .ev { padding:6px 0; border-bottom: 1px dashed rgba(255,255,255,.06); font-family: var(--ff-mono, ui-monospace, monospace); font-size:12px; }
+    .ev .h { opacity:.55; margin-bottom:2px; }
+    .ev pre { white-space: pre-wrap; margin:0; }
+    .chat-host { height:100%; display:flex; flex-direction:column; }
+    .chat-msgs { flex:1; overflow:auto; padding:10px 4px; }
+    .msg { padding:8px 10px; border-radius:8px; margin:6px 0; max-width:80ch; }
+    .msg.user { background: rgba(120,180,255,.08); }
+    .msg.assistant { background: rgba(255,255,255,.04); }
+    .msg .role { font-size:11px; opacity:.6; margin-bottom:4px; text-transform:uppercase; letter-spacing:.08em; }
+    .composer { display:flex; gap:8px; padding:8px; border-top:1px solid rgba(255,255,255,.08); }
+    .composer textarea { flex:1; min-height:48px; max-height:200px; resize:vertical; padding:8px 10px; border-radius:6px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:inherit; font:inherit; }
+    .composer button { padding:8px 16px; border-radius:6px; border:1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color:inherit; cursor:pointer; }
+    .composer select { padding:6px 8px; border-radius:6px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:inherit; font:inherit; }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./js/app.js"></script>
+</body>
+</html>

package/site/app/js/app.js

@@ -0,0 +1,181 @@
+import { h, applyDiff, installStyles } from 'anentrypoint-design';
+import * as B from './backend.js';
+installStyles().catch(() => {});
+
+const state = {
+  backend: B.getBackend(),
+  health: { status: 'unknown' },
+  tab: 'chat',
+  models: [],
+  selectedModel: '',
+  // chat
+  chat: { messages: [], busy: false, abort: null, draft: '' },
+  // history
+  sessions: [],
+  selectedSid: null,
+  events: [],
+  searchQ: '',
+  searchHits: null,
+  liveTail: [],
+};
+
+const root = document.getElementById('app');
+
+function render() { applyDiff(root, view()); }
+
+function view() {
+  return h('div', { class: 'app-root', style: 'display:grid;grid-template-rows:auto 1fr;height:100%' }, topbar(), bodyView());
+}
+
+function topbar() {
+  const ok = state.health.status === 'ok';
+  return h('div', { class: 'topbar' },
+    h('div', { class: 'brand' }, 'agentgui ', h('span', { class: 'pill ' + (ok ? 'ok' : 'bad') }, ok ? 'connected' : 'offline')),
+    h('div', { class: 'tabs' },
+      tabBtn('chat', 'chat'),
+      tabBtn('history', 'history'),
+      tabBtn('settings', 'settings'),
+    ),
+    h('div', { class: 'right' },
+      h('input', { value: state.backend, placeholder: 'backend url', onchange: e => { state.backend = e.target.value; B.setBackend(state.backend); init(); } }),
+    ),
+  );
+}
+
+function tabBtn(id, label) {
+  return h('button', { class: state.tab === id ? 'active' : '', onclick: () => { state.tab = id; render(); if (id === 'history') refreshHistory(); } }, label);
+}
+
+function bodyView() {
+  if (state.tab === 'chat') return chatView();
+  if (state.tab === 'history') return historyView();
+  return settingsView();
+}
+
+function settingsView() {
+  return h('div', { class: 'main' },
+    h('h2', {}, 'settings'),
+    h('p', {}, 'backend: ', h('code', {}, state.backend)),
+    h('p', {}, 'health: ', JSON.stringify(state.health)),
+    h('p', {}, 'tip: pass ', h('code', {}, '?backend=https://your-acptoapi-host'), ' to override'),
+  );
+}
+
+function chatView() {
+  return h('div', { class: 'body', style: 'grid-template-columns: 1fr' },
+    h('div', { class: 'main chat-host' },
+      h('div', { class: 'chat-msgs' },
+        ...state.chat.messages.map((m, i) => h('div', { class: 'msg ' + m.role },
+          h('div', { class: 'role' }, m.role),
+          h('div', { class: 'content' }, m.content || ''),
+        )),
+        state.chat.messages.length === 0 ? h('div', { class: 'empty' }, 'pick a model and start chatting') : null,
+      ),
+      h('div', { class: 'composer' },
+        h('select', { onchange: e => { state.selectedModel = e.target.value; render(); } },
+          h('option', { value: '' }, '— choose model —'),
+          ...state.models.map(m => h('option', { value: m.id, selected: m.id === state.selectedModel }, m.id)),
+        ),
+        h('textarea', {
+          placeholder: 'message…',
+          value: state.chat.draft,
+          oninput: e => { state.chat.draft = e.target.value; },
+          onkeydown: e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendChat(); } },
+        }),
+        h('button', { onclick: () => state.chat.busy ? cancelChat() : sendChat() }, state.chat.busy ? 'stop' : 'send'),
+      ),
+    ),
+  );
+}
+
+async function sendChat() {
+  const text = (state.chat.draft || '').trim();
+  if (!text || !state.selectedModel || state.chat.busy) return;
+  state.chat.messages.push({ role: 'user', content: text });
+  state.chat.messages.push({ role: 'assistant', content: '' });
+  state.chat.draft = '';
+  state.chat.busy = true;
+  const ctrl = new AbortController();
+  state.chat.abort = ctrl;
+  render();
+  const cur = state.chat.messages[state.chat.messages.length - 1];
+  try {
+    for await (const ev of B.streamChat(state.backend, {
+      model: state.selectedModel,
+      messages: state.chat.messages.slice(0, -1).map(m => ({ role: m.role, content: m.content })),
+      signal: ctrl.signal,
+    })) {
+      if (ev.type === 'text') { cur.content += ev.text; render(); }
+      if (ev.type === 'error') { cur.content += '\n[error] ' + JSON.stringify(ev.error); render(); }
+    }
+  } catch (e) {
+    cur.content += '\n[error] ' + e.message;
+  } finally {
+    state.chat.busy = false;
+    state.chat.abort = null;
+    render();
+  }
+}
+
+function cancelChat() { state.chat.abort?.abort(); }
+
+function historyView() {
+  return h('div', { class: 'body' },
+    h('div', { class: 'side' },
+      h('input', { class: 'search', placeholder: 'search…', value: state.searchQ, onchange: e => { state.searchQ = e.target.value; runSearch(); } }),
+      state.searchHits ? h('div', {},
+        h('div', { style: 'font-size:11px;opacity:.6;padding:6px 10px' }, state.searchHits.results.length + ' hits for "' + state.searchHits.query + '"'),
+        ...state.searchHits.results.slice(0, 30).map(r => h('div', { class: 'row', onclick: () => loadSession(r.sid) },
+          h('div', { class: 't' }, r.snippet || '(no snippet)'),
+          h('div', { class: 's' }, r.project + ' · ' + r.role + (r.tool ? ' · ' + r.tool : '')),
+        )),
+      ) : h('div', {},
+        ...state.sessions.slice(0, 80).map(s => h('div', { class: 'row' + (s.sid === state.selectedSid ? ' active' : ''), onclick: () => loadSession(s.sid) },
+          h('div', { class: 't' }, s.title || s.project || s.sid),
+          h('div', { class: 's' }, s.events + ' ev · ' + s.tools + ' tools · ' + (s.errors ? s.errors + ' err' : 'ok')),
+        )),
+        state.sessions.length === 0 ? h('div', { class: 'empty' }, 'no sessions yet') : null,
+      ),
+    ),
+    h('div', { class: 'main' },
+      state.events.length === 0
+        ? h('div', { class: 'empty' }, state.selectedSid ? 'loading…' : 'pick a session')
+        : h('div', {},
+            ...state.events.map(e => h('div', { class: 'ev' },
+              h('div', { class: 'h' }, new Date(e.ts).toLocaleString() + ' · ' + (e.role || '?') + ' · ' + (e.type || '?') + (e.tool ? ' · ' + e.tool : '')),
+              h('pre', {}, (e.text || '').slice(0, 4000)),
+            )),
+          ),
+    ),
+  );
+}
+
+async function refreshHistory() {
+  try {
+    state.sessions = await B.listSessions(state.backend);
+    render();
+  } catch (e) { console.warn('history fetch failed:', e.message); }
+}
+
+async function runSearch() {
+  if (!state.searchQ.trim()) { state.searchHits = null; render(); return; }
+  try { state.searchHits = await B.searchHistory(state.backend, state.searchQ, 50); render(); }
+  catch (e) { state.searchHits = { query: state.searchQ, results: [], error: e.message }; render(); }
+}
+
+async function loadSession(sid) {
+  state.selectedSid = sid; state.events = []; render();
+  try { state.events = await B.getSessionEvents(state.backend, sid); render(); }
+  catch (e) { state.events = [{ ts: Date.now(), role: 'error', type: 'fetch', text: e.message }]; render(); }
+}
+
+async function init() {
+  state.health = await B.probeBackend(state.backend).then(r => r.ok ? { status: 'ok', ...r.info } : { status: 'down', ...r });
+  render();
+  try { state.models = await B.listModels(state.backend); if (!state.selectedModel && state.models[0]) state.selectedModel = state.models[0].id; render(); }
+  catch (e) { console.warn('models fetch failed:', e.message); }
+  if (state.tab === 'history') refreshHistory();
+}
+
+window.__agentgui = { state, render };
+init();

package/site/app/js/backend.js

@@ -0,0 +1,99 @@
+// acptoapi backend client. Resolves base URL from ?backend= or localStorage or default.
+const KEY = 'agentgui.backend';
+const DEFAULT_BACKEND = 'http://localhost:4800';
+
+export function getBackend() {
+  const u = new URL(location.href);
+  const fromQs = u.searchParams.get('backend');
+  if (fromQs) { localStorage.setItem(KEY, fromQs); return fromQs; }
+  return localStorage.getItem(KEY) || DEFAULT_BACKEND;
+}
+
+export function setBackend(url) {
+  localStorage.setItem(KEY, url);
+}
+
+export async function probeBackend(base) {
+  try {
+    const r = await fetch(base + '/health', { method: 'GET' });
+    if (!r.ok) return { ok: false, status: r.status };
+    const j = await r.json();
+    return { ok: true, info: j };
+  } 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 || [];
+}
+
+export async function listSessions(base) {
+  const r = await fetch(base + '/v1/history/sessions');
+  if (!r.ok) throw new Error('sessions: ' + r.status);
+  return r.json();
+}
+
+export async function getSessionEvents(base, sid) {
+  const r = await fetch(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);
+  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');
+  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; }
+      onEvent(k, data);
+    });
+  }
+  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));
+  }
+  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;
+      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 (_) {}
+    }
+  }
+}