Add ThinkingSpinner component and integrate into StatusIndicator

[Githubguy132010]

Fixes #3812

Context

Replaces the static "Thinking..." text in the CLI status indicator with an animated spinner. This provides better visual feedback to users that the system is actively processing, improving the user experience during model thinking/streaming states.

Implementation

Created a new ThinkingSpinner component that:

• Uses Braille Unicode characters (⠋, ⠙, ⠹, etc.) for a smooth spinning animation
• Animates at 80ms per frame for a natural 10-frame rotation
• Accepts an optional color prop to match the theme
• Accepts a color prop to integrate with existing theme styling

Updated StatusIndicator to use ThinkingSpinner instead of static text when isStreaming is true.

Added comprehensive test coverage:

• Unit tests for ThinkingSpinner component covering default/custom colors, frame animation, cycling, and cleanup
• Updated StatusIndicator tests to use fake timers and validate spinner integration

Screenshots

before	after
Static "Thinking..." text	Animated Braille spinner with "Thinking..." text

How to Test

1. Start the Kilo Code CLI
2. Trigger a model streaming/thinking state
3. Observe the status indicator in the CLI—you should see an animated spinner (⠋ → ⠙ → ⠹...) instead of static "Thinking..." text
4. Verify the spinner animation is smooth and continuous while streaming is active
5. Run tests: pnpm test cli/src/ui/components/__tests__/ThinkingSpinner.test.tsx

Get in Touch

N/A

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 5d0ffe07d86cb537572890bd055cfdebcd940f1b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[mcowger]

How does this indicate the model is actively processing?

It appears to just be a spinner that doesn't use any incoming data to determine if the model is doing anything?

In other words, if the model just stopped outputting tokens (which happens), this animation would suggest the opposite.

[mcowger]

Excellent change.

In a separate PR I'd love to see this in the UI as well.

[Githubguy132010]

Excellent change.

In a separate PR I'd love to see this in the UI as well.

@mcowger Could you please clarify what you mean by 'UI'? I'm guessing the extension?

[mcowger]

Excellent change.

In a separate PR I'd love to see this in the UI as well.

@mcowger Could you please clarify what you mean by 'UI'? I'm guessing the extension?

Yes, exactly.

[Githubguy132010]

Excellent change.

In a separate PR I'd love to see this in the UI as well.

@mcowger Could you please clarify what you mean by 'UI'? I'm guessing the extension?

Yes, exactly.

Got it. I will work on it tomorrow if I have time.

[Githubguy132010]

~~#3975~~

EDIT: New PR: #3979

[Githubguy132010]

~~There is only 1 problem. It also includes changes from this PR.~~

EDIT: Fixed with new PR.