agentgui 1.0.948 → 1.0.949

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;
@@ -317,7 +332,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
@@ -400,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) {
@@ -466,13 +505,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 +523,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 ? 'resume' : '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,
@@ -558,9 +604,17 @@ 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 }));
+    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 +625,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 {}
 }
@@ -601,9 +661,18 @@ 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(); }
+      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(); }
     }
@@ -670,21 +739,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
@@ -702,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
@@ -713,7 +805,7 @@ function historyMain() {
             onClick: () => { expanded ? state.expandedEvents.delete(key) : state.expandedEvents.add(key); render(); },
           };
         }),
-      }),
+      })],
     }),
   ].filter(Boolean);
 }
@@ -785,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();
@@ -802,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) =>
@@ -820,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)
@@ -853,7 +953,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 })
@@ -924,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']);
@@ -959,7 +1065,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 +1076,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',
         }),
       ]),
@@ -999,6 +1105,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,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;
@@ -1042,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),
   });
 }
 
@@ -1077,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).
@@ -1094,6 +1215,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 +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();

package/site/app/js/backend.js

@@ -268,7 +268,11 @@ export async function* streamChat(base, { model, messages, signal, agentId, resu
   const finish = () => { done = true; if (resolveWait) { resolveWait(); resolveWait = null; } };
 
   const unsub = addSessionListener(sessionId, (ev) => {
-    if (ev.type === 'streaming_progress') {
+    if (ev.type === 'streaming_session') {
+      // claude's real session id - surface it so the host can --resume this
+      // conversation on the next turn (multi-turn continuity).
+      if (ev.claudeSessionId) push({ type: 'session', sessionId: ev.claudeSessionId });
+    } else if (ev.type === 'streaming_progress') {
       const block = ev.block;
       if (block?.type === 'text' && block.text) push({ type: 'text', text: block.text });
       else if (block?.type === 'tool_use') push({ type: 'tool', block });