agentgui 1.0.1033 → 1.0.1035
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.gm/memories/mem-15a07cd761b337c4-4320.md +8 -0
- package/.gm/memories/mem-27faf41cdd050c80-1261.md +8 -0
- package/.gm/prd.yml +15 -0
- package/AGENTS.md +5 -1
- package/package.json +1 -1
- package/site/app/js/app.js +15 -10
- package/site/app/vendor/anentrypoint-design/247420.css +62 -52
- package/site/app/vendor/anentrypoint-design/247420.js +14 -14
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
---
|
|
2
|
+
key: mem-15a07cd761b337c4-4320
|
|
3
|
+
ns: default
|
|
4
|
+
created: 1783687056884
|
|
5
|
+
updated: 1783687056884
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
{"key":"agentgui-33rd-run-ux-craft-sweep","value":"agentgui 33rd run (2026-07-10): user re-requested max gui usability/practicality/predictable/negative-space via wfgy-method critique (identical ask to 31st/32nd runs). Ran gui-ux-craft workflow wf_7f1a513c-2a3 (34 agents, 33 completed, 21 confirmed, 1 lens (kit-dx) crashed mid-run) plus a parallel live-browser negative-space audit (found 2 new issues: Settings health-chip 'connected' text used raw --accent lime rgb(182,255,27) on near-invisible near-paper bg - fixed to --accent-ink on tinted bg; History empty-state had fixed min-height:50vh centered void leaving 300px+ dead space at 1280px and >50% viewport blank at 420px - fixed to natural top-aligned height with a new .history-empty-hints ShortcutList filling the reclaimed space). Kit fixes (chat.css/app-shell.css/editor-primitives.css/community.css/colors_and_type.css/agent-chat.js/context-pane.js/sessions.js/components.js): --tr-caps/--lh-long/--space-2 token adoption for 4 hardcoded typography values, cwd-fact font-family made consistently mono across composer/context-pane/dashboard, agent-name font-family made consistently sans, panel margin-bottom rhythm aligned to files-stack gap, brightness(1.08) lightening hover bugs on send-button/rail-action/editor-dialog-buttons fixed to brightness(0.92) darkening (AA-safe pattern from 32nd run), --green-2 text contrast fix in community.css, light-theme ::selection contrast raised to 46% (dark theme's 24% explicitly preserved), --accent-tint light-theme value switched to blend --accent-ink instead of raw --accent (dark theme value explicitly pinned), CwdBar save/cancel button order fixed to match ConfirmDialog convention, 30 hardcoded focus-ring outline instances (not just the 11 originally cited - same mechanical bug repeated) routed to --focus-w/--focus-color/--focus-offset tokens, chip/badge tone-success/tone-error/tone-neutral families consolidated (all legacy class aliases preserved), icon-btn-primary hover color fixed to match btn-primary's two-tone-flip, new AgentListSkeleton component (shimmer-row loading state matching FileSkeleton pattern, had to also add it to src/components.js barrel export - a component only exists to consumers if re-exported there, sessions.js alone isn't enough), UploadProgress gained an indeterminate/marquee CSS state for in-flight transfers with no percent yet. App fixes (app.js): session-vs-conversation vocabulary unified (Live tab copy, stopAllActive messages, Alert title), duplicated folder-drop announce string hoisted to one const, 'allowed root(s)' internal-jargon replaced with 'accessible folder(s)' at 6 user-facing sites (internal fsAllowRoots fn name/comments untouched), boot render no longer gated behind the health-probe await (state.health='unknown' + synchronous render() before the probe), agents-loading branch now uses AgentListSkeleton instead of bare spinner+text, upload rows pass indeterminate:true for in-flight zero-percent state. kit-dx lens re-run separately found 3 real doc gaps (voice.js/theme-toggle.js/data-density.js entirely undocumented, SessionMeta undocumented next to documented SessionCard, 6 utility exports undocumented) all fixed in COMPONENT_API.md. Used 4-6 parallel subagents to implement disjoint file sets concurrently (kit CSS agent, app.js agent, upload-progress agent, kit-dx audit agent, then a docs agent) - worked well since file ownership was cleanly split, though one subagent's rebuild step raced another's and both had to re-run node scripts/build.mjs at the end to reconcile before final vendor copy. LESSON: a new kit component isn't actually consumable until it's re-exported through src/components.js's barrel - adding it only to the component file itself (e.g. sessions.js) leaves it invisible to the bundle even after a successful build with 0 lint errors; always grep the built dist for the new export name to confirm before wiring app.js against it. Kit pushed 4105bd1, agentgui pushed 3bac0fe then a94bf92 (PRD-state-only commit), all CI green both repos (Test/Auto-Declaudeify/Deploy GH Pages/Publish and Release on agentgui; Deploy GH Pages/Publish 247420 to npm on design), browser-witnessed live via agent-browser (0 console errors) at localhost with PASSWORD=comma-containing token treated as one literal string throughout."}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
---
|
|
2
|
+
key: mem-27faf41cdd050c80-1261
|
|
3
|
+
ns: default
|
|
4
|
+
created: 1783687082067
|
|
5
|
+
updated: 1783687082067
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
{"key":"agentgui-28th-run-visual-polish","value":"agentgui 28th run (2026-07-03): visual-polish pass responding to explicit user feedback that the GUI 'looks very diy'. Live-browser screenshot audit (not a full agent fan-out) named 3 concrete high-leverage causes and fixed all 3 in the kit. (1) .ws-sessions used flat --bg identical to main content column while .ws-rail/.ws-pane already use --bg-2 (a recessed plane framing the elevated content column) - sessions was the one column breaking that pattern, read as ONE continuous surface with only a 1px hairline. Fixed. (2) .chat-composer had zero elevation at rest - added the kit's own already-defined-but-unused --shadow-1 token. (3) chat tab's mainFlush left controls/heading/empty-state/composer flush against column edge with zero gutter while the crumb bar above kept its own padding - added uniform inline gutter to .agentchat itself, --measure centering unaffected. Standing rule: .ws-rail/.ws-sessions/.ws-pane must all three use --bg-2 for consistent shell depth. Also landed inherited uncommitted community-app reply/delete-message work sitting dirty in the kit tree. Browser-witnessed 1280px/420px before/after, 0 console errors. Kit pushed anentrypoint-design 53c8464, agentgui pushed 42708ea."}
|
package/.gm/prd.yml
CHANGED
|
@@ -2886,3 +2886,18 @@
|
|
|
2886
2886
|
notes: add Utilities section to COMPONENT_API.md listing signature + one-line purpose for each, from chat.js/sessions.js/files.js
|
|
2887
2887
|
status: completed
|
|
2888
2888
|
witness: New Utilities section added to COMPONENT_API.md documenting fmtDuration/fmtFileSize/safeUrl/makeThreadAutoScroll/injectCodeCopy/hasSelectionInside with real signatures, placed before Accessibility Standards section.
|
|
2889
|
+
- id: gui-ux-craft-34th-run
|
|
2890
|
+
subject: Run gui-ux-craft workflow (34th run) for max usability/practicality/predictability/negative-space per user request, wfgy-method critique discipline
|
|
2891
|
+
notes: identical repeat ask to 31st/32nd/33rd runs; run fresh fan-out workflow, expect kit + app fixes, adversarially verify findings before landing
|
|
2892
|
+
status: completed
|
|
2893
|
+
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).'
|
|
2894
|
+
- id: gui-negative-space-live-audit-34th
|
|
2895
|
+
subject: Parallel targeted live-browser negative-space/dead-void audit across chat/history/settings/files at multiple viewport widths
|
|
2896
|
+
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
|
|
2897
|
+
status: completed
|
|
2898
|
+
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.
|
|
2899
|
+
- id: gui-34th-kit-vendor-sync
|
|
2900
|
+
subject: Re-vendor ../design kit build output into site/app/vendor after any kit changes land, per standing update flow
|
|
2901
|
+
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'
|
|
2902
|
+
status: completed
|
|
2903
|
+
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/AGENTS.md
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
# AgentGUI — Agent Notes
|
|
2
2
|
|
|
3
|
+
## GUI ux-craft sweep (2026-07-10) — thirty-third run
|
|
4
|
+
|
|
5
|
+
Fresh `gui-ux-craft` workflow (34 agents, 21 confirmed, 1 lens crashed+re-run) on request to max usability/predictability/negative-space via wfgy-method critique. Full detail in rs-learn (recall "agentgui 33rd run ux-craft sweep"). Headline: parallel negative-space audit caught a near-invisible Settings health-chip (raw `--accent` lime on near-paper bg) and a 300px+ dead void in History's empty state (fixed 50vh centered layout -> natural height + shortcuts hint); kit landed `--tr-caps`/`--lh-long`/`--space-2` token adoption, cwd/agent-name font-family consistency, brightness(0.92) darkening on 3 more lightening-hover bugs, light-theme `::selection`/`--accent-tint` contrast fixes, 30 hardcoded focus-ring instances tokenized, chip/badge tone-* consolidation, new `AgentListSkeleton` component, `UploadProgress` indeterminate/marquee state, 3 `COMPONENT_API.md` doc gaps closed. **Standing lesson: a new kit component must be re-exported through `src/components.js`'s barrel to be consumable — adding it to a component file alone (e.g. `sessions.js`) leaves it invisible to the built bundle even with 0 lint errors; grep the built dist for the export name before wiring the app against it.** Kit pushed `4105bd1`, agentgui pushed `3bac0fe`, all CI green both repos.
|
|
6
|
+
|
|
3
7
|
## GUI ux-craft sweep (2026-07-10) — thirty-second run
|
|
4
8
|
|
|
5
9
|
Fresh `gui-ux-craft` workflow (35 agents, 22 confirmed) on request to max usability/predictability/negative-space via wfgy-method critique. Full detail in rs-learn (recall "agentgui 32nd run ux-craft sweep"). Headline: 2 more misapplied `.lede`->`.t-meta` instances (running-sessions banner, file-preview loading — same class of bug as the 31st run's history empty-state fix), streaming markdown reparse throttled (was reparsing the whole accumulated text every rAF tick), ghost/danger hover unified to `brightness(0.92)` darkening (was `brightness(1.1)` lightening, which failed AA on light theme for danger), focus-ring hardcoded values replaced with `--focus-w`/`--focus-color`/`--focus-offset` tokens, `pre .n` numeral color + 4 `community.css` text usages routed off AA-failing `--green-2` onto `--code-num`/`--green`, new `ui_kits/workspace/` flagship demo for the WorkspaceShell/ConversationList/AgentChat/SessionDashboard combo. Kit pushed `ad000b6`, agentgui pushed `5ccaa8a`, all CI green both repos. **Standing gotcha: this env's `PASSWORD` value can itself contain literal commas (e.g. `123,slam,123,slam`) — treat the whole string as one token, never comma-split it when testing auth.**
|
|
@@ -18,7 +22,7 @@ Scoped negative-space/attention follow-up (not a full agent fan-out) to the expl
|
|
|
18
22
|
|
|
19
23
|
## Visual-polish pass — shell depth, composer weight, chat gutter (2026-07-03) — twenty-eighth run
|
|
20
24
|
|
|
21
|
-
|
|
25
|
+
Screenshot audit fixed 3 "looks very diy" causes: `.ws-sessions` flat `--bg` (should match `.ws-rail`/`.ws-pane`'s `--bg-2`), `.chat-composer` zero elevation (`--shadow-1`), `.agentchat` zero inline gutter under `mainFlush`. Standing rule: `.ws-rail`/`.ws-sessions`/`.ws-pane` must all three use `--bg-2`. Full detail in rs-learn (recall "agentgui 28th run visual-polish"). Kit pushed `53c8464`, agentgui pushed `42708ea`.
|
|
22
26
|
|
|
23
27
|
## Negative-space + attention sweep (2026-07-03) — twenty-seventh run
|
|
24
28
|
|
package/package.json
CHANGED
package/site/app/js/app.js
CHANGED
|
@@ -825,7 +825,7 @@ function sessionsColumn() {
|
|
|
825
825
|
if (state.tab !== 'history') navTo('history', { writeHash: false });
|
|
826
826
|
loadSession(s.sid);
|
|
827
827
|
},
|
|
828
|
-
loading:
|
|
828
|
+
loading: !state.sessions.length && !state.historyError,
|
|
829
829
|
loadingText: state.historySlow ? 'Indexing your Claude history — the first load can take a minute…' : undefined,
|
|
830
830
|
error: state.historyError,
|
|
831
831
|
emptyText: 'No conversations yet',
|
|
@@ -1777,7 +1777,7 @@ function liveMain() {
|
|
|
1777
1777
|
streamState,
|
|
1778
1778
|
activeSid: activeCard ? activeCard.sid : state.chat.resumeSid, // W13
|
|
1779
1779
|
sort: { value: sortKey, onChange: (v) => { state.live.sort = v; persistLivePrefs(); render(); } },
|
|
1780
|
-
filter: { value: lv.filter || '', placeholder: 'Filter by agent, model, or
|
|
1780
|
+
filter: { value: lv.filter || '', placeholder: 'Filter by agent, model, or folder', onInput: (v) => { state.live.filter = v; persistLivePrefs(); render(); } },
|
|
1781
1781
|
errorsOnly: !!lv.errorsOnly,
|
|
1782
1782
|
onErrorsOnly: (on) => { state.live.errorsOnly = on; persistLivePrefs(); render(); },
|
|
1783
1783
|
selectable: true,
|
|
@@ -1978,11 +1978,11 @@ function chatMain() {
|
|
|
1978
1978
|
children: 'This agent\'s CLI was not found on the server. Pick another agent or install it.' }));
|
|
1979
1979
|
}
|
|
1980
1980
|
if (state.confirmingNewChat) {
|
|
1981
|
-
banners.push(Alert({ key: 'confnew', kind: 'warn', title: '
|
|
1981
|
+
banners.push(Alert({ key: 'confnew', kind: 'warn', title: 'Start a new chat?',
|
|
1982
1982
|
children: [
|
|
1983
1983
|
h('span', { key: 'cntxt' }, 'This cannot be undone. '),
|
|
1984
1984
|
Btn({ key: 'cnno', onClick: () => { clearTimeout(_newChatArmTimer); state.confirmingNewChat = false; render(); }, children: 'cancel' }),
|
|
1985
|
-
Btn({ key: 'cnyes', danger: true, onClick: confirmNewChat, children: 'yes,
|
|
1985
|
+
Btn({ key: 'cnyes', danger: true, onClick: confirmNewChat, children: 'yes, start new chat' })] }));
|
|
1986
1986
|
}
|
|
1987
1987
|
if (state.cwdError) {
|
|
1988
1988
|
banners.push(Alert({ key: 'cwderr', kind: 'warn', title: 'Invalid working directory', children: state.cwdError }));
|
|
@@ -2045,6 +2045,7 @@ function chatMain() {
|
|
|
2045
2045
|
runningPanel(),
|
|
2046
2046
|
AgentChat({
|
|
2047
2047
|
agents: sortedAgents(),
|
|
2048
|
+
agentsLoading: !!state.agentsLoading,
|
|
2048
2049
|
selectedAgent: state.selectedAgent,
|
|
2049
2050
|
models: state.agentModels,
|
|
2050
2051
|
selectedModel: state.selectedModel,
|
|
@@ -2703,12 +2704,12 @@ function historyMain() {
|
|
|
2703
2704
|
const sess = (Array.isArray(state.sessions) ? state.sessions : []).find(s => s.sid === state.selectedSid);
|
|
2704
2705
|
const lede = sess
|
|
2705
2706
|
? (projectLabel(sess.project) || sess.cwd || 'unknown location') + ' · ' + plural(sess.events || 0, 'event') + ' · ' + plural(sess.userTurns || 0, 'turn') + ' · ' + fmtRelTime(sess.last)
|
|
2706
|
-
:
|
|
2707
|
+
: 'Untitled conversation';
|
|
2707
2708
|
|
|
2708
2709
|
const head = PageHeader({
|
|
2709
2710
|
compact: true,
|
|
2710
2711
|
dense: true,
|
|
2711
|
-
title: truncate(projectLabel(sess?.title) || projectLabel(sess?.project) ||
|
|
2712
|
+
title: truncate(projectLabel(sess?.title) || projectLabel(sess?.project) || sess?.cwd || 'Untitled conversation', 40, 80),
|
|
2712
2713
|
lede,
|
|
2713
2714
|
});
|
|
2714
2715
|
|
|
@@ -3284,9 +3285,9 @@ function preferencesPanel() {
|
|
|
3284
3285
|
'local data: ' + fmtBytes(lsBytes) + ' across ' + lsKeys + ' key' + (lsKeys === 1 ? '' : 's')),
|
|
3285
3286
|
h('div', { key: 'expchatrow', class: 'agentgui-field-my' },
|
|
3286
3287
|
Btn({ key: 'expchat', disabled: !savedChat,
|
|
3287
|
-
title: savedChat ? 'Download the saved chat transcript as JSON' : 'no saved
|
|
3288
|
+
title: savedChat ? 'Download the saved chat transcript as JSON' : 'no saved conversation yet',
|
|
3288
3289
|
onClick: savedChat ? () => downloadBlob(savedChat, 'agentgui-chat-' + dateStamp() + '.json', 'application/json') : undefined,
|
|
3289
|
-
children: 'export
|
|
3290
|
+
children: 'export conversation' })),
|
|
3290
3291
|
h('div', { key: 'cwdnote', class: 't-meta agentgui-field-my' },
|
|
3291
3292
|
'working directory: set per-chat in the chat composer\'s cwd bar' + (state.chatCwd ? ' (current: ' + state.chatCwd + ')' : ' (currently: server default)')),
|
|
3292
3293
|
state.confirmingClearData
|
|
@@ -3322,7 +3323,7 @@ function agentsPanel() {
|
|
|
3322
3323
|
// manual start/stop controls by design. This note makes that explicit so
|
|
3323
3324
|
// a 'stopped' row doesn't read as a missing action.
|
|
3324
3325
|
hasAcp ? h('p', { key: 'acpnote', class: 't-meta agentgui-field-mb' }, 'ACP agents start on demand and restart automatically; selecting one launches it.') : null,
|
|
3325
|
-
h('div', { key: 'agrefreshrow', class: 'agentgui-field-mb' }, Btn({ key: 'agrefresh', onClick: () => loadAgents(), children: 'refresh' })),
|
|
3326
|
+
h('div', { key: 'agrefreshrow', class: 'agentgui-field-mb' }, Btn({ key: 'agrefresh', onClick: () => loadAgents(), disabled: state.agentsLoading, children: state.agentsLoading ? 'refreshing…' : 'refresh' })),
|
|
3326
3327
|
...(state.agents.length
|
|
3327
3328
|
? state.agents.map((a, i) => {
|
|
3328
3329
|
const acp = acpStatusFor(a.id);
|
|
@@ -3332,7 +3333,11 @@ function agentsPanel() {
|
|
|
3332
3333
|
if (!avail) bits.push(a.npxInstallable ? 'installs automatically when used' : 'not installed');
|
|
3333
3334
|
if (acp) bits.push(acp.healthy ? 'connected' : (acp.running ? 'connecting' : 'offline'));
|
|
3334
3335
|
if (acp && acp.restartCount >= 1) bits.push('restarted ' + acp.restartCount + (acp.restartCount === 1 ? ' time' : ' times'));
|
|
3335
|
-
if (acp && !acp.healthy && acp.providerInfo?.error)
|
|
3336
|
+
if (acp && !acp.healthy && acp.providerInfo?.error) {
|
|
3337
|
+
const rawErr = String(acp.providerInfo.error);
|
|
3338
|
+
const truncatedErr = rawErr.length > 80 ? rawErr.slice(0, 80) + '…' : rawErr;
|
|
3339
|
+
bits.push('connection failed, try restart: ' + truncatedErr);
|
|
3340
|
+
}
|
|
3336
3341
|
if (acp && acp.idleMs > 3_600_000) bits.push(fmtDuration(acp.idleMs) + ' idle');
|
|
3337
3342
|
return Row({
|
|
3338
3343
|
key: 'ag' + a.id,
|
|
@@ -1127,7 +1127,7 @@
|
|
|
1127
1127
|
.ds-247420 .glyph {
|
|
1128
1128
|
display: inline-flex; align-items: center; justify-content: center;
|
|
1129
1129
|
width: 18px; height: 18px;
|
|
1130
|
-
font-family: var(--ff-mono); font-size:
|
|
1130
|
+
font-family: var(--ff-mono); font-size: var(--fs-tiny);
|
|
1131
1131
|
opacity: 0.8;
|
|
1132
1132
|
}
|
|
1133
1133
|
|
|
@@ -1222,7 +1222,7 @@
|
|
|
1222
1222
|
font-family: var(--ff-mono);
|
|
1223
1223
|
font-size: var(--fs-sm);
|
|
1224
1224
|
line-height: var(--lh-snug);
|
|
1225
|
-
margin-top:
|
|
1225
|
+
margin-top: var(--space-2);
|
|
1226
1226
|
padding: 10px 12px;
|
|
1227
1227
|
background: var(--bg);
|
|
1228
1228
|
border-radius: var(--r-1);
|
|
@@ -1696,7 +1696,7 @@
|
|
|
1696
1696
|
|
|
1697
1697
|
/* Field char counter (TextField maxLength) */
|
|
1698
1698
|
.ds-247420 .ds-field-count {
|
|
1699
|
-
font-size: var(--fs-tiny,
|
|
1699
|
+
font-size: var(--fs-tiny, 13px);
|
|
1700
1700
|
color: var(--fg-3, var(--fg-2));
|
|
1701
1701
|
text-align: right;
|
|
1702
1702
|
}
|
|
@@ -2144,7 +2144,11 @@
|
|
|
2144
2144
|
Shared by FileRow/FileCell (.is-marked) and the file/session select-all +
|
|
2145
2145
|
SessionCard select (aria-checked true/mixed) since the bundle concatenates
|
|
2146
2146
|
all CSS. Replaces the old [x]/[ ] bracket text - no glyphs, AT keeps the
|
|
2147
|
-
role=checkbox/aria-checked name+state.
|
|
2147
|
+
role=checkbox/aria-checked name+state.
|
|
2148
|
+
See also .ds-check in editor-primitives.css — a separate native-input
|
|
2149
|
+
checkbox family for form/settings contexts; intentionally distinct
|
|
2150
|
+
rendering (native vs CSS-drawn), do not let one drift toward the other
|
|
2151
|
+
by accident. */
|
|
2148
2152
|
.ds-247420 .ds-check-box {
|
|
2149
2153
|
width: 15px; height: 15px; box-sizing: border-box; flex: 0 0 auto; position: relative;
|
|
2150
2154
|
border: 1.5px solid var(--fg-3); border-radius: var(--r-0);
|
|
@@ -3248,6 +3252,7 @@
|
|
|
3248
3252
|
.ds-247420 .ds-select {
|
|
3249
3253
|
width: 100%;
|
|
3250
3254
|
min-width: 0;
|
|
3255
|
+
min-height: 32px; /* shared control floor with .btn/.btn-primary/.btn-ghost */
|
|
3251
3256
|
padding: 10px 30px 10px 14px; /* right gap clears the chevron */
|
|
3252
3257
|
background: var(--bg-2);
|
|
3253
3258
|
border: 0;
|
|
@@ -6905,7 +6910,7 @@
|
|
|
6905
6910
|
}
|
|
6906
6911
|
.ds-247420 .agentchat-jump.show { display: inline-flex; }
|
|
6907
6912
|
.ds-247420 .agentchat-jump:hover { background: var(--bg-3); }
|
|
6908
|
-
.ds-247420 .agentchat-jump:focus-visible { outline:
|
|
6913
|
+
.ds-247420 .agentchat-jump:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
6909
6914
|
|
|
6910
6915
|
/* Streaming caret: a thin blinking bar at the live edge of an assistant turn. */
|
|
6911
6916
|
.ds-247420 .chat-stream-caret {
|
|
@@ -6927,7 +6932,7 @@
|
|
|
6927
6932
|
}
|
|
6928
6933
|
.ds-247420 .chat-msg-action-label { font-size: var(--fs-tiny); }
|
|
6929
6934
|
.ds-247420 .chat-msg-action:hover { background: var(--bg-2); color: var(--fg); }
|
|
6930
|
-
.ds-247420 .chat-msg-action:focus-visible { outline:
|
|
6935
|
+
.ds-247420 .chat-msg-action:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; opacity: 1; }
|
|
6931
6936
|
|
|
6932
6937
|
/* Empty state: a fresh thread is an invitation, not a void. */
|
|
6933
6938
|
.ds-247420 .agentchat-empty {
|
|
@@ -6961,7 +6966,7 @@
|
|
|
6961
6966
|
color: var(--fg-2, var(--fg));
|
|
6962
6967
|
}
|
|
6963
6968
|
.ds-247420 .agentchat-empty-suggestion:hover, .ds-247420 .chat-empty-suggestion:hover { background: color-mix(in srgb, var(--accent, var(--fg)) 12%, transparent); }
|
|
6964
|
-
.ds-247420 .agentchat-empty-suggestion:focus-visible, .ds-247420 .chat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset:
|
|
6969
|
+
.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); }
|
|
6965
6970
|
|
|
6966
6971
|
/* Guided install path in the empty state: copy line + monospaced command rows
|
|
6967
6972
|
(each with its own copy button) + a recheck button. No animation. */
|
|
@@ -6994,7 +6999,7 @@
|
|
|
6994
6999
|
font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
6995
7000
|
}
|
|
6996
7001
|
.ds-247420 .agentchat-install-copy:hover { background: var(--bg-3); color: var(--fg); }
|
|
6997
|
-
.ds-247420 .agentchat-install-copy:focus-visible { outline:
|
|
7002
|
+
.ds-247420 .agentchat-install-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
6998
7003
|
.ds-247420 .agentchat-install-actions { display: flex; justify-content: flex-start; }
|
|
6999
7004
|
|
|
7000
7005
|
/* Host-supplied transcript export actions riding the controls row. */
|
|
@@ -7005,7 +7010,7 @@
|
|
|
7005
7010
|
font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
7006
7011
|
}
|
|
7007
7012
|
.ds-247420 .agentchat-export-act:hover { background: var(--bg-2); color: var(--fg); }
|
|
7008
|
-
.ds-247420 .agentchat-export-act:focus-visible { outline:
|
|
7013
|
+
.ds-247420 .agentchat-export-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7009
7014
|
|
|
7010
7015
|
/* "working" tail: a long silent tool call shouldn't read as frozen. */
|
|
7011
7016
|
.ds-247420 .agentchat-working {
|
|
@@ -7135,7 +7140,7 @@
|
|
|
7135
7140
|
/* Rail filter uses the shared .ds-search-input primitive (provides bg/border/
|
|
7136
7141
|
radius/focus-ring); only the rail layout + touch floor live here. */
|
|
7137
7142
|
.ds-247420 .ds-session-head .ds-search-input { order: 1; flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 0 10px; }
|
|
7138
|
-
.ds-247420 .ds-session-new:focus-visible { outline:
|
|
7143
|
+
.ds-247420 .ds-session-new:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
7139
7144
|
/* Touch floor (must FOLLOW the base rules - same specificity, order decides). */
|
|
7140
7145
|
@media (pointer: coarse) {
|
|
7141
7146
|
.ds-247420 .ds-session-new { width: 44px; min-height: 44px; }
|
|
@@ -7154,7 +7159,7 @@
|
|
|
7154
7159
|
cursor: pointer; text-align: left; color: var(--fg);
|
|
7155
7160
|
}
|
|
7156
7161
|
.ds-247420 .ds-session-row:hover { background: var(--bg-2); }
|
|
7157
|
-
.ds-247420 .ds-session-row:focus-visible { outline:
|
|
7162
|
+
.ds-247420 .ds-session-row:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); }
|
|
7158
7163
|
.ds-247420 .ds-session-row.active { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent); }
|
|
7159
7164
|
.ds-247420 .ds-session-row.rail-green::before, .ds-247420 .ds-session-row.rail-purple::before, .ds-247420 .ds-session-row.rail-flame::before {
|
|
7160
7165
|
content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: var(--r-hair);
|
|
@@ -7248,7 +7253,7 @@
|
|
|
7248
7253
|
}
|
|
7249
7254
|
.ds-247420 .chat-code-block:hover .chat-code-copy, .ds-247420 .chat-code-block:focus-within .chat-code-copy { opacity: 1; }
|
|
7250
7255
|
.ds-247420 .chat-code-copy.is-copied { color: var(--accent-ink); border-color: var(--accent); }
|
|
7251
|
-
.ds-247420 .chat-code-copy:focus-visible { outline:
|
|
7256
|
+
.ds-247420 .chat-code-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; opacity: 1; }
|
|
7252
7257
|
/* Head-placed copy (structured CodeNode + FilePreviewCode) is always visible. */
|
|
7253
7258
|
.ds-247420 .chat-code-head .spread { flex: 1; }
|
|
7254
7259
|
.ds-247420 .chat-code-copy-head { position: static; opacity: 1; }
|
|
@@ -7343,7 +7348,7 @@
|
|
|
7343
7348
|
cursor: pointer; font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
7344
7349
|
}
|
|
7345
7350
|
.ds-247420 .ds-dash-errors-toggle.active { background: var(--accent-tint); color: var(--fg); border-color: var(--accent); }
|
|
7346
|
-
.ds-247420 .ds-dash-errors-toggle:focus-visible { outline:
|
|
7351
|
+
.ds-247420 .ds-dash-errors-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7347
7352
|
|
|
7348
7353
|
/* --- C3: per-card select checkbox. --- */
|
|
7349
7354
|
.ds-247420 .ds-dash-select {
|
|
@@ -7353,7 +7358,7 @@
|
|
|
7353
7358
|
font-family: var(--ff-mono); font-size: var(--fs-sm);
|
|
7354
7359
|
}
|
|
7355
7360
|
.ds-247420 .ds-dash-select[aria-checked="true"] { color: var(--accent-ink); }
|
|
7356
|
-
.ds-247420 .ds-dash-select:focus-visible { outline:
|
|
7361
|
+
.ds-247420 .ds-dash-select:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7357
7362
|
|
|
7358
7363
|
/* --- C5: active dashboard card (current conversation). --- */
|
|
7359
7364
|
.ds-247420 .ds-dash-card.is-active { box-shadow: inset 2px 0 0 var(--accent); }
|
|
@@ -7375,7 +7380,7 @@
|
|
|
7375
7380
|
|
|
7376
7381
|
/* --- E1: inline file preview pane (split view, non-modal). --- */
|
|
7377
7382
|
.ds-247420 .ds-preview-pane { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; }
|
|
7378
|
-
.ds-247420 .ds-preview-pane:focus-visible { outline:
|
|
7383
|
+
.ds-247420 .ds-preview-pane:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); }
|
|
7379
7384
|
.ds-247420 .ds-preview-pane .ds-preview-body { flex: 1; min-height: 0; overflow: auto; }
|
|
7380
7385
|
.ds-247420 .ds-preview-pane-empty { align-items: center; justify-content: center; color: var(--fg-3); font-size: var(--fs-sm); }
|
|
7381
7386
|
.ds-247420 .ds-preview-code-wrap { display: flex; flex-direction: column; min-height: 0; }
|
|
@@ -7392,7 +7397,7 @@
|
|
|
7392
7397
|
border-radius: var(--r-1); background: var(--bg-2); color: var(--fg-2); cursor: pointer;
|
|
7393
7398
|
font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
7394
7399
|
}
|
|
7395
|
-
.ds-247420 .ds-file-more-btn:focus-visible { outline:
|
|
7400
|
+
.ds-247420 .ds-file-more-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7396
7401
|
/* --- D3: locked/no-access file row. --- */
|
|
7397
7402
|
.ds-247420 .ds-file-row.is-locked { opacity: .6; }
|
|
7398
7403
|
|
|
@@ -7405,7 +7410,7 @@
|
|
|
7405
7410
|
}
|
|
7406
7411
|
.ds-247420 .ds-roots-tab:hover { background: var(--bg-2); color: var(--fg); }
|
|
7407
7412
|
.ds-247420 .ds-roots-tab.active { background: var(--bg); color: var(--fg); }
|
|
7408
|
-
.ds-247420 .ds-roots-tab:focus-visible { outline:
|
|
7413
|
+
.ds-247420 .ds-roots-tab:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7409
7414
|
|
|
7410
7415
|
/* --- H4: touch targets. On a coarse pointer / narrow screen the hover-revealed
|
|
7411
7416
|
action rows are made permanently visible and small controls floor to 44px so
|
|
@@ -7413,6 +7418,7 @@
|
|
|
7413
7418
|
@media (pointer: coarse), (max-width: 640px) {
|
|
7414
7419
|
.ds-247420 .chat-msg-actions { opacity: 1; }
|
|
7415
7420
|
.ds-247420 .chat-code-copy { opacity: 1; }
|
|
7421
|
+
.ds-247420 .chat-tool-copy { opacity: 1; min-width: 44px; min-height: 44px; }
|
|
7416
7422
|
.ds-247420 .chat-msg-action { min-width: 44px; height: 44px; }
|
|
7417
7423
|
.ds-247420 .ds-dash-select { min-width: 44px; min-height: 44px; }
|
|
7418
7424
|
.ds-247420 .ds-file-more-btn, .ds-247420 .ds-roots-tab, .ds-247420 .ds-dash-errors-toggle { min-height: 44px; }
|
|
@@ -7437,7 +7443,7 @@
|
|
|
7437
7443
|
color: var(--fg-3); font-family: var(--ff-body); font-size: var(--fs-micro);
|
|
7438
7444
|
}
|
|
7439
7445
|
.ds-247420 .ds-session-meta-copy:hover { background: var(--bg-3); color: var(--fg); }
|
|
7440
|
-
.ds-247420 .ds-session-meta-copy:focus-visible { outline:
|
|
7446
|
+
.ds-247420 .ds-session-meta-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7441
7447
|
@media (pointer: coarse), (max-width: 640px) {
|
|
7442
7448
|
.ds-247420 .ds-session-meta-copy { min-height: 44px; min-width: 44px; }
|
|
7443
7449
|
}
|
|
@@ -7465,7 +7471,7 @@
|
|
|
7465
7471
|
}
|
|
7466
7472
|
|
|
7467
7473
|
/* Drag-over ring: token accent, never a hex. */
|
|
7468
|
-
.ds-247420 .chat-composer.dragover { outline:
|
|
7474
|
+
.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); }
|
|
7469
7475
|
|
|
7470
7476
|
/* Per-bit composer context: only the bit that owns a control is a button. */
|
|
7471
7477
|
.ds-247420 .chat-composer-context-bit {
|
|
@@ -7506,7 +7512,7 @@
|
|
|
7506
7512
|
font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
7507
7513
|
}
|
|
7508
7514
|
.ds-247420 .agentchat-earlier-btn:hover { background: var(--bg-2); color: var(--fg); }
|
|
7509
|
-
.ds-247420 .agentchat-earlier-btn:focus-visible { outline:
|
|
7515
|
+
.ds-247420 .agentchat-earlier-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7510
7516
|
@media (pointer: coarse) {
|
|
7511
7517
|
.ds-247420 .agentchat-earlier-btn { min-height: 44px; }
|
|
7512
7518
|
}
|
|
@@ -7614,7 +7620,7 @@
|
|
|
7614
7620
|
}
|
|
7615
7621
|
.ds-247420 .chat-msg .chat-tool .chat-tool-head::-webkit-details-marker { display: none; }
|
|
7616
7622
|
.ds-247420 .chat-msg .chat-tool .chat-tool-head:hover { background: var(--bg-2); }
|
|
7617
|
-
.ds-247420 .chat-msg .chat-tool .chat-tool-head:focus-visible { outline:
|
|
7623
|
+
.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); }
|
|
7618
7624
|
.ds-247420 .chat-tool-icon { display: inline-flex; color: var(--fg-3); }
|
|
7619
7625
|
.ds-247420 .chat-tool-name { font-family: var(--ff-mono); font-weight: 600; color: var(--fg); }
|
|
7620
7626
|
.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 @@
|
|
|
7641
7647
|
.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); }
|
|
7642
7648
|
.ds-247420 .chat-tool-copy { position: static; opacity: 0; }
|
|
7643
7649
|
.ds-247420 .chat-tool-section:hover .chat-tool-copy, .ds-247420 .chat-tool-section:focus-within .chat-tool-copy { opacity: 1; }
|
|
7644
|
-
.ds-247420 .chat-tool-copy:focus-visible { outline:
|
|
7650
|
+
.ds-247420 .chat-tool-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; opacity: 1; }
|
|
7645
7651
|
.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; }
|
|
7646
7652
|
.ds-247420 .chat-tool-pre.is-error { color: var(--flame); }
|
|
7647
7653
|
.ds-247420 .chat-tool-pre.chat-tool-empty { color: var(--fg-3); }
|
|
@@ -7705,10 +7711,10 @@
|
|
|
7705
7711
|
.ds-247420 .ds-dash-stream-disc { display: inline-flex; align-items: center; gap: var(--space-1); }
|
|
7706
7712
|
.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); }
|
|
7707
7713
|
.ds-247420 .ds-dash-selectall:hover { color: var(--fg); }
|
|
7708
|
-
.ds-247420 .ds-dash-selectall:focus-visible { outline:
|
|
7714
|
+
.ds-247420 .ds-dash-selectall:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
|
|
7709
7715
|
.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); }
|
|
7710
7716
|
.ds-247420 .ds-dash-clear:hover { color: var(--fg); }
|
|
7711
|
-
.ds-247420 .ds-dash-clear:focus-visible { outline:
|
|
7717
|
+
.ds-247420 .ds-dash-clear:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; border-radius: var(--r-1); }
|
|
7712
7718
|
|
|
7713
7719
|
/* Conversation-rail loading skeleton (cold ccsniff walk). */
|
|
7714
7720
|
.ds-247420 .ds-session-row-skeleton { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2) var(--space-3); }
|
|
@@ -7821,7 +7827,7 @@
|
|
|
7821
7827
|
margin: 0; border-radius: 0; box-shadow: none;
|
|
7822
7828
|
background: var(--panel-1);
|
|
7823
7829
|
color: var(--panel-text);
|
|
7824
|
-
font: var(--fs-tiny, 12px)/var(--lh-base, 1.
|
|
7830
|
+
font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
|
|
7825
7831
|
overflow: hidden;
|
|
7826
7832
|
}
|
|
7827
7833
|
.ds-247420 .ds-ep-panel-head {
|
|
@@ -7881,7 +7887,7 @@
|
|
|
7881
7887
|
background: var(--panel-1);
|
|
7882
7888
|
color: var(--panel-text);
|
|
7883
7889
|
border-bottom: 1px solid var(--rule);
|
|
7884
|
-
font: var(--fs-tiny, 12px)/var(--lh-base, 1.
|
|
7890
|
+
font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
|
|
7885
7891
|
}
|
|
7886
7892
|
.ds-247420 .ds-ep-toolbar.dense { padding: 2px 4px; gap: 2px; }
|
|
7887
7893
|
.ds-247420 .ds-ep-toolbar-leading,
|
|
@@ -7957,11 +7963,11 @@
|
|
|
7957
7963
|
.ds-247420 .ds-ep-tree {
|
|
7958
7964
|
display: flex; flex-direction: column;
|
|
7959
7965
|
color: var(--panel-text);
|
|
7960
|
-
font: var(--fs-tiny, 12px)/var(--lh-base, 1.
|
|
7966
|
+
font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
|
|
7961
7967
|
overflow: auto;
|
|
7962
7968
|
}
|
|
7963
7969
|
.ds-247420 .ds-ep-tree-item { display: flex; flex-direction: column; }
|
|
7964
|
-
.ds-247420 .ds-ep-tree-item:focus-visible { outline:
|
|
7970
|
+
.ds-247420 .ds-ep-tree-item:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
7965
7971
|
.ds-247420 .ds-ep-tree-row {
|
|
7966
7972
|
display: flex; align-items: center; gap: 6px;
|
|
7967
7973
|
padding: 4px 8px 4px 0;
|
|
@@ -7997,7 +8003,7 @@
|
|
|
7997
8003
|
display: flex; flex-direction: column; gap: 6px;
|
|
7998
8004
|
padding: 8px;
|
|
7999
8005
|
color: var(--panel-text);
|
|
8000
|
-
font: var(--fs-tiny, 12px)/var(--lh-base, 1.
|
|
8006
|
+
font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
|
|
8001
8007
|
}
|
|
8002
8008
|
.ds-247420 .ds-ep-propfield {
|
|
8003
8009
|
display: grid;
|
|
@@ -8225,8 +8231,8 @@
|
|
|
8225
8231
|
.ds-247420 .ds-ep-json-node[open] > .ds-ep-json-sum::before { content: '-'; }
|
|
8226
8232
|
.ds-247420 .ds-ep-json-sum:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); }
|
|
8227
8233
|
.ds-247420 .ds-ep-json-sum:focus-visible {
|
|
8228
|
-
outline:
|
|
8229
|
-
outline-offset: -
|
|
8234
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
8235
|
+
outline-offset: calc(var(--focus-offset) * -1);
|
|
8230
8236
|
}
|
|
8231
8237
|
.ds-247420 .ds-ep-json-tag {
|
|
8232
8238
|
margin-left: var(--space-1, 4px);
|
|
@@ -8250,8 +8256,8 @@
|
|
|
8250
8256
|
.ds-247420 .ds-ep-json-copy:hover { opacity: 1; border-color: var(--accent); }
|
|
8251
8257
|
.ds-247420 .ds-ep-json-copy.copied { color: var(--green-2, var(--green)); border-color: var(--green-2, var(--green)); opacity: 1; }
|
|
8252
8258
|
.ds-247420 .ds-ep-json-copy:focus-visible {
|
|
8253
|
-
outline:
|
|
8254
|
-
outline-offset:
|
|
8259
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
8260
|
+
outline-offset: var(--focus-offset);
|
|
8255
8261
|
opacity: 1;
|
|
8256
8262
|
}
|
|
8257
8263
|
|
|
@@ -8506,8 +8512,8 @@
|
|
|
8506
8512
|
.ds-247420 .ds-ep-resize:focus-visible,
|
|
8507
8513
|
.ds-247420 .ds-ep-dialog-btn:focus-visible,
|
|
8508
8514
|
.ds-247420 .ds-ep-pager-btn:focus-visible {
|
|
8509
|
-
outline:
|
|
8510
|
-
outline-offset:
|
|
8515
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
8516
|
+
outline-offset: var(--focus-offset);
|
|
8511
8517
|
}
|
|
8512
8518
|
|
|
8513
8519
|
/* ---------------------------------------------------------------
|
|
@@ -8558,13 +8564,17 @@
|
|
|
8558
8564
|
.ds-247420 .ds-ep-iconbtn:focus-visible,
|
|
8559
8565
|
.ds-247420 .ds-ep-iconbtn-group button:focus-visible,
|
|
8560
8566
|
.ds-247420 .ds-ep-resize:focus-visible {
|
|
8561
|
-
outline:
|
|
8562
|
-
outline-offset:
|
|
8567
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
8568
|
+
outline-offset: var(--focus-offset);
|
|
8563
8569
|
border-radius: var(--r-1);
|
|
8564
8570
|
}
|
|
8565
8571
|
|
|
8566
8572
|
/* ---------------------------------------------------------------
|
|
8567
8573
|
Form primitives — Checkbox, Radio, RadioGroup, Toggle, Field
|
|
8574
|
+
See also .ds-check-box in app-shell.css — a separate CSS-drawn
|
|
8575
|
+
multi-select checkbox family for FileRow/FileCell/SessionCard
|
|
8576
|
+
row selection; intentionally distinct rendering (CSS-drawn vs
|
|
8577
|
+
native), do not let one drift toward the other by accident.
|
|
8568
8578
|
--------------------------------------------------------------- */
|
|
8569
8579
|
.ds-247420 .ds-check-row,
|
|
8570
8580
|
.ds-247420 .ds-radio-row,
|
|
@@ -8587,8 +8597,8 @@
|
|
|
8587
8597
|
cursor: inherit;
|
|
8588
8598
|
}
|
|
8589
8599
|
.ds-247420 .ds-check:focus-visible, .ds-247420 .ds-radio:focus-visible {
|
|
8590
|
-
outline:
|
|
8591
|
-
outline-offset:
|
|
8600
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
8601
|
+
outline-offset: var(--focus-offset);
|
|
8592
8602
|
}
|
|
8593
8603
|
|
|
8594
8604
|
.ds-247420 .ds-check-label, .ds-247420 .ds-radio-label, .ds-247420 .ds-toggle-label {
|
|
@@ -8632,8 +8642,8 @@
|
|
|
8632
8642
|
transform: translateX(20px);
|
|
8633
8643
|
}
|
|
8634
8644
|
.ds-247420 .ds-toggle:focus-visible {
|
|
8635
|
-
outline:
|
|
8636
|
-
outline-offset:
|
|
8645
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
8646
|
+
outline-offset: var(--focus-offset);
|
|
8637
8647
|
}
|
|
8638
8648
|
.ds-247420 .ds-toggle:disabled { cursor: not-allowed; }
|
|
8639
8649
|
|
|
@@ -8747,8 +8757,8 @@
|
|
|
8747
8757
|
outline: none;
|
|
8748
8758
|
}
|
|
8749
8759
|
.ds-247420 .ds-dropdown-item:focus-visible {
|
|
8750
|
-
outline:
|
|
8751
|
-
outline-offset: -
|
|
8760
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
8761
|
+
outline-offset: calc(var(--focus-offset) * -1);
|
|
8752
8762
|
}
|
|
8753
8763
|
.ds-247420 .ds-dropdown-item[aria-disabled="true"] {
|
|
8754
8764
|
opacity: 0.5;
|
|
@@ -8791,11 +8801,11 @@
|
|
|
8791
8801
|
cursor: grab; font: 14px/1 var(--ff-mono, monospace); letter-spacing: -2px;
|
|
8792
8802
|
touch-action: none; user-select: none;
|
|
8793
8803
|
}
|
|
8794
|
-
.ds-247420 .ds-reorder-handle:focus-visible { outline:
|
|
8804
|
+
.ds-247420 .ds-reorder-handle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
8795
8805
|
.ds-247420 .ds-reorder-handle:active { cursor: grabbing; }
|
|
8796
8806
|
.ds-247420[data-dragging="true"] { opacity: 0.6; cursor: grabbing; transform: scale(0.98); }
|
|
8797
8807
|
.ds-247420[data-drop-target-active="true"] {
|
|
8798
|
-
outline: 2px dashed var(--focus-ring, var(--accent)); outline-offset:
|
|
8808
|
+
outline: 2px dashed var(--focus-ring, var(--accent)); outline-offset: var(--focus-offset);
|
|
8799
8809
|
background: color-mix(in srgb, var(--accent) 8%, var(--panel-1));
|
|
8800
8810
|
}
|
|
8801
8811
|
.ds-247420 .ds-reorder-insertion-line {
|
|
@@ -9001,7 +9011,7 @@
|
|
|
9001
9011
|
border: 1px solid var(--rule); border-radius: var(--r-1, 10px);
|
|
9002
9012
|
padding: var(--space-1, 4px) var(--space-2, 8px); font: inherit;
|
|
9003
9013
|
}
|
|
9004
|
-
.ds-247420 .ov-set-control:focus-visible { outline:
|
|
9014
|
+
.ds-247420 .ov-set-control:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; border-color: var(--accent-ink); }
|
|
9005
9015
|
.ds-247420 input.ov-set-control[type="range"] { padding: 0; accent-color: var(--accent); }
|
|
9006
9016
|
.ds-247420 .ov-set-toggle { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
|
|
9007
9017
|
.ds-247420 .ov-set-btn {
|
|
@@ -9026,7 +9036,7 @@
|
|
|
9026
9036
|
overflow: hidden;
|
|
9027
9037
|
}
|
|
9028
9038
|
.ds-247420 .ov-auth-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3); border-bottom: 1px solid var(--rule); }
|
|
9029
|
-
.ds-247420 .ov-auth-title { margin: 0; font-size: var(--fs-
|
|
9039
|
+
.ds-247420 .ov-auth-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
|
|
9030
9040
|
.ds-247420 .ov-auth-x { border: none; background: transparent; color: var(--fg-2, var(--fg)); font-size: 22px; line-height: 1; cursor: pointer; }
|
|
9031
9041
|
.ds-247420 .ov-auth-x:hover { color: var(--fg); }
|
|
9032
9042
|
.ds-247420 .ov-auth-tabs { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-3) 0; }
|
|
@@ -9034,11 +9044,11 @@
|
|
|
9034
9044
|
.ds-247420 .ov-auth-tab:hover { color: var(--fg); }
|
|
9035
9045
|
.ds-247420 .ov-auth-tab.is-active { background: var(--bg-2); color: var(--fg); font-weight: 700; }
|
|
9036
9046
|
.ds-247420 .ov-auth-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
|
|
9037
|
-
.ds-247420 .ov-auth-hint { margin: 0; font-size: var(--fs-
|
|
9047
|
+
.ds-247420 .ov-auth-hint { margin: 0; font-size: var(--fs-tiny); color: var(--fg-2, var(--fg)); }
|
|
9038
9048
|
.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); }
|
|
9039
9049
|
.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; }
|
|
9040
9050
|
.ds-247420 .ov-auth-primary:disabled { opacity: .6; cursor: progress; }
|
|
9041
|
-
.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-
|
|
9051
|
+
.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); }
|
|
9042
9052
|
|
|
9043
9053
|
/* VideoLightbox — ov-lightbox-* */
|
|
9044
9054
|
.ds-247420 .ov-lightbox-backdrop {
|
|
@@ -9050,7 +9060,7 @@
|
|
|
9050
9060
|
.ds-247420 .ov-lightbox-x:hover { background: color-mix(in oklab, var(--on-color) 24%, transparent); }
|
|
9051
9061
|
.ds-247420 .ov-lightbox-stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 92vw; max-height: 90vh; }
|
|
9052
9062
|
.ds-247420 .ov-lightbox-video { max-width: 92vw; max-height: 82vh; border-radius: var(--r-1); background: #000; /* true black media letterbox, intentional */ }
|
|
9053
|
-
.ds-247420 .ov-lightbox-label { color: var(--on-color); font-size: var(--fs-
|
|
9063
|
+
.ds-247420 .ov-lightbox-label { color: var(--on-color); font-size: var(--fs-tiny); opacity: .85; }
|
|
9054
9064
|
|
|
9055
9065
|
/* ---------------------------------------------------------------
|
|
9056
9066
|
Editor-primitive scrollbars — thin, dark, themed so docked panels
|
|
@@ -9098,7 +9108,7 @@
|
|
|
9098
9108
|
}
|
|
9099
9109
|
.ds-247420 .ds-input-color::-webkit-color-swatch-wrapper { padding: 2px; }
|
|
9100
9110
|
.ds-247420 .ds-input-color::-webkit-color-swatch { border: none; border-radius: var(--r-hair); }
|
|
9101
|
-
.ds-247420 .ds-input-color:focus-visible { outline:
|
|
9111
|
+
.ds-247420 .ds-input-color:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
9102
9112
|
.ds-247420 .ds-input-check {
|
|
9103
9113
|
appearance: none; -webkit-appearance: none;
|
|
9104
9114
|
width: 16px; height: 16px; flex-shrink: 0;
|
|
@@ -9111,7 +9121,7 @@
|
|
|
9111
9121
|
width: 4px; height: 8px; border: solid var(--accent-fg);
|
|
9112
9122
|
border-width: 0 2px 2px 0; transform: rotate(45deg);
|
|
9113
9123
|
}
|
|
9114
|
-
.ds-247420 .ds-input-check:focus-visible { outline:
|
|
9124
|
+
.ds-247420 .ds-input-check:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
9115
9125
|
|
|
9116
9126
|
/* ---------------------------------------------------------------
|
|
9117
9127
|
Tree drag-reparent affordance — clear drop target + dragging row.
|