agentgui 1.0.939 → 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,16 +218,33 @@ 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)' }),
@@ -200,15 +264,22 @@ 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],
   });
 
   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());
+  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 +291,77 @@ 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' : ''),
+      title: agentName + (state.selectedModel ? ' · ' + state.selectedModel : '') + (state.chat.resumeSid ? ' · resume' : ''),
       sub: state.chat.busy ? 'streaming…' : undefined,
       messages: msgs,
       composer,
@@ -263,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();
   }
@@ -342,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,
@@ -349,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(); },
           };
         }),
       }),
@@ -372,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();
 }
 
@@ -427,8 +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 [
+    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)
@@ -441,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' },
@@ -466,7 +625,7 @@ function historySide() {
           : null,
       ],
     }),
-  ];
+  ].filter(Boolean);
 }
 
 // ── settings ───────────────────────────────────────────────────────────────
@@ -476,14 +635,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 +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,
+        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 {
@@ -569,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();
   }
 }
@@ -606,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) {
@@ -627,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();

package/site/app/js/backend.js

@@ -203,12 +203,28 @@ function addSessionListener(sessionId, fn) {
 
 // ---------- Agents / models (WS) ----------
 
-export async function listModels(base) {
+export async function listAgents(base) {
   const { agents } = await wsCall(base, 'agents.list', {});
-  // Compatibility shape: app.js expects an array of {id, name?, ...}
   return agents || [];
 }
 
+export async function listActiveChats(base) {
+  try { const { sessions } = await wsCall(base, 'chat.active', {}); return sessions || []; }
+  catch { return []; }
+}
+
+export async function cancelChat(base, sessionId) {
+  return wsCall(base, 'chat.cancel', { sessionId });
+}
+
+export async function listAgentModels(base, agentId) {
+  if (!agentId) return [];
+  try {
+    const { models } = await wsCall(base, 'agents.models', { id: agentId });
+    return models || [];
+  } catch { return []; }
+}
+
 // ---------- Streaming chat (WS) ----------
 //
 // Yields events of shape:
@@ -218,29 +234,15 @@ export async function listModels(base) {
 //   { type: 'error', error: '...' }
 //
 // Caller signature kept compatible with the previous HTTP/SSE impl.
-export async function* streamChat(base, { model, messages, signal, agentId, resumeSid }) {
-  // The last user message is the prompt; agentgui's claude-runner doesn't
-  // accept a full message list — it spawns the agent for a single prompt.
-  // For multi-turn, the agent's own session/resume handles continuity.
+export async function* streamChat(base, { model, messages, signal, agentId, resumeSid, cwd }) {
+  // The last user message is the prompt; agentgui's claude-runner spawns the
+  // agent for a single prompt. Multi-turn continuity is the agent's own resume.
   const last = messages[messages.length - 1];
   const content = last?.content || '';
   if (!content) return;
 
-  // app.js treats the "model" picker as the agent picker (selects from
-  // agents.list ids). If no explicit agentId is given, model IS the agent.
-  // If `model` looks like a real model id (has a slash), keep it as model
-  // and default agent to claude-code.
-  let resolvedAgentId = agentId;
-  let resolvedModel = model;
-  if (!resolvedAgentId) {
-    if (!model || /^[a-z][a-z0-9-]*$/.test(model)) {
-      // Bare slug — treat as agentId.
-      resolvedAgentId = model || 'claude-code';
-      resolvedModel = undefined;
-    } else {
-      resolvedAgentId = 'claude-code';
-    }
-  }
+  const resolvedAgentId = agentId || 'claude-code';
+  const resolvedModel = model || undefined;
 
   // Queue events here; the async iterator pulls from it.
   const queue = [];
@@ -252,7 +254,7 @@ export async function* streamChat(base, { model, messages, signal, agentId, resu
   // Kick off the chat on the server.
   let started;
   try {
-    started = await wsCall(base, 'chat.sendMessage', { content, agentId: resolvedAgentId, model: resolvedModel, resumeSid });
+    started = await wsCall(base, 'chat.sendMessage', { content, agentId: resolvedAgentId, model: resolvedModel, resumeSid, cwd });
   } catch (e) {
     yield { type: 'error', error: e.message };
     return;

package/site/app/vendor/anentrypoint-design/247420.css

@@ -6,7 +6,7 @@
    Source-of-truth tokens. Component sheet lives in app-shell.css.
    ============================================================ */
 
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+@import url('../cdn/fonts/fonts.css');
 
 .ds-247420 {
   /* Tree view indentation tokens */