From e01bfec21824602a64ebbd884fb79f2f96416602 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 18 Aug 2026 17:10:38 +0000 Subject: [PATCH 1/2] Bar layout: controls lead from the left, dots trail the queue label New left-to-right order in both states: gear, transport buttons (start / skip / stop / resume), queue picker or profile name, dot strip. Free space now falls to the right of the dots instead of between the label and the actions. Co-Authored-By: Claude Claude-Session: https://claude.ai/code/session_01FfFQKFCs2usE8irubrQ4Kf --- CLAUDE.md | 21 +++++++++++++-------- src/ui/bar.js | 19 +++++++++++-------- style.css | 10 +++++++--- 3 files changed, 31 insertions(+), 19 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 805bc97..d051e0c 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -22,9 +22,11 @@ The v2.0 UI has two surfaces: column, at a user-chosen position (above the message input by default; below it, or above the chat log). It renders the rotation as a **linear dot strip**: one colored dot per slot in queue order, the active slot grown into a lit - capsule carrying its responses-remaining count. Idle shows the same dots - hollow, plus a queue picker and ▶ for one-click starting. Skip / Stop - (⇄ Resume when paused) and the gear that opens the modal live on its right. + capsule carrying its responses-remaining count. Controls cluster at the + bar's left edge — the gear that opens the modal leads, then ▶ (Skip / Stop, + ⇄ Resume when paused, while running), then the queue picker (profile name + while running) with the dot strip to its right. Idle shows the same dots + hollow for one-click starting. - **The modal** (`src/ui/modal.js`) — three tabs: **Rotation** (panel-size dot strip, status, actions, character auto-start binding, and the pick history), **Queues** (card grid + inline editor), **Settings** (bar visibility + @@ -195,12 +197,15 @@ inside ST's chat column at `ui.bar.position`: | `below-input` | `after` `#send_form` | | `above-chat` | `before` `#chat` | +Left-to-right order in every state: gear · transport buttons · queue label · +dot strip, with the free space to the right of the dots. + States: -- **Idle** — hollow dots previewing `preferredQueue()` (the last-run queue, - falling back to the first defined), a queue ``, and hollow dots previewing + `preferredQueue()` (the last-run queue, falling back to the first defined). + Starting with no queues routes to the modal's Queues tab instead. +- **Running** — gear, Skip, Stop, profile name (with color dot), lit dots + with the active slot's counter. - **Paused (manual override)** — strip dims/desaturates, label reads "paused", Stop swaps to Resume in place. diff --git a/src/ui/bar.js b/src/ui/bar.js index b365a90..2fa2393 100644 --- a/src/ui/bar.js +++ b/src/ui/bar.js @@ -157,13 +157,14 @@ function build() { barEl.className = 'roulette-extension roulette-bar'; barEl.setAttribute('role', 'region'); barEl.setAttribute('aria-label', 'Roulette rotation'); + // Left-to-right: gear, transport (start / skip / stop / resume), queue + // label, dots. Controls cluster at the left edge; the dots trail the + // label and free space falls to the right. barEl.innerHTML = ` -
-
- - -
+ @@ -176,10 +177,12 @@ function build() { -
+
+ + +
+
`; wire(); } diff --git a/style.css b/style.css index d46c7f2..8d36626 100644 --- a/style.css +++ b/style.css @@ -278,7 +278,10 @@ .roulette-bar-label { display: flex; align-items: center; - flex: 1; + /* Shrinkable but not growing: the bar's contents cluster at the left + * edge (gear, transport, label, dots) and the free space falls to the + * right of the dots. */ + flex: 0 1 auto; min-width: 0; gap: 0.5rem; } @@ -373,9 +376,10 @@ .roulette-bar-btn-go:hover { color: var(--roulette-go); } .roulette-bar-btn-stop:hover { color: var(--roulette-stop); } -/* The gear sits slightly apart — it opens the modal, not the rotation. */ +/* The gear leads the bar but sits slightly apart from the transport + * buttons — it opens the modal, not the rotation. */ .roulette-bar-btn-gear { - margin-left: 0.25rem; + margin-right: 0.25rem; } /* Idle: the bar recedes — quieter border, no inner highlight. Running From 18b4669cbba4ef9209e14f3dd159538400c27cff Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 18 Aug 2026 17:13:16 +0000 Subject: [PATCH 2/2] Bar: Skip sits to the right of Stop while running Co-Authored-By: Claude Claude-Session: https://claude.ai/code/session_01FfFQKFCs2usE8irubrQ4Kf --- src/ui/bar.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ui/bar.js b/src/ui/bar.js index 2fa2393..061d161 100644 --- a/src/ui/bar.js +++ b/src/ui/bar.js @@ -168,15 +168,15 @@ function build() { - +