agentgui 1.0.938 → 1.0.940

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,6 +26,8 @@ const state = {
   sessionsLimit: 60,
   projectFilter: '',
   live: { es: null, connected: false, lastEventTs: 0, error: null, eventCount: 0, reconnects: 0 },
+  active: [],
+  activeTimer: null,
 };
 
 function readHash() {
@@ -85,18 +90,60 @@ 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;
   if (tab === 'history') {
     refreshHistory();
     openLiveStream();
+    startActivePolling();
   } else if (prev === 'history') {
     closeLiveStream();
+    stopActivePolling();
   }
   render();
 }
 
+async function refreshActive() {
+  state.active = await B.listActiveChats(state.backend);
+  render();
+}
+function startActivePolling() {
+  if (state.activeTimer) return;
+  refreshActive();
+  state.activeTimer = setInterval(refreshActive, 3000);
+}
+function stopActivePolling() {
+  if (state.activeTimer) { clearInterval(state.activeTimer); state.activeTimer = null; }
+}
+async function stopActiveChat(sid) {
+  try { await B.cancelChat(state.backend, sid); } catch {}
+  refreshActive();
+}
+
 function openLiveStream() {
   if (state.live.es) return;
   state.live.error = null;
@@ -171,53 +218,70 @@ function view() {
     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)' }),
         dot,
-      ]
+      )]
     : [dot];
 
+  // Topbar already shows "agentgui / <tab>"; the crumb is reserved for contextual
+  // controls (model picker, new/stop, live status) so it doesn't duplicate the path.
   const crumb = Crumb({
-    trail: ['agentgui'],
-    leaf: state.tab,
+    trail: [],
+    leaf: '',
     right: crumbRight,
   });
 
-  const navSide = Side({
-    sections: [
-      {
-        group: 'navigate',
-        items: [
-          { glyph: '▣', label: 'chat',     key: 'chat',     active: state.tab === 'chat',
-            onClick: (e) => { e.preventDefault(); navTo('chat'); } },
-          { glyph: '§', label: 'history',  key: 'history',  active: state.tab === 'history',
-            onClick: (e) => { e.preventDefault(); navTo('history'); } },
-          { glyph: '⌘', label: 'settings', key: 'settings', active: state.tab === 'settings',
-            onClick: (e) => { e.preventDefault(); navTo('settings'); } },
-        ],
-      },
-    ],
-  });
-  const side = state.tab === 'history' ? historySide() : navSide;
+  // Sidebar is contextual: history shows the session list; chat/settings have no
+  // 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, ok ? '● live' : '○ offline'],
-    right: [state.selectedModel ? '⌘ ' + state.selectedModel : '○ no model'],
+    left: [state.backend || 'same-origin', ok ? '● live' : '○ offline'],
+    right: [agentLabel],
   });
 
-  const main = h('div', { id: 'agentgui-main', role: 'main', 'data-chat-scroll': '', style: 'min-height:0;height:100%;overflow:auto' }, mainContent());
-  return AppShell({ topbar, crumb, side, main, status });
+  const mainStyle = state.tab === 'chat'
+    ? 'min-height:0;height:100%;display:flex;flex-direction:column'
+    : 'min-height:0;height:100%;overflow:auto';
+  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' });
 }
 
 function mainContent() {
@@ -227,42 +291,78 @@ 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 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: state.chat.busy || !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', { class: 'lede' }, '▶ resuming session ' + state.chat.resumeSid.slice(0, 8) + '… via --resume'),
+      Btn({ key: 'rclr', onClick: () => { state.chat.resumeSid = null; render(); }, children: '× clear' })));
+  }
+  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));
+  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.' }));
+  }
   return [
-    resumeBanner,
+    ...banners,
     Chat({
-      title: (state.selectedModel || 'agent') + (state.chat.resumeSid ? ' · resume' : ''),
-      sub: state.chat.busy ? 'streaming…' : (state.chat.messages.length + ' messages'),
+      title: agentName + (state.selectedModel ? ' · ' + state.selectedModel : '') + (state.chat.resumeSid ? ' · resume' : ''),
+      sub: state.chat.busy ? 'streaming…' : undefined,
       messages: msgs,
       composer,
     }),
@@ -270,43 +370,69 @@ function chatMain() {
 }
 
 function newChat() {
-  if (!confirm('Clear chat history? This cannot be undone.')) return;
+  if (state.chat.messages.length && !confirm('Clear chat history? This cannot be undone.')) return;
   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 === 'error') { cur.content += '\n[error] ' + JSON.stringify(ev.error); render(); }
     }
   } catch (e) {
     if (e.name !== 'AbortError') cur.content += '\n[error] ' + e.message;
   } finally {
     state.chat.busy = false;
     state.chat.abort = null;
+    persistChat();
     render();
     scrollChatToBottom();
   }
@@ -349,6 +475,7 @@ function historyMain() {
     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…') })];
   }
 
+  if (!state.expandedEvents) state.expandedEvents = new Set();
   return [
     head,
     actions,
@@ -356,16 +483,21 @@ function historyMain() {
       title: state.events.length + ' events',
       children: EventList({
         items: state.events.slice(-300).map((e, i) => {
+          const idx = e.i ?? 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(idx);
+          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: 'ev' + idx,
+            code: String(idx + 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(); },
           };
         }),
       }),
@@ -379,8 +511,8 @@ 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 here.
+  if (state.selectedAgent !== 'claude-code') selectAgent('claude-code');
   render();
 }
 
@@ -434,20 +566,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 [
-    Side({
-      sections: [
-        {
-          group: 'navigate',
-          items: [
-            { glyph: '▣', label: 'chat',     key: 'chat',     onClick: (e) => { e.preventDefault(); navTo('chat'); } },
-            { glyph: '§', label: 'history',  key: 'history',  active: true },
-            { glyph: '⌘', label: 'settings', key: 'settings', onClick: (e) => { e.preventDefault(); navTo('settings'); } },
-          ],
-        },
-      ],
-    }),
+    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('/').slice(-1)[0] : '')),
+              Btn({ key: 'stop' + r.sessionId, onClick: () => stopActiveChat(r.sessionId), children: '◼ stop' }));
+          }),
+        })
+      : null,
     Panel({
       title: searching
         ? 'matches · ' + (state.searchHits.results?.length || 0)
@@ -460,11 +594,17 @@ 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 && (searching || state.searchBusy)
+          ? 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' },
@@ -485,7 +625,7 @@ function historySide() {
           : null,
       ],
     }),
-  ];
+  ].filter(Boolean);
 }
 
 // ── settings ───────────────────────────────────────────────────────────────
@@ -495,14 +635,30 @@ 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();
-  init();
+  await init();
+  state.backendStatus = state.health.status === 'ok' ? 'ok' : 'failed';
+  render();
+}
+
+function healthSummary() {
+  const hh = state.health || {};
+  const ok = hh.status === 'ok';
+  const dot = ok ? '●' : (hh.status === 'unknown' ? '◌' : '○');
+  const bits = [];
+  bits.push(dot + ' ' + (hh.status || 'unknown'));
+  if (hh.version) bits.push('v' + hh.version);
+  if (typeof hh.agents === 'number') bits.push(hh.agents + ' agents');
+  if (typeof hh.activeExecutions === 'number') bits.push(hh.activeExecutions + ' active');
+  if (hh.db) bits.push('db ' + (hh.db.ok ? 'ok' : 'down'));
+  return h('div', { key: 'hp', class: 'health-summary' + (ok ? ' health-ok' : '') },
+    ...bits.map((b, i) => h('span', { key: 'hb' + i, class: 'health-chip' }, b)));
 }
 
 function settingsMain() {
@@ -530,36 +686,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,
-        h('p', { key: 'hp', class: 'lede' }, (ok ? '● ' : '○ ') + JSON.stringify(state.health)),
+        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 {
@@ -574,12 +751,17 @@ async function refreshHistory() {
 }
 
 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, 50);
   } catch (e) {
-    state.searchHits = { query: state.searchQ, results: [], error: e.message };
+    state.searchHits = { query: q, results: [], error: e.message };
+  } finally {
+    state.searchBusy = false;
     render();
   }
 }
@@ -611,10 +793,13 @@ 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();
   if (initialSid) {
@@ -632,6 +817,40 @@ async function init() {
   });
 }
 
+restoreChat();
 render = mount(document.getElementById('app'), view);
 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();