Skip to content

Conversation

@roomote
Copy link
Contributor

@roomote roomote bot commented Aug 27, 2025

This PR fixes a UI issue where two different elements in the TaskHeader component both displayed "Cache" as their label, causing confusion.

Problem

  • Two rows in TaskHeader both showed "Cache" as the label
  • First row (line 241): displays cache token metrics (writes/reads)
  • Second row (line 272): displays cache size in bytes
  • This duplication was confusing for users

Solution

  • Added a new translation key cacheSize to differentiate the cache size display from the cache token metrics
  • Updated TaskHeader.tsx to use t("chat:task.cacheSize") for the byte size display
  • Kept the original t("chat:task.cache") for the token metrics display
  • Updated all 18 language translation files with appropriate translations

Changes

  • Modified webview-ui/src/components/chat/TaskHeader.tsx to use the new translation key
  • Added cacheSize translation to all language files in webview-ui/src/i18n/locales/*/chat.json

Testing

  • ✅ All tests pass (968 passed, 1 skipped)
  • ✅ TypeScript compilation successful
  • ✅ ESLint checks pass

This minimal change preserves existing functionality while improving clarity in the UI.


Important

This PR differentiates cache token metrics and cache size labels in TaskHeader.tsx by introducing a new translation key cacheSize and updating all language files.

  • Behavior:
    • Differentiates cache token metrics and cache size labels in TaskHeader.tsx by using t("chat:task.cacheSize") for cache size.
    • Retains t("chat:task.cache") for cache token metrics.
  • Translations:
    • Adds cacheSize translation key to all language files in webview-ui/src/i18n/locales/*/chat.json.
  • Testing:
    • All tests pass (968 passed, 1 skipped).
    • TypeScript compilation successful.
    • ESLint checks pass.

This description was created by Ellipsis for 373839b. You can customize this summary. It will automatically update as commits are pushed.

- Added new translation key "cacheSize" for cache size display
- Updated TaskHeader.tsx to use "cacheSize" key for byte size display
- Kept original "cache" key for token metrics display
- Updated all language translation files with appropriate translations

This resolves the UI confusion where two different metrics both showed "Cache" as their label.
@roomote roomote bot requested review from cte, jr and mrubens as code owners August 27, 2025 01:44
@dosubot dosubot bot added size:XS This PR changes 0-9 lines, ignoring generated files. UI/UX UI/UX related or focused labels Aug 27, 2025
@mrubens mrubens closed this Aug 27, 2025
@github-project-automation github-project-automation bot moved this from Triage to Done in Roo Code Roadmap Aug 27, 2025
@github-project-automation github-project-automation bot moved this from New to Done in Roo Code Roadmap Aug 27, 2025
@hannesrudolph hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Aug 27, 2025
Copy link
Contributor Author

@roomote roomote bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewing my own code is like debugging in a mirror—everything looks backward but somehow makes sense.

{t("chat:task.cacheSize")}
</th>
<td className="align-top">
{prettyBytes(((cacheReads || 0) + (cacheWrites || 0)) * 4)}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good fix! This correctly differentiates the cache size display from the cache token metrics above.

Minor suggestion: Could we add a brief comment here explaining the multiplication by 4? Something like:

Suggested change
{prettyBytes(((cacheReads || 0) + (cacheWrites || 0)) * 4)}
{t("chat:task.cacheSize")}
</th>
<td className="align-top">
{/* Each token is approximately 4 bytes */}
{prettyBytes(((cacheReads || 0) + (cacheWrites || 0)) * 4)}

This would help future developers understand the calculation.

"seeLess": "See less",
"tokens": "Tokens",
"cache": "Cache",
"cacheSize": "Cache Size",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the title case "Cache Size" intentional here? I noticed some other languages use sentence case (e.g., Spanish: "Tamaño de caché"). Not a blocker, just curious about the consistency across translations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. size:XS This PR changes 0-9 lines, ignoring generated files. UI/UX UI/UX related or focused

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

4 participants