Improve token display in request list #22
+2,016
−2,462
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
There was a problem hiding this comment.
Pull request overview
This PR improves the token usage display in the request list by showing input/output tokens separately and calculating cache percentage. The changes make token usage information more informative by distinguishing between input and output tokens and showing the proportion of cached tokens as a percentage.
Key Changes:
- Token display format changed from showing total tokens to showing input and output separately ("X in Y out")
- Input token calculation now includes cached tokens in addition to regular input tokens
- Cache display changed from showing raw cached token count to showing cache percentage
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
web/app/routes/_index.tsx
Outdated
| <span className="font-mono text-gray-600"> | ||
| <span className="font-medium text-gray-900">{(request.response.body.usage.output_tokens || 0).toLocaleString()}</span> out | ||
| </span> | ||
| {request.response.body.usage.cache_read_input_tokens && ( |
There was a problem hiding this comment.
Division by zero potential when both input_tokens and cache_read_input_tokens are 0 or undefined. While the condition on line 714 checks that cache_read_input_tokens exists, it could still be 0, and input_tokens could also be 0, resulting in NaN. Consider adding a guard to ensure the denominator is not zero before performing the calculation.
Suggested change
| {request.response.body.usage.cache_read_input_tokens && ( | |
| {(request.response.body.usage.cache_read_input_tokens && | |
| ((request.response.body.usage.input_tokens || 0) + (request.response.body.usage.cache_read_input_tokens || 0)) > 0) && ( |
- Replace sequential regex replacements with single-pass tokenizer in CodeViewer.tsx highlightCode() function - The old approach applied patterns sequentially, causing later patterns to match numbers inside class attributes (e.g., "400" in "text-purple-400") - New approach: build combined regex, iterate matches once, escape HTML on matched tokens only - Also fix escapeHtml in formatters.ts to not use document.createElement (fails during SSR) and simplify formatLargeText to avoid over-formatting
- Add quote escaping to escapeHtml in CodeViewer.tsx for XSS protection - Fix string regex patterns to properly handle escaped quotes - Use template literal for paragraph wrapping in formatLargeText - Add vitest and tests for escapeHtml, formatLargeText, and string patterns
- Change combined "X tokens" to separate "X in" / "Y out" display - Makes it clearer how many tokens are uploaded vs generated - Helps users understand conversation growth per turn
- Show total input tokens (cached + non-cached) instead of just non-cached - Change cache display from absolute number to percentage - "68,446 in 100% cached" instead of "1 in 153,525 cached"
Add guard to ensure denominator is non-zero before calculating the cache percentage. This prevents NaN when both input_tokens and cache_read_input_tokens are 0.
ejc3
force-pushed
the
pr/token-display
branch
from
9b8a92d to
af904a3
Compare
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.
Shows input/output tokens separately and includes cached tokens in the total.
Changes
Screenshot
Shows "135,739 in 63 out 100% cached" format.