Skip to content

Conversation

@ammar-agent
Copy link
Collaborator

@ammar-agent ammar-agent commented Dec 1, 2025

Changes

Adds a draggable threshold slider to the context usage meter for adjusting auto-compaction settings visually.

Features

  • Draggable threshold indicator on both horizontal (Costs tab) and vertical (collapsed sidebar) context meters
  • Visual feedback: Triangle handles with connecting line, colored when enabled, muted when disabled
  • Drag to 100% to disable auto-compaction, drag back to re-enable
  • Per-model threshold: Settings persist per model via existing hook

Implementation Notes

  • Slider uses inline styles (not Tailwind) due to intermittent class application issues with dynamically rendered components
  • Horizontal slider uses native title tooltip
  • Vertical slider uses portal-based tooltip to escape narrow container clipping
  • Tooltip component extended with position='left'|'right' support

Generated with mux

@ammar-agent
Copy link
Collaborator Author

/rerun-workflow

@ammar-agent ammar-agent force-pushed the auto-compact-ui-improvements branch 5 times, most recently from dd08a62 to 28f9b77 Compare December 1, 2025 17:28
- Add ThresholdSlider component for draggable threshold indicator
  on Context Usage bar (horizontal and vertical orientations)
- Slider extends above/below bar for visibility, shows during drag
- Dragging to 100% disables auto-compaction, dragging back enables
- Tooltip shows live feedback during drag operation
- Remove AutoCompactionSettings component (replaced by slider)
- Store threshold per-model (not per-workspace) since different models
  have different context windows
- Unify CompactionWarning styles: both states use subtle right-aligned
  text; at-threshold state is bold blue instead of large block
- Add prependText method to ChatInputAPI for prepending text
- Clicking warning text inserts /compact command
- Add Storybook coverage for auto-compaction warning state

_Generated with mux_
@ammar-agent ammar-agent force-pushed the auto-compact-ui-improvements branch from 28f9b77 to a350950 Compare December 1, 2025 17:29
ammar-agent and others added 12 commits December 1, 2025 11:34
- Move slider outside bar div to avoid clipping
- Add triangle handles at line endpoints for visual affordance
- Use proper absolute positioning with centered alignment
- barHeight prop for accurate vertical centering
- Use native title attribute for tooltip (simpler, no wrapper)
- Slider positioned inside the bar container which has relative
- Add overflow-visible to allow triangles to extend beyond bar
- Remove barHeight prop - not needed with inset-0
- Extract AutoCompactionConfig type and export it
- Create useDraggableThreshold hook for drag logic
- Extract Triangle and ThresholdIndicator sub-components
- Simplify VerticalTokenMeter structure
- Add proper TooltipWrapper for tooltips
- Document container requirements in JSDoc
- Remove TooltipWrapper (was breaking absolute positioning)
- Use native title attribute for tooltip
- Export only HorizontalThresholdSlider for now
- Vertical slider disabled until horizontal is confirmed working
The slider was intermittently failing to render or receive pointer events
when using Tailwind classes. Switched to inline styles which work reliably.

Also:
- Extracted Triangle subcomponent
- Made triangle size configurable via constant
- Reduced visual footprint (smaller triangles, thinner line)
- Centered indicator vertically on bar
- Updated tooltip to mention per-model storage
…ar rounding

Regressions fixed:
- Restored usagePercentage-based flex scaling in VerticalTokenMeter (bar height reflects context usage)
- Fixed context usage bar rounded corners by wrapping segments in overflow-hidden container
- Kept slider outside the bar container for proper positioning
…tions

- ThresholdSlider component now supports both orientations
- Removed 50% minimum threshold - allow 0-90% (100% = disabled)
- Added VerticalThresholdSlider to VerticalTokenMeter
- Both sliders share the same per-model threshold state
- Use native title tooltips for hover feedback

Co-authored-by: mux <mux@coder.com>
- Added position='left' and position='right' to Tooltip component
- Includes collision detection (flips to opposite side if needed)
- Arrow properly positioned for horizontal tooltips
- Used for vertical threshold slider tooltip (avoids overflow clipping)
- Horizontal slider uses native title attribute (simpler, no clipping)
- Vertical slider uses dedicated VerticalSliderTooltip portal component
- Removed unused orientation param from SliderTooltip
- Fixed VerticalTokenMeter flex layout for proper segment display
@ammar-agent ammar-agent changed the title 🤖 feat: improve auto-compact UI spacing and interactivity 🤖 feat: draggable auto-compaction threshold slider Dec 1, 2025
@ammario ammario merged commit 1c2dde8 into main Dec 1, 2025
13 checks passed
@ammario ammario deleted the auto-compact-ui-improvements branch December 1, 2025 19:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants