feat(app): show context cache hit rate by Astro-Han · Pull Request #910 · Astro-Han/pawwork

Astro-Han · 2026-05-25T16:35:59Z

Summary

Show a computed Cache Hit Rate row in the Context tab instead of requiring users to interpret raw cache read/write tokens.
Keep raw cache read/write values visibly available below the percentage and add a focused Context tab snap that verifies the 90% display path in default and wide panel states.
Extend the e2e LLM fixture usage payload so chat and Responses API test paths can preserve cached input tokens.

Why

Issue #884 asks for cache hit rate visibility in the Context tab. The raw cache token row made users do the math manually and made cache behavior harder to observe during cache-first work.

Related Issue

Fixes #884

Human Review Status

Pending

Review Focus

Confirm the hit-rate formula matches the intended display contract: cache read / (input + cache read + cache write), rounded to a whole percent.
Confirm the visible raw cache token line is the right density/accessibility tradeoff for Context tab stats.
Confirm the e2e fixture cacheRead extension is narrow enough for both chat and Responses API test seeding.

Risk Notes

This changes a visible Context tab stat label/value and adds semantic color for cache hit rate.
Platform checklist item is left unticked because this does not touch platform, packaging, updater, signing, paths, shell behavior, or permissions.
Docs/release/dependency checklist item is left unticked because this does not touch docs, release notes, dependencies, credentials, deletion behavior, or generated content.

How To Verify

Focused app tests: bun test --preload ./happydom.ts ./src/components/session/session-context-metrics.test.ts ./src/components/session/session-context-breakdown.test.ts — 11 passed.
Responses fixture regression: bun test test/session/processor-effect.test.ts -t "preserves cached input tokens" — 1 passed; RED first showed input=1000 before cacheRead was preserved.
Typecheck: bun run typecheck — passed.
Lint: bun eslint "packages/app/src/components/session/session-context-metrics.ts" "packages/app/src/components/session/session-context-tab.tsx" — passed; follow-up lint on session-context-tab.tsx passed.
Visual snap: bun run snap session-context-cache — passed and wrote docs/design/preview/screenshots/session-context-cache.png showing default-width and wide two-column Context tab states with Cache Hit Rate = 90% and visible raw Cache Tokens (read/write): 900 / 0.
Diff check: git diff --cached --check — passed before commits.

Screenshots or Recordings

docs/design/preview/screenshots/session-context-cache.png from bun run snap session-context-cache.

Checklist

How to use this checklist:

Tick a box by replacing [ ] with [x]. Do not edit, add, or remove items.

The bot-applied label items can only be honestly ticked AFTER the PR is opened and the labeler / priority-triage bots have run — return to the PR description and tick them then.

Most items are required. The few that are conditional are explicitly marked (conditional); for those, leave unticked if they truly do not apply and explain why in Risk Notes. All other items must be ticked before requesting human review.

Summary by CodeRabbit

New Features
- Introduced cache hit rate metric in session context statistics, displaying cached token usage as a rounded percentage with color-coded visual indicators.
Localization
- Added cache hit rate label translations for English and Chinese language support.

coderabbitai · 2026-05-25T16:36:05Z

📝 Walkthrough

Walkthrough

This PR implements cache hit rate observability in the session context tab. It extends the test LLM server to report cached tokens, adds a computed cacheHitRate metric (rounded percentage) to the session context type, displays it with color coding (green ≥90%, yellow 50–90%, red <50%), and validates the complete flow with an end-to-end snapshot test covering responsive UI resizing.

Changes

Cache Hit Rate Feature

Layer / File(s)	Summary
Metric computation and test infrastructure `packages/opencode/test/lib/llm-server.ts`, `packages/app/src/components/session/session-context-metrics.ts`, `packages/app/src/components/session/session-context-metrics.test.ts`	`Usage` type now includes optional `cacheRead`; `cacheHitRate(input, read, write)` helper computes a rounded percentage or `null` when denominators are invalid; `Context` type adds `cacheHitRate` field wired in `build()`; unit tests validate calculation and null cases.
UI rendering with color coding and tooltip `packages/app/src/components/session/session-context-tab.tsx`	New `cacheHitRateClass()` helper maps hit rates to CSS classes (green ≥90%, yellow 50–90%, red <50%); `cacheHitRate` memo renders percentage with tooltip showing raw read/write counts; stats array replaces prior `cacheTokens` display.
Internationalization for cache hit rate label `packages/app/src/i18n/en.ts`, `packages/app/src/i18n/zh.ts`	Adds `context.stats.cacheHitRate` translation keys in English (`Cache Hit Rate`) and Chinese (`缓存命中率`).
End-to-end snapshot test with responsive resizing `packages/app/e2e/snap/session-context-cache.snap.ts`	Tests complete feature: opens project, triggers context cache interactions, verifies UI visibility of 90% hit rate, dismisses toast notifications, captures default and resized panel screenshots via `widenRightPanel()` helper, combines into grid snapshot.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A cache that's alive, its hit rate in sight,
Green when it's glowing, ninety percent bright!
No more raw numbers, no math in your head—
Watch the cache sparkle, green, yellow, or red! 🎨✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely summarizes the main change: adding a cache hit rate feature to the app's context display.
Linked Issues check	✅ Passed	All P0 objectives from issue `#884` are met: cache hit rate row added to context tab with proper formula, raw values preserved on hover, and graceful degradation when data is unavailable.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to issue `#884`: metrics computation, UI display, i18n support, tests, and e2e fixture extension for cache seeding are all within stated objectives.
Description check	✅ Passed	PR description is comprehensive and follows the template structure with all required sections completed, including clear summary, reasoning, related issue, human review status, review focus, risk notes, verification steps, and fully checked checklist.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch pawwork/issue-884-cache-hit-rate-flat

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions

Suggested priority: P2 (includes user-path files (packages/app/src/components/session/session-context-metrics.test.ts, packages/app/src/components/session/session-context-metrics.ts, packages/app/src/components/session/session-context-tab.tsx, packages/app/src/i18n/en.ts, packages/app/src/i18n/zh.ts)).

P1/P0 are reserved for maintainer confirmation. Please relabel manually if this is a release blocker, security issue, data-loss risk, or updater/runtime failure.

gemini-code-assist

Code Review

This pull request introduces a "Cache Hit Rate" metric to the session context view, updating the metrics calculation, UI tab display (with color-coded values), localization dictionaries, and the mock LLM server for testing. The review feedback correctly identifies a calculation bug in the cacheHitRate formula: the denominator double-counts tokens because the input tokens count already includes the cached read and write tokens. The reviewer suggests simplifying the formula to read / input and provides corresponding updates for the call site and unit tests.

github-actions · 2026-05-25T16:40:22Z

Perf delta summary

Comparator: pass

Profile / Scenario	interaction median	interaction worst	long task max	tbt	frame gap p95	frame gap max	jank count	cls	status
default / tool-default-open-heavy-bash	16 -> 16 (0)	24 -> 24 (0)	67 -> 69 (+2)	25 -> 26 (+1)	50 -> 33.4 (-16.6)	100 -> 166.6 (+66.6)	3 -> 2 (-1)	0.004 -> 0.004 (0)	pass

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/opencode/test/lib/llm-server.ts`:
- Line 164: The responseCompleted event sets input_tokens_details.cached_tokens
from input.usage?.cacheRead but flowParts (the code that reconstructs usage when
converting chat chunks into response events for responses(...)) currently only
builds { input, output } and thus drops cacheRead; update flowParts to propagate
input.usage?.cacheRead into the reconstructed usage (e.g., include cached_tokens
or preserve input.usage as part of the usage object) so that responses(...)
receives and emits cached_tokens the same way responseCompleted does; update any
code paths that map chunk.usage -> usage in flowParts/responses to copy
input.usage?.cacheRead into input_tokens_details.cached_tokens (and similarly
preserve any existing token detail fields) so cached_tokens is not lost.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 134708f7-35f0-49ad-8044-b6953e1e6136

📥 Commits

Reviewing files that changed from the base of the PR and between ecb8cd2 and 0e2fd0a.

📒 Files selected for processing (7)

packages/app/e2e/snap/session-context-cache.snap.ts
packages/app/src/components/session/session-context-metrics.test.ts
packages/app/src/components/session/session-context-metrics.ts
packages/app/src/components/session/session-context-tab.tsx
packages/app/src/i18n/en.ts
packages/app/src/i18n/zh.ts
packages/opencode/test/lib/llm-server.ts

feat(app): show context cache hit rate

b851dc5

Astro-Han added enhancement New feature or request P2 Medium priority app Application behavior and product flows ui Design system and user interface labels May 25, 2026

github-actions Bot added the harness Model harness, prompts, tool descriptions, and session mechanics label May 25, 2026

github-actions Bot reviewed May 25, 2026

View reviewed changes

gemini-code-assist Bot reviewed May 25, 2026

View reviewed changes

Comment thread packages/app/src/components/session/session-context-metrics.ts

Comment thread packages/app/src/components/session/session-context-metrics.ts

Comment thread packages/app/src/components/session/session-context-metrics.test.ts

test(app): cover wide context cache snap

0e2fd0a

coderabbitai Bot reviewed May 26, 2026

View reviewed changes

Comment thread packages/opencode/test/lib/llm-server.ts

fix(test): preserve cache reads in responses fixture

06351db

Astro-Han merged commit f8a27e6 into dev May 26, 2026
29 checks passed

Astro-Han deleted the pawwork/issue-884-cache-hit-rate-flat branch May 26, 2026 04:59

coderabbitai Bot mentioned this pull request May 28, 2026

feat(ui): display cache hit rate with one decimal place #967

Merged

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(app): show context cache hit rate#910

feat(app): show context cache hit rate#910
Astro-Han merged 3 commits into
devfrom
pawwork/issue-884-cache-hit-rate-flat

Astro-Han commented May 25, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 25, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot left a comment

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented May 25, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

Astro-Han commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why

Related Issue

Human Review Status

Review Focus

Risk Notes

How To Verify

Screenshots or Recordings

Checklist

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf delta summary

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Astro-Han commented May 25, 2026 •

edited

Loading

coderabbitai Bot commented May 25, 2026 •

edited

Loading

github-actions Bot commented May 25, 2026 •

edited

Loading