🤖 refactor: restyle RightSidebar tabs with dynamic data #1125
Conversation
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
- Replace heavy border-bottom accent with subtle pill/toggle style - Use bg-hover for active state, matching ToggleGroup pattern - Reduce text size to text-xs for consistency - Compact padding and gap between tabs - Use text-muted/text-foreground pattern for inactive/active states
- Costs tab shows session cost (e.g. 'Costs $0.56') - Review tab shows read/total hunks (e.g. 'Review 34/56') - Review counter dims when all hunks are read - Make resize handle transparent by default (visible on hover)
- Add subtle background (bg-background/50) to dynamic portions - Reduce font size to text-[10px] for badge-like appearance - Add rounded corners and padding for chip/badge styling
- Resize handle now at left edge (before VerticalTokenMeter) - Reduced width from w-1 to w-px (1px) - Shows subtle border color by default (bg-border-light) - Highlights on hover/active (bg-accent)
ammario
pushed a commit
that referenced
this pull request
Dec 12, 2025
_Generated with `mux`_ Follow-up to #1125 - adds Storybook coverage for the RightSidebar tab styling changes. ## Changes - **ORPC mock enhancements**: - Add `MockSessionUsage` type matching `SessionUsageFileSchema` - Add `sessionUsage` option to mock client factory - Wire up `getSessionUsage` to return mock data per workspace - **Story helper updates**: - Extend `setupSimpleChatStory` to accept `sessionUsage` option - **New stories** (`App/RightSidebar`): - `CostsTabWithCost`: Shows tab with \bash.56 session cost - `CostsTabSmallCost`: Shows \$<0.01 for tiny costs - `CostsTabLargeCost`: Shows \2.34 for larger sessions - `CostsTabNoCost`: Empty state (no cost in tab label) - `ReviewTabSelected`: Review panel visible - `SwitchToReviewTab`: Interaction test for tab switching
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.
Generated with
muxChanges
Tab styling: Restyled from heavy border-bottom accent to subtle pill/toggle style matching app aesthetic
bg-hoverfor active state, consistent withToggleGrouppatterntext-xsfont, compact paddingDynamic tab data:
text-[10px]) and muted color for visual distinctionResize handle: