feat(vscode): animate the Kilo logo on hover

[marius-kilocode]

What Problem This Solves

The Kilo mark on the chat welcome screen is static. Kilo Cloud plays a yellow "slot machine" animation when the same mark is hovered, so the extension is missing that brand moment.

Why This Change Was Made

Kilo Cloud ships the animation as a dotLottie file. It plays through the DotLottie WASM renderer, which the extension can use as is: the webview CSP already includes wasm-unsafe-eval for the Shiki worker, and the WASM module is served from the extension instead of the library's CDN, which the CSP blocks. The rotation (300 ms), the crossfade (200 ms), and the loop length match Kilo Cloud so both surfaces behave the same.

User Impact

• Hovering the mark plays the yellow animation, and leaving restores the static mark. This applies to the chat welcome state, the work-style empty state, and the Agent Manager intro, which share the KiloLogo component.
• The mark keeps its size and position and looks identical at rest, so nothing changes on screen until hover.
• The player mounts on the first hover, so the empty state never waits for the WASM renderer, and the static mark stays visible until the player can draw. A slow or failed load therefore leaves the mark in place instead of showing an empty square, and load errors are logged.
• prefers-reduced-motion: reduce keeps the static mark and skips the animation.
• The webview bundles grow by about 650 KB, and the extension ships a 1.5 MB WASM file.

Evidence

Focused checks from packages/kilo-vscode pass: bun run typecheck, bun run lint, bun run knip, and bun run check-kilocode-change.

Isolated VS Code self-test: the canvas frame changes while the pointer is over the mark, the static mark returns after the pointer leaves, and the webview console shows no player errors.

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

The prior WARNING (static mark faded before the Lottie player could draw) and SUGGESTION (no error handling on the player) are resolved at 804001a. The crossfade is now gated on the player's load event via onReady, and loadError/renderError log and revert to the static mark.

Files Reviewed (3 files, incremental)

• packages/kilo-vscode/webview-ui/src/components/brand/AnimatedKiloLogo.tsx
• packages/kilo-vscode/webview-ui/src/components/chat/WelcomeEmptyState.tsx
• packages/kilo-vscode/webview-ui/src/styles/welcome.css

Previous Review Summary (commit d202c80)

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

Previous review (commit d202c80)

Status: 2 Issues Found | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	0
WARNING	1
SUGGESTION	1

Issue Details (click to expand)

WARNING

File	Line	Issue
packages/kilo-vscode/webview-ui/src/components/chat/WelcomeEmptyState.tsx	33	The static mark fades out as soon as hover starts, before the Lottie/WASM renderer can draw, so the logo spot is blank on the first hover (and stays blank if the WASM fetch fails).

SUGGESTION

File	Line	Issue
packages/kilo-vscode/webview-ui/src/components/brand/AnimatedKiloLogo.tsx	35	The play() promise is dropped and there is no error listener, so load/play failures are unhandled and silent.

Files Reviewed (8 files)

• .changeset/animated-kilo-logo.md - no issues
• bun.lock - no issues
• packages/kilo-vscode/assets/icons/kilo-yellow.lottie - no issues
• packages/kilo-vscode/esbuild.js - no issues
• packages/kilo-vscode/package.json - no issues
• packages/kilo-vscode/webview-ui/src/components/brand/AnimatedKiloLogo.tsx - 1 issue
• packages/kilo-vscode/webview-ui/src/components/chat/WelcomeEmptyState.tsx - 1 issue
• packages/kilo-vscode/webview-ui/src/styles/welcome.css - no issues

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}