From b84598b8d22759ddc034544f84f66bd3bcdae04e Mon Sep 17 00:00:00 2001
From: davidpanonce-nx <devidpanonce@gmail.com>
Date: Fri, 20 Mar 2026 21:59:27 +0800
Subject: [PATCH 01/16] feat: add UI template system for saving and reusing
 generated widgets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add template tools (save, list, apply, delete) in agent backend
- Extend AgentState with templates field
- Add "Save as Template" button overlay on widget renderer with
  animated save flow (input → saving spinner → checkmark confirmation)
- Add template library drawer panel (toggle from header)
- Templates saved directly to agent state via setState (no chat round-trip)
- Template deletion from drawer updates state directly
- Apply template sends chat prompt for agent to adapt HTML with new data

Closes #16
---
 apps/agent/main.py                            |  17 ++-
 apps/agent/src/templates.py                   | 138 +++++++++++++++++
 apps/agent/src/todos.py                       |   3 +
 apps/app/src/app/globals.css                  |  16 ++
 apps/app/src/app/page.tsx                     | 108 ++++++++++++--
 .../generative-ui/widget-renderer.tsx         | 137 ++++++++++++++++-
 .../src/components/template-library/index.tsx | 139 ++++++++++++++++++
 .../template-library/template-card.tsx        | 130 ++++++++++++++++
 8 files changed, 670 insertions(+), 18 deletions(-)
 create mode 100644 apps/agent/src/templates.py
 create mode 100644 apps/app/src/components/template-library/index.tsx
 create mode 100644 apps/app/src/components/template-library/template-card.tsx

diff --git a/apps/agent/main.py b/apps/agent/main.py
index 35aadda..1d03975 100644
--- a/apps/agent/main.py
+++ b/apps/agent/main.py
@@ -10,6 +10,7 @@
 from src.query import query_data
 from src.todos import AgentState, todo_tools
 from src.form import generate_form
+from src.templates import template_tools
 from skills import load_all_skills
 
 # Load all visualization skills
@@ -17,7 +18,7 @@
 
 agent = create_agent(
     model=ChatOpenAI(model="gpt-5.4-2026-03-05"),
-    tools=[query_data, *todo_tools, generate_form],
+    tools=[query_data, *todo_tools, generate_form, *template_tools],
     middleware=[CopilotKitMiddleware()],
     state_schema=AgentState,
     system_prompt=f"""
@@ -47,6 +48,20 @@
         Follow the skills below for how to produce high-quality visuals:
 
         {_skills_text}
+
+        ## UI Templates
+
+        Users can save generated UIs as reusable templates and apply them later:
+
+        - When a user asks to save a widget as a template, call `save_template` with the
+          widget's HTML, a short name, description, and a description of the data shape.
+        - When a user asks to apply a template, first call `list_templates` to find the
+          right one, then call `apply_template` to get its HTML. Adapt the HTML with the
+          user's new data and render via `widgetRenderer`.
+        - When a user asks to see their templates, call `list_templates`.
+        - When a user asks to delete a template, call `delete_template`.
+        - A "save-as-template" message from the frontend means the user clicked the save
+          button on a widget. Extract the template details and call `save_template`.
     """,
 )
 
diff --git a/apps/agent/src/templates.py b/apps/agent/src/templates.py
new file mode 100644
index 0000000..48f4eb9
--- /dev/null
+++ b/apps/agent/src/templates.py
@@ -0,0 +1,138 @@
+from langchain.tools import ToolRuntime, tool
+from langchain.messages import ToolMessage
+from langgraph.types import Command
+from typing import TypedDict
+import uuid
+from datetime import datetime
+
+
+class UITemplate(TypedDict):
+    id: str
+    name: str
+    description: str
+    html: str
+    data_description: str
+    created_at: str
+    version: int
+
+
+@tool
+def save_template(
+    name: str,
+    description: str,
+    html: str,
+    data_description: str,
+    runtime: ToolRuntime,
+) -> Command:
+    """
+    Save a generated UI as a reusable template.
+    Call this when the user wants to save a widget/visualization they liked for reuse later.
+
+    Args:
+        name: Short name for the template (e.g. "Invoice", "Dashboard")
+        description: What the template displays or does
+        html: The raw HTML string of the widget to save as a template
+        data_description: Description of the data shape this template expects
+    """
+    templates = list(runtime.state.get("templates", []))
+
+    template: UITemplate = {
+        "id": str(uuid.uuid4()),
+        "name": name,
+        "description": description,
+        "html": html,
+        "data_description": data_description,
+        "created_at": datetime.now().isoformat(),
+        "version": 1,
+    }
+    templates.append(template)
+
+    return Command(update={
+        "templates": templates,
+        "messages": [
+            ToolMessage(
+                content=f"Template '{name}' saved successfully (id: {template['id']})",
+                tool_call_id=runtime.tool_call_id,
+            )
+        ],
+    })
+
+
+@tool
+def list_templates(runtime: ToolRuntime):
+    """
+    List all saved UI templates. Returns template summaries (id, name, description, data_description).
+    """
+    templates = runtime.state.get("templates", [])
+    return [
+        {
+            "id": t["id"],
+            "name": t["name"],
+            "description": t["description"],
+            "data_description": t["data_description"],
+            "version": t["version"],
+        }
+        for t in templates
+    ]
+
+
+@tool
+def apply_template(template_id: str, runtime: ToolRuntime):
+    """
+    Retrieve a saved template's HTML so you can adapt it with new data.
+    After calling this, modify the HTML to fit the user's new data and render it via widgetRenderer.
+
+    Args:
+        template_id: The ID of the template to apply
+    """
+    templates = runtime.state.get("templates", [])
+    for t in templates:
+        if t["id"] == template_id:
+            return {
+                "name": t["name"],
+                "description": t["description"],
+                "html": t["html"],
+                "data_description": t["data_description"],
+            }
+    return {"error": f"Template with id '{template_id}' not found"}
+
+
+@tool
+def delete_template(template_id: str, runtime: ToolRuntime) -> Command:
+    """
+    Delete a saved UI template.
+
+    Args:
+        template_id: The ID of the template to delete
+    """
+    templates = list(runtime.state.get("templates", []))
+    original_len = len(templates)
+    templates = [t for t in templates if t["id"] != template_id]
+
+    if len(templates) == original_len:
+        return Command(update={
+            "messages": [
+                ToolMessage(
+                    content=f"Template with id '{template_id}' not found",
+                    tool_call_id=runtime.tool_call_id,
+                )
+            ],
+        })
+
+    return Command(update={
+        "templates": templates,
+        "messages": [
+            ToolMessage(
+                content=f"Template deleted successfully",
+                tool_call_id=runtime.tool_call_id,
+            )
+        ],
+    })
+
+
+template_tools = [
+    save_template,
+    list_templates,
+    apply_template,
+    delete_template,
+]
diff --git a/apps/agent/src/todos.py b/apps/agent/src/todos.py
index b647fee..ce1f731 100644
--- a/apps/agent/src/todos.py
+++ b/apps/agent/src/todos.py
@@ -5,6 +5,8 @@
 from typing import TypedDict, Literal
 import uuid
 
+from src.templates import UITemplate
+
 class Todo(TypedDict):
     id: str
     title: str
@@ -14,6 +16,7 @@ class Todo(TypedDict):
 
 class AgentState(BaseAgentState):
     todos: list[Todo]
+    templates: list[UITemplate]
 
 @tool
 def manage_todos(todos: list[Todo], runtime: ToolRuntime) -> Command:
diff --git a/apps/app/src/app/globals.css b/apps/app/src/app/globals.css
index 0c98827..75d41c6 100644
--- a/apps/app/src/app/globals.css
+++ b/apps/app/src/app/globals.css
@@ -621,3 +621,19 @@ body, html {
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
+
+/* Template save animations */
+@keyframes tmpl-pop {
+  0%   { transform: scale(0.8); opacity: 0; }
+  50%  { transform: scale(1.05); }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes tmpl-check {
+  to { stroke-dashoffset: 0; }
+}
+
+@keyframes tmpl-slideIn {
+  from { transform: translateY(-4px) scale(0.97); opacity: 0; }
+  to   { transform: translateY(0) scale(1); opacity: 1; }
+}
diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index 7994182..c23ab68 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -1,26 +1,76 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState, useCallback } 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 { CopilotChat } from "@copilotkit/react-core/v2";
+import { useAgent } from "@copilotkit/react-core/v2";
 
 export default function HomePage() {
   useGenerativeUIExamples();
   useExampleSuggestions();
 
-  // Widget bridge: handle openLink from widget iframes
+  const { agent } = useAgent();
+  const [templateDrawerOpen, setTemplateDrawerOpen] = useState(false);
+
+  // Save a template directly to agent state — no chat round-trip
+  const saveTemplate = useCallback((data: {
+    name: string;
+    title: string;
+    description: string;
+    html: string;
+  }) => {
+    const templates = agent.state?.templates || [];
+    const newTemplate = {
+      id: crypto.randomUUID(),
+      name: data.name || data.title || "Untitled Template",
+      description: data.description || data.title || "",
+      html: data.html,
+      data_description: "",
+      created_at: new Date().toISOString(),
+      version: 1,
+    };
+    agent.setState({ templates: [...templates, newTemplate] });
+  }, [agent]);
+
+  // Send a prompt to the CopilotChat by finding its textarea and submitting
+  const sendPrompt = useCallback((text: string) => {
+    const input = document.querySelector<HTMLTextAreaElement>(
+      '[class*="copilot"] textarea, [data-copilotkit] textarea'
+    );
+    if (input) {
+      const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        "value"
+      )?.set;
+      setter?.call(input, text);
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      setTimeout(() => {
+        const form = input.closest("form");
+        if (form) {
+          form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+        }
+      }, 50);
+    }
+  }, []);
+
+  // Widget bridge: handle messages from widget iframes
   useEffect(() => {
     const handler = (e: MessageEvent) => {
       if (e.data?.type === "open-link" && typeof e.data.url === "string") {
         window.open(e.data.url, "_blank", "noopener,noreferrer");
       }
+      // Handle save-as-template from WidgetRenderer — save directly to state
+      if (e.data?.type === "save-as-template") {
+        saveTemplate(e.data);
+      }
     };
     window.addEventListener("message", handler);
     return () => window.removeEventListener("message", handler);
-  }, []);
+  }, [saveTemplate]);
 
   return (
     <>
@@ -58,19 +108,38 @@ export default function HomePage() {
                   <span className="font-normal" style={{ color: "var(--text-secondary)" }}> — powered by CopilotKit</span>
                 </p>
               </div>
-              <a
-                href="https://github.com/CopilotKit/OpenGenerativeUI"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center px-5 py-2 rounded-full text-sm font-semibold text-white no-underline whitespace-nowrap transition-all duration-150 hover:-translate-y-px"
-                style={{
-                  background: "linear-gradient(135deg, var(--color-lilac-dark), var(--color-mint-dark))",
-                  boxShadow: "0 1px 4px rgba(149,153,204,0.3)",
-                  fontFamily: "var(--font-family)",
-                }}
-              >
-                Get started
-              </a>
+              <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"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center px-5 py-2 rounded-full text-sm font-semibold text-white no-underline whitespace-nowrap transition-all duration-150 hover:-translate-y-px"
+                  style={{
+                    background: "linear-gradient(135deg, var(--color-lilac-dark), var(--color-mint-dark))",
+                    boxShadow: "0 1px 4px rgba(149,153,204,0.3)",
+                    fontFamily: "var(--font-family)",
+                  }}
+                >
+                  Get started
+                </a>
+              </div>
             </div>
           </div>
 
@@ -84,6 +153,13 @@ export default function HomePage() {
           <ExplainerCardsPortal />
         </div>
       </div>
+
+      {/* Template Library Drawer */}
+      <TemplateLibrary
+        open={templateDrawerOpen}
+        onClose={() => setTemplateDrawerOpen(false)}
+        onSendPrompt={sendPrompt}
+      />
     </>
   );
 }
diff --git a/apps/app/src/components/generative-ui/widget-renderer.tsx b/apps/app/src/components/generative-ui/widget-renderer.tsx
index f978385..a69eb4c 100644
--- a/apps/app/src/components/generative-ui/widget-renderer.tsx
+++ b/apps/app/src/components/generative-ui/widget-renderer.tsx
@@ -421,10 +421,14 @@ function useLoadingPhrase(active: boolean) {
 }
 
 // ─── React Component ─────────────────────────────────────────────────
+type SaveState = "idle" | "input" | "saving" | "saved";
+
 export function WidgetRenderer({ title, description, html }: WidgetRendererProps) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [height, setHeight] = useState(0);
   const [loaded, setLoaded] = useState(false);
+  const [saveState, setSaveState] = useState<SaveState>("idle");
+  const [templateName, setTemplateName] = useState("");
   // Track what html has been committed to the iframe to avoid redundant reloads
   const committedHtmlRef = useRef("");
 
@@ -473,8 +477,139 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
   const showLoading = !!html && !ready;
   const loadingPhrase = useLoadingPhrase(showLoading);
 
+  const handleSaveTemplate = useCallback(() => {
+    const name = templateName.trim() || title || "Untitled Template";
+    setSaveState("saving");
+    window.postMessage(
+      { type: "save-as-template", name, title, description, html },
+      "*"
+    );
+    setTemplateName("");
+    // Brief "saving" pulse then show "saved" confirmation
+    setTimeout(() => {
+      setSaveState("saved");
+      // Return to idle after the confirmation
+      setTimeout(() => setSaveState("idle"), 1800);
+    }, 400);
+  }, [templateName, title, description, html]);
+
   return (
-    <div className="w-full my-3">
+    <div className="w-full my-3 relative">
+      {/* Save as Template — only shown when widget is ready */}
+      {ready && html && (
+        <div className="absolute top-2 right-2 z-10">
+          {/* ── Saved confirmation ── */}
+          {saveState === "saved" && (
+            <div
+              className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold shadow-md"
+              style={{
+                background: "var(--color-background-success, #EAF3DE)",
+                color: "var(--color-text-success, #3B6D11)",
+                border: "1px solid var(--color-border-success, #3B6D11)",
+                animation: "tmpl-pop 0.35s cubic-bezier(.34,1.56,.64,1)",
+              }}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M20 6 9 17l-5-5" style={{ strokeDasharray: 24, strokeDashoffset: 24, animation: "tmpl-check 0.4s ease-out 0.1s forwards" }} />
+              </svg>
+              Saved!
+            </div>
+          )}
+
+          {/* ── Saving spinner ── */}
+          {saveState === "saving" && (
+            <div
+              className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium shadow-md"
+              style={{
+                background: "var(--surface-primary, #fff)",
+                border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
+                color: "var(--text-secondary, #666)",
+              }}
+            >
+              <div
+                style={{
+                  width: 12,
+                  height: 12,
+                  borderRadius: "50%",
+                  border: "2px solid var(--color-border-tertiary, rgba(0,0,0,0.15))",
+                  borderTopColor: "var(--color-lilac-dark, #6366f1)",
+                  animation: "spin 0.6s linear infinite",
+                }}
+              />
+              Saving...
+            </div>
+          )}
+
+          {/* ── Name input ── */}
+          {saveState === "input" && (
+            <div
+              className="flex items-center gap-2 rounded-lg px-3 py-2 shadow-lg"
+              style={{
+                background: "var(--surface-primary, #fff)",
+                border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
+                animation: "tmpl-slideIn 0.2s ease-out",
+              }}
+            >
+              <input
+                type="text"
+                placeholder="Template name..."
+                value={templateName}
+                onChange={(e) => setTemplateName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handleSaveTemplate();
+                  if (e.key === "Escape") {
+                    setSaveState("idle");
+                    setTemplateName("");
+                  }
+                }}
+                autoFocus
+                className="text-xs px-2 py-1 rounded-md outline-none"
+                style={{
+                  width: 140,
+                  background: "var(--color-background-secondary, #f5f5f5)",
+                  color: "var(--text-primary, #1a1a1a)",
+                  border: "1px solid var(--color-border-tertiary, rgba(0,0,0,0.1))",
+                }}
+              />
+              <button
+                onClick={handleSaveTemplate}
+                className="text-xs px-2 py-1 rounded-md font-medium text-white"
+                style={{
+                  background: "linear-gradient(135deg, var(--color-lilac-dark, #6366f1), var(--color-mint-dark, #10b981))",
+                }}
+              >
+                Save
+              </button>
+              <button
+                onClick={() => { setSaveState("idle"); setTemplateName(""); }}
+                className="text-xs px-1.5 py-1 rounded-md"
+                style={{ color: "var(--text-secondary, #666)" }}
+              >
+                Cancel
+              </button>
+            </div>
+          )}
+
+          {/* ── Idle bookmark button ── */}
+          {saveState === "idle" && (
+            <button
+              onClick={() => setSaveState("input")}
+              className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium shadow-md transition-all duration-150 hover:scale-105"
+              style={{
+                background: "var(--surface-primary, #fff)",
+                border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
+                color: "var(--text-secondary, #666)",
+              }}
+              title="Save as Template"
+            >
+              <svg width="14" height="14" 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>
+              Save as Template
+            </button>
+          )}
+        </div>
+      )}
       {/* Loading indicator: visible until iframe is fully ready */}
       {showLoading && (
         <div
diff --git a/apps/app/src/components/template-library/index.tsx b/apps/app/src/components/template-library/index.tsx
new file mode 100644
index 0000000..6be1f13
--- /dev/null
+++ b/apps/app/src/components/template-library/index.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { useAgent } from "@copilotkit/react-core/v2";
+import { TemplateCard } from "./template-card";
+
+interface TemplateLibraryProps {
+  open: boolean;
+  onClose: () => void;
+  onSendPrompt: (text: string) => void;
+}
+
+interface Template {
+  id: string;
+  name: string;
+  description: string;
+  html: string;
+  data_description: string;
+  version: number;
+}
+
+export function TemplateLibrary({ open, onClose, onSendPrompt }: TemplateLibraryProps) {
+  const { agent } = useAgent();
+  const templates: Template[] = agent.state?.templates || [];
+
+  const handleApply = (id: string, name: string) => {
+    onSendPrompt(`Apply the "${name}" template (id: ${id}) to my new data`);
+    onClose();
+  };
+
+  const handleDelete = (id: string) => {
+    agent.setState({
+      templates: templates.filter((t) => t.id !== id),
+    });
+  };
+
+  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: 380,
+          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)" }}>
+              <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
+            </svg>
+            <h2
+              className="text-base font-semibold"
+              style={{ color: "var(--text-primary, #1a1a1a)" }}
+            >
+              Templates
+            </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)",
+              }}
+            >
+              {templates.length}
+            </span>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-lg transition-colors duration-150"
+            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>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {templates.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full gap-3 text-center px-6">
+              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ color: "var(--text-tertiary, #999)", opacity: 0.5 }}>
+                <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
+              </svg>
+              <p
+                className="text-sm font-medium"
+                style={{ color: "var(--text-secondary, #666)" }}
+              >
+                No templates yet
+              </p>
+              <p
+                className="text-xs"
+                style={{ color: "var(--text-tertiary, #999)" }}
+              >
+                Hover over a widget and click &quot;Save as Template&quot; to save it for reuse.
+              </p>
+            </div>
+          ) : (
+            <div className="grid gap-3">
+              {templates.map((t) => (
+                <TemplateCard
+                  key={t.id}
+                  id={t.id}
+                  name={t.name}
+                  description={t.description}
+                  html={t.html}
+                  dataDescription={t.data_description}
+                  version={t.version}
+                  onApply={handleApply}
+                  onDelete={handleDelete}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/app/src/components/template-library/template-card.tsx b/apps/app/src/components/template-library/template-card.tsx
new file mode 100644
index 0000000..304cbac
--- /dev/null
+++ b/apps/app/src/components/template-library/template-card.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import { useRef, useEffect, useState } from "react";
+
+interface TemplateCardProps {
+  id: string;
+  name: string;
+  description: string;
+  html: string;
+  dataDescription: string;
+  version: number;
+  onApply: (id: string, name: string) => void;
+  onDelete: (id: string, name: string) => void;
+}
+
+export function TemplateCard({
+  id,
+  name,
+  description,
+  html,
+  dataDescription,
+  version,
+  onApply,
+  onDelete,
+}: TemplateCardProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [previewReady, setPreviewReady] = useState(false);
+
+  useEffect(() => {
+    if (!iframeRef.current || !html) return;
+    const doc = `<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<style>
+* { box-sizing: border-box; margin: 0; }
+body { font-family: system-ui, sans-serif; font-size: 16px; color: #1a1a1a; background: #fff; transform-origin: top left; overflow: hidden; }
+@media (prefers-color-scheme: dark) { body { color: #e8e6de; background: #1a1a18; } }
+</style></head><body><div id="content">${html}</div></body></html>`;
+    iframeRef.current.srcdoc = doc;
+    const timer = setTimeout(() => setPreviewReady(true), 500);
+    return () => clearTimeout(timer);
+  }, [html]);
+
+  return (
+    <div
+      className="rounded-xl overflow-hidden flex flex-col"
+      style={{
+        border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
+        background: "var(--surface-primary, #fff)",
+      }}
+    >
+      {/* Preview */}
+      <div
+        className="relative overflow-hidden"
+        style={{ height: 140, background: "var(--color-background-secondary, #f7f6f3)" }}
+      >
+        <iframe
+          ref={iframeRef}
+          sandbox="allow-same-origin"
+          className="border-0 w-[300%] h-[300%] origin-top-left"
+          style={{
+            transform: "scale(0.333)",
+            pointerEvents: "none",
+            opacity: previewReady ? 1 : 0,
+            transition: "opacity 300ms",
+          }}
+          title={`Preview: ${name}`}
+        />
+        {/* Version badge */}
+        <span
+          className="absolute top-2 right-2 text-[10px] font-semibold px-1.5 py-0.5 rounded-full"
+          style={{
+            background: "var(--color-background-info, #E6F1FB)",
+            color: "var(--color-text-info, #185FA5)",
+          }}
+        >
+          v{version}
+        </span>
+      </div>
+
+      {/* Info */}
+      <div className="flex flex-col gap-1 p-3 flex-1">
+        <h3
+          className="text-sm font-semibold truncate"
+          style={{ color: "var(--text-primary, #1a1a1a)" }}
+        >
+          {name}
+        </h3>
+        <p
+          className="text-xs line-clamp-2"
+          style={{ color: "var(--text-secondary, #666)" }}
+        >
+          {description}
+        </p>
+        {dataDescription && (
+          <p
+            className="text-[10px] mt-1 truncate"
+            style={{ color: "var(--text-tertiary, #999)" }}
+          >
+            Data: {dataDescription}
+          </p>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div
+        className="flex gap-2 p-3 pt-0"
+      >
+        <button
+          onClick={() => onApply(id, name)}
+          className="flex-1 text-xs font-medium py-1.5 rounded-lg transition-all duration-150 hover:scale-[1.02] text-white"
+          style={{
+            background: "linear-gradient(135deg, var(--color-lilac-dark, #6366f1), var(--color-mint-dark, #10b981))",
+          }}
+        >
+          Apply
+        </button>
+        <button
+          onClick={() => onDelete(id, name)}
+          className="text-xs px-3 py-1.5 rounded-lg transition-colors duration-150"
+          style={{
+            border: "1px solid var(--color-border-tertiary, rgba(0,0,0,0.1))",
+            color: "var(--color-text-danger, #A32D2D)",
+          }}
+        >
+          Delete
+        </button>
+      </div>
+    </div>
+  );
+}

From e33f7c74d24b1d651962e6f0676ccc84710c1f14 Mon Sep 17 00:00:00 2001
From: davidpanonce-nx <devidpanonce@gmail.com>
Date: Fri, 20 Mar 2026 22:25:10 +0800
Subject: [PATCH 02/16] fix: address code review feedback

- Remove misleading system prompt instruction about "save-as-template"
  messages (saves go directly via agent.setState, not through chat)
- Replace fragile DOM querySelector hack for sending prompts with
  agent.addMessage() + agent.runAgent() API calls
---
 apps/agent/main.py        |  2 --
 apps/app/src/app/page.tsx | 27 ++++++++-------------------
 2 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/apps/agent/main.py b/apps/agent/main.py
index 1d03975..004d8da 100644
--- a/apps/agent/main.py
+++ b/apps/agent/main.py
@@ -60,8 +60,6 @@
           user's new data and render via `widgetRenderer`.
         - When a user asks to see their templates, call `list_templates`.
         - When a user asks to delete a template, call `delete_template`.
-        - A "save-as-template" message from the frontend means the user clicked the save
-          button on a widget. Extract the template details and call `save_template`.
     """,
 )
 
diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index c23ab68..df8f6d6 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -36,26 +36,15 @@ export default function HomePage() {
     agent.setState({ templates: [...templates, newTemplate] });
   }, [agent]);
 
-  // Send a prompt to the CopilotChat by finding its textarea and submitting
+  // Send a prompt via the agent API — adds a user message and triggers a run
   const sendPrompt = useCallback((text: string) => {
-    const input = document.querySelector<HTMLTextAreaElement>(
-      '[class*="copilot"] textarea, [data-copilotkit] textarea'
-    );
-    if (input) {
-      const setter = Object.getOwnPropertyDescriptor(
-        window.HTMLTextAreaElement.prototype,
-        "value"
-      )?.set;
-      setter?.call(input, text);
-      input.dispatchEvent(new Event("input", { bubbles: true }));
-      setTimeout(() => {
-        const form = input.closest("form");
-        if (form) {
-          form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
-        }
-      }, 50);
-    }
-  }, []);
+    agent.addMessage({
+      id: crypto.randomUUID(),
+      role: "user",
+      content: text,
+    });
+    agent.runAgent();
+  }, [agent]);
 
   // Widget bridge: handle messages from widget iframes
   useEffect(() => {

From cd4feb25e10e218dded29f0cbd71115805dba065 Mon Sep 17 00:00:00 2001
From: davidpanonce-nx <devidpanonce@gmail.com>
Date: Fri, 20 Mar 2026 23:04:03 +0800
Subject: [PATCH 03/16] feat: progressive streaming rendering for widget
 previews

Replace the hide-everything-then-reveal approach with progressive
streaming that shows content building up as the LLM streams HTML
tokens. The iframe shell loads once and content updates are sent
via postMessage instead of full srcdoc reloads.

- Loading phrases shown above the widget during streaming
- Save Template button only appears after streaming settles
- Debounced htmlSettled detection (800ms of no changes)
- Smooth fade-out transitions for streaming indicator
---
 .../generative-ui/widget-renderer.tsx         | 206 ++++++++++++------
 1 file changed, 143 insertions(+), 63 deletions(-)

diff --git a/apps/app/src/components/generative-ui/widget-renderer.tsx b/apps/app/src/components/generative-ui/widget-renderer.tsx
index a69eb4c..03f997a 100644
--- a/apps/app/src/components/generative-ui/widget-renderer.tsx
+++ b/apps/app/src/components/generative-ui/widget-renderer.tsx
@@ -346,6 +346,28 @@ document.addEventListener('click', function(e) {
   }
 });
 
+// Listen for streaming content updates from parent
+window.addEventListener('message', function(e) {
+  if (e.data && e.data.type === 'update-content') {
+    var content = document.getElementById('content');
+    if (content) {
+      content.innerHTML = e.data.html;
+      // Re-run any inline scripts (new ones added by streaming)
+      var scripts = content.querySelectorAll('script');
+      scripts.forEach(function(oldScript) {
+        var newScript = document.createElement('script');
+        if (oldScript.src) {
+          newScript.src = oldScript.src;
+        } else {
+          newScript.textContent = oldScript.textContent;
+        }
+        oldScript.parentNode.replaceChild(newScript, oldScript);
+      });
+      reportHeight();
+    }
+  }
+});
+
 // Auto-resize: report content height to host
 function reportHeight() {
   var content = document.getElementById('content');
@@ -361,7 +383,13 @@ setTimeout(function() { clearInterval(_resizeInterval); }, 15000);
 `;
 
 // ─── Document Assembly ───────────────────────────────────────────────
+/** Full document with content — used for final/complete renders */
 function assembleDocument(html: string): string {
+  return assembleShell(html);
+}
+
+/** Empty shell or shell with initial content — iframe loads once, content streamed via postMessage */
+function assembleShell(initialHtml: string = ""): string {
   return `<!DOCTYPE html>
 <html>
 <head>
@@ -387,7 +415,7 @@ function assembleDocument(html: string): string {
 </head>
 <body>
   <div id="content">
-    ${html}
+    ${initialHtml}
   </div>
   <script>
     ${BRIDGE_JS}
@@ -429,8 +457,15 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
   const [loaded, setLoaded] = useState(false);
   const [saveState, setSaveState] = useState<SaveState>("idle");
   const [templateName, setTemplateName] = useState("");
-  // Track what html has been committed to the iframe to avoid redundant reloads
+  // Whether the iframe shell has been initialized
+  const shellReadyRef = useRef(false);
+  // Track the last html sent to the iframe to avoid redundant updates
   const committedHtmlRef = useRef("");
+  // Whether streaming has started (html is arriving but may not be complete)
+  const [streaming, setStreaming] = useState(false);
+  // Tracks whether html content has settled (stopped changing)
+  const [htmlSettled, setHtmlSettled] = useState(false);
+  const settledTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const handleMessage = useCallback((e: MessageEvent) => {
     // Only handle messages from our own iframe
@@ -449,20 +484,49 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
     return () => window.removeEventListener("message", handleMessage);
   }, [handleMessage]);
 
-  // Write to iframe imperatively — bypasses React reconciliation so the
-  // iframe only reloads when the html *content* truly changes, preserving
-  // internal JS state (Three.js scenes, step counters, etc.) across
-  // CopilotKit re-renders.
+  // Initialize the iframe shell once when html first appears.
+  // After that, stream content updates via postMessage — no iframe reload.
   useEffect(() => {
     if (!html || !iframeRef.current) return;
+
+    if (!shellReadyRef.current) {
+      // First time: load the full document so the shell (styles, bridge JS) is ready
+      shellReadyRef.current = true;
+      committedHtmlRef.current = html;
+      iframeRef.current.srcdoc = assembleShell(html);
+      setStreaming(true);
+      return;
+    }
+
+    // Subsequent updates: stream content into existing iframe via postMessage
     if (html === committedHtmlRef.current) return;
     committedHtmlRef.current = html;
-    iframeRef.current.srcdoc = assembleDocument(html);
-    setLoaded(false);
-    setHeight(0);
+
+    const iframe = iframeRef.current;
+    if (iframe.contentWindow) {
+      iframe.contentWindow.postMessage(
+        { type: "update-content", html },
+        "*"
+      );
+    }
+  }, [html]);
+
+  // Detect when html has stopped changing (streaming complete).
+  // Resets a debounce timer on every html update — settles after 800ms of no changes.
+  useEffect(() => {
+    if (!html) {
+      setHtmlSettled(false);
+      return;
+    }
+    setHtmlSettled(false);
+    if (settledTimerRef.current) clearTimeout(settledTimerRef.current);
+    settledTimerRef.current = setTimeout(() => setHtmlSettled(true), 800);
+    return () => {
+      if (settledTimerRef.current) clearTimeout(settledTimerRef.current);
+    };
   }, [html]);
 
-  // Fallback: if iframe has html but hasn't reported ready after 4s, force-show
+  // Fallback: if iframe has html but hasn't reported a height after 4s, force-show
   useEffect(() => {
     if (!html || (loaded && height > 0)) return;
     const timeout = setTimeout(() => {
@@ -472,10 +536,27 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
     return () => clearTimeout(timeout);
   }, [html, loaded, height]);
 
-  // Iframe is ready when it has loaded AND reported a valid height
+  // Content is "complete" when iframe has loaded and reported a valid height
   const ready = loaded && height > 0;
-  const showLoading = !!html && !ready;
-  const loadingPhrase = useLoadingPhrase(showLoading);
+  // Show the iframe (even partially) as soon as we have content streaming
+  const showIframe = !!html && (streaming || ready);
+  // Streaming is active until html has stopped changing
+  const isStreaming = !!html && !htmlSettled;
+  // Save template only available when fully rendered AND streaming is done
+  const showSaveTemplate = ready && htmlSettled;
+  const loadingPhrase = useLoadingPhrase(isStreaming);
+
+  // Keep the streaming indicator mounted long enough to fade out
+  const [showStreamingIndicator, setShowStreamingIndicator] = useState(false);
+  useEffect(() => {
+    if (isStreaming) {
+      setShowStreamingIndicator(true);
+    } else if (showStreamingIndicator) {
+      // Keep mounted for fade-out, then unmount
+      const timeout = setTimeout(() => setShowStreamingIndicator(false), 600);
+      return () => clearTimeout(timeout);
+    }
+  }, [isStreaming, showStreamingIndicator]);
 
   const handleSaveTemplate = useCallback(() => {
     const name = templateName.trim() || title || "Untitled Template";
@@ -494,10 +575,49 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
   }, [templateName, title, description, html]);
 
   return (
-    <div className="w-full my-3 relative">
-      {/* Save as Template — only shown when widget is ready */}
-      {ready && html && (
-        <div className="absolute top-2 right-2 z-10">
+    <div className="w-full my-3">
+      {/* Loading phrases — sits above the widget, fades out when ready */}
+      {showStreamingIndicator && (
+        <div
+          className="mb-2 transition-all duration-500 ease-out"
+          style={{
+            opacity: isStreaming ? 1 : 0,
+            maxHeight: isStreaming ? 32 : 0,
+            overflow: "hidden",
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <div
+              style={{
+                width: 12,
+                height: 12,
+                borderRadius: "50%",
+                border: "2px solid var(--color-border-light, rgba(0,0,0,0.1))",
+                borderTopColor: "var(--color-lilac-dark, #6366f1)",
+                animation: "spin 0.8s linear infinite",
+                flexShrink: 0,
+              }}
+            />
+            <span
+              className="text-[12px] font-medium"
+              style={{ color: "var(--text-secondary, #666)" }}
+            >
+              {loadingPhrase}...
+            </span>
+          </div>
+        </div>
+      )}
+
+      <div className="relative">
+      {/* Save as Template — fades in once widget is fully ready */}
+      {html && (
+        <div
+          className="absolute top-2 right-2 z-10 transition-opacity duration-500"
+          style={{
+            opacity: showSaveTemplate ? 1 : 0,
+            pointerEvents: showSaveTemplate ? "auto" : "none",
+          }}
+        >
           {/* ── Saved confirmation ── */}
           {saveState === "saved" && (
             <div
@@ -610,64 +730,24 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
           )}
         </div>
       )}
-      {/* Loading indicator: visible until iframe is fully ready */}
-      {showLoading && (
-        <div
-          className="overflow-hidden rounded-xl"
-          style={{
-            border: "1px solid var(--color-border-glass)",
-            background: "var(--surface-primary)",
-          }}
-        >
-          {/* Animated gradient border top */}
-          <div
-            style={{
-              height: 2,
-              background: "linear-gradient(90deg, var(--color-lilac), var(--color-mint), var(--color-lilac))",
-              backgroundSize: "200% 100%",
-              animation: "shimmer 1.5s ease-in-out infinite",
-            }}
-          />
-          <div className="flex items-center gap-3 px-4 py-3">
-            {/* Spinning icon */}
-            <div
-              style={{
-                width: 18,
-                height: 18,
-                borderRadius: "50%",
-                border: "2px solid var(--color-border-light)",
-                borderTopColor: "var(--color-lilac-dark)",
-                animation: "spin 0.8s linear infinite",
-                flexShrink: 0,
-              }}
-            />
-            <span
-              className="text-[13px] font-medium"
-              style={{ color: "var(--text-secondary)" }}
-            >
-              {loadingPhrase}...
-            </span>
-          </div>
-        </div>
-      )}
-      {/* Iframe: always mounted so ref is stable; srcdoc set imperatively.
-          No srcDoc React prop — prevents React from reloading the iframe
-          on parent re-renders. */}
+      {/* Iframe: always mounted so ref is stable; srcdoc set once,
+          content streamed via postMessage for progressive rendering. */}
       <iframe
         ref={iframeRef}
         sandbox="allow-scripts allow-same-origin"
         className="w-full border-0"
         onLoad={() => setLoaded(true)}
         style={{
-          height: ready ? height : 0,
+          height: showIframe ? (height > 0 ? height : 300) : 0,
           overflow: "hidden",
           background: "transparent",
-          opacity: ready ? 1 : 0,
-          transition: "opacity 300ms ease-in",
+          opacity: showIframe ? 1 : 0,
+          transition: "height 200ms ease-out",
           display: html ? undefined : "none",
         }}
         title={title}
       />
+      </div>
     </div>
   );
 }

From 912977c407091e4dcfee3b346656a31b092b0dbd Mon Sep 17 00:00:00 2001
From: davidpanonce-nx <devidpanonce@gmail.com>
Date: Sat, 21 Mar 2026 16:20:09 +0800
Subject: [PATCH 04/16] feat: improve template apply UX with data input step

- Apply button now prompts user to describe their new data before
  sending to the agent (textarea with placeholder example)
- Template HTML is passed directly in the prompt so the agent doesn't
  need to look it up from backend state (fixes state sync issue where
  frontend setState wasn't visible to agent tools)
- Fix template card callback signatures
---
 .../src/components/template-library/index.tsx | 101 +++++++++++++++++-
 .../template-library/template-card.tsx        |   8 +-
 2 files changed, 102 insertions(+), 7 deletions(-)

diff --git a/apps/app/src/components/template-library/index.tsx b/apps/app/src/components/template-library/index.tsx
index 6be1f13..14feda3 100644
--- a/apps/app/src/components/template-library/index.tsx
+++ b/apps/app/src/components/template-library/index.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { useAgent } from "@copilotkit/react-core/v2";
 import { TemplateCard } from "./template-card";
 
@@ -22,11 +23,39 @@ export function TemplateLibrary({ open, onClose, onSendPrompt }: TemplateLibrary
   const { agent } = useAgent();
   const templates: Template[] = agent.state?.templates || [];
 
-  const handleApply = (id: string, name: string) => {
-    onSendPrompt(`Apply the "${name}" template (id: ${id}) to my new data`);
+  // Apply flow: show input for new data before sending
+  const [applyingTemplate, setApplyingTemplate] = useState<Template | null>(null);
+  const [applyData, setApplyData] = useState("");
+
+  const handleApplyClick = (id: string) => {
+    const template = templates.find((t) => t.id === id);
+    if (template) {
+      setApplyingTemplate(template);
+      setApplyData("");
+    }
+  };
+
+  const handleApplyConfirm = () => {
+    if (!applyingTemplate) return;
+    const dataDesc = applyData.trim();
+    if (!dataDesc) return;
+
+    // Send the template HTML directly in the prompt so the agent doesn't
+    // need to look it up from state (frontend setState may not sync to backend)
+    onSendPrompt(
+      `Use this saved template called "${applyingTemplate.name}" as a base layout and adapt it for the following new data: ${dataDesc}\n\n` +
+      `Here is the template HTML to adapt:\n\n${applyingTemplate.html}`
+    );
+    setApplyingTemplate(null);
+    setApplyData("");
     onClose();
   };
 
+  const handleApplyCancel = () => {
+    setApplyingTemplate(null);
+    setApplyData("");
+  };
+
   const handleDelete = (id: string) => {
     agent.setState({
       templates: templates.filter((t) => t.id !== id),
@@ -126,13 +155,79 @@ export function TemplateLibrary({ open, onClose, onSendPrompt }: TemplateLibrary
                   html={t.html}
                   dataDescription={t.data_description}
                   version={t.version}
-                  onApply={handleApply}
+                  onApply={handleApplyClick}
                   onDelete={handleDelete}
                 />
               ))}
             </div>
           )}
         </div>
+
+        {/* Apply data input — slides up from bottom of drawer */}
+        {applyingTemplate && (
+          <div
+            className="shrink-0 px-4 pb-4 pt-3"
+            style={{
+              borderTop: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
+              animation: "tmpl-slideIn 0.2s ease-out",
+            }}
+          >
+            <p
+              className="text-xs font-semibold mb-1"
+              style={{ color: "var(--text-primary, #1a1a1a)" }}
+            >
+              Apply &quot;{applyingTemplate.name}&quot;
+            </p>
+            <p
+              className="text-[11px] mb-2"
+              style={{ color: "var(--text-tertiary, #999)" }}
+            >
+              Describe the new data you want to populate this template with:
+            </p>
+            <textarea
+              value={applyData}
+              onChange={(e) => setApplyData(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  handleApplyConfirm();
+                }
+                if (e.key === "Escape") handleApplyCancel();
+              }}
+              autoFocus
+              placeholder='e.g. "$2,400 web design project for Sarah Chen, due April 15"'
+              rows={2}
+              className="w-full text-xs px-3 py-2 rounded-lg outline-none resize-none"
+              style={{
+                background: "var(--color-background-secondary, #f5f5f5)",
+                color: "var(--text-primary, #1a1a1a)",
+                border: "1px solid var(--color-border-tertiary, rgba(0,0,0,0.1))",
+              }}
+            />
+            <div className="flex gap-2 mt-2">
+              <button
+                onClick={handleApplyConfirm}
+                disabled={!applyData.trim()}
+                className="flex-1 text-xs font-medium py-1.5 rounded-lg text-white transition-all duration-150 disabled:opacity-40"
+                style={{
+                  background: "linear-gradient(135deg, var(--color-lilac-dark, #6366f1), var(--color-mint-dark, #10b981))",
+                }}
+              >
+                Apply Template
+              </button>
+              <button
+                onClick={handleApplyCancel}
+                className="text-xs px-3 py-1.5 rounded-lg"
+                style={{
+                  border: "1px solid var(--color-border-tertiary, rgba(0,0,0,0.1))",
+                  color: "var(--text-secondary, #666)",
+                }}
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
       </div>
     </>
   );
diff --git a/apps/app/src/components/template-library/template-card.tsx b/apps/app/src/components/template-library/template-card.tsx
index 304cbac..1a11b05 100644
--- a/apps/app/src/components/template-library/template-card.tsx
+++ b/apps/app/src/components/template-library/template-card.tsx
@@ -9,8 +9,8 @@ interface TemplateCardProps {
   html: string;
   dataDescription: string;
   version: number;
-  onApply: (id: string, name: string) => void;
-  onDelete: (id: string, name: string) => void;
+  onApply: (id: string) => void;
+  onDelete: (id: string) => void;
 }
 
 export function TemplateCard({
@@ -106,7 +106,7 @@ body { font-family: system-ui, sans-serif; font-size: 16px; color: #1a1a1a; back
         className="flex gap-2 p-3 pt-0"
       >
         <button
-          onClick={() => onApply(id, name)}
+          onClick={() => onApply(id)}
           className="flex-1 text-xs font-medium py-1.5 rounded-lg transition-all duration-150 hover:scale-[1.02] text-white"
           style={{
             background: "linear-gradient(135deg, var(--color-lilac-dark, #6366f1), var(--color-mint-dark, #10b981))",
@@ -115,7 +115,7 @@ body { font-family: system-ui, sans-serif; font-size: 16px; color: #1a1a1a; back
           Apply
         </button>
         <button
-          onClick={() => onDelete(id, name)}
+          onClick={() => onDelete(id)}
           className="text-xs px-3 py-1.5 rounded-lg transition-colors duration-150"
           style={{
             border: "1px solid var(--color-border-tertiary, rgba(0,0,0,0.1))",

From d86b0fce6c8e826ff6b934420c241da22d88f2eb Mon Sep 17 00:00:00 2001
From: davidpanonce-nx <devidpanonce@gmail.com>
Date: Tue, 24 Mar 2026 00:26:28 +0800
Subject: [PATCH 05/16] refactor(generative-ui): extract save-template overlay
 into shared component

Move save-as-template UI from widget-renderer into a reusable
SaveTemplateOverlay component. Wrap bar chart, pie chart, and widget
renderer with it so all generated UIs can be saved as templates.
Uses useAgent() directly instead of window.postMessage relay.
---
 .../generative-ui/charts/bar-chart.tsx        |  54 ++---
 .../generative-ui/charts/pie-chart.tsx        |  82 ++++----
 .../generative-ui/save-template-overlay.tsx   | 187 ++++++++++++++++++
 .../generative-ui/widget-renderer.tsx         | 185 +++--------------
 4 files changed, 290 insertions(+), 218 deletions(-)
 create mode 100644 apps/app/src/components/generative-ui/save-template-overlay.tsx

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 69102c8..aad11bc 100644
--- a/apps/app/src/components/generative-ui/charts/bar-chart.tsx
+++ b/apps/app/src/components/generative-ui/charts/bar-chart.tsx
@@ -1,6 +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';
 
 export const BarChartProps = z.object({
   title: z.string().describe("Chart title"),
@@ -16,7 +17,9 @@ export const BarChartProps = z.object({
 type BarChartProps = z.infer<typeof BarChartProps>;
 
 export function BarChart({ title, description, data }: BarChartProps) {
-  if (!data || !Array.isArray(data) || data.length === 0) {
+  const hasData = data && Array.isArray(data) && data.length > 0;
+
+  if (!hasData) {
     return (
       <div className="rounded-xl border dark:border-zinc-700 shadow-sm p-6 max-w-2xl mx-auto my-6 bg-[var(--background)]">
         <div className="mb-4">
@@ -35,27 +38,34 @@ export function BarChart({ title, description, data }: BarChartProps) {
   }));
 
   return (
-    <div className="rounded-xl border dark:border-zinc-700 shadow-sm p-6 max-w-2xl mx-auto my-6 bg-[var(--background)]">
-      <div className="mb-4">
-        <h3 className="text-xl font-bold dark:text-white">{title}</h3>
-        <p className="text-sm text-gray-600 dark:text-zinc-400">{description}</p>
-      </div>
+    <SaveTemplateOverlay
+      title={title}
+      description={description}
+      componentType="barChart"
+      componentData={{ title, description, data }}
+    >
+      <div className="rounded-xl border dark:border-zinc-700 shadow-sm p-6 max-w-2xl mx-auto my-6 bg-[var(--background)]">
+        <div className="mb-4">
+          <h3 className="text-xl font-bold dark:text-white">{title}</h3>
+          <p className="text-sm text-gray-600 dark:text-zinc-400">{description}</p>
+        </div>
 
-      <ResponsiveContainer width="100%" height={300}>
-        <RechartsBarChart data={coloredData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
-          <XAxis
-            dataKey="label"
-            tick={{ fontSize: 12 }}
-            stroke="var(--chart-axis)"
-          />
-          <YAxis
-            tick={{ fontSize: 12 }}
-            stroke="var(--chart-axis)"
-          />
-          <Tooltip contentStyle={CHART_CONFIG.tooltipStyle} />
-          <Bar isAnimationActive={false} dataKey="value" radius={[4, 4, 0, 0]} />
-        </RechartsBarChart>
-      </ResponsiveContainer>
-    </div>
+        <ResponsiveContainer width="100%" height={300}>
+          <RechartsBarChart data={coloredData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
+            <XAxis
+              dataKey="label"
+              tick={{ fontSize: 12 }}
+              stroke="var(--chart-axis)"
+            />
+            <YAxis
+              tick={{ fontSize: 12 }}
+              stroke="var(--chart-axis)"
+            />
+            <Tooltip contentStyle={CHART_CONFIG.tooltipStyle} />
+            <Bar isAnimationActive={false} dataKey="value" radius={[4, 4, 0, 0]} />
+          </RechartsBarChart>
+        </ResponsiveContainer>
+      </div>
+    </SaveTemplateOverlay>
   );
 }
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 68f8fc6..8701b84 100644
--- a/apps/app/src/components/generative-ui/charts/pie-chart.tsx
+++ b/apps/app/src/components/generative-ui/charts/pie-chart.tsx
@@ -6,6 +6,7 @@ import {
 } from "recharts";
 import { z } from "zod";
 import { CHART_COLORS, CHART_CONFIG } from "./config";
+import { SaveTemplateOverlay } from "../save-template-overlay";
 
 export const PieChartProps = z.object({
   title: z.string().describe("Chart title"),
@@ -21,7 +22,9 @@ export const PieChartProps = z.object({
 type PieChartProps = z.infer<typeof PieChartProps>;
 
 export function PieChart({ title, description, data }: PieChartProps) {
-  if (!data || !Array.isArray(data) || data.length === 0) {
+  const hasData = data && Array.isArray(data) && data.length > 0;
+
+  if (!hasData) {
     return (
       <div className="rounded-xl border dark:border-zinc-700 shadow-sm p-6 max-w-lg mx-auto my-6 bg-[var(--background)]">
         <div className="mb-4">
@@ -44,43 +47,50 @@ export function PieChart({ title, description, data }: PieChartProps) {
   }));
 
   return (
-    <div className="rounded-xl border dark:border-zinc-700 shadow-sm p-6 max-w-lg mx-auto my-6 bg-[var(--background)]">
-      <div className="mb-4">
-        <h3 className="text-xl font-bold dark:text-white">{title}</h3>
-        <p className="text-sm text-gray-600 dark:text-zinc-400">
-          {description}
-        </p>
-      </div>
-
-      <ResponsiveContainer width="100%" height={300}>
-        <RechartsPieChart>
-          <Pie
-            data={coloredData}
-            dataKey="value"
-            nameKey="label"
-            cx="50%"
-            cy="50%"
-            outerRadius={100}
-            isAnimationActive={false}
-          />
-          <Tooltip contentStyle={CHART_CONFIG.tooltipStyle} />
-        </RechartsPieChart>
-      </ResponsiveContainer>
+    <SaveTemplateOverlay
+      title={title}
+      description={description}
+      componentType="pieChart"
+      componentData={{ title, description, data }}
+    >
+      <div className="rounded-xl border dark:border-zinc-700 shadow-sm p-6 max-w-lg mx-auto my-6 bg-[var(--background)]">
+        <div className="mb-4">
+          <h3 className="text-xl font-bold dark:text-white">{title}</h3>
+          <p className="text-sm text-gray-600 dark:text-zinc-400">
+            {description}
+          </p>
+        </div>
 
-      {/* Legend */}
-      <div className="mt-4 grid grid-cols-2 gap-2">
-        {data.map((item, index) => (
-          <div key={index} className="flex items-center gap-2">
-            <div
-              className="w-3 h-3 rounded-sm"
-              style={{
-                backgroundColor: CHART_COLORS[index % CHART_COLORS.length],
-              }}
+        <ResponsiveContainer width="100%" height={300}>
+          <RechartsPieChart>
+            <Pie
+              data={coloredData}
+              dataKey="value"
+              nameKey="label"
+              cx="50%"
+              cy="50%"
+              outerRadius={100}
+              isAnimationActive={false}
             />
-            <span className="text-sm dark:text-zinc-300">{item.label}</span>
-          </div>
-        ))}
+            <Tooltip contentStyle={CHART_CONFIG.tooltipStyle} />
+          </RechartsPieChart>
+        </ResponsiveContainer>
+
+        {/* Legend */}
+        <div className="mt-4 grid grid-cols-2 gap-2">
+          {data.map((item, index) => (
+            <div key={index} className="flex items-center gap-2">
+              <div
+                className="w-3 h-3 rounded-sm"
+                style={{
+                  backgroundColor: CHART_COLORS[index % CHART_COLORS.length],
+                }}
+              />
+              <span className="text-sm dark:text-zinc-300">{item.label}</span>
+            </div>
+          ))}
+        </div>
       </div>
-    </div>
+    </SaveTemplateOverlay>
   );
 }
diff --git a/apps/app/src/components/generative-ui/save-template-overlay.tsx b/apps/app/src/components/generative-ui/save-template-overlay.tsx
new file mode 100644
index 0000000..f201316
--- /dev/null
+++ b/apps/app/src/components/generative-ui/save-template-overlay.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { useState, useCallback, type ReactNode } from "react";
+import { useAgent } from "@copilotkit/react-core/v2";
+
+type SaveState = "idle" | "input" | "saving" | "saved";
+
+interface SaveTemplateOverlayProps {
+  /** Title used as default template name */
+  title: string;
+  /** Description stored with the template */
+  description: string;
+  /** Raw HTML to save (for widget renderer templates) */
+  html?: string;
+  /** Structured data to save (for chart templates) */
+  componentData?: Record<string, unknown>;
+  /** The component type that produced this (e.g. "barChart", "pieChart", "widgetRenderer") */
+  componentType: string;
+  /** Whether content has finished rendering — button hidden until true */
+  ready?: boolean;
+  children: ReactNode;
+}
+
+export function SaveTemplateOverlay({
+  title,
+  description,
+  html,
+  componentData,
+  componentType,
+  ready = true,
+  children,
+}: SaveTemplateOverlayProps) {
+  const { agent } = useAgent();
+  const [saveState, setSaveState] = useState<SaveState>("idle");
+  const [templateName, setTemplateName] = useState("");
+
+  const handleSave = useCallback(() => {
+    const name = templateName.trim() || title || "Untitled Template";
+    setSaveState("saving");
+
+    const templates = agent.state?.templates || [];
+    const newTemplate = {
+      id: crypto.randomUUID(),
+      name,
+      description: description || title || "",
+      html: html || "",
+      component_type: componentType,
+      component_data: componentData || null,
+      data_description: "",
+      created_at: new Date().toISOString(),
+      version: 1,
+    };
+    agent.setState({ templates: [...templates, newTemplate] });
+
+    setTemplateName("");
+    setTimeout(() => {
+      setSaveState("saved");
+      setTimeout(() => setSaveState("idle"), 1800);
+    }, 400);
+  }, [agent, templateName, title, description, html, componentData, componentType]);
+
+  return (
+    <div className="relative">
+      {/* Save as Template button — hidden until content is ready */}
+      <div
+        className="absolute top-2 right-2 z-10 transition-opacity duration-500"
+        style={{
+          opacity: ready ? 1 : 0,
+          pointerEvents: ready ? "auto" : "none",
+        }}
+      >
+        {/* Saved confirmation */}
+        {saveState === "saved" && (
+          <div
+            className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold shadow-md"
+            style={{
+              background: "var(--color-background-success, #EAF3DE)",
+              color: "var(--color-text-success, #3B6D11)",
+              border: "1px solid var(--color-border-success, #3B6D11)",
+              animation: "tmpl-pop 0.35s cubic-bezier(.34,1.56,.64,1)",
+            }}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M20 6 9 17l-5-5" style={{ strokeDasharray: 24, strokeDashoffset: 24, animation: "tmpl-check 0.4s ease-out 0.1s forwards" }} />
+            </svg>
+            Saved!
+          </div>
+        )}
+
+        {/* Saving spinner */}
+        {saveState === "saving" && (
+          <div
+            className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium shadow-md"
+            style={{
+              background: "var(--surface-primary, #fff)",
+              border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
+              color: "var(--text-secondary, #666)",
+            }}
+          >
+            <div
+              style={{
+                width: 12,
+                height: 12,
+                borderRadius: "50%",
+                border: "2px solid var(--color-border-tertiary, rgba(0,0,0,0.15))",
+                borderTopColor: "var(--color-lilac-dark, #6366f1)",
+                animation: "spin 0.6s linear infinite",
+              }}
+            />
+            Saving...
+          </div>
+        )}
+
+        {/* Name input */}
+        {saveState === "input" && (
+          <div
+            className="flex items-center gap-2 rounded-lg px-3 py-2 shadow-lg"
+            style={{
+              background: "var(--surface-primary, #fff)",
+              border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
+              animation: "tmpl-slideIn 0.2s ease-out",
+            }}
+          >
+            <input
+              type="text"
+              placeholder="Template name..."
+              value={templateName}
+              onChange={(e) => setTemplateName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleSave();
+                if (e.key === "Escape") {
+                  setSaveState("idle");
+                  setTemplateName("");
+                }
+              }}
+              autoFocus
+              className="text-xs px-2 py-1 rounded-md outline-none"
+              style={{
+                width: 140,
+                background: "var(--color-background-secondary, #f5f5f5)",
+                color: "var(--text-primary, #1a1a1a)",
+                border: "1px solid var(--color-border-tertiary, rgba(0,0,0,0.1))",
+              }}
+            />
+            <button
+              onClick={handleSave}
+              className="text-xs px-2 py-1 rounded-md font-medium text-white"
+              style={{
+                background: "linear-gradient(135deg, var(--color-lilac-dark, #6366f1), var(--color-mint-dark, #10b981))",
+              }}
+            >
+              Save
+            </button>
+            <button
+              onClick={() => { setSaveState("idle"); setTemplateName(""); }}
+              className="text-xs px-1.5 py-1 rounded-md"
+              style={{ color: "var(--text-secondary, #666)" }}
+            >
+              Cancel
+            </button>
+          </div>
+        )}
+
+        {/* Idle bookmark button */}
+        {saveState === "idle" && (
+          <button
+            onClick={() => setSaveState("input")}
+            className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium shadow-md transition-all duration-150 hover:scale-105"
+            style={{
+              background: "var(--surface-primary, #fff)",
+              border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
+              color: "var(--text-secondary, #666)",
+            }}
+            title="Save as Template"
+          >
+            <svg width="14" height="14" 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>
+            Save as Template
+          </button>
+        )}
+      </div>
+
+      {children}
+    </div>
+  );
+}
diff --git a/apps/app/src/components/generative-ui/widget-renderer.tsx b/apps/app/src/components/generative-ui/widget-renderer.tsx
index 03f997a..c18faf8 100644
--- a/apps/app/src/components/generative-ui/widget-renderer.tsx
+++ b/apps/app/src/components/generative-ui/widget-renderer.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState, useCallback } from "react";
 import { z } from "zod";
+import { SaveTemplateOverlay } from "./save-template-overlay";
 
 // ─── Zod Schema (CopilotKit parameter contract) ─────────────────────
 export const WidgetRendererProps = z.object({
@@ -24,7 +25,7 @@ export const WidgetRendererProps = z.object({
 type WidgetRendererProps = z.infer<typeof WidgetRendererProps>;
 
 // ─── Injected CSS: Theme Variables (Layer 3) ─────────────────────────
-const THEME_CSS = `
+export const THEME_CSS = `
 :root {
   --color-background-primary: #ffffff;
   --color-background-secondary: #f7f6f3;
@@ -449,14 +450,11 @@ function useLoadingPhrase(active: boolean) {
 }
 
 // ─── React Component ─────────────────────────────────────────────────
-type SaveState = "idle" | "input" | "saving" | "saved";
 
 export function WidgetRenderer({ title, description, html }: WidgetRendererProps) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [height, setHeight] = useState(0);
   const [loaded, setLoaded] = useState(false);
-  const [saveState, setSaveState] = useState<SaveState>("idle");
-  const [templateName, setTemplateName] = useState("");
   // Whether the iframe shell has been initialized
   const shellReadyRef = useRef(false);
   // Track the last html sent to the iframe to avoid redundant updates
@@ -542,8 +540,6 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
   const showIframe = !!html && (streaming || ready);
   // Streaming is active until html has stopped changing
   const isStreaming = !!html && !htmlSettled;
-  // Save template only available when fully rendered AND streaming is done
-  const showSaveTemplate = ready && htmlSettled;
   const loadingPhrase = useLoadingPhrase(isStreaming);
 
   // Keep the streaming indicator mounted long enough to fade out
@@ -558,22 +554,6 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
     }
   }, [isStreaming, showStreamingIndicator]);
 
-  const handleSaveTemplate = useCallback(() => {
-    const name = templateName.trim() || title || "Untitled Template";
-    setSaveState("saving");
-    window.postMessage(
-      { type: "save-as-template", name, title, description, html },
-      "*"
-    );
-    setTemplateName("");
-    // Brief "saving" pulse then show "saved" confirmation
-    setTimeout(() => {
-      setSaveState("saved");
-      // Return to idle after the confirmation
-      setTimeout(() => setSaveState("idle"), 1800);
-    }, 400);
-  }, [templateName, title, description, html]);
-
   return (
     <div className="w-full my-3">
       {/* Loading phrases — sits above the widget, fades out when ready */}
@@ -608,146 +588,31 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
         </div>
       )}
 
-      <div className="relative">
-      {/* Save as Template — fades in once widget is fully ready */}
-      {html && (
-        <div
-          className="absolute top-2 right-2 z-10 transition-opacity duration-500"
+      <SaveTemplateOverlay
+        title={title}
+        description={description}
+        html={html}
+        componentType="widgetRenderer"
+        ready={!!html && htmlSettled}
+      >
+        {/* Iframe: always mounted so ref is stable; srcdoc set once,
+            content streamed via postMessage for progressive rendering. */}
+        <iframe
+          ref={iframeRef}
+          sandbox="allow-scripts allow-same-origin"
+          className="w-full border-0"
+          onLoad={() => setLoaded(true)}
           style={{
-            opacity: showSaveTemplate ? 1 : 0,
-            pointerEvents: showSaveTemplate ? "auto" : "none",
+            height: showIframe ? (height > 0 ? height : 300) : 0,
+            overflow: "hidden",
+            background: "transparent",
+            opacity: showIframe ? 1 : 0,
+            transition: "height 200ms ease-out",
+            display: html ? undefined : "none",
           }}
-        >
-          {/* ── Saved confirmation ── */}
-          {saveState === "saved" && (
-            <div
-              className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold shadow-md"
-              style={{
-                background: "var(--color-background-success, #EAF3DE)",
-                color: "var(--color-text-success, #3B6D11)",
-                border: "1px solid var(--color-border-success, #3B6D11)",
-                animation: "tmpl-pop 0.35s cubic-bezier(.34,1.56,.64,1)",
-              }}
-            >
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M20 6 9 17l-5-5" style={{ strokeDasharray: 24, strokeDashoffset: 24, animation: "tmpl-check 0.4s ease-out 0.1s forwards" }} />
-              </svg>
-              Saved!
-            </div>
-          )}
-
-          {/* ── Saving spinner ── */}
-          {saveState === "saving" && (
-            <div
-              className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium shadow-md"
-              style={{
-                background: "var(--surface-primary, #fff)",
-                border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
-                color: "var(--text-secondary, #666)",
-              }}
-            >
-              <div
-                style={{
-                  width: 12,
-                  height: 12,
-                  borderRadius: "50%",
-                  border: "2px solid var(--color-border-tertiary, rgba(0,0,0,0.15))",
-                  borderTopColor: "var(--color-lilac-dark, #6366f1)",
-                  animation: "spin 0.6s linear infinite",
-                }}
-              />
-              Saving...
-            </div>
-          )}
-
-          {/* ── Name input ── */}
-          {saveState === "input" && (
-            <div
-              className="flex items-center gap-2 rounded-lg px-3 py-2 shadow-lg"
-              style={{
-                background: "var(--surface-primary, #fff)",
-                border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
-                animation: "tmpl-slideIn 0.2s ease-out",
-              }}
-            >
-              <input
-                type="text"
-                placeholder="Template name..."
-                value={templateName}
-                onChange={(e) => setTemplateName(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") handleSaveTemplate();
-                  if (e.key === "Escape") {
-                    setSaveState("idle");
-                    setTemplateName("");
-                  }
-                }}
-                autoFocus
-                className="text-xs px-2 py-1 rounded-md outline-none"
-                style={{
-                  width: 140,
-                  background: "var(--color-background-secondary, #f5f5f5)",
-                  color: "var(--text-primary, #1a1a1a)",
-                  border: "1px solid var(--color-border-tertiary, rgba(0,0,0,0.1))",
-                }}
-              />
-              <button
-                onClick={handleSaveTemplate}
-                className="text-xs px-2 py-1 rounded-md font-medium text-white"
-                style={{
-                  background: "linear-gradient(135deg, var(--color-lilac-dark, #6366f1), var(--color-mint-dark, #10b981))",
-                }}
-              >
-                Save
-              </button>
-              <button
-                onClick={() => { setSaveState("idle"); setTemplateName(""); }}
-                className="text-xs px-1.5 py-1 rounded-md"
-                style={{ color: "var(--text-secondary, #666)" }}
-              >
-                Cancel
-              </button>
-            </div>
-          )}
-
-          {/* ── Idle bookmark button ── */}
-          {saveState === "idle" && (
-            <button
-              onClick={() => setSaveState("input")}
-              className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium shadow-md transition-all duration-150 hover:scale-105"
-              style={{
-                background: "var(--surface-primary, #fff)",
-                border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
-                color: "var(--text-secondary, #666)",
-              }}
-              title="Save as Template"
-            >
-              <svg width="14" height="14" 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>
-              Save as Template
-            </button>
-          )}
-        </div>
-      )}
-      {/* Iframe: always mounted so ref is stable; srcdoc set once,
-          content streamed via postMessage for progressive rendering. */}
-      <iframe
-        ref={iframeRef}
-        sandbox="allow-scripts allow-same-origin"
-        className="w-full border-0"
-        onLoad={() => setLoaded(true)}
-        style={{
-          height: showIframe ? (height > 0 ? height : 300) : 0,
-          overflow: "hidden",
-          background: "transparent",
-          opacity: showIframe ? 1 : 0,
-          transition: "height 200ms ease-out",
-          display: html ? undefined : "none",
-        }}
-        title={title}
-      />
-      </div>
+          title={title}
+        />
+      </SaveTemplateOverlay>
     </div>
   );
 }

From 450821605a902f3bf6fd2a868c54bb21819e80d0 Mon Sep 17 00:00:00 2001
From: davidpanonce-nx <devidpanonce@gmail.com>
Date: Tue, 24 Mar 2026 00:26:39 +0800
Subject: [PATCH 06/16] feat(template-library): add mini chart previews to
 template cards

Render inline SVG bar/pie chart previews in template cards using the
saved component data. Widget renderer templates keep the iframe preview.
Templates without HTML show a placeholder icon.
---
 .../template-library/template-card.tsx        | 153 +++++++++++++++---
 1 file changed, 128 insertions(+), 25 deletions(-)

diff --git a/apps/app/src/components/template-library/template-card.tsx b/apps/app/src/components/template-library/template-card.tsx
index 1a11b05..fe774fa 100644
--- a/apps/app/src/components/template-library/template-card.tsx
+++ b/apps/app/src/components/template-library/template-card.tsx
@@ -1,23 +1,100 @@
 "use client";
 
 import { useRef, useEffect, useState } from "react";
+import { THEME_CSS } from "@/components/generative-ui/widget-renderer";
+
+const CHART_COLORS = [
+  "#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b",
+  "#10b981", "#06b6d4", "#f97316",
+];
 
 interface TemplateCardProps {
   id: string;
   name: string;
   description: string;
   html: string;
+  componentType?: string;
+  componentData?: Record<string, unknown>;
   dataDescription: string;
   version: number;
   onApply: (id: string) => void;
   onDelete: (id: string) => void;
 }
 
+/** Mini bar chart preview rendered as inline SVG */
+function BarChartPreview({ data }: { data: { label: string; value: number }[] }) {
+  if (!data?.length) return null;
+  const max = Math.max(...data.map((d) => d.value));
+  const barWidth = Math.min(40, Math.floor(280 / data.length) - 8);
+  const chartWidth = data.length * (barWidth + 8);
+  const chartHeight = 100;
+
+  return (
+    <svg
+      viewBox={`0 0 ${chartWidth} ${chartHeight}`}
+      width="100%"
+      height="100%"
+      preserveAspectRatio="xMidYMid meet"
+      style={{ padding: 16 }}
+    >
+      {data.map((d, i) => {
+        const h = max > 0 ? (d.value / max) * (chartHeight - 20) : 0;
+        return (
+          <rect
+            key={i}
+            x={i * (barWidth + 8)}
+            y={chartHeight - h - 10}
+            width={barWidth}
+            height={h}
+            rx={3}
+            fill={CHART_COLORS[i % CHART_COLORS.length]}
+          />
+        );
+      })}
+    </svg>
+  );
+}
+
+/** Mini pie chart preview rendered as inline SVG */
+function PieChartPreview({ data }: { data: { label: string; value: number }[] }) {
+  if (!data?.length) return null;
+  const total = data.reduce((sum, d) => sum + d.value, 0);
+  if (total === 0) return null;
+
+  const cx = 60, cy = 60, r = 50;
+  let cumulative = 0;
+  const slices = data.map((d, i) => {
+    const startAngle = (cumulative / total) * 2 * Math.PI - Math.PI / 2;
+    cumulative += d.value;
+    const endAngle = (cumulative / total) * 2 * Math.PI - Math.PI / 2;
+    const largeArc = d.value / total > 0.5 ? 1 : 0;
+    const x1 = cx + r * Math.cos(startAngle);
+    const y1 = cy + r * Math.sin(startAngle);
+    const x2 = cx + r * Math.cos(endAngle);
+    const y2 = cy + r * Math.sin(endAngle);
+    return (
+      <path
+        key={i}
+        d={`M${cx},${cy} L${x1},${y1} A${r},${r} 0 ${largeArc},1 ${x2},${y2} Z`}
+        fill={CHART_COLORS[i % CHART_COLORS.length]}
+      />
+    );
+  });
+
+  return (
+    <svg viewBox="0 0 120 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      {slices}
+    </svg>
+  );
+}
+
 export function TemplateCard({
   id,
   name,
   description,
   html,
+  componentType,
+  componentData,
   dataDescription,
   version,
   onApply,
@@ -26,19 +103,31 @@ export function TemplateCard({
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [previewReady, setPreviewReady] = useState(false);
 
-  useEffect(() => {
-    if (!iframeRef.current || !html) return;
-    const doc = `<!DOCTYPE html>
+  const previewHtml = html ? `<!DOCTYPE html>
 <html><head><meta charset="utf-8">
 <style>
+${THEME_CSS}
 * { box-sizing: border-box; margin: 0; }
-body { font-family: system-ui, sans-serif; font-size: 16px; color: #1a1a1a; background: #fff; transform-origin: top left; overflow: hidden; }
-@media (prefers-color-scheme: dark) { body { color: #e8e6de; background: #1a1a18; } }
-</style></head><body><div id="content">${html}</div></body></html>`;
-    iframeRef.current.srcdoc = doc;
-    const timer = setTimeout(() => setPreviewReady(true), 500);
-    return () => clearTimeout(timer);
-  }, [html]);
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 16px;
+  line-height: 1.7;
+  color: var(--color-text-primary);
+  background: var(--color-background-primary);
+  overflow: hidden;
+}
+</style></head><body><div id="content">${html}</div></body></html>` : "";
+
+  useEffect(() => {
+    if (!iframeRef.current || !previewHtml) return;
+    iframeRef.current.srcdoc = previewHtml;
+  }, [previewHtml]);
+
+  // Determine chart data for mini preview
+  const chartData = componentData?.data as { label: string; value: number }[] | undefined;
+  const isBarChart = componentType === "barChart";
+  const isPieChart = componentType === "pieChart";
+  const isChart = isBarChart || isPieChart;
 
   return (
     <div
@@ -53,18 +142,34 @@ body { font-family: system-ui, sans-serif; font-size: 16px; color: #1a1a1a; back
         className="relative overflow-hidden"
         style={{ height: 140, background: "var(--color-background-secondary, #f7f6f3)" }}
       >
-        <iframe
-          ref={iframeRef}
-          sandbox="allow-same-origin"
-          className="border-0 w-[300%] h-[300%] origin-top-left"
-          style={{
-            transform: "scale(0.333)",
-            pointerEvents: "none",
-            opacity: previewReady ? 1 : 0,
-            transition: "opacity 300ms",
-          }}
-          title={`Preview: ${name}`}
-        />
+        {isChart && chartData ? (
+          <div className="flex items-center justify-center h-full">
+            {isBarChart && <BarChartPreview data={chartData} />}
+            {isPieChart && <PieChartPreview data={chartData} />}
+          </div>
+        ) : html ? (
+          <iframe
+            ref={iframeRef}
+            sandbox="allow-same-origin allow-scripts"
+            onLoad={() => setPreviewReady(true)}
+            className="border-0 w-[300%] h-[300%] origin-top-left"
+            style={{
+              transform: "scale(0.333)",
+              pointerEvents: "none",
+              opacity: previewReady ? 1 : 0,
+              transition: "opacity 300ms",
+            }}
+            title={`Preview: ${name}`}
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full">
+            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ color: "var(--text-tertiary, #999)", opacity: 0.5 }}>
+              <rect x="3" y="3" width="18" height="18" rx="2" />
+              <path d="M3 9h18" />
+              <path d="M9 21V9" />
+            </svg>
+          </div>
+        )}
         {/* Version badge */}
         <span
           className="absolute top-2 right-2 text-[10px] font-semibold px-1.5 py-0.5 rounded-full"
@@ -102,9 +207,7 @@ body { font-family: system-ui, sans-serif; font-size: 16px; color: #1a1a1a; back
       </div>
 
       {/* Actions */}
-      <div
-        className="flex gap-2 p-3 pt-0"
-      >
+      <div className="flex gap-2 p-3 pt-0">
         <button
           onClick={() => onApply(id)}
           className="flex-1 text-xs font-medium py-1.5 rounded-lg transition-all duration-150 hover:scale-[1.02] text-white"

From 6cfd28cdab50cf37ad6e0089f468ff5a32b4825d Mon Sep 17 00:00:00 2001
From: davidpanonce-nx <devidpanonce@gmail.com>
Date: Tue, 24 Mar 2026 00:26:50 +0800
Subject: [PATCH 07/16] feat(templates): improve apply flow with ID-based
 lookup and chat submission

Submit template apply through CopilotChat textarea so components render
properly. Include template ID in the message for reliable lookup.
Update apply_template tool to support both name and ID-based lookup.
Improve agent prompt to copy original HTML and replace data values.
---
 apps/agent/main.py                            | 23 +++++----
 apps/agent/src/templates.py                   | 36 +++++++++++---
 .../src/components/template-library/index.tsx | 48 ++++++++++++++-----
 3 files changed, 80 insertions(+), 27 deletions(-)

diff --git a/apps/agent/main.py b/apps/agent/main.py
index 004d8da..e0c286e 100644
--- a/apps/agent/main.py
+++ b/apps/agent/main.py
@@ -51,15 +51,20 @@
 
         ## UI Templates
 
-        Users can save generated UIs as reusable templates and apply them later:
-
-        - When a user asks to save a widget as a template, call `save_template` with the
-          widget's HTML, a short name, description, and a description of the data shape.
-        - When a user asks to apply a template, first call `list_templates` to find the
-          right one, then call `apply_template` to get its HTML. Adapt the HTML with the
-          user's new data and render via `widgetRenderer`.
-        - When a user asks to see their templates, call `list_templates`.
-        - When a user asks to delete a template, call `delete_template`.
+        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:**
+        The message includes the template name and ID in the format: "template name" (template-id)
+        1. Call `apply_template(template_id="...")` with the ID from the message
+        2. Take the returned HTML and COPY IT EXACTLY, only replacing the data values
+           (names, numbers, dates, labels, amounts) to match the user's new data
+        3. Render the modified HTML using `widgetRenderer`
+
+        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/templates.py b/apps/agent/src/templates.py
index 48f4eb9..b937483 100644
--- a/apps/agent/src/templates.py
+++ b/apps/agent/src/templates.py
@@ -77,24 +77,46 @@ def list_templates(runtime: ToolRuntime):
 
 
 @tool
-def apply_template(template_id: str, runtime: ToolRuntime):
+def apply_template(name: str = "", template_id: str = "", runtime: ToolRuntime = None):
     """
     Retrieve a saved template's HTML so you can adapt it with new data.
-    After calling this, modify the HTML to fit the user's new data and render it via widgetRenderer.
+    After calling this, generate a NEW widget in the same style and render via widgetRenderer.
+
+    You can look up by name or ID. If both are provided, ID takes priority.
+    When multiple templates share the same name, returns the most recently created one.
 
     Args:
-        template_id: The ID of the template to apply
+        name: The name of the template to apply (e.g. "Invoice")
+        template_id: The ID of the template to apply (optional)
     """
     templates = runtime.state.get("templates", [])
-    for t in templates:
-        if t["id"] == template_id:
+
+    # Look up by ID first
+    if template_id:
+        for t in templates:
+            if t["id"] == template_id:
+                return {
+                    "name": t["name"],
+                    "description": t["description"],
+                    "html": t["html"],
+                    "data_description": t.get("data_description", ""),
+                }
+        return {"error": f"Template with id '{template_id}' not found"}
+
+    # Look up by name (most recent match)
+    if name:
+        matches = [t for t in templates if t["name"].lower() == name.lower()]
+        if matches:
+            t = max(matches, key=lambda x: x.get("created_at", ""))
             return {
                 "name": t["name"],
                 "description": t["description"],
                 "html": t["html"],
-                "data_description": t["data_description"],
+                "data_description": t.get("data_description", ""),
             }
-    return {"error": f"Template with id '{template_id}' not found"}
+        return {"error": f"No template named '{name}' found"}
+
+    return {"error": "Provide either a name or template_id"}
 
 
 @tool
diff --git a/apps/app/src/components/template-library/index.tsx b/apps/app/src/components/template-library/index.tsx
index 14feda3..ccc9b17 100644
--- a/apps/app/src/components/template-library/index.tsx
+++ b/apps/app/src/components/template-library/index.tsx
@@ -1,13 +1,31 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { useAgent } from "@copilotkit/react-core/v2";
 import { TemplateCard } from "./template-card";
 
+/** Submit a message through the CopilotChat textarea so it goes through the full rendering pipeline */
+function submitChatPrompt(text: string) {
+  const textarea = document.querySelector<HTMLTextAreaElement>(
+    '[data-testid="copilot-chat-textarea"]'
+  );
+  if (!textarea) return;
+
+  const setter = Object.getOwnPropertyDescriptor(
+    window.HTMLTextAreaElement.prototype, "value"
+  )?.set;
+  setter?.call(textarea, text);
+  textarea.dispatchEvent(new Event("input", { bubbles: true }));
+
+  setTimeout(() => {
+    const form = textarea.closest("form");
+    if (form) form.requestSubmit();
+  }, 150);
+}
+
 interface TemplateLibraryProps {
   open: boolean;
   onClose: () => void;
-  onSendPrompt: (text: string) => void;
 }
 
 interface Template {
@@ -16,10 +34,11 @@ interface Template {
   description: string;
   html: string;
   data_description: string;
+  component_type?: string;
   version: number;
 }
 
-export function TemplateLibrary({ open, onClose, onSendPrompt }: TemplateLibraryProps) {
+export function TemplateLibrary({ open, onClose }: TemplateLibraryProps) {
   const { agent } = useAgent();
   const templates: Template[] = agent.state?.templates || [];
 
@@ -35,21 +54,26 @@ export function TemplateLibrary({ open, onClose, onSendPrompt }: TemplateLibrary
     }
   };
 
-  const handleApplyConfirm = () => {
+  const handleApplyConfirm = useCallback(() => {
     if (!applyingTemplate) return;
     const dataDesc = applyData.trim();
     if (!dataDesc) return;
 
-    // Send the template HTML directly in the prompt so the agent doesn't
-    // need to look it up from state (frontend setState may not sync to backend)
-    onSendPrompt(
-      `Use this saved template called "${applyingTemplate.name}" as a base layout and adapt it for the following new data: ${dataDesc}\n\n` +
-      `Here is the template HTML to adapt:\n\n${applyingTemplate.html}`
-    );
+    const isChart =
+      applyingTemplate.component_type === "barChart" ||
+      applyingTemplate.component_type === "pieChart";
+
+    const chartType = applyingTemplate.component_type === "pieChart" ? "pie chart" : "bar chart";
+    const message = isChart
+      ? `Apply ${chartType} template "${applyingTemplate.name}" (${applyingTemplate.id}) with: ${dataDesc}`
+      : `Apply template "${applyingTemplate.name}" (${applyingTemplate.id}) with: ${dataDesc}`;
+
+    submitChatPrompt(message);
+
     setApplyingTemplate(null);
     setApplyData("");
     onClose();
-  };
+  }, [applyingTemplate, applyData, onClose]);
 
   const handleApplyCancel = () => {
     setApplyingTemplate(null);
@@ -153,6 +177,8 @@ export function TemplateLibrary({ open, onClose, onSendPrompt }: TemplateLibrary
                   name={t.name}
                   description={t.description}
                   html={t.html}
+                  componentType={(t as unknown as Record<string, unknown>).component_type as string | undefined}
+                  componentData={(t as unknown as Record<string, unknown>).component_data as Record<string, unknown> | undefined}
                   dataDescription={t.data_description}
                   version={t.version}
                   onApply={handleApplyClick}

From e2c41375d5b66567e5fb994cd6122c1f89f5bf14 Mon Sep 17 00:00:00 2001
From: davidpanonce-nx <devidpanonce@gmail.com>
Date: Tue, 24 Mar 2026 00:26:59 +0800
Subject: [PATCH 08/16] refactor(app): remove dead template save relay from
 page component

Remove saveTemplate callback, postMessage handler, and unused useAgent
import from page.tsx. Template saving now happens directly in the
SaveTemplateOverlay component via useAgent().
---
 apps/app/src/app/page.tsx | 42 +++------------------------------------
 1 file changed, 3 insertions(+), 39 deletions(-)

diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index df8f6d6..70d9eae 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -1,65 +1,30 @@
 "use client";
 
-import { useEffect, useState, useCallback } 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 { TemplateLibrary } from "@/components/template-library";
 
 import { CopilotChat } from "@copilotkit/react-core/v2";
-import { useAgent } from "@copilotkit/react-core/v2";
 
 export default function HomePage() {
   useGenerativeUIExamples();
   useExampleSuggestions();
 
-  const { agent } = useAgent();
   const [templateDrawerOpen, setTemplateDrawerOpen] = useState(false);
 
-  // Save a template directly to agent state — no chat round-trip
-  const saveTemplate = useCallback((data: {
-    name: string;
-    title: string;
-    description: string;
-    html: string;
-  }) => {
-    const templates = agent.state?.templates || [];
-    const newTemplate = {
-      id: crypto.randomUUID(),
-      name: data.name || data.title || "Untitled Template",
-      description: data.description || data.title || "",
-      html: data.html,
-      data_description: "",
-      created_at: new Date().toISOString(),
-      version: 1,
-    };
-    agent.setState({ templates: [...templates, newTemplate] });
-  }, [agent]);
-
-  // Send a prompt via the agent API — adds a user message and triggers a run
-  const sendPrompt = useCallback((text: string) => {
-    agent.addMessage({
-      id: crypto.randomUUID(),
-      role: "user",
-      content: text,
-    });
-    agent.runAgent();
-  }, [agent]);
-
   // Widget bridge: handle messages from widget iframes
   useEffect(() => {
     const handler = (e: MessageEvent) => {
       if (e.data?.type === "open-link" && typeof e.data.url === "string") {
         window.open(e.data.url, "_blank", "noopener,noreferrer");
       }
-      // Handle save-as-template from WidgetRenderer — save directly to state
-      if (e.data?.type === "save-as-template") {
-        saveTemplate(e.data);
-      }
     };
     window.addEventListener("message", handler);
     return () => window.removeEventListener("message", handler);
-  }, [saveTemplate]);
+  }, []);
+
 
   return (
     <>
@@ -147,7 +112,6 @@ export default function HomePage() {
       <TemplateLibrary
         open={templateDrawerOpen}
         onClose={() => setTemplateDrawerOpen(false)}
-        onSendPrompt={sendPrompt}
       />
     </>
   );

From 7d4e6a26230c2c2daa2b25f578eb9392298e369e Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Mon, 23 Mar 2026 14:34:07 -0700
Subject: [PATCH 09/16] Fix PR review: security, lint errors, and schema
 alignment

- Prevent XSS via postMessage: validate e.source, strip scripts before
  innerHTML, only execute new scripts via data-exec tracking
- Remove allow-same-origin from widget and preview iframe sandboxes
- Fix all lint errors: refactor useEffect setState to adjust-state-during-render
  pattern, replace cumulative mutation with reduce() pre-computation
- Unify template schema: add component_type/component_data to backend
  UITemplate, remove unsafe casts in frontend
- Add console.warn fallback to submitChatPrompt when textarea not found
- Remove apply_template runtime=None default to match other tool signatures
- Remove trivial assembleDocument() pass-through
---
 apps/agent/src/templates.py                   |  8 +-
 .../generative-ui/widget-renderer.tsx         | 84 ++++++++++---------
 .../src/components/template-library/index.tsx | 10 ++-
 .../template-library/template-card.tsx        | 12 +--
 4 files changed, 63 insertions(+), 51 deletions(-)

diff --git a/apps/agent/src/templates.py b/apps/agent/src/templates.py
index b937483..84781fc 100644
--- a/apps/agent/src/templates.py
+++ b/apps/agent/src/templates.py
@@ -1,12 +1,12 @@
 from langchain.tools import ToolRuntime, tool
 from langchain.messages import ToolMessage
 from langgraph.types import Command
-from typing import TypedDict
+from typing import Any, Optional, TypedDict
 import uuid
 from datetime import datetime
 
 
-class UITemplate(TypedDict):
+class UITemplate(TypedDict, total=False):
     id: str
     name: str
     description: str
@@ -14,6 +14,8 @@ class UITemplate(TypedDict):
     data_description: str
     created_at: str
     version: int
+    component_type: Optional[str]
+    component_data: Optional[dict[str, Any]]
 
 
 @tool
@@ -77,7 +79,7 @@ def list_templates(runtime: ToolRuntime):
 
 
 @tool
-def apply_template(name: str = "", template_id: str = "", runtime: ToolRuntime = None):
+def apply_template(name: str = "", template_id: str = "", runtime: ToolRuntime):
     """
     Retrieve a saved template's HTML so you can adapt it with new data.
     After calling this, generate a NEW widget in the same style and render via widgetRenderer.
diff --git a/apps/app/src/components/generative-ui/widget-renderer.tsx b/apps/app/src/components/generative-ui/widget-renderer.tsx
index c18faf8..e242600 100644
--- a/apps/app/src/components/generative-ui/widget-renderer.tsx
+++ b/apps/app/src/components/generative-ui/widget-renderer.tsx
@@ -349,20 +349,32 @@ document.addEventListener('click', function(e) {
 
 // Listen for streaming content updates from parent
 window.addEventListener('message', function(e) {
+  if (e.source !== window.parent) return;
   if (e.data && e.data.type === 'update-content') {
     var content = document.getElementById('content');
     if (content) {
-      content.innerHTML = e.data.html;
-      // Re-run any inline scripts (new ones added by streaming)
-      var scripts = content.querySelectorAll('script');
-      scripts.forEach(function(oldScript) {
+      // Strip script tags from HTML before inserting — scripts are handled separately below
+      var tmp = document.createElement('div');
+      tmp.innerHTML = e.data.html;
+      var incomingScripts = [];
+      tmp.querySelectorAll('script').forEach(function(s) {
+        incomingScripts.push({ src: s.src, text: s.textContent });
+        s.remove();
+      });
+      content.innerHTML = tmp.innerHTML;
+
+      // Execute only new scripts (not previously executed)
+      incomingScripts.forEach(function(scriptInfo) {
+        var key = scriptInfo.src || scriptInfo.text;
+        if (content.getAttribute('data-exec-' + btoa(key).slice(0, 16))) return;
+        content.setAttribute('data-exec-' + btoa(key).slice(0, 16), '1');
         var newScript = document.createElement('script');
-        if (oldScript.src) {
-          newScript.src = oldScript.src;
+        if (scriptInfo.src) {
+          newScript.src = scriptInfo.src;
         } else {
-          newScript.textContent = oldScript.textContent;
+          newScript.textContent = scriptInfo.text;
         }
-        oldScript.parentNode.replaceChild(newScript, oldScript);
+        content.appendChild(newScript);
       });
       reportHeight();
     }
@@ -384,11 +396,6 @@ setTimeout(function() { clearInterval(_resizeInterval); }, 15000);
 `;
 
 // ─── Document Assembly ───────────────────────────────────────────────
-/** Full document with content — used for final/complete renders */
-function assembleDocument(html: string): string {
-  return assembleShell(html);
-}
-
 /** Empty shell or shell with initial content — iframe loads once, content streamed via postMessage */
 function assembleShell(initialHtml: string = ""): string {
   return `<!DOCTYPE html>
@@ -440,7 +447,6 @@ function useLoadingPhrase(active: boolean) {
   const [index, setIndex] = useState(0);
   useEffect(() => {
     if (!active) return;
-    setIndex(0);
     const interval = setInterval(() => {
       setIndex((i) => (i + 1) % LOADING_PHRASES.length);
     }, 1800);
@@ -459,11 +465,12 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
   const shellReadyRef = useRef(false);
   // Track the last html sent to the iframe to avoid redundant updates
   const committedHtmlRef = useRef("");
-  // Whether streaming has started (html is arriving but may not be complete)
-  const [streaming, setStreaming] = useState(false);
   // Tracks whether html content has settled (stopped changing)
   const [htmlSettled, setHtmlSettled] = useState(false);
+  const [prevHtml, setPrevHtml] = useState(html);
   const settledTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const fadeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [fadingOut, setFadingOut] = useState(false);
 
   const handleMessage = useCallback((e: MessageEvent) => {
     // Only handle messages from our own iframe
@@ -482,6 +489,13 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
     return () => window.removeEventListener("message", handleMessage);
   }, [handleMessage]);
 
+  // Reset settled/fade state when html changes (adjust state during render)
+  if (html !== prevHtml) {
+    setPrevHtml(html);
+    setHtmlSettled(false);
+    setFadingOut(false);
+  }
+
   // Initialize the iframe shell once when html first appears.
   // After that, stream content updates via postMessage — no iframe reload.
   useEffect(() => {
@@ -492,7 +506,6 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
       shellReadyRef.current = true;
       committedHtmlRef.current = html;
       iframeRef.current.srcdoc = assembleShell(html);
-      setStreaming(true);
       return;
     }
 
@@ -512,15 +525,19 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
   // Detect when html has stopped changing (streaming complete).
   // Resets a debounce timer on every html update — settles after 800ms of no changes.
   useEffect(() => {
-    if (!html) {
-      setHtmlSettled(false);
-      return;
-    }
-    setHtmlSettled(false);
+    if (!html) return;
     if (settledTimerRef.current) clearTimeout(settledTimerRef.current);
-    settledTimerRef.current = setTimeout(() => setHtmlSettled(true), 800);
+    if (fadeTimerRef.current) clearTimeout(fadeTimerRef.current);
+    settledTimerRef.current = setTimeout(() => {
+      setHtmlSettled(true);
+      setFadingOut(true);
+      fadeTimerRef.current = setTimeout(() => {
+        setFadingOut(false);
+      }, 600);
+    }, 800);
     return () => {
       if (settledTimerRef.current) clearTimeout(settledTimerRef.current);
+      if (fadeTimerRef.current) clearTimeout(fadeTimerRef.current);
     };
   }, [html]);
 
@@ -534,25 +551,12 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
     return () => clearTimeout(timeout);
   }, [html, loaded, height]);
 
-  // Content is "complete" when iframe has loaded and reported a valid height
-  const ready = loaded && height > 0;
-  // Show the iframe (even partially) as soon as we have content streaming
-  const showIframe = !!html && (streaming || ready);
+  // Show the iframe as soon as we have html (shell initializes on first html)
+  const showIframe = !!html;
   // Streaming is active until html has stopped changing
   const isStreaming = !!html && !htmlSettled;
   const loadingPhrase = useLoadingPhrase(isStreaming);
-
-  // Keep the streaming indicator mounted long enough to fade out
-  const [showStreamingIndicator, setShowStreamingIndicator] = useState(false);
-  useEffect(() => {
-    if (isStreaming) {
-      setShowStreamingIndicator(true);
-    } else if (showStreamingIndicator) {
-      // Keep mounted for fade-out, then unmount
-      const timeout = setTimeout(() => setShowStreamingIndicator(false), 600);
-      return () => clearTimeout(timeout);
-    }
-  }, [isStreaming, showStreamingIndicator]);
+  const showStreamingIndicator = isStreaming || fadingOut;
 
   return (
     <div className="w-full my-3">
@@ -599,7 +603,7 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
             content streamed via postMessage for progressive rendering. */}
         <iframe
           ref={iframeRef}
-          sandbox="allow-scripts allow-same-origin"
+          sandbox="allow-scripts"
           className="w-full border-0"
           onLoad={() => setLoaded(true)}
           style={{
diff --git a/apps/app/src/components/template-library/index.tsx b/apps/app/src/components/template-library/index.tsx
index ccc9b17..a1052e8 100644
--- a/apps/app/src/components/template-library/index.tsx
+++ b/apps/app/src/components/template-library/index.tsx
@@ -9,7 +9,10 @@ function submitChatPrompt(text: string) {
   const textarea = document.querySelector<HTMLTextAreaElement>(
     '[data-testid="copilot-chat-textarea"]'
   );
-  if (!textarea) return;
+  if (!textarea) {
+    console.warn("submitChatPrompt: CopilotChat textarea not found — template apply message was not sent.");
+    return;
+  }
 
   const setter = Object.getOwnPropertyDescriptor(
     window.HTMLTextAreaElement.prototype, "value"
@@ -35,6 +38,7 @@ interface Template {
   html: string;
   data_description: string;
   component_type?: string;
+  component_data?: Record<string, unknown>;
   version: number;
 }
 
@@ -177,8 +181,8 @@ export function TemplateLibrary({ open, onClose }: TemplateLibraryProps) {
                   name={t.name}
                   description={t.description}
                   html={t.html}
-                  componentType={(t as unknown as Record<string, unknown>).component_type as string | undefined}
-                  componentData={(t as unknown as Record<string, unknown>).component_data as Record<string, unknown> | undefined}
+                  componentType={t.component_type}
+                  componentData={t.component_data}
                   dataDescription={t.data_description}
                   version={t.version}
                   onApply={handleApplyClick}
diff --git a/apps/app/src/components/template-library/template-card.tsx b/apps/app/src/components/template-library/template-card.tsx
index fe774fa..eef53d0 100644
--- a/apps/app/src/components/template-library/template-card.tsx
+++ b/apps/app/src/components/template-library/template-card.tsx
@@ -62,11 +62,13 @@ function PieChartPreview({ data }: { data: { label: string; value: number }[] })
   if (total === 0) return null;
 
   const cx = 60, cy = 60, r = 50;
-  let cumulative = 0;
+  const cumulativeAngles = data.reduce<number[]>((acc, d) => {
+    acc.push((acc[acc.length - 1] ?? 0) + d.value);
+    return acc;
+  }, []);
   const slices = data.map((d, i) => {
-    const startAngle = (cumulative / total) * 2 * Math.PI - Math.PI / 2;
-    cumulative += d.value;
-    const endAngle = (cumulative / total) * 2 * Math.PI - Math.PI / 2;
+    const startAngle = ((cumulativeAngles[i] - d.value) / total) * 2 * Math.PI - Math.PI / 2;
+    const endAngle = (cumulativeAngles[i] / total) * 2 * Math.PI - Math.PI / 2;
     const largeArc = d.value / total > 0.5 ? 1 : 0;
     const x1 = cx + r * Math.cos(startAngle);
     const y1 = cy + r * Math.sin(startAngle);
@@ -150,7 +152,7 @@ body {
         ) : html ? (
           <iframe
             ref={iframeRef}
-            sandbox="allow-same-origin allow-scripts"
+            sandbox="allow-scripts"
             onLoad={() => setPreviewReady(true)}
             className="border-0 w-[300%] h-[300%] origin-top-left"
             style={{

From ec19dfc7a8b87c886bc72e3d54f973669f98dc0e Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Mon, 23 Mar 2026 14:38:46 -0700
Subject: [PATCH 10/16] Restore apply_template runtime default (required by
 Python syntax)

Python requires that parameters with defaults precede those without.
Since name and template_id have defaults, runtime must too.
---
 apps/agent/src/templates.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/agent/src/templates.py b/apps/agent/src/templates.py
index 84781fc..6ac37e4 100644
--- a/apps/agent/src/templates.py
+++ b/apps/agent/src/templates.py
@@ -79,7 +79,7 @@ def list_templates(runtime: ToolRuntime):
 
 
 @tool
-def apply_template(name: str = "", template_id: str = "", runtime: ToolRuntime):
+def apply_template(name: str = "", template_id: str = "", runtime: ToolRuntime = None):
     """
     Retrieve a saved template's HTML so you can adapt it with new data.
     After calling this, generate a NEW widget in the same style and render via widgetRenderer.

From 90945cc3408de3d2efd4fb5d08809fc68e5309cd Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Mon, 23 Mar 2026 14:50:19 -0700
Subject: [PATCH 11/16] Fix widget not rendering when initial HTML has unclosed
 tags

Load the iframe shell empty and stream all content via postMessage
after the iframe loads. Previously, partial streaming fragments
(e.g. an unclosed <style> tag) inserted into the shell would consume
the bridge script, preventing all subsequent postMessage updates.
---
 .../components/generative-ui/widget-renderer.tsx   | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/app/src/components/generative-ui/widget-renderer.tsx b/apps/app/src/components/generative-ui/widget-renderer.tsx
index e242600..3aa17fd 100644
--- a/apps/app/src/components/generative-ui/widget-renderer.tsx
+++ b/apps/app/src/components/generative-ui/widget-renderer.tsx
@@ -497,19 +497,21 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
   }
 
   // Initialize the iframe shell once when html first appears.
-  // After that, stream content updates via postMessage — no iframe reload.
+  // Shell loads EMPTY so partial streaming fragments (e.g. unclosed <style>)
+  // can't break the bridge script. All content is streamed via postMessage.
   useEffect(() => {
     if (!html || !iframeRef.current) return;
 
     if (!shellReadyRef.current) {
-      // First time: load the full document so the shell (styles, bridge JS) is ready
       shellReadyRef.current = true;
-      committedHtmlRef.current = html;
-      iframeRef.current.srcdoc = assembleShell(html);
+      iframeRef.current.srcdoc = assembleShell();
       return;
     }
 
-    // Subsequent updates: stream content into existing iframe via postMessage
+    // Wait for iframe to load before sending postMessage
+    if (!loaded) return;
+
+    // Stream content into existing iframe via postMessage
     if (html === committedHtmlRef.current) return;
     committedHtmlRef.current = html;
 
@@ -520,7 +522,7 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
         "*"
       );
     }
-  }, [html]);
+  }, [html, loaded]);
 
   // Detect when html has stopped changing (streaming complete).
   // Resets a debounce timer on every html update — settles after 800ms of no changes.

From 5dd6191fe421329ca0bd4ad53e36620807d3fd73 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Tue, 24 Mar 2026 05:27:18 -0700
Subject: [PATCH 12/16] feat(templates): inline template chip in chat input and
 fix state loss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pass template context via agent state (pending_template) instead of
embedding the template ID in the chat message text. The user's message
stays clean — just their data description — while a dismissible chip
renders inline inside the CopilotChat input pill.

- Add PendingTemplate type and pending_template field to AgentState
- Add clear_pending_template tool for agent to reset after applying
- Update system prompt to read pending_template from state
- Create TemplateChip portal component that injects into textarea column
- Spread full agent.state on all setState calls to prevent field loss
- Add chipIn keyframe animation
---
 apps/agent/main.py                            |  11 +-
 apps/agent/src/templates.py                   |  18 +++
 apps/agent/src/todos.py                       |   7 +-
 apps/app/src/app/globals.css                  |   5 +
 apps/app/src/app/page.tsx                     |   4 +
 .../generative-ui/save-template-overlay.tsx   |   2 +-
 .../src/components/template-library/index.tsx |  20 ++--
 .../template-library/template-chip.tsx        | 107 ++++++++++++++++++
 8 files changed, 159 insertions(+), 15 deletions(-)
 create mode 100644 apps/app/src/components/template-library/template-chip.tsx

diff --git a/apps/agent/main.py b/apps/agent/main.py
index e0c286e..62245c1 100644
--- a/apps/agent/main.py
+++ b/apps/agent/main.py
@@ -55,11 +55,16 @@
         You have backend tools: `save_template`, `list_templates`, `apply_template`, `delete_template`.
 
         **When a user asks to apply/recreate a template with new data:**
-        The message includes the template name and ID in the format: "template name" (template-id)
-        1. Call `apply_template(template_id="...")` with the ID from the message
+        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 new data
+           (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.
diff --git a/apps/agent/src/templates.py b/apps/agent/src/templates.py
index 6ac37e4..4788223 100644
--- a/apps/agent/src/templates.py
+++ b/apps/agent/src/templates.py
@@ -154,9 +154,27 @@ def delete_template(template_id: str, runtime: ToolRuntime) -> Command:
     })
 
 
+@tool
+def clear_pending_template(runtime: ToolRuntime) -> Command:
+    """
+    Clear the pending_template from state after applying it.
+    Call this after you have finished applying a template.
+    """
+    return Command(update={
+        "pending_template": None,
+        "messages": [
+            ToolMessage(
+                content="Pending template cleared",
+                tool_call_id=runtime.tool_call_id,
+            )
+        ],
+    })
+
+
 template_tools = [
     save_template,
     list_templates,
     apply_template,
     delete_template,
+    clear_pending_template,
 ]
diff --git a/apps/agent/src/todos.py b/apps/agent/src/todos.py
index ce1f731..2d934b5 100644
--- a/apps/agent/src/todos.py
+++ b/apps/agent/src/todos.py
@@ -2,7 +2,7 @@
 from langchain.tools import ToolRuntime, tool
 from langchain.messages import ToolMessage
 from langgraph.types import Command
-from typing import TypedDict, Literal
+from typing import Optional, TypedDict, Literal
 import uuid
 
 from src.templates import UITemplate
@@ -14,9 +14,14 @@ 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/globals.css b/apps/app/src/app/globals.css
index 75d41c6..7c6d573 100644
--- a/apps/app/src/app/globals.css
+++ b/apps/app/src/app/globals.css
@@ -637,3 +637,8 @@ body, html {
   from { transform: translateY(-4px) scale(0.97); opacity: 0; }
   to   { transform: translateY(0) scale(1); opacity: 1; }
 }
+
+@keyframes chipIn {
+  from { transform: scale(0.9); opacity: 0; }
+  to   { transform: scale(1); opacity: 1; }
+}
diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index 70d9eae..5f52618 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -5,6 +5,7 @@ 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";
 
@@ -108,6 +109,9 @@ export default function HomePage() {
         </div>
       </div>
 
+      {/* Template chip — portal renders above chat input */}
+      <TemplateChip />
+
       {/* Template Library Drawer */}
       <TemplateLibrary
         open={templateDrawerOpen}
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 f201316..324ade4 100644
--- a/apps/app/src/components/generative-ui/save-template-overlay.tsx
+++ b/apps/app/src/components/generative-ui/save-template-overlay.tsx
@@ -50,7 +50,7 @@ export function SaveTemplateOverlay({
       created_at: new Date().toISOString(),
       version: 1,
     };
-    agent.setState({ templates: [...templates, newTemplate] });
+    agent.setState({ ...agent.state, templates: [...templates, newTemplate] });
 
     setTemplateName("");
     setTimeout(() => {
diff --git a/apps/app/src/components/template-library/index.tsx b/apps/app/src/components/template-library/index.tsx
index a1052e8..cf62174 100644
--- a/apps/app/src/components/template-library/index.tsx
+++ b/apps/app/src/components/template-library/index.tsx
@@ -63,21 +63,20 @@ export function TemplateLibrary({ open, onClose }: TemplateLibraryProps) {
     const dataDesc = applyData.trim();
     if (!dataDesc) return;
 
-    const isChart =
-      applyingTemplate.component_type === "barChart" ||
-      applyingTemplate.component_type === "pieChart";
-
-    const chartType = applyingTemplate.component_type === "pieChart" ? "pie chart" : "bar chart";
-    const message = isChart
-      ? `Apply ${chartType} template "${applyingTemplate.name}" (${applyingTemplate.id}) with: ${dataDesc}`
-      : `Apply template "${applyingTemplate.name}" (${applyingTemplate.id}) with: ${dataDesc}`;
+    // Set pending_template in agent state so the agent knows which template to apply.
+    // Spread full state to guard against replace-style setState.
+    agent.setState({
+      ...agent.state,
+      pending_template: { id: applyingTemplate.id, name: applyingTemplate.name },
+    });
 
-    submitChatPrompt(message);
+    // Send only the user's data description — no template ID in the message
+    submitChatPrompt(dataDesc);
 
     setApplyingTemplate(null);
     setApplyData("");
     onClose();
-  }, [applyingTemplate, applyData, onClose]);
+  }, [agent, applyingTemplate, applyData, onClose]);
 
   const handleApplyCancel = () => {
     setApplyingTemplate(null);
@@ -86,6 +85,7 @@ export function TemplateLibrary({ open, onClose }: TemplateLibraryProps) {
 
   const handleDelete = (id: string) => {
     agent.setState({
+      ...agent.state,
       templates: templates.filter((t) => t.id !== id),
     });
   };
diff --git a/apps/app/src/components/template-library/template-chip.tsx b/apps/app/src/components/template-library/template-chip.tsx
new file mode 100644
index 0000000..21efd7b
--- /dev/null
+++ b/apps/app/src/components/template-library/template-chip.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { useAgent } from "@copilotkit/react-core/v2";
+
+/**
+ * Renders a dismissible chip inside the CopilotChat input pill when a template
+ * is attached (pending_template is set in agent state). Uses a portal to insert
+ * itself inside the textarea's column container.
+ */
+export function TemplateChip() {
+  const { agent } = useAgent();
+  const pending = agent.state?.pending_template as
+    | { id: string; name: string }
+    | null
+    | undefined;
+
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!pending?.name) {
+      // Clean up existing container
+      document.querySelector("[data-template-chip]")?.remove();
+      setContainer(null);
+      return;
+    }
+
+    const textarea = document.querySelector<HTMLElement>(
+      '[data-testid="copilot-chat-textarea"]'
+    );
+    // The textarea sits inside a column div inside the grid
+    const textareaColumn = textarea?.parentElement;
+    if (!textareaColumn) {
+      setContainer(null);
+      return;
+    }
+
+    // Reuse existing or create chip container
+    let el = textareaColumn.querySelector<HTMLElement>("[data-template-chip]");
+    if (!el) {
+      el = document.createElement("div");
+      el.setAttribute("data-template-chip", "");
+      el.style.cssText = "display: flex; padding: 4px 0 0 0;";
+      textareaColumn.insertBefore(el, textarea);
+    }
+    setContainer(el);
+  }, [pending?.name]);
+
+  const handleDismiss = useCallback(() => {
+    agent.setState({ ...agent.state, pending_template: null });
+  }, [agent]);
+
+  if (!pending?.name || !container) return null;
+
+  return createPortal(
+    <div
+      className="inline-flex items-center gap-1.5 pl-2 pr-1 py-0.5 rounded-md text-xs font-medium select-none"
+      style={{
+        background:
+          "linear-gradient(135deg, rgba(99,102,241,0.12), rgba(16,185,129,0.12))",
+        border: "1px solid rgba(99,102,241,0.22)",
+        color: "var(--copilot-kit-contrast-color, #1a1a1a)",
+        animation: "chipIn 0.15s ease-out",
+      }}
+    >
+      <svg
+        width="11"
+        height="11"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{ opacity: 0.55, flexShrink: 0 }}
+      >
+        <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
+      </svg>
+      <span className="max-w-[140px] truncate" style={{ lineHeight: "16px" }}>
+        {pending.name}
+      </span>
+      <button
+        onClick={handleDismiss}
+        className="p-0.5 rounded transition-colors duration-100 hover:bg-black/10 dark:hover:bg-white/10"
+        style={{ lineHeight: 0 }}
+        aria-label="Remove template"
+        type="button"
+      >
+        <svg
+          width="11"
+          height="11"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+      </button>
+    </div>,
+    container
+  );
+}

From f54777b7b3fa7d7e3416c1d4850abd785a49ea8f Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Tue, 24 Mar 2026 05:31:00 -0700
Subject: [PATCH 13/16] refactor(templates): simplify apply flow to chip-only

Remove the intermediate "describe your data" popup from the template
drawer. Clicking Apply now sets the chip in the chat input and closes
the drawer immediately, letting the user type naturally.
---
 .../src/components/template-library/index.tsx | 125 ++----------------
 1 file changed, 10 insertions(+), 115 deletions(-)

diff --git a/apps/app/src/components/template-library/index.tsx b/apps/app/src/components/template-library/index.tsx
index cf62174..1b9fbfc 100644
--- a/apps/app/src/components/template-library/index.tsx
+++ b/apps/app/src/components/template-library/index.tsx
@@ -1,31 +1,8 @@
 "use client";
 
-import { useState, useCallback } from "react";
 import { useAgent } from "@copilotkit/react-core/v2";
 import { TemplateCard } from "./template-card";
 
-/** Submit a message through the CopilotChat textarea so it goes through the full rendering pipeline */
-function submitChatPrompt(text: string) {
-  const textarea = document.querySelector<HTMLTextAreaElement>(
-    '[data-testid="copilot-chat-textarea"]'
-  );
-  if (!textarea) {
-    console.warn("submitChatPrompt: CopilotChat textarea not found — template apply message was not sent.");
-    return;
-  }
-
-  const setter = Object.getOwnPropertyDescriptor(
-    window.HTMLTextAreaElement.prototype, "value"
-  )?.set;
-  setter?.call(textarea, text);
-  textarea.dispatchEvent(new Event("input", { bubbles: true }));
-
-  setTimeout(() => {
-    const form = textarea.closest("form");
-    if (form) form.requestSubmit();
-  }, 150);
-}
-
 interface TemplateLibraryProps {
   open: boolean;
   onClose: () => void;
@@ -46,41 +23,24 @@ export function TemplateLibrary({ open, onClose }: TemplateLibraryProps) {
   const { agent } = useAgent();
   const templates: Template[] = agent.state?.templates || [];
 
-  // Apply flow: show input for new data before sending
-  const [applyingTemplate, setApplyingTemplate] = useState<Template | null>(null);
-  const [applyData, setApplyData] = useState("");
-
   const handleApplyClick = (id: string) => {
     const template = templates.find((t) => t.id === id);
-    if (template) {
-      setApplyingTemplate(template);
-      setApplyData("");
-    }
-  };
-
-  const handleApplyConfirm = useCallback(() => {
-    if (!applyingTemplate) return;
-    const dataDesc = applyData.trim();
-    if (!dataDesc) return;
+    if (!template) return;
 
-    // Set pending_template in agent state so the agent knows which template to apply.
-    // Spread full state to guard against replace-style setState.
+    // Attach template as a chip in the chat input — user types their prompt naturally
     agent.setState({
       ...agent.state,
-      pending_template: { id: applyingTemplate.id, name: applyingTemplate.name },
+      pending_template: { id: template.id, name: template.name },
     });
-
-    // Send only the user's data description — no template ID in the message
-    submitChatPrompt(dataDesc);
-
-    setApplyingTemplate(null);
-    setApplyData("");
     onClose();
-  }, [agent, applyingTemplate, applyData, onClose]);
 
-  const handleApplyCancel = () => {
-    setApplyingTemplate(null);
-    setApplyData("");
+    // Focus the chat textarea so user can start typing immediately
+    setTimeout(() => {
+      const textarea = document.querySelector<HTMLTextAreaElement>(
+        '[data-testid="copilot-chat-textarea"]'
+      );
+      textarea?.focus();
+    }, 100);
   };
 
   const handleDelete = (id: string) => {
@@ -193,71 +153,6 @@ export function TemplateLibrary({ open, onClose }: TemplateLibraryProps) {
           )}
         </div>
 
-        {/* Apply data input — slides up from bottom of drawer */}
-        {applyingTemplate && (
-          <div
-            className="shrink-0 px-4 pb-4 pt-3"
-            style={{
-              borderTop: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
-              animation: "tmpl-slideIn 0.2s ease-out",
-            }}
-          >
-            <p
-              className="text-xs font-semibold mb-1"
-              style={{ color: "var(--text-primary, #1a1a1a)" }}
-            >
-              Apply &quot;{applyingTemplate.name}&quot;
-            </p>
-            <p
-              className="text-[11px] mb-2"
-              style={{ color: "var(--text-tertiary, #999)" }}
-            >
-              Describe the new data you want to populate this template with:
-            </p>
-            <textarea
-              value={applyData}
-              onChange={(e) => setApplyData(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && !e.shiftKey) {
-                  e.preventDefault();
-                  handleApplyConfirm();
-                }
-                if (e.key === "Escape") handleApplyCancel();
-              }}
-              autoFocus
-              placeholder='e.g. "$2,400 web design project for Sarah Chen, due April 15"'
-              rows={2}
-              className="w-full text-xs px-3 py-2 rounded-lg outline-none resize-none"
-              style={{
-                background: "var(--color-background-secondary, #f5f5f5)",
-                color: "var(--text-primary, #1a1a1a)",
-                border: "1px solid var(--color-border-tertiary, rgba(0,0,0,0.1))",
-              }}
-            />
-            <div className="flex gap-2 mt-2">
-              <button
-                onClick={handleApplyConfirm}
-                disabled={!applyData.trim()}
-                className="flex-1 text-xs font-medium py-1.5 rounded-lg text-white transition-all duration-150 disabled:opacity-40"
-                style={{
-                  background: "linear-gradient(135deg, var(--color-lilac-dark, #6366f1), var(--color-mint-dark, #10b981))",
-                }}
-              >
-                Apply Template
-              </button>
-              <button
-                onClick={handleApplyCancel}
-                className="text-xs px-3 py-1.5 rounded-lg"
-                style={{
-                  border: "1px solid var(--color-border-tertiary, rgba(0,0,0,0.1))",
-                  color: "var(--text-secondary, #666)",
-                }}
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        )}
       </div>
     </>
   );

From bfd38443a27d5669413caccdfe50c9d47e471a7e Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Tue, 24 Mar 2026 05:34:35 -0700
Subject: [PATCH 14/16] feat(templates): seed 3 built-in templates on first
 load

Add Weather, Invoice Card, and Calculator as pre-built templates that
populate the template library when no templates exist yet. Each has
production-quality HTML using the app's theme variables.
---
 apps/app/src/app/page.tsx                     |   2 +
 .../template-library/seed-templates.ts        | 234 ++++++++++++++++++
 apps/app/src/hooks/use-seed-templates.ts      |  29 +++
 3 files changed, 265 insertions(+)
 create mode 100644 apps/app/src/components/template-library/seed-templates.ts
 create mode 100644 apps/app/src/hooks/use-seed-templates.ts

diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index 5f52618..64172a6 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import { ExampleLayout } from "@/components/example-layout";
 import { useGenerativeUIExamples, useExampleSuggestions } from "@/hooks";
+import { useSeedTemplates } from "@/hooks/use-seed-templates";
 import { ExplainerCardsPortal } from "@/components/explainer-cards";
 import { TemplateLibrary } from "@/components/template-library";
 import { TemplateChip } from "@/components/template-library/template-chip";
@@ -12,6 +13,7 @@ import { CopilotChat } from "@copilotkit/react-core/v2";
 export default function HomePage() {
   useGenerativeUIExamples();
   useExampleSuggestions();
+  useSeedTemplates();
 
   const [templateDrawerOpen, setTemplateDrawerOpen] = useState(false);
 
diff --git a/apps/app/src/components/template-library/seed-templates.ts b/apps/app/src/components/template-library/seed-templates.ts
new file mode 100644
index 0000000..aa3b9f3
--- /dev/null
+++ b/apps/app/src/components/template-library/seed-templates.ts
@@ -0,0 +1,234 @@
+/** Pre-built templates that ship with the app */
+
+export interface SeedTemplate {
+  id: string;
+  name: string;
+  description: string;
+  html: string;
+  data_description: string;
+  created_at: string;
+  version: number;
+}
+
+const weatherHtml = `<style>
+.weather-card {
+  font-family: var(--font-sans);
+  max-width: 380px;
+  border-radius: var(--border-radius-xl);
+  background: var(--color-background-secondary);
+  border: 0.5px solid var(--color-border-tertiary);
+  padding: 24px;
+}
+.weather-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
+.weather-city { font-size: 18px; font-weight: 600; color: var(--color-text-primary); }
+.weather-date { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; }
+.weather-badge {
+  font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 999px;
+  background: var(--color-background-info); color: var(--color-text-info);
+}
+.weather-temp { font-size: 48px; font-weight: 700; color: var(--color-text-primary); line-height: 1; }
+.weather-desc { font-size: 14px; color: var(--color-text-secondary); margin-top: 4px; }
+.weather-details {
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
+  margin-top: 20px; padding-top: 16px;
+  border-top: 0.5px solid var(--color-border-tertiary);
+}
+.weather-detail-label { font-size: 11px; color: var(--color-text-tertiary); }
+.weather-detail-value { font-size: 14px; font-weight: 600; color: var(--color-text-primary); margin-top: 2px; }
+</style>
+<div class="weather-card">
+  <div class="weather-header">
+    <div>
+      <div class="weather-city">New York, NY</div>
+      <div class="weather-date">Tuesday, March 25, 2026</div>
+    </div>
+    <span class="weather-badge">Partly Cloudy</span>
+  </div>
+  <div class="weather-temp">72°F</div>
+  <div class="weather-desc">Partly cloudy with a gentle breeze from the southwest</div>
+  <div class="weather-details">
+    <div>
+      <div class="weather-detail-label">Humidity</div>
+      <div class="weather-detail-value">54%</div>
+    </div>
+    <div>
+      <div class="weather-detail-label">Wind</div>
+      <div class="weather-detail-value">8 mph SW</div>
+    </div>
+    <div>
+      <div class="weather-detail-label">UV Index</div>
+      <div class="weather-detail-value">5 (Moderate)</div>
+    </div>
+  </div>
+</div>`;
+
+const invoiceHtml = `<style>
+.invoice-card {
+  font-family: var(--font-sans);
+  max-width: 420px;
+  border-radius: var(--border-radius-xl);
+  background: var(--color-background-secondary);
+  border: 0.5px solid var(--color-border-tertiary);
+  padding: 24px;
+}
+.invoice-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
+.invoice-title { font-size: 18px; font-weight: 600; color: var(--color-text-primary); }
+.invoice-subtitle { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; }
+.invoice-badge {
+  font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 999px;
+  background: var(--color-background-warning); color: var(--color-text-warning);
+}
+.invoice-amount { font-size: 36px; font-weight: 700; color: var(--color-text-primary); margin: 12px 0 4px; }
+.invoice-for { font-size: 13px; color: var(--color-text-secondary); }
+.invoice-grid {
+  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
+  margin-top: 16px; padding-top: 16px;
+  border-top: 0.5px solid var(--color-border-tertiary);
+}
+.invoice-label { font-size: 11px; color: var(--color-text-tertiary); }
+.invoice-value { font-size: 14px; font-weight: 500; color: var(--color-text-primary); margin-top: 2px; }
+.invoice-actions { display: flex; gap: 8px; margin-top: 20px; }
+.invoice-actions button {
+  flex: none; font-size: 13px; padding: 8px 18px;
+  border-radius: var(--border-radius-md);
+}
+</style>
+<div class="invoice-card">
+  <div class="invoice-header">
+    <div>
+      <div class="invoice-title">Monthly invoice</div>
+      <div class="invoice-subtitle">Starter card for a recurring client billing cycle</div>
+    </div>
+    <span class="invoice-badge">Draft</span>
+  </div>
+  <div class="invoice-amount">$2,500</div>
+  <div class="invoice-for">For product design retainer and monthly support</div>
+  <div class="invoice-grid">
+    <div>
+      <div class="invoice-label">Client</div>
+      <div class="invoice-value">Northwind Labs</div>
+    </div>
+    <div>
+      <div class="invoice-label">Billing month</div>
+      <div class="invoice-value">March 2026</div>
+    </div>
+    <div>
+      <div class="invoice-label">Invoice number</div>
+      <div class="invoice-value">INV-3201</div>
+    </div>
+    <div>
+      <div class="invoice-label">Due date</div>
+      <div class="invoice-value">Apr 5, 2026</div>
+    </div>
+  </div>
+  <div class="invoice-actions">
+    <button onclick="sendPrompt('Send this invoice')">Send invoice</button>
+    <button onclick="sendPrompt('Expand to full invoice')">Expand to full invoice ↗</button>
+  </div>
+</div>`;
+
+const calculatorHtml = `<style>
+.calc {
+  font-family: var(--font-sans);
+  max-width: 320px;
+  border-radius: var(--border-radius-xl);
+  background: var(--color-background-secondary);
+  border: 0.5px solid var(--color-border-tertiary);
+  overflow: hidden;
+}
+.calc-display {
+  padding: 20px 24px 12px;
+  text-align: right;
+}
+.calc-expression { font-size: 13px; color: var(--color-text-tertiary); min-height: 18px; }
+.calc-result { font-size: 36px; font-weight: 700; color: var(--color-text-primary); line-height: 1.2; }
+.calc-grid {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
+  background: var(--color-border-tertiary);
+  border-top: 0.5px solid var(--color-border-tertiary);
+}
+.calc-btn {
+  padding: 16px; font-size: 16px; font-weight: 500;
+  border: none; border-radius: 0; cursor: pointer;
+  background: var(--color-background-primary);
+  color: var(--color-text-primary);
+  transition: background 0.1s;
+}
+.calc-btn:hover { background: var(--color-background-tertiary); }
+.calc-btn.op { color: var(--color-text-info); font-weight: 600; }
+.calc-btn.eq {
+  background: var(--color-background-info); color: var(--color-text-info); font-weight: 600;
+}
+.calc-btn.eq:hover { opacity: 0.85; }
+.calc-btn.wide { grid-column: span 2; }
+</style>
+<div class="calc">
+  <div class="calc-display">
+    <div class="calc-expression" id="expr"></div>
+    <div class="calc-result" id="result">0</div>
+  </div>
+  <div class="calc-grid">
+    <button class="calc-btn" onclick="clearCalc()">C</button>
+    <button class="calc-btn op" onclick="inputOp('(')">(</button>
+    <button class="calc-btn op" onclick="inputOp(')')">)</button>
+    <button class="calc-btn op" onclick="inputOp('/')">÷</button>
+    <button class="calc-btn" onclick="inputNum('7')">7</button>
+    <button class="calc-btn" onclick="inputNum('8')">8</button>
+    <button class="calc-btn" onclick="inputNum('9')">9</button>
+    <button class="calc-btn op" onclick="inputOp('*')">×</button>
+    <button class="calc-btn" onclick="inputNum('4')">4</button>
+    <button class="calc-btn" onclick="inputNum('5')">5</button>
+    <button class="calc-btn" onclick="inputNum('6')">6</button>
+    <button class="calc-btn op" onclick="inputOp('-')">−</button>
+    <button class="calc-btn" onclick="inputNum('1')">1</button>
+    <button class="calc-btn" onclick="inputNum('2')">2</button>
+    <button class="calc-btn" onclick="inputNum('3')">3</button>
+    <button class="calc-btn op" onclick="inputOp('+')">+</button>
+    <button class="calc-btn wide" onclick="inputNum('0')">0</button>
+    <button class="calc-btn" onclick="inputNum('.')">.</button>
+    <button class="calc-btn eq" onclick="calc()">=</button>
+  </div>
+</div>
+<script>
+var expression = '';
+function inputNum(n) { expression += n; update(); }
+function inputOp(o) { expression += o; update(); }
+function clearCalc() { expression = ''; document.getElementById('expr').textContent = ''; document.getElementById('result').textContent = '0'; }
+function update() { document.getElementById('expr').textContent = expression; }
+function calc() {
+  try {
+    var r = Function('"use strict"; return (' + expression + ')')();
+    document.getElementById('result').textContent = Number.isFinite(r) ? parseFloat(r.toFixed(8)).toString() : 'Error';
+  } catch(e) { document.getElementById('result').textContent = 'Error'; }
+}
+</script>`;
+
+export const SEED_TEMPLATES: SeedTemplate[] = [
+  {
+    id: "seed-weather-001",
+    name: "Weather",
+    description: "Current weather conditions card with temperature, humidity, wind, and UV index",
+    html: weatherHtml,
+    data_description: "City name, date, temperature, condition, humidity, wind speed/direction, UV index",
+    created_at: "2026-01-01T00:00:00.000Z",
+    version: 1,
+  },
+  {
+    id: "seed-invoice-001",
+    name: "Invoice Card",
+    description: "Compact invoice card with amount, client info, and action buttons",
+    html: invoiceHtml,
+    data_description: "Title, amount, description, client name, billing month, invoice number, due date",
+    created_at: "2026-01-01T00:00:01.000Z",
+    version: 1,
+  },
+  {
+    id: "seed-calculator-001",
+    name: "Calculator",
+    description: "Interactive calculator with basic arithmetic operations",
+    html: calculatorHtml,
+    data_description: "N/A — interactive widget, no data substitution needed",
+    created_at: "2026-01-01T00:00:02.000Z",
+    version: 1,
+  },
+];
diff --git a/apps/app/src/hooks/use-seed-templates.ts b/apps/app/src/hooks/use-seed-templates.ts
new file mode 100644
index 0000000..4f3606e
--- /dev/null
+++ b/apps/app/src/hooks/use-seed-templates.ts
@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useAgent } from "@copilotkit/react-core/v2";
+import { SEED_TEMPLATES } from "@/components/template-library/seed-templates";
+
+/**
+ * Seeds the agent state with built-in templates on first load
+ * if no templates exist yet.
+ */
+export function useSeedTemplates() {
+  const { agent } = useAgent();
+  const seeded = useRef(false);
+
+  useEffect(() => {
+    if (seeded.current) return;
+    const existing = agent.state?.templates;
+    // Only seed if templates array is empty or absent
+    if (existing && existing.length > 0) {
+      seeded.current = true;
+      return;
+    }
+    seeded.current = true;
+    agent.setState({
+      ...agent.state,
+      templates: [...SEED_TEMPLATES],
+    });
+  }, [agent]);
+}

From a1c84e07428389f9d25e3fd0f16b6196d27006d3 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Tue, 24 Mar 2026 06:19:53 -0700
Subject: [PATCH 15/16] fix(templates): reliable apply via pending_template and
 non-overlapping badge

- apply_template tool now auto-reads pending_template from state before
  falling back to name/ID args, so the agent doesn't need to parse state
- Seed templates merged client-side in TemplateLibrary (removed broken
  agent-state seeding hook that ran before session was established)
- Template name badge moved above widget content to avoid overlapping
- Badge detects source template via pending_template ref + exact HTML match
---
 apps/agent/src/templates.py                   | 14 +++--
 apps/app/src/app/page.tsx                     |  2 -
 .../generative-ui/save-template-overlay.tsx   | 57 ++++++++++++++++++-
 .../src/components/template-library/index.tsx | 15 ++++-
 apps/app/src/hooks/use-seed-templates.ts      | 29 ----------
 5 files changed, 77 insertions(+), 40 deletions(-)
 delete mode 100644 apps/app/src/hooks/use-seed-templates.ts

diff --git a/apps/agent/src/templates.py b/apps/agent/src/templates.py
index 4788223..7eb1605 100644
--- a/apps/agent/src/templates.py
+++ b/apps/agent/src/templates.py
@@ -84,15 +84,21 @@ def apply_template(name: str = "", template_id: str = "", runtime: ToolRuntime =
     Retrieve a saved template's HTML so you can adapt it with new data.
     After calling this, generate a NEW widget in the same style and render via widgetRenderer.
 
-    You can look up by name or ID. If both are provided, ID takes priority.
-    When multiple templates share the same name, returns the most recently created one.
+    This tool automatically checks for a pending_template in state (set by the
+    frontend when the user picks a template from the library). If pending_template
+    is present, it takes priority over name/template_id arguments.
 
     Args:
-        name: The name of the template to apply (e.g. "Invoice")
-        template_id: The ID of the template to apply (optional)
+        name: The name of the template to apply (fallback if no pending_template)
+        template_id: The ID of the template to apply (fallback if no pending_template)
     """
     templates = runtime.state.get("templates", [])
 
+    # Check pending_template from frontend first — this is the most reliable source
+    pending = runtime.state.get("pending_template")
+    if pending and pending.get("id"):
+        template_id = pending["id"]
+
     # Look up by ID first
     if template_id:
         for t in templates:
diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index 64172a6..5f52618 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useState } from "react";
 import { ExampleLayout } from "@/components/example-layout";
 import { useGenerativeUIExamples, useExampleSuggestions } from "@/hooks";
-import { useSeedTemplates } from "@/hooks/use-seed-templates";
 import { ExplainerCardsPortal } from "@/components/explainer-cards";
 import { TemplateLibrary } from "@/components/template-library";
 import { TemplateChip } from "@/components/template-library/template-chip";
@@ -13,7 +12,6 @@ import { CopilotChat } from "@copilotkit/react-core/v2";
 export default function HomePage() {
   useGenerativeUIExamples();
   useExampleSuggestions();
-  useSeedTemplates();
 
   const [templateDrawerOpen, setTemplateDrawerOpen] = useState(false);
 
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 324ade4..e071bc9 100644
--- a/apps/app/src/components/generative-ui/save-template-overlay.tsx
+++ b/apps/app/src/components/generative-ui/save-template-overlay.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { useState, useCallback, type ReactNode } from "react";
+import { useState, useCallback, useMemo, useRef, type ReactNode } from "react";
 import { useAgent } from "@copilotkit/react-core/v2";
+import { SEED_TEMPLATES } from "@/components/template-library/seed-templates";
 
 type SaveState = "idle" | "input" | "saving" | "saved";
 
@@ -34,6 +35,37 @@ export function SaveTemplateOverlay({
   const [saveState, setSaveState] = useState<SaveState>("idle");
   const [templateName, setTemplateName] = useState("");
 
+  // Capture pending_template at mount time — it may be cleared by the agent later
+  const pending = agent.state?.pending_template as { id: string; name: string } | null | undefined;
+  const sourceRef = useRef<{ id: string; name: string } | null>(null);
+  if (pending?.id && !sourceRef.current) {
+    sourceRef.current = pending;
+  }
+
+  // Check if this content matches an existing template:
+  // 1. Exact HTML match (seed templates rendered as-is)
+  // 2. Source template captured from pending_template (applied templates with modified data)
+  const matchedTemplate = useMemo(() => {
+    // First check source template from apply flow
+    if (sourceRef.current) {
+      const allTemplates = [
+        ...SEED_TEMPLATES,
+        ...((agent.state?.templates as { id: string; name: string }[]) || []),
+      ];
+      const source = allTemplates.find((t) => t.id === sourceRef.current!.id);
+      if (source) return source;
+    }
+    // Then check exact HTML match
+    if (!html) return null;
+    const normalise = (s: string) => s.replace(/\s+/g, " ").trim();
+    const norm = normalise(html);
+    const allTemplates = [
+      ...SEED_TEMPLATES,
+      ...((agent.state?.templates as { id: string; name: string; html: string }[]) || []),
+    ];
+    return allTemplates.find((t) => t.html && normalise(t.html) === norm) ?? null;
+  }, [html, agent.state?.templates]);
+
   const handleSave = useCallback(() => {
     const name = templateName.trim() || title || "Untitled Template";
     setSaveState("saving");
@@ -161,8 +193,8 @@ export function SaveTemplateOverlay({
           </div>
         )}
 
-        {/* Idle bookmark button */}
-        {saveState === "idle" && (
+        {/* Idle: show save button (badge moved outside this container) */}
+        {saveState === "idle" && !matchedTemplate && (
           <button
             onClick={() => setSaveState("input")}
             className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium shadow-md transition-all duration-150 hover:scale-105"
@@ -181,6 +213,25 @@ export function SaveTemplateOverlay({
         )}
       </div>
 
+      {/* Template name badge — shown above widget when matched */}
+      {saveState === "idle" && matchedTemplate && ready && (
+        <div className="flex justify-end mb-1">
+          <div
+            className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium"
+            style={{
+              background: "linear-gradient(135deg, rgba(99,102,241,0.10), rgba(16,185,129,0.10))",
+              border: "1px solid rgba(99,102,241,0.20)",
+              color: "var(--text-primary, #1a1a1a)",
+            }}
+          >
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.55 }}>
+              <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
+            </svg>
+            {matchedTemplate.name}
+          </div>
+        </div>
+      )}
+
       {children}
     </div>
   );
diff --git a/apps/app/src/components/template-library/index.tsx b/apps/app/src/components/template-library/index.tsx
index 1b9fbfc..164af19 100644
--- a/apps/app/src/components/template-library/index.tsx
+++ b/apps/app/src/components/template-library/index.tsx
@@ -2,6 +2,7 @@
 
 import { useAgent } from "@copilotkit/react-core/v2";
 import { TemplateCard } from "./template-card";
+import { SEED_TEMPLATES } from "./seed-templates";
 
 interface TemplateLibraryProps {
   open: boolean;
@@ -21,15 +22,25 @@ interface Template {
 
 export function TemplateLibrary({ open, onClose }: TemplateLibraryProps) {
   const { agent } = useAgent();
-  const templates: Template[] = agent.state?.templates || [];
+  const agentTemplates: Template[] = agent.state?.templates || [];
+  // Merge seed templates with user-saved ones
+  const templates: Template[] = [
+    ...SEED_TEMPLATES.filter((s) => !agentTemplates.some((t) => t.id === s.id)),
+    ...agentTemplates,
+  ];
 
   const handleApplyClick = (id: string) => {
     const template = templates.find((t) => t.id === id);
     if (!template) return;
 
-    // Attach template as a chip in the chat input — user types their prompt naturally
+    // Ensure template is in agent state so the backend can retrieve it via apply_template
+    const stateTemplates = agentTemplates.some((t) => t.id === id)
+      ? agentTemplates
+      : [...agentTemplates, template];
+
     agent.setState({
       ...agent.state,
+      templates: stateTemplates,
       pending_template: { id: template.id, name: template.name },
     });
     onClose();
diff --git a/apps/app/src/hooks/use-seed-templates.ts b/apps/app/src/hooks/use-seed-templates.ts
deleted file mode 100644
index 4f3606e..0000000
--- a/apps/app/src/hooks/use-seed-templates.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-import { useAgent } from "@copilotkit/react-core/v2";
-import { SEED_TEMPLATES } from "@/components/template-library/seed-templates";
-
-/**
- * Seeds the agent state with built-in templates on first load
- * if no templates exist yet.
- */
-export function useSeedTemplates() {
-  const { agent } = useAgent();
-  const seeded = useRef(false);
-
-  useEffect(() => {
-    if (seeded.current) return;
-    const existing = agent.state?.templates;
-    // Only seed if templates array is empty or absent
-    if (existing && existing.length > 0) {
-      seeded.current = true;
-      return;
-    }
-    seeded.current = true;
-    agent.setState({
-      ...agent.state,
-      templates: [...SEED_TEMPLATES],
-    });
-  }, [agent]);
-}

From 368517f906394e4d59d8c6520ad90f2ae1f24372 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Tue, 24 Mar 2026 06:34:31 -0700
Subject: [PATCH 16/16] feat(templates): replace calculator seed with dashboard
 template

Swap the calculator widget for a KPI dashboard with revenue, active
users, conversion metrics, and a monthly revenue bar chart.
---
 .../template-library/seed-templates.ts        | 133 +++++++++---------
 1 file changed, 64 insertions(+), 69 deletions(-)

diff --git a/apps/app/src/components/template-library/seed-templates.ts b/apps/app/src/components/template-library/seed-templates.ts
index aa3b9f3..6c46ac3 100644
--- a/apps/app/src/components/template-library/seed-templates.ts
+++ b/apps/app/src/components/template-library/seed-templates.ts
@@ -127,81 +127,76 @@ const invoiceHtml = `<style>
   </div>
 </div>`;
 
-const calculatorHtml = `<style>
-.calc {
+const dashboardHtml = `<style>
+.dash {
   font-family: var(--font-sans);
-  max-width: 320px;
+  max-width: 480px;
   border-radius: var(--border-radius-xl);
   background: var(--color-background-secondary);
   border: 0.5px solid var(--color-border-tertiary);
-  overflow: hidden;
-}
-.calc-display {
-  padding: 20px 24px 12px;
-  text-align: right;
-}
-.calc-expression { font-size: 13px; color: var(--color-text-tertiary); min-height: 18px; }
-.calc-result { font-size: 36px; font-weight: 700; color: var(--color-text-primary); line-height: 1.2; }
-.calc-grid {
-  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
-  background: var(--color-border-tertiary);
-  border-top: 0.5px solid var(--color-border-tertiary);
+  padding: 24px;
 }
-.calc-btn {
-  padding: 16px; font-size: 16px; font-weight: 500;
-  border: none; border-radius: 0; cursor: pointer;
+.dash-title { font-size: 18px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 4px; }
+.dash-subtitle { font-size: 12px; color: var(--color-text-tertiary); margin-bottom: 20px; }
+.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
+.dash-kpi {
+  padding: 12px; border-radius: var(--border-radius-md);
   background: var(--color-background-primary);
-  color: var(--color-text-primary);
-  transition: background 0.1s;
+  border: 0.5px solid var(--color-border-tertiary);
 }
-.calc-btn:hover { background: var(--color-background-tertiary); }
-.calc-btn.op { color: var(--color-text-info); font-weight: 600; }
-.calc-btn.eq {
-  background: var(--color-background-info); color: var(--color-text-info); font-weight: 600;
+.dash-kpi-label { font-size: 11px; color: var(--color-text-tertiary); }
+.dash-kpi-value { font-size: 22px; font-weight: 700; color: var(--color-text-primary); margin-top: 2px; }
+.dash-kpi-change { font-size: 11px; margin-top: 2px; }
+.dash-kpi-change.up { color: var(--color-text-success); }
+.dash-kpi-change.down { color: var(--color-text-danger); }
+.dash-chart { margin-bottom: 16px; }
+.dash-chart-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 8px; }
+.dash-bars { display: flex; align-items: flex-end; gap: 6px; height: 100px; }
+.dash-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
+.dash-bar {
+  width: 100%; border-radius: 4px 4px 0 0;
+  background: linear-gradient(180deg, rgba(99,102,241,0.7), rgba(16,185,129,0.5));
+  transition: height 0.3s ease;
 }
-.calc-btn.eq:hover { opacity: 0.85; }
-.calc-btn.wide { grid-column: span 2; }
+.dash-bar-label { font-size: 10px; color: var(--color-text-tertiary); }
+.dash-legend { display: flex; gap: 16px; padding-top: 12px; border-top: 0.5px solid var(--color-border-tertiary); }
+.dash-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-secondary); }
+.dash-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
 </style>
-<div class="calc">
-  <div class="calc-display">
-    <div class="calc-expression" id="expr"></div>
-    <div class="calc-result" id="result">0</div>
+<div class="dash">
+  <div class="dash-title">Q1 2026 Performance</div>
+  <div class="dash-subtitle">Revenue, users, and conversion metrics — Jan to Mar 2026</div>
+  <div class="dash-kpis">
+    <div class="dash-kpi">
+      <div class="dash-kpi-label">Revenue</div>
+      <div class="dash-kpi-value">$284k</div>
+      <div class="dash-kpi-change up">+12.3% vs Q4</div>
+    </div>
+    <div class="dash-kpi">
+      <div class="dash-kpi-label">Active Users</div>
+      <div class="dash-kpi-value">18.2k</div>
+      <div class="dash-kpi-change up">+8.1% vs Q4</div>
+    </div>
+    <div class="dash-kpi">
+      <div class="dash-kpi-label">Conversion</div>
+      <div class="dash-kpi-value">3.4%</div>
+      <div class="dash-kpi-change down">-0.2% vs Q4</div>
+    </div>
+  </div>
+  <div class="dash-chart">
+    <div class="dash-chart-title">Monthly Revenue</div>
+    <div class="dash-bars">
+      <div class="dash-bar-col"><div class="dash-bar" style="height:65%"></div><div class="dash-bar-label">Jan</div></div>
+      <div class="dash-bar-col"><div class="dash-bar" style="height:78%"></div><div class="dash-bar-label">Feb</div></div>
+      <div class="dash-bar-col"><div class="dash-bar" style="height:100%"></div><div class="dash-bar-label">Mar</div></div>
+    </div>
   </div>
-  <div class="calc-grid">
-    <button class="calc-btn" onclick="clearCalc()">C</button>
-    <button class="calc-btn op" onclick="inputOp('(')">(</button>
-    <button class="calc-btn op" onclick="inputOp(')')">)</button>
-    <button class="calc-btn op" onclick="inputOp('/')">÷</button>
-    <button class="calc-btn" onclick="inputNum('7')">7</button>
-    <button class="calc-btn" onclick="inputNum('8')">8</button>
-    <button class="calc-btn" onclick="inputNum('9')">9</button>
-    <button class="calc-btn op" onclick="inputOp('*')">×</button>
-    <button class="calc-btn" onclick="inputNum('4')">4</button>
-    <button class="calc-btn" onclick="inputNum('5')">5</button>
-    <button class="calc-btn" onclick="inputNum('6')">6</button>
-    <button class="calc-btn op" onclick="inputOp('-')">−</button>
-    <button class="calc-btn" onclick="inputNum('1')">1</button>
-    <button class="calc-btn" onclick="inputNum('2')">2</button>
-    <button class="calc-btn" onclick="inputNum('3')">3</button>
-    <button class="calc-btn op" onclick="inputOp('+')">+</button>
-    <button class="calc-btn wide" onclick="inputNum('0')">0</button>
-    <button class="calc-btn" onclick="inputNum('.')">.</button>
-    <button class="calc-btn eq" onclick="calc()">=</button>
+  <div class="dash-legend">
+    <div class="dash-legend-item"><div class="dash-legend-dot" style="background: var(--color-text-success)"></div>Above target</div>
+    <div class="dash-legend-item"><div class="dash-legend-dot" style="background: var(--color-text-danger)"></div>Below target</div>
+    <div class="dash-legend-item"><div class="dash-legend-dot" style="background: var(--color-text-tertiary)"></div>No change</div>
   </div>
-</div>
-<script>
-var expression = '';
-function inputNum(n) { expression += n; update(); }
-function inputOp(o) { expression += o; update(); }
-function clearCalc() { expression = ''; document.getElementById('expr').textContent = ''; document.getElementById('result').textContent = '0'; }
-function update() { document.getElementById('expr').textContent = expression; }
-function calc() {
-  try {
-    var r = Function('"use strict"; return (' + expression + ')')();
-    document.getElementById('result').textContent = Number.isFinite(r) ? parseFloat(r.toFixed(8)).toString() : 'Error';
-  } catch(e) { document.getElementById('result').textContent = 'Error'; }
-}
-</script>`;
+</div>`;
 
 export const SEED_TEMPLATES: SeedTemplate[] = [
   {
@@ -223,11 +218,11 @@ export const SEED_TEMPLATES: SeedTemplate[] = [
     version: 1,
   },
   {
-    id: "seed-calculator-001",
-    name: "Calculator",
-    description: "Interactive calculator with basic arithmetic operations",
-    html: calculatorHtml,
-    data_description: "N/A — interactive widget, no data substitution needed",
+    id: "seed-dashboard-001",
+    name: "Dashboard",
+    description: "KPI dashboard with metrics cards and bar chart for quarterly performance",
+    html: dashboardHtml,
+    data_description: "Title, subtitle, KPI labels/values/changes, monthly bar chart data, legend items",
     created_at: "2026-01-01T00:00:02.000Z",
     version: 1,
   },