feat: add planning step before visualization generation

[GeneralJerel]

Summary

• Planning step (feat: add planning step before visualization generation #62): Adds a plan_visualization backend tool that the agent must call before any visualization tool (widgetRenderer, pieChart, barChart). The plan renders as a custom PlanCard component in chat, giving users transparency into the agent's approach before code generation starts.
• Widget height fix (bug: widget renderer height grows infinitely for viewport-filling content #64): Fixes infinite iframe height growth by collapsing the content container during measurement so viewport-relative children don't inflate the reading, and removes the +8 padding that compounded each resize cycle.
• Example prompts: Replaces "Visualize a binary search" suggestion with "Visualize how a car axle works".

Test plan

• Ask "Visualize how a car axle works" — verify agent acknowledges with text, shows PlanCard, then generates visualization
• Ask "Show me a pie chart of sales by region" — verify planning step fires before chart render
• Verify widget height stabilizes (no infinite growth) for Canvas/Three.js/SVG visualizations
• Confirm "Visualize a car axle" appears in chat suggestions

Closes #62, closes #64

🤖 Generated with Claude Code

[GeneralJerel]

Review

4 commits | +126 / -42 across 7 files

Looks good

• Height fix is solid — collapsing to height: 0 / overflow: hidden before reading scrollHeight is the correct way to get intrinsic content height when children use viewport-relative units. Removing the +8 stops the compounding growth.
• PlanCard UX is clean — auto-opens while running, collapses on complete, spinner → checkmark transition. Simple and non-intrusive.
• useRenderTool pattern is correct — the tool's return value feeds the LLM context while the frontend renders the custom component. Idiomatic CopilotKit v2.
• Demo gallery removal is consistent with the prior hide-templates work.

Issues / Questions

1. Height measurement visual flash (minor)
reportHeight() is called by a ResizeObserver + a 200ms interval for 15 seconds. Each call sets content.style.height = '0' then restores it. For complex Three.js/Canvas content this could cause brief flicker. Consider wrapping in requestAnimationFrame or using content.style.position = 'absolute'; content.style.visibility = 'hidden' during measurement instead to prevent layout shift from being painted.

2. No programmatic enforcement of the planning step (by design?)
The system prompt says "NEVER call widgetRenderer without calling plan_visualization first" but there's no code-level guard. The LLM can occasionally skip it. Is this acceptable, or should there be a frontend check that warns/blocks if a visualization tool fires without a preceding plan?

3. Trailing blank line in page.tsx (nit)
After removing <DemoGallery>, there's an extra blank line before the closing </> fragment.

4. DemoGallery component files not deleted
The import and usage are removed from page.tsx, but the component source files (demo-gallery/) appear to still exist. If dead code, consider deleting them here or in a follow-up.

5. PlanCard status type
status accepts "executing" | "inProgress" | "complete" — worth verifying these match the exact enum values CopilotKit v2's useRenderTool emits so the spinner triggers correctly.

Verdict

Clean PR, well-scoped. The height fix is the most impactful piece and looks correct. The planning step is a nice UX improvement. Main callouts are the potential measurement flicker (#1) and dead component files (#4) — neither is a blocker.