feat(overlay): awareness language wins on top of GET-15 layout [GET-16]#49
Merged
DevanshuNEU merged 6 commits intoApr 22, 2026
Conversation
…s [GET-16] Rewrite expanded widget DOM: session total becomes the hero number (20px tabular mono), sub-label 'session total' sits below, and a single 'last reply $X.XXXX' row replaces the ~N in / ~N out / $X compound. Three rows are removed entirely: the 'Healthy/Degrading/Critical' text label (dot color is the sole signal), the divider, and the 'total N req · ~N tok · $X' session footer. Context and message-limit bars restructure to a stacked head+track layout: label left, percent right (health-colored for context, terra cotta for the limit), with the thin track rendered underneath. Header dot is now always visible; collapsed pill contract from GET-15 stays unchanged (SAAR + session total + dot).
…GET-16] Add .lco-hero-cost (20px tabular mono, -0.02em tracking, 0.2s color transition) and its --critical modifier that animates terra cotta → red. Add .lco-sub-label (8px uppercase, 0.06em tracking, 0.7 opacity) for the 'session total' caption. Add .lco-last-reply (10px flex row, muted label + accent value) for the single-line reply cost. Restructure bar styles: new .lco-bar-head pattern (label left, percent right) with --healthy / --degrading / --critical recolors for context and a --warn variant for the message-limit bar. Track grows to 4px to carry its own row underneath the head. Add .lco-coaching-text (10px muted, full opacity, no italic) and a matching lco-coaching-in keyframe (6px slide-up + fade over 0.2s spring). prefers-reduced-motion disables both the hero color transition and the coaching entrance. Remove classes no longer referenced: .lco-row, .lco-accent, .lco-divider, .lco-health-row, .lco-health-label (and its level modifiers), and the old .lco-coaching.
…ount [GET-16] Pipeline MAJOR: the coaching-in animation lived on the base class with display: none at mount, so the 0.2s slide-up fired invisibly at first paint. By the time health flipped to degrading and the element became visible, the animation had already completed — users never saw the entrance. Scope the animation to a new .lco-coaching-text--entering modifier. render() only applies it when transitioning from hidden to visible, with a forced reflow between remove and add so the browser restarts the animation. Reduced-motion fallback updated to match the new class.
|
@DevanshuNEU is attempting to deploy a commit to the Dev's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe coaching overlay styling and session summary labeling have been updated. The Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
The earlier commits (acbfacc, 10b2537, 0714472) rebuilt the expanded widget around a session-total hero and removed the per-reply token breakdown, the explicit Healthy/Degrading/Critical label, the divider, and the session footer — all driven by an approved design spec. Reviewing the rendered result side-by-side with the prior layout made it clear the spec was chasing visual hierarchy at the cost of user awareness. For Pro and free users (our Wave 1 target) the dollar figure is pennies and un-actionable; the information it displaced was the actual coaching surface: this reply ~N in · ~N out · $X — answers 'where are my tokens going?' • Healthy — self-documenting state 67% ctx with bar — context fullness at a glance 23% limit with bar — cap proximity 3 req · ~N tok · $X — session scope Reverting ui/overlay.ts and ui/overlay-styles.ts to their state on main restores all five. GET-15's shipped wins (semantic palette, collapsed pill with session total + dot, filled critical button) live on main and are unaffected.
…T-16] Two small awareness wins on top of the revert: - Session footer renders 'N turns' (not 'N req'). 'req' was dev jargon; 'turn' is the word Claude itself uses for a user+assistant exchange, and it matches how users count their own progress through a chat. Pluralization handles 1 turn vs 2+ turns. - Coaching text bumps from 9px to 10px. At default claude.ai zoom the 9px line read as noise. 10px is scannable without dominating the surrounding rows.
DevanshuNEU
changed the title
…unts [GET-16] Same conversation was rendering as $0.00 in the side panel (2 decimals) and $0.0029 in the overlay (4 decimals). Users saw 'free' in one place and 'costs money' in another for the exact same number. formatCost now promotes to 4 decimals when a positive cost is under $0.01 and the caller is using the default precision. Large amounts stay at 2 decimals ($1.50, $100.50) and explicit decimals arguments still win (decimals: 6 for the fuzz tests, decimals: 4 for per-request surfaces). Null and zero behavior unchanged. Three new unit tests cover the promotion, the $0.01 boundary, and the explicit-override precedence.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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
Originally scoped to apply an approved design handoff spec (promote session-total cost to hero, strip the per-reply compound, remove the Healthy/Degrading/Critical text label, drop the session footer). On review, that spec traded user awareness for visual hierarchy: for our Wave 1 target (Pro / free users on Claude.ai), the dollar figure is pennies and the removed information was the actual coaching surface. This PR reverses those commits and ships the small awareness-language wins that survived re-review, plus a mechanical cost formatter fix that brings the side panel and overlay into agreement on small dollar amounts.
Type of Change
feat— New featurefix— Bug fix (cost formatter parity)refactor— Code restructure, no behavior changetest— Tests onlychore— Build, CI, tooling, dependenciesdocs— Documentation onlyMix of
revert(commit 99be705),feat(commit 7f7c089), andfix(commit 8bc9dfe).What Was Changed
Net diff vs
main: 3 files, +28 / -3 lines.ui/overlay.ts— session footer now rendersN turns/N turn(pluralized) in place ofN req. Matches the word Claude uses for a user+assistant exchange and is how users count their own progress.ui/overlay-styles.ts—.lco-coachingfont-size 9px → 10px. At default claude.ai zoom the 9px line read as noise; 10px is scannable without dominating.lib/format.ts—formatCostauto-promotes to 4 decimals when a positive cost is under $0.01 and the caller is using the default precision. Same conversation now reads as$0.0029on both the overlay and the side panel. Large amounts ($1.50,$100.50) and explicit precision arguments (decimals: 6) are unchanged.tests/audit/format-audit.test.ts— three new tests covering the auto-promotion, the$0.01boundary, and the explicit-override precedence.Commit-by-commit
acbfacc refactor(overlay): promote session total to hero ...— applied design spec10b2537 style(overlay): hero cost, sub-label, stacked bars ...— matching CSS0714472 fix(overlay): replay coaching animation on state transition ...— pipeline fix on top99be705 revert(overlay): drop hero layout, restore awareness-first rows— reverses 1–37f7c089 feat(overlay): name session scope in turns, bump coaching to 10px— awareness-language wins8bc9dfe fix(format): auto-promote formatCost to 4 decimals for fractional amounts— cost parity across surfacesNet effect: commits 4–6 undo commits 1–3 and add three small foundation improvements.
Why the reversal
The original hero layout made the wrong number dominant:
~N in · ~N outon this reply answered "where did my tokens go this turn?" — removedN req · ~N tok · $Xfooter showed session scope at a glance — removed$0.0027in 20px type filled the slot left behind — pennies-scale, un-actionable for Pro/free usersSaar's thesis ("we win when you don't burn tokens") requires tokens to be visible. The reverted layout makes them visible again. GET-15's WCAG palette, semantic health colors, collapsed pill (SAAR + session total + dot), and filled critical button all live on
mainfrom PR #48 and are unaffected here.How to Test
bun run buildand load.output/chrome-mv3in Chrome.1 turn · ~N tok · $X.XXXX(singular).2 turns · ~N tok · $X.XXXX(plural).$0.0029, not one showing$0.00and the other$0.0029).Checklist
bun run test) — 1467 / 1467 greenbun run compile)bun run build) — 1.02 MB totalRelated Issues
Closes GET-16.
Foundation follow-ups filed on 2026-04-22:
User-configurable widget rows (the customization item discussed during this session) remains on the backlog, unfiled pending prioritization after GET-17/18/19 land.