v2.0: Replace cylinder UI with pinned bar and dot strip - #30
Merged
Conversation
… pill
Full UI redesign. The rotation is now visualised as a line of colored dots —
one per slot in queue order, the active slot grown into a lit capsule
carrying its responses-remaining count — rendered by a new plain-DOM
component (src/ui/dotStrip.js) with bar/panel/card size variants, weighted
dot sizing (sqrt of weight ratio), long-queue windowing, and in-place
patching so counter ticks never restart the grow/shrink transitions.
Surfaces:
- NEW pinned bar (src/ui/bar.js) — a slim row in the chat column at a
user-chosen position (above the message input by default; below it, or
above the chat log). Idle: hollow dots + queue picker + one-click start.
Running: lit dots, profile name, Skip/Stop (Stop swaps to Resume on
manual override), and the gear that opens the modal.
- REMOVED the revolver-cylinder SVG (cylinder.js), the floating widget
(widget.js), and the chat-input pill (statusIndicator.js). The bar
replaces all three.
- Modal merged to three tabs: Rotation (dot-strip hero + status + actions +
character binding + the pick history absorbed from the old History tab),
Queues (dot-strip card previews), Settings (bar visibility + position
segmented control; widget controls removed).
- Extensions drawer collapsed to two buttons: Enable/Disable Roulette
(pure bar-visibility toggle — never stops a rotation) and Settings.
Appearance: cool near-black palette (#0c0d11 bg, #15171d surface, #8fa4c4
accent) replaces the brass-on-brown theme; profile dots move to a vivid
8-swatch palette tuned for separation at 8px. Density pass across the
modal: 0.85rem body, 0.68rem section labels, 30px rows, ~35% less padding,
capped content width.
State: ui.widget {enabled,collapsed,x,y,historyOpen} migrates to ui.bar
{enabled,position} (a pinned widget carries over as an enabled bar);
defaultQueueId migrates to lastQueueId, now recorded on every start so the
idle bar offers the last-run queue. Queue mutations in the modal ping the
exported notifyStateChanged() so the bar picker and drawer label never go
stale. Old keys are deleted after migration; queues, bindings, per-chat
rotation state, sampler tuning, and export/import are untouched.
Docs: CLAUDE.md, README.md, TESTING.md rewritten for the new UI, including
three new manual criteria (bar toggle, bar position, v1→v2 migration).
Scheduling core unchanged; all 12 tests pass.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Major UI overhaul for v2.0. Replaces the glassy revolver-cylinder visualization with a simpler, more practical pinned status bar and linear dot strip. The bar is the extension's primary surface, mounted in the chat column at a user-configurable position; the modal's Rotation tab consolidates rotation control, queue management, and pick history in one place.
Key Changes
Removed components:
src/ui/cylinder.js— the glassy revolver-cylinder SVG component and its rotation/spin logicsrc/ui/widget.js— the floating draggable widget (replaced by the pinned bar)src/ui/tabs/chamber.js— the modal's Chamber tab (cylinder visualization + action buttons)src/ui/tabs/history.js— the modal's History tab (folded into Rotation tab)src/ui/statusIndicator.js— the chat-input pill (replaced by the pinned bar)Added components:
src/ui/bar.js— the pinned status bar; a full-width row in the chat column showing dot strip, current profile, Skip/Stop buttons, and the settings gear. Mounts at one of three user-chosen positions (above input, below input, or above chat list). Visibility is a pure UI preference; hiding it does not stop rotations or block auto-start bindings.src/ui/dotStrip.js— the linear dot strip visualization; one colored dot per slot (colored by profile hash), with the active slot lit and carrying its responses-remaining count. Three variants: bar (12-dot max), panel (24-dot max), card (8-dot max, no active state). Plain DOM with CSS transitions for smooth growth/shrink as the active slot changes.src/ui/tabs/rotation.js— new consolidated Rotation tab combining live status (dot strip + current profile + queue meta), action buttons (Start/Skip/Stop/Resume), character auto-start binding UI, and the recent-picks history (trail strip + newest-first list, capped at 100 entries).Modified components:
src/ui/modal.js— updated tab structure; removed Chamber and History tabs, added Rotation tabsrc/ui/tabs/settings.js— added bar position selector (three-way segmented control); removed widget-specific settingssrc/ui/settingsPanel.js— trimmed drawer block to two buttons: "Enable/Disable Roulette" (toggles bar visibility) and "Settings" (opens modal)src/state.js— addedBAR_POSITIONSandDEFAULT_BAR_POSITIONconstants; updated default settings version to 2; addedlastQueueIdto track the bar's queue preselectionsrc/events.js— addedsetLastQueueIdimport for tracking queue selectionsrc/ui/tabs/queues.js— updated importsindex.js— removed widget and status-indicator mounts; added bar mountstyle.css— major rewrite; removed cylinder/widget/pill styles; added bar and dot-strip stylesCLAUDE.md,README.md,TESTING.md— updated documentation for v2.0manifest.json,package.json— bumped version to 2.0.0Implementation Details
extension_settings.roulette.ui.bar.position. Position is clamped on window resize and persisted across reloads.https://claude.ai/code/session_01FfFQKFCs2usE8irubrQ4Kf