feat: add token usage display + structured client logging

[bradfeld]

Summary

• FRE-18: Add token usage display (input/output/cached/context) to coding CLI pane headers with a compact UsageBar component
• FRE-36: Replace 44 raw console.log/warn/error calls across 14 client source files with a structured createLogger(component) factory

FRE-36: Client Logger Details

Adds a level-filtered, component-prefixed createLogger(component) factory to client-logger.ts. Each component gets a tagged logger (e.g. [App], [Store], [EditorPane]) with debug/info/warn/error methods that respect a global log level (debug in development, warn in production).

Files converted

• src/App.tsx — 12 console calls → [App] logger
• src/store/store.ts — 4 calls → [Store] logger
• src/store/storage-migration.ts — 4 calls → [StorageMigration] logger
• src/store/tabsSlice.ts — 2 calls → [TabsSlice] logger
• src/store/panesSlice.ts — 3 calls → [PanesSlice] logger
• src/store/persistMiddleware.ts — 1 call → [PersistMiddleware] logger
• src/lib/ws-client.ts — 2 calls → [WsClient] logger
• src/components/TerminalView.tsx — 9 calls → [TerminalView] logger
• src/components/SettingsView.tsx — 2 calls → [SettingsView] logger
• src/components/Sidebar.tsx — 1 call → [Sidebar] logger
• src/components/panes/EditorPane.tsx — 10 calls → [EditorPane] logger
• src/components/panes/PaneContainer.tsx — 1 call → [PaneContainer] logger
• src/components/terminal/useChunkedAttach.ts — 3 calls → [ChunkedAttach] logger

Test plan

• npm test passes (14 pre-existing server-side SDK timeouts unrelated)
• 3 test files updated for [Component] prefix in spy assertions
• Manual verification in browser console

🤖 Generated with Claude Code

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 71bcc171d4

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Import the existing client logger API

PaneContainer now imports createLogger from @/lib/client-logger, but that module only exports createClientLogger; there is no named export called createLogger. In ESM builds this causes a module-load failure (does not provide an export named ...) as soon as PaneContainer is evaluated, which breaks rendering of panes in production/dev runtime.

Useful? React with 👍 / 👎.

[danshapiro]

I don't want to add too muich color, so let's do this as a grey "donut outline" that fills up with grey clockwise as you use up the tokens, similar to how cursor does it.

…

On Sun, Feb 15, 2026 at 5:24 PM Brad Feld ***@***.***> wrote: Summary - Add a color-coded UsageBar component showing context window fill percentage in pane headers (green < 70%, yellow 70-89%, red >= 90%) - Add formatTokenUsageSummary() utility for detailed token breakdown (input/output/cached/context) - Enhance tooltip to show full token breakdown on hover with improved formatting - Thread tokenUsage prop through PaneContainer → Pane → PaneHeader component hierarchy Test plan - 8 UsageBar unit tests (aria attributes, color thresholds, clamping, rounding) - 10 formatTokenUsageSummary + formatPaneRuntimeTooltip tests (full data, partial, undefined, edge cases) - 31 existing PaneHeader tests updated and passing - Manual verification of UsageBar rendering in dev Refs FRE-18 🤖 Generated with Claude Code <https://claude.com/claude-code> ------------------------------ You can view, comment on, or merge this pull request online at: #64 Commit Summary - 947cd9e <947cd9e> chore: add Workflow Profile section to CLAUDE.md - 71bcc17 <71bcc17> feat: add token usage display to coding CLI pane headers File Changes (9 files <https://github.com/danshapiro/freshell/pull/64/files>) - *M* CLAUDE.md <https://github.com/danshapiro/freshell/pull/64/files#diff-6ebdb617a8104a7756d0cf36578ab01103dc9f07e4dc6feb751296b9c402faf7> (27) - *M* src/components/panes/Pane.tsx <https://github.com/danshapiro/freshell/pull/64/files#diff-8dd8e1bbbda043a96581839e042826a3b84b8964085a12501b6a9cd9e6d79910> (4) - *M* src/components/panes/PaneContainer.tsx <https://github.com/danshapiro/freshell/pull/64/files#diff-8efac61341c5763f0dbf0e0e25c772ed2c41d0b9940f47e2a981fe7bd9c538af> (7) - *M* src/components/panes/PaneHeader.tsx <https://github.com/danshapiro/freshell/pull/64/files#diff-989e33f8cf1f32ac8a4c5facbec970dec1b245090f425963af292b66b22a5098> (8) - *A* src/components/ui/usage-bar.tsx <https://github.com/danshapiro/freshell/pull/64/files#diff-ed97de403ac463107ca00c8ec2fe3af3811637e7bc66481be19308e884d84398> (35) - *M* src/lib/format-terminal-title-meta.ts <https://github.com/danshapiro/freshell/pull/64/files#diff-369e44ac8008233babef0304ddd3fc60deb52806b876d9ca8b8e4096b829fb1f> (56) - *M* test/unit/client/components/panes/PaneHeader.test.tsx <https://github.com/danshapiro/freshell/pull/64/files#diff-e93945a267f523f612088cb271976266cbb161754b120519d9ca029e1a0290f8> (12) - *A* test/unit/client/components/panes/UsageBar.test.tsx <https://github.com/danshapiro/freshell/pull/64/files#diff-1eb0d318751e381101619f97564c58144abe62b99f5740970823e001e8ca54b8> (69) - *A* test/unit/client/lib/format-terminal-title-meta.test.ts <https://github.com/danshapiro/freshell/pull/64/files#diff-88210310bf2f7270fa2a1ecac4c9eb9c226b810e15d7c879b57aca35d2a0458d> (125) Patch Links: - https://github.com/danshapiro/freshell/pull/64.patch - https://github.com/danshapiro/freshell/pull/64.diff — Reply to this email directly, view it on GitHub <#64>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4PK6WB2HG5V6KL7NO6I4D4MEL3RAVCNFSM6AAAAACVHIWPBKVHI2DSMVQWIX3LMV43ASLTON2WKOZTHE2DKNBQHA3TQNI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[danshapiro]

Thanks @bradfeld — the createLogger refactor is a nice improvement over raw console calls. Level-filtered, clean API, good pattern.

Two things we noticed when testing:

• The UsageBar in pane headers doesn't appear to have a data source that populates tokenUsage for any current session type.
• The remote log collector (createClientLogger().installConsoleCapture()) monkey-patches all console.* methods at startup and POSTs to /api/logs/client, but that server endpoint doesn't exist — it silently retries against a 404 every 2 seconds.

We've consolidated this with the related PRs (#67, #72, #75) into #83 for tracking. The createLogger piece could potentially land independently — would be interested in your thoughts in the tracking issue.

Closing in favor of #83.

— Claude Code