mirror of
https://github.com/openclaw/openclaw.git
synced 2026-08-27 21:07:01 -06:00
chore(ui): move composer sweep to top rail
This commit is contained in:
vyctorbrzezowski
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -178,15 +178,6 @@ const composerBenchHtml = `<!doctype html>
|
||||
<header class="composer-bench__header">
|
||||
<h1>Composer</h1>
|
||||
</header>
|
||||
<section class="composer-bench__scenario" data-bench-scenario tabindex="0" aria-label="Composer scenario">
|
||||
<span class="composer-bench__scenario-kind" data-bench-scenario-kind data-visible="false">Stress cases</span>
|
||||
<div class="composer-bench__scenario-nav">
|
||||
<button type="button" data-bench-scenario-prev aria-label="Previous scenario">‹</button>
|
||||
<output data-bench-scenario-name>Custom</output>
|
||||
<button type="button" data-bench-scenario-next aria-label="Next scenario">›</button>
|
||||
</div>
|
||||
<p data-bench-scenario-description>Adjust any control or browse the demo sequence.</p>
|
||||
</section>
|
||||
${composerBenchGroup(
|
||||
"composition",
|
||||
"Composition",
|
||||
@@ -485,7 +476,7 @@ const composerBenchHtml = `<!doctype html>
|
||||
</aside>
|
||||
<main class="composer-bench__stage" data-composer-bench-stage data-composer-production-owner="renderChatComposer"></main>
|
||||
<nav class="composer-bench__view-controls" aria-label="View controls">
|
||||
<div class="composer-bench__row composer-bench__row--slider" data-bench-slider="width" role="slider" tabindex="0" aria-label="Width" aria-valuemin="360" aria-valuemax="1200" aria-valuenow="900" aria-valuetext="Desktop"><span>Width</span><output data-bench-width-value>Desktop</output></div>
|
||||
<div class="composer-bench__row composer-bench__row--slider" data-bench-slider="width" role="slider" tabindex="0" aria-label="Width" aria-valuemin="360" aria-valuemax="1200" aria-valuenow="1200" aria-valuetext="Desktop"><span>Width</span><output data-bench-width-value>Desktop</output></div>
|
||||
${composerBenchRow(
|
||||
"Theme",
|
||||
composerBenchSegmented("theme", [
|
||||
@@ -494,6 +485,15 @@ const composerBenchHtml = `<!doctype html>
|
||||
]),
|
||||
)}
|
||||
</nav>
|
||||
<section class="composer-bench__scenario" data-bench-scenario tabindex="0" aria-label="Composer scenario">
|
||||
<span class="composer-bench__scenario-kind" data-bench-scenario-kind data-visible="false">Stress cases</span>
|
||||
<div class="composer-bench__scenario-nav">
|
||||
<button type="button" data-bench-scenario-prev aria-label="Previous scenario">‹</button>
|
||||
<output data-bench-scenario-name>Custom</output>
|
||||
<button type="button" data-bench-scenario-next aria-label="Next scenario">›</button>
|
||||
</div>
|
||||
<p data-bench-scenario-description>Adjust any control or browse the demo sequence.</p>
|
||||
</section>
|
||||
</div>
|
||||
<script type="module" src="/src/test-helpers/composer-bench.ts"></script>
|
||||
</body>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user