feat: planning step, widget height fix, hide templates

[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). Renders as a collapsible PlanCard 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 using an offscreen clone for measurement (prevents ResizeObserver loops) and removes the +8 padding that compounded each resize cycle.
• Hide templates feature (Hide templates feature from UI #61): Removes template tools from the agent, hides template UI from frontend, and renames SaveTemplateOverlay to ExportOverlay.
• Visualization quality guidance (fix: add visualization quality guidance to agent prompt #60): Adds quality standards to the agent system prompt (Three.js best practices, PBR materials, proper lighting).
• Example prompts: Replaces "Visualize a binary search" suggestion with "Visualize how a car axle works".

Test plan

• "Visualize how a car axle works" — agent shows PlanCard then generates visualization
• Widget height stabilizes (no infinite growth) for Canvas/Three.js/SVG visualizations
• "Visualize a car axle" appears in chat suggestions
• Templates feature is hidden from UI and agent

Closes #62, closes #64

🤖 Generated with Claude Code

[GeneralJerel]

PR Review: feat: planning step, widget height fix, hide templates

+580 / -88 across 16 files

---

Issues

1. File not renamed after component rename
save-template-overlay.tsx still has its old name, but the component is now ExportOverlay. Should be renamed to export-overlay.tsx so imports don't confuse future contributors.

2. Demo gallery is dead code on main
Four new files under demo-gallery/ (~418 lines) are added but never imported anywhere. The commit says "preserved on feat/demo-gallery branch for future work" — if there's a separate branch, these files probably shouldn't land on main as unreferenced dead code. Consider removing them from this PR and keeping them on the feature branch only.

3. Potential visual flash in height measurement
widget-renderer.tsx — collapsing the container to height: 0 before reading scrollHeight could cause a brief visual flicker in the iframe. Since ResizeObserver fires on layout changes, this collapse-then-restore could also re-trigger the observer, creating a tight loop. Worth testing with heavy Three.js visualizations to confirm no jank.

content.style.height = '0';
content.style.overflow = 'hidden';
var h = content.scrollHeight;
content.style.height = '';
content.style.overflow = '';

A safer approach might be to clone the node offscreen or use a separate measurement element that doesn't trigger layout shifts on the visible content.

4. Snake_case prop in React component
plan-card.tsx — key_elements uses snake_case because it maps to the Python tool parameter. This works, but if you want to keep React conventions, you could destructure and rename at the call site.

---

Looks Good

• Planning tool design — Using a lightweight tool (plan.py) that returns a formatted string while the frontend renders it via useRenderTool is a clean pattern. The mandatory workflow in the system prompt is well-documented.
• Height fix core logic — Removing the +8 padding accumulation is the right fix for the compounding growth.
• Template removal — Clean removal from agent state, tools, and UI.
• ExportOverlay clipboard error handling — Good addition of the rejection handler.
• Import cleanup in export-utils.ts.

---

Summary

The substantive changes (planning step, height fix, template hiding) are solid. Main concerns:

1. Dead demo gallery code shouldn't land on main if it's unused
2. Rename the file to match ExportOverlay
3. Validate the height measurement doesn't cause ResizeObserver loops under load

[GeneralJerel]

Review — ready to merge with one note

+165 / -88 across 12 files. TypeScript compiles clean, no stale imports.

What's in the PR

1. Planning step — plan_visualization tool + PlanCard UI. Agent must plan before building any visualization.
2. Widget height fix — Offscreen clone measurement replaces collapse-then-restore. Removes +8 padding accumulation that caused infinite growth.
3. Template feature removal — Templates removed from agent state, tools, system prompt, and page UI.
4. ExportOverlay rename — SaveTemplateOverlay → ExportOverlay with file rename + clipboard error handling.
5. Minor — Updated example suggestions, chat disclaimer, import cleanup.

Note: orphaned template files still on disk

These files are no longer imported but still exist in the tree:

• apps/agent/src/templates.py
• apps/app/src/components/template-library/ (4 files)

Not blocking — they'll be addressed when the demo gallery feature lands on this same PR.

Optional improvements (non-blocking)

• Clone-based height measurement (widget-renderer.tsx:462-469): cloneNode(true) every 200ms for 15s on heavy Three.js content could cause GC pressure. Consider requestAnimationFrame debounce or reusing a single measurement element.
• postMessage origin (widget-renderer.tsx:575-584): Host-side handler accepts widget-resize from any origin. Pre-existing, low risk (only sets a height number), but could validate e.source.

Looks good

• Planning tool pattern — clean separation between Python tool and useRenderTool frontend rendering with snake_case → camelCase remapping at the call site.
• <details> auto-collapse on PlanCard completion is a nice UX touch.
• Offscreen clone is the right fix for ResizeObserver infinite loop risk.
• Template removal is thorough in all active code paths.
• Zero TypeScript errors, no stale imports to removed modules.