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 1/2] 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 2/2] 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