agentgui 1.0.929 → 1.0.931

package/AGENTS.md

@@ -114,3 +114,21 @@ bun start was already working (bun has native sqlite support via `bun:sqlite`).
 Fix: wrap any bare strings as keyed VElements: `h('span', { key: 'dot' }, '● connected')`. Rule: if ANY sibling in an array has a key, ALL siblings must be VElements (no raw strings or numbers).
 
 Surfaced 2026-05-04 while validating the chat surface in `site/app/`. Fix applied to crumbRight construction in `site/app/js/app.js` view().
+
+## Live History Stream Wiring (2026-05-05)
+
+**`site/app/js/app.js` opens SSE EventSource on navTo('history'); first /v1/history/* request triggers 30-90s loadOnce() synchronous walk.**
+
+The live history feature wires acptoapi's /v1/history/stream (SSE endpoint) via `B.streamHistory(base, onEvent)` on tab entry and closes the EventSource on tab exit. State shape: `state.live = { es, connected, lastEventTs, error, eventCount }`.
+
+Event dispatch loop:
+- `hello` event: set `connected=true`
+- `event` event: if `data.sid === selectedSid` push into `state.events`, increment matching session counter
+- `conversation` event: call `refreshHistory()` to reload session list
+- `error` event: set `live.error`
+
+Throttle renders via `requestAnimationFrame` to avoid event storm during burst loads from acptoapi.
+
+**First request to acptoapi /v1/history/* triggers loadOnce() that walks all JSONL files under ~/.claude/projects** (env default; override with `CLAUDE_PROJECTS_DIR`). In our test env: 299 files, 80MB, 69k events → 30-90s startup latency. Health check timeouts during this window are normal and expected. Subsequent requests are fast (cached index).
+
+acptoapi binary: `c:/dev/acptoapi/bin/agentapi.js`, default port 4800, no args; CORS `Access-Control-Allow-Origin: *` is enabled.

package/package.json

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

package/site/app/js/app.js

@@ -18,9 +18,16 @@ const state = {
   events: [],
   searchQ: '',
   searchHits: null,
+  live: { es: null, connected: false, lastEventTs: 0, error: null, eventCount: 0 },
 };
 
 let render;
+let renderScheduled = false;
+function scheduleRender() {
+  if (renderScheduled) return;
+  renderScheduled = true;
+  requestAnimationFrame(() => { renderScheduled = false; render(); });
+}
 
 function timeNow() {
   const d = new Date();
@@ -28,14 +35,74 @@ function timeNow() {
 }
 
 function navTo(tab) {
+  const prev = state.tab;
   state.tab = tab;
-  if (tab === 'history') refreshHistory();
+  if (tab === 'history') {
+    refreshHistory();
+    openLiveStream();
+  } else if (prev === 'history') {
+    closeLiveStream();
+  }
   render();
 }
 
+function openLiveStream() {
+  if (state.live.es) return;
+  state.live.error = null;
+  state.live.connected = false;
+  try {
+    state.live.es = B.streamHistory(state.backend, (kind, data) => {
+      state.live.lastEventTs = Date.now();
+      state.live.eventCount++;
+      if (kind === 'hello') {
+        state.live.connected = true;
+      } else if (kind === 'event' && data) {
+        if (state.selectedSid && data.sid === state.selectedSid) {
+          state.events.push(data);
+        }
+        const sess = state.sessions.find(s => s.sid === data.sid);
+        if (sess) {
+          sess.events = (sess.events || 0) + 1;
+          sess.last = data.ts || Date.now();
+          if (data.type === 'tool_use') sess.tools = (sess.tools || 0) + 1;
+          if (data.isError) sess.errors = (sess.errors || 0) + 1;
+        } else {
+          refreshHistory();
+          return;
+        }
+      } else if (kind === 'conversation') {
+        refreshHistory();
+        return;
+      } else if (kind === 'error' && data) {
+        state.live.error = data.error || 'stream error';
+      }
+      scheduleRender();
+    });
+    state.live.es.addEventListener('error', () => {
+      state.live.connected = false;
+      state.live.error = 'connection lost';
+      scheduleRender();
+    });
+  } catch (e) {
+    state.live.error = e.message;
+    state.live.es = null;
+  }
+}
+
+function closeLiveStream() {
+  if (!state.live.es) return;
+  try { state.live.es.close(); } catch {}
+  state.live.es = null;
+  state.live.connected = false;
+}
+
 function view() {
   const ok = state.health.status === 'ok';
-  const dot = h('span', { key: 'dot' }, ok ? '● connected' : '○ offline');
+  const liveActive = state.tab === 'history' && state.live.connected && (Date.now() - state.live.lastEventTs < 30000);
+  const dotText = state.tab === 'history'
+    ? (state.live.error ? '○ stream offline' : (liveActive ? '● live · ' + state.live.eventCount : (state.live.connected ? '● live' : '◌ connecting…')))
+    : (ok ? '● connected' : '○ offline');
+  const dot = h('span', { key: 'dot' }, dotText);
 
   const topbar = Topbar({
     brand: 'agentgui',