Bar layout: controls lead from the left, dots trail the queue label

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 `<select>`, and ▶. Starting with
-  no queues routes to the modal's Queues tab instead.
-- **Running** — lit dots with the active slot's counter, profile name (with
-  color dot), Skip, Stop, gear.
+- **Idle** — gear, ▶, a queue `<select>`, 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.
 

src/ui/bar.js

@@ -157,29 +157,32 @@ 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 = `
-        <div class="roulette-bar-dots" data-field="dots"></div>
-        <div class="roulette-bar-label">
-            <select class="roulette-bar-queue" data-field="queue" aria-label="Queue to start"></select>
-            <span class="roulette-bar-profile" data-field="profile"></span>
-        </div>
         <div class="roulette-bar-actions">
+            <button type="button" class="roulette-bar-btn roulette-bar-btn-gear" data-act="open" title="Open Roulette" aria-label="Open Roulette">
+                <i class="fa-solid fa-gear"></i>
+            </button>
             <button type="button" class="roulette-bar-btn roulette-bar-btn-go" data-act="start" title="Start rotation" aria-label="Start rotation">
                 <i class="fa-solid fa-play"></i>
             </button>
-            <button type="button" class="roulette-bar-btn" data-act="skip" title="Skip to the next slot" aria-label="Skip to the next slot">
-                <i class="fa-solid fa-forward"></i>
-            </button>
             <button type="button" class="roulette-bar-btn roulette-bar-btn-stop" data-act="stop" title="Stop rotation" aria-label="Stop rotation">
                 <i class="fa-solid fa-stop"></i>
             </button>
             <button type="button" class="roulette-bar-btn roulette-bar-btn-go" data-act="resume" title="Resume rotation" aria-label="Resume rotation">
                 <i class="fa-solid fa-play"></i>
             </button>
-            <button type="button" class="roulette-bar-btn roulette-bar-btn-gear" data-act="open" title="Open Roulette" aria-label="Open Roulette">
-                <i class="fa-solid fa-gear"></i>
+            <button type="button" class="roulette-bar-btn" data-act="skip" title="Skip to the next slot" aria-label="Skip to the next slot">
+                <i class="fa-solid fa-forward"></i>
             </button>
         </div>
+        <div class="roulette-bar-label">
+            <select class="roulette-bar-queue" data-field="queue" aria-label="Queue to start"></select>
+            <span class="roulette-bar-profile" data-field="profile"></span>
+        </div>
+        <div class="roulette-bar-dots" data-field="dots"></div>
     `;
     wire();
 }

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