Gaugr v1.2.24 — Chat Bar, Ring Mode, New Tutorial & Claude Code Rebuild

This one took ten days. V1.2.24 is the largest single release in Gaugr's history — new UI paradigm, new tutorial, Claude Code rebuild support, per-page usage config, a full theme compatibility fix, and a long list of ring-mode and tooltip bugs squashed in one pass.

The short version: the disclaimer bar under the composer is now yours, the setup tutorial actually looks like a product, and Gaugr survives every layout change Claude shipped this month. Here's everything in the box.

Chat Bar: Ring + Tools

Disclaimer Bar Takeover — New toggle in Settings → Features (off by default). When enabled, Gaugr takes over the "Claude is AI, can make mistakes…" disclaimer bar under the composer and turns it into a compact icon row holding the usage chip, Auto-Reply, and Export. Detection is structural — it finds the disclaimer container by Tailwind classes, not by language-dependent text — so it works in every locale. On /new (and any page where Anthropic doesn't render a disclaimer), Gaugr synthesizes a styled bar in its place, anchored after the composer. On /chat/<id>, Anthropic's py-2 is overridden to a tighter 4px so the row collapses to icon height.

Ring Mode in the Bar — When ring mode is on, the chat-bar chip switches to a 12×12 SVG ring with animated stroke-dashoffset gauge, percentage on the left, and the trend arrow (↑↑ / ↑ / = / ↓). The same digital-clock %-roll and arrow flip-blur morph that the chat chip already uses now also animates the ring stroke between polls. Modules drop their resting border and tighten to h-6 px-1 so they look like icon-buttons rather than chips inside the bar.

Setup Tutorial Redesign

2-Column Layout with Live Preview — The tutorial now has a persistent ClaudePreview pane on the right that shows a faux claude.ai surface reacting live to every option you touch on the left: theme color, chat width, font + size, ring mode, disclaimer mode, usage indicator. The right pane derives a full palette from the chosen accent (--cp-accent / -fg / -soft / -tint / -border / -strong) so the entire preview re-themes in 0.4 seconds — not just the send button. Sticky on viewports ≥ 900px, stacks vertically below. Container bumped from max-w-2xl to max-w-[1480px] — an actual full-screen tutorial instead of a cramped column.

Welcome Step — Gets the official Gaugr logo PNG with a subtle breathing animation and a cycled welcome title rotating through 13 languages. The in-step demo carousel moved to the ClaudePreview pane so the language grid has more room.

Customize Step — Now exposes all 56 built-in themes (was 16). Same Neutrals / Warm / Cool / Vivid / Pride / Gradients groups as the popup, with a "See more (N)" toggle per group so only the first 6 swatches are visible at a time. Active swatch sticks visible even when collapsed. Pro themes are flagged with a crown badge but remain selectable in the tutorial — the licensing gate kicks in later. Chat width (default / wide / max) changes the preview's conversation max-width with a 0.4-second spring transition. A "Default" reset button clears font and restores 16px size. Ring-mode toggle offered in step 2 with a big iOS-style switch.

Focus Mode Removed from Tutorial — Collapsing the sidebar on first run was too aggressive a default. Still available in Customize → Shortcuts.

Claude Code Web Rebuild

New Composer Detection — Anthropic shipped a fresh Claude Code web layout where the model selector and a new built-in usage gauge sit in a .ml-auto.flex.items-center.gap-g4 row. The previous injection code looked for section#turn-form and [data-testid="model-selector-dropdown"], neither of which exist in the rebuild. Gaugr now detects the rebuild by finding any button[aria-haspopup="dialog"] containing the official 12×12 progress-ring SVG (two stroked circles), regardless of language.

Rich Usage Chip Replaces Anthropic's — Claude's official chip is just a 12×12 ring with no number. Gaugr's version shows the percentage on the left, a matching ring on the right plus a trend arrow, color-coded (green < 70% / orange 70–89% / red ≥ 90%) and animated with the digital-clock %-roll and arrow flip-blur. The official button is hidden via display: none; Gaugr's hover popover (5h session, weekly Sonnet/Opus, Claude Design 7d, Extra Usage) replaces Anthropic's sparse one.

Tooltip Portal Fix — The /code chip hover popover was rendering ~120px off-screen. The new composer wraps content with contain: layout (and will-change: transform) which establishes a containing block for position: fixed descendants, breaking viewport-relative positioning. The tooltip is now portaled to <body>, clamped horizontally and vertically, and cleaned up on SPA navigation via a MutationObserver.

Path Detection — isCodePathname() now matches both /code (the rebuild homepage) and /code/<session-id>. The previous .includes('/code/') test missed the homepage entirely.

Per-Page Usage Indicator

Choose Your Bucket — New section in Settings → Usage Indicator lets you pick, for each of the three Claude pages (Chat / Claude Code / Claude Design), which utilization bucket the on-page chip displays: 5h session, Sonnet 7d, Weekly 7d, Opus 7d, or Claude Design 7d. The full breakdown is still always available in the hover popover. Defaults: Chat → 5h, Claude Code → 5h, Claude Design → 7d Design.

Theme Compatibility Fix

All 56 Themes Work Again — Claude shipped a new color system (data-color-version="v2" on the html element) whose default rules have higher CSS specificity than Gaugr's themes, so legacy selectors like [data-theme=claude][data-mode=dark] were being silently overridden. Every theme now carries both the legacy selector and a v2-scoped variant so it wins on both the old and new Claude builds.

Fixes

Ring-Mode Stability — Five separate fixes for the ring-mode chip: no more 9-second flash in the composer on first load (loadFeaturePreferences() is now awaited before the first updateUsageDisplay()), no more teleporting back to the composer between polls (all inject paths bail out when the bar host isn't in the DOM yet), no more leftward drift as Auto-Reply/Export buttons load 100–400ms later (canonical DOM order [Export, Auto-Reply, Chip]), host width forced to 100% box-sizing: border-box to prevent shrink-to-fit, and disclaimer-bar children are double-gated by dataset flag and display: none !important.

Chart Reset Markers — Reset markers now use the actual resets_at from the API instead of walking backward by a fixed 5h interval. Claude changed the 5h window so a new cycle starts when you send your next message, not on a fixed clock boundary. Past reset lines in the 24h/7d charts now correspond to real resets that actually happened.

Storage Quota — An earlier internal bump of MAX_HISTORY_ITEMS (1,000 → 10,000 points per account per category) blew past chrome.storage.local's 10MB quota for users with 3+ accounts. Cap is back to 2,000 points per account (~7 days at the 5-min cadence), 4,000 for the global aggregate. Existing oversized arrays get trimmed on first sync, and the save path retries with progressively smaller caps if the quota errors persist.

Tooltip Measurement — positionTooltip() ran while the tooltip still had display: none, so getBoundingClientRect() returned 0×0 and the height fallback was off by 129px. The tooltip is now revealed before measuring.

Badge Grid — Expanded view no longer duplicates the badge name on every tier row. The group title already says the badge name — the row now shows the tier number, the tier name (Bronze / Silver / Gold / Legendary, colored), and the unlock criterion.

Gamification Cycle-Peak Detection — Zen Master / Pace Setter were mis-counted because processSync() used the value just before reset as the cycle peak instead of the actual maximum. A run like 0% → 80% → 30% → 0% was wrongly counted as "under 50%." The peak is now tracked per-category as a running max.

Design Chip Popover — No longer overflows off-page on hover. Opens above the chip (upper-right) instead of below, with a subtle slide-up animation.

Extra Usage at MAX — On /design with pay-as-you-go enabled, the chip now surfaces the extra credit burn inline (e.g. "MAX +€0.00") with a 2-second pulsing glow. Fixed the stray double-percent glitch ("MAX%" → "MAX", "67%%" → "67%").

Hide Claude Note — The "Hidden" mode in Customize → Shortcuts works again. The content-script handler had been dropped in a past refactor — restored with a MutationObserver that survives SPA navigation.

Custom Disclaimer Text — In "Custom" mode, the text you type is now actually rendered in place of the default note.

Dropdown Z-Index — UsageIndicatorPrefs dropdown no longer hides behind NotificationPrefs. The glass-card's backdrop-filter was creating a stacking context trapping the dropdown's z-30. The card is now lifted to z-20 only while a dropdown is open.

Removed

Cache Timer Retired — The live "Cache: 4m 32s" countdown next to the usage indicator is gone, along with its toggle in Settings and its onboarding card. The 5-minute prompt-cache window is still real on the API side, but surfacing a fixed clock added more noise than insight — Claude's actual cache hit rate depends on the request, not just elapsed time. Translation keys cleaned out across all 34 locales.

Custom Cursor on gaugr.app — Removed from all marketing pages. Native browser cursor everywhere.

Translations

All new strings — Usage Indicator settings, Chat-Bar Ring Mode toggle, preview/demo keys, step badges, achievement tier names, reset/seeMore/seeLess — added to all 34 locales (~1,000 new entries). Variant locales (es-AR, es-CL, …) inherit from their base locale automatically.