agentgui 1.0.939 → 1.0.941

package/site/app/js/app.js

@@ -10,8 +10,11 @@ const state = {
   backendDraft: B.getBackend(),
   health: { status: 'unknown' },
   tab: 'chat',
-  models: [],
-  selectedModel: '',
+  agents: [],
+  selectedAgent: localStorage.getItem('agentgui.agent') || '',
+  agentModels: [],
+  selectedModel: localStorage.getItem('agentgui.model') || '',
+  chatCwd: localStorage.getItem('agentgui.cwd') || '',
   chat: { messages: [], busy: false, abort: null, draft: '', resumeSid: null },
   sessions: [],
   selectedSid: null,
@@ -23,15 +26,32 @@ const state = {
   sessionsLimit: 60,
   projectFilter: '',
   live: { es: null, connected: false, lastEventTs: 0, error: null, eventCount: 0, reconnects: 0 },
+  active: [],
+  activeTimer: null,
 };
 
 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 '';
@@ -50,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;
@@ -61,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,
@@ -74,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;
   });
 }
@@ -85,16 +112,74 @@ function timeNow() {
   return String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
 }
 
+async function selectAgent(id) {
+  state.selectedAgent = id;
+  localStorage.setItem('agentgui.agent', id);
+  state.agentModels = [];
+  state.selectedModel = '';
+  render();
+  const models = await B.listAgentModels(state.backend, id);
+  if (state.selectedAgent !== id) return; // changed while loading
+  state.agentModels = models;
+  const saved = localStorage.getItem('agentgui.model');
+  state.selectedModel = (saved && models.some(m => m.id === saved)) ? saved : (models[0]?.id || '');
+  render();
+}
+
+function selectModel(id) {
+  state.selectedModel = id;
+  localStorage.setItem('agentgui.model', id);
+  render();
+}
+
+function agentById(id) { return state.agents.find(a => a.id === id); }
+function agentAvailable(id) { const a = agentById(id); return !a || a.available !== false; }
+
 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();
   } else if (prev === 'history') {
     closeLiveStream();
   }
+  writeHash(state.selectedSid && tab === 'history' ? state.selectedSid : null);
   render();
+  // Move focus into the new region for keyboard/AT users.
+  requestAnimationFrame(() => {
+    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');
+    try { target.focus({ preventScroll: true }); } catch {}
+  });
+}
+
+async function refreshActive() {
+  try { state.active = await B.listActiveChats(state.backend); } catch { return; }
+  render();
+}
+function startActivePolling() {
+  if (state.activeTimer) return;
+  refreshActive();
+  // 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();
 }
 
 function openLiveStream() {
@@ -111,6 +196,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);
@@ -120,11 +207,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';
@@ -161,26 +250,50 @@ 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;
+  const dot = h('span', { key: 'dot', class: 'status-dot' + (dotLive ? ' status-dot-live' : ''), role: 'status', 'aria-live': 'polite' },
+    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),
   });
 
+  const agentOptions = state.agents.map(a => ({
+    value: a.id,
+    label: a.name + (a.available === false ? (a.npxInstallable ? ' (via npx)' : ' (not installed)') : ''),
+    disabled: a.available === false && !a.npxInstallable,
+  }));
+  const showModelPicker = state.tab === 'chat' && state.agentModels.length > 0;
+
   const crumbRight = state.tab === 'chat'
     ? [h('div', { key: 'cc', class: 'chat-controls' },
         Select({
-          key: 'modelsel',
-          value: state.selectedModel,
-          placeholder: '— model —',
-          title: 'Select AI model',
-          options: state.models.map(m => ({ value: m.id, label: m.id })),
-          onChange: (v) => { state.selectedModel = v; render(); },
+          key: 'agentsel',
+          value: state.selectedAgent,
+          placeholder: '— agent —',
+          title: 'Select coding agent',
+          options: agentOptions,
+          onChange: (v) => { selectAgent(v); },
         }),
+        showModelPicker
+          ? Select({
+              key: 'modelsel',
+              value: state.selectedModel,
+              placeholder: '— model —',
+              title: 'Select model for this agent',
+              options: state.agentModels.map(m => ({ value: m.id, label: m.name || m.id })),
+              onChange: (v) => { selectModel(v); },
+            })
+          : null,
         state.chat.busy
           ? Btn({ key: 'stop', onClick: cancelChat, children: '◼ stop', title: 'Stop streaming' })
           : Btn({ key: 'new',  onClick: newChat,    children: '+ new', title: 'Start new chat (clears history)' }),
@@ -200,15 +313,24 @@ function view() {
   // sidebar (the topbar already provides primary nav) so main content gets full width.
   const side = state.tab === 'history' ? historySide() : null;
 
+  const agentLabel = state.selectedAgent
+    ? '⌘ ' + (agentById(state.selectedAgent)?.name || state.selectedAgent) + (state.selectedModel ? ' · ' + state.selectedModel : '')
+    : '○ no agent';
   const status = Status({
     left: [state.backend || 'same-origin', ok ? '● live' : '○ offline'],
-    right: [state.selectedModel ? '⌘ ' + state.selectedModel : '○ no model'],
+    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';
-  const main = h('div', { id: 'agentgui-main', role: 'main', 'data-chat-scroll': '', class: 'agentgui-main agentgui-main-' + state.tab, style: mainStyle }, mainContent());
+    ? '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' });
 }
@@ -220,41 +342,98 @@ function mainContent() {
 }
 
 // ── chat ───────────────────────────────────────────────────────────────────
+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;
+  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 {} }
+  }
+  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';
   const msgs = state.chat.messages.map((m, i) => {
     const isAssistant = m.role === 'assistant';
     const isStreaming = state.chat.busy && i === lastIdx && isAssistant;
-    const isEmptyStreaming = isStreaming && !m.content;
+    const hasParts = Array.isArray(m.parts) && m.parts.length > 0;
+    const isEmptyStreaming = isStreaming && !m.content && !hasParts;
+    const parts = [];
+    if (m.content) parts.push({ kind: isAssistant ? 'md' : 'text', text: m.content });
+    if (hasParts) for (const p of m.parts) parts.push({ kind: 'text', text: p });
     return {
       key: m.id || String(i),
       who: isAssistant ? 'them' : 'you',
-      name: isAssistant ? (state.selectedModel || 'agent') : 'you',
+      name: isAssistant ? agentName : 'you',
       time: m.time || '',
       typing: isEmptyStreaming,
-      parts: isEmptyStreaming
-        ? undefined
-        : [{ kind: isAssistant ? 'md' : 'text', text: m.content || '' }],
+      parts: isEmptyStreaming ? undefined : (parts.length ? parts : [{ kind: 'text', text: '' }]),
     };
   });
 
+  const placeholder = !state.selectedAgent
+    ? 'choose an agent first'
+    : (!agentAvailable(state.selectedAgent) ? agentName + ' is not installed' : 'message…');
   const composer = ChatComposer({
     value: state.chat.draft,
-    disabled: state.chat.busy,
-    placeholder: state.selectedModel ? 'message…' : 'choose a model first',
+    disabled: !canSend(),
+    placeholder,
     onInput: (v) => { state.chat.draft = v; render(); },
     onSend: (v) => { state.chat.draft = v; sendChat(); },
   });
 
-  const resumeBanner = state.chat.resumeSid
-    ? h('div', { key: 'rb', class: 'resume-banner', role: 'status' },
-        h('span', { class: 'lede' }, '▶ resuming session ' + state.chat.resumeSid.slice(0, 8) + '… via claude --resume'),
-        Btn({ key: 'rclr', onClick: () => { state.chat.resumeSid = null; render(); }, children: '× clear' }))
-    : null;
+  const banners = [];
+  if (state.chat.resumeSid) {
+    banners.push(h('div', { key: 'rb', class: 'resume-banner', role: 'status' },
+      h('span', { key: 'rbtxt', class: 'lede' }, '▶ resuming session ' + state.chat.resumeSid.slice(0, 8) + '… via --resume'),
+      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(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 [
-    resumeBanner,
+    offlineBanner(),
+    ...banners,
     Chat({
-      title: (state.selectedModel || 'agent') + (state.chat.resumeSid ? ' · resume' : ''),
+      title: agentName + (state.selectedModel ? ' · ' + state.selectedModel : '') + (state.chat.resumeSid ? ' · resume' : ''),
       sub: state.chat.busy ? 'streaming…' : undefined,
       messages: msgs,
       composer,
@@ -262,56 +441,125 @@ function chatMain() {
   ].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: 'resume-banner', role: 'group', 'aria-label': 'Working directory' },
+    h('span', { class: 'lede' }, state.chatCwd ? '▣ cwd: ' + state.chatCwd : '▣ cwd: server default'),
+    Btn({ key: 'cwdset', onClick: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; render(); }, children: state.chatCwd ? 'change' : 'set' }),
+    state.chatCwd ? Btn({ key: 'cwdclr', onClick: () => { state.chatCwd = ''; lsRemove('agentgui.cwd'); render(); }, children: '× default' }) : null);
+}
+
 function newChat() {
-  if (!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 {}
   render();
 }
 
 function cancelChat() { state.chat.abort?.abort(); }
 
+const CHAT_KEY = 'agentgui.chat';
+function persistChat() {
+  try {
+    const msgs = state.chat.messages.map(m => ({ id: m.id, role: m.role, content: m.content, time: m.time, parts: m.parts }));
+    if (!msgs.length) { localStorage.removeItem(CHAT_KEY); return; }
+    localStorage.setItem(CHAT_KEY, JSON.stringify({ messages: msgs, resumeSid: state.chat.resumeSid, agent: state.selectedAgent, model: state.selectedModel }));
+  } catch {}
+}
+function restoreChat() {
+  try {
+    const raw = localStorage.getItem(CHAT_KEY);
+    if (!raw) return;
+    const saved = JSON.parse(raw);
+    if (Array.isArray(saved.messages) && saved.messages.length) {
+      state.chat.messages = saved.messages.map(m => ({ ...m, parts: Array.isArray(m.parts) ? m.parts : [] }));
+      state.chat.resumeSid = saved.resumeSid || null;
+    }
+  } catch {}
+}
+
 async function sendChat() {
   const text = (state.chat.draft || '').trim();
-  if (!text || !state.selectedModel || state.chat.busy) return;
+  if (!text || !canSend()) return;
   const t = timeNow();
   const userMsg = { id: 'u' + Date.now(), role: 'user', content: text, time: t };
-  const curMsg = { id: 'a' + (Date.now() + 1), role: 'assistant', content: '', time: t };
+  const curMsg = { id: 'a' + (Date.now() + 1), role: 'assistant', content: '', time: t, parts: [] };
   state.chat.messages = [...state.chat.messages, userMsg, curMsg];
   state.chat.draft = '';
   state.chat.busy = true;
   const ctrl = new AbortController();
   state.chat.abort = ctrl;
+  persistChat();
   render();
   scrollChatToBottom();
   const cur = state.chat.messages[state.chat.messages.length - 1];
   try {
     for await (const ev of B.streamChat(state.backend, {
-      model: state.selectedModel,
+      agentId: state.selectedAgent,
+      model: state.selectedModel || undefined,
+      cwd: state.chatCwd || undefined,
       messages: state.chat.messages.slice(0, -1).map(m => ({ role: m.role, content: m.content })),
       signal: ctrl.signal,
       resumeSid: state.chat.resumeSid || undefined,
     })) {
       if (ev.type === 'text')  { cur.content += ev.text; render(); scrollChatToBottom(); }
-      if (ev.type === 'error') { cur.content += '\n[error] ' + JSON.stringify(ev.error); render(); }
+      else if (ev.type === 'tool') { cur.parts.push(toolSummary(ev.block)); render(); scrollChatToBottom(); }
+      else if (ev.type === 'tool_result') { cur.parts.push('↳ ' + toolResultSummary(ev.block)); render(); scrollChatToBottom(); }
+      else if (ev.type === 'result') { /* terminal usage/summary block — already reflected via text */ }
+      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;
+    persistChat();
     render();
     scrollChatToBottom();
   }
 }
 
 // ── 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.',
-    })];
+    return [
+      reconnectAlert(),
+      PageHeader({
+        title: '§ history',
+        lede: 'pick a session from the sidebar — events stream live from ccsniff /v1/history.',
+      }),
+    ].filter(Boolean);
   }
 
   const sess = (Array.isArray(state.sessions) ? state.sessions : []).find(s => s.sid === state.selectedSid);
@@ -324,46 +572,73 @@ function historyMain() {
     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) => {
+        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 text = (e.text || '').replace(/\s+/g, ' ').trim();
+          const raw = e.text || '';
+          const text = raw.replace(/\s+/g, ' ').trim();
+          const expanded = state.expandedEvents.has(key);
+          const full = e.toolInput ? (text + '\n\n' + JSON.stringify(e.toolInput, null, 2)) : raw;
           return {
-            key: 'ev' + (e.i ?? i),
-            code: String((e.i ?? i) + 1).padStart(4, '0'),
-            title: text.slice(0, 220) || '(' + type + ')',
-            sub: new Date(e.ts).toLocaleString() + ' · ' + role + ' · ' + type + tool + errMark,
+            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(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) {
@@ -372,8 +647,14 @@ function resumeInChat(sess) {
   state.chat.resumeSid = sess?.sid || state.selectedSid;
   state.chat.messages = [];
   state.chat.draft = '';
-  // Default to claude-code if no model yet (only claude supports --resume by sid here).
-  if (!state.selectedModel || state.selectedModel !== 'claude-code') state.selectedModel = 'claude-code';
+  // 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();
 }
 
@@ -427,8 +708,22 @@ 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', { 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,
     Panel({
       title: searching
         ? 'matches · ' + (state.searchHits.results?.length || 0)
@@ -441,11 +736,20 @@ function historySide() {
           value: state.searchQ,
           onInput: (v) => { state.searchQ = v; debouncedSearch(); },
         }),
+        state.searchBusy
+          ? 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 })
           : null,
-        state.searchQ && searching
-          ? Btn({ key: 'clearq', onClick: () => { state.searchQ = ''; state.searchHits = null; render(); }, children: '× clear search' })
+        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.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' },
@@ -466,7 +770,7 @@ function historySide() {
           : null,
       ],
     }),
-  ];
+  ].filter(Boolean);
 }
 
 // ── settings ───────────────────────────────────────────────────────────────
@@ -476,14 +780,16 @@ function isValidUrl(s) {
   catch { return false; }
 }
 
-function saveBackend() {
-  if (!isValidUrl(state.backendDraft)) return;
-  if (!confirm('Reconnect to new backend? Current session will be lost.')) return;
+async function saveBackend() {
+  if (!isValidUrl(state.backendDraft) || state.backendDraft === state.backend) return;
   B.setBackend(state.backendDraft);
   state.backend = state.backendDraft;
   state.health = { status: 'unknown' };
+  state.backendStatus = 'connecting';
+  render();
+  await init();
+  state.backendStatus = state.health.status === 'ok' ? 'ok' : 'failed';
   render();
-  init();
 }
 
 function healthSummary() {
@@ -525,36 +831,57 @@ 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 === '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,
         healthSummary(),
         Btn({
           key: 'savebtn',
           type: 'submit',
           primary: true,
-          disabled: !isValid,
+          disabled: !isValid || state.backendDraft === state.backend || state.backendStatus === 'connecting',
           onClick: (e) => { e.preventDefault(); saveBackend(); },
-          children: 'save + reconnect',
+          children: state.backendStatus === 'connecting' ? 'connecting…' : 'save + reconnect',
           title: isValid ? 'Save backend URL and reconnect' : 'Fix URL format first',
         }),
       ]),
     }),
-    Panel({
-      title: 'models',
-      children: state.models.length
-        ? state.models.slice(0, 40).map((m, i) =>
-            Row({
-              key: 'm' + i,
-              rank: String(i + 1).padStart(3, '0'),
-              title: m.id,
-              sub: m.name ? (m.name + ' · ' + (m.protocol || 'agent')) : (m.protocol || 'agent'),
-              rail: m.id === state.selectedModel ? 'green' : 'purple',
-              onClick: () => { state.selectedModel = m.id; render(); },
-            })
-          )
-        : h('p', { key: 'none', class: 'lede' }, 'no models loaded'),
-    }),
+    agentsPanel(),
   ];
 }
 
+function acpStatusFor(agentId) {
+  const acp = Array.isArray(state.health.acp) ? state.health.acp : [];
+  return acp.find(a => a.id === agentId) || null;
+}
+
+function agentsPanel() {
+  const installed = state.agents.filter(a => a.available !== false);
+  return Panel({
+    title: 'agents · ' + installed.length + '/' + state.agents.length + ' installed',
+    children: state.agents.length
+      ? state.agents.map((a, i) => {
+          const acp = acpStatusFor(a.id);
+          const avail = a.available !== false;
+          const bits = [a.protocol || 'agent'];
+          if (!avail) bits.push(a.npxInstallable ? 'runs via npx' : 'not installed');
+          if (acp) bits.push(acp.healthy ? 'running·healthy' : (acp.running ? 'running' : 'stopped'));
+          if (acp && acp.port) bits.push('port ' + acp.port);
+          if (acp && acp.restartCount) bits.push(acp.restartCount + ' restarts');
+          return Row({
+            key: 'ag' + a.id,
+            rank: String(i + 1).padStart(3, '0'),
+            title: a.name + (avail ? '' : ' ·'),
+            sub: bits.join(' · '),
+            rail: a.id === state.selectedAgent ? 'green' : (avail ? 'purple' : 'flame'),
+            active: a.id === state.selectedAgent,
+            onClick: () => { if (avail || a.npxInstallable) { navTo('chat'); selectAgent(a.id); } },
+          });
+        })
+      : h('p', { key: 'none', class: 'lede' }, 'no agents loaded'),
+  });
+}
+
 // ── data ──────────────────────────────────────────────────────────────────
 async function refreshHistory() {
   try {
@@ -567,14 +894,20 @@ async function refreshHistory() {
     render();
   }
 }
+const debouncedRefreshHistory = debounce(refreshHistory, 500);
 
 async function runSearch() {
-  if (!state.searchQ.trim()) { state.searchHits = null; render(); return; }
+  const q = state.searchQ.trim();
+  if (!q) { state.searchHits = null; state.searchBusy = false; render(); return; }
+  if (q.length < 2) { state.searchHits = null; state.searchBusy = false; render(); return; }
+  state.searchBusy = true;
+  render();
   try {
-    state.searchHits = await B.searchHistory(state.backend, state.searchQ, 50);
-    render();
+    state.searchHits = await B.searchHistory(state.backend, q, 60);
   } catch (e) {
-    state.searchHits = { query: state.searchQ, results: [], error: e.message };
+    state.searchHits = { query: q, results: [], error: e.message };
+  } finally {
+    state.searchBusy = false;
     render();
   }
 }
@@ -583,16 +916,22 @@ const debouncedSearch = debounce(runSearch, 300);
 async function loadSession(sid) {
   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();
   }
 }
@@ -606,18 +945,34 @@ async function init() {
   }
   render();
   try {
-    state.models = await B.listModels(state.backend);
-    if (!state.selectedModel && state.models[0]) state.selectedModel = state.models[0].id;
+    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);
+    if (!target) target = state.agents.find(a => a.available !== false) || state.agents[0];
+    if (target) await selectAgent(target.id);
     render();
-  } catch (e) { console.warn('models fetch failed:', e.message); }
+  } 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(); }
@@ -627,6 +982,53 @@ async function init() {
   });
 }
 
+restoreChat();
 render = mount(document.getElementById('app'), view);
+
+// 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
+// search (history) or composer (chat). Ignored while typing in a field.
+let gPending = false;
+function focusComposer() {
+  const el = document.querySelector('#agentgui-main textarea, #agentgui-main [contenteditable="true"], #agentgui-main input[type="text"]');
+  el?.focus();
+}
+function focusSearch() {
+  const el = document.querySelector('#app input[type="search"]');
+  el?.focus();
+}
+window.addEventListener('keydown', (e) => {
+  const t = e.target;
+  const typing = t && (t.tagName === 'TEXTAREA' || t.tagName === 'INPUT' || t.isContentEditable);
+  if (e.metaKey || e.ctrlKey || e.altKey) return;
+  if (typing) {
+    if (e.key === 'Escape') t.blur();
+    return;
+  }
+  if (gPending) {
+    gPending = false;
+    if (e.key === 'c') { navTo('chat'); return; }
+    if (e.key === 'h') { navTo('history'); return; }
+    if (e.key === 's') { navTo('settings'); return; }
+    return;
+  }
+  if (e.key === 'g') { gPending = true; setTimeout(() => { gPending = false; }, 1000); return; }
+  if (e.key === 'n' && state.tab === 'chat') { e.preventDefault(); newChat(); return; }
+  if (e.key === '/') { e.preventDefault(); state.tab === 'history' ? focusSearch() : focusComposer(); return; }
+  if (e.key === '?') { state.showShortcuts = !state.showShortcuts; render(); return; }
+});
+
 init();