agentgui 1.0.985 → 1.0.986

package/site/app/js/app.js

@@ -45,9 +45,13 @@ const state = {
   files: { path: '', segments: [], entries: [], roots: [], loading: false, error: null, preview: null, sort: 'name', sortDir: 'asc', filter: '' },
 };
 
+// Two-step arm controls auto-reset after this delay so an accidental first click
+// doesn't leave a "armed" button forever.
+const ARM_RESET_MS = 4000;
+
 // Full routable param set. Every view-defining piece of state round-trips
 // through the hash so reload and Back/forward restore the exact view.
-const HASH_KEYS = ['tab', 'sid', 'dir', 'file', 'q', 'project', 'section'];
+const HASH_KEYS = ['tab', 'sid', 'dir', 'file', 'q', 'project', 'section', 'filter'];
 function readHash() {
   const hash = location.hash || '';
   const out = {};
@@ -70,6 +74,7 @@ function buildHash() {
   if (tab === 'files' && state.files) {
     if (state.files.path) parts.push('dir=' + encodeURIComponent(state.files.path));
     if (state.files.preview && state.files.preview.path) parts.push('file=' + encodeURIComponent(state.files.preview.path));
+    if (state.files.filter) parts.push('filter=' + encodeURIComponent(state.files.filter));
   }
   if (tab === 'history') {
     const q = (state.searchQ || '').trim();
@@ -171,6 +176,9 @@ function announce(msg) {
   requestAnimationFrame(() => { if (_announcer) _announcer.textContent = msg; });
 }
 
+// Extract the last path segment from a file-system path (cross-platform / or \).
+function pathBasename(p) { return p ? p.split(/[/\\]/).filter(Boolean).slice(-1)[0] || '' : ''; }
+
 function pillButton(key, label, active, title, onClick) {
   return h('button', {
     key,
@@ -244,7 +252,9 @@ function agentAvailable(id) { const a = agentById(id); return !a || a.available
 // Protocol ids are plumbing vocabulary; rows speak product words.
 const PROTOCOL_WORDS = { acp: 'managed server', cli: 'local CLI', direct: 'local CLI' };
 const PRIMARY_AGENTS = ['claude-code', 'opencode', 'kilo', 'agy'];
-function sortedAgents() {
+// Memoized: recomputed only when state.agents changes (in loadAgents), not on
+// every chatMain() render. Stored in state.sortedAgentsCache.
+function computeSortedAgents() {
   const rank = (a) => {
     const primary = PRIMARY_AGENTS.indexOf(a.id);
     const avail = a.available !== false;
@@ -258,6 +268,7 @@ function sortedAgents() {
     .sort((x, y) => x.rank - y.rank || x.a.name.localeCompare(y.a.name))
     .map(({ a }) => a);
 }
+function sortedAgents() { return state.sortedAgentsCache || (state.sortedAgentsCache = computeSortedAgents()); }
 
 function navTo(tab, { writeHash: doWriteHash = true, push = true } = {}) {
   const prev = state.tab;
@@ -338,6 +349,7 @@ async function refreshActive() {
   try { next = await B.listActiveChats(state.backend); } catch { return; }
   const changed = activeSig(next) !== activeSig(state.active);
   state.active = next;
+  if (changed) state._sessionGroupsCache = null;
   // A stopping sid that left the active set has genuinely stopped - clear it
   // so the per-card 'stopping' state resolves.
   const st = state.live.stopping;
@@ -424,7 +436,11 @@ function openLiveStream() {
           // reconnect or overlap would otherwise double-append the same event.
           if (!state.events._seen) state.events._seen = new Set();
           if (ev.i == null || !state.events._seen.has(ev.i)) {
-            if (ev.i != null) state.events._seen.add(ev.i);
+            if (ev.i != null) {
+              state.events._seen.add(ev.i);
+              // Cap the seen-set so a very long session doesn't grow unbounded.
+              if (state.events._seen.size > 5000) state.events._seen = new Set([...state.events._seen].slice(-2500));
+            }
             ev._idx = state.events.length;
             state.events.push(ev);
             // Cap retained events so a long live session can't grow unbounded.
@@ -449,6 +465,7 @@ function openLiveStream() {
             // only the one resumed in the in-page chat.
             if (ev.type === 'tool_use') { t.tools++; t.toolRunning = true; t.toolName = ev.tool || ev.name || ''; }
             if (ev.type === 'tool_result') { t.toolRunning = false; t.toolName = ''; }
+            if (ev.type === 'result' && ev.usage) { t.tokens = (t.tokens || 0) + (ev.usage.input_tokens || 0) + (ev.usage.output_tokens || 0); }
             if (ev.isError) { t.errors++; t.lastErrorTs = t.last; }
           }
           state.live.tally.set(data.sid, t);
@@ -576,8 +593,11 @@ function view() {
   });
 
   const shortcutsHint = state.showShortcuts
-    ? Alert({ key: 'sc', kind: 'info', title: 'Keyboard shortcuts',
-        children: ShortcutList({ shortcuts: SHORTCUTS }) })
+    ? h('div', { key: 'sc', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Keyboard shortcuts', class: 'ds-alert ds-alert--info shortcuts-dialog' },
+        h('div', { key: 'sc-head', class: 'ds-alert-head' },
+          h('span', { key: 'sc-title', class: 'ds-alert-title' }, 'Keyboard shortcuts'),
+          h('button', { key: 'sc-close', type: 'button', class: 'ds-btn', 'aria-label': 'Close keyboard shortcuts', ref: (el) => { if (el) requestAnimationFrame(() => el.focus()); }, onClick: () => { state.showShortcuts = false; render(); announce('shortcuts closed'); } }, 'close')),
+        h('div', { key: 'sc-body', class: 'ds-alert-body' }, ShortcutList({ shortcuts: SHORTCUTS })))
     : null;
   const main = h('div', { id: 'agentgui-main', role: 'region', 'aria-label': 'main content', 'data-chat-scroll': '', class: 'agentgui-main agentgui-main-' + state.tab }, [shortcutsHint, ...mainContent()].filter(Boolean));
 
@@ -606,7 +626,7 @@ function view() {
       // One affordance per action: the cwd row opens the SAME inline editor as
       // the composer context line (it validates via /api/stat) instead of
       // navigating away to the Files tab.
-      onSetCwd: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; state.cwdError = null; render(); },
+      onSetCwd: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; state.cwdError = null; render(); requestAnimationFrame(() => { const inp = document.querySelector('.agentchat-cwd-input'); if (inp) inp.focus(); }); },
     });
   } else if (state.tab === 'files' && state.files && state.files.preview && !isNarrow()) {
     pane = filePreviewPane();
@@ -619,8 +639,11 @@ function view() {
 // The left workspace rail: brand, New chat action, and the primary view nav.
 function workspaceRail() {
   const liveCount = (Array.isArray(state.active) ? state.active.length : 0);
+  // Show a live pulse on the chat rail item when a stream is in progress but the
+  // user has navigated to a different tab - so the background stream stays visible.
+  const chatStreaming = state.chat.busy && state.tab !== 'chat';
   const items = [
-    { key: 'chat', label: 'Chat', icon: 'forum', active: state.tab === 'chat', onClick: () => navTo('chat') },
+    { key: 'chat', label: 'Chat', icon: 'forum', active: state.tab === 'chat', count: chatStreaming ? 1 : null, onClick: () => navTo('chat') },
     { key: 'history', label: 'History', icon: 'thread', active: state.tab === 'history', onClick: () => navTo('history') },
     { key: 'files', label: 'Files', icon: 'folder', active: state.tab === 'files', onClick: () => navTo('files') },
     { key: 'live', label: 'Live', icon: 'activity', active: state.tab === 'live', count: liveCount || null, onClick: () => navTo('live') },
@@ -655,6 +678,9 @@ const DATE_GROUP_ORDER = ['Running', 'Today', 'Yesterday', 'This week', 'Earlier
 // chats are pinned to a "Running" section at the top (a live workspace surfaces
 // in-flight work first), the rest bucket by recency. Returns { items, groups }.
 function sessionGroups(sessionsView) {
+  // Cache key: sessions + active combo (both affect group membership).
+  const key = sessionsView.map(s => s.sid).join(',') + '|' + (Array.isArray(state.active) ? state.active : []).map(a => a.claudeSessionId || a.sessionId).join(',');
+  if (state._sessionGroupsCache && state._sessionGroupsCacheKey === key) return state._sessionGroupsCache;
   // Join on the REAL claude/ccsniff sid when known (chat.active rows carry the
   // ephemeral chat- id; claudeSessionId lands once streaming_session arrives).
   const runningSids = new Set((Array.isArray(state.active) ? state.active : []).map(a => a.claudeSessionId || a.sessionId));
@@ -667,6 +693,8 @@ function sessionGroups(sessionsView) {
   const groups = DATE_GROUP_ORDER
     .filter(l => buckets.has(l))
     .map(l => ({ label: l, sids: buckets.get(l) }));
+  state._sessionGroupsCacheKey = key;
+  state._sessionGroupsCache = groups;
   return groups;
 }
 
@@ -704,7 +732,7 @@ function sessionsColumn() {
       selected: state.selectedSid,
       search: {
         value: state.searchQ,
-        placeholder: 'Search conversations',
+        placeholder: 'Search conversations (2+ chars)',
         onInput: (v) => { state.searchQ = v; if (v.trim().length >= 2) debouncedSearch(); else { state.searchHits = null; } render(); },
       },
       onNew: () => { navTo('chat'); newChat(); },
@@ -1100,12 +1128,30 @@ function fileDialog() {
   }
   if (d.kind === 'bulk-move') {
     const n = filesMarked().size;
+    // Debounced /api/stat validation on the destination input (mirrors cwd field).
+    if (!d._validateDest) {
+      d._validateDest = debounce(async (v) => {
+        if (!v || v === state.files.path) return;
+        try {
+          const st = await B.statPath(state.backend, v);
+          if (state.files.dialog !== d) return;
+          d.error = (!st || st.ok === false) ? 'folder not found on the server'
+            : (!st.dir ? 'that path is not a directory' : null);
+        } catch (e) {
+          if (state.files.dialog !== d) return;
+          d.error = e.status === 403 ? 'outside the allowed roots'
+            : (e.status === 404 ? 'folder not found on the server' : null);
+        }
+        render();
+      }, 400);
+    }
     return PromptDialog({
       title: 'Move ' + n + ' selected ' + (n === 1 ? 'entry' : 'entries'),
       value: state.files.path || '', placeholder: 'destination folder path',
       error: d.error || null, busy: !!d.busy,
       confirmLabel: d.busy ? 'moving…' : 'move ' + n, cancelLabel: 'cancel',
       onCancel: closeFileDialog,
+      onInput: (v) => { d.error = null; d._validateDest(v); },
       onConfirm: (v) => {
         if (!v) { d.error = 'enter a destination folder'; render(); return; }
         if (v === state.files.path) { d.error = 'already in that folder - enter a different destination'; render(); return; }
@@ -1272,9 +1318,10 @@ function filesMain() {
         persistFilesPrefs();
         render();
       } },
-      filter: { value: f.filter || '', placeholder: 'Filter files in this directory', onInput: (v) => { state.files.filter = v; state.files.shown = null; render(); } },
+      filter: { value: f.filter || '', placeholder: 'Filter files in this directory', onInput: debouncedFilesFilter },
       onUp: fileUp,
       onOpen: (file) => {
+        if (file.permissions === 'EACCES') { announce('no access to ' + file.name); return; }
         if (file.type === 'dir') loadDir(file.path);
         else openPreview(file);
       },
@@ -1315,7 +1362,9 @@ function filesMain() {
       f.path ? Btn({ key: 'upload', onClick: () => {
         const inp = document.createElement('input');
         inp.type = 'file'; inp.multiple = true;
-        inp.onchange = () => uploadFiles(inp.files);
+        inp.style.position = 'fixed'; inp.style.opacity = '0';
+        document.body.appendChild(inp);
+        inp.onchange = () => { uploadFiles(inp.files); inp.remove(); };
         inp.click();
       }, children: 'upload' }) : null,
       targetCwd
@@ -1331,7 +1380,19 @@ function filesMain() {
         label: 'drop files to upload to this folder',
         onDragOver: () => { if (!state.files.dragover) { state.files.dragover = true; render(); } },
         onDragLeave: () => { if (state.files.dragover) { state.files.dragover = false; render(); } },
-        onDrop: (files) => { state.files.dragover = false; uploadFiles(files); },
+        onDrop: (files, ev) => {
+          state.files.dragover = false;
+          // Detect directory drops: browsers report an empty FileList for dirs.
+          // Check DataTransferItems when available; fall back to empty files list.
+          const items = ev && ev.dataTransfer && ev.dataTransfer.items;
+          if (items) {
+            const hasDir = Array.from(items).some(it => { try { return it.webkitGetAsEntry && it.webkitGetAsEntry()?.isDirectory; } catch { return false; } });
+            if (hasDir) { announce('Folders cannot be dropped — use the New Folder button to create directories'); return; }
+          } else if (!files || !files.length) {
+            announce('Folders cannot be dropped — use the New Folder button to create directories'); return;
+          }
+          uploadFiles(files);
+        },
         children: body,
       })
     : body;
@@ -1405,13 +1466,13 @@ let _stopSelArmTimer = null;
 function armStopAll() {
   state.live.confirmingStopAll = true;
   clearTimeout(_stopAllArmTimer);
-  _stopAllArmTimer = setTimeout(() => { state.live.confirmingStopAll = false; render(); }, 4000);
+  _stopAllArmTimer = setTimeout(() => { state.live.confirmingStopAll = false; render(); }, ARM_RESET_MS);
   render();
 }
 function armStopSelected() {
   state.live.confirmingStopSelected = true;
   clearTimeout(_stopSelArmTimer);
-  _stopSelArmTimer = setTimeout(() => { state.live.confirmingStopSelected = false; render(); }, 4000);
+  _stopSelArmTimer = setTimeout(() => { state.live.confirmingStopSelected = false; render(); }, ARM_RESET_MS);
   render();
 }
 
@@ -1506,7 +1567,7 @@ function liveMain() {
       title: title || undefined,
       agent: agentById(r.agentId)?.name || r.agentId || 'agent',
       model: r.model || '',
-      cwd: r.cwd ? r.cwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : '',
+      cwd: pathBasename(r.cwd),
       elapsed: elapsedMs ? fmtDuration(elapsedMs) : '',
       elapsedMs,
       startedTs,
@@ -1519,10 +1580,12 @@ function liveMain() {
       stopping: stoppingSet.has(r.sessionId),
       // Arrival cue for a freshly-started session (a brief enter animation).
       isNew: startedTs ? (now - startedTs < 3000) : false,
-      // Surface the in-page chat's own running cost on its card (the only
-      // session we hold a reliable per-session cost for; others omit it).
+      // Surface the in-page chat's own running cost and token count on its card
+      // (the only session we hold reliable per-session data for; others omit it).
       cost: (state.chat.resumeSid && (r.claudeSessionId === state.chat.resumeSid || r.sessionId === state.chat.resumeSid))
         ? (state.chat.totalCost || null) : null,
+      tokens: (state.chat.resumeSid && (r.claudeSessionId === state.chat.resumeSid || r.sessionId === state.chat.resumeSid) && state.chat.usage)
+        ? ((state.chat.usage.inputTokens || 0) + (state.chat.usage.outputTokens || 0)) : (t && t.tokens ? t.tokens : undefined),
     };
   });
   // External sessions (a claude CLI in a terminal, etc.): live SSE motion that
@@ -1549,7 +1612,7 @@ function liveMain() {
       title: sess ? (projectLabel(sess.title) || projectLabel(sess.project) || sid) : sid,
       agent: 'external session',
       model: '',
-      cwd: sess && sess.cwd ? sess.cwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : '',
+      cwd: pathBasename(sess && sess.cwd),
       elapsed: '',
       elapsedMs: 0,
       startedTs: 0,
@@ -1558,7 +1621,9 @@ function liveMain() {
       lastTs: t.last,
       errors,
       currentTool: t.toolRunning ? (t.toolName || 'tool') : '',
-      status: (lastErrorTs && (nowS - lastErrorTs) <= STALE_AFTER_MS) ? 'error' : 'running',
+      // Apply stale detection to external sessions too: no recent activity + no running tool = stale.
+      status: (lastErrorTs && (nowS - lastErrorTs) <= STALE_AFTER_MS) ? 'error'
+        : (!t.toolRunning && t.last && (nowS - t.last) > STALE_AFTER_MS * 0.6 ? 'stale' : 'running'),
       stopping: false,
     });
   }
@@ -1636,7 +1701,7 @@ function liveMain() {
         state.live.selected = sel;
         render();
       },
-      emptyText: 'No live sessions — agents you start (or run locally) appear here.',
+      emptyText: (!sessions.length && (lv.filter || lv.errorsOnly)) ? 'No sessions match the current filter' : 'No live sessions — agents you start (or run locally) appear here.',
       emptyAction: { label: 'start a chat', onClick: () => { navTo('chat'); } },
       onStop: (s) => { if (!s.external) stopActiveChat(s.sid); },
       onStopAll: async (all) => {
@@ -1759,8 +1824,7 @@ function chatMain() {
   // 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) {
+    if (state.selectedAgent && state.selectedAgent !== 'claude-code' && userTurnCount > 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.' }));
     }
@@ -1812,6 +1876,10 @@ function chatMain() {
         h('span', { key: 'agtxt', title: state.agentsError }, 'The agent list failed to load. '),
         Btn({ key: 'agretry', onClick: () => loadAgents(), children: 'retry' })] }));
   }
+  if (state.chat.loadingTranscript) {
+    banners.push(Alert({ key: 'transcriptload', kind: 'info', title: 'Loading prior conversation...',
+      children: [Spinner({ key: 'trspin', size: 'sm' })] }));
+  }
   if (state.chat.confirmingEdit) {
     banners.push(Alert({ key: 'confedit', kind: 'warn', title: 'Edit this message?',
       children: [
@@ -1878,9 +1946,9 @@ function chatMain() {
           agentName,
           state.selectedModel || null,
           {
-            label: state.chatCwd ? state.chatCwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : 'server default',
+            label: state.chatCwd ? pathBasename(state.chatCwd) : 'server default',
             title: 'change working directory',
-            onClick: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; state.cwdError = null; render(); },
+            onClick: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; state.cwdError = null; render(); requestAnimationFrame(() => { const inp = document.querySelector('.chat-cwd-input, .agentchat-cwd-input'); if (inp) inp.focus(); }); },
           },
           userTurnCount > 0 ? plural(userTurnCount, 'turn') : null,
           (state.chat.resumeSid && state.selectedAgent === 'claude-code')
@@ -1940,7 +2008,7 @@ function chatMain() {
         if (was !== now) render();
       },
       onSend: (v) => { state.chat.draft = v; sendChat(); },
-      onCwdEdit: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; state.cwdError = null; render(); },
+      onCwdEdit: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; state.cwdError = null; render(); requestAnimationFrame(() => { const inp = document.querySelector('.agentchat-cwd-input'); if (inp) inp.focus(); }); },
       onCwdSave: async () => {
         const path = (state.cwdDraft ?? '').trim();
         // A relative cwd would resolve against the server process dir, not what
@@ -1970,7 +2038,7 @@ function chatMain() {
         if (state.chatCwd) lsSet('agentgui.cwd', state.chatCwd); else lsRemove('agentgui.cwd');
         state.cwdEditing = false; state.cwdDraft = undefined; render();
       },
-      onCwdCancel: () => { state.cwdEditing = false; state.cwdDraft = undefined; state.cwdError = null; state.cwdChecking = false; render(); },
+      onCwdCancel: () => { state.cwdEditing = false; state.cwdDraft = undefined; state.cwdError = null; state.cwdChecking = false; render(); requestAnimationFrame(() => { const btn = document.querySelector('.agentchat-cwd-btn'); if (btn) btn.focus(); }); },
       onCwdClear: () => { state.chatCwd = ''; lsRemove('agentgui.cwd'); render(); },
       onCwdDraft: (v) => { state.cwdDraft = v; state.cwdError = null; debouncedCwdProbe(); },
     }),
@@ -1997,7 +2065,7 @@ function newChat() {
     if (state.confirmingNewChat) { render(); return; }   // armed: repeat press is a no-op
     state.confirmingNewChat = true;
     clearTimeout(_newChatArmTimer);
-    _newChatArmTimer = setTimeout(() => { state.confirmingNewChat = false; render(); }, 4000);
+    _newChatArmTimer = setTimeout(() => { state.confirmingNewChat = false; render(); }, ARM_RESET_MS);
     render();
     return;
   }
@@ -2126,6 +2194,7 @@ function messageToText(m) {
   return m.parts.map((p) => {
     if (typeof p === 'string') return p;
     if (p.kind === 'md' || p.kind === 'text') return p.text || '';
+    if (p.kind === 'thinking') return '[thinking: ' + (p.text || '') + ']';
     if (p.kind === 'tool') return '[tool: ' + (p.name || '') + (p.label ? ' ' + p.label : '') + ']';
     return '';
   }).filter(Boolean).join('\n');
@@ -2161,6 +2230,7 @@ function transcriptToMarkdown(messages) {
       ? parts.map((p) => {
           if (typeof p === 'string') return p;
           if (p.kind === 'md' || p.kind === 'text') return p.text || '';
+          if (p.kind === 'thinking') return '> thinking: ' + (p.text || '');
           if (p.kind === 'tool' || p.kind === 'tool_result') {
             const bits = ['## tool: ' + (p.name || 'tool')];
             if (p.args && Object.keys(p.args).length) bits.push('```json\n' + JSON.stringify(p.args, null, 2) + '\n```');
@@ -2180,6 +2250,8 @@ const FOLLOWUP_SEEDS = ['Explain that in more detail', 'Show me the diff', 'Run
 function chatFollowups() {
   const msgs = state.chat.messages || [];
   if (!msgs.length || state.chat.busy) return [];
+  // Memoize: recompute only when the messages array reference changes.
+  if (state._followupsCache && state._followupsMsgs === msgs) return state._followupsCache;
   const last = [...msgs].reverse().find(m => m.role === 'assistant');
   if (!last) return [];
   const out = [];
@@ -2192,7 +2264,10 @@ function chatFollowups() {
     const base = fm[1].split(/[/\\]/).filter(Boolean).pop();
     if (base) out.push('Open ' + base.replace(/[^\w.\-]/g, '') + ' in files');
   }
-  return out.length ? out.slice(0, 3) : FOLLOWUP_SEEDS;
+  const result = out.length ? out.slice(0, 3) : FOLLOWUP_SEEDS;
+  state._followupsMsgs = msgs;
+  state._followupsCache = result;
+  return result;
 }
 // Retry the last assistant turn: drop it and re-send the preceding user message.
 function retryLastTurn() {
@@ -2281,6 +2356,11 @@ async function sendChat(textArg) {
       agentId: state.selectedAgent,
       model: state.selectedModel || undefined,
       cwd: state.chatCwd || undefined,
+      // Non-resume agents receive a flattened transcript (tool parts become text summaries).
+      // Claude-code uses --resume and ignores this array; it is only used by direct/ACP agents.
+      // NOTE: only m.content (or its text equivalent) is sent here - tool_use/tool_result
+      // parts are intentionally flattened to text so non-claude-code agents receive a
+      // readable transcript rather than raw API objects they cannot process.
       messages: state.chat.messages.slice(0, -1).map(m => ({ role: m.role, content: m.content || messageToText(m) })),
       signal: ctrl.signal,
       // Only claude-code consumes a resume sid; never forward a stale one to
@@ -2382,7 +2462,8 @@ function reconnectAlert() {
   });
 }
 
-// Humanize a millisecond span (1m 30s scale words, no glyphs).
+// Inline fallback for the fmtDuration kit export (line 11 references humanizeMs
+// as the local fallback when the kit does not export fmtDuration yet).
 function humanizeMs(ms) {
   if (ms == null || !isFinite(ms) || ms < 0) return '';
   const s = Math.round(ms / 1000);
@@ -2395,14 +2476,16 @@ function humanizeMs(ms) {
 function sessionDuration() {
   const ts = (state.events || []).map(e => e.ts).filter(Boolean);
   if (ts.length < 2) return '';
-  return humanizeMs(ts.reduce((a, b) => b > a ? b : a, ts[0]) - ts.reduce((a, b) => b < a ? b : a, ts[0]));
+  return fmtDuration(ts.reduce((a, b) => b > a ? b : a, ts[0]) - ts.reduce((a, b) => b < a ? b : a, ts[0]));
 }
 
-// Event-type filter predicate (all | text | tool | errors).
+// Event-type filter predicate (all | text | tool | errors | thinking).
 function eventMatchesFilter(e, f) {
   if (f === 'tool') return e.type === 'tool_use' || e.type === 'tool_result';
   if (f === 'errors') return !!e.isError;
-  if (f === 'text') return !e.isError && e.type !== 'tool_use' && e.type !== 'tool_result';
+  if (f === 'thinking') return e.type === 'thinking';
+  // text excludes thinking events so they don't appear under a non-dedicated filter.
+  if (f === 'text') return !e.isError && e.type !== 'tool_use' && e.type !== 'tool_result' && e.type !== 'thinking';
   return true;
 }
 
@@ -2493,6 +2576,7 @@ function historyMain() {
       { id: 'text', label: 'text' },
       { id: 'tool', label: 'tools' },
       { id: 'errors', label: 'errors' },
+      { id: 'thinking', label: 'thinking' },
     ],
     selected: ef,
     onSelect: (id) => { state.eventFilter = id && id.id ? id.id : id; render(); },
@@ -2516,6 +2600,7 @@ function historyMain() {
       { label: 'turns', value: String(sess?.userTurns ?? evCounters.turns) },
       { label: 'tools', value: String(evCounters.tools) },
       { label: 'errors', value: String(evCounters.errors) },
+      sess && sess.cost != null ? { label: 'cost', value: '$' + Number(sess.cost).toFixed(4) } : null,
     ].filter(Boolean),
   });
   if (filteredEvents.length === 0) {
@@ -2541,7 +2626,7 @@ function historyMain() {
         render();
       }, children: allExpanded ? 'collapse shown' : 'expand shown' }),
     hiddenCount > 0
-      ? Btn({ key: 'older', onClick: () => { state.eventsLimit += 300; render(); }, children: 'load ' + Math.min(300, hiddenCount) + ' older (' + hiddenCount + ' hidden)' })
+      ? Btn({ key: 'older', onClick: () => { const added = Math.min(300, hiddenCount); state.eventsLimit += 300; announce('loaded ' + added + ' more events'); render(); }, children: 'load ' + Math.min(300, hiddenCount) + ' older (' + hiddenCount + ' hidden)' })
       : null,
   );
   return [
@@ -2564,16 +2649,17 @@ function historyMain() {
           const tool = e.tool ? ' · tool: ' + e.tool : '';
           const errMark = e.isError ? ' · error' : '';
           const raw = e.text || '';
-          const text = raw.replace(/\s+/g, ' ').trim();
-          const typePrefix = e.type === 'tool_result' ? '(result) ' : (e.type === 'tool_use' ? '(tool call) ' : '');
+          const text = raw.replace(/\s+/g, ' ').trim() || (e.type === 'tool_use' && e.toolInput ? toolLabel(e.toolInput) : '');
+          const toolNamePrefix = (e.type === 'tool_use' && e.tool) ? e.tool + ': ' : '';
+          const typePrefix = e.type === 'tool_result' ? '(result) ' : (e.type === 'tool_use' ? ('(tool call) ' + toolNamePrefix) : '');
           const expanded = state.expandedEvents.has(key);
           // 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' : (e.type === 'tool_use' ? 'flame' : 'green');
+          // flame = error, purple = tool activity, green = normal turn.
+          const rail = e.isError ? 'flame' : (e.type === 'tool_use' || e.type === 'tool_result' ? 'purple' : 'green');
           // When the session was opened from a search hit, window the collapsed
           // title AROUND the first query match (a match at char 5000 would
           // otherwise be invisible behind the 0-220 slice).
@@ -2660,6 +2746,8 @@ function resumeInChat(sess, { fromHash = false } = {}) {
   // Load prior turns from history so the user can re-read context inline.
   const sidToLoad = state.chat.resumeSid;
   if (sidToLoad) {
+    state.chat.loadingTranscript = true;
+    render();
     B.getSessionEvents(state.backend, sidToLoad).then(evs => {
       // Only populate if still on the same resume (user may have switched).
       if (state.chat.resumeSid !== sidToLoad || state.chat.messages.length) return;
@@ -2667,17 +2755,20 @@ function resumeInChat(sess, { fromHash = false } = {}) {
       for (const e of (evs || []).slice(-50)) {
         if (e.type === 'human' || e.role === 'user') {
           const text = e.text || e.content || '';
-          if (text) msgs.push({ id: 'rh' + e.ts, role: 'user', content: text, time: e.ts });
+          if (text) msgs.push({ id: 'rh' + e.ts, role: 'user', content: text, time: e.ts, historical: true });
         } else if (e.type === 'assistant' || e.role === 'assistant') {
           const text = e.text || '';
-          if (text) msgs.push({ id: 'ra' + e.ts, role: 'assistant', content: '', time: e.ts, parts: [{ kind: 'md', text }] });
+          if (text) msgs.push({ id: 'ra' + e.ts, role: 'assistant', content: '', time: e.ts, parts: [{ kind: 'md', text }], historical: true });
         }
       }
-      if (msgs.length && state.chat.resumeSid === sidToLoad && !state.chat.messages.length) {
+      if (state.chat.resumeSid === sidToLoad && !state.chat.messages.length) {
         state.chat.messages = msgs;
-        render();
       }
-    }).catch(() => {}); // history may not be available; silent fail
+    }).catch(() => {}) // history may not be available; silent fail
+    .finally(() => {
+      if (state.chat.resumeSid === sidToLoad) state.chat.loadingTranscript = false;
+      render();
+    });
   }
 }
 
@@ -2734,7 +2825,7 @@ function runningPanel() {
         // unkeyed one crashes webjsx applyDiff "reading 'key'").
         return h('div', { key: 'run' + r.sessionId, class: 'resume-banner', role: 'group' },
           h('span', { key: 'rd-' + r.sessionId, class: 'status-dot-disc ' + (isStopping ? 'status-dot-connecting' : 'status-dot-live'), 'aria-hidden': 'true' }),
-          h('span', { key: 'rl-' + r.sessionId, class: 'lede' }, agentName + (r.model ? ' · ' + r.model : '') + (elapsedMs ? ' · ' + fmtDuration(elapsedMs) : '') + (r.cwd ? ' · ' + r.cwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : '')),
+          h('span', { key: 'rl-' + r.sessionId, class: 'lede' }, agentName + (r.model ? ' · ' + r.model : '') + (elapsedMs ? ' · ' + fmtDuration(elapsedMs) : '') + (r.cwd ? ' · ' + pathBasename(r.cwd) : '')),
           Btn({ key: 'open' + r.sessionId, onClick: () => navTo('live'), children: 'open in live' }),
           Btn({ key: 'stop' + r.sessionId, disabled: isStopping, onClick: () => stopActiveChat(r.sessionId), children: isStopping ? 'stopping…' : 'stop' }));
       }),
@@ -2742,107 +2833,6 @@ function runningPanel() {
   });
 }
 
-function historySide() {
-  const searching = !!state.searchHits;
-  const sessionsView = visibleSessions();
-  const limit = state.sessionsLimit;
-  const visible = searching ? state.searchHits.results.slice(0, 60) : sessionsView.slice(0, limit);
-  const truncatedBy = searching ? Math.max(0, state.searchHits.results.length - 60) : Math.max(0, sessionsView.length - limit);
-  const rows = searching
-    ? visible.map((r, i) =>
-        Row({
-          // sid can repeat across hits, so key on sid+position; rank is the
-          // absolute result position (stable across the 60-row slice).
-          key: 'sr-' + (r.sid || '?') + '-' + i,
-          rank: String(i + 1).padStart(3, '0'),
-          title: r.snippet || '(no snippet)',
-          highlight: state.searchQ || undefined,
-          sub: (projectLabel(r.project) || '?') + ' · ' + (r.role || '?') + (r.tool ? ' · ' + r.tool : '') + (r.ts ? ' · ' + fmtRelTime(r.ts) : ''),
-          // Rail carries the same semantics as session rows: error > subagent > normal.
-          rail: r.isError ? 'flame' : (r.isSubagent ? 'purple' : 'green'),
-          // 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) =>
-        Row({
-          key: 'sess' + s.sid,
-          rank: String(i + 1).padStart(3, '0'),
-          // Subagent is conveyed by the purple rail, not a "- " text prefix.
-          title: projectLabel(s.title) || projectLabel(s.project) || s.sid,
-          // Always show the error count so 0 reads as "no errors", not "untracked".
-          sub: fmtRelTime(s.last) + ' · ' + (s.events || 0) + ' ev · ' + (s.tools || 0) + ' tools · ' + (s.errors || 0) + ' err',
-          rail: sessionErrorDense(s) ? 'flame' : (s.isSubagent ? 'purple' : 'green'),
-          active: s.sid === state.selectedSid,
-          onClick: () => loadSession(s.sid),
-        })
-      );
-  const subagentCount = (Array.isArray(state.sessions) ? state.sessions : []).filter(s => s.isSubagent).length;
-  const projects = uniqueProjects();
-
-  return [
-    runningPanel(),
-    Panel({
-      title: searching
-        ? 'matches · ' + (state.searchHits.results?.length || 0)
-        : ('sessions · ' + sessionsView.length + (subagentCount && !state.showSubagents ? ' (+'+subagentCount+' sub)' : '')),
-      children: [
-        SearchInput({
-          key: 'searchInput',
-          // 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(); },
-        }),
-        state.searchBusy
-          ? h('div', { key: 'searchbusy', class: 'lede empty-state empty-state--inline', 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 })
-          : null,
-        searching && !state.searchBusy && !state.searchHits.error && (state.searchHits.results || []).length === 0
-          ? h('p', { key: 'nomatch', class: 'lede empty-state empty-state--inline' }, 'no matches for "' + state.searchQ + '"')
-          : null,
-        state.searchQ.trim().length === 1
-          ? h('p', { key: 'min2', class: 'lede empty-state empty-state--inline' }, 'type at least 2 characters to search')
-          : null,
-        state.searchQ
-          ? Btn({ key: 'clearq', onClick: () => { state.searchQ = ''; state.searchHits = null; state.searchBusy = false; writeHash(); render(); }, children: 'clear search' })
-          : null,
-        !searching && projects.length > 1
-          ? h('div', { key: 'projfilter', class: 'pill-row', role: 'group', 'aria-label': 'Filter sessions by project' },
-              pillButton('allp', 'all', !state.projectFilter, 'Show all projects', () => { state.projectFilter = ''; writeHash(); render(); }),
-              ...projects.slice(0, 8).map(([name, count]) =>
-                pillButton('p'+name, truncate(projectLabel(name), 14, 20) + ' (' + count + ')', state.projectFilter === name, name, () => { state.projectFilter = state.projectFilter === name ? '' : name; writeHash(); render(); })))
-          : null,
-        !searching && subagentCount
-          ? h('div', { key: 'subtog', class: 'lede subagent-toggle' },
-              Checkbox({
-                checked: state.showSubagents,
-                label: 'show subagents (' + (state.showSubagents ? subagentCount + ' shown' : subagentCount + ' hidden') + ')',
-                onChange: (v) => { state.showSubagents = v; render(); },
-              }))
-          : null,
-        state.historyError
-          ? h('p', { key: 'err', class: 'lede field-error', role: 'alert' }, state.historyError)
-          : (rows.length ? h('div', { key: 'rows' }, ...rows) : h('p', { key: 'empty', class: 'lede empty-state' }, 'no sessions yet')),
-        !searching && truncatedBy > 0
-          ? Btn({ key: 'more', onClick: () => { state.sessionsLimit += 60; render(); }, children: 'show '+Math.min(60, truncatedBy)+' more ('+truncatedBy+' hidden)' })
-          : null,
-        // 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)')
-          : null,
-      ],
-    }),
-  ].filter(Boolean);
-}
-
 // --- settings ---
 function isValidUrl(s) {
   if (!s) return true; // blank = same-origin is valid
@@ -2865,6 +2855,13 @@ function normalizeBackend(s) {
 
 async function saveBackend() {
   if (!isValidUrl(state.backendDraft)) return;
+  // Block a mid-stream backend switch: the in-flight fetch is bound to the old
+  // origin and will error or produce split state if the backend changes under it.
+  if (state.chat.busy) {
+    state.backendError = 'A chat is in progress - stop it before switching backends.';
+    render();
+    return;
+  }
   // Re-submitting the current URL (e.g. after a failed health check) re-runs
   // the health probe and shows connecting… so the user gets visible feedback.
   if (state.backendDraft === state.backend) { state.backendStatus = 'connecting'; render(); await recheckHealth(); return; }
@@ -2971,6 +2968,9 @@ function settingsMain() {
             state.backendDraft = v;
             // The armed confirmation refers to a different value now - disarm.
             if (state.confirmingBackend !== undefined && state.confirmingBackend !== v) state.confirmingBackend = undefined;
+            // Clear stale probe results so the old error doesn't persist while typing.
+            state.backendError = undefined;
+            if (state.backendStatus === 'failed') state.backendStatus = undefined;
             render();
           },
         }),
@@ -3021,7 +3021,7 @@ function serverPanel() {
     title: 'server',
     children: [
       h('div', { key: 'sv', class: 'lede' }, 'version: ' + (hh.version ? 'v' + hh.version : 'unknown')),
-      h('div', { key: 'sup', class: 'lede' }, 'uptime: ' + (upMs != null ? humanizeMs(upMs) : 'unknown')),
+      h('div', { key: 'sup', class: 'lede' }, 'uptime: ' + (upMs != null ? fmtDuration(upMs) : 'unknown')),
       h('div', { key: 'swc', class: 'lede' }, 'connected clients: ' + (wsClients != null ? wsClients : 'unknown')),
       h('div', { key: 'spd', class: 'lede' }, 'projects folder: ' + (hh.projectsDir || 'unknown')),
       roots.length
@@ -3113,6 +3113,7 @@ function agentsPanel() {
     // 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 agentgui-field-mb' }, 'ACP agents start on demand and restart automatically; selecting one launches it.') : null,
+    h('div', { key: 'agrefreshrow', class: 'agentgui-field-mb' }, Btn({ key: 'agrefresh', onClick: () => loadAgents(), children: 'refresh' })),
     ...(state.agents.length
       ? state.agents.map((a, i) => {
           const acp = acpStatusFor(a.id);
@@ -3140,6 +3141,9 @@ function agentsPanel() {
             // click, no button role) instead of looking clickable but doing nothing.
             state: usable ? 'default' : 'disabled',
             onClick: usable ? () => { navTo('chat'); selectAgent(a.id); } : undefined,
+            right: (acp && !acp.healthy)
+              ? [Btn({ key: 'acprestart', onClick: (e) => { e.stopPropagation(); B.restartAcpAgent(state.backend, a.id).then(() => loadAgents()); }, children: 'restart' })]
+              : undefined,
           });
         })
       // The empty array means one of three things; never let an in-flight load
@@ -3158,6 +3162,11 @@ function agentsPanel() {
 
 // --- data ---
 async function refreshHistory() {
+  // Guard against concurrent calls: a slow first fetch followed by a polling
+  // trigger would otherwise stack two in-flight requests; the second would
+  // overwrite state mid-render with a stale response.
+  if (state._historyFetching) return;
+  state._historyFetching = true;
   // Warmup copy: the FIRST sessions fetch can sit behind ccsniff's 30-90s
   // JSONL walk; after 5s swap the loading copy to indexing language.
   const firstLoad = !state._historyLoadedOnce;
@@ -3171,6 +3180,7 @@ async function refreshHistory() {
     // 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._sessionGroupsCache = null;
     // Bound the live tally: drop entries with no activity in 24h and cap the
     // Map at ~200 most-recent sids (a long-lived tab otherwise accumulates
     // every sid ever seen, and dead entries could resurrect wrong externals).
@@ -3201,11 +3211,16 @@ async function refreshHistory() {
     // render-stack string and never clear), so render() lives outside this try.
     state.historyError = errText(e);
     console.warn('history fetch failed:', e.message);
+  } finally {
+    state._historyFetching = false;
+    if (slowTimer) clearTimeout(slowTimer);
+    render();
   }
-  if (slowTimer) clearTimeout(slowTimer);
-  render();
 }
 const debouncedRefreshHistory = debounce(refreshHistory, 500);
+// Debounced files filter: toLowerCase() on every entry runs on every keystroke;
+// 150ms coalesces rapid typing into one filter pass (perf-003).
+const debouncedFilesFilter = debounce((v) => { state.files.filter = v; state.files.shown = null; if (state.tab === 'files') writeHash(); render(); }, 150);
 
 async function runSearch() {
   const q = state.searchQ.trim();
@@ -3322,6 +3337,7 @@ async function loadAgents() {
   state.agentsLoading = true;
   try {
     state.agents = await B.listAgents(state.backend);
+    state.sortedAgentsCache = null;  // invalidate memoized sort when agents list changes
     state.agentsLoading = false;
     // 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,
@@ -3405,7 +3421,10 @@ async function init() {
     // navTo - loadDir sets loading=true synchronously, so navTo's default
     // loadDir('') guard skips and the two never race. Once the listing
     // resolves, restore the file= preview on top of it.
-    if (bootTab === 'files' && hp.dir) loadDir(hp.dir, { fromHash: true }).then(() => restoreFileFromHash(hp.file));
+    if (bootTab === 'files' && hp.dir) {
+      if (hp.filter) state.files.filter = hp.filter;
+      loadDir(hp.dir, { fromHash: true }).then(() => restoreFileFromHash(hp.file));
+    }
     if (bootTab === 'history' && hp.q) state.searchQ = hp.q;
     if (bootTab === 'history' && hp.project) state.projectFilter = hp.project;
     navTo(bootTab, { push: false });
@@ -3485,6 +3504,7 @@ window.addEventListener('popstate', () => {
   }
   if (tab === 'files') {
     const cur = state.files && state.files.path;
+    if (hp.filter !== undefined && hp.filter !== null) state.files.filter = hp.filter || '';
     if (hp.dir && hp.dir !== cur) {
       // Restore the file= preview only once the directory listing resolves
       // (the entry object lives in state.files.entries).
@@ -3586,6 +3606,13 @@ window.addEventListener('keydown', (e) => {
     return;
   }
   if (e.key === '?') { state.showShortcuts = !state.showShortcuts; render(); return; }
+  // Left/Right: step through file previews (documented in SHORTCUTS).
+  if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && state.tab === 'files' && state.files.preview) {
+    const { prev, next } = previewNeighbours();
+    const target = e.key === 'ArrowLeft' ? prev : next;
+    if (target) { e.preventDefault(); openPreview(target); }
+    return;
+  }
 });
 
 // A file dropped anywhere outside a DropZone must never navigate the browser