agentgui 1.0.937 → 1.0.939

package/site/app/js/app.js

@@ -3,7 +3,7 @@ import * as B from './backend.js';
 
 installStyles().catch(() => {});
 
-const { AppShell, Topbar, Crumb, Side, Status, Chat, ChatComposer, Row, Panel, PageHeader, SearchInput, TextField, Select, Btn, EventList } = C;
+const { AppShell, Topbar, Crumb, Side, Status, Chat, ChatComposer, Row, Panel, PageHeader, SearchInput, TextField, Select, Btn, EventList, Spinner, Alert } = C;
 
 const state = {
   backend: B.getBackend(),
@@ -50,6 +50,36 @@ function scheduleRender() {
   requestAnimationFrame(() => { renderScheduled = false; render(); });
 }
 
+function isNarrow() { return typeof window !== 'undefined' && window.innerWidth < 768; }
+function truncate(str, mobileLen, desktopLen) {
+  const s = String(str ?? '');
+  const max = isNarrow() ? mobileLen : desktopLen;
+  return s.length > max ? s.slice(0, max) + '…' : s;
+}
+function debounce(fn, ms) {
+  let t;
+  return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
+}
+
+function pillButton(key, label, active, title, onClick) {
+  return h('button', {
+    key,
+    type: 'button',
+    class: 'pill lede' + (active ? ' pill-active' : ''),
+    title,
+    'aria-pressed': active ? 'true' : 'false',
+    onClick,
+  }, label);
+}
+
+function scrollChatToBottom() {
+  requestAnimationFrame(() => {
+    const el = document.querySelector('#agentgui-main') || document.querySelector('[role="main"]') || document.getElementById('app');
+    const scroller = el?.querySelector('[data-chat-scroll]') || el;
+    if (scroller) scroller.scrollTop = scroller.scrollHeight;
+  });
+}
+
 function timeNow() {
   const d = new Date();
   return String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
@@ -130,7 +160,8 @@ function view() {
         ? '◌ ' + state.live.error + (state.live.reconnects ? ' · ' + state.live.reconnects + ' reconnects' : '')
         : (liveActive ? '● live · ' + state.live.eventCount : (state.live.connected ? '● live' : '◌ connecting…')))
     : (ok ? (state.health.ws === 'reconnecting' ? '◌ ws reconnecting' : '● connected') : '○ offline');
-  const dot = h('span', { key: 'dot' }, dotText);
+  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);
 
   const topbar = Topbar({
     brand: 'agentgui',
@@ -141,50 +172,45 @@ function view() {
   });
 
   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(); },
         }),
         state.chat.busy
-          ? Btn({ key: 'stop', onClick: cancelChat, children: '◼ stop' })
-          : Btn({ key: 'new',  onClick: newChat,    children: '+ new' }),
+          ? 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 status = Status({
-    left: [state.backend, ok ? '● live' : '○ offline'],
+    left: [state.backend || 'same-origin', ok ? '● live' : '○ offline'],
     right: [state.selectedModel ? '⌘ ' + state.selectedModel : '○ no model'],
   });
 
-  return AppShell({ topbar, crumb, side, main: mainContent(), status });
+  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());
+  // 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() {
@@ -201,7 +227,7 @@ function chatMain() {
     const isStreaming = state.chat.busy && i === lastIdx && isAssistant;
     const isEmptyStreaming = isStreaming && !m.content;
     return {
-      key: String(i),
+      key: m.id || String(i),
       who: isAssistant ? 'them' : 'you',
       name: isAssistant ? (state.selectedModel || 'agent') : 'you',
       time: m.time || '',
@@ -221,7 +247,7 @@ function chatMain() {
   });
 
   const resumeBanner = state.chat.resumeSid
-    ? h('div', { key: 'rb', style: 'padding:.5em .75em;background:rgba(80,200,120,.1);border-radius:4px;display:flex;justify-content:space-between;align-items:center;margin-bottom:.5em' },
+    ? 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;
@@ -229,7 +255,7 @@ function chatMain() {
     resumeBanner,
     Chat({
       title: (state.selectedModel || 'agent') + (state.chat.resumeSid ? ' · resume' : ''),
-      sub: state.chat.busy ? 'streaming…' : (state.chat.messages.length + ' messages'),
+      sub: state.chat.busy ? 'streaming…' : undefined,
       messages: msgs,
       composer,
     }),
@@ -237,6 +263,7 @@ function chatMain() {
 }
 
 function newChat() {
+  if (!confirm('Clear chat history? This cannot be undone.')) return;
   state.chat.abort?.abort();
   state.chat = { messages: [], busy: false, abort: null, draft: '', resumeSid: null };
   render();
@@ -248,13 +275,15 @@ async function sendChat() {
   const text = (state.chat.draft || '').trim();
   if (!text || !state.selectedModel || state.chat.busy) return;
   const t = timeNow();
-  state.chat.messages.push({ role: 'user', content: text, time: t });
-  state.chat.messages.push({ role: 'assistant', content: '', time: t });
+  const userMsg = { id: 'u' + Date.now(), role: 'user', content: text, time: t };
+  const curMsg = { id: 'a' + (Date.now() + 1), role: 'assistant', content: '', time: t };
+  state.chat.messages = [...state.chat.messages, userMsg, curMsg];
   state.chat.draft = '';
   state.chat.busy = true;
   const ctrl = new AbortController();
   state.chat.abort = ctrl;
   render();
+  scrollChatToBottom();
   const cur = state.chat.messages[state.chat.messages.length - 1];
   try {
     for await (const ev of B.streamChat(state.backend, {
@@ -263,7 +292,7 @@ async function sendChat() {
       signal: ctrl.signal,
       resumeSid: state.chat.resumeSid || undefined,
     })) {
-      if (ev.type === 'text')  { cur.content += ev.text; render(); }
+      if (ev.type === 'text')  { cur.content += ev.text; render(); scrollChatToBottom(); }
       if (ev.type === 'error') { cur.content += '\n[error] ' + JSON.stringify(ev.error); render(); }
     }
   } catch (e) {
@@ -272,6 +301,7 @@ async function sendChat() {
     state.chat.busy = false;
     state.chat.abort = null;
     render();
+    scrollChatToBottom();
   }
 }
 
@@ -290,17 +320,26 @@ function historyMain() {
     : state.selectedSid;
 
   const head = PageHeader({
-    title: '§ ' + (sess?.title || state.selectedSid).slice(0, 80),
+    title: '§ ' + truncate(sess?.title || state.selectedSid, 40, 80),
     lede,
   });
 
-  const actions = h('div', { key: 'acts', style: 'display:flex;gap:.5em;padding:0 0 .75em 0' },
+  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' }),
   );
 
   if (state.events.length === 0) {
-    return [head, actions, Panel({ title: 'events', children: h('p', { class: 'lede' }, '◌ loading…') })];
+    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…') })];
   }
 
   return [
@@ -390,44 +429,38 @@ function historySide() {
   const projects = uniqueProjects();
 
   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'); } },
-          ],
-        },
-      ],
-    }),
     Panel({
-      title: searching ? 'matches' : ('sessions · ' + sessionsView.length + (subagentCount && !state.showSubagents ? ' (+'+subagentCount+' sub)' : '')),
+      title: searching
+        ? 'matches · ' + (state.searchHits.results?.length || 0)
+        : ('sessions · ' + sessionsView.length + (subagentCount && !state.showSubagents ? ' (+'+subagentCount+' sub)' : '')),
       children: [
         SearchInput({
           key: 'searchInput',
           placeholder: 'search sessions…',
+          'aria-label': 'Search sessions by text or project',
           value: state.searchQ,
-          onInput: (v) => { state.searchQ = v; runSearch(); },
+          onInput: (v) => { state.searchQ = v; debouncedSearch(); },
         }),
+        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' })
           : null,
         !searching && projects.length > 1
-          ? h('div', { key: 'projfilter', style: 'display:flex;flex-wrap:wrap;gap:.25em;padding:.25em 0' },
-              h('span', { key: 'allp', class: 'lede', style: 'cursor:pointer;padding:.15em .5em;border-radius:3px;' + (!state.projectFilter ? 'background:rgba(80,200,120,.15)' : ''), onClick: () => { state.projectFilter = ''; render(); } }, 'all'),
+          ? h('div', { key: 'projfilter', class: 'pill-row', role: 'group', 'aria-label': 'Filter sessions by project' },
+              pillButton('allp', 'all', !state.projectFilter, 'Show all projects', () => { state.projectFilter = ''; render(); }),
               ...projects.slice(0, 8).map(([name, count]) =>
-                h('span', { key: 'p'+name, class: 'lede', style: 'cursor:pointer;padding:.15em .5em;border-radius:3px;' + (state.projectFilter === name ? 'background:rgba(80,200,120,.15)' : ''), title: name, onClick: () => { state.projectFilter = state.projectFilter === name ? '' : name; render(); } }, (name.length > 20 ? name.slice(0, 20) + '…' : name) + ' (' + count + ')')))
+                pillButton('p'+name, truncate(name, 14, 20) + ' (' + count + ')', state.projectFilter === name, name, () => { state.projectFilter = state.projectFilter === name ? '' : name; render(); })))
           : null,
         !searching && subagentCount
-          ? h('label', { key: 'subtog', class: 'lede', style: 'display:flex;gap:.5em;align-items:center;padding:.25em 0' },
+          ? h('label', { key: 'subtog', class: 'lede subagent-toggle' },
               h('input', { type: 'checkbox', checked: state.showSubagents, onChange: (e) => { state.showSubagents = e.target.checked; render(); } }),
               'show subagents (' + subagentCount + ')')
           : null,
         state.historyError
-          ? h('p', { key: 'err', class: 'lede' }, '⚠ ' + state.historyError)
-          : (rows.length ? h('div', { key: 'rows' }, ...rows) : h('p', { key: 'empty', class: 'lede' }, 'no sessions yet')),
+          ? h('p', { key: 'err', class: 'lede field-error', role: 'alert' }, '⚠ ' + state.historyError)
+          : (rows.length ? h('div', { key: 'rows' }, ...rows) : h('p', { key: 'empty', class: 'lede empty-state' }, 'no sessions yet')),
         !searching && truncatedBy > 0
           ? Btn({ key: 'more', onClick: () => { state.sessionsLimit += 60; render(); }, children: '↓ show '+Math.min(60, truncatedBy)+' more ('+truncatedBy+' hidden)' })
           : null,
@@ -437,8 +470,39 @@ function historySide() {
 }
 
 // ── settings ───────────────────────────────────────────────────────────────
+function isValidUrl(s) {
+  if (!s) return true; // blank = same-origin is valid
+  try { new URL(s.startsWith('http') ? s : 'http://' + s); return true; }
+  catch { return false; }
+}
+
+function saveBackend() {
+  if (!isValidUrl(state.backendDraft)) return;
+  if (!confirm('Reconnect to new backend? Current session will be lost.')) return;
+  B.setBackend(state.backendDraft);
+  state.backend = state.backendDraft;
+  state.health = { status: 'unknown' };
+  render();
+  init();
+}
+
+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() {
   const ok = state.health.status === 'ok';
+  const isValid = isValidUrl(state.backendDraft);
   return [
     PageHeader({
       title: '⌘ settings',
@@ -446,29 +510,32 @@ function settingsMain() {
     }),
     Panel({
       title: 'backend',
-      children: [
+      children: h('form', {
+        key: 'backendForm',
+        onSubmit: (e) => { e.preventDefault(); saveBackend(); },
+      }, [
         TextField({
           key: 'backendField',
           label: 'backend url',
           value: state.backendDraft,
           placeholder: '(blank = same origin)',
+          'aria-describedby': !isValid ? 'backend-url-error' : undefined,
+          'aria-invalid': !isValid ? 'true' : 'false',
+          title: isValid ? 'Enter a valid URL or leave blank for same-origin' : 'Invalid URL format',
           onInput: (v) => { state.backendDraft = v; render(); },
         }),
-        h('p', { key: 'hp', class: 'lede' }, (ok ? '● ' : '○ ') + JSON.stringify(state.health)),
+        !isValid ? h('p', { key: 'err', id: 'backend-url-error', class: 'lede field-error', role: 'alert' }, '⚠ Invalid URL format') : null,
+        healthSummary(),
         Btn({
           key: 'savebtn',
+          type: 'submit',
           primary: true,
-          onClick: (e) => {
-            e.preventDefault();
-            B.setBackend(state.backendDraft);
-            state.backend = state.backendDraft;
-            state.health = { status: 'unknown' };
-            render();
-            init();
-          },
+          disabled: !isValid,
+          onClick: (e) => { e.preventDefault(); saveBackend(); },
           children: 'save + reconnect',
+          title: isValid ? 'Save backend URL and reconnect' : 'Fix URL format first',
         }),
-      ],
+      ]),
     }),
     Panel({
       title: 'models',
@@ -511,6 +578,7 @@ async function runSearch() {
     render();
   }
 }
+const debouncedSearch = debounce(runSearch, 300);
 
 async function loadSession(sid) {
   state.selectedSid = sid;
@@ -519,7 +587,12 @@ async function loadSession(sid) {
   render();
   try { state.events = await B.getSessionEvents(state.backend, sid); render(); }
   catch (e) {
-    state.events = [{ ts: Date.now(), role: 'error', type: 'fetch', text: e.message }];
+    state.events = [{
+      ts: Date.now(),
+      role: 'error',
+      type: 'fetch',
+      text: 'Failed to load session: ' + e.message + ' — retry via sidebar',
+    }];
     render();
   }
 }