agentgui 1.0.931 → 1.0.933

package/AGENTS.md

@@ -1,22 +1,27 @@
 # AgentGUI — Agent Notes
 
-## New architecture (2026-05-02 pivot)
+## Architecture (2026-05-19 pivot — single surface)
 
-There are now **two parallel surfaces** in this repo. Don't conflate them when editing.
+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.
 
-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']`
+- `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
+- `site/app/js/app.js` — webjsx view + state, kits-only rendering (PageHeader, SearchInput, TextField, EventList, Panel, Row, Section); exposes `window.__agentgui`
+- `server.js` — boots ACP/agents/websocket plugins, mounts `createHistoryRouter()` from `ccsniff` at `/`, serves `site/app/` as static root
+- Plugins kept (lib/plugins/): acp, agents, database, files, stream, websocket, workflow
 
-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.
+Dependencies:
+- `ccsniff` (>=1.1.0) — exports `createHistoryRouter({projectsDir})` mountable on Express; serves `/v1/history/{sessions,sessions/:sid/events,search,snapshot,reindex,stream}`. Reads `~/.claude/projects` (override via `CLAUDE_PROJECTS_DIR`).
+- `anentrypoint-design` (>=0.0.119) — kit library, single-file ESM from unpkg
 
-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.
+## Browser Witness (2026-05-19)
 
-The static client never imports anything from `lib/` or `server.js`. Cross-contamination = bug.
+Local server on PORT=3056 (default), `bun server.js`:
+- `GET /health` → 200 JSON
+- `GET /v1/history/sessions` → `{"sessions":[]}` from ccsniff
+- `GET /` → site/app/index.html
+- WS `/sync` → opens, sync_connected
+- Browser at `localhost:3056/`: AppShell renders, nav=[chat,history,settings], SSE `hello` received (live.connected=true, eventCount=1), 0 console errors, backend resolves to `''` (same origin).
 
 ## Learning audit
 

package/database.js

@@ -5,7 +5,36 @@ import { createRequire } from 'module';
 import { initSchema } from './database-schema.js';
 import { migrateFromJson, migrateToACP, migrateConversationColumns } from './database-migrations.js';
 import { migrateACPSchema, migrateBackfillMessages, migrateFTS, migrateAutoVacuum } from './database-migrations-acp.js';
-import { createQueries } from './lib/db-queries.js';
+// db-queries layer removed; queries is now a no-op proxy. History is served by ccsniff.
+function createQueries(db) {
+  const noop = () => undefined;
+  const target = {
+    _db: db,
+    cleanup: noop,
+    cleanupEmptyConversations: () => 0,
+    cleanupOrphanedSessions: () => 0,
+    clearAllStreamingFlags: () => 0,
+    getStreamingConversations: () => [],
+    getResumableConversations: () => [],
+    getActiveSessions: () => [],
+    getSessionsProcessingLongerThan: () => [],
+    getConversationsList: () => [],
+    getConversation: () => null,
+    getSession: () => null,
+    getLatestSession: () => null,
+    getAllSessions: () => [],
+    getStreamChunks: () => [],
+    getExecutionEvents: () => [],
+    searchAgents: () => [],
+  };
+  return new Proxy(target, {
+    get(t, k) {
+      if (k in t) return t[k];
+      if (typeof k === 'symbol') return undefined;
+      return () => undefined;
+    },
+  });
+}
 
 const require = createRequire(import.meta.url);
 
@@ -75,6 +104,6 @@ function generateId(prefix) {
   return `${prefix}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 }
 
-export const queries = createQueries(db, prep, generateId);
+export const queries = createQueries(db);
 
 export default { queries };

package/lib/http-handler.js

@@ -33,7 +33,7 @@ export function createHttpHandler({ BASE_URL, expressApp, queries, sendJSON, ser
     }
 
     const pathOnly = req.url.split('?')[0];
-    if (pathOnly.startsWith(BASE_URL + '/api/upload/') || pathOnly.startsWith(BASE_URL + '/files/')) return expressApp(req, res);
+    if (pathOnly.startsWith(BASE_URL + '/api/upload/') || pathOnly.startsWith(BASE_URL + '/files/') || pathOnly.startsWith('/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>';
@@ -41,13 +41,14 @@ export function createHttpHandler({ BASE_URL, expressApp, queries, sendJSON, ser
       res.end(svg); return;
     }
 
-    if (req.url === '/') { res.writeHead(302, { Location: BASE_URL + '/' }); res.end(); return; }
+    // 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('/conversations/')) { routePath = req.url; }
     else { res.writeHead(404); res.end('Not found'); return; }
 
@@ -56,7 +57,7 @@ export function createHttpHandler({ BASE_URL, expressApp, queries, sendJSON, ser
     try {
       const pathOnly = routePath.split('?')[0];
 
-      if (pathOnly === '/api/health' && req.method === 'GET') {
+      if ((pathOnly === '/api/health' || pathOnly === '/health') && req.method === 'GET') {
         let dbStatus = { ok: true };
         try { queries._db.prepare('SELECT 1').get(); } catch (e) { dbStatus = { ok: false, error: e.message }; }
         const queueSizes = {};
@@ -65,28 +66,13 @@ export function createHttpHandler({ BASE_URL, expressApp, queries, sendJSON, ser
         return;
       }
 
-      const convHandler = routes.conv._match(req.method, pathOnly);
-      if (convHandler) { await convHandler(req, res); return; }
-      const messagesHandler = routes.messages._match(req.method, pathOnly);
-      if (messagesHandler) { await messagesHandler(req, res); return; }
-      const sessionsHandler = routes.sessions._match(req.method, pathOnly);
-      if (sessionsHandler) { await sessionsHandler(req, res); return; }
-      const scriptsHandler = routes.scripts._match(req.method, pathOnly);
-      if (scriptsHandler) { await scriptsHandler(req, res); return; }
-      const runsHandler = routes.runs._match(req.method, pathOnly);
-      if (runsHandler) { await runsHandler(req, res); return; }
-      const agentHandler = routes.agents._match(req.method, pathOnly);
-      if (agentHandler) { await agentHandler(req, res); return; }
-      const agentActionsHandler = routes.agentActions._match(req.method, pathOnly);
-      if (agentActionsHandler) { await agentActionsHandler(req, res); return; }
-      const authConfigHandler = routes.authConfig._match(req.method, pathOnly);
-      if (authConfigHandler) { await authConfigHandler(req, res); return; }
-      const utilHandler = routes.util._match(req.method, pathOnly);
-      if (utilHandler) { await utilHandler(req, res); return; }
-      const threadHandler = routes.threads._match(req.method, pathOnly);
-      if (threadHandler) { await threadHandler(req, res); return; }
-      const debugHandler = routes.debug._match(req.method, pathOnly);
-      if (debugHandler) { await debugHandler(req, res); return; }
+      // Legacy REST handlers removed. History served by ccsniff at /v1/history/*.
+      for (const key of Object.keys(routes)) {
+        try {
+          const h = routes[key]?._match?.(req.method, pathOnly);
+          if (h) { await h(req, res); return; }
+        } catch (_) {}
+      }
       if (routePath.startsWith('/api/image/')) {
         const imagePath = routePath.slice('/api/image/'.length);
         const decodedPath = decodeURIComponent(imagePath);

package/lib/routes-registry.js

@@ -1,50 +1,6 @@
-import { register as registerUtilRoutes } from './routes-util.js';
-import { register as registerThreadRoutes } from './routes-threads.js';
-import { register as registerDebugRoutes } from './routes-debug.js';
-import { register as registerConvRoutes } from './routes-conversations.js';
-import { register as registerAgentRoutes } from './routes-agents.js';
-import { register as registerMessagesRoutes } from './routes-messages.js';
-import { register as registerSessionsRoutes } from './routes-sessions.js';
-import { register as registerRunsRoutes } from './routes-runs.js';
-import { register as registerScriptsRoutes } from './routes-scripts.js';
-import { register as registerAgentActionsRoutes } from './routes-agent-actions.js';
-import { register as registerAuthConfigRoutes } from './routes-auth-config.js';
-import { register as registerConvHandlers } from './ws-handlers-conv.js';
-import { register as registerConvHandlers2 } from './ws-handlers-conv2.js';
-import { register as registerSessionHandlers } from './ws-handlers-session.js';
-import { register as registerSessionHandlers2 } from './ws-handlers-session2.js';
-import { register as registerRunHandlers } from './ws-handlers-run.js';
-import { register as registerUtilHandlers } from './ws-handlers-util.js';
-import { register as registerScriptHandlers } from './ws-handlers-scripts.js';
-import { register as registerQueueHandlers } from './ws-handlers-queue.js';
-import { register as registerMsgHandlers } from './ws-handlers-msg.js';
-import { getAgentDescriptor } from './agent-descriptors.js';
-import { getProviderConfigs, saveProviderConfig } from './provider-config.js';
-
+// Legacy route/ws registry stripped down. Old REST routes and WS handlers
+// removed in favor of ccsniff /v1/history/* and the static site/app client.
+// Keep as a no-op shim so server.js can still call it.
 export function createRegistry(wsRouter, deps) {
-  const { 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, routes } = deps;
-
-  routes.util = registerUtilRoutes({ sendJSON, parseBody, queries, STARTUP_CWD, PKG_VERSION });
-  routes.threads = registerThreadRoutes({ sendJSON, parseBody, queries });
-  routes.debug = registerDebugRoutes({ sendJSON, queries, activeExecutions, messageQueues, syncClients, wsOptimizer, _errLogPath: errLogPath });
-  routes.conv = registerConvRoutes({ sendJSON, parseBody, queries, activeExecutions, broadcastSync });
-  routes.agents = registerAgentRoutes({ sendJSON, parseBody, queries, discoveredAgents, getACPStatus, modelCache, getModelsForAgent, debugLog });
-  routes.messages = registerMessagesRoutes({ queries, sendJSON, parseBody, broadcastSync, processMessageWithStreaming, activeExecutions, messageQueues, debugLog, logError });
-  routes.sessions = registerSessionsRoutes({ queries, sendJSON, activeExecutions, rateLimitState, debugLog });
-  routes.runs = registerRunsRoutes({ sendJSON, parseBody, queries, broadcastSync, processMessageWithStreaming, activeExecutions, activeProcessesByRunId, discoveredAgents, STARTUP_CWD });
-  routes.scripts = registerScriptsRoutes({ sendJSON, parseBody, queries, broadcastSync, activeScripts, activeExecutions, processMessageWithStreaming, STARTUP_CWD });
-  routes.agentActions = registerAgentActionsRoutes({ sendJSON, queries, broadcastSync, discoveredAgents, activeScripts, modelCache, PORT, BASE_URL, rootDir });
-  routes.authConfig = registerAuthConfigRoutes({ sendJSON, parseBody, getProviderConfigs, saveProviderConfig });
-
-  registerConvHandlers(wsRouter, { queries, activeExecutions, rateLimitState, broadcastSync, processMessageWithStreaming, cleanupExecution, getJsonlWatcher });
-  registerConvHandlers2(wsRouter, { queries, activeExecutions, rateLimitState, broadcastSync, processMessageWithStreaming, cleanupExecution, getJsonlWatcher });
-  registerMsgHandlers(wsRouter, { queries, activeExecutions, messageQueues, broadcastSync, processMessageWithStreaming, logError });
-  registerQueueHandlers(wsRouter, { queries, messageQueues, broadcastSync });
-  debugLog('[INIT] registerSessionHandlers, agents: ' + discoveredAgents.length);
-  registerSessionHandlers(wsRouter, { db: queries, discoveredAgents, modelCache, getAgentDescriptor, activeScripts, broadcastSync });
-  registerSessionHandlers2(wsRouter, { discoveredAgents, modelCache, activeScripts, broadcastSync });
-  debugLog('[INIT] registerSessionHandlers completed');
-  registerRunHandlers(wsRouter, { queries, discoveredAgents, activeExecutions, activeProcessesByRunId, broadcastSync, processMessageWithStreaming, cleanupExecution });
-  registerUtilHandlers(wsRouter, { queries, wsOptimizer, broadcastSync, getProviderConfigs, saveProviderConfig, STARTUP_CWD, discoveredAgents });
-  registerScriptHandlers(wsRouter, { queries, broadcastSync, STARTUP_CWD, activeScripts });
+  // intentionally empty
 }

package/lib/server-startup.js

@@ -1,4 +1,5 @@
-import { JsonlWatcher } from './jsonl-watcher.js';
+// JsonlWatcher removed; history now served by ccsniff in-process.
+const JsonlWatcher = null;
 
 export function createOnServerReady({ queries, broadcastSync, warmAssetCache, staticDir, discoveredAgents, PORT, BASE_URL, watch, setWatcher, resumeInterruptedStreams, activeExecutions, debugLog, installGMAgentConfigs, startACPTools, getACPStatus, execMachine, performAutoImport, performAgentHealthCheck, recoverStaleSessions }) {
   let jsonlWatcher = null;
@@ -21,16 +22,7 @@ export function createOnServerReady({ queries, broadcastSync, warmAssetCache, st
       try { queries.cleanup(); console.log('[cleanup] Scheduled DB cleanup complete'); } catch (e) { console.error('[cleanup] Error:', e.message); }
     }, 6 * 60 * 60 * 1000);
 
-    if (process.env.AGENTGUI_SKIP_AUTO_IMPORT === '1') {
-      console.log('[JSONL] Watcher skipped (AGENTGUI_SKIP_AUTO_IMPORT=1)');
-    } else {
-      try {
-        jsonlWatcher = new JsonlWatcher({ broadcastSync, queries });
-        jsonlWatcher.start();
-        if (setWatcher) setWatcher(jsonlWatcher);
-        console.log('[JSONL] Watcher started');
-      } catch (err) { console.error('[JSONL] Watcher failed to start:', err.message); }
-    }
+    // JsonlWatcher removed; ccsniff handles JSONL history via its own watcher.
 
     resumeInterruptedStreams().catch(err => console.error('[RESUME] Startup error:', err.message));
 

package/lib/ws-setup.js

@@ -1,7 +1,8 @@
 import fs from 'fs';
 import path from 'path';
 import { WebSocketServer } from 'ws';
-import { registerLegacyHandler } from './ws-legacy-handlers.js';
+// Legacy WS handlers removed; no-op shim kept for callsite compatibility.
+const registerLegacyHandler = () => {};
 
 export function createWsSetup(server, { BASE_URL, watch, staticDir, _assetCache, htmlState, sendWs, wsRouter, debugLog, subscriptionIndex, syncClients, wsOptimizer, legacyDeps }) {
   const hotReloadClients = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.931",
+  "version": "1.0.933",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",
@@ -31,6 +31,7 @@
     "better-sqlite3": "^12.9.0",
     "busboy": "^1.6.0",
     "ccfollow": "^1.0.7",
+    "ccsniff": "github:AnEntrypoint/ccsniff#main",
     "execa": "^9.6.1",
     "express": "^5.2.1",
     "form-data": "^4.0.5",
@@ -48,7 +49,6 @@
   },
   "devDependencies": {
     "electron": "^35.0.0",
-    "playwright": "^1.59.1",
-    "rippleui": "^1.12.1"
+    "playwright": "^1.59.1"
   }
 }

package/server.js

@@ -5,6 +5,7 @@ import { fileURLToPath } from 'url';
 import { LRUCache } from 'lru-cache';
 const PKG_VERSION = JSON.parse(fs.readFileSync(new URL('./package.json', import.meta.url), 'utf8')).version;
 import { createExpressApp } from './lib/routes-upload.js';
+import { createHistoryRouter } from 'ccsniff';
 import { queries } from './database.js';
 import { runClaudeWithStreaming } from './lib/claude-runner-run.js';
 import { initializeDescriptors, getAgentDescriptor } from './lib/agent-descriptors.js';
@@ -64,10 +65,15 @@ const STARTUP_CWD = (() => {
   const cwd = process.env.STARTUP_CWD || process.cwd();
   try { fs.accessSync(cwd, fs.constants.R_OK); return cwd; } catch { console.warn(`[server] STARTUP_CWD "${cwd}" not accessible, falling back to ${process.cwd()}`); return process.cwd(); }
 })();
-const staticDir = path.join(rootDir, 'static');
+const staticDir = path.join(rootDir, 'site', 'app');
 if (!fs.existsSync(staticDir)) fs.mkdirSync(staticDir, { recursive: true });
 
 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');
+} catch (e) { console.error('[ccsniff] mount failed:', e.message); }
 
 let discoveredAgents = [];
 initializeDescriptors(discoveredAgents);

package/site/app/index.html

@@ -5,9 +5,9 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>agentgui</title>
   <meta name="description" content="agentgui — live client for any acptoapi backend.">
-  <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">
+  <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@0.0.127/dist/247420.css">
   <script type="importmap">
-    { "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design@latest/dist/247420.js" } }
+    { "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design@0.0.127/dist/247420.js" } }
   </script>
   <style>
     html, body { margin: 0; height: 100%; }

package/site/app/js/app.js

@@ -3,7 +3,7 @@ import * as B from './backend.js';
 
 installStyles().catch(() => {});
 
-const { AppShell, Topbar, Crumb, Side, Status, Chat, ChatComposer, Row, Panel } = C;
+const { AppShell, Topbar, Crumb, Side, Status, Chat, ChatComposer, Row, Panel, PageHeader, SearchInput, TextField, Select, Btn, EventList } = C;
 
 const state = {
   backend: B.getBackend(),
@@ -114,18 +114,16 @@ function view() {
 
   const crumbRight = state.tab === 'chat'
     ? [
-        h('select', {
-            key: 'modelsel',
-            onchange: (e) => { state.selectedModel = e.target.value; render(); },
-          },
-          h('option', { key: '__', value: '' }, '— model —'),
-          ...state.models.map(m =>
-            h('option', { key: m.id, value: m.id, selected: m.id === state.selectedModel }, m.id)
-          ),
-        ),
+        Select({
+          key: 'modelsel',
+          value: state.selectedModel,
+          placeholder: '— model —',
+          options: state.models.map(m => ({ value: m.id, label: m.id })),
+          onChange: (v) => { state.selectedModel = v; render(); },
+        }),
         state.chat.busy
-          ? h('a', { key: 'stop', onclick: cancelChat, style: 'cursor:pointer' }, '◼ stop')
-          : h('a', { key: 'new',  onclick: newChat,    style: 'cursor:pointer' }, '+ new'),
+          ? Btn({ key: 'stop', onClick: cancelChat, children: '◼ stop' })
+          : Btn({ key: 'new',  onClick: newChat,    children: '+ new' }),
         dot,
       ]
     : [dot];
@@ -169,13 +167,22 @@ function mainContent() {
 
 // ── chat ───────────────────────────────────────────────────────────────────
 function chatMain() {
-  const msgs = state.chat.messages.map((m, i) => ({
-    key: String(i),
-    who: m.role === 'user' ? 'you' : 'them',
-    name: m.role === 'assistant' ? (state.selectedModel || 'agent') : 'you',
-    time: m.time || '',
-    parts: [{ kind: 'text', text: m.content || '' }],
-  }));
+  const lastIdx = state.chat.messages.length - 1;
+  const msgs = state.chat.messages.map((m, i) => {
+    const isAssistant = m.role === 'assistant';
+    const isStreaming = state.chat.busy && i === lastIdx && isAssistant;
+    const isEmptyStreaming = isStreaming && !m.content;
+    return {
+      key: String(i),
+      who: isAssistant ? 'them' : 'you',
+      name: isAssistant ? (state.selectedModel || 'agent') : 'you',
+      time: m.time || '',
+      typing: isEmptyStreaming,
+      parts: isEmptyStreaming
+        ? undefined
+        : [{ kind: isAssistant ? 'md' : 'text', text: m.content || '' }],
+    };
+  });
 
   const composer = ChatComposer({
     value: state.chat.draft,
@@ -235,33 +242,28 @@ async function sendChat() {
 
 // ── history ────────────────────────────────────────────────────────────────
 function historyMain() {
-  const head = h('div', { class: 'ds-section' },
-    h('h1', {}, '§ history'),
-    h('p', { class: 'lede' },
-      state.selectedSid
-        ? 'session ' + state.selectedSid
-        : 'pick a session from the sidebar — events stream from acptoapi /v1/history.',
-    ),
-  );
+  const head = PageHeader({
+    title: '§ history',
+    lede: state.selectedSid
+      ? 'session ' + state.selectedSid
+      : 'pick a session from the sidebar — events stream from ccsniff /v1/history.',
+  });
 
   if (!state.selectedSid)            return [head];
   if (state.events.length === 0)     return [head, Panel({ title: 'events', children: h('p', { class: 'lede' }, '◌ loading…') })];
 
-  const rows = state.events.map((e, i) =>
-    Row({
-      key: 'ev' + i,
-      rank: 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 : ''),
-      rail: e.role === 'error' ? 'flame' : (e.role === 'user' ? 'green' : 'purple'),
-    })
-  );
-
   return [
     head,
     Panel({
       title: state.events.length + ' events',
-      children: h('div', { class: 'ds-section' }, ...rows),
+      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 : ''),
+        })),
+      }),
     }),
   ];
 }
@@ -306,15 +308,15 @@ function historySide() {
     }),
     Panel({
       title: searching ? 'matches' : 'sessions',
-      children: h('div', { class: 'ds-section' },
-        h('input', {
-          type: 'search',
+      children: [
+        SearchInput({
+          key: 'searchInput',
           placeholder: 'search sessions…',
           value: state.searchQ,
-          oninput: (e) => { state.searchQ = e.target.value; runSearch(); },
+          onInput: (v) => { state.searchQ = v; runSearch(); },
         }),
-        rows.length ? h('div', {}, ...rows) : h('p', { class: 'lede' }, 'no sessions yet'),
-      ),
+        rows.length ? h('div', { key: 'rows' }, ...rows) : h('p', { key: 'empty', class: 'lede' }, 'no sessions yet'),
+      ],
     }),
   ];
 }
@@ -323,48 +325,51 @@ function historySide() {
 function settingsMain() {
   const ok = state.health.status === 'ok';
   return [
-    h('div', { class: 'ds-section' },
-      h('h1', {}, '⌘ settings'),
-      h('p', { class: 'lede' }, 'point agentgui at any acptoapi backend. ?backend=… in the URL or the field below — both persist via localStorage.'),
-      Panel({
-        title: 'backend',
-        children: h('div', { class: 'ds-section' },
-          h('p', { class: 'lede' }, 'backend url'),
-          h('input', {
-            type: 'text',
-            value: state.backendDraft,
-            oninput: (e) => { state.backendDraft = e.target.value; render(); },
-          }),
-          h('p', { class: 'lede' }, (ok ? '● ' : '○ ') + JSON.stringify(state.health)),
-          h('button', {
-            onclick: () => {
-              B.setBackend(state.backendDraft);
-              state.backend = state.backendDraft;
-              state.health = { status: 'unknown' };
-              render();
-              init();
-            },
-          }, 'save + reconnect'),
-        ),
-      }),
-      Panel({
-        title: 'models',
-        children: h('div', { class: 'ds-section' },
-          state.models.length
-            ? h('div', {}, ...state.models.slice(0, 40).map((m, i) =>
-                Row({
-                  key: 'm' + i,
-                  rank: String(i + 1).padStart(3, '0'),
-                  title: m.id,
-                  sub: m.owned_by || m.object || 'model',
-                  rail: m.id === state.selectedModel ? 'green' : 'purple',
-                  onClick: () => { state.selectedModel = m.id; render(); },
-                })
-              ))
-            : h('p', { class: 'lede' }, 'no models loaded'),
-        ),
-      }),
-    ),
+    PageHeader({
+      title: '⌘ settings',
+      lede: 'point agentgui at any backend. blank = same-origin (ccsniff in-process). ?backend=… or the field below persists via localStorage.',
+    }),
+    Panel({
+      title: 'backend',
+      children: [
+        TextField({
+          key: 'backendField',
+          label: 'backend url',
+          value: state.backendDraft,
+          placeholder: '(blank = same origin)',
+          onInput: (v) => { state.backendDraft = v; render(); },
+        }),
+        h('p', { key: 'hp', class: 'lede' }, (ok ? '● ' : '○ ') + JSON.stringify(state.health)),
+        Btn({
+          key: 'savebtn',
+          primary: true,
+          onClick: (e) => {
+            e.preventDefault();
+            B.setBackend(state.backendDraft);
+            state.backend = state.backendDraft;
+            state.health = { status: 'unknown' };
+            render();
+            init();
+          },
+          children: 'save + reconnect',
+        }),
+      ],
+    }),
+    Panel({
+      title: 'models',
+      children: state.models.length
+        ? state.models.slice(0, 40).map((m, i) =>
+            Row({
+              key: 'm' + i,
+              rank: String(i + 1).padStart(3, '0'),
+              title: m.id,
+              sub: m.owned_by || m.object || 'model',
+              rail: m.id === state.selectedModel ? 'green' : 'purple',
+              onClick: () => { state.selectedModel = m.id; render(); },
+            })
+          )
+        : h('p', { key: 'none', class: 'lede' }, 'no models loaded'),
+    }),
   ];
 }
 

package/site/app/js/backend.js

@@ -1,6 +1,6 @@
 // acptoapi backend client. Resolves base URL from ?backend= or localStorage or default.
 const KEY = 'agentgui.backend';
-const DEFAULT_BACKEND = 'http://localhost:4800';
+const DEFAULT_BACKEND = '';
 
 export function getBackend() {
   const u = new URL(location.href);