agentgui 1.0.940 → 1.0.942

package/site/app/js/app.js

@@ -31,12 +31,27 @@ const state = {
 };
 
 function readHash() {
-  const m = (location.hash || '').match(/sid=([^&]+)/);
-  return m ? decodeURIComponent(m[1]) : null;
+  const hash = location.hash || '';
+  const sidM = hash.match(/sid=([^&]+)/);
+  const tabM = hash.match(/tab=([^&]+)/);
+  return {
+    sid: sidM ? decodeURIComponent(sidM[1]) : null,
+    tab: tabM ? decodeURIComponent(tabM[1]) : null,
+  };
 }
-function writeHash(sid) {
-  const h = sid ? '#sid=' + encodeURIComponent(sid) : '';
-  if (location.hash !== h) history.replaceState(null, '', location.pathname + location.search + h);
+function buildHash(tab, sid) {
+  const parts = [];
+  if (tab && tab !== 'chat') parts.push('tab=' + encodeURIComponent(tab));
+  if (sid) parts.push('sid=' + encodeURIComponent(sid));
+  return parts.length ? '#' + parts.join('&') : '';
+}
+function writeHash(sid, { push = false } = {}) {
+  const h = buildHash(state.tab, sid);
+  const url = location.pathname + location.search + h;
+  if (location.hash === h) return;
+  // pushState for session selection so Back returns to the session list;
+  // replaceState for tab-only changes.
+  (push ? history.pushState : history.replaceState).call(history, null, '', url);
 }
 function fmtRelTime(ts) {
   if (!ts) return '';
@@ -55,7 +70,8 @@ function scheduleRender() {
   requestAnimationFrame(() => { renderScheduled = false; render(); });
 }
 
-function isNarrow() { return typeof window !== 'undefined' && window.innerWidth < 768; }
+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;
@@ -66,6 +82,9 @@ function debounce(fn, ms) {
   return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
 }
 
+function lsSet(k, v) { try { localStorage.setItem(k, v); } catch {} }
+function lsRemove(k) { try { localStorage.removeItem(k); } catch {} }
+
 function pillButton(key, label, active, title, onClick) {
   return h('button', {
     key,
@@ -79,8 +98,11 @@ function pillButton(key, label, active, title, onClick) {
 
 function scrollChatToBottom() {
   requestAnimationFrame(() => {
-    const el = document.querySelector('#agentgui-main') || document.querySelector('[role="main"]') || document.getElementById('app');
-    const scroller = el?.querySelector('[data-chat-scroll]') || el;
+    // The design system's chat scroll container is .chat-thread; fall back to
+    // the main region only if it's not mounted yet.
+    const scroller = document.querySelector('.chat-thread')
+      || document.querySelector('#agentgui-main')
+      || document.getElementById('app');
     if (scroller) scroller.scrollTop = scroller.scrollHeight;
   });
 }
@@ -116,29 +138,64 @@ function agentAvailable(id) { const a = agentById(id); return !a || a.available
 function navTo(tab) {
   const prev = state.tab;
   state.tab = tab;
+  // Live history SSE is only needed on the history tab; active-chat polling
+  // runs globally (started at boot) so running chats show on every tab.
   if (tab === 'history') {
     refreshHistory();
     openLiveStream();
-    startActivePolling();
   } else if (prev === 'history') {
     closeLiveStream();
-    stopActivePolling();
   }
+  writeHash(state.selectedSid && tab === 'history' ? state.selectedSid : null);
   render();
+  // Move focus into the new region for keyboard/AT users.
+  requestAnimationFrame(() => {
+    syncAriaCurrent();
+    const region = document.querySelector('#agentgui-main');
+    if (!region) return;
+    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
+    // 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', '');
+    try { target.focus({ preventScroll: true }); } catch {}
+    const clear = () => { target.removeAttribute('data-prog-focus'); target.removeEventListener('blur', clear); };
+    target.addEventListener('blur', clear);
+  });
+}
+
+// The DS Topbar derives aria-current from href↔location.hash matching, which
+// drifts from our hash-based active tab (e.g. aria-current lands on "settings"
+// while we're on "chat"). Re-assert aria-current on the actually-active tab.
+function syncAriaCurrent() {
+  const links = document.querySelectorAll('.app-topbar nav a');
+  links.forEach((a) => {
+    const isActive = a.classList.contains('active');
+    if (isActive) a.setAttribute('aria-current', 'page');
+    else a.removeAttribute('aria-current');
+  });
 }
 
 async function refreshActive() {
-  state.active = await B.listActiveChats(state.backend);
+  try { state.active = await B.listActiveChats(state.backend); } catch { return; }
   render();
 }
 function startActivePolling() {
   if (state.activeTimer) return;
   refreshActive();
-  state.activeTimer = setInterval(refreshActive, 3000);
+  // Small jitter so many tabs don't hit the server in lockstep.
+  state.activeTimer = setInterval(refreshActive, 3000 + Math.floor(Math.random() * 600));
 }
 function stopActivePolling() {
   if (state.activeTimer) { clearInterval(state.activeTimer); state.activeTimer = null; }
 }
+
+// Re-render once a minute so relative timestamps ("5s ago") don't sit frozen
+// between events. Cheap: scheduleRender coalesces via rAF.
+let _relTick = null;
+function startRelTimeTick() { if (!_relTick) _relTick = setInterval(() => scheduleRender(), 30000); }
 async function stopActiveChat(sid) {
   try { await B.cancelChat(state.backend, sid); } catch {}
   refreshActive();
@@ -158,6 +215,8 @@ function openLiveStream() {
       } else if (kind === 'event' && data) {
         if (state.selectedSid && data.sid === state.selectedSid) {
           state.events.push(data);
+          // Cap retained events so a long live session can't grow unbounded.
+          if (state.events.length > 2000) state.events.splice(0, state.events.length - 2000);
         }
         const arr = Array.isArray(state.sessions) ? state.sessions : [];
         const sess = arr.find(s => s.sid === data.sid);
@@ -167,11 +226,13 @@ function openLiveStream() {
           if (data.type === 'tool_use') sess.tools = (sess.tools || 0) + 1;
           if (data.isError) sess.errors = (sess.errors || 0) + 1;
         } else {
-          refreshHistory();
+          // Unknown session: a burst of events for a new session would trigger
+          // a full session-list refetch per event — debounce it into one.
+          debouncedRefreshHistory();
           return;
         }
       } else if (kind === 'conversation') {
-        refreshHistory();
+        debouncedRefreshHistory();
         return;
       } else if (kind === 'error' && data) {
         state.live.error = data.error || 'stream error';
@@ -208,12 +269,21 @@ 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;
-  const dot = h('span', { key: 'dot', class: 'status-dot' + (dotLive ? ' status-dot-live' : ''), role: 'status', 'aria-live': 'polite' }, dotText);
+  // Split the leading status glyph (● ◌ ○) from the words: glyph is decorative
+  // (aria-hidden), only the text is announced, so AT reads "live" not "black circle live".
+  const glyphMatch = dotText.match(/^([●◌○])\s*(.*)$/);
+  const dotGlyph = glyphMatch ? glyphMatch[1] : '';
+  const dotLabel = glyphMatch ? glyphMatch[2] : dotText;
+  // When live, the CSS .status-dot-live::before draws the (pulsing) dot, so the
+  // literal glyph would render a second dot — only emit the glyph when NOT live.
+  const dot = h('span', { key: 'dot', class: 'status-dot' + (dotLive ? ' status-dot-live' : ''), role: 'status', 'aria-live': 'polite' },
+    (!dotLive && dotGlyph) ? h('span', { key: 'dg', 'aria-hidden': 'true' }, dotGlyph + ' ') : null,
+    h('span', { key: 'dl' }, dotLabel));
 
   const topbar = Topbar({
     brand: 'agentgui',
     leaf: state.tab,
-    items: [['chat', '#'], ['history', '#'], ['settings', '#']],
+    items: [['chat', buildHash('chat', null) || '#'], ['history', buildHash('history', null)], ['settings', buildHash('settings', null)]],
     active: state.tab,
     onNav: (label) => navTo(label),
   });
@@ -272,16 +342,17 @@ function view() {
     right: [agentLabel],
   });
 
+  // The design system now owns the full-height column + inner scroll for
+  // .app-main, so chat just needs to be a flex column that fills it.
   const mainStyle = state.tab === 'chat'
-    ? 'min-height:0;height:100%;display:flex;flex-direction:column'
-    : 'min-height:0;height:100%;overflow:auto';
+    ? 'min-height:0;display:flex;flex-direction:column;flex:1'
+    : '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' })
     : 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));
-  // settings reads better centered in a measure; chat + history use full width.
-  return AppShell({ topbar, crumb, side, main, status, narrow: state.tab === 'settings' });
+  return AppShell({ topbar, crumb, side, main, status, narrow: false });
 }
 
 function mainContent() {
@@ -306,6 +377,20 @@ function toolSummary(block) {
   return '⌘ ' + name + (arg ? ' · ' + String(arg).slice(0, 120) : '');
 }
 
+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 ? '⚠ ' : '') + s.slice(0, 160);
+}
+
+function errText(e) {
+  if (e == null) return 'unknown error';
+  if (typeof e === 'string') return e;
+  if (e.message) return e.message;
+  try { return JSON.stringify(e); } catch { return String(e); }
+}
+
 function chatMain() {
   const lastIdx = state.chat.messages.length - 1;
   const agentName = agentById(state.selectedAgent)?.name || state.selectedAgent || 'agent';
@@ -332,7 +417,7 @@ function chatMain() {
     : (!agentAvailable(state.selectedAgent) ? agentName + ' is not installed' : 'message…');
   const composer = ChatComposer({
     value: state.chat.draft,
-    disabled: state.chat.busy || !canSend(),
+    disabled: !canSend(),
     placeholder,
     onInput: (v) => { state.chat.draft = v; render(); },
     onSend: (v) => { state.chat.draft = v; sendChat(); },
@@ -341,36 +426,79 @@ function chatMain() {
   const banners = [];
   if (state.chat.resumeSid) {
     banners.push(h('div', { key: 'rb', class: 'resume-banner', role: 'status' },
-      h('span', { class: 'lede' }, '▶ resuming session ' + state.chat.resumeSid.slice(0, 8) + '… via --resume'),
-      Btn({ key: 'rclr', onClick: () => { state.chat.resumeSid = null; render(); }, children: '× clear' })));
+      h('span', { key: 'rbtxt', class: 'lede' }, '▶ resuming session ' + state.chat.resumeSid.slice(0, 8) + '… via --resume'),
+      Btn({ key: 'rclr', onClick: () => { state.chat.resumeSid = null; state.chat.resumeNote = null; render(); }, children: '× clear' })));
+    if (state.chat.resumeNote) {
+      banners.push(Alert({ key: 'rnote', kind: 'info', title: 'Agent switched', children: state.chat.resumeNote }));
+    }
   }
-  banners.push(h('div', { key: 'cwdb', class: 'resume-banner', role: 'group', 'aria-label': 'Working directory' },
-    h('span', { class: 'lede' }, state.chatCwd ? '▣ cwd: ' + state.chatCwd : '▣ cwd: server default'),
-    Btn({ key: 'cwdset', onClick: () => {
-      const v = prompt('Working directory for new chats (absolute path; blank = server default):', state.chatCwd || '');
-      if (v === null) return;
-      state.chatCwd = v.trim();
-      if (state.chatCwd) localStorage.setItem('agentgui.cwd', state.chatCwd); else localStorage.removeItem('agentgui.cwd');
-      render();
-    }, children: state.chatCwd ? 'change' : 'set' }),
-    state.chatCwd ? Btn({ key: 'cwdclr', onClick: () => { state.chatCwd = ''; localStorage.removeItem('agentgui.cwd'); render(); }, children: '× default' }) : null));
+  banners.push(cwdBanner());
   if (state.selectedAgent && !agentAvailable(state.selectedAgent)) {
     banners.push(Alert({ key: 'unavail', kind: 'warn', title: agentName + ' is not installed',
       children: 'This agent\'s CLI was not found on the server. Pick another agent or install it.' }));
   }
+  if (state.confirmingNewChat) {
+    banners.push(Alert({ key: 'confnew', kind: 'warn', title: 'Clear chat history?',
+      children: [
+        h('span', { key: 'cntxt' }, 'This cannot be undone. '),
+        Btn({ key: 'cnyes', danger: true, onClick: newChat, children: 'clear' }),
+        Btn({ key: 'cnno', onClick: () => { state.confirmingNewChat = false; render(); }, children: 'cancel' })] }));
+  }
+  // Last stream error surfaced as a proper Alert instead of raw JSON in the bubble.
+  const lastErr = state.chat.messages.length ? state.chat.messages[state.chat.messages.length - 1].error : null;
+  if (lastErr && !state.chat.busy) {
+    banners.push(Alert({ key: 'chaterr', kind: 'error', title: 'Stream error', children: lastErr }));
+  }
   return [
+    offlineBanner(),
     ...banners,
     Chat({
       title: agentName + (state.selectedModel ? ' · ' + state.selectedModel : '') + (state.chat.resumeSid ? ' · resume' : ''),
-      sub: state.chat.busy ? 'streaming…' : undefined,
+      // Explicit human-readable sub; the DS default ("NN msgs", zero-padded)
+      // leaks an event-list style into chat. Hide it when there are no messages
+      // (the empty-state already says "no messages yet").
+      sub: state.chat.busy
+        ? 'streaming…'
+        : (state.chat.messages.length
+            ? state.chat.messages.length + (state.chat.messages.length === 1 ? ' message' : ' messages')
+            : ''),
       messages: msgs,
       composer,
     }),
   ].filter(Boolean);
 }
 
+function offlineBanner() {
+  if (state.health.status === 'ok' || state.health.status === 'unknown') return null;
+  return Alert({ key: 'offline', kind: 'error', title: 'Backend unreachable',
+    children: 'agentgui can\'t reach the server (' + (state.health.error || state.health.status) + '). Chat and history actions will fail until it reconnects.' });
+}
+
+function cwdBanner() {
+  if (state.cwdEditing) {
+    return h('div', { key: 'cwdb', class: 'resume-banner', role: 'group', 'aria-label': 'Set working directory' },
+      TextField({ key: 'cwdfield', label: 'working directory (blank = server default)', value: state.cwdDraft ?? state.chatCwd ?? '',
+        placeholder: 'absolute path', onInput: (v) => { state.cwdDraft = v; } }),
+      Btn({ key: 'cwdsave', primary: true, onClick: () => {
+        state.chatCwd = (state.cwdDraft ?? '').trim();
+        if (state.chatCwd) lsSet('agentgui.cwd', state.chatCwd); else lsRemove('agentgui.cwd');
+        state.cwdEditing = false; state.cwdDraft = undefined; render();
+      }, children: 'save' }),
+      Btn({ key: 'cwdcancel', onClick: () => { state.cwdEditing = false; state.cwdDraft = undefined; render(); }, children: 'cancel' }));
+  }
+  return h('div', { key: 'cwdb', class: 'cwd-bar', role: 'group', 'aria-label': 'Working directory' },
+    h('span', { key: 'cwdtxt', class: 'lede cwd-bar-text', title: state.chatCwd || 'server default working directory' },
+      state.chatCwd ? '▣ ' + truncate(state.chatCwd, 28, 60) : '▣ cwd: server default'),
+    h('button', { key: 'cwdset', type: 'button', class: 'cwd-bar-btn', onClick: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; render(); } }, state.chatCwd ? 'change' : 'set'),
+    state.chatCwd ? h('button', { key: 'cwdclr', type: 'button', class: 'cwd-bar-btn', onClick: () => { state.chatCwd = ''; lsRemove('agentgui.cwd'); render(); } }, '× default') : null);
+}
+
 function newChat() {
-  if (state.chat.messages.length && !confirm('Clear chat history? This cannot be undone.')) return;
+  if (state.chat.messages.length && !state.confirmingNewChat) {
+    state.confirmingNewChat = true; render();
+    return;
+  }
+  state.confirmingNewChat = false;
   state.chat.abort?.abort();
   state.chat = { messages: [], busy: false, abort: null, draft: '', resumeSid: null };
   try { localStorage.removeItem(CHAT_KEY); } catch {}
@@ -425,10 +553,12 @@ async function sendChat() {
     })) {
       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 === 'error') { cur.content += '\n[error] ' + JSON.stringify(ev.error); render(); }
+      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 */ }
+      else if (ev.type === 'error') { cur.error = errText(ev.error); render(); }
     }
   } catch (e) {
-    if (e.name !== 'AbortError') cur.content += '\n[error] ' + e.message;
+    if (e.name !== 'AbortError') cur.error = errText(e.message);
   } finally {
     state.chat.busy = false;
     state.chat.abort = null;
@@ -439,70 +569,113 @@ async function sendChat() {
 }
 
 // ── history ────────────────────────────────────────────────────────────────
+function reconnectAlert() {
+  if (!state.live.error) return null;
+  return Alert({
+    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' })],
+  });
+}
+
 function historyMain() {
   if (!state.selectedSid) {
-    return [PageHeader({
-      title: '§ history',
-      lede: 'pick a session from the sidebar — events stream live from ccsniff /v1/history.',
-    })];
+    const count = (Array.isArray(state.sessions) ? state.sessions : []).length;
+    return [
+      reconnectAlert(),
+      PageHeader({
+        title: '§ 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('div', { key: 'ge', class: 'history-empty-glyph', 'aria-hidden': 'true' }, '§'),
+        h('p', { key: 'gt', class: 'history-empty-title' },
+          count ? 'Select a session to view its events' : 'No sessions yet'),
+        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.')),
+    ].filter(Boolean);
   }
 
   const sess = (Array.isArray(state.sessions) ? state.sessions : []).find(s => s.sid === state.selectedSid);
   const lede = sess
-    ? (sess.project || sess.cwd || '?') + ' · ' + (sess.events || 0) + ' events · ' + (sess.userTurns || 0) + ' turns · ' + fmtRelTime(sess.last)
+    ? (projectLabel(sess.project) || sess.cwd || '?') + ' · ' + (sess.events || 0) + ' events · ' + (sess.userTurns || 0) + ' turns · ' + fmtRelTime(sess.last)
     : state.selectedSid;
 
   const head = PageHeader({
-    title: '§ ' + truncate(sess?.title || state.selectedSid, 40, 80),
+    title: '§ ' + truncate(projectLabel(sess?.title) || projectLabel(sess?.project) || state.selectedSid, 40, 80),
     lede,
   });
 
-  if (!state.selectedSid) {
-    return [head, state.live.error ? Alert({
-      key: 'err',
-      kind: 'error',
-      title: 'Connection lost',
-      children: [state.live.error, ' — ', Btn({ onClick: openLiveStream, children: 'reconnect', title: 'Reconnect to history stream' })],
-    }) : null];
-  }
-
   const actions = h('div', { key: 'acts', class: 'history-actions' },
     Btn({ key: 'resume', primary: true, onClick: () => resumeInChat(sess || { sid: state.selectedSid }), children: '▶ open in chat' }),
-    Btn({ key: 'copy', onClick: () => { try { navigator.clipboard.writeText(state.selectedSid); } catch {} }, children: '⎘ copy sid' }),
+    Btn({ key: 'copy', onClick: copySid, children: copyToast || '⎘ copy sid' }),
   );
 
   if (state.events.length === 0) {
-    return [head, actions, Panel({ title: 'events', children: h('div', { key: 'loading', class: 'lede empty-state', role: 'status', 'aria-live': 'polite' }, Spinner({ key: 'spin', size: 'sm' }), 'loading events…') })];
+    // Distinguish "still loading" from "genuinely empty" so a 0-event session
+    // doesn't spin forever.
+    const body = state.eventsLoaded
+      ? h('p', { key: 'noev', class: 'lede empty-state', role: 'status' }, 'no events in this session')
+      : 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 hiddenCount = total - shown.length;
   return [
+    reconnectAlert(),
     head,
     actions,
     Panel({
-      title: state.events.length + ' events',
+      title: total + ' events' + (hiddenCount > 0 ? ' (showing last 300)' : ''),
       children: EventList({
-        items: state.events.slice(-300).map((e, i) => {
-          const idx = e.i ?? i;
+        items: shown.map((e, i) => {
+          // Stable key: prefer the server-assigned event index, else the
+          // event timestamp + position, never a bare array index (which
+          // collides between loaded and live-pushed events).
+          const key = e.i != null ? 'ev' + e.i : 'ev-' + (e.ts || 0) + '-' + (total - shown.length + i);
           const role = e.role || '?';
           const type = e.type || '?';
           const tool = e.tool ? ' · ⌘ ' + e.tool : '';
           const errMark = e.isError ? ' · ⚠' : '';
           const raw = e.text || '';
           const text = raw.replace(/\s+/g, ' ').trim();
-          const expanded = state.expandedEvents.has(idx);
+          const expanded = state.expandedEvents.has(key);
           const full = e.toolInput ? (text + '\n\n' + JSON.stringify(e.toolInput, null, 2)) : raw;
           return {
-            key: 'ev' + idx,
-            code: String(idx + 1).padStart(4, '0'),
+            key,
+            code: String(total - shown.length + i + 1).padStart(4, '0'),
             title: expanded ? (full || '(' + type + ')') : (text.slice(0, 220) || '(' + type + ')'),
             sub: new Date(e.ts).toLocaleString() + ' · ' + role + ' · ' + type + tool + errMark + (raw.length > 220 ? ' · ' + (expanded ? 'click to collapse' : 'click to expand') : ''),
-            onClick: () => { expanded ? state.expandedEvents.delete(idx) : state.expandedEvents.add(idx); render(); },
+            onClick: () => { expanded ? state.expandedEvents.delete(key) : state.expandedEvents.add(key); render(); },
           };
         }),
       }),
     }),
-  ];
+  ].filter(Boolean);
+}
+
+let copyToast = null;
+function copySid() {
+  const sid = state.selectedSid;
+  if (!sid) return;
+  const done = () => { copyToast = '✓ copied'; render(); setTimeout(() => { copyToast = null; render(); }, 1500); };
+  if (navigator.clipboard?.writeText) {
+    navigator.clipboard.writeText(sid).then(done).catch(() => { copyToast = '⚠ copy failed'; render(); setTimeout(() => { copyToast = null; render(); }, 1500); });
+  } else {
+    // Fallback for insecure (http) origins where navigator.clipboard is absent.
+    try {
+      const ta = document.createElement('textarea');
+      ta.value = sid; ta.style.position = 'fixed'; ta.style.opacity = '0';
+      document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove();
+      done();
+    } catch { copyToast = '⚠ copy failed'; render(); setTimeout(() => { copyToast = null; render(); }, 1500); }
+  }
 }
 
 function resumeInChat(sess) {
@@ -511,7 +684,13 @@ function resumeInChat(sess) {
   state.chat.resumeSid = sess?.sid || state.selectedSid;
   state.chat.messages = [];
   state.chat.draft = '';
-  // Only claude-code supports --resume by sid here.
+  // 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.';
+  } else {
+    state.chat.resumeNote = null;
+  }
   if (state.selectedAgent !== 'claude-code') selectAgent('claude-code');
   render();
 }
@@ -526,6 +705,16 @@ function visibleSessions() {
   return filtered.slice().sort((a, b) => (b.last || 0) - (a.last || 0));
 }
 
+// ccsniff derives `project` from the ~/.claude/projects dir name, which encodes
+// the cwd as a dash-joined path (e.g. "-config-workspace-agentgui"). Show the
+// last meaningful segment ("agentgui") rather than the raw slug.
+function projectLabel(project) {
+  if (!project) return '';
+  if (/[/\\]/.test(project)) return project.split(/[/\\]/).filter(Boolean).pop() || project;
+  const segs = project.split('-').filter(Boolean);
+  return segs.length ? segs[segs.length - 1] : project;
+}
+
 function uniqueProjects() {
   const arr = Array.isArray(state.sessions) ? state.sessions : [];
   const seen = new Map();
@@ -557,7 +746,7 @@ function historySide() {
         Row({
           key: 'sess' + s.sid,
           rank: String(i + 1).padStart(3, '0'),
-          title: (s.isSubagent ? '↳ ' : '') + (s.title || s.project || s.sid),
+          title: (s.isSubagent ? '↳ ' : '') + (projectLabel(s.title) || projectLabel(s.project) || s.sid),
           sub: fmtRelTime(s.last) + ' · ' + (s.events || 0) + ' ev · ' + (s.tools || 0) + ' tools' + (s.errors ? ' · ' + s.errors + ' err' : ''),
           rail: s.errors ? 'flame' : (s.isSubagent ? 'purple' : 'green'),
           active: s.sid === state.selectedSid,
@@ -577,7 +766,7 @@ function historySide() {
             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', { class: 'lede' }, '● ' + agentName + (r.model ? ' · ' + r.model : '') + ' · ' + elapsed + 's' + (r.cwd ? ' · ' + r.cwd.split('/').slice(-1)[0] : '')),
+              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' }));
           }),
         })
@@ -603,14 +792,17 @@ function historySide() {
         searching && !state.searchBusy && !state.searchHits.error && (state.searchHits.results || []).length === 0
           ? h('p', { key: 'nomatch', class: 'lede empty-state' }, 'no matches for "' + state.searchQ + '"')
           : null,
-        state.searchQ && (searching || state.searchBusy)
+        state.searchQ.trim().length === 1
+          ? h('p', { key: 'min2', class: 'lede empty-state' }, 'type at least 2 characters to search')
+          : null,
+        state.searchQ
           ? Btn({ key: 'clearq', onClick: () => { state.searchQ = ''; state.searchHits = null; state.searchBusy = false; 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 = ''; render(); }),
               ...projects.slice(0, 8).map(([name, count]) =>
-                pillButton('p'+name, truncate(name, 14, 20) + ' (' + count + ')', state.projectFilter === name, name, () => { state.projectFilter = state.projectFilter === name ? '' : name; render(); })))
+                pillButton('p'+name, truncate(projectLabel(name), 14, 20) + ' (' + count + ')', state.projectFilter === name, name, () => { state.projectFilter = state.projectFilter === name ? '' : name; render(); })))
           : null,
         !searching && subagentCount
           ? h('label', { key: 'subtog', class: 'lede subagent-toggle' },
@@ -669,6 +861,7 @@ function settingsMain() {
       title: '⌘ settings',
       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({
       title: 'backend',
       children: h('form', {
@@ -702,6 +895,7 @@ function settingsMain() {
       ]),
     }),
     agentsPanel(),
+    ]),
   ];
 }
 
@@ -749,6 +943,7 @@ async function refreshHistory() {
     render();
   }
 }
+const debouncedRefreshHistory = debounce(refreshHistory, 500);
 
 async function runSearch() {
   const q = state.searchQ.trim();
@@ -757,7 +952,7 @@ async function runSearch() {
   state.searchBusy = true;
   render();
   try {
-    state.searchHits = await B.searchHistory(state.backend, q, 50);
+    state.searchHits = await B.searchHistory(state.backend, q, 60);
   } catch (e) {
     state.searchHits = { query: q, results: [], error: e.message };
   } finally {
@@ -768,18 +963,26 @@ async function runSearch() {
 const debouncedSearch = debounce(runSearch, 300);
 
 async function loadSession(sid) {
+  // 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 = [];
-  writeHash(sid);
+  state.eventsLoaded = false;
+  state.expandedEvents = new Set();   // don't carry expansion to the new session
+  writeHash(sid, { push: true });
   render();
-  try { state.events = await B.getSessionEvents(state.backend, sid); render(); }
-  catch (e) {
+  try {
+    state.events = await B.getSessionEvents(state.backend, sid);
+    state.eventsLoaded = true;
+    render();
+  } catch (e) {
     state.events = [{
       ts: Date.now(),
       role: 'error',
       type: 'fetch',
       text: 'Failed to load session: ' + e.message + ' — retry via sidebar',
     }];
+    state.eventsLoaded = true;
     render();
   }
 }
@@ -801,13 +1004,26 @@ async function init() {
     render();
   } catch (e) { console.warn('agents fetch failed:', e.message); }
 
-  const initialSid = readHash();
+  const { sid: initialSid, tab: initialTab } = readHash();
   if (initialSid) {
     navTo('history');
     await refreshHistory();
     await loadSession(initialSid);
+  } else if (initialTab && initialTab !== state.tab) {
+    navTo(initialTab);
   }
 
+  registerWsStatusOnce();
+  startActivePolling();   // surface running chats on any tab, not just history
+  startRelTimeTick();
+}
+
+// init() runs both at boot and on every saveBackend(); registering the WS
+// status listener inside it leaked a listener per save. Register exactly once.
+let wsStatusRegistered = false;
+function registerWsStatusOnce() {
+  if (wsStatusRegistered) return;
+  wsStatusRegistered = true;
   B.onWsStatus?.((s) => {
     if (s === 'closed' || s === 'error') {
       if (state.health.status === 'ok') { state.health = { ...state.health, ws: 'reconnecting' }; render(); }
@@ -819,6 +1035,20 @@ async function init() {
 
 restoreChat();
 render = mount(document.getElementById('app'), view);
+requestAnimationFrame(syncAriaCurrent);
+
+// Re-render on resize so isNarrow()/truncate() reflect the current width
+// (they read window.innerWidth only at render time).
+window.addEventListener('resize', debounce(() => scheduleRender(), 150));
+
+// Browser Back/forward: re-sync tab + selected session from the hash.
+window.addEventListener('popstate', () => {
+  const { sid, tab } = readHash();
+  if (sid && sid !== state.selectedSid) { state.tab = 'history'; loadSession(sid); }
+  else if (!sid && tab && tab !== state.tab) navTo(tab);
+  else if (!sid && !tab && state.tab !== 'chat') navTo('chat');
+});
+
 window.__agentgui = { state, render };
 
 // Keyboard shortcuts. 'g' then c/h/s switches tabs; 'n' new chat; '/' focuses