agentgui 1.0.1005 → 1.0.1007

package/AGENTS.md

@@ -1,5 +1,9 @@
 # AgentGUI — Agent Notes
 
+## GUI perceived-performance sweep (2026-07-02) — twenty-third run
+
+Small, targeted run landing the 22nd-run's deferred perceived-perf findings. `index.html` now `modulepreload`s the marked/dompurify ESM CDN modules (was preconnect-only) so the fetch starts in parallel with the kit/app module graph instead of waiting for `markdown.js`'s dynamic import on the first chat response's escaped-text-to-rendered-markdown swap. Settings server panel shows "checking…" instead of "unknown" for version/uptime/clients/projects-folder during the very first health probe (new `state.healthChecking` flag around `recheckHealth`'s await — "unknown" reads as a permanent broken-server fact, not in-flight loading). Settings agents panel title shows "agents · loading…" instead of the literal "agents · 0/0 installed" while the initial fetch is in flight. Still deferred (its own PRD row, re-scoped not dropped): first-render network-gating — the shell paints nothing between the boot-splash and health-probe completion, needing a render-architecture change (skeleton/optimistic shell) bigger than this run's slice. No kit changes this run. agentgui pushed `6a045ba`, 28/28 tests, 0 console errors.
+
 ## GUI ux-craft sweep (2026-07-02) — twenty-second run
 
 `gui-ux-craft` workflow wf_48cd6bae-6ae (35 agents, 20 confirmed). Kit (`../design`): **accent-on-paper contrast fix** — `var(--accent)` (lime, fill-only per its own token comment) was used directly as TEXT color in 7 sites and as a non-text FILL in 3 more (the live status dot, green session-rail fill), rendering ~1.07:1 contrast on the paper theme (WCAG needs 4.5:1 text / 3:1 non-text). Swapped all 10 to `--accent-ink`; borders/outlines/box-shadows on the same rules stayed on `--accent` (already non-text-passing). Four typography-rhythm fixes: `.ds-dash-title` now matches `.ds-session-title` size (was one step larger despite a comment claiming parity), `ContextPane` Row meta/sub now match the kit-wide Row default size (were one step smaller, `.sub` also dropped an unwanted forced monospace), `.ds-session-group-label` now matches `.panel-head`/`table th` sizing, `.ws-crumb` height now derives from `--app-crumb-h` instead of an unlinked magic number. Session rail's new-chat button and search input now share a 36px desktop height. `.ds-file-act` gained an explicit `:focus-visible` ring (was the only icon/toolbar-button family without one).
@@ -109,7 +113,7 @@ Shipped the three-column **WorkspaceShell** + **WorkspaceRail** (kit `shell.js`,
 
 ## GUI-predictability sweep closure (2026-06-05) — third maximum-effort run
 
-Fan-out reviewers (chat/history/settings/shell + perf/security/glyph/override) -> adversarial verify -> 19 PRD rows fixed+pushed: agentgui `fe94ade`, kit `anentrypoint-design` `236d6ef` (publish.yml -> npm/unpkg). The headline theme was **override-elimination**: index.html's `!important` overrides were converted to kit defaults (Topbar active-tab = tinted+underline; `PageHeader` `compact` prop -> `.ds-section-compact` margin-top:0; `Row` `cursor:pointer` for `role=button`/`a.row`; kit `Chat` dropped the decorative head `.dot`). Also: kit `ToolCallNode` `(no output)` placeholder for done+empty tools; kit `safeUrl()` rejects `javascript:`/`data:`/`file:` in `renderInline`/image/link parts (inline renderer bypasses DOMPurify); streaming chat text uses the `.chat-md` container to avoid settle reflow. App reconciliation/state fixes (distinct backend-status keys, per-sid running-dot key, stale-selectedSid clear, per-session live counter, toolLabel scalar fallback, expand/collapse-**shown** relabel, projectFilter cleared on search). `.claude/workflows/gui-audit.js` gained an `overrides` surface + a **KEPT-SET glyph guard** in both the reviewer and the adversarial verifier (the middot/ellipsis/em-dash are kept product typography — never flag them). Detail + the kit dist `git add -f` / rebase-rebuild caveat in rs-learn (recall "agentgui GUI-predictability sweep"). **index.html loads the kit from LOCAL `./vendor/anentrypoint-design/247420.{js,css}`** — the vendored copy IS what ships; update flow is edit kit -> `node scripts/build.mjs` -> copy dist into vendor -> browser-witness -> push kit.
+Override-elimination pass (index.html `!important` -> kit defaults) + 19 other PRD rows. Full detail in rs-learn (recall "agentgui 3rd run GUI-predictability sweep closure").
 
 ## GUI-audit closure (2026-06-04 fan-out) — second maximum-effort sweep
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.1005",
+  "version": "1.0.1007",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",

package/scripts/validate-mutations.mjs

@@ -39,6 +39,18 @@ await check('mkdir-ads-colon', 400, await post('/api/mkdir', { dir: ROOT, name:
 // one). On a PASSWORD-gated server the auth wall rejects it first (401);
 // open servers hit the CSRF guard (403). Either way the mutation is refused.
 await check('csrf-cross-site-form', process.env.PASSWORD ? 401 : 403, await post('/api/delete', 'path=x', { 'Content-Type': 'application/x-www-form-urlencoded', 'Sec-Fetch-Site': 'cross-site' }));
+// The upload PUT is octet-stream, not a form-postable content-type, but the
+// CSRF guard's stated reasoning (rides the same-origin SPA fetch) only holds
+// if a cross-site PUT is actually rejected the same way POST/DELETE are.
+// Deliberately omits AUTH here (unlike every other case in this file): the
+// guard's `authed` bypass is legitimate for a Bearer token an attacker page
+// cannot read, but including it here would test the wrong thing (a stolen-
+// token scenario, not CSRF) - this asserts the cookie/no-credential path a
+// real cross-site attacker is actually limited to.
+await check('csrf-cross-site-upload', process.env.PASSWORD ? 401 : 403,
+  await fetch(BASE + '/api/upload-file?dir=' + encodeURIComponent(ROOT) + '&name=csrf-probe.txt', {
+    method: 'PUT', headers: { 'Sec-Fetch-Site': 'cross-site' }, body: 'x',
+  }).then(async r => ({ status: r.status, body: await r.text() })));
 // round trip
 await check('mkdir-ok', 200, await post('/api/mkdir', { dir: ROOT, name: '_wtest' }));
 const up = await fetch(BASE + '/api/upload-file?dir=' + encodeURIComponent(join(ROOT, '_wtest')) + '&name=up.txt', { method: 'PUT', headers: AUTH, body: 'hello upload' });

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, Icon, EventList, Spinner, Alert, FileGrid, FileSkeleton, sortFiles, FileToolbar, RootsPicker, BreadcrumbPath, EmptyState, FileViewer, FilePreviewPane, FilePreviewCode, FilePreviewText, FilePreviewMedia, ThemeToggle, ContextPane, PromptDialog, ConfirmDialog, DropZone, UploadProgress, FilterPills, SessionMeta, BulkBar, Checkbox, ShortcutList } = 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, PromptDialog, ConfirmDialog, DropZone, UploadProgress, FilterPills, SessionMeta, BulkBar, Checkbox, ShortcutList, FocusTrap } = C;
 
 // One duration/bytes vocabulary across every surface: prefer the kit's shared
 // formatters (exported alongside the components), fall back to the local
@@ -51,7 +51,7 @@ const ARM_RESET_MS = 4000;
 
 // Full routable param set. Every view-defining piece of state round-trips
 // through the hash so reload and Back/forward restore the exact view.
-const HASH_KEYS = ['tab', 'sid', 'dir', 'file', 'q', 'project', 'section', 'filter'];
+const HASH_KEYS = ['tab', 'sid', 'dir', 'file', 'q', 'project', 'section', 'filter', 'lsort', 'lfilter', 'lerr'];
 function readHash() {
   const hash = location.hash || '';
   const out = {};
@@ -82,6 +82,12 @@ function buildHash() {
     if (state.projectFilter) parts.push('project=' + encodeURIComponent(state.projectFilter));
   }
   if (tab === 'settings' && state.settingsSection) parts.push('section=' + encodeURIComponent(state.settingsSection));
+  if (tab === 'live') {
+    const lv = state.live || {};
+    if (lv.sort && lv.sort !== 'status') parts.push('lsort=' + encodeURIComponent(lv.sort));
+    if (lv.filter) parts.push('lfilter=' + encodeURIComponent(lv.filter));
+    if (lv.errorsOnly) parts.push('lerr=1');
+  }
   return parts.length ? '#' + parts.join('&') : '';
 }
 function writeHash({ push = false } = {}) {
@@ -602,10 +608,12 @@ function view() {
 
   const shortcutsHint = state.showShortcuts
     ? h('div', { key: 'sc', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Keyboard shortcuts', class: 'ds-alert ds-alert--info shortcuts-dialog' },
-        h('div', { key: 'sc-head', class: 'ds-alert-head' },
-          h('span', { key: 'sc-title', class: 'ds-alert-title' }, 'Keyboard shortcuts'),
-          h('button', { key: 'sc-close', type: 'button', class: 'ds-btn', 'aria-label': 'Close keyboard shortcuts', ref: (el) => { if (el) requestAnimationFrame(() => el.focus()); }, onClick: () => { state.showShortcuts = false; render(); announce('shortcuts closed'); } }, 'close')),
-        h('div', { key: 'sc-body', class: 'ds-alert-body' }, ShortcutList({ shortcuts: SHORTCUTS })))
+        FocusTrap({ children: [
+          h('div', { key: 'sc-head', class: 'ds-alert-head' },
+            h('span', { key: 'sc-title', class: 'ds-alert-title' }, 'Keyboard shortcuts'),
+            h('button', { key: 'sc-close', type: 'button', class: 'ds-btn', 'aria-label': 'Close keyboard shortcuts', onClick: () => { state.showShortcuts = false; render(); announce('shortcuts closed'); } }, 'close')),
+          h('div', { key: 'sc-body', class: 'ds-alert-body' }, ShortcutList({ shortcuts: SHORTCUTS })),
+        ] }))
     : null;
   const main = h('div', { id: 'agentgui-main', role: 'region', 'aria-label': 'main content', 'data-chat-scroll': '', class: 'agentgui-main agentgui-main-' + state.tab }, [shortcutsHint, ...mainContent()].filter(Boolean));
 
@@ -1467,7 +1475,8 @@ function filesMain() {
 const LIVE_PREFS_KEY = 'agentgui.live';
 const FILES_PREFS_KEY = 'agentgui.files';
 function persistLivePrefs() {
-  lsSet(LIVE_PREFS_KEY, JSON.stringify({ sort: state.live.sort || 'status', errorsOnly: !!state.live.errorsOnly }));
+  lsSet(LIVE_PREFS_KEY, JSON.stringify({ sort: state.live.sort || 'status', errorsOnly: !!state.live.errorsOnly, filter: state.live.filter || '' }));
+  if (state.tab === 'live') writeHash();
 }
 function persistFilesPrefs() {
   lsSet(FILES_PREFS_KEY, JSON.stringify({ sort: state.files.sort || 'name', sortDir: state.files.sortDir || 'asc', density: state.files.density || 'list' }));
@@ -1475,7 +1484,7 @@ function persistFilesPrefs() {
 function hydratePrefs() {
   try {
     const lv = JSON.parse(lsGet(LIVE_PREFS_KEY) || 'null');
-    if (lv) { if (lv.sort) state.live.sort = lv.sort; state.live.errorsOnly = !!lv.errorsOnly; }
+    if (lv) { if (lv.sort) state.live.sort = lv.sort; state.live.errorsOnly = !!lv.errorsOnly; if (lv.filter) state.live.filter = lv.filter; }
   } catch {}
   try {
     const fp = JSON.parse(lsGet(FILES_PREFS_KEY) || 'null');
@@ -1700,7 +1709,7 @@ function liveMain() {
       streamState,
       activeSid: activeCard ? activeCard.sid : state.chat.resumeSid,   // W13
       sort: { value: sortKey, onChange: (v) => { state.live.sort = v; persistLivePrefs(); render(); } },
-      filter: { value: lv.filter || '', placeholder: 'Filter sessions', onInput: (v) => { state.live.filter = v; render(); } },
+      filter: { value: lv.filter || '', placeholder: 'Filter sessions', onInput: (v) => { state.live.filter = v; persistLivePrefs(); render(); } },
       errorsOnly: !!lv.errorsOnly,
       onErrorsOnly: (on) => { state.live.errorsOnly = on; persistLivePrefs(); render(); },
       selectable: true,
@@ -2730,10 +2739,13 @@ function historyMain() {
             rail,
             expanded,  // disclosure state -> kit Row sets aria-expanded
             highlight: q || undefined,
-            actions: expanded ? [{
+            // Copy is available whether or not the row is expanded - a user
+            // scanning collapsed rows for a specific payload shouldn't have
+            // to expand every row first just to copy one.
+            actions: [{
               label: 'copy', title: 'copy event',
               onClick: () => copyText(full || raw || ('(' + type + ')'), 'event copied'),
-            }] : undefined,
+            }],
             title: expanded ? (typePrefix + (text || '(' + type + ')')) : (collapsedTitle || typePrefix + '(' + type + ')'),
             detail: expanded && e.toolInput ? JSON.stringify(e.toolInput, null, 2) : undefined,
             // Guard ts: a missing/zero timestamp renders "Invalid Date" otherwise.
@@ -3211,7 +3223,11 @@ function agentsPanel() {
             onClick: usable ? () => { navTo('chat'); selectAgent(a.id); } : undefined,
             right: (acp && !acp.healthy)
               ? [Btn({ key: 'acprestart', onClick: (e) => { e.stopPropagation(); B.restartAcpAgent(state.backend, a.id).then(() => loadAgents()); }, children: 'restart' })]
-              : undefined,
+              // Direct-runner agents (claude-code/agy) have no restart, but a
+              // 'not installed' verdict can go stale if the user installs the
+              // CLI mid-session - give it the same recheck affordance ACP rows
+              // get via 'restart', instead of only static prose.
+              : (!avail ? [Btn({ key: 'agrecheck', onClick: (e) => { e.stopPropagation(); loadAgents(); }, children: 're-check' })] : undefined),
           });
         })
       // The empty array means one of three things; never let an in-flight load
@@ -3501,6 +3517,11 @@ async function init() {
     }
     if (bootTab === 'history' && hp.q) state.searchQ = hp.q;
     if (bootTab === 'history' && hp.project) state.projectFilter = hp.project;
+    if (bootTab === 'live') {
+      if (hp.lsort) state.live.sort = hp.lsort;
+      if (hp.lfilter) state.live.filter = hp.lfilter;
+      if (hp.lerr) state.live.errorsOnly = true;
+    }
     navTo(bootTab, { push: false });
     if (bootTab === 'history' && state.searchQ.trim().length >= 2) runSearch();
     if (bootTab === 'settings' && hp.section) focusSettingsSection(hp.section);