refactor(vscode): drive the session preview with paint frames

[marius-kilocode]

Follow-up to #14346, which received a review note about setInterval in the session preview.

What changed

• requestAnimationFrame schedules playback instead of a 50 ms interval.
• Only painted time advances the loop, and a single stall is capped, so time spent hidden or occluded does not count and the sample resumes where it stopped.
• State still commits on the previous 50 ms cadence, so requestAnimationFrame only schedules the work.
• The phase is derived from the elapsed time modulo the cycle length, which removes the end-of-loop guard and the per-cycle remount.
• The preview subtree keeps its identity across cycles. Tool expansion state is no longer reset by a remount every cycle.

Docs

The Display settings page did not cover the work-style choice, the presets, or the preview panel, and two display keys had no documentation at all. This PR also documents:

• code_edit_display and mcp_tool_display, alongside the existing display keys.
• What each onboarding work style sets, including that Review first also writes permission rules while High autonomy leaves permissions alone.
• That onboarding only fills settings and permission rules that are not already configured.
• Where to change both later: Settings → Display for display options and presets, and Settings → Auto-Approve for permission rules.

Why

The previous loop woke up 20 times per second whether or not anything changed, recomputed the frame on every tick, and restarted a cycle by remounting the whole sample.

User impact

No visible behavior change in the preview. The sample still streams, loops, follows new content unless the user scrolls away, and reacts to draft display settings. Users can now read what the presets and the onboarding choice actually do.

Evidence

Isolated VS Code runs:

• Playback streams, settles, and loops in place. Part identity stayed stable across cycles, which confirms the loop no longer remounts.
• Leaving the Display tab unmounts the preview and returning remounts it fresh, so the animation frame and the resize observer are cleaned up.

bun run compile (typecheck, lint, bundle), the focused tests, and check-md-table-padding pass.

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (1 file)

• packages/kilo-docs/pages/getting-started/settings/index.md

The docs commit e07da9e5 documents the two previously undocumented display keys and the work-style choices. Its claims match the implementation: code_edit_display and mcp_tool_display default to collapsed (DisplayTab.tsx:35), toolDefaultOpen routes MCP and other non-builtin tools through mcp_tool_display (tool-default-open.ts:25), the Review first / High autonomy values match getDisplayPreset (work-style-presets.ts:67), and applyWorkStyle only fills settings and permissions that are not already customized (work-style-presets.ts:151). The Display presets, Auto-Approve tab, draft Save/Discard, and preview labels referenced in the text all exist.

Previous Review Summaries (2 snapshots, latest commit f965e57)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit f965e57)

Status: No Issues Found | Recommendation: Merge

Files Reviewed (1 file)

• packages/kilo-vscode/webview-ui/src/components/settings/SessionPreview.tsx

The follow-up commit f965e575 accumulates painted time and throttles state commits to the previous 50 ms cadence, which addresses both prior suggestions on this file. The requestAnimationFrame handle is cancelled and the ResizeObserver disconnected on cleanup, so no leak is introduced.

Previous review (commit dd6e4f4)

Status: 2 Issues Found | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	0
WARNING	0
SUGGESTION	2

Issue Details (click to expand)

SUGGESTION

File	Line	Issue
packages/kilo-vscode/webview-ui/src/components/settings/SessionPreview.tsx	155	Phase is wall-clock since mount, so non-painted time counts as playback progress; the old interval froze elapsed while hidden and resumed from the same point.
packages/kilo-vscode/webview-ui/src/components/settings/SessionPreview.tsx	158	previewFrame (structuredClone + part mapping) and reconcile now run per paint frame (~60-120 Hz) instead of per 50 ms tick, roughly 3-6x the per-second work while visible.

Files Reviewed (1 file)

• packages/kilo-vscode/webview-ui/src/components/settings/SessionPreview.tsx - 2 suggestions

Fix these issues in Kilo Cloud

---

_{Reviewed by deepseek-v4.1-flash · Input: 0 · Output: 0 · Cached: 0}

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