agentgui 1.0.928 → 1.0.930

package/AGENTS.md

@@ -104,3 +104,13 @@ Paired changes:
 - better-sqlite3 bumped ^12.6.2 → ^12.9.0
 
 bun start was already working (bun has native sqlite support via `bun:sqlite`). The node path was broken due to the missing native binding. Only compile from source fixes the node path.
+
+## webjsx applyDiff Array Keying (2026-05-04)
+
+**Children arrays that mix keyed VElements with raw text/numbers crash in `vendor/webjsx/applyDiff.js`.**
+
+`webjsx` requires all siblings in an array prop (children, right, left, breadcrumbs, etc.) to either ALL be VElements with keys or ALL be non-keyed. Passing `Crumb({ right: [h('span', { key: 'a' }, 'A'), h('span', { key: 'b' }, 'B'), '● connected'] })` crashes on render with `TypeError: Cannot read properties of undefined (reading 'key')` at line 247420.js when the render loop tries to read `.key` on the bare string.
+
+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().

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.928",
+  "version": "1.0.930",
   "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',