agentgui 1.0.956 → 1.0.957

package/site/app/index.html

@@ -76,29 +76,11 @@
     /* (The skip link is rendered + styled by the design system's AppShell;
        agentgui carries no local .skip-link rule.) */
 
-    /* status connection dot - a CSS-drawn disc (real UI affordance, not a text
-       glyph). The .status-dot-disc child is always present; the parent's state
-       class colours it, and only is-live pulses. */
+    /* The connection dot's disc + pulse are the KIT's canonical .status-dot-disc
+       (status-dot-live / -connecting / -error) - the app no longer overrides
+       them. Only the inline-flex wrapper layout for the crumb stays local since
+       the kit defines the disc, not this wrapper element. */
     .status-dot { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
-    .status-dot-disc {
-      flex: none; width: 8px; height: 8px; border-radius: 50%;
-      background: var(--muted, #8a8f98);
-    }
-    .status-dot.is-live .status-dot-disc,
-    .status-dot-live .status-dot-disc {
-      background: var(--accent, var(--agentgui-accent, #50c878));
-      animation: agentgui-pulse 2s infinite;
-    }
-    .status-dot.is-connecting .status-dot-disc { background: var(--agentgui-status-connecting); }
-    .status-dot.is-offline .status-dot-disc { background: var(--agentgui-status-offline); animation: none; }
-    @keyframes agentgui-pulse {
-      0%   { box-shadow: 0 0 0 0 rgba(80, 200, 120, .5); }
-      70%  { box-shadow: 0 0 0 6px rgba(80, 200, 120, 0); }
-      100% { box-shadow: 0 0 0 0 rgba(80, 200, 120, 0); }
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .status-dot-disc { animation: none !important; }
-    }
 
     /* resume banner */
     .resume-banner {

package/site/app/js/app.js

@@ -3,7 +3,7 @@ import * as B from './backend.js';
 
 installStyles().catch(() => {});
 
-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 { AppShell, WorkspaceShell, WorkspaceRail, Topbar, Crumb, Side, Status, Chat, ChatComposer, AgentChat, ConversationList, SessionDashboard, Row, Panel, PageHeader, SearchInput, TextField, Select, Btn, Icon, EventList, Spinner, Alert, FileGrid, FileSkeleton, sortFiles, FileToolbar, RootsPicker, BreadcrumbPath, EmptyState, FileViewer, FilePreviewPane, FilePreviewCode, FilePreviewText, FilePreviewMedia, ThemeToggle, ContextPane } = C;
 
 const state = {
   backend: B.getBackend(),
@@ -212,12 +212,14 @@ function navTo(tab) {
   // as a stale banner when the user returns.
   if (prev === 'chat' && tab !== 'chat') state.confirmingNewChat = false;
   state.tab = tab;
-  // Live history SSE is only needed on the history tab; active-chat polling
-  // runs globally (started at boot) so running chats show on every tab.
-  if (tab === 'history') {
-    refreshHistory();
+  // Live history SSE feeds both the History tab (event log) and the Live
+  // dashboard (per-session activity tally + stream-health signal); open it on
+  // either, close it when leaving both. Active-chat polling runs globally.
+  const wantsStream = (t) => t === 'history' || t === 'live';
+  if (wantsStream(tab)) {
+    if (tab === 'history') refreshHistory();
     openLiveStream();
-  } else if (prev === 'history') {
+  } else if (wantsStream(prev)) {
     closeLiveStream();
   }
   // The conversation column now lives on the chat tab too, so populate the
@@ -333,6 +335,18 @@ function openLiveStream() {
             if (state.events.length > 2000) state.events.splice(0, state.events.length - 2000);
           }
         }
+        // Per-sid live tally, kept independent of the history index so a
+        // brand-new chat (not yet in sessionsBySid) STILL shows motion on the
+        // dashboard. Keyed by sid; the dashboard reads this when no history row
+        // exists yet.
+        if (data.sid) {
+          state.live.tally = state.live.tally || new Map();
+          const t = state.live.tally.get(data.sid) || { events: 0, tools: 0, errors: 0, last: 0 };
+          t.events++; t.last = ev.ts || Date.now();
+          if (ev.type === 'tool_use') t.tools++;
+          if (ev.isError) t.errors++;
+          state.live.tally.set(data.sid, t);
+        }
         const sess = state.sessionsBySid ? state.sessionsBySid.get(data.sid) : null;
         if (sess) {
           sess.events = (sess.events || 0) + 1;
@@ -341,8 +355,10 @@ function openLiveStream() {
           if (ev.isError) sess.errors = (sess.errors || 0) + 1;
         } else {
           // Unknown session: a burst of events for a new session would trigger
-          // a full session-list refetch per event - debounce it into one.
+          // a full session-list refetch per event - debounce it into one. The
+          // tally above already captured the motion, so the card is not frozen.
           debouncedRefreshHistory();
+          scheduleRender();
           return;
         }
       } else if (kind === 'conversation') {
@@ -387,10 +403,12 @@ function view() {
   // colored disc, real product design, not a text glyph. State drives its colour
   // via the modifier class; the label carries only words so AT reads "live", and
   // there are no literal status-glyph characters in the DOM.
-  const dotState = state.live.error || (!dotLive) ? 'is-offline'
-    : (dotLive && state.tab !== 'history' && state.health.ws === 'reconnecting' ? 'is-connecting' : 'is-live');
-  const dot = h('span', { key: 'dot', class: 'status-dot ' + dotState + (dotLive ? ' status-dot-live' : ''), role: 'status', 'aria-live': 'polite' },
-    h('span', { key: 'dd', class: 'status-dot-disc', 'aria-hidden': 'true' }),
+  // The disc carries the KIT modifier class directly (status-dot-live pulses,
+  // -connecting / -error are static) - one canonical disc, no app override.
+  const discClass = (state.live.error || !dotLive) ? 'status-dot-error'
+    : (dotLive && state.tab !== 'history' && state.health.ws === 'reconnecting' ? 'status-dot-connecting' : 'status-dot-live');
+  const dot = h('span', { key: 'dot', class: 'status-dot', role: 'status', 'aria-live': 'polite' },
+    h('span', { key: 'dd', class: 'status-dot-disc ' + discClass, 'aria-hidden': 'true' }),
     h('span', { key: 'dl' }, dotLabel));
 
   // Give the crumb contextual content on the left so it isn't a bare bar holding
@@ -436,17 +454,24 @@ function view() {
   // 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() });
+  // Right context pane. On chat it carries agent/model/cwd + the live running-tool
+  // count + last-turn usage. On files it hosts the inline file preview (split view).
+  // On other tabs it is null but the shell keeps the column TRACK (stableFrame) so
+  // the geometry does not re-flow on tab switch (the "separate pages" tell).
+  let pane = null;
+  if (state.tab === 'chat') {
+    pane = 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'); },
+    });
+  } else if (state.tab === 'files' && state.files && state.files.preview && !isNarrow()) {
+    pane = filePreviewPane();
+  }
+  return WorkspaceShell({ rail, sessions, main, pane, crumb, status, narrow: isNarrow(), stableFrame: true });
 }
 
 // The left workspace rail: brand, New chat action, and the primary view nav.
@@ -463,6 +488,9 @@ function workspaceRail() {
     brand: 'agentgui',
     action: { label: 'New chat', icon: 'pencil', onClick: () => { navTo('chat'); newChat(); } },
     items,
+    // W18: a persistent theme toggle pinned to the rail bottom (the Claude-Desktop
+    // / cowork pinned-bottom affordance). ThemeToggle is already imported.
+    footer: ThemeToggle({ compact: true }),
   });
 }
 
@@ -550,6 +578,9 @@ function sessionsColumn() {
   }));
   return ConversationList({
     sessions: items,
+    // Per-tab caption: selecting a row does different things on chat vs history,
+    // so disambiguate the visually-identical rows (W17).
+    caption: state.tab === 'chat' ? 'Resume a conversation in chat' : 'Browse a session\'s events',
     // 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),
@@ -587,7 +618,10 @@ async function loadDir(dirPath) {
     state.files.roots = j.roots || [];
     state.files.error = null;
   } catch (e) {
-    state.files.error = e.message;
+    // W9: translate HTTP status to plain, non-leaky copy.
+    state.files.error = e.status === 403
+      ? 'That folder is outside the allowed roots, or access is denied.'
+      : (e.status === 404 ? 'That folder no longer exists.' : (e.message || 'Could not list this directory.'));
     state.files.entries = [];
   }
   state.files.loading = false; render();
@@ -628,35 +662,69 @@ function closePreview() {
   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).
+// Build the inner preview body (image / code / text / loading / error) shared by
+// the modal FileViewer (<900px) and the inline FilePreviewPane (split view).
+function filePreviewBody(file) {
+  const f = state.files || {};
+  if (file.type === 'image') {
+    return FilePreviewMedia({ src: B.imageUrl(state.backend, file.path), type: 'image', name: file.name });
+  }
+  const ps = f.previewState;
+  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) {
+    return h('div', { class: 'lede empty-state', role: 'status', 'aria-live': 'polite' }, Spinner({ size: 'sm' }), 'loading…');
+  }
+  if (ps.error) {
+    return Alert({ kind: 'warn', title: 'Cannot preview file', children: ps.error });
+  }
+  const ext = (file.name.split('.').pop() || '').toLowerCase();
+  const lang = PREVIEW_LANG[ext];
+  return lang
+    ? FilePreviewCode({ content: ps.content, lang, filename: file.name })
+    : FilePreviewText({ content: ps.content, truncated: ps.truncated });
+}
+
+// The previewable (non-dir) neighbours of the current preview, in the same
+// sorted+filtered order the grid shows, so prev/next step through files the way
+// fsbrowse does. Returns { prev, next } file objects or null at the ends.
+function previewNeighbours() {
+  const f = state.files || {};
+  const file = f.preview;
+  if (!file || !Array.isArray(f._sorted)) return { prev: null, next: null };
+  const list = f._sorted.filter(e => e.type !== 'dir');
+  const i = list.findIndex(e => e.path === file.path);
+  if (i === -1) return { prev: null, next: null };
+  return { prev: i > 0 ? list[i - 1] : null, next: i < list.length - 1 ? list[i + 1] : null };
+}
+
+function openPreview(file) {
+  state.files.preview = file;
+  if (file.type !== 'image') loadPreviewContent(file);
+  render();
+}
+
+// Render the file preview MODAL (FileViewer) - the <900px fallback when there is
+// no room for the inline pane. Returns null when nothing is selected.
 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 });
+  const { prev, next } = previewNeighbours();
+  return FileViewer({ file, body: filePreviewBody(file), onClose: closePreview,
+    onPrev: prev ? () => openPreview(prev) : undefined,
+    onNext: next ? () => openPreview(next) : undefined });
+}
+
+// Render the inline file preview PANE (FilePreviewPane) for the WorkspaceShell
+// pane slot - the split-view, claude-Desktop file-pane feel.
+function filePreviewPane() {
+  const f = state.files || {};
+  const file = f.preview;
+  if (!file) return FilePreviewPane({});
+  const { prev, next } = previewNeighbours();
+  return FilePreviewPane({ file, body: filePreviewBody(file), onClose: closePreview,
+    onPrev: prev ? () => openPreview(prev) : undefined,
+    onNext: next ? () => openPreview(next) : undefined });
 }
 
 // Go up one directory from the current path (the FileGrid Backspace affordance).
@@ -700,6 +768,9 @@ function filesMain() {
     ? mapped.filter(e => e.name.toLowerCase().includes(f.filter.toLowerCase()))
     : mapped;
   const sorted = sortFiles(filtered, f.sort || 'name', f.sortDir || 'asc');
+  // Stash the sorted+filtered list so prev/next preview stepping walks the SAME
+  // order the grid shows (W6).
+  state.files._sorted = sorted;
   let body;
   if (f.error) {
     body = Alert({ key: 'ferr', kind: 'warn', title: 'Cannot list directory', children: f.error });
@@ -707,52 +778,60 @@ function filesMain() {
     body = FileGrid({
       files: sorted,
       loading: f.loading,
-      emptyText: f.filter ? 'no files match "' + f.filter + '"' : 'empty directory',
+      shown: f.shown,
+      onShowMore: (n) => { state.files.shown = n; render(); },
+      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(); } },
+      filter: { value: f.filter || '', placeholder: 'Filter files in this directory', onInput: (v) => { state.files.filter = v; state.files.shown = null; 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();
+        else openPreview(file);
+      },
+      // W7: download is the one mutation-free row action the read-only server
+      // supports. rename/delete are a deliberate scope cut (no mutation endpoints
+      // - documented in PUNCHLIST-COHESION.md), so only download is wired.
+      onAction: (act, file) => {
+        if (act === 'download' && file.type !== 'dir') {
+          const a = document.createElement('a');
+          a.href = B.downloadUrl(state.backend, file.path);
+          a.download = file.name; document.body.appendChild(a); a.click(); a.remove();
         }
       },
     });
   }
   // 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.
+  // kit RootsPicker segmented control so every allowed root is reachable in one
+  // click (not only by breadcrumb-walking down from the first).
   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))))
+    ? RootsPicker({
+        roots: roots.map((r) => ({ id: r, label: truncate(projectLabel(r) || r, 16, 28) })),
+        selected: f.path, onSelect: (r) => loadDir(r), label: 'Jump to an allowed root',
+      })
     : 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));
+  // Kit FileToolbar (replaces the hand-built .ds-file-toolbar markup).
+  const toolbar = FileToolbar({
+    left: [crumb],
+    right: [targetCwd
+      ? Btn({ key: 'usecwd', onClick: () => { state.chatCwd = targetCwd; lsSet('agentgui.cwd', targetCwd); announce('working directory set to ' + targetCwd); navTo('chat'); }, children: 'use as chat cwd' })
+      : null].filter(Boolean),
+  });
   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,
+    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 ? h('div', { key: 'froots' }, rootsRow) : null,
+    h('div', { key: 'ftb' }, 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,
+    // Inline pane handles wide-screen preview; the modal is only the <900px
+    // fallback (the pane has no room there).
+    (f.preview && isNarrow()) ? h('div', { key: 'fprev' }, filePreview()) : null,
   ].filter(Boolean);
 }
 
@@ -763,21 +842,36 @@ async function stopAllActive(sessions) {
   refreshActive();
 }
 
+// How long a session can go without activity (and without a running tool)
+// before it is treated as STALE - alive but not making progress, so a stuck
+// agent reads differently from a busy one.
+const STALE_AFTER_MS = 45000;
+// Rank for the error-then-stale-first ordering (W3).
+const STATUS_RANK = { error: 0, stale: 1, running: 2 };
+
 // --- 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 tally = state.live.tally || new Map();
+  const now = Date.now();
+  // Live-stream health: connected (recent event), connecting (opened, no event
+  // yet), or lost (errored). Feeds the dashboard header so "connected, 0 running"
+  // still tells the user the dashboard is listening.
+  const streamState = state.live.error ? 'lost' : (state.live.connected ? 'connected' : 'connecting');
+  let sessions = (Array.isArray(state.active) ? state.active : []).map((r) => {
+    // Activity tally: prefer the history-index row; fall back to the per-sid live
+    // tally so a brand-new chat not yet in the index still shows motion (W4).
     const sess = bySid.get(r.sessionId);
+    const t = tally.get(r.sessionId);
+    const events = sess && sess.events != null ? sess.events : (t ? t.events : null);
+    const tools = sess && sess.tools != null ? sess.tools : (t ? t.tools : 0);
+    const errors = sess && sess.errors != null ? sess.errors : (t ? t.errors : 0);
+    const lastTs = (sess && sess.last) || (t && t.last) || 0;
     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');
-    }
+    if (events != null) counterBits.push(events + ' ev');
+    if (tools) counterBits.push(tools + ' tools');
+    if (errors) counterBits.push(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 = '';
@@ -787,29 +881,62 @@ function liveMain() {
       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 || '';
     }
+    // W2: stale = no recent activity AND no running tool. Errors win over stale.
+    let status = 'running';
+    if (errors) status = 'error';
+    else if (!currentTool && lastTs && (now - lastTs) > STALE_AFTER_MS) status = 'stale';
     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' : '',
+      elapsed: r.startedAt ? Math.round((now - r.startedAt) / 1000) + 's' : '',
       counter: counterBits.length ? counterBits.join(' · ') : null,
-      lastActivity: sess && sess.last ? fmtRelTime(sess.last) : '',
+      lastActivity: lastTs ? fmtRelTime(lastTs) : '',
       currentTool,
-      status: (sess && sess.errors) ? 'error' : 'running',
+      status,
     };
   });
+  // W12: in-dir filter + errors-only toggle.
+  const lv = state.live;
+  if (lv.errorsOnly) sessions = sessions.filter(s => s.status === 'error');
+  if (lv.filter) {
+    const q = lv.filter.toLowerCase();
+    sessions = sessions.filter(s => (s.agent + ' ' + s.model + ' ' + s.cwd).toLowerCase().includes(q));
+  }
+  // W3/W12: sort. Default floats error then stale to the front (triage surface).
+  const sortKey = lv.sort || 'status';
+  sessions.sort((a, b) => {
+    if (sortKey === 'elapsed') return (parseInt(b.elapsed) || 0) - (parseInt(a.elapsed) || 0);
+    if (sortKey === 'activity') return (a.lastActivity ? 0 : 1) - (b.lastActivity ? 0 : 1);
+    if (sortKey === 'errors') return (a.status === 'error' ? 0 : 1) - (b.status === 'error' ? 0 : 1);
+    return (STATUS_RANK[a.status] ?? 9) - (STATUS_RANK[b.status] ?? 9);
+  });
+  const selected = lv.selected instanceof Set ? lv.selected : new Set();
   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.' }),
+    PageHeader({ compact: true, title: 'Live sessions', lede: 'Every in-flight agent session, managed at once. Stop, open, or jump to events per session.' }),
     SessionDashboard({
       sessions,
       offline,
+      streamState,
+      activeSid: state.chat.resumeSid,            // W13
+      sort: { value: sortKey, onChange: (v) => { state.live.sort = v; render(); } },
+      filter: { value: lv.filter || '', placeholder: 'Filter sessions', onInput: (v) => { state.live.filter = v; render(); } },
+      errorsOnly: !!lv.errorsOnly,
+      onErrorsOnly: (on) => { state.live.errorsOnly = on; render(); },
+      selectable: true,
+      selected,
+      onToggleSelect: (s) => {
+        const set = (state.live.selected instanceof Set) ? state.live.selected : new Set();
+        if (set.has(s.sid)) set.delete(s.sid); else set.add(s.sid);
+        state.live.selected = set; render();
+      },
+      onStopSelected: (sids) => { stopAllActive(sids.map(sid => ({ sid }))); state.live.selected = new Set(); },
       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);
@@ -977,6 +1104,16 @@ function chatMain() {
         'Find and explain the main entry point',
       ],
       onSuggestionClick: (t) => { if (!canSend()) return; state.chat.draft = t; sendChat(); },
+      // W14: a stable per-agent product mark (a line-SVG, not a per-agent letter)
+      // and the active target shown inline above the composer.
+      avatar: state.selectedAgent ? h('span', { class: 'agentchat-avatar-mark', 'aria-hidden': 'true' }, Icon('forum', { size: 16 })) : undefined,
+      composerContext: state.selectedAgent ? {
+        bits: [agentName, state.selectedModel || null, state.chatCwd ? state.chatCwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : 'server default'].filter(Boolean),
+        onClick: () => { state.cwdEditing = true; state.cwdDraft = state.chatCwd || ''; render(); },
+      } : undefined,
+      // W15: contextual follow-up chips after a settled assistant turn.
+      followups: state.chat.messages.length ? ['Explain that in more detail', 'Show me the diff', 'Run the tests'] : [],
+      onFollowupClick: (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),
@@ -1229,8 +1366,8 @@ function historyMain() {
       reconnectAlert(),
       PageHeader({
         compact: true,
-        title: 'history',
-        lede: 'pick a session from the sidebar - events stream live from ccsniff /v1/history.',
+        title: 'History',
+        lede: 'Pick a session from the sidebar - events stream live from ccsniff /v1/history.',
       }),
       h('div', { key: 'histempty', class: 'history-empty', role: 'status' },
         h('p', { key: 'gt', class: 'history-empty-title' },
@@ -1592,8 +1729,8 @@ function settingsMain() {
   return [
     PageHeader({
       compact: true,
-      title: 'settings',
-      lede: 'point agentgui at any backend. blank = same-origin (ccsniff in-process). ?backend=... or the field below persists via localStorage.',
+      title: 'Settings',
+      lede: 'Point agentgui at any backend. Blank = same-origin (ccsniff in-process). ?backend=... or the field below persists via localStorage.',
     }),
     h('div', { key: 'settings-grid', class: 'settings-grid' }, [
     Panel({

package/site/app/js/backend.js

@@ -59,7 +59,12 @@ export async function listDir(base, dirPath) {
   const seg = dirPath ? '/' + encodeURIComponent(dirPath) : '';
   const r = await authedFetch(base + '/api/list' + seg);
   const j = await r.json().catch(() => ({}));
-  if (!r.ok) throw new Error(j.error || ('list: ' + r.status));
+  if (!r.ok) {
+    // Carry the HTTP status so the app can map 403/404 to plain copy (W9).
+    const e = new Error(j.error || ('list: ' + r.status));
+    e.status = r.status;
+    throw e;
+  }
   return j;
 }
 
@@ -82,6 +87,12 @@ export function imageUrl(base, filePath) {
   return withToken(base + '/api/image/' + encodeURIComponent(filePath));
 }
 
+// Same-origin download URL (served by /api/download, attachment disposition,
+// confined + token-threaded). Used by the Files row download action.
+export function downloadUrl(base, filePath) {
+  return withToken(base + '/api/download/' + encodeURIComponent(filePath));
+}
+
 // ---------- History (HTTP, served by ccsniff) ----------
 
 export async function listSessions(base) {