agentgui 1.0.953 → 1.0.955

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, AgentChat, Row, Panel, PageHeader, SearchInput, TextField, Select, Btn, EventList, Spinner, Alert } = C;
+const { AppShell, WorkspaceShell, WorkspaceRail, Topbar, Crumb, Side, Status, Chat, ChatComposer, AgentChat, ConversationList, SessionDashboard, Row, Panel, PageHeader, SearchInput, TextField, Select, Btn, EventList, Spinner, Alert, FileGrid, FileSkeleton, sortFiles, FileToolbar, BreadcrumbPath, EmptyState, FileViewer, FilePreviewCode, FilePreviewText, FilePreviewMedia, ThemeToggle, ContextPane } = C;
 
 const state = {
   backend: B.getBackend(),
@@ -29,6 +29,7 @@ const state = {
   active: [],
   activeTimer: null,
   eventsLimit: 300,   // how many of the most-recent events to render; grows via "load older"
+  files: { path: '', segments: [], entries: [], roots: [], loading: false, error: null, preview: null, sort: 'name', sortDir: 'asc', filter: '' },
 };
 
 function readHash() {
@@ -219,6 +220,14 @@ function navTo(tab) {
   } else if (prev === 'history') {
     closeLiveStream();
   }
+  // The conversation column now lives on the chat tab too, so populate the
+  // session list when entering chat if it hasn't been loaded yet (it used to
+  // load only on a History visit, leaving the rail empty on a fresh chat).
+  if (tab === 'chat' && !state.sessions.length && !state.historyError) refreshHistory();
+  // Kick the first directory load on entering Files HERE (an effect), not inside
+  // filesMain (which runs during render) - a render-time fetch is fragile under
+  // a double-render and re-enters render() while building the tree.
+  if (tab === 'files' && !state.files.path && !state.files.loading && !state.files.error) loadDir('');
   writeHash(state.selectedSid && tab === 'history' ? state.selectedSid : null);
   announce('Now on ' + tab + ' tab');
   render();
@@ -252,9 +261,21 @@ function syncAriaCurrent() {
   });
 }
 
+// A cheap signature of the active-chats list so an unchanged 3s poll does not
+// trigger a full ConversationList + dashboard rebuild every tick (the rail
+// re-renders every row on each render). Only re-render when the set actually
+// changed (or while on the live tab, where elapsed advances every second).
+function activeSig(list) {
+  return (Array.isArray(list) ? list : []).map(a => a.sessionId + ':' + (a.model || '') + ':' + (a.startedAt || '')).sort().join('|');
+}
 async function refreshActive() {
-  try { state.active = await B.listActiveChats(state.backend); } catch { return; }
-  render();
+  let next;
+  try { next = await B.listActiveChats(state.backend); } catch { return; }
+  const changed = activeSig(next) !== activeSig(state.active);
+  state.active = next;
+  // The live tab needs the steady elapsed tick regardless; elsewhere only
+  // re-render when the active set genuinely changed.
+  if (changed || state.tab === 'live') render();
 }
 function startActivePolling() {
   if (state.activeTimer) return;
@@ -270,6 +291,17 @@ function stopActivePolling() {
 // between events. Cheap: scheduleRender coalesces via rAF.
 let _relTick = null;
 function startRelTimeTick() { if (!_relTick) _relTick = setInterval(() => { if (state.tab === 'history' || (Array.isArray(state.active) && state.active.length)) scheduleRender(); }, 30000); }
+// The live dashboard's per-card elapsed must advance every second, not in 3s
+// poll-sized jumps - a frozen counter reads as a stalled session. A dedicated
+// 1s tick runs ONLY while the live tab is showing running sessions, so it costs
+// nothing on other tabs (and stops when there's nothing in flight).
+let _liveTick = null;
+function startLiveTick() {
+  if (_liveTick) return;
+  _liveTick = setInterval(() => {
+    if (state.tab === 'live' && Array.isArray(state.active) && state.active.length) scheduleRender();
+  }, 1000);
+}
 async function stopActiveChat(sid) {
   try { await B.cancelChat(state.backend, sid); } catch {}
   refreshActive();
@@ -361,20 +393,9 @@ function view() {
     h('span', { key: 'dd', class: 'status-dot-disc', 'aria-hidden': 'true' }),
     h('span', { key: 'dl' }, dotLabel));
 
-  const topbar = Topbar({
-    brand: 'agentgui',
-    leaf: state.tab,
-    items: [['chat', buildHash('chat', null) || '#'], ['history', buildHash('history', null)], ['settings', buildHash('settings', null)]],
-    active: state.tab,
-    onNav: (label) => navTo(label),
-  });
-
-  // The crumb's right slot carries the live/connection status dot on every tab.
-  const crumbRight = [dot];
-
   // Give the crumb contextual content on the left so it isn't a bare bar holding
-  // only the dot: on history it names the selected session (or "all sessions"),
-  // on chat it names the active agent, on settings it's "configuration".
+  // only the dot: on history/chat it names the selected session/agent, on files
+  // the current dir, on live the live count, on settings "configuration".
   let crumbLeaf = '';
   if (state.tab === 'history') {
     const sel = state.selectedSid && (Array.isArray(state.sessions) ? state.sessions : []).find(s => s.sid === state.selectedSid);
@@ -383,18 +404,14 @@ function view() {
       : 'all sessions';
   } else if (state.tab === 'chat') {
     crumbLeaf = state.selectedAgent ? (agentById(state.selectedAgent)?.name || state.selectedAgent) : 'no agent';
+  } else if (state.tab === 'files') {
+    crumbLeaf = truncate(state.files?.path || 'files', 24, 64);
+  } else if (state.tab === 'live') {
+    crumbLeaf = 'live · ' + ((state.active && state.active.length) || 0);
   } else if (state.tab === 'settings') {
     crumbLeaf = 'configuration';
   }
-  const crumb = Crumb({
-    trail: [],
-    leaf: crumbLeaf,
-    right: crumbRight,
-  });
-
-  // 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 crumb = Crumb({ trail: [], leaf: crumbLeaf, right: [dot] });
 
   const agentLabel = state.selectedAgent
     ? 'agent: ' + (agentById(state.selectedAgent)?.name || state.selectedAgent) + (state.selectedModel ? ' · ' + state.selectedModel : '')
@@ -404,28 +421,400 @@ function view() {
     right: [agentLabel, 'press ? for shortcuts'],
   });
 
-  // 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;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' })
+        children: 'g then c/h/f/l/s - chat/history/files/live/settings · n - new chat · / - focus search/composer · ? - toggle this · Esc - blur field' })
     : null;
   const main = h('div', { id: 'agentgui-main', role: 'region', 'aria-label': 'main content', 'data-chat-scroll': '', class: 'agentgui-main agentgui-main-' + state.tab, style: mainStyle }, [shortcutsHint, ...mainContent()].filter(Boolean));
-  // narrow drives the DS main-column class; the history sidebar itself collapses
-  // behind the DS .app-side-toggle hamburger (provided by AppShell when a side
-  // exists), so mobile users get a togglable session list.
-  return AppShell({ topbar, crumb, side, main, status, narrow: isNarrow() });
+
+  // Claude-Desktop three-column shell: a persistent left rail (workspace nav), an
+  // optional sessions column (chat + history share the conversation list), the
+  // main content, and an optional right context pane. The rail replaces the old
+  // Topbar tabs; it collapses to icon-only and, on mobile, behind its own toggle.
+  const rail = workspaceRail();
+  const sessions = (state.tab === 'chat' || state.tab === 'history') ? sessionsColumn() : null;
+  // Right context pane only on the chat tab: agent/model/cwd + a live count of
+  // running tool calls in the current turn.
+  const pane = state.tab === 'chat' ? ContextPane({
+    agent: state.selectedAgent ? (agentById(state.selectedAgent)?.name || state.selectedAgent) : '',
+    model: state.selectedModel || '',
+    cwd: state.chatCwd || '',
+    toolCount: runningToolCount(),
+    usage: state.chat.usage || null,
+    onSetCwd: () => { navTo('files'); },
+  }) : null;
+  return WorkspaceShell({ rail, sessions, main, pane, crumb, status, narrow: isNarrow() });
+}
+
+// The left workspace rail: brand, New chat action, and the primary view nav.
+function workspaceRail() {
+  const liveCount = (Array.isArray(state.active) ? state.active.length : 0);
+  const items = [
+    { key: 'chat', label: 'Chat', icon: 'forum', active: state.tab === 'chat', onClick: () => navTo('chat') },
+    { key: 'history', label: 'History', icon: 'thread', active: state.tab === 'history', onClick: () => navTo('history') },
+    { key: 'files', label: 'Files', icon: 'folder', active: state.tab === 'files', onClick: () => navTo('files') },
+    { key: 'live', label: 'Live', icon: 'activity', active: state.tab === 'live', count: liveCount || null, onClick: () => navTo('live') },
+    { key: 'settings', label: 'Settings', icon: 'settings', active: state.tab === 'settings', onClick: () => navTo('settings') },
+  ];
+  return WorkspaceRail({
+    brand: 'agentgui',
+    action: { label: 'New chat', icon: 'pencil', onClick: () => { navTo('chat'); newChat(); } },
+    items,
+  });
+}
+
+// Bucket a session's last-active timestamp into a Claude-Desktop-style date
+// group label (Today / Yesterday / This week / Earlier). Pure date math against
+// local midnight so the labels match the user's calendar, not a rolling 24h.
+function dateGroupLabel(ts) {
+  if (!ts) return 'Earlier';
+  const now = new Date();
+  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+  const d = ts;
+  if (d >= startOfToday) return 'Today';
+  if (d >= startOfToday - 86400000) return 'Yesterday';
+  if (d >= startOfToday - 7 * 86400000) return 'This week';
+  return 'Earlier';
+}
+const DATE_GROUP_ORDER = ['Running', 'Today', 'Yesterday', 'This week', 'Earlier'];
+
+// Build the kit ConversationList `groups` from the visible sessions: running
+// chats are pinned to a "Running" section at the top (a live workspace surfaces
+// in-flight work first), the rest bucket by recency. Returns { items, groups }.
+function sessionGroups(sessionsView) {
+  const runningSids = new Set((Array.isArray(state.active) ? state.active : []).map(a => a.sessionId));
+  const buckets = new Map();
+  for (const s of sessionsView) {
+    const label = runningSids.has(s.sid) ? 'Running' : dateGroupLabel(s.last);
+    if (!buckets.has(label)) buckets.set(label, []);
+    buckets.get(label).push(s.sid);
+  }
+  const groups = DATE_GROUP_ORDER
+    .filter(l => buckets.has(l))
+    .map(l => ({ label: l, sids: buckets.get(l) }));
+  return groups;
+}
+
+// The sessions column (conversation list) shared by chat + history. Selecting a
+// row on the chat tab resumes it in chat; on the history tab it loads its events.
+function sessionsColumn() {
+  // When a search is active (>=2 chars with hits), the rail shows the search
+  // results instead of the time-sorted session list - on BOTH tabs, so chat-tab
+  // search is no longer a dead control that runs a query nothing displays.
+  const searching = !!(state.searchHits && state.searchQ.trim().length >= 2);
+  if (searching) {
+    const hits = (state.searchHits.results || []).slice(0, state.sessionsLimit);
+    const items = hits.map((r, i) => ({
+      sid: r.sid,
+      title: r.snippet || r.title || r.sid,
+      project: projectLabel(r.project) || '',
+      time: r.ts ? fmtRelTime(r.ts) : '',
+      running: false,
+      unread: false,
+      rail: r.isError ? 'flame' : (r.isSubagent ? 'purple' : 'green'),
+      _focusEventI: r.i, _focusEventTs: r.ts,
+    }));
+    return ConversationList({
+      sessions: items,
+      selected: state.selectedSid,
+      search: {
+        value: state.searchQ,
+        placeholder: 'Search conversations',
+        onInput: (v) => { state.searchQ = v; if (v.trim().length >= 2) debouncedSearch(); else { state.searchHits = null; } render(); },
+      },
+      onNew: () => { navTo('chat'); newChat(); },
+      onSelect: (s) => {
+        if (state.tab === 'chat') resumeInChat({ sid: s.sid });
+        else loadSession(s.sid, { focusEventI: s._focusEventI, focusEventTs: s._focusEventTs });
+      },
+      loading: state.searchBusy,
+      error: state.searchHits.error || null,
+      emptyText: 'No matches for "' + state.searchQ + '"',
+    });
+  }
+  const sessionsView = visibleSessions();
+  const sliced = sessionsView.slice(0, state.sessionsLimit);
+  const runningSids = new Set((Array.isArray(state.active) ? state.active : []).map(a => a.sessionId));
+  const items = sliced.map((s) => ({
+    sid: s.sid,
+    title: projectLabel(s.title) || projectLabel(s.project) || s.sid,
+    project: projectLabel(s.project) || '',
+    time: fmtRelTime(s.last),
+    agent: undefined,
+    running: runningSids.has(s.sid),
+    unread: false,
+    rail: s.errors ? 'flame' : (s.isSubagent ? 'purple' : 'green'),
+  }));
+  return ConversationList({
+    sessions: items,
+    // Today/Yesterday/This-week + a pinned Running section, the Claude-Desktop
+    // Chats shape. Groups reference sids the kit maps back to the items above.
+    groups: sessionGroups(sliced),
+    selected: state.selectedSid,
+    search: {
+      value: state.searchQ,
+      placeholder: 'Search conversations',
+      onInput: (v) => { state.searchQ = v; if (v.trim().length >= 2) debouncedSearch(); else { state.searchHits = null; } render(); },
+    },
+    onNew: () => { navTo('chat'); newChat(); },
+    onSelect: (s) => { if (state.tab === 'chat') resumeInChat({ sid: s.sid }); else loadSession(s.sid); },
+    loading: state.tab === 'history' && !state.sessions.length && !state.historyError,
+    error: state.historyError,
+    emptyText: 'No conversations yet',
+  });
 }
 
 function mainContent() {
   if (state.tab === 'chat')    return chatMain();
   if (state.tab === 'history') return historyMain();
+  if (state.tab === 'files')   return filesMain();
+  if (state.tab === 'live')    return liveMain();
   return settingsMain();
 }
 
+// --- files (folder browser) ---
+async function loadDir(dirPath) {
+  state.files = state.files || {};
+  state.files.loading = true; state.files.error = null; render();
+  try {
+    const j = await B.listDir(state.backend, dirPath || '');
+    state.files.path = j.path;
+    state.files.segments = j.segments || [];
+    state.files.entries = j.entries || [];
+    state.files.roots = j.roots || [];
+    state.files.error = null;
+  } catch (e) {
+    state.files.error = e.message;
+    state.files.entries = [];
+  }
+  state.files.loading = false; render();
+}
+
+// Map a file extension to a Prism language hint for the code preview.
+const PREVIEW_LANG = {
+  js: 'javascript', mjs: 'javascript', cjs: 'javascript', jsx: 'jsx',
+  ts: 'typescript', tsx: 'tsx', py: 'python', rb: 'ruby', rs: 'rust',
+  go: 'go', java: 'java', c: 'c', cpp: 'cpp', h: 'c', hpp: 'cpp',
+  cs: 'csharp', php: 'php', sh: 'bash', css: 'css', html: 'markup',
+  xml: 'markup', svg: 'markup', json: 'json', yml: 'yaml', yaml: 'yaml',
+  toml: 'toml', sql: 'sql', md: 'markdown',
+};
+
+// Load the raw content of the currently-selected text/code preview file.
+// Images don't fetch here (the FileViewer renders them via /api/image url).
+async function loadPreviewContent(file) {
+  state.files = state.files || {};
+  const p = state.files.previewState = { loading: true, error: null, content: '', truncated: false, path: file.path };
+  render();
+  try {
+    const { content, truncated } = await B.readFile(state.backend, file.path);
+    // Bail if the user moved to another file while this was in flight.
+    if (state.files.preview?.path !== file.path) return;
+    p.content = content; p.truncated = truncated;
+  } catch (e) {
+    if (state.files.preview?.path !== file.path) return;
+    p.error = e.message;
+  }
+  p.loading = false; render();
+}
+
+function closePreview() {
+  if (!state.files) return;
+  state.files.preview = null;
+  state.files.previewState = null;
+  render();
+}
+
+// Render the file preview modal (FileViewer) when state.files.preview is set.
+// Returns null when nothing is selected. All children inside each h() call here
+// are either all-unkeyed or single nodes (no keyed/null mixing).
+function filePreview() {
+  const f = state.files || {};
+  const file = f.preview;
+  if (!file) return null;
+  const isImage = file.type === 'image';
+  let body;
+  if (isImage) {
+    body = FilePreviewMedia({ src: B.imageUrl(state.backend, file.path), type: 'image', name: file.name });
+  } else {
+    const ps = f.previewState;
+    // The load is kicked from onOpen (an effect); as a safety net for a preview
+    // set by another path, SCHEDULE (not call) a load so render stays pure.
+    if (!ps || ps.path !== file.path) { Promise.resolve().then(() => { if (state.files.preview?.path === file.path && state.files.previewState?.path !== file.path) loadPreviewContent(file); }); }
+    if (!ps || ps.loading || ps.path !== file.path) {
+      body = h('div', { class: 'lede empty-state', role: 'status', 'aria-live': 'polite' }, Spinner({ size: 'sm' }), 'loading…');
+    } else if (ps.error) {
+      body = Alert({ kind: 'warn', title: 'Cannot preview file', children: ps.error });
+    } else {
+      const ext = (file.name.split('.').pop() || '').toLowerCase();
+      const lang = PREVIEW_LANG[ext];
+      body = lang
+        ? FilePreviewCode({ content: ps.content, lang })
+        : FilePreviewText({ content: ps.content, truncated: ps.truncated });
+    }
+  }
+  return FileViewer({ file, body, onClose: closePreview });
+}
+
+// Go up one directory from the current path (the FileGrid Backspace affordance).
+function fileUp() {
+  const f = state.files || {};
+  const segs = (f.segments || []);
+  if (segs.length <= 1) { loadDir(''); return; }
+  const up = segs.slice(0, segs.length - 1);
+  const joined = /^[A-Za-z]:$/.test(up[0]) ? up[0] + '\\' + up.slice(1).join('\\') : '/' + up.join('/');
+  loadDir(joined);
+}
+
+function filesMain() {
+  const f = state.files || {};
+  // The initial dir load is kicked from navTo('files') (an effect), not here,
+  // so this view function stays pure. A direct deep-link to files still loads:
+  // init()/navTo handles the entry. As a safety net for a render that arrives
+  // before navTo's effect (e.g. hash deep-link), schedule (not call) a load.
+  if (!f.path && !f.loading && !f.error) { Promise.resolve().then(() => { if (!state.files.path && !state.files.loading) loadDir(''); }); }
+  const crumb = BreadcrumbPath({
+    root: 'root',
+    segments: f.segments || [],
+    onNav: (i) => {
+      // i=0 is the synthetic root button -> reload the default root; otherwise
+      // rebuild the absolute path up to the clicked segment.
+      if (i === 0) { loadDir(''); return; }
+      const segs = (f.segments || []).slice(0, i);
+      // Reconstruct a drive-aware absolute path from the segments.
+      const joined = segs.length && /^[A-Za-z]:$/.test(segs[0]) ? segs[0] + '\\' + segs.slice(1).join('\\') : '/' + segs.join('/');
+      loadDir(joined);
+    },
+  });
+  // Sort + filter the entries client-side (the server returns one directory at a
+  // time, so this is bounded by dir size). Map modified to BOTH a display string
+  // and an epoch (modifiedTs) so the kit's modified-sort orders by real time.
+  const mapped = (f.entries || []).map((e) => {
+    const ts = e.modified ? Date.parse(e.modified) : 0;
+    return { name: e.name, type: e.type, size: e.size, modified: ts ? fmtRelTime(ts) : null, modifiedTs: ts, path: e.path };
+  });
+  const filtered = f.filter
+    ? mapped.filter(e => e.name.toLowerCase().includes(f.filter.toLowerCase()))
+    : mapped;
+  const sorted = sortFiles(filtered, f.sort || 'name', f.sortDir || 'asc');
+  let body;
+  if (f.error) {
+    body = Alert({ key: 'ferr', kind: 'warn', title: 'Cannot list directory', children: f.error });
+  } else {
+    body = FileGrid({
+      files: sorted,
+      loading: f.loading,
+      emptyText: f.filter ? 'no files match "' + f.filter + '"' : 'empty directory',
+      sort: { key: f.sort || 'name', dir: f.sortDir || 'asc', onSort: (k) => {
+        // Click the active column to flip direction; a new column resets to asc.
+        if (state.files.sort === k) state.files.sortDir = state.files.sortDir === 'asc' ? 'desc' : 'asc';
+        else { state.files.sort = k; state.files.sortDir = 'asc'; }
+        render();
+      } },
+      filter: { value: f.filter || '', placeholder: 'Filter files in this directory', onInput: (v) => { state.files.filter = v; render(); } },
+      onUp: fileUp,
+      onOpen: (file) => {
+        if (file.type === 'dir') loadDir(file.path);
+        else {
+          state.files.preview = file;
+          // Kick the content fetch from the handler (an effect), not from inside
+          // filePreview() during render. Images don't fetch (rendered via url).
+          if (file.type !== 'image') loadPreviewContent(file);
+          render();
+        }
+      },
+    });
+  }
+  // Roots picker: when the server allows more than one root, surface them as a
+  // pill row so every allowed root is reachable in one click (not only by
+  // breadcrumb-walking down from the first). Always-present toolbar (incl. at the
+  // synthetic root) so path context + the cwd action never vanish.
+  const roots = Array.isArray(f.roots) ? f.roots : [];
+  const rootsRow = roots.length > 1
+    ? h('div', { key: 'froots', class: 'pill-row', role: 'group', 'aria-label': 'Jump to an allowed root' },
+        ...roots.map((r) => pillButton('root-' + r, truncate(projectLabel(r) || r, 16, 28), f.path === r, r, () => loadDir(r))))
+    : null;
+  const targetCwd = f.path || (roots.length === 1 ? roots[0] : '');
+  const toolbar = h('div', { key: 'ftb', class: 'ds-file-toolbar' },
+    h('div', { key: 'ftl', class: 'ds-file-toolbar-left' }, crumb),
+    h('div', { key: 'ftr', class: 'ds-file-toolbar-right' },
+      targetCwd
+        ? Btn({ onClick: () => { state.chatCwd = targetCwd; lsSet('agentgui.cwd', targetCwd); announce('working directory set to ' + targetCwd); navTo('chat'); }, children: 'use as chat cwd' })
+        : null));
+  return [
+    offlineBanner(),
+    PageHeader({ compact: true, title: 'files', lede: 'browse the server filesystem within the allowed roots. click a folder to open it; pick one as the chat working directory.' }),
+    rootsRow,
+    toolbar,
+    h('div', { key: 'fbody' }, body),
+    // Preview overlay (FileViewer modal) when a non-dir file is selected. Wrap
+    // in a keyed node to match the keyed siblings in this array.
+    f.preview ? h('div', { key: 'fprev' }, filePreview()) : null,
+  ].filter(Boolean);
+}
+
+// Stop every in-flight chat at once (the dashboard "stop all" bulk control).
+async function stopAllActive(sessions) {
+  const sids = (Array.isArray(sessions) ? sessions : (state.active || [])).map(s => s.sid || s.sessionId).filter(Boolean);
+  await Promise.all(sids.map(sid => B.cancelChat(state.backend, sid).catch(() => {})));
+  refreshActive();
+}
+
+// --- live (multi-session dashboard) ---
+function liveMain() {
+  const offline = state.health.status !== 'ok' && state.health.status !== 'unknown';
+  const bySid = state.sessionsBySid || new Map();
+  const sessions = (Array.isArray(state.active) ? state.active : []).map((r) => {
+    // Live activity tallies come from the session row the SSE stream keeps
+    // updating (events/tools/errors/last), so a card shows motion, not just a
+    // start offset. Absent (a brand-new chat not yet in the history list) -> null.
+    const sess = bySid.get(r.sessionId);
+    const counterBits = [];
+    if (sess) {
+      if (sess.events != null) counterBits.push(sess.events + ' ev');
+      if (sess.tools) counterBits.push(sess.tools + ' tools');
+      if (sess.errors) counterBits.push(sess.errors + ' err');
+    }
+    // Current tool: while a turn is busy in the in-page chat for this sid, the
+    // trailing assistant message carries a running tool part.
+    let currentTool = '';
+    if (state.chat.resumeSid === r.sessionId && state.chat.busy) {
+      const msgs = state.chat.messages || [];
+      const last = msgs[msgs.length - 1];
+      const running = last && Array.isArray(last.parts) && last.parts.filter(p => p && p.kind === 'tool' && p.status === 'running').slice(-1)[0];
+      if (running) currentTool = running.name || '';
+    }
+    return {
+      sid: r.sessionId,
+      agent: agentById(r.agentId)?.name || r.agentId || 'agent',
+      model: r.model || '',
+      cwd: r.cwd ? r.cwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : '',
+      elapsed: r.startedAt ? Math.round((Date.now() - r.startedAt) / 1000) + 's' : '',
+      counter: counterBits.length ? counterBits.join(' · ') : null,
+      lastActivity: sess && sess.last ? fmtRelTime(sess.last) : '',
+      currentTool,
+      status: (sess && sess.errors) ? 'error' : 'running',
+    };
+  });
+  return [
+    offlineBanner(),
+    PageHeader({ compact: true, title: 'live sessions', lede: 'every in-flight agent session, managed at once. stop, open, resume, or jump to events per session.' }),
+    SessionDashboard({
+      sessions,
+      offline,
+      emptyText: 'No live sessions - start a chat or run a local agent.',
+      onStop: (s) => stopActiveChat(s.sid),
+      onStopAll: (all) => stopAllActive(all),
+      onOpen: (s) => { resumeInChat({ sid: s.sid }); },
+      onResume: (s) => { resumeInChat({ sid: s.sid }); },
+      onView: (s) => { navTo('history'); loadSession(s.sid); },
+    }),
+  ].filter(Boolean);
+}
+
 // --- chat ---
 function canSend() {
   return !!state.selectedAgent && agentAvailable(state.selectedAgent) && !state.chat.busy;
@@ -451,6 +840,16 @@ function toolLabel(inp) {
 // Build a structured tool part the kit's ToolCallNode renders as a collapsible
 // card (name + label + full args, status icon). tool_result is matched back to
 // this part by tool_use id so the result lands inside the same card.
+// Count tool calls still running in the current live turn. Only meaningful
+// while the chat is busy; scans the trailing assistant message's parts.
+function runningToolCount() {
+  if (!state.chat || !state.chat.busy) return 0;
+  const msgs = Array.isArray(state.chat.messages) ? state.chat.messages : [];
+  const last = msgs[msgs.length - 1];
+  if (!last || last.role !== 'assistant' || !Array.isArray(last.parts)) return 0;
+  return last.parts.filter(p => p && p.kind === 'tool' && p.status === 'running').length;
+}
+
 function toolPart(block) {
   const name = block.name || block.kind || 'tool';
   const input = block.input || block.rawInput || {};
@@ -578,6 +977,11 @@ function chatMain() {
         'Find and explain the main entry point',
       ],
       onSuggestionClick: (t) => { if (!canSend()) return; state.chat.draft = t; sendChat(); },
+      // Per-message actions: copy any message; retry the last assistant turn;
+      // edit-and-resend a user message (drops everything after it, refills draft).
+      onCopyMessage: (m) => copyMessageText(m),
+      onRetryMessage: () => retryLastTurn(),
+      onEditMessage: (m) => editAndResend(m),
       cwd: state.chatCwd,
       cwdEditing: !!state.cwdEditing,
       cwdDraft: state.cwdDraft,
@@ -634,7 +1038,7 @@ function newChat() {
   }
   state.confirmingNewChat = false;
   state.chat.abort?.abort();
-  state.chat = { messages: [], busy: false, abort: null, draft: '', resumeSid: null };
+  state.chat = { messages: [], busy: false, abort: null, draft: '', resumeSid: null, usage: null };
   lsRemove(CHAT_KEY);
   render();
 }
@@ -686,6 +1090,59 @@ function restoreChat() {
   } catch {}
 }
 
+// Flatten a message's content (string content or md/text/tool parts) to plain
+// text for the copy action.
+function messageToText(m) {
+  if (m.content) return m.content;
+  if (!Array.isArray(m.parts)) return '';
+  return m.parts.map((p) => {
+    if (typeof p === 'string') return p;
+    if (p.kind === 'md' || p.kind === 'text') return p.text || '';
+    if (p.kind === 'tool') return '[tool: ' + (p.name || '') + (p.label ? ' ' + p.label : '') + ']';
+    return '';
+  }).filter(Boolean).join('\n');
+}
+function copyMessageText(m) {
+  const text = messageToText(m);
+  if (!text) return;
+  if (navigator.clipboard?.writeText) navigator.clipboard.writeText(text).then(() => announce('message copied')).catch(() => {});
+  else {
+    try { const ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove(); announce('message copied'); } catch {}
+  }
+}
+// Retry the last assistant turn: drop it and re-send the preceding user message.
+function retryLastTurn() {
+  if (!canSend() && !state.chat.busy) { /* allow when idle */ }
+  if (state.chat.busy) return;
+  const msgs = state.chat.messages;
+  // Find the trailing assistant turn and the user message before it.
+  let ai = msgs.length - 1;
+  while (ai >= 0 && msgs[ai].role !== 'assistant') ai--;
+  if (ai < 0) return;
+  let ui = ai - 1;
+  while (ui >= 0 && msgs[ui].role !== 'user') ui--;
+  if (ui < 0) return;
+  const userText = msgs[ui].content || '';
+  // Drop the user+assistant pair (and anything after) and resend the user text.
+  state.chat.messages = msgs.slice(0, ui);
+  state.chat.draft = userText;
+  persistChat();
+  if (canSend()) sendChat();
+  else render();
+}
+// Edit-and-resend a user message: truncate the transcript at it, refill the
+// composer with its text, and let the user revise before sending.
+function editAndResend(m) {
+  if (state.chat.busy) return;
+  const idx = state.chat.messages.indexOf(m);
+  if (idx < 0) return;
+  state.chat.messages = state.chat.messages.slice(0, idx);
+  state.chat.draft = m.content || messageToText(m);
+  persistChat();
+  render();
+  requestAnimationFrame(() => focusComposer());
+}
+
 async function sendChat() {
   const text = (state.chat.draft || '').trim();
   if (!text || !canSend()) return;
@@ -724,7 +1181,23 @@ async function sendChat() {
       else if (ev.type === 'text')  { appendText(cur.parts, ev.text); scheduleStreamRender(); }
       else if (ev.type === 'tool') { cur.parts.push(toolPart(ev.block)); scheduleStreamRender(); }
       else if (ev.type === 'tool_result') { applyToolResult(cur.parts, ev.block); scheduleStreamRender(); }
-      else if (ev.type === 'result') { /* terminal usage/summary block - already reflected via text */ }
+      else if (ev.type === 'result') {
+        // The terminal result block carries claude's turn usage (token counts,
+        // cost, turns, duration). The prose is already streamed via text events;
+        // capture the usage so the ContextPane can surface it (was dropped).
+        const b = ev.block || {};
+        const u = b.usage || {};
+        const inTok = (u.input_tokens || 0) + (u.cache_read_input_tokens || 0) + (u.cache_creation_input_tokens || 0);
+        const outTok = u.output_tokens || 0;
+        state.chat.usage = {
+          inputTokens: inTok || null,
+          outputTokens: outTok || null,
+          costUsd: typeof b.total_cost_usd === 'number' ? b.total_cost_usd : null,
+          turns: b.num_turns != null ? b.num_turns : null,
+          durationMs: b.duration_ms != null ? b.duration_ms : null,
+        };
+        scheduleStreamRender();
+      }
       else if (ev.type === 'error') { cur.error = errText(ev.error); render(); }
     }
   } catch (e) {
@@ -944,9 +1417,11 @@ function runningPanel() {
     children: running.map((r) => {
       const agentName = agentById(r.agentId)?.name || r.agentId || 'agent';
       const elapsed = r.startedAt ? Math.round((Date.now() - r.startedAt) / 1000) : 0;
+      // All three children must be keyed VElements (mixing a keyed span with an
+      // unkeyed one crashes webjsx applyDiff "reading 'key'").
       return h('div', { key: 'run' + r.sessionId, class: 'resume-banner', role: 'group' },
         h('span', { key: 'rd-' + r.sessionId, class: 'status-dot-disc status-dot-live', 'aria-hidden': 'true' }),
-        h('span', { class: 'lede' }, agentName + (r.model ? ' · ' + r.model : '') + ' · ' + elapsed + 's' + (r.cwd ? ' · ' + r.cwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : '')),
+        h('span', { key: 'rl-' + r.sessionId, 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' }));
     }),
   });
@@ -1154,6 +1629,13 @@ function settingsMain() {
         }),
       ]),
     }),
+    Panel({
+      title: 'appearance',
+      children: [
+        h('div', { key: 'apl', class: 'lede', style: 'margin-bottom:.5em' }, 'theme - follows the OS in auto, or pick light/dark.'),
+        ThemeToggle({ key: 'tt' }),
+      ],
+    }),
     agentsPanel(),
     preferencesPanel(),
     ]),
@@ -1259,12 +1741,14 @@ async function refreshHistory() {
       writeHash(null);
     }
     state.historyError = null;
-    render();
   } catch (e) {
+    // Only a genuine fetch/list failure is a history error. A render exception
+    // must not masquerade as one (it would poison the sessions panel with a
+    // render-stack string and never clear), so render() lives outside this try.
     state.historyError = e.message;
     console.warn('history fetch failed:', e.message);
-    render();
   }
+  render();
 }
 const debouncedRefreshHistory = debounce(refreshHistory, 500);
 
@@ -1379,6 +1863,10 @@ async function init() {
   registerWsStatusOnce();
   startActivePolling();   // surface running chats on any tab, not just history
   startRelTimeTick();
+  startLiveTick();        // 1s elapsed advance on the live dashboard
+  // The conversation column shows on the default chat tab, so load the session
+  // list at boot (unless a history deep-link already triggered a refresh).
+  if (state.tab === 'chat' && !state.sessions.length) refreshHistory();
 }
 
 // init() runs both at boot and on every saveBackend(); registering the WS
@@ -1437,6 +1925,8 @@ window.addEventListener('keydown', (e) => {
     gPending = false;
     if (e.key === 'c') { navTo('chat'); return; }
     if (e.key === 'h') { navTo('history'); return; }
+    if (e.key === 'f') { navTo('files'); return; }
+    if (e.key === 'l') { navTo('live'); return; }
     if (e.key === 's') { navTo('settings'); return; }
     return;
   }