fix(vscode): smooth reasoning block transitions

[marius-kilocode]

What Problem This Solves

Reasoning blocks could flicker during fast responses. The viewport could show a scrollbar briefly, the finished block could jump while collapsing, and a tool that arrived immediately afterward could pop in before the reasoning settled.

Why This Change Was Made

The reasoning viewport now stays capped and in place when streaming ends instead of auto-collapsing. New live parts grow in with the same spring used by the reasoning details, so the reasoning and following tool transition overlap. The streaming follow uses an eased animation frame loop, and the capped viewport hides its scrollbar. Historical reasoning remains collapsed, while streamed blocks preserve their compact-open state across virtualized remounts. A collapsed block without an explicit heading gets a short summary title.

User Impact

• Fast reasoning no longer jumps or abruptly minimizes when the next tool starts.
• The streaming viewport follows new text without a flickering scrollbar.
• Completed reasoning stays available in a compact viewport until the user collapses it.
• Manually opening a block shows its full content without the compact cap.
• New live tool cards reveal with a height transition instead of appearing at full height.

Evidence

Focused browser verification used a temporary Storybook scenario rendered through the real sidebar AssistantMessage:

• The reasoning to tool handoff had a maximum single-frame container change of 6.1px.
• The tool wrapper produced 38 intermediate heights and cleared its inline animation styles.
• The compact reasoning viewport stayed capped at 120px and had no scrollbar.
• The manual-expanded state showed the full reasoning content.

Checks:

• bun run compile from packages/kilo-vscode/
• bun run typecheck from packages/kilo-vscode/
• bun run lint from packages/kilo-vscode/
• bun run knip from packages/kilo-vscode/
• bun test src/components/reasoning-heading.test.ts from packages/kilo-ui/
• bun test tests/unit/kilo-ui-contract.test.ts tests/unit/font-size-arch.test.ts tests/unit/agent-manager-arch.test.ts from packages/kilo-vscode/

[kilo-code-bot]

Code Review Summary

Status: 3 Issues Found | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	0
WARNING	3
SUGGESTION	0

Issue Details (click to expand)

WARNING

File	Line	Issue
packages/kilo-ui/src/components/reasoning-heading.ts	43	Partial strong-title detection uses endsWith, so streaming prose like **Important** because… is promoted into the title and the rest of the line is hidden until complete
packages/kilo-ui/src/components/message-part.tsx	1917	Follow scroll bails as soon as done() is true, so the capped viewport can stop mid-ease and miss the last throttled markdown paint
packages/kilo-ui/src/components/tool-utils.ts	226	useGrowIn ResizeObserver retargets for the whole live stream, keeping overflow: clip and a lagging explicit height instead of an entrance-only spring

Files Reviewed (9 files)

• .changeset/reasoning-collapse-flicker.md - 0 issues
• packages/kilo-ui/src/components/message-part.css - 0 issues
• packages/kilo-ui/src/components/message-part.tsx - 1 issue
• packages/kilo-ui/src/components/reasoning-heading.test.ts - 0 issues
• packages/kilo-ui/src/components/reasoning-heading.ts - 1 issue
• packages/kilo-ui/src/components/tool-utils.ts - 1 issue
• packages/kilo-vscode/src/agent-manager/AgentManagerProvider.ts - 0 issues
• packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts - 0 issues
• packages/kilo-vscode/webview-ui/src/components/chat/AssistantMessage.tsx - 0 issues

Fix these issues in Kilo Cloud

---

_{Reviewed by grok-4.6 · Input: 319.3K · Output: 28.3K · Cached: 930.8K}

_{Review guidance: REVIEW.md from base branch main}