diff --git a/apps/agent/main.py b/apps/agent/main.py
index 3e43367..4283880 100644
--- a/apps/agent/main.py
+++ b/apps/agent/main.py
@@ -18,13 +18,13 @@
 from src.query import query_data
 from src.todos import AgentState, todo_tools
 from src.form import generate_form
-from src.templates import template_tools
+from src.plan import plan_visualization
 
 load_dotenv()
 
 agent = create_deep_agent(
     model=ChatOpenAI(model=os.environ.get("LLM_MODEL", "gpt-5.4-2026-03-05")),
-    tools=[query_data, *todo_tools, generate_form, *template_tools],
+    tools=[query_data, plan_visualization, *todo_tools, generate_form],
     middleware=[CopilotKitMiddleware()],
     context_schema=AgentState,
     skills=[str(Path(__file__).parent / "skills")],
@@ -53,27 +53,36 @@
         - Pre-styled form elements (buttons, inputs, sliders look native automatically)
         - Pre-built SVG CSS classes for color ramps (.c-purple, .c-teal, .c-blue, etc.)
 
-        ## UI Templates
+        ## Visualization Workflow (MANDATORY)
 
-        Users can save generated UIs as reusable templates and apply them later.
-        You have backend tools: `save_template`, `list_templates`, `apply_template`, `delete_template`.
+        When producing ANY visual response (widgetRenderer, pieChart, barChart), you MUST
+        follow this exact sequence:
 
-        **When a user asks to apply/recreate a template with new data:**
-        Check `pending_template` in state — the frontend sets this when the user picks a template.
-        If `pending_template` is present (has `id` and `name`):
-        1. Call `apply_template(template_id=pending_template["id"])` to retrieve the HTML
-        2. Take the returned HTML and COPY IT EXACTLY, only replacing the data values
-           (names, numbers, dates, labels, amounts) to match the user's message
-        3. Render the modified HTML using `widgetRenderer`
-        4. Call `clear_pending_template` to reset the pending state
+        1. **Acknowledge** — Reply with 1-2 sentences of plain text acknowledging the
+           request and setting context for what the visualization will show.
+        2. **Plan** — Call `plan_visualization` with your approach, technology choice,
+           and 2-4 key elements. Keep it concise.
+        3. **Build** — Call the appropriate visualization tool (widgetRenderer, pieChart,
+           or barChart).
+        4. **Narrate** — After the visualization, add 2-3 sentences walking through
+           what was built and offering to go deeper.
 
-        If no `pending_template` is set but the user mentions a template by name, use
-        `apply_template(name="...")` instead.
+        NEVER skip the plan_visualization step. NEVER call widgetRenderer, pieChart, or
+        barChart without calling plan_visualization first.
 
-        CRITICAL: Do NOT rewrite or generate HTML from scratch. Take the original HTML string,
-        find-and-replace ONLY the data values, and pass the result to widgetRenderer.
-        This preserves the exact layout and styling of the original template.
-        For bar/pie chart templates, use `barChart` or `pieChart` component instead.
+        ## Visualization Quality Standards
+
+        The iframe has an import map with these ES module libraries — use `<script type="module">` and bare import specifiers:
+        - `three` — 3D graphics. `import * as THREE from "three"`. Also `three/examples/jsm/controls/OrbitControls.js` for camera controls.
+        - `gsap` — animation. `import gsap from "gsap"`.
+        - `d3` — data visualization and force layouts. `import * as d3 from "d3"`.
+        - `chart.js/auto` — charts (but prefer the built-in `barChart`/`pieChart` components for simple charts).
+
+        **3D content**: ALWAYS use Three.js with proper WebGL rendering. Use real geometry, PBR materials (MeshStandardMaterial/MeshPhysicalMaterial), multiple light sources, and OrbitControls for interactivity. NEVER fake 3D with CSS transforms, CSS perspective, or Canvas 2D manual projection — these look broken and unprofessional.
+
+        **Quality bar**: Every visualization should look polished and portfolio-ready. Use smooth animations, proper lighting (ambient + directional at minimum), responsive canvas sizing (`window.addEventListener('resize', ...)`), and antialiasing (`antialias: true`). No proof-of-concept quality.
+
+        **Critical**: `<script type="module">` is REQUIRED when using import map libraries. Regular `<script>` tags cannot use `import` statements.
     """,
 )
 
diff --git a/apps/agent/src/plan.py b/apps/agent/src/plan.py
new file mode 100644
index 0000000..cdfd141
--- /dev/null
+++ b/apps/agent/src/plan.py
@@ -0,0 +1,21 @@
+"""Planning tool for visualization generation."""
+
+from langchain.tools import tool
+
+
+@tool
+def plan_visualization(
+    approach: str, technology: str, key_elements: list[str]
+) -> str:
+    """Plan a visualization before building it. MUST be called before
+    widgetRenderer, pieChart, or barChart. Outlines the approach, technology
+    choice, and key elements.
+
+    Args:
+        approach: One sentence describing the visualization strategy.
+        technology: The primary technology (e.g. "inline SVG", "Chart.js",
+            "HTML + Canvas", "Three.js", "Mermaid", "D3.js").
+        key_elements: 2-4 concise bullet points describing what will be built.
+    """
+    elements = "\n".join(f"  - {e}" for e in key_elements)
+    return f"Plan: {approach}\nTech: {technology}\n{elements}"
diff --git a/apps/agent/src/todos.py b/apps/agent/src/todos.py
index 2d934b5..b647fee 100644
--- a/apps/agent/src/todos.py
+++ b/apps/agent/src/todos.py
@@ -2,11 +2,9 @@
 from langchain.tools import ToolRuntime, tool
 from langchain.messages import ToolMessage
 from langgraph.types import Command
-from typing import Optional, TypedDict, Literal
+from typing import TypedDict, Literal
 import uuid
 
-from src.templates import UITemplate
-
 class Todo(TypedDict):
     id: str
     title: str
@@ -14,14 +12,8 @@ class Todo(TypedDict):
     emoji: str
     status: Literal["pending", "completed"]
 
-class PendingTemplate(TypedDict, total=False):
-    id: str
-    name: str
-
 class AgentState(BaseAgentState):
     todos: list[Todo]
-    templates: list[UITemplate]
-    pending_template: Optional[PendingTemplate]
 
 @tool
 def manage_todos(todos: list[Todo], runtime: ToolRuntime) -> Command:
diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index 28b6d9d..6871fff 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -1,20 +1,15 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { ExampleLayout } from "@/components/example-layout";
 import { useGenerativeUIExamples, useExampleSuggestions } from "@/hooks";
 import { ExplainerCardsPortal } from "@/components/explainer-cards";
-import { TemplateLibrary } from "@/components/template-library";
-import { TemplateChip } from "@/components/template-library/template-chip";
-
 import { CopilotChat } from "@copilotkit/react-core/v2";
 
 export default function HomePage() {
   useGenerativeUIExamples();
   useExampleSuggestions();
 
-  const [templateDrawerOpen, setTemplateDrawerOpen] = useState(false);
-
   // Widget bridge: handle messages from widget iframes
   useEffect(() => {
     const handler = (e: MessageEvent) => {
@@ -60,23 +55,6 @@ export default function HomePage() {
                 </p>
               </div>
               <div className="flex items-center gap-2">
-                {/* Template Library toggle */}
-                <button
-                  onClick={() => setTemplateDrawerOpen(true)}
-                  className="inline-flex items-center gap-1.5 px-3 py-2 rounded-full text-sm font-medium no-underline whitespace-nowrap transition-all duration-150 hover:-translate-y-px"
-                  style={{
-                    color: "var(--text-secondary)",
-                    border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
-                    background: "var(--surface-primary, rgba(255,255,255,0.6))",
-                    fontFamily: "var(--font-family)",
-                  }}
-                  title="Open Template Library"
-                >
-                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
-                  </svg>
-                  Templates
-                </button>
                 <a
                   href="https://github.com/CopilotKit/OpenGenerativeUI"
                   target="_blank"
@@ -98,6 +76,7 @@ export default function HomePage() {
             <CopilotChat
               labels={{
                 welcomeMessageText: "What do you want to visualize today?",
+                chatDisclaimerText: "Visualizations are AI-generated. You can retry the same prompt or ask the AI to refine the result.",
               }}
             />
           } />
@@ -105,14 +84,6 @@ export default function HomePage() {
         </div>
       </div>
 
-      {/* Template chip — portal renders above chat input */}
-      <TemplateChip />
-
-      {/* Template Library Drawer */}
-      <TemplateLibrary
-        open={templateDrawerOpen}
-        onClose={() => setTemplateDrawerOpen(false)}
-      />
     </>
   );
 }
diff --git a/apps/app/src/components/generative-ui/charts/bar-chart.tsx b/apps/app/src/components/generative-ui/charts/bar-chart.tsx
index 26f80e6..1a6812c 100644
--- a/apps/app/src/components/generative-ui/charts/bar-chart.tsx
+++ b/apps/app/src/components/generative-ui/charts/bar-chart.tsx
@@ -1,7 +1,7 @@
 import { BarChart as RechartsBarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
 import { z } from 'zod';
 import { CHART_COLORS, CHART_CONFIG } from './config';
-import { SaveTemplateOverlay } from '../save-template-overlay';
+import { ExportOverlay } from '../export-overlay';
 
 export const BarChartProps = z.object({
   title: z.string().describe("Chart title"),
@@ -38,9 +38,8 @@ export function BarChart({ title, description, data }: BarChartProps) {
   }));
 
   return (
-    <SaveTemplateOverlay
+    <ExportOverlay
       title={title}
-      description={description}
       componentType="barChart"
       componentData={{ title, description, data }}
     >
@@ -66,6 +65,6 @@ export function BarChart({ title, description, data }: BarChartProps) {
           </RechartsBarChart>
         </ResponsiveContainer>
       </div>
-    </SaveTemplateOverlay>
+    </ExportOverlay>
   );
 }
diff --git a/apps/app/src/components/generative-ui/charts/pie-chart.tsx b/apps/app/src/components/generative-ui/charts/pie-chart.tsx
index 8238928..65ca26b 100644
--- a/apps/app/src/components/generative-ui/charts/pie-chart.tsx
+++ b/apps/app/src/components/generative-ui/charts/pie-chart.tsx
@@ -6,7 +6,7 @@ import {
 } from "recharts";
 import { z } from "zod";
 import { CHART_COLORS, CHART_CONFIG } from "./config";
-import { SaveTemplateOverlay } from "../save-template-overlay";
+import { ExportOverlay } from "../export-overlay";
 
 export const PieChartProps = z.object({
   title: z.string().describe("Chart title"),
@@ -47,9 +47,8 @@ export function PieChart({ title, description, data }: PieChartProps) {
   }));
 
   return (
-    <SaveTemplateOverlay
+    <ExportOverlay
       title={title}
-      description={description}
       componentType="pieChart"
       componentData={{ title, description, data }}
     >
@@ -94,6 +93,6 @@ export function PieChart({ title, description, data }: PieChartProps) {
           ))}
         </div>
       </div>
-    </SaveTemplateOverlay>
+    </ExportOverlay>
   );
 }
diff --git a/apps/app/src/components/generative-ui/save-template-overlay.tsx b/apps/app/src/components/generative-ui/export-overlay.tsx
similarity index 93%
rename from apps/app/src/components/generative-ui/save-template-overlay.tsx
rename to apps/app/src/components/generative-ui/export-overlay.tsx
index 4614053..722c889 100644
--- a/apps/app/src/components/generative-ui/save-template-overlay.tsx
+++ b/apps/app/src/components/generative-ui/export-overlay.tsx
@@ -8,9 +8,8 @@ import {
   slugify,
 } from "./export-utils";
 
-interface SaveTemplateOverlayProps {
+interface ExportOverlayProps {
   title: string;
-  description: string;
   html?: string;
   componentData?: Record<string, unknown>;
   componentType: string;
@@ -18,14 +17,14 @@ interface SaveTemplateOverlayProps {
   children: ReactNode;
 }
 
-export function SaveTemplateOverlay({
+export function ExportOverlay({
   title,
   html,
   componentData,
   componentType,
   ready = true,
   children,
-}: SaveTemplateOverlayProps) {
+}: ExportOverlayProps) {
   const [copyState, setCopyState] = useState<"idle" | "copied">("idle");
   const [menuOpen, setMenuOpen] = useState(false);
   const [hovered, setHovered] = useState(false);
@@ -67,11 +66,17 @@ export function SaveTemplateOverlay({
   const handleCopy = useCallback(() => {
     const textToCopy = componentType === "widgetRenderer" ? html : exportHtml;
     if (!textToCopy) return;
-    navigator.clipboard.writeText(textToCopy).then(() => {
-      setCopyState("copied");
-      setMenuOpen(false);
-      setTimeout(() => setCopyState("idle"), 1800);
-    });
+    navigator.clipboard.writeText(textToCopy).then(
+      () => {
+        setCopyState("copied");
+        setMenuOpen(false);
+        setTimeout(() => setCopyState("idle"), 1800);
+      },
+      () => {
+        // Clipboard write failed (e.g. permission denied, iframe context)
+        setMenuOpen(false);
+      }
+    );
   }, [componentType, html, exportHtml]);
 
   const showTrigger = ready && exportHtml && (hovered || menuOpen);
diff --git a/apps/app/src/components/generative-ui/export-utils.ts b/apps/app/src/components/generative-ui/export-utils.ts
index d335831..381586b 100644
--- a/apps/app/src/components/generative-ui/export-utils.ts
+++ b/apps/app/src/components/generative-ui/export-utils.ts
@@ -1,5 +1,4 @@
-import { THEME_CSS } from "./widget-renderer";
-import { SVG_CLASSES_CSS, FORM_STYLES_CSS } from "./widget-renderer";
+import { THEME_CSS, SVG_CLASSES_CSS, FORM_STYLES_CSS } from "./widget-renderer";
 
 const CHART_COLORS = [
   "#3b82f6",
diff --git a/apps/app/src/components/generative-ui/plan-card.tsx b/apps/app/src/components/generative-ui/plan-card.tsx
new file mode 100644
index 0000000..cc36da7
--- /dev/null
+++ b/apps/app/src/components/generative-ui/plan-card.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+interface PlanCardProps {
+  status: "executing" | "inProgress" | "complete";
+  approach?: string;
+  technology?: string;
+  keyElements?: string[];
+}
+
+export function PlanCard({ status, approach, technology, keyElements }: PlanCardProps) {
+  const detailsRef = useRef<HTMLDetailsElement>(null);
+  const isRunning = status === "executing" || status === "inProgress";
+
+  useEffect(() => {
+    if (!detailsRef.current) return;
+    detailsRef.current.open = isRunning;
+  }, [isRunning]);
+
+  const spinner = (
+    <span className="inline-block h-3 w-3 rounded-full border-2 border-gray-400 border-t-transparent animate-spin" />
+  );
+  const checkmark = <span className="text-green-500 text-xs">✓</span>;
+
+  return (
+    <div className="my-2 text-sm">
+      <details ref={detailsRef} open>
+        <summary className="flex items-center gap-2 text-gray-600 dark:text-gray-400 cursor-pointer list-none">
+          {isRunning ? spinner : checkmark}
+          <span className="font-medium">
+            {isRunning ? "Planning visualization…" : `Plan: ${technology || "visualization"}`}
+          </span>
+          <span className="text-[10px]">▼</span>
+        </summary>
+        {approach && (
+          <div className="pl-5 mt-1.5 space-y-1.5 text-xs text-gray-500 dark:text-zinc-400">
+            {technology && (
+              <span className="inline-block px-1.5 py-0.5 rounded bg-gray-100 dark:bg-zinc-700 text-gray-600 dark:text-zinc-300 font-medium text-[11px]">
+                {technology}
+              </span>
+            )}
+            <p className="text-gray-600 dark:text-gray-400">{approach}</p>
+            {keyElements && keyElements.length > 0 && (
+              <ul className="list-disc pl-4 space-y-0.5">
+                {keyElements.map((el, i) => (
+                  <li key={i}>{el}</li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+      </details>
+    </div>
+  );
+}
diff --git a/apps/app/src/components/generative-ui/widget-renderer.tsx b/apps/app/src/components/generative-ui/widget-renderer.tsx
index 43ccb19..11e7d44 100644
--- a/apps/app/src/components/generative-ui/widget-renderer.tsx
+++ b/apps/app/src/components/generative-ui/widget-renderer.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState, useCallback } from "react";
 import { z } from "zod";
-import { SaveTemplateOverlay } from "./save-template-overlay";
+import { ExportOverlay } from "./export-overlay";
 import { IDIOMORPH_JS } from "./idiomorph-inline";
 
 // ─── Zod Schema (CopilotKit parameter contract) ─────────────────────
@@ -455,10 +455,18 @@ window.addEventListener('message', function(e) {
   }
 });
 
-// Auto-resize: report content height to host
+// Auto-resize: report content height to host.
+// Clone the content off-screen so viewport-relative children (100vh, 100%)
+// don't inflate the reading and we never mutate the visible DOM (which would
+// re-trigger ResizeObserver and risk an infinite loop).
 function reportHeight() {
   var content = document.getElementById('content');
-  var h = content ? content.offsetHeight : document.documentElement.scrollHeight;
+  if (!content) return;
+  var clone = content.cloneNode(true);
+  clone.style.cssText = 'position:fixed;top:-9999px;left:-9999px;width:' + content.offsetWidth + 'px;height:auto;overflow:hidden;visibility:hidden;pointer-events:none;';
+  document.body.appendChild(clone);
+  var h = clone.scrollHeight;
+  document.body.removeChild(clone);
   window.parent.postMessage({ type: 'widget-resize', height: h }, '*');
 }
 var ro = new ResizeObserver(reportHeight);
@@ -550,7 +558,7 @@ function useLoadingPhrase(active: boolean) {
 
 // ─── React Component ─────────────────────────────────────────────────
 
-export function WidgetRenderer({ title, description, html }: WidgetRendererProps) {
+export function WidgetRenderer({ title, html }: WidgetRendererProps) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [height, setHeight] = useState(0);
   const [loaded, setLoaded] = useState(false);
@@ -573,7 +581,7 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
       e.data?.type === "widget-resize" &&
       typeof e.data.height === "number"
     ) {
-      setHeight(Math.max(50, Math.min(e.data.height + 8, 4000)));
+      setHeight(Math.max(50, Math.min(e.data.height, 4000)));
     }
   }, []);
 
@@ -689,9 +697,8 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
         </div>
       )}
 
-      <SaveTemplateOverlay
+      <ExportOverlay
         title={title}
-        description={description}
         html={html}
         componentType="widgetRenderer"
         ready={!!html && htmlSettled}
@@ -716,7 +723,7 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
           }}
           title={title}
         />
-      </SaveTemplateOverlay>
+      </ExportOverlay>
     </div>
   );
 }
diff --git a/apps/app/src/hooks/use-example-suggestions.tsx b/apps/app/src/hooks/use-example-suggestions.tsx
index 528388d..7f8f602 100644
--- a/apps/app/src/hooks/use-example-suggestions.tsx
+++ b/apps/app/src/hooks/use-example-suggestions.tsx
@@ -3,8 +3,8 @@ import { useConfigureSuggestions } from "@copilotkit/react-core/v2";
 export const useExampleSuggestions = () => {
   useConfigureSuggestions({
     suggestions: [
-      { title: "Visualize a binary search", message: "Visualize how binary search works on a sorted list. Step by step." },
-      { title: "Compare BFS vs DFS", message: "I want to understand the difference between BFS and DFS. Create an interactive comparison on a node graph." },
+      { title: "Visualize a car axle", message: "Visualize how a car axle works" },
+      { title: "3D Plane Controls", message: "Create a 3D plane in Three.js to explain how pitch, roll, and yaw work with buttons that animate on hover." },
       { title: "Cool 3D sphere", message: "Create a 3D animation of a sphere turning into an icosahedron when the mouse is on it and back to a sphere when it's not on the icosahedron, make it cool." },
     ],
     available: "always", // Optional: when to show suggestions
diff --git a/apps/app/src/hooks/use-generative-ui-examples.tsx b/apps/app/src/hooks/use-generative-ui-examples.tsx
index a81608e..04601ab 100644
--- a/apps/app/src/hooks/use-generative-ui-examples.tsx
+++ b/apps/app/src/hooks/use-generative-ui-examples.tsx
@@ -7,6 +7,7 @@ import {
   useFrontendTool,
   useHumanInTheLoop,
   useDefaultRenderTool,
+  useRenderTool,
 } from "@copilotkit/react-core/v2";
 
 // Generative UI imports
@@ -15,6 +16,7 @@ import { BarChart, BarChartProps } from "@/components/generative-ui/charts/bar-c
 import { WidgetRenderer, WidgetRendererProps } from "@/components/generative-ui/widget-renderer";
 import { MeetingTimePicker } from "@/components/generative-ui/meeting-time-picker";
 import { ToolReasoning } from "@/components/tool-rendering";
+import { PlanCard } from "@/components/generative-ui/plan-card";
 
 export const useGenerativeUIExamples = () => {
   const { theme, setTheme } = useTheme();
@@ -61,6 +63,23 @@ export const useGenerativeUIExamples = () => {
     render: WidgetRenderer,
   });
 
+  // --------------------------
+  // 🪁 Plan Visualization: Custom rendering for the planning step
+  // --------------------------
+  const PlanVisualizationParams = z.object({
+    approach: z.string(),
+    technology: z.string(),
+    key_elements: z.array(z.string()),
+  });
+  useRenderTool({
+    name: "plan_visualization",
+    parameters: PlanVisualizationParams,
+    render: ({ status, parameters }) => {
+      const { key_elements: keyElements, ...rest } = parameters;
+      return <PlanCard status={status} keyElements={keyElements} {...rest} />;
+    },
+  });
+
   // --------------------------
   // 🪁 Default Tool Rendering: https://docs.copilotkit.ai/langgraph/generative-ui/backend-tools
   // --------------------------