Skip to content

🤖 Add collapsed token meter sidebar #271

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Oct 16, 2025
Merged

🤖 Add collapsed token meter sidebar #271

merged 1 commit into from
Oct 16, 2025

Conversation

@ammar-agent
Copy link
Collaborator

@ammar-agent ammar-agent commented Oct 16, 2025 •
edited
Loading

Summary

Adds a collapsed token meter sidebar that displays the last request's token usage as a thin vertical bar when space is constrained.

Features

Responsive Collapse/Expand

  • Full view (300px): Shows tabs for Costs and Tools with detailed breakdowns
  • Collapsed view (20px): Shows vertical token meter bar
  • Hysteresis thresholds: Collapses at ≤800px ChatArea width, expands at ≥1100px
  • Smooth transition: 0.2s ease animation between states

Vertical Token Meter

  • Proportional bar height: Scales 0-100% based on context window usage (e.g., 18% usage = 18% bar height)
  • Colored segments: Shows token composition (cached/input/output/reasoning) with proper colors
  • Context percentage label: Displays usage number at top (e.g., "18")
  • Always visible: Uses sticky positioning to stay pinned to right edge, even when window < 770px
  • Hover tooltip: Shows detailed breakdown with token counts and costs

Technical Implementation

  • ResizeObserver: Measures ChatArea width with requestAnimationFrame throttling
  • React.memo: Prevents unnecessary re-renders of TokenMeter components
  • useMemo: Caches expensive vertical meter calculations
  • Flex layout: Proper vertical segment distribution without overlapping
  • Sticky positioning: Keeps collapsed bar visible during horizontal scroll

Layout Behavior

Window Width Scenarios

Window Width ChatArea Width Sidebar State Behavior
1400px+ 1100px+ Full (300px) All visible, no scroll
1100-1399px 800-1099px Hysteresis zone Maintains current state
900-1099px ~600-800px Collapsed (20px) Vertical bar visible
770-899px 750px Collapsed (20px) Tight fit, all visible
< 770px 750px (min) Collapsed (20px) Horizontal scroll, bar sticky

Sticky Behavior (< 770px)

  • ViewContainer allows horizontal scrolling
  • Vertical bar (20px) stays pinned to right edge
  • ChatArea scrolls underneath with subtle shadow
  • Bar covers rightmost 20px of chat (minimal impact)

Files Changed

    • Responsive sidebar with collapse logic
    • Collapsed view component
    • Reusable bar renderer
    • Wrapper for horizontal use
    • ResizeObserver integration, sticky container support
    • Throttled size observation
    • Shared calculations and color constants

Testing

  • Verify collapse/expand at correct thresholds
  • Test hysteresis prevents oscillation
  • Confirm vertical bar scales with context usage
  • Check segment colors match TOKEN_COMPONENT_COLORS
  • Validate tooltip shows correct breakdown
  • Test horizontal scroll behavior < 770px
  • Verify sticky bar stays visible when scrolling
  • Confirm no performance degradation or memory leaks

Generated with cmux

@ammar-agent ammar-agent force-pushed the cost-vert branch 2 times, most recently from e3ad33c to 80018ab Compare October 16, 2025 01:32
@ammar-agent ammar-agent changed the base branch from main to config-robustness October 16, 2025 01:32
@ammar-agent ammar-agent force-pushed the cost-vert branch 3 times, most recently from 73aba37 to b9195f2 Compare October 16, 2025 02:15
Base automatically changed from config-robustness to main October 16, 2025 02:57
@ammar-agent ammar-agent marked this pull request as ready for review October 16, 2025 02:57
@ammar-agent
🤖 Add always-visible vertical token meter sidebar
bc64e71 
When MetaSidebar space is limited, collapse to a 20px vertical bar
showing the last request's token composition. Bar is proportional to
context window usage and stays visible via sticky positioning on
small screens.

Key changes:
- Responsive sidebar: 300px full view ↔ 20px collapsed with hysteresis
- Vertical token meter: color-coded segments, hover for details
- Sticky positioning: bar remains visible when window < 770px
- Performance: throttled ResizeObserver (max 60fps), memoized calculations
- DRY: unified calculateTokenMeterData() for horizontal/vertical views

Technical details:
- Observe ChatArea width directly (avoids circular dependency)
- Hysteresis thresholds (800px/1100px) prevent oscillation
- Segments sized proportionally to request composition
- Context % label shows window usage (e.g., "18" for 18%)

_Generated with `cmux`_
@ammario ammario merged commit b6b2de3 into main Oct 16, 2025
8 checks passed
@ammario ammario deleted the cost-vert branch October 16, 2025 03:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ammario ammario ammario approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ammar-agent @ammario