🤖 feat: differentiate cache create vs cache read colors in costs tab #1199
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
- Add --color-token-cache-create CSS variable (orange/amber) to all 4 themes - Add cacheCreate key to TOKEN_COMPONENT_COLORS - Update CostsTab and tokenMeterUtils to use distinct color for cache create - Add CostsTabWithCacheCreate story showing the visual difference Cache create is significantly more expensive than cache read for Anthropic models, so having distinct colors makes it easier to see where costs are coming from at a glance.
Missed this inline cost bar - was still using TOKEN_COMPONENT_COLORS.cached instead of TOKEN_COMPONENT_COLORS.cacheCreate for the cache create segment.
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
Adds a distinct orange/amber color for Cache Create tokens in the costs tab, differentiating them from Cache Read (grey).
For Anthropic models, cache create is significantly more expensive than cache read (~3.75x input cost vs 0.1x input cost). Having distinct colors makes it easy to see at a glance where costs are coming from.
Changes
--color-token-cache-createCSS variable to all 4 themes (dark, light, solarized-dark, solarized-light)cacheCreatekey toTOKEN_COMPONENT_COLORSCostsTab.tsxto use new color in both:tokenMeterUtils.tsSEGMENT_DEFSto use new color for context usage barCostsTabWithCacheCreatestory showing the visual differenceColor choices
hsl(30 90% 50%)(amber)hsl(0 0% 50%)(grey)hsl(30 85% 45%)(darker amber)hsl(210 16% 50%)(grey)#cb4b16(solarized orange)#839496/#586e75(grey)Generated with
mux• Model:anthropic:claude-opus-4-5• Thinking:high