feat(web): show processed tokens below the composer

[gfdelarue]

What changed

Show a compact count such as 123k tokens just below the web and desktop composer, with a 2px gap. Align it with the send button, or with the branch name and chevron when the Local checkout strip is visible.

ChatView reads the existing normalized snapshot and reuses formatContextWindowTokens. The rendering condition is:

{totalProcessedTokens !== null && totalProcessedTokens > 0 && (
	// Counter row; alignment classes omitted.
	<div>{formatContextWindowTokens(totalProcessedTokens)} tokens</div>
)}

The existing drawer inset moves to the common composer-stack wrapper so the strip and counter share it. No new state, subscriptions, dependencies, or changes to providers, contracts, persistence, or native mobile.

Why

It matters to have a persistent visual indication of how "worn-out" a thread is while deciding whether to continue in it or start fresh. Sidebar age measures elapsed time. Processed tokens measure how much usage the thread has accumulated. A young thread can already have processed millions of tokens, while an older thread may have seen very little work. These measurements complement each other, and age alone leaves that distinction invisible.

Keeping the count beside the composer makes this signal available at the moment the user writes the next prompt. It shows the latest provider-reported totalProcessedTokens, so it is a usage signal rather than a measure of response quality or a guaranteed lifetime total. Providers that omit the total produce no counter. The display remains visible when the context-window meter is disabled.

UI changes

Before:

After, aligned with the send button:

After, with Local checkout visible:

Verification

• Five existing contextWindow.test.ts tests passed.
• Web typecheck, focused lint, formatting, and git diff --check passed. Existing lint warnings are unchanged.
• Chromium verified populated and missing totals, thread switching and reload, light and dark themes, expanded and collapsed composers, and layouts at 1280px and 390px. The counter matched the send button or branch-chevron right edge exactly.
• User completed visual acceptance before this PR. Separate Electron execution and the repository-wide suite were not run locally.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for UI changes

Model: GPT-6. Harness: Codex.

Summary by CodeRabbit

• New Features

  • Added a token usage counter below the chat composer when tokens have been processed.
  • Positioned the counter to remain aligned with the composer, including when the context strip is visible.

• Style

  • Updated chat composer spacing and layout behavior to support the token counter without disrupting existing controls.

[macroscopeapp]

Approvability

Verdict: Approved at aeee8be

Macroscope's review found this PR approvable — This is a small, self-contained composer UI addition that displays an existing processed-token value and makes a scoped CSS variable available for layout. It does not change processing behavior, product defaults, APIs, persistence, or deployment configuration.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 259ccc2c-d0de-4f6f-9631-535750d089b8

📥 Commits

Reviewing files that changed from the base of the PR and between c542b78 and aeee8be.

📒 Files selected for processing (2)

• apps/web/src/components/ChatView.tsx
• apps/web/src/components/chat/ComposerSurface.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

ChatView now reads processed token usage from the active context window and displays a formatted counter below the composer. The composer stack defines the inset used when the context strip is visible, while ComposerSurface no longer defines that property.

Changes

Context token display

Layer / File(s)	Summary
Token counter and composer inset apps/web/src/components/ChatView.tsx, apps/web/src/components/chat/ComposerSurface.tsx	ChatView derives and conditionally renders the processed token count. The composer stack defines the inset property, and ComposerSurface removes its previous definition.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature

Suggested reviewers: t3dotgg

Merge Risk: ⚪ Minimal · up to aeee8

No actionable merge-blocking risk remains in this focused UI change.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files.	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 clearly and concisely describes the primary change: displaying processed-token usage below the composer.
Description check	✅ Passed	The description covers the change, rationale, UI screenshots, verification results, scope limits, and checklist items. It is complete and aligned with the repository template.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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