fix(ui): show streaming token count immediately

[jatmn]

Summary

Fixes #2029.

• removes the 30-second spinner token visibility gate
• displays the current response-derived token estimate without smoothing
• preserves reduced-motion behavior with throttled, event-driven token refreshes
• keeps status rows within terminal width when a spinner suffix is present

Validation

• bun test src/components/Spinner/SpinnerAnimationRow.test.tsx
• bun test src/components/Spinner/SpinnerAnimationRow.test.tsx src/components/BuiltinStatusLine.test.tsx src/components/StatusLine.test.ts
• bun run typecheck
• bun run smoke

Final reviewed SHA: d25a3358a5db7acdbf119c67b317784ae2bd375f.

Summary by CodeRabbit

• New Features
  • Enhanced spinner progress in reduced-motion mode with throttled response-length updates.
  • Token counts now render more promptly and reflect the latest streaming length.
  • Spinner text better adapts to available column space to avoid overflow and improve suffix display.
• Bug Fixes
  • Fixed reduced-motion counters/timers carrying over between turns.
  • Improved conditions for when token text appears during streaming.
• Tests
  • Added unit tests covering token-count mapping, streaming updates, reduced-motion rendering, and narrow-layout suffix behavior.

[coderabbitai]

📝 Walkthrough

Walkthrough

Changes

Token display flow

Layer / File(s)	Summary
Token computation and rendering src/components/Spinner/SpinnerAnimationRow.tsx, src/components/Spinner/SpinnerAnimationRow.test.tsx	Token counts are computed directly from response length, visibility uses content and available width, and tests cover formatting and narrow layouts.
Spinner prop wiring src/components/Spinner.tsx	SpinnerWithVerb accepts and forwards the optional response length.
Reduced-motion response tracking src/screens/REPL.tsx, src/components/tasks/RemoteSessionProgress.tsx	Reduced-motion response lengths are throttled, reset between turns, and passed to the spinner; related smoothing comments are updated.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• Gitlawb/openclaude#1758: Updates related spinner token and timer rendering logic.

Suggested reviewers: kevincodex1

🚥 Pre-merge checks | ✅ 6 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description covers summary and validation, but it omits the required Impact and Notes sections from the template.	Add the Impact and Notes sections, and rename Validation to Testing with the requested checklist items plus any screenshots or follow-up notes.

✅ Passed checks (6 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The diff removes the 30s gate and smoothed lag, showing the real token count immediately as requested by #2029.
Out of Scope Changes check	✅ Passed	All changes align with the token-count visibility fix and related reduced-motion/layout behavior; no unrelated edits stand out.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Risk Surface Disclosed	✅ Passed	UI-only spinner/REPL display changes; no auth, routing, permissions, network, startup, plugin/MCP, CI, or release-script surfaces are modified.
No Hidden Policy Change	✅ Passed	PASS: The changes only alter spinner token display/reduced-motion batching and tests; I found no edits to routing, permissions, telemetry, network, or trust-model code paths.
Title check	✅ Passed	The title clearly matches the main diff: immediate streaming token count display with reduced-motion spinner updates.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[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 `@src/components/Spinner/SpinnerAnimationRow.test.tsx`:
- Around line 11-64: The SpinnerAnimationRow tests currently cover only
responseLengthRef; update both reduced-motion test renders to pass a conflicting
responseLength value and keep assertions verifying responseLengthRef takes
precedence. Apply this to the “shows the current token count immediately” and
“shows zero tokens” cases without changing their expected output.

🪄 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: ASSERTIVE

Plan: Pro

Run ID: a1b7bddc-3b92-4516-b507-d25d599c579b

📥 Commits

Reviewing files that changed from the base of the PR and between 022f057 and d25a335.

📒 Files selected for processing (5)

• src/components/Spinner.tsx
• src/components/Spinner/SpinnerAnimationRow.test.tsx
• src/components/Spinner/SpinnerAnimationRow.tsx
• src/components/tasks/RemoteSessionProgress.tsx
• src/screens/REPL.tsx

📜 Review details

⏰ Context from checks skipped due to timeout. (2)

• GitHub Check: smoke-and-tests (22)
• GitHub Check: smoke-and-tests (24.11.x)

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

TypeScript code in this repository must use strict mode and ESM imports.

**/*.{ts,tsx}: Follow the existing code style and architectural patterns in touched TypeScript and TSX files.
Add or update tests when TypeScript or TSX changes affect behavior.
Review AI-generated TypeScript and TSX changes for correctness beyond compilation, consistency with repository architecture and style, unnecessary generated noise, and subtle bugs before submission.

Files:

• src/components/Spinner/SpinnerAnimationRow.test.tsx
• src/components/tasks/RemoteSessionProgress.tsx
• src/components/Spinner.tsx
• src/screens/REPL.tsx
• src/components/Spinner/SpinnerAnimationRow.tsx

src/components/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

Use React + Ink for terminal UI components under src/components/.

Files:

• src/components/Spinner/SpinnerAnimationRow.test.tsx
• src/components/tasks/RemoteSessionProgress.tsx
• src/components/Spinner.tsx
• src/components/Spinner/SpinnerAnimationRow.tsx

**/*

📄 CodeRabbit inference engine (CONTRIBUTING.md)

**/*: Keep pull requests focused on one problem or feature; do not mix unrelated cleanup, fixes, features, or refactors into the same change.
Preserve existing repository patterns unless intentionally refactoring them, and prefer small, readable changes over broad rewrites.
Do not reformat unrelated files, and keep comments useful and concise.
Update documentation when setup, commands, or user-facing behavior changes.
When changing provider behavior, avoid breaking third-party providers, test the exact provider/model path changed when possible, explicitly identify affected providers, and document limitations or follow-up work.
Do not assign or use provider tags; provider tags are controlled and applied by maintainers.
Run the relevant validation checks locally before submitting; CI-required checks include bun run check, bun run test:full, provider tests when applicable, typechecks, and bun run security:pr-scan. Web changes additionally require bun run web:typecheck and bun run web:build.
Dependency changes must have a concrete project benefit, such as fixing a bug, addressing a security issue, or supporting an approved feature; preference alone is insufficient.
Do not change the project's language, core runtime, dependency stack, or significantly restructure dependencies without prior maintainer agreement.
Before implementing a new feature or other non-trivial change, open an issue to establish scope and alignment with the project roadmap.

Files:

• src/components/Spinner/SpinnerAnimationRow.test.tsx
• src/components/tasks/RemoteSessionProgress.tsx
• src/components/Spinner.tsx
• src/screens/REPL.tsx
• src/components/Spinner/SpinnerAnimationRow.tsx

---

⚙️ CodeRabbit configuration file

**/*: Apply the OpenClaude maintainer review rubric from AGENTS.md. Review the current diff, not stale discussion context. Separate real blockers from suggestions. Do not request changes for vague style churn. Treat approval as merge-ready from CodeRabbit's side, pending required human review and GitHub Checks. If checks are failing or unavailable, say so clearly instead of implying the PR is fully ready.

Files:

• src/components/Spinner/SpinnerAnimationRow.test.tsx
• src/components/tasks/RemoteSessionProgress.tsx
• src/components/Spinner.tsx
• src/screens/REPL.tsx
• src/components/Spinner/SpinnerAnimationRow.tsx

**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (CONTRIBUTING.md)

Run focused tests for changed behavior and ensure provider-specific changes include the relevant provider tests.

Files:

• src/components/Spinner/SpinnerAnimationRow.test.tsx

{src/**/*.test.ts,src/**/*.test.tsx,tests/**,scripts/**/*.test.ts,vscode-extension/**/*.test.js}

⚙️ CodeRabbit configuration file

{src/**/*.test.ts,src/**/*.test.tsx,tests/**,scripts/**/*.test.ts,vscode-extension/**/*.test.js}: Review tests for meaningful coverage of the changed behavior, isolation of global/env/config state, async cleanup, fake timers, provider profile leaks, and Windows-compatible assumptions. Block when risky runtime changes lack focused regression coverage or tests assert implementation details while missing the user-visible behavior.

Files:

• src/components/Spinner/SpinnerAnimationRow.test.tsx

🪛 React Doctor (0.7.6)

src/screens/REPL.tsx

[warning] 1577-1577: This component misses React Compiler's automatic memoization & re-renders more than it should: Compilation Skipped: Existing memoization could not be preserved. Rewrite the flagged code so the compiler can optimize it.

React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was setReducedMotionResponseLength, but the source dependencies were []. Inferred dependency not present in source.

(preserve-manual-memoization)

src/components/Spinner/SpinnerAnimationRow.tsx

[warning] 132-132: This component misses React Compiler's automatic memoization & re-renders more than it should: Cannot access refs during render. Rewrite the flagged code so the compiler can optimize it.

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the current property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

(refs)

---

[warning] 155-155: This component misses React Compiler's automatic memoization & re-renders more than it should: Cannot access refs during render. Rewrite the flagged code so the compiler can optimize it.

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the current property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

(refs)

🔇 Additional comments (5)

src/screens/REPL.tsx (1)

1558-1585: LGTM!

Also applies to: 1741-1745, 3210-3214, 4941-4941

src/components/tasks/RemoteSessionProgress.tsx (1)

70-71: LGTM!

src/components/Spinner.tsx (1)

49-49: LGTM!

Also applies to: 90-105, 274-274

src/components/Spinner/SpinnerAnimationRow.tsx (1)

20-22: LGTM!

Also applies to: 40-51, 83-84, 96-96, 132-132, 152-195

src/components/Spinner/SpinnerAnimationRow.test.tsx (1)

67-95: LGTM!

[jatmn]

@kevincodex1 LGTM

[kevincodex1]

looks great