agentgui 1.0.1034 → 1.0.1035

package/.gm/prd.yml

@@ -2886,3 +2886,18 @@
   notes: add Utilities section to COMPONENT_API.md listing signature + one-line purpose for each, from chat.js/sessions.js/files.js
   status: completed
   witness: New Utilities section added to COMPONENT_API.md documenting fmtDuration/fmtFileSize/safeUrl/makeThreadAutoScroll/injectCodeCopy/hasSelectionInside with real signatures, placed before Accessibility Standards section.
+- id: gui-ux-craft-34th-run
+  subject: Run gui-ux-craft workflow (34th run) for max usability/practicality/predictability/negative-space per user request, wfgy-method critique discipline
+  notes: identical repeat ask to 31st/32nd/33rd runs; run fresh fan-out workflow, expect kit + app fixes, adversarially verify findings before landing
+  status: completed
+  witness: 'Workflow wf_919164f1-648 ran 34 agents, confirmed ~20+ findings across typography-rhythm/copy-tone/perceived-perf/kit-dx/light-theme-contrast/interaction-density lenses. Implemented all: app.js History sid-fallback fix, ACP error copy, settings/live copy-tone, ConversationList loading skeleton, AgentChat agentsLoading state; kit (design repo) editor-primitives.css/app-shell.css/chat.css token fixes (--fs-2/--fs-0 shadow tokens, --lh-base fallback, .glyph/.ds-field-count/.ds-row-detail tokens, ~29 focus-ring outline tokenizations, .chat-tool-copy touch target, .ds-select min-height floor, Btn className->class rename), COMPONENT_API.md docs. Built via node scripts/build.mjs (0 errors), re-vendored dist/247420.{js,css} into site/app/vendor/anentrypoint-design/, live-witnessed via browser dispatch (0 pageErrors, .ds-select min-height computed 32px confirming the vendored bundle carries the fix). Kit pushed to origin/main (commit 3b1080c after rebase).'
+- id: gui-negative-space-live-audit-34th
+  subject: Parallel targeted live-browser negative-space/dead-void audit across chat/history/settings/files at multiple viewport widths
+  notes: prior runs (27th/29th/31st/33rd) each found real live-only regressions (drawer slivers, dead empty-state voids, invisible chips) that pure code review missed
+  status: completed
+  witness: Parallel live-browser audit agent screenshotted chat/history/settings/files at 1280px/900px/420px. Confirmed all prior fixes (History empty state, Settings health-chip contrast 6.86:1, mobile drawer sliver) remain fixed. No new negative-space or contrast regressions found; investigated candidates (Files tab trailing whitespace, breadcrumb wrap, uneven settings grid heights) explicitly ruled out as intentional/non-boxed/content-driven, not bugs. Three consecutive clean passes (31st/33rd/34th) on this dimension.
+- id: gui-34th-kit-vendor-sync
+  subject: Re-vendor ../design kit build output into site/app/vendor after any kit changes land, per standing update flow
+  notes: 'standing rule: kit changes only reach the shipped app after node scripts/build.mjs + copy dist into site/app/vendor/anentrypoint-design + push kit'
+  status: completed
+  witness: node scripts/build.mjs in /config/workspace/design completed with 0 errors; dist/247420.css grew 454635->456041 bytes, dist/247420.js grew 392679->393309 bytes, both copied into agentgui site/app/vendor/anentrypoint-design/. Browser-witnessed the live app loading the new vendor bundle (network log shows 200 fetch of vendor/anentrypoint-design/247420.js and .css, 0 pageErrors) and a specific new rule (.ds-select min-height:32px) computing correctly in the live DOM.

package/package.json

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

package/site/app/js/app.js

@@ -825,7 +825,7 @@ function sessionsColumn() {
       if (state.tab !== 'history') navTo('history', { writeHash: false });
       loadSession(s.sid);
     },
-    loading: state.tab === 'history' && !state.sessions.length && !state.historyError,
+    loading: !state.sessions.length && !state.historyError,
     loadingText: state.historySlow ? 'Indexing your Claude history — the first load can take a minute…' : undefined,
     error: state.historyError,
     emptyText: 'No conversations yet',
@@ -1777,7 +1777,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 by agent, model, or cwd', onInput: (v) => { state.live.filter = v; persistLivePrefs(); render(); } },
+      filter: { value: lv.filter || '', placeholder: 'Filter by agent, model, or folder', onInput: (v) => { state.live.filter = v; persistLivePrefs(); render(); } },
       errorsOnly: !!lv.errorsOnly,
       onErrorsOnly: (on) => { state.live.errorsOnly = on; persistLivePrefs(); render(); },
       selectable: true,
@@ -1978,11 +1978,11 @@ function chatMain() {
       children: 'This agent\'s CLI was not found on the server. Pick another agent or install it.' }));
   }
   if (state.confirmingNewChat) {
-    banners.push(Alert({ key: 'confnew', kind: 'warn', title: 'Clear conversation?',
+    banners.push(Alert({ key: 'confnew', kind: 'warn', title: 'Start a new chat?',
       children: [
         h('span', { key: 'cntxt' }, 'This cannot be undone. '),
         Btn({ key: 'cnno', onClick: () => { clearTimeout(_newChatArmTimer); state.confirmingNewChat = false; render(); }, children: 'cancel' }),
-        Btn({ key: 'cnyes', danger: true, onClick: confirmNewChat, children: 'yes, clear conversation' })] }));
+        Btn({ key: 'cnyes', danger: true, onClick: confirmNewChat, children: 'yes, start new chat' })] }));
   }
   if (state.cwdError) {
     banners.push(Alert({ key: 'cwderr', kind: 'warn', title: 'Invalid working directory', children: state.cwdError }));
@@ -2045,6 +2045,7 @@ function chatMain() {
     runningPanel(),
     AgentChat({
       agents: sortedAgents(),
+      agentsLoading: !!state.agentsLoading,
       selectedAgent: state.selectedAgent,
       models: state.agentModels,
       selectedModel: state.selectedModel,
@@ -2703,12 +2704,12 @@ function historyMain() {
   const sess = (Array.isArray(state.sessions) ? state.sessions : []).find(s => s.sid === state.selectedSid);
   const lede = sess
     ? (projectLabel(sess.project) || sess.cwd || 'unknown location') + ' · ' + plural(sess.events || 0, 'event') + ' · ' + plural(sess.userTurns || 0, 'turn') + ' · ' + fmtRelTime(sess.last)
-    : state.selectedSid;
+    : 'Untitled conversation';
 
   const head = PageHeader({
     compact: true,
     dense: true,
-    title: truncate(projectLabel(sess?.title) || projectLabel(sess?.project) || state.selectedSid, 40, 80),
+    title: truncate(projectLabel(sess?.title) || projectLabel(sess?.project) || sess?.cwd || 'Untitled conversation', 40, 80),
     lede,
   });
 
@@ -3284,9 +3285,9 @@ function preferencesPanel() {
         'local data: ' + fmtBytes(lsBytes) + ' across ' + lsKeys + ' key' + (lsKeys === 1 ? '' : 's')),
       h('div', { key: 'expchatrow', class: 'agentgui-field-my' },
         Btn({ key: 'expchat', disabled: !savedChat,
-          title: savedChat ? 'Download the saved chat transcript as JSON' : 'no saved chat yet',
+          title: savedChat ? 'Download the saved chat transcript as JSON' : 'no saved conversation yet',
           onClick: savedChat ? () => downloadBlob(savedChat, 'agentgui-chat-' + dateStamp() + '.json', 'application/json') : undefined,
-          children: 'export chat' })),
+          children: 'export conversation' })),
       h('div', { key: 'cwdnote', class: 't-meta agentgui-field-my' },
         'working directory: set per-chat in the chat composer\'s cwd bar' + (state.chatCwd ? ' (current: ' + state.chatCwd + ')' : ' (currently: server default)')),
       state.confirmingClearData
@@ -3322,7 +3323,7 @@ function agentsPanel() {
     // manual start/stop controls by design. This note makes that explicit so
     // a 'stopped' row doesn't read as a missing action.
     hasAcp ? h('p', { key: 'acpnote', class: 't-meta agentgui-field-mb' }, 'ACP agents start on demand and restart automatically; selecting one launches it.') : null,
-    h('div', { key: 'agrefreshrow', class: 'agentgui-field-mb' }, Btn({ key: 'agrefresh', onClick: () => loadAgents(), children: 'refresh' })),
+    h('div', { key: 'agrefreshrow', class: 'agentgui-field-mb' }, Btn({ key: 'agrefresh', onClick: () => loadAgents(), disabled: state.agentsLoading, children: state.agentsLoading ? 'refreshing…' : 'refresh' })),
     ...(state.agents.length
       ? state.agents.map((a, i) => {
           const acp = acpStatusFor(a.id);
@@ -3332,7 +3333,11 @@ function agentsPanel() {
           if (!avail) bits.push(a.npxInstallable ? 'installs automatically when used' : 'not installed');
           if (acp) bits.push(acp.healthy ? 'connected' : (acp.running ? 'connecting' : 'offline'));
           if (acp && acp.restartCount >= 1) bits.push('restarted ' + acp.restartCount + (acp.restartCount === 1 ? ' time' : ' times'));
-          if (acp && !acp.healthy && acp.providerInfo?.error) bits.push('provider error: ' + String(acp.providerInfo.error).slice(0, 80));
+          if (acp && !acp.healthy && acp.providerInfo?.error) {
+            const rawErr = String(acp.providerInfo.error);
+            const truncatedErr = rawErr.length > 80 ? rawErr.slice(0, 80) + '…' : rawErr;
+            bits.push('connection failed, try restart: ' + truncatedErr);
+          }
           if (acp && acp.idleMs > 3_600_000) bits.push(fmtDuration(acp.idleMs) + ' idle');
           return Row({
             key: 'ag' + a.id,

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

@@ -1127,7 +1127,7 @@
 .ds-247420 .glyph {
   display: inline-flex; align-items: center; justify-content: center;
   width: 18px; height: 18px;
-  font-family: var(--ff-mono); font-size: 13px;
+  font-family: var(--ff-mono); font-size: var(--fs-tiny);
   opacity: 0.8;
 }
 
@@ -1222,7 +1222,7 @@
   font-family: var(--ff-mono);
   font-size: var(--fs-sm);
   line-height: var(--lh-snug);
-  margin-top: 8px;
+  margin-top: var(--space-2);
   padding: 10px 12px;
   background: var(--bg);
   border-radius: var(--r-1);
@@ -1696,7 +1696,7 @@
 
 /* Field char counter (TextField maxLength) */
 .ds-247420 .ds-field-count {
-  font-size: var(--fs-tiny, 12px);
+  font-size: var(--fs-tiny, 13px);
   color: var(--fg-3, var(--fg-2));
   text-align: right;
 }
@@ -2144,7 +2144,11 @@
    Shared by FileRow/FileCell (.is-marked) and the file/session select-all +
    SessionCard select (aria-checked true/mixed) since the bundle concatenates
    all CSS. Replaces the old [x]/[ ] bracket text - no glyphs, AT keeps the
-   role=checkbox/aria-checked name+state. */
+   role=checkbox/aria-checked name+state.
+   See also .ds-check in editor-primitives.css — a separate native-input
+   checkbox family for form/settings contexts; intentionally distinct
+   rendering (native vs CSS-drawn), do not let one drift toward the other
+   by accident. */
 .ds-247420 .ds-check-box {
   width: 15px; height: 15px; box-sizing: border-box; flex: 0 0 auto; position: relative;
   border: 1.5px solid var(--fg-3); border-radius: var(--r-0);
@@ -3248,6 +3252,7 @@
 .ds-247420 .ds-select {
     width: 100%;
     min-width: 0;
+    min-height: 32px; /* shared control floor with .btn/.btn-primary/.btn-ghost */
     padding: 10px 30px 10px 14px; /* right gap clears the chevron */
     background: var(--bg-2);
     border: 0;
@@ -6905,7 +6910,7 @@
 }
 .ds-247420 .agentchat-jump.show { display: inline-flex; }
 .ds-247420 .agentchat-jump:hover { background: var(--bg-3); }
-.ds-247420 .agentchat-jump:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .agentchat-jump:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* Streaming caret: a thin blinking bar at the live edge of an assistant turn. */
 .ds-247420 .chat-stream-caret {
@@ -6927,7 +6932,7 @@
 }
 .ds-247420 .chat-msg-action-label { font-size: var(--fs-tiny); }
 .ds-247420 .chat-msg-action:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .chat-msg-action:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
+.ds-247420 .chat-msg-action:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; opacity: 1; }
 
 /* Empty state: a fresh thread is an invitation, not a void. */
 .ds-247420 .agentchat-empty {
@@ -6961,7 +6966,7 @@
   color: var(--fg-2, var(--fg));
 }
 .ds-247420 .agentchat-empty-suggestion:hover, .ds-247420 .chat-empty-suggestion:hover { background: color-mix(in srgb, var(--accent, var(--fg)) 12%, transparent); }
-.ds-247420 .agentchat-empty-suggestion:focus-visible, .ds-247420 .chat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 2px; }
+.ds-247420 .agentchat-empty-suggestion:focus-visible, .ds-247420 .chat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: var(--focus-offset); }
 
 /* Guided install path in the empty state: copy line + monospaced command rows
    (each with its own copy button) + a recheck button. No animation. */
@@ -6994,7 +6999,7 @@
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .ds-247420 .agentchat-install-copy:hover { background: var(--bg-3); color: var(--fg); }
-.ds-247420 .agentchat-install-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .agentchat-install-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 .ds-247420 .agentchat-install-actions { display: flex; justify-content: flex-start; }
 
 /* Host-supplied transcript export actions riding the controls row. */
@@ -7005,7 +7010,7 @@
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .ds-247420 .agentchat-export-act:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .agentchat-export-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .agentchat-export-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 
 /* "working" tail: a long silent tool call shouldn't read as frozen. */
 .ds-247420 .agentchat-working {
@@ -7135,7 +7140,7 @@
 /* Rail filter uses the shared .ds-search-input primitive (provides bg/border/
    radius/focus-ring); only the rail layout + touch floor live here. */
 .ds-247420 .ds-session-head .ds-search-input { order: 1; flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 0 10px; }
-.ds-247420 .ds-session-new:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ds-session-new:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 /* Touch floor (must FOLLOW the base rules - same specificity, order decides). */
 @media (pointer: coarse) {
   .ds-247420 .ds-session-new { width: 44px; min-height: 44px; }
@@ -7154,7 +7159,7 @@
   cursor: pointer; text-align: left; color: var(--fg);
 }
 .ds-247420 .ds-session-row:hover { background: var(--bg-2); }
-.ds-247420 .ds-session-row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.ds-247420 .ds-session-row:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); }
 .ds-247420 .ds-session-row.active { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent); }
 .ds-247420 .ds-session-row.rail-green::before, .ds-247420 .ds-session-row.rail-purple::before, .ds-247420 .ds-session-row.rail-flame::before {
   content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: var(--r-hair);
@@ -7248,7 +7253,7 @@
 }
 .ds-247420 .chat-code-block:hover .chat-code-copy, .ds-247420 .chat-code-block:focus-within .chat-code-copy { opacity: 1; }
 .ds-247420 .chat-code-copy.is-copied { color: var(--accent-ink); border-color: var(--accent); }
-.ds-247420 .chat-code-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
+.ds-247420 .chat-code-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; opacity: 1; }
 /* Head-placed copy (structured CodeNode + FilePreviewCode) is always visible. */
 .ds-247420 .chat-code-head .spread { flex: 1; }
 .ds-247420 .chat-code-copy-head { position: static; opacity: 1; }
@@ -7343,7 +7348,7 @@
   cursor: pointer; font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .ds-247420 .ds-dash-errors-toggle.active { background: var(--accent-tint); color: var(--fg); border-color: var(--accent); }
-.ds-247420 .ds-dash-errors-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-dash-errors-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 
 /* --- C3: per-card select checkbox. --- */
 .ds-247420 .ds-dash-select {
@@ -7353,7 +7358,7 @@
   font-family: var(--ff-mono); font-size: var(--fs-sm);
 }
 .ds-247420 .ds-dash-select[aria-checked="true"] { color: var(--accent-ink); }
-.ds-247420 .ds-dash-select:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-dash-select:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 
 /* --- C5: active dashboard card (current conversation). --- */
 .ds-247420 .ds-dash-card.is-active { box-shadow: inset 2px 0 0 var(--accent); }
@@ -7375,7 +7380,7 @@
 
 /* --- E1: inline file preview pane (split view, non-modal). --- */
 .ds-247420 .ds-preview-pane { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; }
-.ds-247420 .ds-preview-pane:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.ds-247420 .ds-preview-pane:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); }
 .ds-247420 .ds-preview-pane .ds-preview-body { flex: 1; min-height: 0; overflow: auto; }
 .ds-247420 .ds-preview-pane-empty { align-items: center; justify-content: center; color: var(--fg-3); font-size: var(--fs-sm); }
 .ds-247420 .ds-preview-code-wrap { display: flex; flex-direction: column; min-height: 0; }
@@ -7392,7 +7397,7 @@
   border-radius: var(--r-1); background: var(--bg-2); color: var(--fg-2); cursor: pointer;
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
-.ds-247420 .ds-file-more-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-file-more-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 /* --- D3: locked/no-access file row. --- */
 .ds-247420 .ds-file-row.is-locked { opacity: .6; }
 
@@ -7405,7 +7410,7 @@
 }
 .ds-247420 .ds-roots-tab:hover { background: var(--bg-2); color: var(--fg); }
 .ds-247420 .ds-roots-tab.active { background: var(--bg); color: var(--fg); }
-.ds-247420 .ds-roots-tab:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-roots-tab:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 
 /* --- H4: touch targets. On a coarse pointer / narrow screen the hover-revealed
    action rows are made permanently visible and small controls floor to 44px so
@@ -7413,6 +7418,7 @@
 @media (pointer: coarse), (max-width: 640px) {
   .ds-247420 .chat-msg-actions { opacity: 1; }
   .ds-247420 .chat-code-copy { opacity: 1; }
+  .ds-247420 .chat-tool-copy { opacity: 1; min-width: 44px; min-height: 44px; }
   .ds-247420 .chat-msg-action { min-width: 44px; height: 44px; }
   .ds-247420 .ds-dash-select { min-width: 44px; min-height: 44px; }
   .ds-247420 .ds-file-more-btn, .ds-247420 .ds-roots-tab, .ds-247420 .ds-dash-errors-toggle { min-height: 44px; }
@@ -7437,7 +7443,7 @@
   color: var(--fg-3); font-family: var(--ff-body); font-size: var(--fs-micro);
 }
 .ds-247420 .ds-session-meta-copy:hover { background: var(--bg-3); color: var(--fg); }
-.ds-247420 .ds-session-meta-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-session-meta-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 @media (pointer: coarse), (max-width: 640px) {
   .ds-247420 .ds-session-meta-copy { min-height: 44px; min-width: 44px; }
 }
@@ -7465,7 +7471,7 @@
 }
 
 /* Drag-over ring: token accent, never a hex. */
-.ds-247420 .chat-composer.dragover { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-2); }
+.ds-247420 .chat-composer.dragover { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); border-radius: var(--r-2); }
 
 /* Per-bit composer context: only the bit that owns a control is a button. */
 .ds-247420 .chat-composer-context-bit {
@@ -7506,7 +7512,7 @@
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .ds-247420 .agentchat-earlier-btn:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .agentchat-earlier-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .agentchat-earlier-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 @media (pointer: coarse) {
   .ds-247420 .agentchat-earlier-btn { min-height: 44px; }
 }
@@ -7614,7 +7620,7 @@
 }
 .ds-247420 .chat-msg .chat-tool .chat-tool-head::-webkit-details-marker { display: none; }
 .ds-247420 .chat-msg .chat-tool .chat-tool-head:hover { background: var(--bg-2); }
-.ds-247420 .chat-msg .chat-tool .chat-tool-head:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.ds-247420 .chat-msg .chat-tool .chat-tool-head:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); }
 .ds-247420 .chat-tool-icon { display: inline-flex; color: var(--fg-3); }
 .ds-247420 .chat-tool-name { font-family: var(--ff-mono); font-weight: 600; color: var(--fg); }
 .ds-247420 .chat-tool-label { color: var(--fg-3); font-size: var(--fs-tiny); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@@ -7641,7 +7647,7 @@
 .ds-247420 .chat-tool-section-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-3); }
 .ds-247420 .chat-tool-copy { position: static; opacity: 0; }
 .ds-247420 .chat-tool-section:hover .chat-tool-copy, .ds-247420 .chat-tool-section:focus-within .chat-tool-copy { opacity: 1; }
-.ds-247420 .chat-tool-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
+.ds-247420 .chat-tool-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; opacity: 1; }
 .ds-247420 .chat-tool-pre { margin: 0; padding: var(--space-2); background: var(--bg-2); border-radius: var(--r-1); font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1.45; overflow-x: auto; max-height: 320px; overflow-y: auto; }
 .ds-247420 .chat-tool-pre.is-error { color: var(--flame); }
 .ds-247420 .chat-tool-pre.chat-tool-empty { color: var(--fg-3); }
@@ -7705,10 +7711,10 @@
 .ds-247420 .ds-dash-stream-disc { display: inline-flex; align-items: center; gap: var(--space-1); }
 .ds-247420 .ds-dash-selectall { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-tiny); color: var(--fg-2); cursor: pointer; background: none; border: none; padding: var(--space-1); }
 .ds-247420 .ds-dash-selectall:hover { color: var(--fg); }
-.ds-247420 .ds-dash-selectall:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-dash-selectall:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 .ds-247420 .ds-dash-clear { background: none; border: none; color: var(--fg-3); cursor: pointer; font-size: var(--fs-tiny); text-decoration: underline dotted; padding: var(--space-1); }
 .ds-247420 .ds-dash-clear:hover { color: var(--fg); }
-.ds-247420 .ds-dash-clear:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; border-radius: var(--r-1); }
+.ds-247420 .ds-dash-clear:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; border-radius: var(--r-1); }
 
 /* Conversation-rail loading skeleton (cold ccsniff walk). */
 .ds-247420 .ds-session-row-skeleton { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2) var(--space-3); }
@@ -7821,7 +7827,7 @@
     margin: 0; border-radius: 0; box-shadow: none;
     background: var(--panel-1);
     color: var(--panel-text);
-    font: var(--fs-tiny, 12px)/var(--lh-base, 1.4) var(--ff-mono, monospace);
+    font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
     overflow: hidden;
 }
 .ds-247420 .ds-ep-panel-head {
@@ -7881,7 +7887,7 @@
     background: var(--panel-1);
     color: var(--panel-text);
     border-bottom: 1px solid var(--rule);
-    font: var(--fs-tiny, 12px)/var(--lh-base, 1.4) var(--ff-mono, monospace);
+    font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
 }
 .ds-247420 .ds-ep-toolbar.dense { padding: 2px 4px; gap: 2px; }
 .ds-247420 .ds-ep-toolbar-leading,
@@ -7957,11 +7963,11 @@
 .ds-247420 .ds-ep-tree {
     display: flex; flex-direction: column;
     color: var(--panel-text);
-    font: var(--fs-tiny, 12px)/var(--lh-base, 1.4) var(--ff-mono, monospace);
+    font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
     overflow: auto;
 }
 .ds-247420 .ds-ep-tree-item { display: flex; flex-direction: column; }
-.ds-247420 .ds-ep-tree-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ds-ep-tree-item:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-247420 .ds-ep-tree-row {
     display: flex; align-items: center; gap: 6px;
     padding: 4px 8px 4px 0;
@@ -7997,7 +8003,7 @@
     display: flex; flex-direction: column; gap: 6px;
     padding: 8px;
     color: var(--panel-text);
-    font: var(--fs-tiny, 12px)/var(--lh-base, 1.4) var(--ff-mono, monospace);
+    font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
 }
 .ds-247420 .ds-ep-propfield {
     display: grid;
@@ -8225,8 +8231,8 @@
 .ds-247420 .ds-ep-json-node[open] > .ds-ep-json-sum::before { content: '-'; }
 .ds-247420 .ds-ep-json-sum:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); }
 .ds-247420 .ds-ep-json-sum:focus-visible {
-    outline: 2px solid var(--accent-ink);
-    outline-offset: -2px;
+    outline: var(--focus-w) solid var(--focus-color);
+    outline-offset: calc(var(--focus-offset) * -1);
 }
 .ds-247420 .ds-ep-json-tag {
     margin-left: var(--space-1, 4px);
@@ -8250,8 +8256,8 @@
 .ds-247420 .ds-ep-json-copy:hover { opacity: 1; border-color: var(--accent); }
 .ds-247420 .ds-ep-json-copy.copied { color: var(--green-2, var(--green)); border-color: var(--green-2, var(--green)); opacity: 1; }
 .ds-247420 .ds-ep-json-copy:focus-visible {
-    outline: 2px solid var(--accent-ink);
-    outline-offset: 2px;
+    outline: var(--focus-w) solid var(--focus-color);
+    outline-offset: var(--focus-offset);
     opacity: 1;
 }
 
@@ -8506,8 +8512,8 @@
 .ds-247420 .ds-ep-resize:focus-visible,
 .ds-247420 .ds-ep-dialog-btn:focus-visible,
 .ds-247420 .ds-ep-pager-btn:focus-visible {
-    outline: 2px solid var(--accent-ink);
-    outline-offset: 2px;
+    outline: var(--focus-w) solid var(--focus-color);
+    outline-offset: var(--focus-offset);
 }
 
 /* ---------------------------------------------------------------
@@ -8558,13 +8564,17 @@
 .ds-247420 .ds-ep-iconbtn:focus-visible,
 .ds-247420 .ds-ep-iconbtn-group button:focus-visible,
 .ds-247420 .ds-ep-resize:focus-visible {
-    outline: 2px solid var(--accent-ink);
-    outline-offset: 2px;
+    outline: var(--focus-w) solid var(--focus-color);
+    outline-offset: var(--focus-offset);
     border-radius: var(--r-1);
 }
 
 /* ---------------------------------------------------------------
    Form primitives — Checkbox, Radio, RadioGroup, Toggle, Field
+   See also .ds-check-box in app-shell.css — a separate CSS-drawn
+   multi-select checkbox family for FileRow/FileCell/SessionCard
+   row selection; intentionally distinct rendering (CSS-drawn vs
+   native), do not let one drift toward the other by accident.
    --------------------------------------------------------------- */
 .ds-247420 .ds-check-row,
 .ds-247420 .ds-radio-row,
@@ -8587,8 +8597,8 @@
     cursor: inherit;
 }
 .ds-247420 .ds-check:focus-visible, .ds-247420 .ds-radio:focus-visible {
-    outline: 2px solid var(--accent-ink);
-    outline-offset: 2px;
+    outline: var(--focus-w) solid var(--focus-color);
+    outline-offset: var(--focus-offset);
 }
 
 .ds-247420 .ds-check-label, .ds-247420 .ds-radio-label, .ds-247420 .ds-toggle-label {
@@ -8632,8 +8642,8 @@
     transform: translateX(20px);
 }
 .ds-247420 .ds-toggle:focus-visible {
-    outline: 2px solid var(--accent-ink);
-    outline-offset: 2px;
+    outline: var(--focus-w) solid var(--focus-color);
+    outline-offset: var(--focus-offset);
 }
 .ds-247420 .ds-toggle:disabled { cursor: not-allowed; }
 
@@ -8747,8 +8757,8 @@
     outline: none;
 }
 .ds-247420 .ds-dropdown-item:focus-visible {
-    outline: 2px solid var(--accent-ink);
-    outline-offset: -2px;
+    outline: var(--focus-w) solid var(--focus-color);
+    outline-offset: calc(var(--focus-offset) * -1);
 }
 .ds-247420 .ds-dropdown-item[aria-disabled="true"] {
     opacity: 0.5;
@@ -8791,11 +8801,11 @@
     cursor: grab; font: 14px/1 var(--ff-mono, monospace); letter-spacing: -2px;
     touch-action: none; user-select: none;
 }
-.ds-247420 .ds-reorder-handle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ds-reorder-handle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-247420 .ds-reorder-handle:active { cursor: grabbing; }
 .ds-247420[data-dragging="true"] { opacity: 0.6; cursor: grabbing; transform: scale(0.98); }
 .ds-247420[data-drop-target-active="true"] {
-    outline: 2px dashed var(--focus-ring, var(--accent)); outline-offset: 2px;
+    outline: 2px dashed var(--focus-ring, var(--accent)); outline-offset: var(--focus-offset);
     background: color-mix(in srgb, var(--accent) 8%, var(--panel-1));
 }
 .ds-247420 .ds-reorder-insertion-line {
@@ -9001,7 +9011,7 @@
     border: 1px solid var(--rule); border-radius: var(--r-1, 10px);
     padding: var(--space-1, 4px) var(--space-2, 8px); font: inherit;
 }
-.ds-247420 .ov-set-control:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; border-color: var(--accent-ink); }
+.ds-247420 .ov-set-control:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; border-color: var(--accent-ink); }
 .ds-247420 input.ov-set-control[type="range"] { padding: 0; accent-color: var(--accent); }
 .ds-247420 .ov-set-toggle { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
 .ds-247420 .ov-set-btn {
@@ -9026,7 +9036,7 @@
     overflow: hidden;
 }
 .ds-247420 .ov-auth-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3); border-bottom: 1px solid var(--rule); }
-.ds-247420 .ov-auth-title { margin: 0; font-size: var(--fs-2, 16px); font-weight: 700; }
+.ds-247420 .ov-auth-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
 .ds-247420 .ov-auth-x { border: none; background: transparent; color: var(--fg-2, var(--fg)); font-size: 22px; line-height: 1; cursor: pointer; }
 .ds-247420 .ov-auth-x:hover { color: var(--fg); }
 .ds-247420 .ov-auth-tabs { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-3) 0; }
@@ -9034,11 +9044,11 @@
 .ds-247420 .ov-auth-tab:hover { color: var(--fg); }
 .ds-247420 .ov-auth-tab.is-active { background: var(--bg-2); color: var(--fg); font-weight: 700; }
 .ds-247420 .ov-auth-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
-.ds-247420 .ov-auth-hint { margin: 0; font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); }
+.ds-247420 .ov-auth-hint { margin: 0; font-size: var(--fs-tiny); color: var(--fg-2, var(--fg)); }
 .ds-247420 .ov-auth-input { padding: var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--bg-3); color: var(--fg); }
 .ds-247420 .ov-auth-primary { padding: var(--space-2); border: none; border-radius: var(--r-1); background: var(--accent); color: var(--on-accent); font-weight: 700; cursor: pointer; }
 .ds-247420 .ov-auth-primary:disabled { opacity: .6; cursor: progress; }
-.ds-247420 .ov-auth-error { margin: 0 var(--space-3) var(--space-3); padding: var(--space-2); border-radius: var(--r-1); background: color-mix(in oklab, var(--danger) 15%, transparent); color: var(--danger); font-size: var(--fs-0, 12px); }
+.ds-247420 .ov-auth-error { margin: 0 var(--space-3) var(--space-3); padding: var(--space-2); border-radius: var(--r-1); background: color-mix(in oklab, var(--danger) 15%, transparent); color: var(--danger); font-size: var(--fs-tiny); }
 
 /* VideoLightbox — ov-lightbox-* */
 .ds-247420 .ov-lightbox-backdrop {
@@ -9050,7 +9060,7 @@
 .ds-247420 .ov-lightbox-x:hover { background: color-mix(in oklab, var(--on-color) 24%, transparent); }
 .ds-247420 .ov-lightbox-stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 92vw; max-height: 90vh; }
 .ds-247420 .ov-lightbox-video { max-width: 92vw; max-height: 82vh; border-radius: var(--r-1); background: #000; /* true black media letterbox, intentional */ }
-.ds-247420 .ov-lightbox-label { color: var(--on-color); font-size: var(--fs-0, 12px); opacity: .85; }
+.ds-247420 .ov-lightbox-label { color: var(--on-color); font-size: var(--fs-tiny); opacity: .85; }
 
 /* ---------------------------------------------------------------
    Editor-primitive scrollbars — thin, dark, themed so docked panels
@@ -9098,7 +9108,7 @@
 }
 .ds-247420 .ds-input-color::-webkit-color-swatch-wrapper { padding: 2px; }
 .ds-247420 .ds-input-color::-webkit-color-swatch { border: none; border-radius: var(--r-hair); }
-.ds-247420 .ds-input-color:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ds-input-color:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-247420 .ds-input-check {
     appearance: none; -webkit-appearance: none;
     width: 16px; height: 16px; flex-shrink: 0;
@@ -9111,7 +9121,7 @@
     width: 4px; height: 8px; border: solid var(--accent-fg);
     border-width: 0 2px 2px 0; transform: rotate(45deg);
 }
-.ds-247420 .ds-input-check:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ds-input-check:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* ---------------------------------------------------------------
    Tree drag-reparent affordance — clear drop target + dragging row.