agentgui 1.0.961 → 1.0.963

package/AGENTS.md

@@ -1,5 +1,17 @@
 # AgentGUI — Agent Notes
 
+## Files command surface + PASSWORD-boot fix (2026-06-11) — eleventh run
+
+Lands the 10th run's deferred batch + the janks a live witness surfaced on this env. **Kit path on this (linux) env is `../design` = `/config/workspace/design`** (same repo as `c:\dev\anentrypoint-design` on the windows env); update flow unchanged: edit kit -> `node scripts/build.mjs` -> copy `dist/247420.{js,css}` into `site/app/vendor/anentrypoint-design/` -> witness -> push both.
+
+**CRITICAL fix - PASSWORD-gated deploys could never boot the SPA.** `/gm/?token=` served index.html but the static subresources (`gm/js/app.js`, `gm/vendor/247420.{js,css}`) carry no token -> 401 -> blank page forever (witnessed: `readyState` stuck `loading`, `hasAgentgui:false`). `lib/http-handler.js` now sets an HttpOnly SameSite=Lax `agentgui_token` cookie (URL-encoded) on any successful auth and the gate accepts it; WS keeps `?token=`. Lax + the CSRF guard keep cross-site mutations rejected (a cross-site form never carries the Lax cookie on POST).
+
+**Files is a command surface.** Kit `FileGrid` gains multi-select (`selectable`/`marked` Set keyed by path/`onMark({range})` shift-ranges/`onSelectAll`/`onClearSelection`, tri-state `[x]/[-]/[ ]` header checkbox over SHOWN rows, EACCES rows unmarkable, Ctrl/Cmd+A in-grid) + density modes (`density` list/compact/thumb + `onDensity` radiogroup; thumb tiles via `FileCell` with lazy `thumbUrl` images) + new `BulkBar` export (`{count,noun,nounPlural,actions,onClear,busy}`, pluralizes `-y` nouns). App: `state.files.marked` (cleared on dir change, pruned on refresh), BulkBar -> armed `bulk-delete` ConfirmDialog -> `Promise.allSettled` over the confined delete (failures STAY selected + count in dialog), Escape clears selection (ladder slot after stop-arms), density persisted in `agentgui.files`. **thumbUrl uses `downloadUrl` (fsAllowRoots) NOT `imageUrl` - `/api/image` has its own narrower allowlist and 403s repo files; `<img>` ignores the attachment disposition.**
+
+**Shipped-jank fixes the witness caught.** (1) `.ds-file-open` (run 5) never had CSS - FileRow's UA-styled button sat in a grid sized for the old flat children; row+open are now flex strips with a full button reset. (2) filesMain DROPPED `permissions` in its entry mapping - the EACCES/read-only affordances were dead on the files tab. (3) The Crumb narrow collapse keys on the `.app` @container which doesn't exist under WorkspaceShell -> `.crumb-right` overflowed 420px viewports (h-scroll); mirrored into the `.ws-*` 900px media block. (4) webjsx attr-diff can leave a null-valued attribute unset when toggling - `data-density` is now always concrete. (5) F3 elevation unification: `.panel` = bg-2 + hairline + r-2 (no `--panel-shadow`), seg-control is-on = inset ring, chat image/pdf/link hover lift shadows dropped; overlay shadows (modal, jump pill) stay.
+
+**Env/tooling.** `scripts/validate-mutations.mjs` is now portable (ROOT from env/cwd, sep-aware joins, posix traversal targets, Bearer from PASSWORD; csrf case expects 401 under PASSWORD / 403 open) - 17/17 PASS on this env. Browser witnessing here: plugkit's chromium needs `--no-sandbox` (written to `/etc/chromium.d/no-sandbox`); `page.goto` waits on hung CDN subresources so use `waitUntil:'commit'` + `waitForSelector`; the witness body is shell-interpolated (NEVER use `$(...)`/backticks - use `page.locator(...)`); same-URL `goto` with only a hash change does NOT reload (use `page.reload()` after re-vendoring).
+
 ## GUI Claude-Code-web parity sweep (2026-06-11) — tenth maximum-effort run
 
 Hunts the VISUAL + LAYOUT + MOTION design-language parity gap vs claude.ai/code (the user verdict: too primitive, layout jank). New workflow `.claude/workflows/gui-claude-code-parity.js` (6 design-language lenses: visual-language, layout-composition, chat-thread-craft, file-browser-fidelity, live-session-command, motion-microinteraction; hunt -> adversarial verify (kept-typography guard) -> plan). 66 agents -> 37 confirmed gaps (`PUNCHLIST-PARITY.md`). Pushed: kit `anentrypoint-design` 28387c3, agentgui 0a93fc6.
@@ -38,21 +50,7 @@ Coverage run reversing the prior scope cuts. Workflow `.claude/workflows/gui-com
 
 ## GUI cohesion sweep (2026-06-10) — seventh maximum-effort run
 
-The GUI reads as ONE polished chat-agent product (claude.ai/code / cowork / Claude-Desktop), not a kit of parts. New workflow deliverable `.claude/workflows/gui-cohesion.js` — 6 cohesion *lenses* (chat-agent-feel, fsbrowse-file-view, simultaneous-live-sessions, shell-navigation, visual-system, crosscut-perf-a11y-security) benchmark each surface against the real reference products, an adversarial verifier confirms each gap (kept-typography guard), a synthesizer orders them. Distinct from `gui-audit` (jank), `gui-overhaul` (new surfaces), `gui-predictability-polish` (primitive edges) — this one hunts the **product-cohesion/feel gap**. Ran 61 agents -> 40 confirmed gaps (`PUNCHLIST-COHESION.md`).
-
-**Chat reads like a chat agent.** Every fenced code block has a per-block copy button: kit `chat.js` `injectCodeCopy()` wraps each rendered-markdown `<pre>` in `.chat-code-block` and injects a reveal-on-hover `.chat-code-copy` (idempotent via `data-copy-wired`, label flips copy->copied); the structured `CodeNode` head and `FilePreviewCode` header carry the same control. `ChatMessage` per-message actions render a text label beside the icon and use a real `copy` icon (not `page`). Mid-stream prose containing a code fence renders as a monospaced `<pre>` shell (`agent-chat.js` sets `preShell`, `chat.js` text renderer honors it) so it does not reflow prose->block on settle. `ChatComposer` shows a `context` line (agent · model · cwd) at the point of typing; `AgentChat` threads a stable per-agent `avatar` and `followups` chips after a settled turn.
-
-**Files is an fsbrowse-grade browser.** Kit `files.js` `FileGrid` caps a large dir at `FILE_GRID_CAP=200` with a `shown`/`onShowMore` "show N more" row, uses `role=group` (NOT `listbox` — the rows host real action `<button>`s, which is invalid listbox/option semantics), `FileRow` shows a `permissions`/`locked` ASCII tag (`read-only`/`no access`) and disables open for EACCES, and a `RootsPicker` segmented control replaces the borrowed history `.pill`. `files-modals.js` ships `FilePreviewPane` (a non-modal split-view region for the shell pane) alongside the modal `FileViewer` (kept as the `<900px` fallback), both with an ASCII `prev`/`next` stepper (`onPrev`/`onNext` + ArrowLeft/Right). The app renders the preview INTO the WorkspaceShell pane when wide, modal only when narrow.
-
-**All live sessions, managed at once.** Kit `sessions.js` `SessionCard` gains a `stale` status (`idle` word + non-pulsing `.status-dot-stale`, so a stuck agent differs from a busy one), a `selectable` checkbox (`role=checkbox`), and an `active` accent. `SessionDashboard` gains a sort `Select` (status/elapsed/activity/errors) + filter `SearchInput` + errors-only toggle, `stop-selected` bulk control, and a `streamState` line (the dashboard is listening even at 0 running). App `liveMain` derives `stale` (no activity >45s and no running tool), floats error-then-stale to the front, and keeps a per-sid `state.live.tally` incremented straight off the SSE stream so a brand-new chat shows motion before it lands in the history index.
-
-**One shell, one visual system.** Kit `shell.js` `WorkspaceShell` `stableFrame` keeps the pane grid TRACK present (width 0) when a tab has no pane, so the column geometry does not re-flow across tabs. There is ONE canonical `.status-dot-disc` (`status-dot-live` pulses via `color-mix`, `-error`/`-connecting`/`-stale` static, reduced-motion guarded) — `index.html`'s `.status-dot`/`agentgui-pulse` override is deleted and the crumb dot uses the kit modifier classes. `.ds-session-row.rail-*` tones now match `.row.rail-*` (accent/purple-2/flame). The rail footer pins a `ThemeToggle`; page titles are sentence-case. Touch targets floor to 44px under `@media (pointer:coarse)`.
-
-**Server.** `lib/http-handler.js` `/api/list` reports a per-entry `permissions` (`['read','write']` | `'EACCES'`) via `fs.accessSync`. New confined `/api/download` (raw bytes, `confineToRoots` realpath, 50MB cap, attachment disposition) — verified to 403 both out-of-roots and traversal. `backend.js` `listDir` carries `r.status` so the app maps 403/404 to plain copy; `downloadUrl()` is token-threaded.
-
-**Scope cuts (documented in punch-list, not gaps).** File rename/delete (read-only browser, no mutation endpoints), upload/DropZone (legacy `routes-upload.js` is conversationId-keyed, not reusable), retry kept last-turn-only (mid-thread retry would destroy history).
-
-**Witness.** localhost:3000/gm/ 0 console/page errors across chat/files/live/settings/history; per-block code copy + preview pane (opens with prev/next stepper) + dashboard stream line render; whole-DOM decorative-glyph count 0 (kept middot/ellipsis/dash); no h-scroll; a11y skip-link/`role=group`/`role=checkbox`/44px verified. Kit `lint-tokens`+`lint-glyphs` pass on build. **The app.js `C` destructure MUST list every kit component it calls (`Icon`/`RootsPicker`/`FilePreviewPane` were missing — the browser witness caught `Icon is not defined`).** Update flow unchanged: edit kit -> `node scripts/build.mjs` -> copy `dist/247420.{js,css}` into `site/app/vendor/anentrypoint-design/` -> witness -> push kit (rebase + rebuild dist when remote advances).
+One-product feel sweep (61 agents -> 40 gaps, `PUNCHLIST-COHESION.md`, workflow `.claude/workflows/gui-cohesion.js`): per-block code copy, FilePreviewPane split view, SessionDashboard sort/filter/stale/stop-selected, stableFrame, one canonical `.status-dot-disc`, confined `/api/download`, per-entry `permissions`. Full detail in rs-learn (recall "agentgui GUI cohesion sweep 7th run"). Standing rule: **the app.js `C` destructure MUST list every kit component it calls** (a witness caught `Icon is not defined`).
 
 ## GUI predictability + polish sweep (2026-06-05) — fifth maximum-effort run
 
@@ -248,3 +246,5 @@ GUI source keeps typographic product characters — the middot separator `·`, t
 ## DS load = LOCAL vendor (resolved — the earlier unpkg note is stale)
 
 **`index.html` loads the DS kit from the local `./vendor/anentrypoint-design/247420.{js,css}`, NOT unpkg.** The prior "moved to unpkg @latest" note described a transient state that was reverted: the kit was re-vendored (with `AgentChat`) in `eb1eab3` and witnessed loading from `./vendor/` again (2026-06-04 and 2026-06-05 runs). The vendored copy IS the shipped UI — predictable, no upstream-publish drift. Update flow: edit the kit at `c:\dev\anentrypoint-design`, `node scripts/build.mjs`, copy `dist/247420.{js,css}` into `site/app/vendor/anentrypoint-design/`, browser-witness, then push the kit so unpkg stays in sync for other consumers. (The markdown stack marked/dompurify/prismjs still fetches from jsdelivr on first chat render.)
+
+@.gm/next-step.md

package/PUNCHLIST-PARITY.md

@@ -34,3 +34,9 @@ build.mjs -> copy dist into site/app/vendor -> witness localhost:3000/gm/ (0 err
 
 ## Descoped
 - `/api/move-confined` drag-to-move endpoint: checkbox + bulk-delete uses the existing delete loop; new endpoint cut unless drag-to-move lands.
+
+## Landed by the 11th run (2026-06-11)
+- G-multiselect + BulkBar: kit FileGrid selectable/marked/onMark(range)/tri-state select-all + BulkBar export; app marked Set + armed bulk-delete via allSettled (failures stay selected); Escape clears; Ctrl/Cmd+A.
+- G-density: list/compact/thumb radiogroup + FileCell thumbnail tiles (confined downloadUrl), persisted in agentgui.files.
+- F3 elevation unification: .panel hairline+bg-2+r-2, no panel/card/hover drop-shadows; overlays keep theirs.
+- Toolbar up-button + grid keys in SHORTCUTS: landed previously in 503f66e.

package/lib/http-handler.js

@@ -156,10 +156,29 @@ export function createHttpHandler({ BASE_URL, expressApp, queries, sendJSON, ser
         _ok = _checkToken(_auth.slice(7));
       }
       // EventSource and same-origin links can't set headers - accept ?token= as fallback.
+      let _viaQuery = false;
       if (!_ok) {
         try {
           const _qsTok = new URL(req.url, 'http://localhost').searchParams.get('token');
-          if (_qsTok) _ok = _checkToken(_qsTok);
+          if (_qsTok) { _ok = _checkToken(_qsTok); _viaQuery = _ok; }
+        } catch (_) {}
+      }
+      // Static subresources (js/css/vendor) are requested by the BROWSER, which
+      // can attach neither a header nor a ?token= - without a cookie the SPA
+      // can never boot behind PASSWORD (index.html 200s, app.js 401s, blank
+      // page). On any successful auth, set an HttpOnly SameSite=Lax cookie the
+      // gate accepts for subsequent requests. Lax + the CSRF guard below keep
+      // cross-site mutations rejected; the value is URL-encoded (a password
+      // may carry cookie-hostile characters like commas).
+      if (!_ok) {
+        try {
+          const _ck = req.headers['cookie'] || '';
+          const _m = /(?:^|;\s*)agentgui_token=([^;]+)/.exec(_ck);
+          if (_m) _ok = _checkToken(decodeURIComponent(_m[1]));
+        } catch (_) {}
+      } else if (_viaQuery || _auth) {
+        try {
+          res.setHeader('Set-Cookie', 'agentgui_token=' + encodeURIComponent(_pwd) + '; Path=/; HttpOnly; SameSite=Lax');
         } catch (_) {}
       }
       if (!_ok) { res.writeHead(401, { 'WWW-Authenticate': 'Basic realm="agentgui"' }); res.end('Unauthorized'); return; }

package/package.json

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

package/scripts/validate-mutations.mjs

@@ -1,7 +1,16 @@
 // Live security validation of the confined file-mutation endpoints.
 // Run with the server up: node scripts/validate-mutations.mjs
+// Portable: ROOT defaults to this repo (an allowed root on both platforms);
+// override with VALIDATE_ROOT. A PASSWORD-gated server is handled via the
+// PASSWORD env var (Bearer), matching lib/http-handler.js.
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 const BASE = process.env.BASE || 'http://localhost:3000';
-const J = { 'Content-Type': 'application/json' };
+const ROOT = process.env.VALIDATE_ROOT || path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const SEP = ROOT.includes('\\') ? '\\' : '/';
+const WIN = SEP === '\\';
+const AUTH = process.env.PASSWORD ? { Authorization: 'Bearer ' + process.env.PASSWORD } : {};
+const J = { 'Content-Type': 'application/json', ...AUTH };
 const results = [];
 async function post(route, body, headers = J) {
   const r = await fetch(BASE + route, { method: 'POST', headers, body: typeof body === 'string' ? body : JSON.stringify(body) });
@@ -11,29 +20,35 @@ async function check(name, expected, actual) {
   const ok = actual.status === expected;
   results.push({ name, expected, got: actual.status, ok, body: actual.body.slice(0, 80) });
 }
-const ROOT = 'C:\\dev\\agentgui';
+const join = (...parts) => parts.join(SEP);
+const OUTSIDE = WIN ? 'C:\\Windows\\Temp\\x.txt' : '/etc/hostname';
+const OUTSIDE_DIR = WIN ? 'C:\\Windows' : '/etc';
+const TRAVERSAL = join(ROOT, '..', '..', ...(WIN ? ['Windows', 'win.ini'] : ['etc', 'passwd']));
 // security cases
-await check('rename-traversal', 403, await post('/api/rename', { path: ROOT + '\\..\\..\\Windows\\win.ini', newName: 'x.txt' }));
-await check('delete-out-of-roots', 403, await post('/api/delete', { path: 'C:\\Windows\\Temp\\x.txt' }));
+await check('rename-traversal', 403, await post('/api/rename', { path: TRAVERSAL, newName: 'x.txt' }));
+await check('delete-out-of-roots', 403, await post('/api/delete', { path: OUTSIDE }));
 await check('delete-root-refused', 403, await post('/api/delete', { path: ROOT }));
 await check('mkdir-reserved-name', 400, await post('/api/mkdir', { dir: ROOT, name: 'CON' }));
 await check('mkdir-name-with-separator', 400, await post('/api/mkdir', { dir: ROOT, name: 'a/b' }));
 await check('mkdir-name-trailing-dot', 400, await post('/api/mkdir', { dir: ROOT, name: 'evil.' }));
 await check('mkdir-ads-colon', 400, await post('/api/mkdir', { dir: ROOT, name: 'a:b' }));
-await check('csrf-cross-site-form', 403, await post('/api/delete', 'path=x', { 'Content-Type': 'application/x-www-form-urlencoded', 'Sec-Fetch-Site': 'cross-site' }));
+// A real cross-site form carries no Authorization header (forms cannot set
+// 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' }));
 // 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(ROOT + '\\_wtest') + '&name=up.txt', { method: 'PUT', body: 'hello upload' });
+const up = await fetch(BASE + '/api/upload-file?dir=' + encodeURIComponent(join(ROOT, '_wtest')) + '&name=up.txt', { method: 'PUT', headers: AUTH, body: 'hello upload' });
 results.push({ name: 'upload-ok', expected: 200, got: up.status, ok: up.status === 200 });
-const up2 = await fetch(BASE + '/api/upload-file?dir=' + encodeURIComponent(ROOT + '\\_wtest') + '&name=up.txt', { method: 'PUT', body: 'x' });
+const up2 = await fetch(BASE + '/api/upload-file?dir=' + encodeURIComponent(join(ROOT, '_wtest')) + '&name=up.txt', { method: 'PUT', headers: AUTH, body: 'x' });
 results.push({ name: 'upload-conflict-409', expected: 409, got: up2.status, ok: up2.status === 409 });
-await check('rename-ok', 200, await post('/api/rename', { path: ROOT + '\\_wtest\\up.txt', newName: 'up2.txt' }));
-await check('rename-conflict-409', 409, await post('/api/rename', { path: ROOT + '\\_wtest\\up2.txt', newName: 'up2.txt' }));
-await check('delete-nonempty-no-recursive-409', 409, await post('/api/delete', { path: ROOT + '\\_wtest' }));
-await check('delete-recursive-ok', 200, await post('/api/delete', { path: ROOT + '\\_wtest', recursive: true }));
-const st = await fetch(BASE + '/api/stat/' + encodeURIComponent(ROOT));
+await check('rename-ok', 200, await post('/api/rename', { path: join(ROOT, '_wtest', 'up.txt'), newName: 'up2.txt' }));
+await check('rename-conflict-409', 409, await post('/api/rename', { path: join(ROOT, '_wtest', 'up2.txt'), newName: 'up2.txt' }));
+await check('delete-nonempty-no-recursive-409', 409, await post('/api/delete', { path: join(ROOT, '_wtest') }));
+await check('delete-recursive-ok', 200, await post('/api/delete', { path: join(ROOT, '_wtest'), recursive: true }));
+const st = await fetch(BASE + '/api/stat/' + encodeURIComponent(ROOT), { headers: AUTH });
 results.push({ name: 'stat-ok', expected: 200, got: st.status, ok: st.status === 200 });
-const st2 = await fetch(BASE + '/api/stat/' + encodeURIComponent('C:\\Windows'));
+const st2 = await fetch(BASE + '/api/stat/' + encodeURIComponent(OUTSIDE_DIR), { headers: AUTH });
 results.push({ name: 'stat-outside-403', expected: 403, got: st2.status, ok: st2.status === 403 });
 let fail = 0;
 for (const r of results) { if (!r.ok) fail++; console.log((r.ok ? 'PASS' : 'FAIL') + ' ' + r.name + ' expected=' + r.expected + ' got=' + r.got + (r.ok ? '' : ' body=' + (r.body || ''))); }

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 } = 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 } = C;
 
 // One duration/bytes vocabulary across every surface: prefer the kit's shared
 // formatters (exported alongside the components), fall back to the local
@@ -496,6 +496,10 @@ const SHORTCUTS = [
   { keys: 'Enter / Shift+Enter', desc: 'send / new line (in the composer)' },
   { keys: '?', desc: 'show shortcuts' },
   { keys: 'Esc', desc: 'close overlays, cancel confirms, stop generation, or blur the field' },
+  { keys: 'Up / Down / Home / End', desc: 'move the focused file row (files grid)' },
+  { keys: 'Enter / Backspace', desc: 'open the focused file / go up a directory (files grid)' },
+  { keys: 'Ctrl/Cmd+A', desc: 'select all shown files (files grid); Shift+click selects a range' },
+  { keys: 'Left / Right', desc: 'previous / next file (file preview)' },
 ];
 
 function view() {
@@ -739,8 +743,16 @@ async function loadDir(dirPath, { fromHash = false } = {}) {
     const j = await B.listDir(state.backend, dirPath || '');
     // The filter text and show-more cap are per-directory state: keep them
     // across an in-place refresh (same path after a mutation), reset them when
-    // the resolved directory actually changed.
-    if (j.path !== state.files.path) { state.files.filter = ''; state.files.shown = null; }
+    // the resolved directory actually changed. The multi-select set follows the
+    // same rule: cleared on a real directory change, pruned to the surviving
+    // entries on an in-place refresh (a deleted file must not stay marked).
+    if (j.path !== state.files.path) {
+      state.files.filter = ''; state.files.shown = null;
+      state.files.marked = new Set(); state.files._lastMarkIdx = null;
+    } else if (state.files.marked && state.files.marked.size) {
+      const alive = new Set((j.entries || []).map((e) => e.path || e.name));
+      state.files.marked = new Set([...state.files.marked].filter((p) => alive.has(p)));
+    }
     state.files.path = j.path;
     state.files.segments = j.segments || [];
     state.files.entries = j.entries || [];
@@ -825,6 +837,69 @@ function openFileDialog(kind, file) {
   state.files.dialog = { kind, file: file || null, error: null, busy: false };
   render();
 }
+// --- multi-select (marked) helpers. Marked entries are keyed by path so the
+// set survives sort/filter changes; loadDir owns clearing/pruning it.
+function filesMarked() {
+  if (!(state.files.marked instanceof Set)) state.files.marked = new Set();
+  return state.files.marked;
+}
+function markFile(f, { range = false } = {}) {
+  const marked = filesMarked();
+  const key = f.path || f.name;
+  const list = state.files._sorted || [];
+  const idx = list.findIndex((e) => (e.path || e.name) === key);
+  if (range && state.files._lastMarkIdx != null && idx >= 0) {
+    // Shift-click: mark the whole span between the anchor and this row (always
+    // mark, never unmark - the common bulk gesture; EACCES rows are skipped).
+    const [a, b] = [Math.min(state.files._lastMarkIdx, idx), Math.max(state.files._lastMarkIdx, idx)];
+    for (const e of list.slice(a, b + 1)) {
+      if (e.permissions === 'EACCES') continue;
+      marked.add(e.path || e.name);
+    }
+  } else if (marked.has(key)) marked.delete(key);
+  else marked.add(key);
+  state.files._lastMarkIdx = idx >= 0 ? idx : null;
+  render();
+}
+function clearFileSelection({ quiet = false } = {}) {
+  const marked = filesMarked();
+  if (!marked.size) return false;
+  marked.clear();
+  state.files._lastMarkIdx = null;
+  if (!quiet) announce('selection cleared');
+  render();
+  return true;
+}
+// Bulk delete every marked entry via the same confined endpoint the per-row
+// delete uses. Partial failure keeps the FAILED paths marked (so a retry
+// targets exactly what's left) and surfaces a count in the dialog.
+async function runBulkDelete() {
+  const d = state.files.dialog;
+  if (!d || d.kind !== 'bulk-delete' || d.busy) return;
+  const marked = filesMarked();
+  const targets = (state.files.entries || []).filter((e) => marked.has(e.path || e.name));
+  if (!targets.length) { state.files.dialog = null; render(); return; }
+  d.busy = true; d.error = null; render();
+  const results = await Promise.allSettled(
+    targets.map((e) => B.deleteEntry(state.backend, e.path, e.type === 'dir')));
+  const failed = targets.filter((_, i) => results[i].status === 'rejected');
+  const okCount = targets.length - failed.length;
+  if (!failed.length) {
+    state.files.dialog = null;
+    marked.clear(); state.files._lastMarkIdx = null;
+    announce('deleted ' + okCount + ' ' + (okCount === 1 ? 'entry' : 'entries'));
+  } else {
+    // Keep only the failures marked; report the split inside the dialog.
+    state.files.marked = new Set(failed.map((e) => e.path || e.name));
+    const firstErr = results.find((r) => r.status === 'rejected');
+    d.busy = false;
+    d.error = 'deleted ' + okCount + ' of ' + targets.length + ' - '
+      + (failed.length === 1 ? '1 entry' : failed.length + ' entries') + ' failed ('
+      + fileMutationCopy(firstErr.reason || {}) + '). The failed entries stay selected.';
+  }
+  await loadDir(state.files.path, { fromHash: true });
+  render();
+}
 function closeFileDialog() {
   // A mid-flight close would orphan the mutation's result and swallow its
   // error - hold the dialog open until the operation settles.
@@ -936,6 +1011,20 @@ function fileDialog() {
       onConfirm: () => runFileMutation(() => B.deleteEntry(state.backend, d.file.path, isDir), 'deleted ' + d.file.name),
     });
   }
+  if (d.kind === 'bulk-delete') {
+    const n = filesMarked().size;
+    const hasDir = (state.files.entries || []).some((e) => filesMarked().has(e.path || e.name) && e.type === 'dir');
+    return ConfirmDialog({
+      title: 'Delete ' + n + ' selected ' + (n === 1 ? 'entry' : 'entries'),
+      message: (hasDir
+        ? 'Folders are deleted with everything inside them. '
+        : '') + 'This cannot be undone.',
+      error: d.error || null, busy: !!d.busy,
+      confirmLabel: d.busy ? 'deleting...' : 'delete ' + n, cancelLabel: 'cancel', destructive: true,
+      onCancel: closeFileDialog,
+      onConfirm: runBulkDelete,
+    });
+  }
   if (d.kind === 'mkdir') {
     return PromptDialog({
       title: 'New folder', value: '', placeholder: 'folder name',
@@ -1053,7 +1142,9 @@ function filesMain() {
   // 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 };
+    // permissions rides along so the kit's EACCES/read-only tag, disabled-open
+    // and unmarkable-checkbox logic actually fire (it was silently dropped here).
+    return { name: e.name, type: e.type, size: e.size, modified: ts ? fmtRelTime(ts) : null, modifiedTs: ts, path: e.path, permissions: e.permissions };
   });
   const filtered = f.filter
     ? mapped.filter(e => e.name.toLowerCase().includes(f.filter.toLowerCase()))
@@ -1072,6 +1163,20 @@ function filesMain() {
       shown: f.shown,
       onShowMore: (n) => { state.files.shown = n; render(); },
       emptyText: f.filter ? 'No files match "' + f.filter + '"' : 'Empty directory',
+      // Multi-select: marked is path-keyed; shift-click ranges over the same
+      // sorted order the grid shows; select-all covers the SHOWN window only.
+      selectable: !!f.path,
+      marked: filesMarked(),
+      onMark: markFile,
+      onSelectAll: (keys) => { state.files.marked = new Set(keys); state.files._lastMarkIdx = null; announce(keys.length + ' selected'); render(); },
+      onClearSelection: () => clearFileSelection(),
+      // Density: list / compact / thumbnails. Thumbnails stream through the
+      // confined /api/download (same fsAllowRoots as the listing - /api/image
+      // has its OWN narrower allowlist and 403s repo files; <img> ignores the
+      // attachment disposition).
+      density: f.density || 'list',
+      onDensity: (d2) => { state.files.density = d2; persistFilesPrefs(); render(); },
+      thumbUrl: (file) => B.downloadUrl(state.backend, file.path),
       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';
@@ -1115,6 +1220,9 @@ function filesMain() {
   const toolbar = FileToolbar({
     left: [crumb],
     right: [
+      // Explicit up-a-directory affordance for mouse users (the grid also takes
+      // Backspace); disabled at a root depth where fileUp would no-op.
+      Btn({ key: 'up', disabled: (f.segments || []).length <= 1, 'aria-label': 'up a directory', onClick: () => fileUp(), children: 'up' }),
       f.path ? Btn({ key: 'newdir', onClick: () => openFileDialog('mkdir'), children: 'new folder' }) : null,
       f.path ? Btn({ key: 'upload', onClick: () => {
         const inp = document.createElement('input');
@@ -1144,6 +1252,15 @@ function filesMain() {
     PageHeader({ compact: true, title: 'Files', lede: 'Browse and manage 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),
+    // Bulk action strip - appears while a multi-select is active; delete runs
+    // through the same armed ConfirmDialog vocabulary as the per-row delete.
+    filesMarked().size ? h('div', { key: 'fbulk' }, BulkBar({
+      count: filesMarked().size,
+      noun: 'entry',
+      busy: !!(f.dialog && f.dialog.kind === 'bulk-delete' && f.dialog.busy),
+      actions: [{ label: 'delete selected', danger: true, onClick: () => openFileDialog('bulk-delete') }],
+      onClear: () => clearFileSelection(),
+    })) : null,
     (f.uploads && f.uploads.length) ? h('div', { key: 'fup' }, UploadProgress({
       // Recovery affordances per row: 'replace' on a name collision (409),
       // dismiss on any error row (errors otherwise persist until the next batch).
@@ -1172,7 +1289,7 @@ function persistLivePrefs() {
   lsSet(LIVE_PREFS_KEY, JSON.stringify({ sort: state.live.sort || 'status', errorsOnly: !!state.live.errorsOnly }));
 }
 function persistFilesPrefs() {
-  lsSet(FILES_PREFS_KEY, JSON.stringify({ sort: state.files.sort || 'name', sortDir: state.files.sortDir || 'asc' }));
+  lsSet(FILES_PREFS_KEY, JSON.stringify({ sort: state.files.sort || 'name', sortDir: state.files.sortDir || 'asc', density: state.files.density || 'list' }));
 }
 function hydratePrefs() {
   try {
@@ -1181,7 +1298,7 @@ function hydratePrefs() {
   } catch {}
   try {
     const fp = JSON.parse(lsGet(FILES_PREFS_KEY) || 'null');
-    if (fp) { if (fp.sort) state.files.sort = fp.sort; if (fp.sortDir) state.files.sortDir = fp.sortDir; }
+    if (fp) { if (fp.sort) state.files.sort = fp.sort; if (fp.sortDir) state.files.sortDir = fp.sortDir; if (fp.density) state.files.density = fp.density; }
   } catch {}
 }
 
@@ -3250,6 +3367,9 @@ window.addEventListener('keydown', (e) => {
       clearTimeout(_stopAllArmTimer); clearTimeout(_stopSelArmTimer);
       render(); announce('stop cancelled'); return;
     }
+    // A live file multi-select is transient state too: Escape drops it before
+    // falling through to stop-generation.
+    if (state.tab === 'files' && filesMarked().size) { clearFileSelection(); return; }
     if (state.chat.busy && state.tab === 'chat') { cancelChat(); announce('generation stopped'); return; }
     return;
   }

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

@@ -904,10 +904,10 @@
    ============================================================ */
 .ds-247420 .panel {
   background: var(--panel-1, var(--bg-2));
-  border-radius: var(--r-3);
+  border: var(--bw-hair) solid var(--rule);
+  border-radius: var(--r-2);
   margin: 0 0 var(--space-5);
   padding: var(--space-3);
-  box-shadow: var(--panel-shadow);
   position: relative;
 }
 .ds-247420 .panel.panel-inline { background: var(--bg-2); padding: var(--space-3) var(--space-3); }
@@ -1296,10 +1296,10 @@
     gap: 3px;
   }
   .ds-247420 .ds-file-row {
-    grid-template-columns: 22px minmax(0, 1fr) auto;
-    gap: 10px; padding: 10px 12px;
+    gap: 8px; padding: 10px 12px;
     font-size: var(--fs-xs);
   }
+  .ds-247420 .ds-file-open { gap: 10px; }
   /* On mobile, fold meta under the title and keep actions inline. */
   .ds-247420 .ds-file-row .ds-file-meta { font-size: var(--fs-micro); }
   .ds-247420 .ds-file-row .ds-file-actions { opacity: 1; }
@@ -1307,6 +1307,7 @@
      reachable by touch (cohesion sweep). */
   .ds-247420 .ds-file-act, .ds-247420 .ds-file-sort-btn, .ds-247420 .ds-crumb-seg { min-height: 44px; }
   .ds-247420 .ds-file-filter-input { min-height: 44px; }
+  .ds-247420 .ds-file-check, .ds-247420 .ds-file-selectall, .ds-247420 .ds-density-btn { min-height: 44px; min-width: 44px; }
 
   /* Chat */
   .ds-247420 .chat-stack { max-width: 100%; min-width: 0; }
@@ -1533,10 +1534,13 @@
 @keyframes ds-skel-shimmer { 100% { transform: translateX(100%); } }
 @media (prefers-reduced-motion: reduce) { .ds-247420 .ds-skel::after { animation: none; } }
 
-/* File row — linear layout (icon · title · meta · actions) */
+/* File row — linear layout (checkbox? · open-button[code · icon · title · meta] · actions).
+   The row is a flex strip; the open <button> is the stretching member and lays
+   out the entry's own columns. It needs a full reset (UA button chrome off)
+   because FileRow wraps the row content in a real button for native keyboard
+   semantics. */
 .ds-247420 .ds-file-row {
-  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto;
-  gap: 14px; align-items: center;
+  display: flex; align-items: center; gap: 10px;
   padding: 11px 16px; background: var(--bg);
   border: var(--bw-hair) solid transparent;
   border-radius: var(--r-2); color: var(--fg);
@@ -1545,6 +1549,14 @@
               border-color var(--dur-snap) var(--ease),
               transform var(--dur-snap) var(--ease);
 }
+.ds-247420 .ds-file-open {
+  display: flex; align-items: center; gap: 14px;
+  flex: 1 1 auto; min-width: 0;
+  background: none; border: 0; padding: 0; margin: 0;
+  color: inherit; font: inherit; text-align: left; cursor: pointer;
+}
+.ds-247420 .ds-file-open[disabled] { cursor: default; }
+.ds-247420 .ds-file-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
 .ds-247420 .ds-file-row:hover {
   background: var(--bg-2);
   border-color: var(--rule);
@@ -1566,7 +1578,7 @@
 .ds-247420 .ds-file-row .title {
   font-weight: 500; font-size: var(--fs-sm);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  min-width: 0;
+  min-width: 0; flex: 1 1 auto;
 }
 .ds-247420 .ds-file-row .code {
   font-family: var(--ff-mono); font-size: var(--fs-micro);
@@ -1608,6 +1620,99 @@
 .ds-247420 .ds-file-act:hover { background: var(--bg-3); color: var(--fg); }
 .ds-247420 .ds-file-act-warn:hover { background: color-mix(in oklab, var(--warn) 18%, var(--bg)); color: var(--warn); }
 
+/* Multi-select — per-row checkbox, header tri-state, bulk action strip. */
+.ds-247420 .ds-file-check {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 28px; height: 28px; padding: 0 4px;
+  background: transparent; border: 0; border-radius: var(--r-1);
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3);
+  cursor: pointer;
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-file-check:hover { background: var(--bg-3); color: var(--fg); }
+.ds-247420 .ds-file-check.is-marked { color: var(--accent); }
+.ds-247420 .ds-file-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-file-check[disabled] { opacity: 0.4; cursor: default; }
+.ds-247420 .ds-file-row.is-marked { background: var(--accent-tint); border-color: var(--accent); }
+.ds-247420 .ds-file-selectall {
+  display: inline-flex; align-items: center; gap: var(--space-1);
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-2);
+  cursor: pointer; background: none; border: none;
+  padding: var(--space-1); border-radius: var(--r-1);
+}
+.ds-247420 .ds-file-selectall:hover { background: var(--bg-2); color: var(--fg); }
+.ds-247420 .ds-file-selectall:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-file-controls { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) var(--space-1); flex-wrap: wrap; }
+.ds-247420 .ds-file-controls .spread { flex: 1 1 auto; }
+.ds-247420 .ds-file-controls .ds-file-sort { padding: 0; }
+.ds-247420 .ds-bulkbar {
+  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
+  padding: var(--space-1) var(--space-2);
+  background: var(--bg-2); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
+}
+.ds-247420 .ds-bulkbar-count { font-size: var(--fs-tiny); color: var(--fg-2); }
+
+/* Density picker — list / compact / thumbnails. */
+.ds-247420 .ds-density {
+  display: inline-flex; gap: 2px; padding: 2px;
+  background: var(--bg-2); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1);
+}
+.ds-247420 .ds-density-btn {
+  font-size: var(--fs-tiny); color: var(--fg-2);
+  background: none; border: none; cursor: pointer;
+  padding: 2px var(--space-2); border-radius: calc(var(--r-1) - 2px);
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-density-btn:hover { color: var(--fg); }
+.ds-247420 .ds-density-btn.active { background: var(--accent-tint); color: var(--accent); }
+.ds-247420 .ds-density-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+/* Compact density — tighter rows for long listings. */
+.ds-247420 .ds-file-grid[data-density="compact"] { gap: 2px; }
+.ds-247420 .ds-file-grid[data-density="compact"] .ds-file-row { padding: 5px 12px; gap: 10px; }
+.ds-247420 .ds-file-grid[data-density="compact"] .ds-file-row .title { font-size: var(--fs-xs); }
+.ds-247420 .ds-file-grid[data-density="compact"] .ds-file-row .ds-file-meta { font-size: var(--fs-micro); }
+.ds-247420 .ds-file-grid[data-density="compact"] .ds-file-icon { width: 20px; height: 20px; font-size: 13px; }
+
+/* Thumbnail density — tile grid; image entries carry a real lazy thumbnail. */
+.ds-247420 .ds-file-grid-thumb {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
+  gap: var(--space-3); align-items: start;
+}
+.ds-247420 .ds-file-cell {
+  position: relative;
+  background: var(--bg); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
+  overflow: hidden;
+  transition: border-color var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-file-cell:hover { border-color: var(--fg-3); }
+.ds-247420 .ds-file-cell.active { border-color: var(--accent); background: var(--accent-tint); }
+.ds-247420 .ds-file-cell.is-marked { border-color: var(--accent); background: var(--accent-tint); }
+.ds-247420 .ds-file-cell.is-locked { opacity: 0.6; }
+.ds-247420 .ds-file-cell-open {
+  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1);
+  width: 100%; padding: var(--space-1); margin: 0;
+  background: none; border: none; cursor: pointer; color: var(--fg);
+}
+.ds-247420 .ds-file-cell-open[disabled] { cursor: default; }
+.ds-247420 .ds-file-cell-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-2); }
+.ds-247420 .ds-file-cell-media {
+  display: flex; align-items: center; justify-content: center;
+  width: 100%; aspect-ratio: 4 / 3;
+  background: var(--bg-2); border-radius: var(--r-1); overflow: hidden;
+}
+.ds-247420 .ds-file-cell-media .ds-file-icon { width: 34px; height: 34px; font-size: 24px; }
+.ds-247420 .ds-file-cell-thumb { width: 100%; height: 100%; object-fit: cover; }
+.ds-247420 .ds-file-cell-name {
+  font-size: var(--fs-tiny); text-align: left;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.ds-247420 .ds-file-cell-meta { font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--fg-3); text-align: left; }
+.ds-247420 .ds-file-cell-check {
+  position: absolute; top: 4px; left: 4px; z-index: 1;
+  background: color-mix(in oklab, var(--bg) 78%, transparent);
+}
+
 /* Card mode — opt-in via data-columns; switches the list to a grid. */
 .ds-247420 .ds-file-grid[data-columns] { display: grid; gap: var(--space-3); }
 .ds-247420 .ds-file-grid[data-columns="1"] { grid-template-columns: 1fr; }
@@ -1990,7 +2095,7 @@
 .ds-247420 .ds-segmented .ds-seg-btn:hover { color: var(--fg); }
 .ds-247420 .ds-segmented .ds-seg-btn.is-on {
   background: var(--bg); color: var(--fg);
-  box-shadow: var(--shadow-1);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule);
 }
 .ds-247420 .ds-theme-toggle.btn {
   font-family: var(--ff-mono); font-size: var(--fs-xs);
@@ -2196,7 +2301,6 @@
 .ds-247420 .chat-msg:hover .chat-image,
 .ds-247420 .chat-image:hover {
   border-color: color-mix(in oklab, var(--accent) 35%, transparent);
-  box-shadow: 0 4px 16px color-mix(in oklab, var(--fg) 12%, transparent);
 }
 .ds-247420 .chat-image img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
 .ds-247420 .chat-image .cap,
@@ -2237,7 +2341,7 @@
   border-radius: 12px; overflow: hidden; max-width: min(100%, 480px);
   transition: box-shadow 0.12s ease, border-color 0.12s ease;
 }
-.ds-247420 .chat-msg:hover .chat-pdf { border-color: color-mix(in oklab, var(--accent) 30%, transparent); box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 6%, transparent); }
+.ds-247420 .chat-msg:hover .chat-pdf { border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
 .ds-247420 .chat-pdf-head {
   display: flex; align-items: center; gap: 10px; padding: 10px 14px;
   background: color-mix(in oklab, var(--fg) 5%, var(--bg-2));
@@ -2265,7 +2369,6 @@
 .ds-247420 .chat-link:hover {
   background: var(--bg-3);
   border-color: color-mix(in oklab, var(--accent) 40%, transparent);
-  box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 8%, transparent);
 }
 .ds-247420 .chat-link:not(:has(.thumb)):not(:has(img)) { grid-template-columns: 1fr; }
 .ds-247420 .chat-link .thumb,
@@ -3378,6 +3481,15 @@
   .ds-247420 .ws-shell.ws-sessions-open .ws-scrim, .ds-247420 .ws-shell.ws-pane-open .ws-scrim { opacity: 1; pointer-events: auto; }
   /* The mobile drawer-toggle affordances live in the crumb bar. */
   .ds-247420 .ws-drawer-toggle { display: inline-flex; }
+  /* The Crumb's narrow collapse elsewhere keys on the .app @container, which
+     does not exist inside WorkspaceShell - mirror it here so the crumb bar
+     cannot overflow a narrow viewport (trail hides, leaf ellipsizes, the
+     right cluster wraps under instead of pushing past the edge). */
+  .ds-247420 .ws-crumb { padding-top: 6px; padding-bottom: 6px; }
+  .ds-247420 .ws-crumb .app-crumb { flex-wrap: wrap; min-width: 0; }
+  .ds-247420 .ws-crumb .app-crumb > .sep, .ds-247420 .ws-crumb .app-crumb > span:not(.crumb-right):not(.leaf) { display: none; }
+  .ds-247420 .ws-crumb .app-crumb .leaf { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+  .ds-247420 .ws-crumb .app-crumb .crumb-right { margin-left: 0; flex-wrap: wrap; min-width: 0; display: inline-flex; }
 }
 /* Drawer toggles are mobile-only chrome; hidden on the desktop grid. */
 .ds-247420 .ws-drawer-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: none; color: var(--fg-2); cursor: pointer; border-radius: var(--r-1); }