agentgui 1.0.949 → 1.0.951

package/AGENTS.md

@@ -1,5 +1,13 @@
 # AgentGUI — Agent Notes
 
+## GUI-audit closure (2026-06-04 fan-out) — second maximum-effort sweep
+
+The reusable `.claude/workflows/gui-audit.js` ran a 64-agent fan-out (9 per-surface reviewers -> adversarial verify -> synthesize) producing 44 adversarially-confirmed findings; the deduped 38-item punch-list is in `AUDIT-PUNCHLIST.md`. All were fixed across three surfaces and pushed (agentgui `eb1eab3`, kit `anentrypoint-design` `bb776aa` -> CI publishes to npm/unpkg).
+
+- **Server `lib/http-handler.js`:** `/api/image` allowlist no longer includes `os.homedir()` (was a broad image-shaped read of all of `$HOME`); unknown extensions 403 instead of an `application/octet-stream` fallback. Always emits `Referrer-Policy: no-referrer` (so a `?token=` credential can't leak via `Referer`) and a **CSP** (`default-src 'self'`; script/style self+unsafe-inline+unpkg+jsdelivr; `style-src` also `fonts.googleapis.com`, `font-src` also `fonts.gstatic.com` — the kit's Google Fonts, a regression caught live; `connect-src` self+cdns+ws/wss; `object-src 'none'`). `lib/ws-handlers-util.js` validates a client-supplied chat `cwd` is an existing directory (`fs.statSync`) before spawn.
+- **App `site/app/js/app.js`:** live SSE events are `{sid, payload:fl}` (ccsniff `store.js`) — unwrap `data.payload` (counters were reading `undefined`); dedupe by `.i`; `state.sessionsBySid` Map for O(1) per-event lookup; `scrollChatToBottom` targets `.agentchat-thread` (cached) not the dead `.chat-thread`; resume state cleared on switch off claude-code and banner/status/forwarded-arg all gated on claude-code; backend URL normalized to its origin on save; clear-local-data `location.reload()`s; status vocab unified (`connected`/`offline`, `db online/offline/unknown`, `running healthy`); agentsPanel rail `green`/`flame` (purple reserved for subagents); a non-resume warning banner for non-claude-code multi-turn chats.
+- **Kit `c:\dev\anentrypoint-design`:** `AgentChat` renders the live-streaming turn's prose as cheap inline text and promotes to full markdown only once settled (MdNode was re-parsing the whole growing answer every frame, O(n²)); head sub-line derives its busy label from the `status` prop; `Row`/`EventList` gained an `expanded` prop driving `aria-expanded`; `CodeNode` highlight cache keys on the full code not its length; `chat.css` responsive `@media` for the control cluster + `min(60ch,60vw)` cwd clamp + `.agentchat-cwd-btn:focus-visible`; `app-shell.css` 44×44 min tap targets (side-toggle + landscape composer send); box-drawing comment glyphs -> ASCII.
+
 ## Architecture (2026-05-19 pivot — single surface)
 
 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.

package/AUDIT-PUNCHLIST.md

@@ -0,0 +1,62 @@
+All findings are pre-confirmed (isReal: true). Here is the deduped, prioritized punch-list grouped by fixLocation, ordered by severity then user impact.
+
+## SERVER (lib/) — highest impact: security correctness
+
+1. **[HIGH · security] /api/image broad arbitrary-file-read** — `lib/http-handler.js:144-162`: drop `os.homedir()` from `allowRoots` (restrict to `CLAUDE_PROJECTS_DIR` + `IMAGE_ROOTS`) and 403 any path whose extension isn't in the image `mimeTypes` map instead of falling back to `application/octet-stream`.
+2. **[HIGH · security] ?token= credential leak, no Referrer-Policy/CSP** — `lib/http-handler.js:56-61`: always `res.setHeader('Referrer-Policy','no-referrer')`, add a CSP restricting img/connect/script-src to self + unpkg/jsdelivr, and migrate token→httpOnly SameSite=Strict cookie so the password leaves the URL/history/logs.
+3. **[MEDIUM · robustness] cwd unvalidated before spawn** — `lib/ws-handlers-util.js:70`: when `p?.cwd` is set, `fs.statSync(cwd).isDirectory()` check and `err(400,'no such directory')` before `runClaudeWithStreaming`; optionally confine to an allowlist root.
+
+## APP (site/app/) — chat correctness, then history, then settings
+
+4. **[HIGH · chat] Live SSE event read flat but arrives nested** — `app.js:281-293`: unwrap `const ev = data.payload || data;` and use `ev` for `state.events.push` and the tool_use/isError counters (keep `data.sid` for routing). Core live-history regression.
+5. **[MEDIUM · chat] resumeSid persists across agent switch** — `app.js:149-168`: clear `resumeSid`/`resumeNote` in `selectAgent` when `id !== 'claude-code'`, and gate the banner (474), status sub (527), and forwarded arg (662) on `selectedAgent === 'claude-code'` (stale sid wrongly triggers agy `--continue`).
+6. **[MEDIUM · chat] scrollChatToBottom queries dead `.chat-thread`** — `app.js:133-142`: prefer `.agentchat-thread` (the kit's real scroller), keep `.chat-thread`/`#agentgui-main` as fallbacks.
+7. **[MEDIUM · history] Live events not deduped vs snapshot** — `app.js:282-285`: after the unwrap (#4), guard `state.events.push` with `ev.i != null && state.events.some(e => e.i === ev.i)` and count each `ev.i` once via a per-session Set.
+8. **[MEDIUM · settings] Schemeless backend URL validated-but-stored-raw** — `app.js:998-1013`: normalize on save (`new URL(...).origin`), validate/store/use the same canonical string so `localhost:3000` can't resolve against the page origin.
+9. **[MEDIUM · settings] clear-local-data leaves in-memory state that re-persists** — `app.js:1090-1098`: zero `selectedAgent`/`selectedModel`/`chatCwd`/`backend`/`backendDraft`/`agentModels` (don't re-call `B.setBackend('')` which rewrites the key), or `location.reload()` after clearing.
+10. **[LOW · chat] Aborted-empty turn not pruned from in-memory array** — `app.js:599-604`: in `cancelChat`, `state.chat.messages = state.chat.messages.filter(m => !isEmptyTurn(m))` so `messages.length`-derived UI isn't off-by-one (persist only filters its snapshot, never the live array).
+11. **[LOW · history] Search-hit focus scroll races live append** — `app.js:1228-1234`: snapshot the target event's `.i`/`.ts`, re-derive `rowPos` inside the rAF from current `state.events`, bail if it moved.
+12. **[LOW · history] Search results ignore subagent/project filters** — `app.js:904-921`: apply the same `showSubagents`/`projectFilter` gating as `visibleSessions` before slicing (or label the header "incl. hidden").
+13. **[LOW · settings] preferencesPanel cwd "(current: X)" can misrepresent running chats** — `app.js:1108-1109`: relabel as "default for new chats" or derive the displayed cwd from in-flight `chat.active` ctrl.cwd.
+
+## APP — consistency / vocabulary (low, batch together)
+
+14. **[MEDIUM · consistency] Status bar says 'live' where crumb/health say 'connected'** — `app.js:387`: use `ok ? 'connected' : 'offline'`; reserve 'live' for the history SSE label (335).
+15. **[MEDIUM · consistency] agentsPanel rail inverts purple=subagent contract** — `app.js:1152`: `rail: avail ? 'green' : 'flame'` (selection already shown via `active`); purple must stay subagent-only.
+16. **[LOW · settings] db chip absent on partial /health + 'N active' is dead text** — `app.js:1022-1040`: always render `db unknown` when `hh.db` absent; make the active-executions chip a button routing to history's running panel.
+17. **[LOW · consistency] Resume label noun vs gerund** — `app.js:527`: `'resuming…'` to match banner + sibling gerund statuses.
+18. **[LOW · consistency] Literal '...' in resume banner** — `app.js:479`: drop the trailing `...` (it's a fixed 8-char slice, not a truncation) or use `…`.
+19. **[LOW · consistency] ACP 'running·healthy' tight middot vs spaced separator** — `app.js:1144`: `'running healthy'` so `·` keeps one meaning.
+20. **[LOW · consistency] db 'ok/down' reuses vocabulary the connection chip translated away** — `app.js:1037`: `db online/offline` to match the connection register.
+
+## KIT (c:\dev\anentrypoint-design) — requires build + publish to unpkg
+
+21. **[HIGH · perf] Streaming re-parses full growing markdown every rAF (O(n²))** — `chat.js:82-90` MdNode: parse markdown once on turn-complete; render the live turn as cheap inline/plain text while streaming (gate on `isStreaming`), promote to `{kind:'md'}` only when settled.
+22. **[HIGH · responsive] Chat control cluster + cwd bar have no media queries** — `chat.css`: add `@media` breakpoints for `.agentchat-controls`/`.agentchat-cwd-text` (the 360/640/900 rules in index.html target dead `.chat-controls`/`.cwd-bar`; also delete that dead CSS in `index.html`).
+23. **[MEDIUM · a11y] EventList Row toggle never emits aria-expanded** — `content.js:23,39-50`: add an `expanded` prop → `aria-expanded` on the button branch; app passes the boolean at `app.js:796-806`.
+24. **[MEDIUM · responsive] cwd `max-width:60ch` overflows phones** — `chat.css:59-64`: `max-width: min(60ch, 60vw)` (+ optional 640px 42vw clamp).
+25. **[MEDIUM · responsive] Hamburger 36px + drawer rows ~40px + send button under 44px** — `247420.css` source: raise `.app-side-toggle` and `.app-side a` and the small/landscape composer `send` to min 44×44 (WCAG 2.5.5).
+26. **[MEDIUM · security] marked/dompurify imported from unpinned CDN** — `markdown.js:9-26`: vendor marked+dompurify locally (dynamic import can't carry SRI) and ship a `script-src 'self'` CSP; success/fallback sanitization paths are already safe.
+27. **[LOW · perf] CodeNode highlight cache key uses code LENGTH not content** — `chat.js:95-97`: key on full `p.code` (or export+use `simpleHash`) so same-length blocks re-highlight.
+28. **[LOW · a11y] `.agentchat-cwd-btn` has no :focus-visible** — `chat.css`: add `:focus-visible` ring mirroring `.agentchat-empty-suggestion`.
+29. **[LOW · a11y] Native select pickers have title-only accessible name** — `agent-chat.js:36-48`: pass `label:` (visible or sr-only) to the agent/model `Select`.
+30. **[LOW · consistency] Head sub-line re-derives 'streaming…' ignoring status prop** — `agent-chat.js:175`: derive from the same `status` prop (`busy ? (status||'streaming…') : …`) so reconnecting-while-streaming reads one word.
+31. **[LOW · glyph] Box-drawing dividers in OS-kit comments** — `src/kits/os/app-panes.css:4,51,114`: replace `──` with `---` (comment-only; not the shipped AgentChat surface).
+
+## BOTH (coordinated app + kit + publish)
+
+32. **[HIGH · chat] Text and tool parts don't interleave — all prose renders before every tool card** — `app.js:673-675` + `agent-chat.js:114-124`: model the assistant turn as one ordered `parts[]` (append/extend `{kind:'md'}` segments and tool parts in arrival order; tool boundary closes the md segment); drop the forced `m.content` prepend in the kit and render `parts` strictly in order. This is the core chat-jank fix and supersedes the standalone perf concern in #21 about ordering.
+33. **[MEDIUM · chat] Orphan tool_result renders as detached bottom card** — `app.js:446-457`: ids already match on both runner paths, so harden the client fallback — attach an unmatched result to the most recent running tool part (or insert after the last tool part) rather than pushing to array end. Compounds #32.
+34. **[MEDIUM · history] Same event kinds render differently in chat vs history** — `app.js:773-808` + kit ToolCallNode: generalize the kit's ToolCallNode so EventList rows accept structured `{kind:'tool',...}` parts, then route history tool_use/tool_result through the same `toolPart`/`applyToolResult` pairing chat uses (preserve green/purple/flame rails).
+
+## PERF — confirmed no-fix (mitigating context)
+
+- `app.js:264,1306` relTime/resize full re-render: acceptable (rAF-coalesced); resolves once #36 row-build is lazy.
+- `app.js` webjsx keying: stable, no collision — this is why the perf findings stay at vnode-build cost, not DOM teardown.
+
+## APP — remaining perf (high/medium)
+
+35. **[HIGH · perf] Full app tree re-renders per rAF during stream** — `app.js:78-86`: scope the streaming re-render to the active transcript/bubble rather than rebuilding Topbar/Crumb/Status/panels every token (pairs with kit #21).
+36. **[HIGH · perf] EventList computes `full`+JSON.stringify for all ~300 rows every frame** — `app.js:790`: build `full` (and `JSON.stringify(e.toolInput,...)`) only when the row is `expanded`.
+37. **[MEDIUM · perf] O(sessions) linear scan per live event** — `app.js:287-299`: build `state.sessionsBySid = new Map(...)` on each refresh, `.get(data.sid)` instead of `arr.find`.
+38. **[MEDIUM · perf] scrollChatToBottom nests a 2nd rAF + re-querySelector per frame** — `app.js:133-142`: cache the scroller (re-query only if detached), drop the inner rAF (caller already in a frame). Folds into #6.

package/lib/http-handler.js

@@ -21,6 +21,26 @@ export function createHttpHandler({ BASE_URL, expressApp, queries, sendJSON, ser
     } // else: no ACAO header -> browsers block cross-origin reads (same-origin still works)
     res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
     res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+    // The password can ride in a ?token= query param (EventSource/deep-links
+    // can't set headers), so a navigation away from the app would leak it in
+    // the Referer header to the destination. Strip the referrer on every
+    // response so the credential never crosses an origin boundary that way.
+    res.setHeader('Referrer-Policy', 'no-referrer');
+    // CSP: the markdown stack (marked/dompurify/prismjs) and the DS kit load
+    // from unpkg/jsdelivr; everything else is self. connect-src also allows
+    // self for the same-origin WS/SSE. 'unsafe-inline' on style/script is
+    // required by the inlined head bootstrap + DS runtime <style> injection.
+    res.setHeader('Content-Security-Policy', [
+      "default-src 'self'",
+      "script-src 'self' 'unsafe-inline' https://unpkg.com https://cdn.jsdelivr.net",
+      "style-src 'self' 'unsafe-inline' https://unpkg.com https://cdn.jsdelivr.net https://fonts.googleapis.com",
+      "img-src 'self' data: blob:",
+      "font-src 'self' data: https://unpkg.com https://cdn.jsdelivr.net https://fonts.gstatic.com",
+      "connect-src 'self' https://unpkg.com https://cdn.jsdelivr.net ws: wss:",
+      "object-src 'none'",
+      "base-uri 'self'",
+      "frame-ancestors 'self'",
+    ].join('; '));
     if (req.method === 'OPTIONS') { res.writeHead(200); res.end(); return; }
     if (req.headers.upgrade && req.headers.upgrade.toLowerCase() === 'websocket') return;
 
@@ -140,10 +160,11 @@ export function createHttpHandler({ BASE_URL, expressApp, queries, sendJSON, ser
         // arbitrary-file-read of any image-extensioned path on the host (the
         // prior `includes('..')` guard is a no-op after path.normalize resolves
         // the segments). Allowed roots: the Claude projects dir (history images)
-        // and the user home; override/add via IMAGE_ROOTS (path-separated).
+        // only; add more via IMAGE_ROOTS (path-separated). The user home is NOT
+        // a default root - it covers ~/.ssh, ~/.aws, dotfiles etc., so an image
+        // route reaching all of home is a broad read of anything image-shaped.
         const allowRoots = [
           process.env.CLAUDE_PROJECTS_DIR || path.join(os.homedir(), '.claude', 'projects'),
-          os.homedir(),
           ...(process.env.IMAGE_ROOTS ? process.env.IMAGE_ROOTS.split(path.delimiter) : []),
         ].map(r => path.normalize(r));
         const norm = isWindows ? normalizedPath.toLowerCase() : normalizedPath;
@@ -156,7 +177,10 @@ export function createHttpHandler({ BASE_URL, expressApp, queries, sendJSON, ser
           if (!fs.existsSync(normalizedPath)) { res.writeHead(404); res.end('Not found'); return; }
           const ext = path.extname(normalizedPath).toLowerCase();
           const mimeTypes = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif', '.webp': 'image/webp', '.svg': 'image/svg+xml' };
-          const contentType = mimeTypes[ext] || 'application/octet-stream';
+          // Only serve known image types - never an octet-stream fallback, which
+          // would turn this into a generic file reader for any extension.
+          const contentType = mimeTypes[ext];
+          if (!contentType) { res.writeHead(403); res.end('Forbidden'); return; }
           res.writeHead(200, { 'Content-Type': contentType, 'Cache-Control': 'no-cache' });
           res.end(fs.readFileSync(normalizedPath));
         } catch (err) { sendJSON(req, res, 400, { error: err.message }); }

package/lib/ws-handlers-util.js

@@ -70,6 +70,14 @@ export function register(router, deps) {
     const cwd = p?.cwd || STARTUP_CWD;
     const resumeSessionId = p?.resumeSid || p?.resumeSessionId || undefined;
     if (!registry.has(agentId)) err(404, `Unknown agentId: ${agentId}`);
+    // A client-supplied cwd that doesn't exist would have the agent CLI spawn
+    // fail opaquely (or inherit STARTUP_CWD on some runners). Validate up front
+    // so the caller gets a clear 400 instead of a confusing mid-stream error.
+    if (p?.cwd) {
+      let st = null;
+      try { st = fs.statSync(cwd); } catch (_) {}
+      if (!st || !st.isDirectory()) err(400, `cwd is not an existing directory: ${cwd}`);
+    }
 
     const sessionId = 'chat-' + crypto.randomBytes(8).toString('hex');
     // Auto-subscribe the originating ws so it receives its own broadcasts.

package/package.json

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

package/site/app/js/app.js

@@ -130,15 +130,19 @@ function pillButton(key, label, active, title, onClick) {
   }, label);
 }
 
+let _chatScroller = null;
 function scrollChatToBottom() {
-  requestAnimationFrame(() => {
-    // The design system's chat scroll container is .chat-thread; fall back to
-    // the main region only if it's not mounted yet.
-    const scroller = document.querySelector('.chat-thread')
+  // The kit's real scroll container is .agentchat-thread; the old .chat-thread
+  // selector matched nothing, so auto-scroll silently never fired. Cache the
+  // node and re-query only if it detached. Callers already run inside a frame
+  // (or right after render), so no nested rAF here.
+  if (!_chatScroller || !_chatScroller.isConnected) {
+    _chatScroller = document.querySelector('.agentchat-thread')
+      || document.querySelector('.chat-thread')
       || document.querySelector('#agentgui-main')
       || document.getElementById('app');
-    if (scroller) scroller.scrollTop = scroller.scrollHeight;
-  });
+  }
+  if (_chatScroller) _chatScroller.scrollTop = _chatScroller.scrollHeight;
 }
 
 function timeNow() {
@@ -152,6 +156,10 @@ async function selectAgent(id) {
   if (id === state.selectedAgent && state.agentModels.length) return;
   state.selectedAgent = id;
   lsSet('agentgui.agent', id);
+  // Resume state is claude-code-only (it threads claude's --resume sid). Switching
+  // to any other agent must clear it, or the resume banner keeps showing and a
+  // stale sid gets forwarded - which makes agy wrongly run --continue.
+  if (id !== 'claude-code') { state.chat.resumeSid = null; state.chat.resumeNote = null; }
   state.agentModels = [];
   state.selectedModel = '';
   state.modelsLoading = true;
@@ -261,7 +269,7 @@ function stopActivePolling() {
 // Re-render once a minute so relative timestamps ("5s ago") don't sit frozen
 // between events. Cheap: scheduleRender coalesces via rAF.
 let _relTick = null;
-function startRelTimeTick() { if (!_relTick) _relTick = setInterval(() => scheduleRender(), 30000); }
+function startRelTimeTick() { if (!_relTick) _relTick = setInterval(() => { if (state.tab === 'history' || (Array.isArray(state.active) && state.active.length)) scheduleRender(); }, 30000); }
 async function stopActiveChat(sid) {
   try { await B.cancelChat(state.backend, sid); } catch {}
   refreshActive();
@@ -279,18 +287,26 @@ function openLiveStream() {
         if (!state.live.connected) state.live.connected = true;
         if (state.live.error) { state.live.error = null; state.live.reconnects++; }
       } else if (kind === 'event' && data) {
+        // ccsniff's stream frame is { sid, payload: <flattened event> } - the
+        // real event (type/isError/i/ts) lives under .payload, not on the
+        // wrapper. Reading the wrapper gave every counter `undefined`, so live
+        // tool/error tallies never moved. Route by data.sid, read ev for the rest.
+        const ev = data.payload || data;
         if (state.selectedSid && data.sid === state.selectedSid) {
-          state.events.push(data);
-          // Cap retained events so a long live session can't grow unbounded.
-          if (state.events.length > 2000) state.events.splice(0, state.events.length - 2000);
+          // Dedupe against the snapshot/prior pushes by event index - a
+          // reconnect or overlap would otherwise double-append the same event.
+          if (ev.i == null || !state.events.some(e => e.i === ev.i)) {
+            state.events.push(ev);
+            // Cap retained events so a long live session can't grow unbounded.
+            if (state.events.length > 2000) state.events.splice(0, state.events.length - 2000);
+          }
         }
-        const arr = Array.isArray(state.sessions) ? state.sessions : [];
-        const sess = arr.find(s => s.sid === data.sid);
+        const sess = state.sessionsBySid ? state.sessionsBySid.get(data.sid) : null;
         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;
+          sess.last = ev.ts || Date.now();
+          if (ev.type === 'tool_use') sess.tools = (sess.tools || 0) + 1;
+          if (ev.isError) sess.errors = (sess.errors || 0) + 1;
         } else {
           // Unknown session: a burst of events for a new session would trigger
           // a full session-list refetch per event - debounce it into one.
@@ -384,7 +400,7 @@ function view() {
     ? 'agent: ' + (agentById(state.selectedAgent)?.name || state.selectedAgent) + (state.selectedModel ? ' · ' + state.selectedModel : '')
     : 'no agent';
   const status = Status({
-    left: [state.backend || 'same-origin', ok ? 'live' : 'offline'],
+    left: [state.backend || 'same-origin', ok ? 'connected' : 'offline'],
     right: [agentLabel, 'press ? for shortcuts'],
   });
 
@@ -397,7 +413,7 @@ function view() {
     ? Alert({ key: 'sc', kind: 'info', title: 'Keyboard shortcuts',
         children: 'g then c/h/s - chat/history/settings · n - new chat · / - focus search/composer · ? - toggle this · Esc - blur field' })
     : null;
-  const main = h('div', { id: 'agentgui-main', role: 'main', 'data-chat-scroll': '', class: 'agentgui-main agentgui-main-' + state.tab, style: mainStyle }, [shortcutsHint, ...mainContent()].filter(Boolean));
+  const main = h('div', { id: 'agentgui-main', role: 'region', 'aria-label': 'main content', 'data-chat-scroll': '', class: 'agentgui-main agentgui-main-' + state.tab, style: mainStyle }, [shortcutsHint, ...mainContent()].filter(Boolean));
   // narrow drives the DS main-column class; the history sidebar itself collapses
   // behind the DS .app-side-toggle hamburger (provided by AppShell when a side
   // exists), so mobile users get a togglable session list.
@@ -441,13 +457,23 @@ function toolPart(block) {
   };
 }
 
+// Append a streamed text delta as an interleaved markdown part, coalescing
+// consecutive text into the trailing md part so prose and tool cards keep their
+// arrival order within the turn (text -> tool -> text).
+function appendText(parts, text) {
+  const last = parts[parts.length - 1];
+  if (last && last.kind === "md") last.text += text;
+  else parts.push({ kind: "md", text });
+}
+
 // Apply a tool_result to its matching tool part (by id), else append a
 // standalone tool_result part. Sets the card's result + done/error status.
 function applyToolResult(parts, block) {
   const id = block.tool_use_id || block.id || null;
   const content = block?.content ?? block?.output ?? block;
   const isError = !!(block?.is_error);
-  const target = id ? [...parts].reverse().find(p => p && p.kind === 'tool' && p._id === id) : null;
+  const byId = id ? [...parts].reverse().find(p => p && p.kind === 'tool' && p._id === id) : null;
+  const target = byId || [...parts].reverse().find(p => p && p.kind === 'tool' && p.status === 'running');
   if (target) {
     target.result = content;
     target.status = isError ? 'error' : 'done';
@@ -471,12 +497,22 @@ function chatMain() {
   // stream error) are pre-built here and handed to the kit, which renders them
   // above the thread. The kit holds no agentgui-specific banner logic.
   const banners = [];
-  if (state.chat.resumeSid) {
+  // Non-claude-code agents cannot --resume by id, so a multi-turn chat with one
+  // silently loses prior context. Warn once the conversation is past its first
+  // turn so the user knows this agent is not carrying history forward.
+  {
+    const userTurns = state.chat.messages.filter(m => m.role === 'user').length;
+    if (state.selectedAgent && state.selectedAgent !== 'claude-code' && userTurns > 1 && !state.chat.resumeSid) {
+      banners.push(Alert({ key: 'nocontinuity', kind: 'info', title: (agentById(state.selectedAgent)?.name || state.selectedAgent) + ' does not resume across turns',
+        children: 'This agent starts fresh each message - it will not remember earlier turns in this chat. Use Claude Code for a continuous conversation.' }));
+    }
+  }
+  if (state.chat.resumeSid && state.selectedAgent === 'claude-code') {
     // The agent-switched note (if any) lives inside the resume banner rather
     // than as a separate stacked Alert, so resume context reads as one block.
     banners.push(h('div', { key: 'rb', class: 'resume-banner', role: 'status' },
       h('span', { key: 'rbtxt', class: 'lede' },
-        'resuming session ' + state.chat.resumeSid.slice(0, 8) + '... via --resume'
+        'resuming session ' + state.chat.resumeSid.slice(0, 8) + '… via --resume'
         + (state.chat.resumeNote ? ' - ' + state.chat.resumeNote : '')),
       Btn({ key: 'rclr', onClick: () => { state.chat.resumeSid = null; state.chat.resumeNote = null; render(); }, children: 'clear' })));
   }
@@ -524,7 +560,7 @@ function chatMain() {
       draft: state.chat.draft,
       status: state.chat.busy
         ? (state.health.ws === 'reconnecting' ? 'reconnecting…' : 'streaming…')
-        : (state.modelsLoading ? 'loading models…' : (state.chat.resumeSid ? 'resume' : 'ready')),
+        : (state.modelsLoading ? 'loading models…' : ((state.chat.resumeSid && state.selectedAgent === 'claude-code') ? 'resuming…' : 'ready')),
       agentName,
       placeholder,
       canSend: canSend(),
@@ -600,7 +636,13 @@ function cancelChat() {
   // Clear busy immediately so the composer re-enables and the "stop" button
   // flips back to "new" without waiting for the stream's finally block.
   state.chat.abort?.abort();
-  if (state.chat.busy) { state.chat.busy = false; render(); }
+  // Drop a trailing empty assistant shell (aborted before any content) from the
+  // live array so the message count + suggestions-empty check stay correct; the
+  // paired user message is intentionally kept.
+  const msgs = state.chat.messages;
+  if (msgs.length && isEmptyTurn(msgs[msgs.length - 1])) msgs.pop();
+  if (state.chat.busy) { state.chat.busy = false; }
+  render();
 }
 
 const CHAT_KEY = 'agentgui.chat';
@@ -659,7 +701,9 @@ async function sendChat() {
       cwd: state.chatCwd || undefined,
       messages: state.chat.messages.slice(0, -1).map(m => ({ role: m.role, content: m.content })),
       signal: ctrl.signal,
-      resumeSid: state.chat.resumeSid || undefined,
+      // Only claude-code consumes a resume sid; never forward a stale one to
+      // another agent (it makes agy spuriously run --continue).
+      resumeSid: (state.selectedAgent === 'claude-code' && state.chat.resumeSid) || undefined,
     })) {
       if (ev.type === 'session') {
         // Remember the server's session id so the NEXT turn resumes this
@@ -670,7 +714,7 @@ async function sendChat() {
           persistChat();
         }
       }
-      else if (ev.type === 'text')  { cur.content += ev.text; scheduleStreamRender(); }
+      else if (ev.type === 'text')  { appendText(cur.parts, ev.text); scheduleStreamRender(); }
       else if (ev.type === 'tool') { cur.parts.push(toolPart(ev.block)); scheduleStreamRender(); }
       else if (ev.type === 'tool_result') { applyToolResult(cur.parts, ev.block); scheduleStreamRender(); }
       else if (ev.type === 'result') { /* terminal usage/summary block - already reflected via text */ }
@@ -787,16 +831,18 @@ function historyMain() {
           const raw = e.text || '';
           const text = raw.replace(/\s+/g, ' ').trim();
           const expanded = state.expandedEvents.has(key);
-          const full = e.toolInput ? (text + '\n\n' + JSON.stringify(e.toolInput, null, 2)) : raw;
+          // Only build the expanded body (JSON.stringify tool input) when the row is
+          // expanded - doing it for all ~300 rows every frame wastes work mid-stream.
+          const full = expanded ? (e.toolInput ? (text + '\n\n' + JSON.stringify(e.toolInput, null, 2)) : raw) : '';
           // Rail tone matches the session/agents rail semantics so an event's
           // kind is visible at a glance, consistent across the GUI:
           // flame = error, purple = tool_use, green = normal turn.
-          const isTool = type === 'tool_use' || !!e.tool;
-          const rail = e.isError ? 'flame' : (isTool ? 'purple' : 'green');
+          const rail = e.isError ? 'flame' : 'green';
           return {
             key,
             code: String(absIdx + 1).padStart(4, '0'),
             rail,
+            expanded,  // disclosure state -> kit Row sets aria-expanded
             title: expanded ? (full || '(' + type + ')') : (text.slice(0, 220) || '(' + type + ')'),
             // Guard ts: a missing/zero timestamp renders "Invalid Date" otherwise.
             // Every row is click-to-expand, so always show the affordance word
@@ -997,8 +1043,19 @@ function historySide() {
 // --- settings ---
 function isValidUrl(s) {
   if (!s) return true; // blank = same-origin is valid
-  try { new URL(s.startsWith('http') ? s : 'http://' + s); return true; }
-  catch { return false; }
+  try {
+    const u = new URL(s.startsWith('http') ? s : 'http://' + s);
+    return u.protocol === 'http:' || u.protocol === 'https:'; // reject ftp:/ws:/etc
+  } catch { return false; }
+}
+
+// Canonicalize a backend URL to its origin so a schemeless 'localhost:3000'
+// (which would otherwise be stored raw and resolved against the page origin)
+// becomes the same string we validated. Blank stays blank (same-origin).
+function normalizeBackend(s) {
+  if (!s) return '';
+  try { return new URL(s.startsWith('http') ? s : 'http://' + s).origin; }
+  catch { return s; }
 }
 
 async function saveBackend() {
@@ -1009,8 +1066,10 @@ async function saveBackend() {
     state.confirmingBackend = true; render(); return;
   }
   state.confirmingBackend = false;
-  B.setBackend(state.backendDraft);
-  state.backend = state.backendDraft;
+  const canonical = normalizeBackend(state.backendDraft);
+  state.backendDraft = canonical;
+  B.setBackend(canonical);
+  state.backend = canonical;
   state.health = { status: 'unknown' };
   state.backendStatus = 'connecting';
   render();
@@ -1034,7 +1093,11 @@ function healthSummary() {
   if (hh.version) bits.push(['v' + hh.version, 'Server version']);
   if (typeof hh.agents === 'number') bits.push([hh.agents + ' agents', 'Agents registered on the server']);
   if (typeof hh.activeExecutions === 'number') bits.push([hh.activeExecutions + ' active', 'Chats currently executing']);
-  if (hh.db) bits.push(['db ' + (hh.db.ok ? 'ok' : 'down'), 'History database status']);
+  // db chip uses the same online/offline register as the connection chip
+  // (not ok/down, which the connection chip already translated away). Always
+  // render it: when /health is partial and hh.db is absent, show 'db unknown'
+  // rather than dropping the chip and leaving the db state ambiguous.
+  bits.push(['db ' + (hh.db ? (hh.db.ok ? 'online' : 'offline') : 'unknown'), 'History database status']);
   return h('div', { key: 'hp', class: 'health-summary' + (ok ? ' health-ok' : ''), role: 'group', 'aria-label': 'Backend health' },
     ...bits.map(([b, t], i) => h('span', { key: 'hb' + i, class: 'health-chip', title: t }, b)));
 }
@@ -1091,10 +1154,14 @@ function clearLocalData() {
   if (!state.confirmingClearData) { state.confirmingClearData = true; render(); return; }
   state.confirmingClearData = false;
   // Wipe agentgui's own localStorage keys (chat transcript, agent/model/cwd,
-  // backend). Leaves the page reload to re-init from defaults.
+  // backend). Then reload: clearing only the keys but leaving the in-memory
+  // selectedAgent/Model/chatCwd/backend would let the next interaction
+  // re-persist them, so the "clear" wouldn't survive. A reload re-inits from
+  // defaults with the keys gone.
+  state.chat.abort?.abort(); // stop any in-flight stream before we drop the page
   for (const k of ['agentgui.chat', 'agentgui.agent', 'agentgui.model', 'agentgui.cwd', 'agentgui.backend']) lsRemove(k);
   state.chat = { messages: [], busy: false, abort: null, draft: '', resumeSid: null };
-  render();
+  location.reload();
 }
 
 function preferencesPanel() {
@@ -1141,7 +1208,7 @@ function agentsPanel() {
           const usable = avail || a.npxInstallable;     // selectable from this row
           const bits = [a.protocol || 'agent'];
           if (!avail) bits.push(a.npxInstallable ? 'runs via npx' : 'not installed');
-          if (acp) bits.push(acp.healthy ? 'running·healthy' : (acp.running ? 'running' : 'stopped'));
+          if (acp) bits.push(acp.healthy ? 'running healthy' : (acp.running ? 'running' : 'stopped'));
           if (acp && acp.port) bits.push('port ' + acp.port);
           if (acp && acp.restartCount) bits.push(acp.restartCount + ' restarts');
           return Row({
@@ -1149,7 +1216,10 @@ function agentsPanel() {
             rank: String(i + 1).padStart(3, '0'),
             title: a.name,
             sub: bits.join(' · '),
-            rail: a.id === state.selectedAgent ? 'green' : (avail ? 'purple' : 'flame'),
+            // Rail tone keeps its GUI-wide meaning: green=ok/selected,
+            // flame=error/unavailable. Selection is shown via `active`, not by
+            // borrowing purple (purple is reserved for subagents).
+            rail: (a.id === state.selectedAgent || avail) ? 'green' : 'flame',
             active: a.id === state.selectedAgent,
             // Non-installable agents are genuinely inert: mark them disabled (no
             // click, no button role) instead of looking clickable but doing nothing.
@@ -1166,6 +1236,9 @@ function agentsPanel() {
 async function refreshHistory() {
   try {
     state.sessions = await B.listSessions(state.backend);
+    // Index by sid so each live SSE event is an O(1) lookup, not an O(sessions)
+    // linear scan per event during a burst load.
+    state.sessionsBySid = new Map((state.sessions || []).map(s => [s.sid, s]));
     state.historyError = null;
     render();
   } catch (e) {

package/site/app/vendor/anentrypoint-design/247420.css

@@ -2363,11 +2363,13 @@
     .ds-247420 .chat-composer textarea { padding: 10px 12px; }
 }
 
-/* ── landscape orientation: reduce vertical space for composer ──────────── */
+/* --- landscape orientation: reduce vertical space for composer --- */
 @media (max-height: 500px) and (orientation: landscape) {
     .ds-247420 .chat-composer { padding: 6px 0; }
-    .ds-247420 .chat-composer textarea { min-height: 36px; max-height: 120px; }
-    .ds-247420 .chat-composer .send, .ds-247420 .chat-composer button { width: 36px; height: 36px; font-size: 14px; }
+    .ds-247420 .chat-composer textarea { min-height: 44px; max-height: 120px; }
+    /* Keep the send button at the 44x44 minimum tap target even in the
+       space-constrained landscape layout. */
+    .ds-247420 .chat-composer .send, .ds-247420 .chat-composer button { width: 44px; height: 44px; font-size: 14px; }
 }
 
 /* ============================================================
@@ -3028,9 +3030,11 @@
 /* Mobile nav toggle (hamburger) — hidden on desktop, shown ≤900px */
 .ds-247420 .app-side-toggle {
   display: none;
-  position: fixed; top: calc((var(--app-topbar-h) - 32px) / 2); left: 10px;
+  position: fixed; top: calc((var(--app-topbar-h) - 44px) / 2); left: 10px;
   z-index: 51;
-  width: 36px; height: 36px;
+  /* 44x44 minimum hit area (WCAG 2.5.5 / Apple HIG) - 36px is below the
+     reliable-tap threshold on touch. */
+  width: 44px; height: 44px;
   align-items: center; justify-content: center;
   font-size: 18px; line-height: 1;
   background: var(--bg-2); color: var(--fg);
@@ -4631,6 +4635,22 @@
 }
 .ds-247420 .agentchat-controls .select,
 .ds-247420 .agentchat-controls [role="combobox"] { min-width: 130px; max-width: 240px; }
+.ds-247420 .agentchat-controls .ds-select { min-width: 130px; max-width: 240px; }
+
+/* Narrow viewports: let the agent/model selects share the row two-up, then
+   stack full-width on the smallest screens, and drop the status to its own
+   line so nothing is squeezed below a usable tap size. */
+@media (max-width: 640px) {
+  .ds-247420 .agentchat-controls .select,
+  .ds-247420 .agentchat-controls .ds-select,
+  .ds-247420 .agentchat-controls [role="combobox"] { flex: 1 1 45%; max-width: none; }
+  .ds-247420 .agentchat-status { margin-left: 0; flex-basis: 100%; }
+}
+@media (max-width: 360px) {
+  .ds-247420 .agentchat-controls .select,
+  .ds-247420 .agentchat-controls .ds-select,
+  .ds-247420 .agentchat-controls [role="combobox"] { flex-basis: 100%; }
+}
 
 .ds-247420 .agentchat-status {
   display: inline-flex;
@@ -4672,7 +4692,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 60ch;
+  /* 60ch overflows narrow phones; clamp to the viewport so the path ellipsizes
+     instead of pushing the row wider than the screen. */
+  max-width: min(60ch, 60vw);
 }
 .ds-247420 .agentchat-cwd-btn {
   background: none;
@@ -4684,6 +4706,7 @@
   font: inherit;
 }
 .ds-247420 .agentchat-cwd-btn:hover { border-color: var(--accent); }
+.ds-247420 .agentchat-cwd-btn:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 2px; }
 .ds-247420 .agentchat-cwd-input {
   flex: 1;
   min-width: 12ch;
@@ -4774,6 +4797,18 @@
   .ds-247420 .agentchat-working .chat-thinking-dots span { animation: none; opacity: .7; }
 }
 
+/* Responsive: the control cluster + cwd bar must stay usable on phones/tablets.
+   The cwd path can't eat the row beside its label + buttons on a narrow screen. */
+.ds-247420 .agentchat-controls { flex-wrap: wrap; }
+.ds-247420 .agentchat-cwd-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(60ch, 60vw); }
+@media (max-width: 900px) {
+  .ds-247420 .agentchat-controls .ds-select { min-width: 110px; max-width: 180px; }
+}
+@media (max-width: 640px) {
+  .ds-247420 .agentchat-cwd-text { max-width: 42vw; }
+  .ds-247420 .agentchat-controls { gap: .4em; }
+}
+
 /* editor-primitives.css */
 /* editor-primitives.css — chrome for in-engine editors, inspectors, IDEs,
    debug HUDs. All rules under .ds-247420 scope (build prefixes). Tokens