agentgui 1.0.947 → 1.0.949

package/site/app/js/app.js

@@ -11,10 +11,10 @@ const state = {
   health: { status: 'unknown' },
   tab: 'chat',
   agents: [],
-  selectedAgent: localStorage.getItem('agentgui.agent') || '',
+  selectedAgent: lsGet('agentgui.agent') || '',
   agentModels: [],
-  selectedModel: localStorage.getItem('agentgui.model') || '',
-  chatCwd: localStorage.getItem('agentgui.cwd') || '',
+  selectedModel: lsGet('agentgui.model') || '',
+  chatCwd: lsGet('agentgui.cwd') || '',
   chat: { messages: [], busy: false, abort: null, draft: '', resumeSid: null },
   sessions: [],
   selectedSid: null,
@@ -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,6 +71,20 @@ 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) {
@@ -82,6 +97,7 @@ function debounce(fn, ms) {
   return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
 }
 
+function lsGet(k) { try { return localStorage.getItem(k); } catch { return null; } }
 function lsSet(k, v) { try { localStorage.setItem(k, v); } catch {} }
 function lsRemove(k) { try { localStorage.removeItem(k); } catch {} }
 
@@ -132,10 +148,10 @@ function timeNow() {
 
 async function selectAgent(id) {
   // Re-selecting the same agent would needlessly refetch models and reset the
-  // current model selection — no-op early.
+  // current model selection - no-op early.
   if (id === state.selectedAgent && state.agentModels.length) return;
   state.selectedAgent = id;
-  localStorage.setItem('agentgui.agent', id);
+  lsSet('agentgui.agent', id);
   state.agentModels = [];
   state.selectedModel = '';
   state.modelsLoading = true;
@@ -144,7 +160,7 @@ async function selectAgent(id) {
   if (state.selectedAgent !== id) return; // changed while loading
   state.modelsLoading = false;
   state.agentModels = models;
-  const saved = localStorage.getItem('agentgui.model');
+  const saved = lsGet('agentgui.model');
   // Only restore a saved model that the NEW agent actually offers; otherwise
   // fall back to its first model (never carry a stale model from a prior agent).
   state.selectedModel = (saved && models.some(m => m.id === saved)) ? saved : (models[0]?.id || '');
@@ -153,7 +169,7 @@ async function selectAgent(id) {
 
 function selectModel(id) {
   state.selectedModel = id;
-  localStorage.setItem('agentgui.model', id);
+  lsSet('agentgui.model', id);
   render();
 }
 
@@ -161,7 +177,7 @@ function agentById(id) { return state.agents.find(a => a.id === id); }
 function agentAvailable(id) { const a = agentById(id); return !a || a.available !== false; }
 
 // The four flagship orchestration targets surface first, then other available
-// agents, then npx-installable, then not-installed — so the agents the GUI
+// agents, then npx-installable, then not-installed - so the agents the GUI
 // exists to drive are reachable without scanning a flat 17-item list. This
 // ordering is agentgui's orchestration priority, so it stays in the host and is
 // passed pre-sorted to the (app-agnostic) AgentChat kit.
@@ -206,7 +222,7 @@ function navTo(tab) {
     const heading = region.querySelector('h1, h2');
     const target = heading || region;
     if (!target.hasAttribute('tabindex')) target.setAttribute('tabindex', '-1');
-    // Mark as programmatically focused so CSS can suppress the focus ring — we
+    // Mark as programmatically focused so CSS can suppress the focus ring - we
     // move focus here for AT, but a visible green outline box around the heading
     // reads as an accidental border to sighted users.
     target.setAttribute('data-prog-focus', '');
@@ -277,7 +293,7 @@ function openLiveStream() {
           if (data.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.
+          // a full session-list refetch per event - debounce it into one.
           debouncedRefreshHistory();
           return;
         }
@@ -319,7 +335,7 @@ function view() {
         : (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
+  // The status dot is drawn entirely by CSS (.status-dot::before) - a small
   // colored disc, real product design, not a text glyph. State drives its colour
   // via the modifier class; the label carries only words so AT reads "live", and
   // there are no literal status-glyph characters in the DOM.
@@ -379,7 +395,7 @@ function view() {
     : 'min-height:0';
   const shortcutsHint = state.showShortcuts
     ? 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' })
+        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));
   // narrow drives the DS main-column class; the history sidebar itself collapses
@@ -399,22 +415,46 @@ 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);
+// 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;
+  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) {
@@ -436,8 +476,8 @@ function chatMain() {
     // 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'
-        + (state.chat.resumeNote ? ' — ' + state.chat.resumeNote : '')),
+        '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' })));
   }
   if (state.selectedAgent && !agentAvailable(state.selectedAgent)) {
@@ -472,6 +512,7 @@ function chatMain() {
   // agentgui supplies state and wires every server interaction as a callback.
   return [
     offlineBanner(),
+    runningPanel(),
     AgentChat({
       agents: sortedAgents(),
       selectedAgent: state.selectedAgent,
@@ -488,6 +529,12 @@ function chatMain() {
       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,
@@ -509,8 +556,8 @@ function chatMain() {
       onCwdSave: () => {
         const path = (state.cwdDraft ?? '').trim();
         // A relative cwd would resolve against the server process dir, not what
-        // the user means — require an absolute path (POSIX /…, UNC \\…, or
-        // Windows drive X:\…). Blank is valid (server default).
+        // the user means - require an absolute path (POSIX /..., UNC \\..., or
+        // Windows drive X:\...). Blank is valid (server default).
         if (path && !/^([/\\]|[A-Za-z]:[/\\])/.test(path)) {
           state.cwdError = 'enter an absolute path (e.g. /home/you/proj or C:\\proj) or leave blank';
           render();
@@ -545,7 +592,7 @@ function newChat() {
   state.confirmingNewChat = false;
   state.chat.abort?.abort();
   state.chat = { messages: [], busy: false, abort: null, draft: '', resumeSid: null };
-  try { localStorage.removeItem(CHAT_KEY); } catch {}
+  lsRemove(CHAT_KEY);
   render();
 }
 
@@ -557,21 +604,35 @@ function cancelChat() {
 }
 
 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 }));
-    if (!msgs.length) { localStorage.removeItem(CHAT_KEY); return; }
-    localStorage.setItem(CHAT_KEY, JSON.stringify({ messages: msgs, resumeSid: state.chat.resumeSid, agent: state.selectedAgent, model: state.selectedModel }));
+    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 {}
 }
 function restoreChat() {
   try {
-    const raw = localStorage.getItem(CHAT_KEY);
+    const raw = lsGet(CHAT_KEY);
     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 {}
 }
@@ -600,10 +661,19 @@ async function sendChat() {
       signal: ctrl.signal,
       resumeSid: 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(); }
-      else if (ev.type === 'result') { /* terminal usage/summary block — already reflected via text */ }
+      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')  { cur.content += 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(); }
     }
   } catch (e) {
@@ -624,7 +694,7 @@ function reconnectAlert() {
     key: 'liveerr',
     kind: 'error',
     title: 'Live stream disconnected',
-    children: [h('span', { key: 'lemsg' }, state.live.error + ' — '), Btn({ key: 'reco', onClick: openLiveStream, children: 'reconnect', title: 'Reconnect to history stream' })],
+    children: [h('span', { key: 'lemsg' }, state.live.error + ' - '), Btn({ key: 'reco', onClick: openLiveStream, children: 'reconnect', title: 'Reconnect to history stream' })],
   });
 }
 
@@ -635,7 +705,7 @@ function historyMain() {
       reconnectAlert(),
       PageHeader({
         title: 'history',
-        lede: 'pick a session from the sidebar — events stream live from ccsniff /v1/history.',
+        lede: 'pick a session from the sidebar - events stream live from ccsniff /v1/history.',
       }),
       h('div', { key: 'histempty', class: 'history-empty', role: 'status' },
         h('p', { key: 'gt', class: 'history-empty-title' },
@@ -643,7 +713,7 @@ function historyMain() {
         h('p', { key: 'gs', class: 'lede history-empty-sub' },
           count
             ? count + ' session' + (count === 1 ? '' : 's') + ' available · use the search box or press / to filter'
-            : 'Start a chat or run a local coding agent — its session will appear here live.')),
+            : 'Start a chat or run a local coding agent - its session will appear here live.')),
     ].filter(Boolean);
   }
 
@@ -667,7 +737,7 @@ function historyMain() {
     // doesn't spin forever.
     const body = state.eventsLoaded
       ? h('div', { key: 'noev', class: 'lede empty-state', role: 'status' },
-          h('span', { key: 'noevtxt' }, 'no events in this session — '),
+          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…');
     return [reconnectAlert(), head, actions, Panel({ title: 'events', children: body })].filter(Boolean);
@@ -675,15 +745,32 @@ function historyMain() {
 
   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,9 +788,15 @@ function historyMain() {
           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;
+          // 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');
           return {
             key,
             code: String(absIdx + 1).padStart(4, '0'),
+            rail,
             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
@@ -712,7 +805,7 @@ function historyMain() {
             onClick: () => { expanded ? state.expandedEvents.delete(key) : state.expandedEvents.add(key); render(); },
           };
         }),
-      }),
+      })],
     }),
   ].filter(Boolean);
 }
@@ -746,7 +839,7 @@ function resumeInChat(sess) {
   // Only claude-code supports --resume by sid; warn if we have to switch the
   // user's selected agent rather than silently discarding it.
   if (state.selectedAgent && state.selectedAgent !== 'claude-code') {
-    state.chat.resumeNote = 'Switched to Claude Code — only it supports resuming a session by id.';
+    state.chat.resumeNote = 'Switched to Claude Code - only it supports resuming a session by id.';
   } else {
     state.chat.resumeNote = null;
   }
@@ -784,6 +877,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();
@@ -801,7 +914,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) =>
@@ -819,23 +934,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)
@@ -843,7 +944,10 @@ function historySide() {
       children: [
         SearchInput({
           key: 'searchInput',
-          placeholder: 'search event text…',
+          // The DS SearchInput reads `label` (not aria-label) for the accessible
+          // name, falling back to placeholder; pass label so AT announces it.
+          placeholder: 'Search event text across sessions',
+          label: 'Search event text across sessions',
           'aria-label': 'Search event text across sessions',
           value: state.searchQ,
           onInput: (v) => { state.searchQ = v; debouncedSearch(); },
@@ -883,7 +987,7 @@ function historySide() {
         // Search is server-capped at 60 hits; there is no deeper page, so tell
         // the user the result set is truncated rather than silently hiding it.
         searching && truncatedBy > 0
-          ? h('p', { key: 'searchmore', class: 'lede empty-state' }, 'showing first 60 matches (' + truncatedBy + ' more — refine your search)')
+          ? h('p', { key: 'searchmore', class: 'lede empty-state' }, 'showing first 60 matches (' + truncatedBy + ' more - refine your search)')
           : null,
       ],
     }),
@@ -920,7 +1024,13 @@ 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']);
@@ -935,7 +1045,7 @@ function settingsMain() {
   return [
     PageHeader({
       title: 'settings',
-      lede: 'point agentgui at any backend. blank = same-origin (ccsniff in-process). ?backend=… or the field below persists via localStorage.',
+      lede: 'point agentgui at any backend. blank = same-origin (ccsniff in-process). ?backend=... or the field below persists via localStorage.',
     }),
     h('div', { key: 'settings-grid', class: 'settings-grid' }, [
     Panel({
@@ -957,8 +1067,8 @@ function settingsMain() {
         !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 === '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,
+        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,
         healthSummary(),
         Btn({
           key: 'savebtn',
@@ -994,7 +1104,9 @@ function preferencesPanel() {
     children: [
       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'),
+        '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: [
@@ -1013,9 +1125,16 @@ 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;
@@ -1038,7 +1157,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),
   });
 }
 
@@ -1073,14 +1193,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).
@@ -1090,13 +1215,33 @@ 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 = [{
       ts: Date.now(),
       role: 'error',
       type: 'fetch',
-      text: 'Failed to load session: ' + e.message + ' — retry via sidebar',
+      text: 'Failed to load session: ' + e.message + ' - retry via sidebar',
     }];
     state.eventsLoaded = true;
     render();
@@ -1113,8 +1258,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();