agentgui 1.0.948 → 1.0.950

package/site/app/js/app.js

@@ -28,6 +28,7 @@ const state = {
   live: { es: null, connected: false, lastEventTs: 0, error: null, eventCount: 0, reconnects: 0 },
   active: [],
   activeTimer: null,
+  eventsLimit: 300,   // how many of the most-recent events to render; grows via "load older"
 };
 
 function readHash() {
@@ -70,12 +71,26 @@ function scheduleRender() {
   requestAnimationFrame(() => { renderScheduled = false; render(); });
 }
 
+// Streaming renders (token deltas, tool events) arrive faster than a frame; a
+// full webjsx diff + scroll per token thrashes. Coalesce both into one rAF tick
+// so a fast stream costs ~60fps of renders, not one render per token.
+let streamRenderScheduled = false;
+function scheduleStreamRender() {
+  if (streamRenderScheduled) return;
+  streamRenderScheduled = true;
+  requestAnimationFrame(() => {
+    streamRenderScheduled = false;
+    render();
+    scrollChatToBottom();
+  });
+}
+
 const NARROW_BP = 640;  // unified with the CSS touch-target breakpoint in index.html
 function isNarrow() { return typeof window !== 'undefined' && window.innerWidth < NARROW_BP; }
 function truncate(str, mobileLen, desktopLen) {
   const s = String(str ?? '');
   const max = isNarrow() ? mobileLen : desktopLen;
-  return s.length > max ? s.slice(0, max) + '...' : s;
+  return s.length > max ? s.slice(0, max) + '…' : s;
 }
 function debounce(fn, ms) {
   let t;
@@ -115,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() {
@@ -137,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;
@@ -246,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();
@@ -264,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.
@@ -317,7 +348,7 @@ function view() {
   const dotLabel = state.tab === 'history'
     ? (state.live.error
         ? state.live.error + (state.live.reconnects ? ' · ' + state.live.reconnects + ' reconnects' : '')
-        : (liveActive ? 'live · ' + state.live.eventCount : (state.live.connected ? 'live' : 'connecting...')))
+        : (liveActive ? 'live · ' + state.live.eventCount : (state.live.connected ? 'live' : 'connecting…')))
     : (ok ? (state.health.ws === 'reconnecting' ? 'ws reconnecting' : 'connected') : 'offline');
   const dotLive = state.tab === 'history' ? (liveActive || state.live.connected) : ok;
   // The status dot is drawn entirely by CSS (.status-dot::before) - a small
@@ -369,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'],
   });
 
@@ -382,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.
@@ -400,22 +431,56 @@ function canSend() {
   return !!state.selectedAgent && agentAvailable(state.selectedAgent) && !state.chat.busy;
 }
 
-function toolSummary(block) {
-  const name = block.name || block.kind || 'tool';
-  let arg = '';
-  const inp = block.input || block.rawInput;
+// A short, human one-liner for a tool's most salient argument (used as the
+// collapsible card's label). The full args live in the structured part.
+function toolLabel(inp) {
   if (inp && typeof inp === 'object') {
-    arg = inp.command || inp.file_path || inp.path || inp.pattern || inp.query || inp.url || '';
-    if (!arg) { try { arg = JSON.stringify(inp).slice(0, 120); } catch {} }
+    const a = inp.command || inp.file_path || inp.path || inp.pattern || inp.query || inp.url || '';
+    if (a) return String(a).slice(0, 160);
   }
-  return 'tool: ' + name + (arg ? ' · ' + String(arg).slice(0, 120) : '');
+  return '';
+}
+
+// Build a structured tool part the kit's ToolCallNode renders as a collapsible
+// card (name + label + full args, status icon). tool_result is matched back to
+// this part by tool_use id so the result lands inside the same card.
+function toolPart(block) {
+  const name = block.name || block.kind || 'tool';
+  const input = block.input || block.rawInput || {};
+  return {
+    kind: 'tool',
+    _id: block.id || block.tool_use_id || null,
+    name,
+    label: toolLabel(input),
+    args: input,
+    status: 'running',
+  };
 }
 
-function toolResultSummary(block) {
-  const c = block?.content ?? block?.output ?? block;
-  let s = typeof c === 'string' ? c : (() => { try { return JSON.stringify(c); } catch { return String(c); } })();
-  s = s.replace(/\s+/g, ' ').trim();
-  return (block?.is_error ? '[error] ' : '') + s.slice(0, 160);
+// 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 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';
+    target.error = isError || undefined;
+  } else {
+    parts.push({ kind: 'tool_result', name: 'result', result: content, error: isError || undefined, status: isError ? 'error' : 'done' });
+  }
 }
 
 function errText(e) {
@@ -432,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' })));
   }
@@ -466,13 +541,14 @@ function chatMain() {
 
   const placeholder = !state.selectedAgent
     ? 'choose an agent first'
-    : (!agentAvailable(state.selectedAgent) ? agentName + ' is not installed' : 'message...');
+    : (!agentAvailable(state.selectedAgent) ? agentName + ' is not installed' : 'message…');
 
   // The reusable AgentChat kit owns the agent/model picker, cwd bar, transcript
   // (with AICat-style auto-scroll + thinking), and the caret-stable composer.
   // agentgui supplies state and wires every server interaction as a callback.
   return [
     offlineBanner(),
+    runningPanel(),
     AgentChat({
       agents: sortedAgents(),
       selectedAgent: state.selectedAgent,
@@ -483,12 +559,18 @@ function chatMain() {
       busy: state.chat.busy,
       draft: state.chat.draft,
       status: state.chat.busy
-        ? (state.health.ws === 'reconnecting' ? 'reconnecting...' : 'streaming...')
-        : (state.modelsLoading ? 'loading models...' : (state.chat.resumeSid ? 'resume' : 'ready')),
+        ? (state.health.ws === 'reconnecting' ? 'reconnecting…' : 'streaming…')
+        : (state.modelsLoading ? 'loading models…' : ((state.chat.resumeSid && state.selectedAgent === 'claude-code') ? 'resuming…' : 'ready')),
       agentName,
       placeholder,
       canSend: canSend(),
       banners,
+      suggestions: state.chat.messages.length ? [] : [
+        'Summarize the structure of this project',
+        'What are the recent changes on this branch?',
+        'Find and explain the main entry point',
+      ],
+      onSuggestionClick: (t) => { if (!canSend()) return; state.chat.draft = t; sendChat(); },
       cwd: state.chatCwd,
       cwdEditing: !!state.cwdEditing,
       cwdDraft: state.cwdDraft,
@@ -554,13 +636,27 @@ 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';
+// An assistant turn with no content AND no parts is an empty shell (an aborted
+// turn that produced nothing). The view already renders it as nothing; drop it
+// from persisted/in-memory state so a restored chat never carries blank bubbles.
+function isEmptyTurn(m) {
+  return m.role === 'assistant' && !m.content && !(Array.isArray(m.parts) && m.parts.length);
+}
 function persistChat() {
   try {
-    const msgs = state.chat.messages.map(m => ({ id: m.id, role: m.role, content: m.content, time: m.time, parts: m.parts }));
+    const msgs = state.chat.messages
+      .filter(m => !isEmptyTurn(m))
+      .map(m => ({ id: m.id, role: m.role, content: m.content, time: m.time, parts: m.parts }));
     if (!msgs.length) { lsRemove(CHAT_KEY); return; }
     lsSet(CHAT_KEY, JSON.stringify({ messages: msgs, resumeSid: state.chat.resumeSid, agent: state.selectedAgent, model: state.selectedModel }));
   } catch {}
@@ -571,8 +667,14 @@ function restoreChat() {
     if (!raw) return;
     const saved = JSON.parse(raw);
     if (Array.isArray(saved.messages) && saved.messages.length) {
-      state.chat.messages = saved.messages.map(m => ({ ...m, parts: Array.isArray(m.parts) ? m.parts : [] }));
+      state.chat.messages = saved.messages
+        .filter(m => !isEmptyTurn(m))
+        .map(m => ({ ...m, parts: Array.isArray(m.parts) ? m.parts : [] }));
       state.chat.resumeSid = saved.resumeSid || null;
+      // Restore the agent/model the transcript belongs to, so a restored chat
+      // isn't silently shown under whatever agent the picker defaulted to.
+      state.chat.restoredAgent = saved.agent || null;
+      state.chat.restoredModel = saved.model || null;
     }
   } catch {}
 }
@@ -599,11 +701,22 @@ 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 === 'text')  { cur.content += ev.text; render(); scrollChatToBottom(); }
-      else if (ev.type === 'tool') { cur.parts.push(toolSummary(ev.block)); render(); scrollChatToBottom(); }
-      else if (ev.type === 'tool_result') { cur.parts.push('-> ' + toolResultSummary(ev.block)); render(); scrollChatToBottom(); }
+      if (ev.type === 'session') {
+        // Remember the server's session id so the NEXT turn resumes this
+        // conversation instead of cold-spawning. Only claude-code supports
+        // --resume by id; for other agents we leave resumeSid unset.
+        if (state.selectedAgent === 'claude-code' && ev.sessionId) {
+          state.chat.resumeSid = ev.sessionId;
+          persistChat();
+        }
+      }
+      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 */ }
       else if (ev.type === 'error') { cur.error = errText(ev.error); render(); }
     }
@@ -670,21 +783,38 @@ function historyMain() {
       ? h('div', { key: 'noev', class: 'lede empty-state', role: 'status' },
           h('span', { key: 'noevtxt' }, 'no events in this session - '),
           Btn({ key: 'reload', onClick: () => loadSession(state.selectedSid), children: 'reload' }))
-      : h('div', { key: 'loading', class: 'lede empty-state', role: 'status', 'aria-live': 'polite' }, Spinner({ key: 'spin', size: 'sm' }), 'loading events...');
+      : h('div', { key: 'loading', class: 'lede empty-state', role: 'status', 'aria-live': 'polite' }, Spinner({ key: 'spin', size: 'sm' }), 'loading events…');
     return [reconnectAlert(), head, actions, Panel({ title: 'events', children: body })].filter(Boolean);
   }
 
   if (!state.expandedEvents) state.expandedEvents = new Set();
   const total = state.events.length;
-  const shown = state.events.slice(-300);
+  const limit = state.eventsLimit;
+  const shown = state.events.slice(-limit);
   const hiddenCount = total - shown.length;
+  // Keys of the currently-shown rows, so expand-all toggles only what's rendered.
+  const shownKeys = shown.map((e, i) => {
+    const absIdx = total - shown.length + i;
+    return e.i != null ? 'ev' + e.i : 'ev-' + (e.ts || 0) + '-' + (e.type || '') + '-' + absIdx;
+  });
+  const allExpanded = shownKeys.length > 0 && shownKeys.every(k => state.expandedEvents.has(k));
+  const eventControls = h('div', { key: 'evctrl', class: 'history-actions', role: 'group', 'aria-label': 'event controls' },
+    Btn({ key: 'expall', onClick: () => {
+        if (allExpanded) { shownKeys.forEach(k => state.expandedEvents.delete(k)); }
+        else { shownKeys.forEach(k => state.expandedEvents.add(k)); }
+        render();
+      }, children: allExpanded ? 'collapse all' : 'expand all' }),
+    hiddenCount > 0
+      ? Btn({ key: 'older', onClick: () => { state.eventsLimit += 300; render(); }, children: 'load ' + Math.min(300, hiddenCount) + ' older (' + hiddenCount + ' hidden)' })
+      : null,
+  );
   return [
     reconnectAlert(),
     head,
     actions,
     Panel({
-      title: total + ' events' + (hiddenCount > 0 ? ' (showing last 300; ' + hiddenCount + ' older not rendered)' : ''),
-      children: EventList({
+      title: total + ' events' + (hiddenCount > 0 ? ' (showing last ' + shown.length + '; ' + hiddenCount + ' older)' : ''),
+      children: [eventControls, EventList({
         items: shown.map((e, i) => {
           // Stable key: prefer the server-assigned event index, else the
           // event timestamp + position, never a bare array index (which
@@ -701,10 +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 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
@@ -713,7 +851,7 @@ function historyMain() {
             onClick: () => { expanded ? state.expandedEvents.delete(key) : state.expandedEvents.add(key); render(); },
           };
         }),
-      }),
+      })],
     }),
   ].filter(Boolean);
 }
@@ -785,6 +923,26 @@ function uniqueProjects() {
   return Array.from(seen.entries()).sort((a, b) => b[1] - a[1]);
 }
 
+// The running-chats panel: in-flight chats with per-session stop. Shown on the
+// history sidebar AND the chat tab, so a chat started then navigated-away-from
+// stays visible and stoppable from anywhere (active polling is global).
+function runningPanel() {
+  const running = Array.isArray(state.active) ? state.active : [];
+  if (!running.length) return null;
+  return Panel({
+    key: 'runningPanel',
+    title: 'running · ' + running.length,
+    children: running.map((r) => {
+      const agentName = agentById(r.agentId)?.name || r.agentId || 'agent';
+      const elapsed = r.startedAt ? Math.round((Date.now() - r.startedAt) / 1000) : 0;
+      return h('div', { key: 'run' + r.sessionId, class: 'resume-banner', role: 'group' },
+        h('span', { key: 'rd', class: 'status-dot-disc status-dot-live', 'aria-hidden': 'true' }),
+        h('span', { class: 'lede' }, agentName + (r.model ? ' · ' + r.model : '') + ' · ' + elapsed + 's' + (r.cwd ? ' · ' + r.cwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : '')),
+        Btn({ key: 'stop' + r.sessionId, onClick: () => stopActiveChat(r.sessionId), children: 'stop' }));
+    }),
+  });
+}
+
 function historySide() {
   const searching = !!state.searchHits;
   const sessionsView = visibleSessions();
@@ -802,7 +960,9 @@ function historySide() {
           sub: (r.project || '?') + ' · ' + (r.role || '?') + (r.tool ? ' · ' + r.tool : ''),
           // Rail carries the same semantics as session rows: error > subagent > normal.
           rail: r.isError ? 'flame' : (r.isSubagent ? 'purple' : 'green'),
-          onClick: () => loadSession(r.sid),
+          // Carry the matched event's index so loadSession scrolls to + flashes
+          // the match, instead of dropping the user at the top of the session.
+          onClick: () => loadSession(r.sid, { focusEventI: r.i, focusEventTs: r.ts }),
         })
       )
     : visible.map((s, i) =>
@@ -820,23 +980,9 @@ function historySide() {
       );
   const subagentCount = (Array.isArray(state.sessions) ? state.sessions : []).filter(s => s.isSubagent).length;
   const projects = uniqueProjects();
-  const running = Array.isArray(state.active) ? state.active : [];
 
   return [
-    running.length
-      ? Panel({
-          key: 'runningPanel',
-          title: 'running · ' + running.length,
-          children: running.map((r, i) => {
-            const agentName = agentById(r.agentId)?.name || r.agentId || 'agent';
-            const elapsed = r.startedAt ? Math.round((Date.now() - r.startedAt) / 1000) : 0;
-            return h('div', { key: 'run' + r.sessionId, class: 'resume-banner', role: 'group' },
-              h('span', { key: 'rd', class: 'status-dot-disc status-dot-live', 'aria-hidden': 'true' }),
-              h('span', { class: 'lede' }, agentName + (r.model ? ' · ' + r.model : '') + ' · ' + elapsed + 's' + (r.cwd ? ' · ' + r.cwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : '')),
-              Btn({ key: 'stop' + r.sessionId, onClick: () => stopActiveChat(r.sessionId), children: 'stop' }));
-          }),
-        })
-      : null,
+    runningPanel(),
     Panel({
       title: searching
         ? 'matches · ' + (state.searchHits.results?.length || 0)
@@ -853,7 +999,7 @@ function historySide() {
           onInput: (v) => { state.searchQ = v; debouncedSearch(); },
         }),
         state.searchBusy
-          ? h('div', { key: 'searchbusy', class: 'lede empty-state', role: 'status' }, Spinner({ key: 'ss', size: 'sm' }), 'searching...')
+          ? h('div', { key: 'searchbusy', class: 'lede empty-state', role: 'status' }, Spinner({ key: 'ss', size: 'sm' }), 'searching…')
           : null,
         searching && state.searchHits.error
           ? Alert({ key: 'searcherr', kind: 'error', title: 'Search failed', children: state.searchHits.error })
@@ -897,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() {
@@ -909,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();
@@ -924,11 +1083,21 @@ function healthSummary() {
   const ok = hh.status === 'ok';
   // Each chip carries a title so its meaning isn't left to inference.
   const bits = [];
-  bits.push([hh.status || 'unknown', 'Backend connection status']);
+  // Use the same connection vocabulary as the crumb status dot
+  // (connected/offline/connecting) so the same state reads the same word
+  // everywhere, instead of the raw health.status ('ok'/'down').
+  const connWord = hh.status === 'ok' ? 'connected'
+    : hh.status === 'unknown' ? 'connecting'
+    : 'offline';
+  bits.push([connWord, 'Backend connection status']);
   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)));
 }
@@ -959,7 +1128,7 @@ function settingsMain() {
           onInput: (v) => { state.backendDraft = v; render(); },
         }),
         !isValid ? h('p', { key: 'err', id: 'backend-url-error', class: 'lede field-error', role: 'alert' }, 'Invalid URL format') : null,
-        state.backendStatus === 'connecting' ? h('p', { key: 'bst', class: 'lede', role: 'status' }, 'connecting...') : null,
+        state.backendStatus === 'connecting' ? h('p', { key: 'bst', class: 'lede', role: 'status' }, 'connecting…') : null,
         state.backendStatus === 'ok' ? h('p', { key: 'bst', class: 'lede', role: 'status' }, 'connected') : null,
         state.backendStatus === 'failed' ? h('p', { key: 'bst', class: 'lede field-error', role: 'alert' }, 'connection failed - check the URL') : null,
         state.confirmingBackend ? h('p', { key: 'bcw', class: 'lede field-error', role: 'alert' }, 'changing backend discards this browser\'s chat transcript - press save again to confirm') : null,
@@ -970,7 +1139,7 @@ function settingsMain() {
           primary: true,
           disabled: !isValid || state.backendDraft === state.backend || state.backendStatus === 'connecting',
           onClick: (e) => { e.preventDefault(); saveBackend(); },
-          children: state.backendStatus === 'connecting' ? 'connecting...' : 'save + reconnect',
+          children: state.backendStatus === 'connecting' ? 'connecting…' : 'save + reconnect',
           title: isValid ? 'Save backend URL and reconnect' : 'Fix URL format first',
         }),
       ]),
@@ -985,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() {
@@ -999,6 +1172,8 @@ function preferencesPanel() {
       h('div', { key: 'ver', class: 'lede' }, 'server ' + (hh.version ? 'v' + hh.version : 'version unknown') + (window.__SERVER_VERSION ? ' · build ' + window.__SERVER_VERSION : '')),
       h('div', { key: 'sc', class: 'lede', style: 'margin:.5em 0' },
         'keyboard: g then c/h/s - switch tabs · n - new chat · / - focus search/composer · ? - toggle hint · Esc - blur field'),
+      h('div', { key: 'cwdnote', class: 'lede', style: 'margin:.5em 0' },
+        'working directory: set per-chat in the chat composer’s cwd bar' + (state.chatCwd ? ' (current: ' + state.chatCwd + ')' : ' (currently: server default)')),
       state.confirmingClearData
         ? Alert({ key: 'cld', kind: 'warn', title: 'Clear all local data?',
             children: [
@@ -1017,16 +1192,23 @@ function acpStatusFor(agentId) {
 
 function agentsPanel() {
   const installed = state.agents.filter(a => a.available !== false);
+  const hasAcp = (Array.isArray(state.health.acp) ? state.health.acp : []).length > 0;
   return Panel({
     title: 'agents · ' + installed.length + '/' + state.agents.length + ' installed',
-    children: state.agents.length
+    children: [
+    // ACP agents (opencode/kilo/codex) are managed automatically: started
+    // on-demand and restarted with backoff by the server, so there are no
+    // manual start/stop controls by design. This note makes that explicit so
+    // a 'stopped' row doesn't read as a missing action.
+    hasAcp ? h('p', { key: 'acpnote', class: 'lede', style: 'margin:0 0 .5em' }, 'ACP agents start on demand and restart automatically; selecting one launches it.') : null,
+    ...(state.agents.length
       ? state.agents.map((a, i) => {
           const acp = acpStatusFor(a.id);
           const avail = a.available !== false;
           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({
@@ -1034,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.
@@ -1042,7 +1227,8 @@ function agentsPanel() {
             onClick: usable ? () => { navTo('chat'); selectAgent(a.id); } : undefined,
           });
         })
-      : h('p', { key: 'none', class: 'lede' }, 'no agents loaded'),
+      : [h('p', { key: 'none', class: 'lede' }, 'no agents loaded')]),
+    ].filter(Boolean),
   });
 }
 
@@ -1050,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) {
@@ -1077,14 +1266,19 @@ async function runSearch() {
 }
 const debouncedSearch = debounce(runSearch, 300);
 
-async function loadSession(sid) {
+async function loadSession(sid, { focusEventI = null, focusEventTs = null } = {}) {
   // Guard against a bad sid from a malformed hash (e.g. "?sid=undefined").
   if (!sid || sid === 'undefined' || sid === 'null') { state.selectedSid = null; render(); return; }
   state.selectedSid = sid;
   state.events = [];
   state.eventsLoaded = false;
+  state.eventsLimit = 300;            // reset the render window per session
   state.expandedEvents = new Set();   // don't carry expansion to the new session
   writeHash(sid, { push: true });
+  // Close the mobile sidebar drawer on selection. The DS only auto-closes when
+  // the clicked element is an <a>; agentgui's session rows are onClick divs, so
+  // we close it explicitly here.
+  document.querySelector('.app-body.side-open')?.classList.remove('side-open');
   render();
   // Bring the now-active sidebar row into view (deep-link / back-forward may
   // select a row that's scrolled out of the session list).
@@ -1094,6 +1288,26 @@ async function loadSession(sid) {
   try {
     state.events = await B.getSessionEvents(state.backend, sid);
     state.eventsLoaded = true;
+    // If we arrived from a search hit, make sure the matched event is within the
+    // render window, then scroll to + flash it so the match isn't lost.
+    if (focusEventI != null || focusEventTs != null) {
+      const idx = state.events.findIndex(e => (focusEventI != null && e.i === focusEventI) || (focusEventTs != null && e.ts === focusEventTs));
+      if (idx >= 0) {
+        const fromEnd = state.events.length - idx;
+        if (fromEnd > state.eventsLimit) state.eventsLimit = Math.ceil(fromEnd / 300) * 300;
+        render();
+        // The rendered EventList shows the last eventsLimit events in order, so
+        // the matched event's row is at (idx - sliceStart) among .ds-event-list rows.
+        const sliceStart = Math.max(0, state.events.length - state.eventsLimit);
+        const rowPos = idx - sliceStart;
+        requestAnimationFrame(() => {
+          const rows = document.querySelectorAll('.ds-event-list .row');
+          const row = rows[rowPos];
+          if (row) { row.scrollIntoView({ block: 'center' }); row.classList.add('event-flash'); setTimeout(() => row.classList.remove('event-flash'), 2000); }
+        });
+        return;
+      }
+    }
     render();
   } catch (e) {
     state.events = [{
@@ -1117,8 +1331,11 @@ async function init() {
   render();
   try {
     state.agents = await B.listAgents(state.backend);
-    // Restore the saved agent if still present; else first available, else first.
-    let target = state.agents.find(a => a.id === state.selectedAgent);
+    // Agent selection priority: the agent a restored transcript belongs to (so
+    // the chat isn't shown under the wrong agent), else the saved picker agent,
+    // else first available, else first.
+    let target = (state.chat.restoredAgent && state.agents.find(a => a.id === state.chat.restoredAgent))
+      || state.agents.find(a => a.id === state.selectedAgent);
     if (!target) target = state.agents.find(a => a.available !== false) || state.agents[0];
     if (target) await selectAgent(target.id);
     render();