diff --git a/BENCH-NOTES.md b/BENCH-NOTES.md index 5231cfec64f8..98630e4d3043 100644 --- a/BENCH-NOTES.md +++ b/BENCH-NOTES.md @@ -228,3 +228,5 @@ 2026-08-22 07:33 · Unified info, danger and offline underlap rows at a vertically centered height with quieter borders · ui/src/styles/chat/layout.css · COMPONENT #124301 multiline | BENCH 2026-08-22 07:33 · Projected the canonical reconnect badge onto every queued row while the composer is offline · ui/src/pages/chat/components/chat-composer-view.ts, ui/src/pages/chat/components/chat-composer-queue.ts · COMPONENT #124301 multiline | BENCH 2026-08-22 07:33 · Matched running tasks to composer and Plan chrome and aligned both on one shared status row when they coexist · ui/src/styles/chat/tool-cards.css, ui/src/test-helpers/composer-bench.ts, ui/src/test-helpers/composer-bench.css · COMPONENT #124301 multiline | BENCH +2026-08-22 07:36 · Moved the scenario sweep out of the Composer panel into a full-width top card aligned with Width and Theme · scripts/control-ui-mock-dev.ts, ui/src/test-helpers/composer-bench.css · COMPONENT #124301 multiline | BENCH +2026-08-22 07:36 · Made Desktop the opening width and mapped its slider endpoint to the full available bench stage · scripts/control-ui-mock-dev.ts, ui/src/test-helpers/composer-bench.ts, ui/src/test-helpers/composer-bench.css · COMPONENT #124301 multiline | BENCH diff --git a/ITERATION-NOTES.md b/ITERATION-NOTES.md index c3d106b60f5f..46c884313d21 100644 --- a/ITERATION-NOTES.md +++ b/ITERATION-NOTES.md @@ -119,6 +119,8 @@ Local-only working ledger. Re-read after every implementation block; move an ite - [x] Vertically center every lower composer status band and soften info, danger, and offline borders. - [x] Show the canonical reconnect pill on every queued row while offline. - [x] Match running tasks to Plan/composer chrome and share one horizontal status row when both appear. +- [x] Move the scenario sweep into the top rail between the view card and Composer controls. +- [x] Default Width to Desktop and let its endpoint fill the available bench stage. ## Observed queue contract diff --git a/scripts/control-ui-mock-dev.ts b/scripts/control-ui-mock-dev.ts index 749ee73a10e3..24dd8a792661 100644 --- a/scripts/control-ui-mock-dev.ts +++ b/scripts/control-ui-mock-dev.ts @@ -178,15 +178,6 @@ const composerBenchHtml = `

Composer

-
- Stress cases -
- - Custom - -
-

Adjust any control or browse the demo sequence.

-
${composerBenchGroup( "composition", "Composition", @@ -485,7 +476,7 @@ const composerBenchHtml = `
+
+ Stress cases +
+ + Custom + +
+

Adjust any control or browse the demo sequence.

+
diff --git a/ui/src/test-helpers/composer-bench.css b/ui/src/test-helpers/composer-bench.css index fbd2f2c7480d..0d9b6e3022be 100644 --- a/ui/src/test-helpers/composer-bench.css +++ b/ui/src/test-helpers/composer-bench.css @@ -70,11 +70,14 @@ body { mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 100%); } -.composer-bench__view-controls { +.composer-bench__view-controls, +.composer-bench__scenario { --text: #d8d9df; --text-strong: #f4f5f8; --muted: #a0a3ad; +} +.composer-bench__view-controls { position: fixed; top: 16px; right: auto; @@ -111,12 +114,22 @@ body { } .composer-bench__scenario { + position: fixed; + top: 16px; + right: 328px; + left: 248px; + z-index: 100; + box-sizing: border-box; display: grid; + height: 80px; gap: 2px; - margin: 5px 0 8px; - border-radius: 11px; + margin: 0; + border: 1px solid rgb(244 245 248 / 8%); + border-radius: 14px; padding: 7px 8px 8px; - background: color-mix(in srgb, var(--text-strong) 4%, transparent); + background: rgb(23 25 31 / 90%); + box-shadow: 0 14px 40px rgb(0 0 0 / 26%); + backdrop-filter: blur(20px) saturate(1.15); } .composer-bench__scenario:focus-visible { @@ -468,6 +481,7 @@ body { } .composer-bench__stage[data-composer-bench-surface="new"] { + padding-top: 112px; place-items: start center; } @@ -475,6 +489,10 @@ body { width: min(100%, var(--composer-bench-width, 640px)); } +.composer-bench__stage[data-composer-bench-width="desktop"] .composer-bench__surface { + width: 100%; +} + .composer-bench__surface .agent-chat__composer-shell { width: 100%; } @@ -574,4 +592,8 @@ body { .composer-bench__stage { padding-inline: 16px 306px; } + + .composer-bench__scenario { + right: 296px; + } } diff --git a/ui/src/test-helpers/composer-bench.ts b/ui/src/test-helpers/composer-bench.ts index 80d92403e9b3..83fb9d93a917 100644 --- a/ui/src/test-helpers/composer-bench.ts +++ b/ui/src/test-helpers/composer-bench.ts @@ -176,7 +176,7 @@ const defaults: BenchState = { status: "focused", newAction: "start", neighbor: "none", - width: 900, + width: 1200, theme: "dark", }; @@ -1681,6 +1681,7 @@ function renderBench(): void { const sessionList = sessions(); stage.style.setProperty("--composer-bench-width", `${state.width}px`); stage.dataset.composerBenchSurface = state.surface; + stage.dataset.composerBenchWidth = state.width === 1200 ? "desktop" : "custom"; stage.dataset.composerBenchAttachments = state.attachments; stage.dataset.composerProductionOwner = state.surface === "chat"