feat(cli): add animated console loading screens

[catrielmuller]

Issue

No linked issue — this is a requested Kilo Console loading-state polish update.

Context

Kilo Console used text banners while discovering the server and loading project or dashboard data. Replace those temporary states with the supplied animated Kilo logo so the transition into the console feels more intentional and consistent.

Implementation

Add a shared dotLottie canvas renderer and two loading-screen variants. Project discovery and initial project-console loading use a fullscreen overlay, while dashboard-data loading uses a centered overlay constrained to the content section. The logo asset is bundled locally as logo.lottie, rendered at 50% opacity, and respects reduced-motion preferences.

Screenshots / Video

How to Test

Manual/local verification

• Agent executed bun run typecheck from packages/kilo-console/ successfully.
• Agent executed bun run build from packages/kilo-console/ successfully. Vite emitted a non-blocking large-chunk warning.
• Agent executed bun test from packages/kilo-console/ successfully: 4 tests passed.
• Agent executed git diff --check successfully with no whitespace errors.

Reviewer test steps

1. Open Kilo Console on the projects route while the server is still being discovered or project data is loading.
2. Confirm the dimmed animated Kilo logo appears centered in a fullscreen overlay.
3. Open global or project settings while dashboard data is loading.
4. Confirm the same logo appears centered inside the content section without covering the entire SPA.

Checklist

• Issue linked above, or exception explained
• Tests/verification described
• Screenshots/video included for visual changes, or marked N/A
• Changeset considered for user-facing changes
• I personally reviewed the diff and can explain the changes, including any AI-assisted work.

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

The implementation is clean and well-structured. A few observations worth noting:

• Cleanup is correct: onCleanup(() => player.destroy()) inside onMount is valid SolidJS — the cleanup runs on component unmount, so there is no resource leak.
• Reduced-motion handled correctly: !window.matchMedia("(prefers-reduced-motion: reduce)").matches disables autoplay and looping when the user has reduced motion enabled; the canvas still renders a static frame, which is the right behavior.
• Minor CSS redundancy (non-blocking): .console-loading-fullscreen uses both inset: 0 (which already stretches a fixed element to fill the viewport) and explicit width: 100vw; height: 100vh. The explicit dimensions are redundant but harmless.
• Screenshot: The PR checklist notes screenshots are still pending. Not a blocker, but worth following up before merge if the visual output hasn't been verified by a reviewer.

Files Reviewed (8 files)

• .changeset/console-loading-logo.md
• bun.lock
• packages/kilo-console/package.json
• packages/kilo-console/public/logo.lottie
• packages/kilo-console/src/components/LoadingLogo.tsx
• packages/kilo-console/src/components/LoadingScreen.tsx
• packages/kilo-console/src/layouts/ConfigLayout.tsx
• packages/kilo-console/src/routes/projects/ProjectConsoleRoute.tsx
• packages/kilo-console/src/routes/projects/ProjectsRoute.tsx
• packages/kilo-console/src/styles.css
• packages/kilo-console/src/styles/loading.css

Fix these issues in Kilo Cloud

---

_{Reviewed by claude-4.6-sonnet-20260217 · 296,894 tokens}

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