From 63f502f11e66ee22eba5d5f256706c88cffbe364 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Thu, 26 Mar 2026 07:10:18 -0700
Subject: [PATCH 1/7] fix: add visualization quality guidance to agent system
 prompt

Add a "Visualization Quality Standards" section to steer the model
toward using Three.js (via import map) for 3D content instead of
CSS transform hacks or Canvas 2D projection. Documents available
ES module libraries (three, gsap, d3, chart.js), enforces
type="module" script tags, and sets a polished quality bar for
generated visualizations.
---
 apps/agent/main.py | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/apps/agent/main.py b/apps/agent/main.py
index 3e43367..6a8a555 100644
--- a/apps/agent/main.py
+++ b/apps/agent/main.py
@@ -53,6 +53,20 @@
         - 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.)
 
+        ## 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.
+
         ## UI Templates
 
         Users can save generated UIs as reusable templates and apply them later.

From 37aa88e0fab29da0226d5dece9e692dcce738e79 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Thu, 26 Mar 2026 07:15:01 -0700
Subject: [PATCH 2/7] hide templates feature from UI and agent

Remove template library drawer, template chips, template tools registration,
and template-related agent state fields. Component files are kept in the
codebase for future re-enablement.

Closes #59
---
 apps/agent/main.py                            |  24 +---
 apps/agent/src/todos.py                       |  10 +-
 apps/app/src/app/page.tsx                     |  31 +----
 .../src/components/demo-gallery/demo-data.ts  | 127 ++++++++++++++++++
 .../app/src/components/demo-gallery/index.tsx |  70 ++++++++++
 5 files changed, 200 insertions(+), 62 deletions(-)
 create mode 100644 apps/app/src/components/demo-gallery/demo-data.ts
 create mode 100644 apps/app/src/components/demo-gallery/index.tsx

diff --git a/apps/agent/main.py b/apps/agent/main.py
index 6a8a555..9698bc9 100644
--- a/apps/agent/main.py
+++ b/apps/agent/main.py
@@ -18,13 +18,12 @@
 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
 
 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, *todo_tools, generate_form],
     middleware=[CopilotKitMiddleware()],
     context_schema=AgentState,
     skills=[str(Path(__file__).parent / "skills")],
@@ -67,27 +66,6 @@
 
         **Critical**: `<script type="module">` is REQUIRED when using import map libraries. Regular `<script>` tags cannot use `import` statements.
 
-        ## UI Templates
-
-        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 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
-
-        If no `pending_template` is set but the user mentions a template by name, use
-        `apply_template(name="...")` instead.
-
-        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.
     """,
 )
 
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..5e17bb9 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -1,11 +1,9 @@
 "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";
 
@@ -13,8 +11,6 @@ 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 +56,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"
@@ -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/demo-gallery/demo-data.ts b/apps/app/src/components/demo-gallery/demo-data.ts
new file mode 100644
index 0000000..329a238
--- /dev/null
+++ b/apps/app/src/components/demo-gallery/demo-data.ts
@@ -0,0 +1,127 @@
+export type DemoCategory =
+  | "3D / Animation"
+  | "Data Visualization"
+  | "Diagrams"
+  | "Interactive"
+  | "UI Components";
+
+export interface DemoItem {
+  id: string;
+  title: string;
+  description: string;
+  category: DemoCategory;
+  emoji: string;
+  prompt: string;
+  html?: string;
+}
+
+export const DEMO_EXAMPLES: DemoItem[] = [
+  {
+    id: "demo-pitch-roll-yaw",
+    title: "Pitch, Roll & Yaw",
+    description:
+      "Interactive 3D airplane in Three.js explaining pitch, roll, and yaw with control buttons",
+    category: "3D / Animation",
+    emoji: "✈️",
+    prompt:
+      "Create a 3D plane in Three.js to explain how pitch, roll, and yaw work. Give me buttons to control each axis. Add labels showing which rotation is which.",
+  },
+  {
+    id: "demo-weather",
+    title: "Weather Card",
+    description:
+      "Current weather conditions with temperature, humidity, wind, and UV index",
+    category: "UI Components",
+    emoji: "🌤️",
+    prompt:
+      "Create a beautiful weather card showing current conditions for San Francisco with temperature, humidity, wind speed, UV index, and a 5-day mini forecast.",
+  },
+  {
+    id: "demo-binary-search",
+    title: "Binary Search",
+    description:
+      "Step-by-step visualization of binary search on a sorted array",
+    category: "Diagrams",
+    emoji: "🔍",
+    prompt:
+      "Visualize how binary search works on a sorted list. Step by step with animation. Show the high, low, and mid pointers moving.",
+  },
+  {
+    id: "demo-solar-system",
+    title: "Solar System",
+    description:
+      "3D solar system with orbiting planets you can click for facts",
+    category: "3D / Animation",
+    emoji: "🪐",
+    prompt:
+      "Build a 3D solar system with orbiting planets using Three.js. Let me click on each planet to see facts about it. Include realistic relative sizes and orbital speeds.",
+  },
+  {
+    id: "demo-dashboard",
+    title: "KPI Dashboard",
+    description:
+      "Quarterly performance dashboard with metrics cards and bar chart",
+    category: "Data Visualization",
+    emoji: "📊",
+    prompt:
+      "Create a KPI dashboard showing Q1 2026 performance with revenue, active users, and conversion rate. Include a monthly revenue bar chart and trend indicators.",
+  },
+  {
+    id: "demo-sorting",
+    title: "Sorting Comparison",
+    description:
+      "Animated side-by-side comparison of bubble sort vs quicksort",
+    category: "Diagrams",
+    emoji: "📶",
+    prompt:
+      "Create an animated comparison of bubble sort vs quicksort running side by side on the same random array. Add speed controls and a step counter.",
+  },
+  {
+    id: "demo-pomodoro",
+    title: "Pomodoro Timer",
+    description:
+      "Focus timer with circular progress ring, session counter, and controls",
+    category: "Interactive",
+    emoji: "🍅",
+    prompt:
+      "Build a Pomodoro timer with a circular progress ring, start/pause/reset buttons, and a session counter. Use 25 min work / 5 min break intervals. Make it look clean and minimal.",
+  },
+  {
+    id: "demo-neural-network",
+    title: "Neural Network",
+    description:
+      "Interactive neural network diagram with animated forward pass",
+    category: "Diagrams",
+    emoji: "🧠",
+    prompt:
+      "Visualize a simple neural network with input, hidden, and output layers. Animate the forward pass showing data flowing through the network. Let me adjust the number of neurons per layer.",
+  },
+  {
+    id: "demo-invoice",
+    title: "Invoice Card",
+    description:
+      "Compact invoice card with amount, client info, and action buttons",
+    category: "UI Components",
+    emoji: "🧾",
+    prompt:
+      "Create an invoice card showing a monthly billing summary with client name, amount due, invoice number, and send/expand action buttons.",
+  },
+  {
+    id: "demo-music-visualizer",
+    title: "Music Equalizer",
+    description:
+      "Audio equalizer visualization with animated frequency bars and controls",
+    category: "3D / Animation",
+    emoji: "🎵",
+    prompt:
+      "Create a music equalizer visualization with animated bars that respond to frequency sliders. Add controls for bass, mid, and treble. Use a gradient color scheme.",
+  },
+];
+
+export const DEMO_CATEGORIES: DemoCategory[] = [
+  "3D / Animation",
+  "Data Visualization",
+  "Diagrams",
+  "Interactive",
+  "UI Components",
+];
diff --git a/apps/app/src/components/demo-gallery/index.tsx b/apps/app/src/components/demo-gallery/index.tsx
new file mode 100644
index 0000000..5947755
--- /dev/null
+++ b/apps/app/src/components/demo-gallery/index.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { useState } from "react";
+import { DEMO_EXAMPLES, type DemoCategory, type DemoItem } from "./demo-data";
+import { DemoCard } from "./demo-card";
+import { CategoryFilter } from "./category-filter";
+
+interface DemoGalleryProps {
+  onTryDemo: (demo: DemoItem) => void;
+}
+
+export function DemoGallery({ onTryDemo }: DemoGalleryProps) {
+  const [selectedCategory, setSelectedCategory] =
+    useState<DemoCategory | null>(null);
+
+  const filtered = selectedCategory
+    ? DEMO_EXAMPLES.filter((d) => d.category === selectedCategory)
+    : DEMO_EXAMPLES;
+
+  return (
+    <div className="flex flex-col gap-4 h-full overflow-hidden">
+      {/* Header */}
+      <div className="flex flex-col gap-3 px-6 pt-6 shrink-0">
+        <div>
+          <h2
+            className="text-lg font-semibold"
+            style={{ color: "var(--text-primary, #1a1a1a)" }}
+          >
+            Demo Gallery
+          </h2>
+          <p
+            className="text-xs mt-0.5"
+            style={{ color: "var(--text-secondary, #666)" }}
+          >
+            Click any demo to try it with the AI agent
+          </p>
+        </div>
+        <CategoryFilter
+          selected={selectedCategory}
+          onSelect={setSelectedCategory}
+        />
+      </div>
+
+      {/* Grid */}
+      <div className="flex-1 overflow-y-auto px-6 pb-6">
+        <div
+          className="grid gap-4"
+          style={{
+            gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
+          }}
+        >
+          {filtered.map((demo) => (
+            <DemoCard key={demo.id} demo={demo} onTry={onTryDemo} />
+          ))}
+        </div>
+
+        {filtered.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-16 gap-2">
+            <p
+              className="text-sm font-medium"
+              style={{ color: "var(--text-secondary, #666)" }}
+            >
+              No demos in this category
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

From c6ef493f0a2aacc241c94c19946e9aae8b32d924 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Thu, 26 Mar 2026 08:16:31 -0700
Subject: [PATCH 3/7] wire up demo gallery drawer, rename SaveTemplateOverlay
 to ExportOverlay
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add Demos button to header and DemoGallery drawer with category filter
- Send demo prompt to CopilotChat via appendMessage on "Try it" click
- Rename SaveTemplateOverlay → ExportOverlay, drop unused description prop
- Remove dead iframe preview code from DemoCard, remove unused html field
- Fix trailing blank line in agent system prompt
- Update chat suggestion from BFS/DFS to 3D Plane Controls
- Add clipboard write error handling in ExportOverlay
---
 apps/agent/main.py                            |   1 -
 apps/app/src/app/page.tsx                     |  37 ++++-
 .../demo-gallery/category-filter.tsx          |  39 +++++
 .../src/components/demo-gallery/demo-card.tsx | 109 +++++++++++++
 .../src/components/demo-gallery/demo-data.ts  |   1 -
 .../app/src/components/demo-gallery/index.tsx | 152 +++++++++++++-----
 .../generative-ui/charts/bar-chart.tsx        |   7 +-
 .../generative-ui/charts/pie-chart.tsx        |   7 +-
 .../components/generative-ui/export-utils.ts  |   3 +-
 .../generative-ui/save-template-overlay.tsx   |  23 +--
 .../generative-ui/widget-renderer.tsx         |   9 +-
 .../app/src/hooks/use-example-suggestions.tsx |   2 +-
 12 files changed, 323 insertions(+), 67 deletions(-)
 create mode 100644 apps/app/src/components/demo-gallery/category-filter.tsx
 create mode 100644 apps/app/src/components/demo-gallery/demo-card.tsx

diff --git a/apps/agent/main.py b/apps/agent/main.py
index 9698bc9..154d4c1 100644
--- a/apps/agent/main.py
+++ b/apps/agent/main.py
@@ -65,7 +65,6 @@
         **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/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index 5e17bb9..640a137 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -1,16 +1,27 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { ExampleLayout } from "@/components/example-layout";
 import { useGenerativeUIExamples, useExampleSuggestions } from "@/hooks";
 import { ExplainerCardsPortal } from "@/components/explainer-cards";
+import { DemoGallery, type DemoItem } from "@/components/demo-gallery";
 
 import { CopilotChat } from "@copilotkit/react-core/v2";
+import { useCopilotChat } from "@copilotkit/react-core";
 
 export default function HomePage() {
   useGenerativeUIExamples();
   useExampleSuggestions();
 
+  const [demoDrawerOpen, setDemoDrawerOpen] = useState(false);
+  const { appendMessage } = useCopilotChat();
+
+  const handleTryDemo = (demo: DemoItem) => {
+    setDemoDrawerOpen(false);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    appendMessage({ content: demo.prompt, role: "user" } as any);
+  };
+
   // Widget bridge: handle messages from widget iframes
   useEffect(() => {
     const handler = (e: MessageEvent) => {
@@ -56,6 +67,25 @@ export default function HomePage() {
                 </p>
               </div>
               <div className="flex items-center gap-2">
+                <button
+                  onClick={() => setDemoDrawerOpen(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 cursor-pointer"
+                  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 Demo Gallery"
+                >
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <rect width="7" height="7" x="3" y="3" rx="1" />
+                    <rect width="7" height="7" x="14" y="3" rx="1" />
+                    <rect width="7" height="7" x="14" y="14" rx="1" />
+                    <rect width="7" height="7" x="3" y="14" rx="1" />
+                  </svg>
+                  Demos
+                </button>
                 <a
                   href="https://github.com/CopilotKit/OpenGenerativeUI"
                   target="_blank"
@@ -84,6 +114,11 @@ export default function HomePage() {
         </div>
       </div>
 
+      <DemoGallery
+        open={demoDrawerOpen}
+        onClose={() => setDemoDrawerOpen(false)}
+        onTryDemo={handleTryDemo}
+      />
     </>
   );
 }
diff --git a/apps/app/src/components/demo-gallery/category-filter.tsx b/apps/app/src/components/demo-gallery/category-filter.tsx
new file mode 100644
index 0000000..3d09f09
--- /dev/null
+++ b/apps/app/src/components/demo-gallery/category-filter.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import type { DemoCategory } from "./demo-data";
+import { DEMO_CATEGORIES } from "./demo-data";
+
+interface CategoryFilterProps {
+  selected: DemoCategory | null;
+  onSelect: (category: DemoCategory | null) => void;
+}
+
+export function CategoryFilter({ selected, onSelect }: CategoryFilterProps) {
+  const categories: (DemoCategory | null)[] = [null, ...DEMO_CATEGORIES];
+
+  return (
+    <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-none">
+      {categories.map((cat) => {
+        const isActive = cat === selected;
+        return (
+          <button
+            key={cat ?? "all"}
+            onClick={() => onSelect(cat)}
+            className="shrink-0 px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-150 cursor-pointer"
+            style={{
+              background: isActive
+                ? "linear-gradient(135deg, var(--color-lilac-dark, #6366f1), var(--color-mint-dark, #10b981))"
+                : "var(--surface-primary, rgba(255,255,255,0.6))",
+              color: isActive ? "#fff" : "var(--text-secondary, #666)",
+              border: isActive
+                ? "none"
+                : "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
+            }}
+          >
+            {cat ?? "All"}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/app/src/components/demo-gallery/demo-card.tsx b/apps/app/src/components/demo-gallery/demo-card.tsx
new file mode 100644
index 0000000..6fba05f
--- /dev/null
+++ b/apps/app/src/components/demo-gallery/demo-card.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import type { DemoItem } from "./demo-data";
+
+// Category badge colors
+const CATEGORY_COLORS: Record<string, { bg: string; text: string }> = {
+  "3D / Animation": { bg: "rgba(139,92,246,0.12)", text: "rgba(139,92,246,1)" },
+  "Data Visualization": { bg: "rgba(59,130,246,0.12)", text: "rgba(59,130,246,1)" },
+  Diagrams: { bg: "rgba(16,185,129,0.12)", text: "rgba(16,185,129,1)" },
+  Interactive: { bg: "rgba(245,158,11,0.12)", text: "rgba(245,158,11,1)" },
+  "UI Components": { bg: "rgba(236,72,153,0.12)", text: "rgba(236,72,153,1)" },
+};
+
+// Emoji background gradients
+const EMOJI_GRADIENTS: Record<string, string> = {
+  "3D / Animation":
+    "linear-gradient(135deg, rgba(139,92,246,0.08) 0%, rgba(59,130,246,0.06) 100%)",
+  "Data Visualization":
+    "linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(16,185,129,0.06) 100%)",
+  Diagrams:
+    "linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(59,130,246,0.06) 100%)",
+  Interactive:
+    "linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(236,72,153,0.06) 100%)",
+  "UI Components":
+    "linear-gradient(135deg, rgba(236,72,153,0.08) 0%, rgba(139,92,246,0.06) 100%)",
+};
+
+interface DemoCardProps {
+  demo: DemoItem;
+  onTry: (demo: DemoItem) => void;
+}
+
+export function DemoCard({ demo, onTry }: DemoCardProps) {
+  const categoryColor = CATEGORY_COLORS[demo.category] ?? {
+    bg: "rgba(100,100,100,0.12)",
+    text: "rgba(100,100,100,1)",
+  };
+
+  return (
+    <div
+      className="rounded-xl overflow-hidden flex flex-col transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
+      style={{
+        border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
+        background: "var(--surface-primary, #fff)",
+      }}
+    >
+      {/* Preview area */}
+      <div
+        className="relative overflow-hidden"
+        style={{
+          height: 160,
+          background:
+            EMOJI_GRADIENTS[demo.category] ??
+            "var(--color-background-secondary)",
+        }}
+      >
+        <div className="flex items-center justify-center h-full">
+          <span className="text-5xl" role="img" aria-label={demo.title}>
+            {demo.emoji}
+          </span>
+        </div>
+
+        {/* Category badge */}
+        <span
+          className="absolute top-2 right-2 text-[10px] font-semibold px-2 py-0.5 rounded-full"
+          style={{
+            background: categoryColor.bg,
+            color: categoryColor.text,
+          }}
+        >
+          {demo.category}
+        </span>
+      </div>
+
+      {/* Info */}
+      <div className="flex flex-col gap-1 p-3 flex-1">
+        <div className="flex items-center gap-2">
+          <span className="text-base">{demo.emoji}</span>
+          <h3
+            className="text-sm font-semibold truncate"
+            style={{ color: "var(--text-primary, #1a1a1a)" }}
+          >
+            {demo.title}
+          </h3>
+        </div>
+        <p
+          className="text-xs line-clamp-2"
+          style={{ color: "var(--text-secondary, #666)" }}
+        >
+          {demo.description}
+        </p>
+      </div>
+
+      {/* Action */}
+      <div className="p-3 pt-0">
+        <button
+          onClick={() => onTry(demo)}
+          className="w-full text-xs font-medium py-2 rounded-lg transition-all duration-150 hover:scale-[1.02] text-white cursor-pointer"
+          style={{
+            background:
+              "linear-gradient(135deg, var(--color-lilac-dark, #6366f1), var(--color-mint-dark, #10b981))",
+          }}
+        >
+          Try it
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/app/src/components/demo-gallery/demo-data.ts b/apps/app/src/components/demo-gallery/demo-data.ts
index 329a238..87157d2 100644
--- a/apps/app/src/components/demo-gallery/demo-data.ts
+++ b/apps/app/src/components/demo-gallery/demo-data.ts
@@ -12,7 +12,6 @@ export interface DemoItem {
   category: DemoCategory;
   emoji: string;
   prompt: string;
-  html?: string;
 }
 
 export const DEMO_EXAMPLES: DemoItem[] = [
diff --git a/apps/app/src/components/demo-gallery/index.tsx b/apps/app/src/components/demo-gallery/index.tsx
index 5947755..9474b52 100644
--- a/apps/app/src/components/demo-gallery/index.tsx
+++ b/apps/app/src/components/demo-gallery/index.tsx
@@ -5,11 +5,15 @@ import { DEMO_EXAMPLES, type DemoCategory, type DemoItem } from "./demo-data";
 import { DemoCard } from "./demo-card";
 import { CategoryFilter } from "./category-filter";
 
+export type { DemoItem } from "./demo-data";
+
 interface DemoGalleryProps {
+  open: boolean;
+  onClose: () => void;
   onTryDemo: (demo: DemoItem) => void;
 }
 
-export function DemoGallery({ onTryDemo }: DemoGalleryProps) {
+export function DemoGallery({ open, onClose, onTryDemo }: DemoGalleryProps) {
   const [selectedCategory, setSelectedCategory] =
     useState<DemoCategory | null>(null);
 
@@ -18,53 +22,123 @@ export function DemoGallery({ onTryDemo }: DemoGalleryProps) {
     : DEMO_EXAMPLES;
 
   return (
-    <div className="flex flex-col gap-4 h-full overflow-hidden">
-      {/* Header */}
-      <div className="flex flex-col gap-3 px-6 pt-6 shrink-0">
-        <div>
-          <h2
-            className="text-lg font-semibold"
-            style={{ color: "var(--text-primary, #1a1a1a)" }}
-          >
-            Demo Gallery
-          </h2>
-          <p
-            className="text-xs mt-0.5"
-            style={{ color: "var(--text-secondary, #666)" }}
-          >
-            Click any demo to try it with the AI agent
-          </p>
-        </div>
-        <CategoryFilter
-          selected={selectedCategory}
-          onSelect={setSelectedCategory}
+    <>
+      {/* Backdrop */}
+      {open && (
+        <div
+          className="fixed inset-0 z-40"
+          style={{ background: "rgba(0,0,0,0.3)", backdropFilter: "blur(2px)" }}
+          onClick={onClose}
         />
-      </div>
+      )}
 
-      {/* Grid */}
-      <div className="flex-1 overflow-y-auto px-6 pb-6">
+      {/* Drawer panel */}
+      <div
+        className="fixed top-0 right-0 h-full z-50 flex flex-col transition-transform duration-300 ease-in-out"
+        style={{
+          width: 480,
+          maxWidth: "90vw",
+          transform: open ? "translateX(0)" : "translateX(100%)",
+          background: "var(--surface-primary, #fff)",
+          borderLeft: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
+          boxShadow: open ? "-8px 0 30px rgba(0,0,0,0.1)" : "none",
+        }}
+      >
+        {/* Header */}
         <div
-          className="grid gap-4"
+          className="flex items-center justify-between px-5 py-4 shrink-0"
           style={{
-            gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
+            borderBottom:
+              "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
           }}
         >
-          {filtered.map((demo) => (
-            <DemoCard key={demo.id} demo={demo} onTry={onTryDemo} />
-          ))}
-        </div>
-
-        {filtered.length === 0 && (
-          <div className="flex flex-col items-center justify-center py-16 gap-2">
-            <p
-              className="text-sm font-medium"
+          <div className="flex items-center gap-2">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
               style={{ color: "var(--text-secondary, #666)" }}
             >
-              No demos in this category
-            </p>
+              <rect width="7" height="7" x="3" y="3" rx="1" />
+              <rect width="7" height="7" x="14" y="3" rx="1" />
+              <rect width="7" height="7" x="14" y="14" rx="1" />
+              <rect width="7" height="7" x="3" y="14" rx="1" />
+            </svg>
+            <h2
+              className="text-base font-semibold"
+              style={{ color: "var(--text-primary, #1a1a1a)" }}
+            >
+              Demo Gallery
+            </h2>
+            <span
+              className="text-xs font-medium px-2 py-0.5 rounded-full"
+              style={{
+                background: "var(--color-background-secondary, #f5f5f5)",
+                color: "var(--text-secondary, #666)",
+              }}
+            >
+              {DEMO_EXAMPLES.length}
+            </span>
           </div>
-        )}
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-lg transition-colors duration-150 cursor-pointer"
+            style={{ color: "var(--text-secondary, #666)" }}
+          >
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M18 6 6 18" />
+              <path d="m6 6 12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Category filter */}
+        <div className="px-5 pt-4 pb-2 shrink-0">
+          <CategoryFilter
+            selected={selectedCategory}
+            onSelect={setSelectedCategory}
+          />
+        </div>
+
+        {/* Grid */}
+        <div className="flex-1 overflow-y-auto px-5 pb-5">
+          <div
+            className="grid gap-4"
+            style={{
+              gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+            }}
+          >
+            {filtered.map((demo) => (
+              <DemoCard key={demo.id} demo={demo} onTry={onTryDemo} />
+            ))}
+          </div>
+
+          {filtered.length === 0 && (
+            <div className="flex flex-col items-center justify-center py-16 gap-2">
+              <p
+                className="text-sm font-medium"
+                style={{ color: "var(--text-secondary, #666)" }}
+              >
+                No demos in this category
+              </p>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </>
   );
 }
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..403f507 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 '../save-template-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..dfd5b79 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 "../save-template-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/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/save-template-overlay.tsx b/apps/app/src/components/generative-ui/save-template-overlay.tsx
index 4614053..722c889 100644
--- a/apps/app/src/components/generative-ui/save-template-overlay.tsx
+++ b/apps/app/src/components/generative-ui/save-template-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/widget-renderer.tsx b/apps/app/src/components/generative-ui/widget-renderer.tsx
index 43ccb19..6983162 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 "./save-template-overlay";
 import { IDIOMORPH_JS } from "./idiomorph-inline";
 
 // ─── Zod Schema (CopilotKit parameter contract) ─────────────────────
@@ -550,7 +550,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);
@@ -689,9 +689,8 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
         </div>
       )}
 
-      <SaveTemplateOverlay
+      <ExportOverlay
         title={title}
-        description={description}
         html={html}
         componentType="widgetRenderer"
         ready={!!html && htmlSettled}
@@ -716,7 +715,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..a0a9c85 100644
--- a/apps/app/src/hooks/use-example-suggestions.tsx
+++ b/apps/app/src/hooks/use-example-suggestions.tsx
@@ -4,7 +4,7 @@ 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: "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

From cd5eeef60c36e9564e9e4c2a037ec9e265544d32 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Thu, 26 Mar 2026 08:17:05 -0700
Subject: [PATCH 4/7] feat: add planning step before visualization generation
 (#62)

Add a plan_visualization tool that the agent must call before any
visualization tool (widgetRenderer, pieChart, barChart). This gives users
transparency into the agent's approach and improves output quality by
forcing structured thinking before code generation.
---
 apps/agent/main.py                            | 20 ++++++-
 apps/agent/src/plan.py                        | 21 +++++++
 .../components/generative-ui/plan-card.tsx    | 56 +++++++++++++++++++
 .../src/hooks/use-generative-ui-examples.tsx  | 18 ++++++
 4 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 apps/agent/src/plan.py
 create mode 100644 apps/app/src/components/generative-ui/plan-card.tsx

diff --git a/apps/agent/main.py b/apps/agent/main.py
index 3e43367..6bd3837 100644
--- a/apps/agent/main.py
+++ b/apps/agent/main.py
@@ -18,13 +18,14 @@
 from src.query import query_data
 from src.todos import AgentState, todo_tools
 from src.form import generate_form
+from src.plan import plan_visualization
 from src.templates import template_tools
 
 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, *template_tools],
     middleware=[CopilotKitMiddleware()],
     context_schema=AgentState,
     skills=[str(Path(__file__).parent / "skills")],
@@ -53,6 +54,23 @@
         - 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.)
 
+        ## Visualization Workflow (MANDATORY)
+
+        When producing ANY visual response (widgetRenderer, pieChart, barChart), you MUST
+        follow this exact sequence:
+
+        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.
+
+        NEVER skip the plan_visualization step. NEVER call widgetRenderer, pieChart, or
+        barChart without calling plan_visualization first.
+
         ## UI Templates
 
         Users can save generated UIs as reusable templates and apply them later.
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/app/src/components/generative-ui/plan-card.tsx b/apps/app/src/components/generative-ui/plan-card.tsx
new file mode 100644
index 0000000..9601e10
--- /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;
+  key_elements?: string[];
+}
+
+export function PlanCard({ status, approach, technology, key_elements }: 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>
+            {key_elements && key_elements.length > 0 && (
+              <ul className="list-disc pl-4 space-y-0.5">
+                {key_elements.map((el, i) => (
+                  <li key={i}>{el}</li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+      </details>
+    </div>
+  );
+}
diff --git a/apps/app/src/hooks/use-generative-ui-examples.tsx b/apps/app/src/hooks/use-generative-ui-examples.tsx
index a81608e..6138453 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,22 @@ 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 }) => (
+      <PlanCard status={status} {...parameters} />
+    ),
+  });
+
   // --------------------------
   // 🪁 Default Tool Rendering: https://docs.copilotkit.ai/langgraph/generative-ui/backend-tools
   // --------------------------

From 92fc981f393604c1ecd2a4f892e68baac8c8098c Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Thu, 26 Mar 2026 08:35:57 -0700
Subject: [PATCH 5/7] fix: widget renderer infinite height growth (#64), update
 example prompts

- Break feedback loop in iframe height measurement by collapsing the
  content container before reading scrollHeight, so viewport-relative
  children don't inflate the measurement
- Remove +8 padding from height setter that compounded each cycle
- Replace "binary search" suggestion with "car axle" visualization
---
 .../components/generative-ui/widget-renderer.tsx    | 13 ++++++++++---
 apps/app/src/hooks/use-example-suggestions.tsx      |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/app/src/components/generative-ui/widget-renderer.tsx b/apps/app/src/components/generative-ui/widget-renderer.tsx
index 43ccb19..1ffe7d5 100644
--- a/apps/app/src/components/generative-ui/widget-renderer.tsx
+++ b/apps/app/src/components/generative-ui/widget-renderer.tsx
@@ -455,10 +455,17 @@ window.addEventListener('message', function(e) {
   }
 });
 
-// Auto-resize: report content height to host
+// Auto-resize: report content height to host.
+// Temporarily collapse the container so viewport-relative children (100vh, 100%)
+// don't inflate the measurement — this gives us intrinsic content height only.
 function reportHeight() {
   var content = document.getElementById('content');
-  var h = content ? content.offsetHeight : document.documentElement.scrollHeight;
+  if (!content) return;
+  content.style.height = '0';
+  content.style.overflow = 'hidden';
+  var h = content.scrollHeight;
+  content.style.height = '';
+  content.style.overflow = '';
   window.parent.postMessage({ type: 'widget-resize', height: h }, '*');
 }
 var ro = new ResizeObserver(reportHeight);
@@ -573,7 +580,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)));
     }
   }, []);
 
diff --git a/apps/app/src/hooks/use-example-suggestions.tsx b/apps/app/src/hooks/use-example-suggestions.tsx
index 528388d..38cb44c 100644
--- a/apps/app/src/hooks/use-example-suggestions.tsx
+++ b/apps/app/src/hooks/use-example-suggestions.tsx
@@ -3,7 +3,7 @@ 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: "Visualize a car axle", message: "Visualize how a car axle works" },
       { 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: "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." },
     ],

From 76976a072a31459685b96ce6854637d38423493c Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Thu, 26 Mar 2026 09:12:06 -0700
Subject: [PATCH 6/7] chore: hide demo gallery panel from UI

Demo gallery preserved on feat/demo-gallery branch for future work.
---
 apps/app/src/app/page.tsx | 38 +-------------------------------------
 1 file changed, 1 insertion(+), 37 deletions(-)

diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index 640a137..c7fe372 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -1,27 +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 { DemoGallery, type DemoItem } from "@/components/demo-gallery";
-
 import { CopilotChat } from "@copilotkit/react-core/v2";
-import { useCopilotChat } from "@copilotkit/react-core";
 
 export default function HomePage() {
   useGenerativeUIExamples();
   useExampleSuggestions();
 
-  const [demoDrawerOpen, setDemoDrawerOpen] = useState(false);
-  const { appendMessage } = useCopilotChat();
-
-  const handleTryDemo = (demo: DemoItem) => {
-    setDemoDrawerOpen(false);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    appendMessage({ content: demo.prompt, role: "user" } as any);
-  };
-
   // Widget bridge: handle messages from widget iframes
   useEffect(() => {
     const handler = (e: MessageEvent) => {
@@ -67,25 +55,6 @@ export default function HomePage() {
                 </p>
               </div>
               <div className="flex items-center gap-2">
-                <button
-                  onClick={() => setDemoDrawerOpen(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 cursor-pointer"
-                  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 Demo Gallery"
-                >
-                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <rect width="7" height="7" x="3" y="3" rx="1" />
-                    <rect width="7" height="7" x="14" y="3" rx="1" />
-                    <rect width="7" height="7" x="14" y="14" rx="1" />
-                    <rect width="7" height="7" x="3" y="14" rx="1" />
-                  </svg>
-                  Demos
-                </button>
                 <a
                   href="https://github.com/CopilotKit/OpenGenerativeUI"
                   target="_blank"
@@ -114,11 +83,6 @@ export default function HomePage() {
         </div>
       </div>
 
-      <DemoGallery
-        open={demoDrawerOpen}
-        onClose={() => setDemoDrawerOpen(false)}
-        onTryDemo={handleTryDemo}
-      />
     </>
   );
 }

From 991f9ea09113f47061f822d1141aae84c56ee568 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Thu, 26 Mar 2026 10:33:36 -0700
Subject: [PATCH 7/7] =?UTF-8?q?fix:=20PR=20review=20fixes=20=E2=80=94=20re?=
 =?UTF-8?q?name=20overlay,=20remove=20dead=20code,=20fix=20height=20measur?=
 =?UTF-8?q?ement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rename save-template-overlay.tsx to export-overlay.tsx to match component name
- Remove unused demo-gallery components (preserved on feat/demo-gallery branch)
- Fix widget height measurement using offscreen clone instead of collapsing
  visible DOM, preventing potential ResizeObserver infinite loops
- Use camelCase keyElements prop in PlanCard (remap from snake_case at call site)
- Update chat disclaimer to be relevant to visualization demo
---
 apps/app/src/app/page.tsx                     |   1 +
 .../demo-gallery/category-filter.tsx          |  39 -----
 .../src/components/demo-gallery/demo-card.tsx | 109 -------------
 .../src/components/demo-gallery/demo-data.ts  | 126 ---------------
 .../app/src/components/demo-gallery/index.tsx | 144 ------------------
 .../generative-ui/charts/bar-chart.tsx        |   2 +-
 .../generative-ui/charts/pie-chart.tsx        |   2 +-
 ...emplate-overlay.tsx => export-overlay.tsx} |   0
 .../components/generative-ui/plan-card.tsx    |   8 +-
 .../generative-ui/widget-renderer.tsx         |  17 ++-
 .../src/hooks/use-generative-ui-examples.tsx  |   7 +-
 11 files changed, 20 insertions(+), 435 deletions(-)
 delete mode 100644 apps/app/src/components/demo-gallery/category-filter.tsx
 delete mode 100644 apps/app/src/components/demo-gallery/demo-card.tsx
 delete mode 100644 apps/app/src/components/demo-gallery/demo-data.ts
 delete mode 100644 apps/app/src/components/demo-gallery/index.tsx
 rename apps/app/src/components/generative-ui/{save-template-overlay.tsx => export-overlay.tsx} (100%)

diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index c7fe372..6871fff 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -76,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.",
               }}
             />
           } />
diff --git a/apps/app/src/components/demo-gallery/category-filter.tsx b/apps/app/src/components/demo-gallery/category-filter.tsx
deleted file mode 100644
index 3d09f09..0000000
--- a/apps/app/src/components/demo-gallery/category-filter.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-"use client";
-
-import type { DemoCategory } from "./demo-data";
-import { DEMO_CATEGORIES } from "./demo-data";
-
-interface CategoryFilterProps {
-  selected: DemoCategory | null;
-  onSelect: (category: DemoCategory | null) => void;
-}
-
-export function CategoryFilter({ selected, onSelect }: CategoryFilterProps) {
-  const categories: (DemoCategory | null)[] = [null, ...DEMO_CATEGORIES];
-
-  return (
-    <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-none">
-      {categories.map((cat) => {
-        const isActive = cat === selected;
-        return (
-          <button
-            key={cat ?? "all"}
-            onClick={() => onSelect(cat)}
-            className="shrink-0 px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-150 cursor-pointer"
-            style={{
-              background: isActive
-                ? "linear-gradient(135deg, var(--color-lilac-dark, #6366f1), var(--color-mint-dark, #10b981))"
-                : "var(--surface-primary, rgba(255,255,255,0.6))",
-              color: isActive ? "#fff" : "var(--text-secondary, #666)",
-              border: isActive
-                ? "none"
-                : "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
-            }}
-          >
-            {cat ?? "All"}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/apps/app/src/components/demo-gallery/demo-card.tsx b/apps/app/src/components/demo-gallery/demo-card.tsx
deleted file mode 100644
index 6fba05f..0000000
--- a/apps/app/src/components/demo-gallery/demo-card.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-"use client";
-
-import type { DemoItem } from "./demo-data";
-
-// Category badge colors
-const CATEGORY_COLORS: Record<string, { bg: string; text: string }> = {
-  "3D / Animation": { bg: "rgba(139,92,246,0.12)", text: "rgba(139,92,246,1)" },
-  "Data Visualization": { bg: "rgba(59,130,246,0.12)", text: "rgba(59,130,246,1)" },
-  Diagrams: { bg: "rgba(16,185,129,0.12)", text: "rgba(16,185,129,1)" },
-  Interactive: { bg: "rgba(245,158,11,0.12)", text: "rgba(245,158,11,1)" },
-  "UI Components": { bg: "rgba(236,72,153,0.12)", text: "rgba(236,72,153,1)" },
-};
-
-// Emoji background gradients
-const EMOJI_GRADIENTS: Record<string, string> = {
-  "3D / Animation":
-    "linear-gradient(135deg, rgba(139,92,246,0.08) 0%, rgba(59,130,246,0.06) 100%)",
-  "Data Visualization":
-    "linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(16,185,129,0.06) 100%)",
-  Diagrams:
-    "linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(59,130,246,0.06) 100%)",
-  Interactive:
-    "linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(236,72,153,0.06) 100%)",
-  "UI Components":
-    "linear-gradient(135deg, rgba(236,72,153,0.08) 0%, rgba(139,92,246,0.06) 100%)",
-};
-
-interface DemoCardProps {
-  demo: DemoItem;
-  onTry: (demo: DemoItem) => void;
-}
-
-export function DemoCard({ demo, onTry }: DemoCardProps) {
-  const categoryColor = CATEGORY_COLORS[demo.category] ?? {
-    bg: "rgba(100,100,100,0.12)",
-    text: "rgba(100,100,100,1)",
-  };
-
-  return (
-    <div
-      className="rounded-xl overflow-hidden flex flex-col transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
-      style={{
-        border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
-        background: "var(--surface-primary, #fff)",
-      }}
-    >
-      {/* Preview area */}
-      <div
-        className="relative overflow-hidden"
-        style={{
-          height: 160,
-          background:
-            EMOJI_GRADIENTS[demo.category] ??
-            "var(--color-background-secondary)",
-        }}
-      >
-        <div className="flex items-center justify-center h-full">
-          <span className="text-5xl" role="img" aria-label={demo.title}>
-            {demo.emoji}
-          </span>
-        </div>
-
-        {/* Category badge */}
-        <span
-          className="absolute top-2 right-2 text-[10px] font-semibold px-2 py-0.5 rounded-full"
-          style={{
-            background: categoryColor.bg,
-            color: categoryColor.text,
-          }}
-        >
-          {demo.category}
-        </span>
-      </div>
-
-      {/* Info */}
-      <div className="flex flex-col gap-1 p-3 flex-1">
-        <div className="flex items-center gap-2">
-          <span className="text-base">{demo.emoji}</span>
-          <h3
-            className="text-sm font-semibold truncate"
-            style={{ color: "var(--text-primary, #1a1a1a)" }}
-          >
-            {demo.title}
-          </h3>
-        </div>
-        <p
-          className="text-xs line-clamp-2"
-          style={{ color: "var(--text-secondary, #666)" }}
-        >
-          {demo.description}
-        </p>
-      </div>
-
-      {/* Action */}
-      <div className="p-3 pt-0">
-        <button
-          onClick={() => onTry(demo)}
-          className="w-full text-xs font-medium py-2 rounded-lg transition-all duration-150 hover:scale-[1.02] text-white cursor-pointer"
-          style={{
-            background:
-              "linear-gradient(135deg, var(--color-lilac-dark, #6366f1), var(--color-mint-dark, #10b981))",
-          }}
-        >
-          Try it
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/app/src/components/demo-gallery/demo-data.ts b/apps/app/src/components/demo-gallery/demo-data.ts
deleted file mode 100644
index 87157d2..0000000
--- a/apps/app/src/components/demo-gallery/demo-data.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-export type DemoCategory =
-  | "3D / Animation"
-  | "Data Visualization"
-  | "Diagrams"
-  | "Interactive"
-  | "UI Components";
-
-export interface DemoItem {
-  id: string;
-  title: string;
-  description: string;
-  category: DemoCategory;
-  emoji: string;
-  prompt: string;
-}
-
-export const DEMO_EXAMPLES: DemoItem[] = [
-  {
-    id: "demo-pitch-roll-yaw",
-    title: "Pitch, Roll & Yaw",
-    description:
-      "Interactive 3D airplane in Three.js explaining pitch, roll, and yaw with control buttons",
-    category: "3D / Animation",
-    emoji: "✈️",
-    prompt:
-      "Create a 3D plane in Three.js to explain how pitch, roll, and yaw work. Give me buttons to control each axis. Add labels showing which rotation is which.",
-  },
-  {
-    id: "demo-weather",
-    title: "Weather Card",
-    description:
-      "Current weather conditions with temperature, humidity, wind, and UV index",
-    category: "UI Components",
-    emoji: "🌤️",
-    prompt:
-      "Create a beautiful weather card showing current conditions for San Francisco with temperature, humidity, wind speed, UV index, and a 5-day mini forecast.",
-  },
-  {
-    id: "demo-binary-search",
-    title: "Binary Search",
-    description:
-      "Step-by-step visualization of binary search on a sorted array",
-    category: "Diagrams",
-    emoji: "🔍",
-    prompt:
-      "Visualize how binary search works on a sorted list. Step by step with animation. Show the high, low, and mid pointers moving.",
-  },
-  {
-    id: "demo-solar-system",
-    title: "Solar System",
-    description:
-      "3D solar system with orbiting planets you can click for facts",
-    category: "3D / Animation",
-    emoji: "🪐",
-    prompt:
-      "Build a 3D solar system with orbiting planets using Three.js. Let me click on each planet to see facts about it. Include realistic relative sizes and orbital speeds.",
-  },
-  {
-    id: "demo-dashboard",
-    title: "KPI Dashboard",
-    description:
-      "Quarterly performance dashboard with metrics cards and bar chart",
-    category: "Data Visualization",
-    emoji: "📊",
-    prompt:
-      "Create a KPI dashboard showing Q1 2026 performance with revenue, active users, and conversion rate. Include a monthly revenue bar chart and trend indicators.",
-  },
-  {
-    id: "demo-sorting",
-    title: "Sorting Comparison",
-    description:
-      "Animated side-by-side comparison of bubble sort vs quicksort",
-    category: "Diagrams",
-    emoji: "📶",
-    prompt:
-      "Create an animated comparison of bubble sort vs quicksort running side by side on the same random array. Add speed controls and a step counter.",
-  },
-  {
-    id: "demo-pomodoro",
-    title: "Pomodoro Timer",
-    description:
-      "Focus timer with circular progress ring, session counter, and controls",
-    category: "Interactive",
-    emoji: "🍅",
-    prompt:
-      "Build a Pomodoro timer with a circular progress ring, start/pause/reset buttons, and a session counter. Use 25 min work / 5 min break intervals. Make it look clean and minimal.",
-  },
-  {
-    id: "demo-neural-network",
-    title: "Neural Network",
-    description:
-      "Interactive neural network diagram with animated forward pass",
-    category: "Diagrams",
-    emoji: "🧠",
-    prompt:
-      "Visualize a simple neural network with input, hidden, and output layers. Animate the forward pass showing data flowing through the network. Let me adjust the number of neurons per layer.",
-  },
-  {
-    id: "demo-invoice",
-    title: "Invoice Card",
-    description:
-      "Compact invoice card with amount, client info, and action buttons",
-    category: "UI Components",
-    emoji: "🧾",
-    prompt:
-      "Create an invoice card showing a monthly billing summary with client name, amount due, invoice number, and send/expand action buttons.",
-  },
-  {
-    id: "demo-music-visualizer",
-    title: "Music Equalizer",
-    description:
-      "Audio equalizer visualization with animated frequency bars and controls",
-    category: "3D / Animation",
-    emoji: "🎵",
-    prompt:
-      "Create a music equalizer visualization with animated bars that respond to frequency sliders. Add controls for bass, mid, and treble. Use a gradient color scheme.",
-  },
-];
-
-export const DEMO_CATEGORIES: DemoCategory[] = [
-  "3D / Animation",
-  "Data Visualization",
-  "Diagrams",
-  "Interactive",
-  "UI Components",
-];
diff --git a/apps/app/src/components/demo-gallery/index.tsx b/apps/app/src/components/demo-gallery/index.tsx
deleted file mode 100644
index 9474b52..0000000
--- a/apps/app/src/components/demo-gallery/index.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { DEMO_EXAMPLES, type DemoCategory, type DemoItem } from "./demo-data";
-import { DemoCard } from "./demo-card";
-import { CategoryFilter } from "./category-filter";
-
-export type { DemoItem } from "./demo-data";
-
-interface DemoGalleryProps {
-  open: boolean;
-  onClose: () => void;
-  onTryDemo: (demo: DemoItem) => void;
-}
-
-export function DemoGallery({ open, onClose, onTryDemo }: DemoGalleryProps) {
-  const [selectedCategory, setSelectedCategory] =
-    useState<DemoCategory | null>(null);
-
-  const filtered = selectedCategory
-    ? DEMO_EXAMPLES.filter((d) => d.category === selectedCategory)
-    : DEMO_EXAMPLES;
-
-  return (
-    <>
-      {/* Backdrop */}
-      {open && (
-        <div
-          className="fixed inset-0 z-40"
-          style={{ background: "rgba(0,0,0,0.3)", backdropFilter: "blur(2px)" }}
-          onClick={onClose}
-        />
-      )}
-
-      {/* Drawer panel */}
-      <div
-        className="fixed top-0 right-0 h-full z-50 flex flex-col transition-transform duration-300 ease-in-out"
-        style={{
-          width: 480,
-          maxWidth: "90vw",
-          transform: open ? "translateX(0)" : "translateX(100%)",
-          background: "var(--surface-primary, #fff)",
-          borderLeft: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
-          boxShadow: open ? "-8px 0 30px rgba(0,0,0,0.1)" : "none",
-        }}
-      >
-        {/* Header */}
-        <div
-          className="flex items-center justify-between px-5 py-4 shrink-0"
-          style={{
-            borderBottom:
-              "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <svg
-              width="18"
-              height="18"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              style={{ color: "var(--text-secondary, #666)" }}
-            >
-              <rect width="7" height="7" x="3" y="3" rx="1" />
-              <rect width="7" height="7" x="14" y="3" rx="1" />
-              <rect width="7" height="7" x="14" y="14" rx="1" />
-              <rect width="7" height="7" x="3" y="14" rx="1" />
-            </svg>
-            <h2
-              className="text-base font-semibold"
-              style={{ color: "var(--text-primary, #1a1a1a)" }}
-            >
-              Demo Gallery
-            </h2>
-            <span
-              className="text-xs font-medium px-2 py-0.5 rounded-full"
-              style={{
-                background: "var(--color-background-secondary, #f5f5f5)",
-                color: "var(--text-secondary, #666)",
-              }}
-            >
-              {DEMO_EXAMPLES.length}
-            </span>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-1.5 rounded-lg transition-colors duration-150 cursor-pointer"
-            style={{ color: "var(--text-secondary, #666)" }}
-          >
-            <svg
-              width="18"
-              height="18"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M18 6 6 18" />
-              <path d="m6 6 12 12" />
-            </svg>
-          </button>
-        </div>
-
-        {/* Category filter */}
-        <div className="px-5 pt-4 pb-2 shrink-0">
-          <CategoryFilter
-            selected={selectedCategory}
-            onSelect={setSelectedCategory}
-          />
-        </div>
-
-        {/* Grid */}
-        <div className="flex-1 overflow-y-auto px-5 pb-5">
-          <div
-            className="grid gap-4"
-            style={{
-              gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
-            }}
-          >
-            {filtered.map((demo) => (
-              <DemoCard key={demo.id} demo={demo} onTry={onTryDemo} />
-            ))}
-          </div>
-
-          {filtered.length === 0 && (
-            <div className="flex flex-col items-center justify-center py-16 gap-2">
-              <p
-                className="text-sm font-medium"
-                style={{ color: "var(--text-secondary, #666)" }}
-              >
-                No demos in this category
-              </p>
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  );
-}
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 403f507..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 { ExportOverlay } from '../save-template-overlay';
+import { ExportOverlay } from '../export-overlay';
 
 export const BarChartProps = z.object({
   title: z.string().describe("Chart title"),
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 dfd5b79..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 { ExportOverlay } from "../save-template-overlay";
+import { ExportOverlay } from "../export-overlay";
 
 export const PieChartProps = z.object({
   title: z.string().describe("Chart title"),
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 100%
rename from apps/app/src/components/generative-ui/save-template-overlay.tsx
rename to apps/app/src/components/generative-ui/export-overlay.tsx
diff --git a/apps/app/src/components/generative-ui/plan-card.tsx b/apps/app/src/components/generative-ui/plan-card.tsx
index 9601e10..cc36da7 100644
--- a/apps/app/src/components/generative-ui/plan-card.tsx
+++ b/apps/app/src/components/generative-ui/plan-card.tsx
@@ -6,10 +6,10 @@ interface PlanCardProps {
   status: "executing" | "inProgress" | "complete";
   approach?: string;
   technology?: string;
-  key_elements?: string[];
+  keyElements?: string[];
 }
 
-export function PlanCard({ status, approach, technology, key_elements }: PlanCardProps) {
+export function PlanCard({ status, approach, technology, keyElements }: PlanCardProps) {
   const detailsRef = useRef<HTMLDetailsElement>(null);
   const isRunning = status === "executing" || status === "inProgress";
 
@@ -41,9 +41,9 @@ export function PlanCard({ status, approach, technology, key_elements }: PlanCar
               </span>
             )}
             <p className="text-gray-600 dark:text-gray-400">{approach}</p>
-            {key_elements && key_elements.length > 0 && (
+            {keyElements && keyElements.length > 0 && (
               <ul className="list-disc pl-4 space-y-0.5">
-                {key_elements.map((el, i) => (
+                {keyElements.map((el, i) => (
                   <li key={i}>{el}</li>
                 ))}
               </ul>
diff --git a/apps/app/src/components/generative-ui/widget-renderer.tsx b/apps/app/src/components/generative-ui/widget-renderer.tsx
index 1a97799..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 { ExportOverlay } from "./save-template-overlay";
+import { ExportOverlay } from "./export-overlay";
 import { IDIOMORPH_JS } from "./idiomorph-inline";
 
 // ─── Zod Schema (CopilotKit parameter contract) ─────────────────────
@@ -456,16 +456,17 @@ window.addEventListener('message', function(e) {
 });
 
 // Auto-resize: report content height to host.
-// Temporarily collapse the container so viewport-relative children (100vh, 100%)
-// don't inflate the measurement — this gives us intrinsic content height only.
+// 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');
   if (!content) return;
-  content.style.height = '0';
-  content.style.overflow = 'hidden';
-  var h = content.scrollHeight;
-  content.style.height = '';
-  content.style.overflow = '';
+  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);
diff --git a/apps/app/src/hooks/use-generative-ui-examples.tsx b/apps/app/src/hooks/use-generative-ui-examples.tsx
index 6138453..04601ab 100644
--- a/apps/app/src/hooks/use-generative-ui-examples.tsx
+++ b/apps/app/src/hooks/use-generative-ui-examples.tsx
@@ -74,9 +74,10 @@ export const useGenerativeUIExamples = () => {
   useRenderTool({
     name: "plan_visualization",
     parameters: PlanVisualizationParams,
-    render: ({ status, parameters }) => (
-      <PlanCard status={status} {...parameters} />
-    ),
+    render: ({ status, parameters }) => {
+      const { key_elements: keyElements, ...rest } = parameters;
+      return <PlanCard status={status} keyElements={keyElements} {...rest} />;
+    },
   });
 
   // --------------------------