From 7e5fc35038948fc31426e224bd5afcc1402772ca 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/19] 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 50d00e211b3cd163a6c41d06d4dcc6f91b1219d4 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/19] 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 245b314723d8dc71d0e3b57afd3079b87d1cfb96 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/19] 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 1e9d11d5bfb84f134b8e0d201a58d82a753e1bc2 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/19] 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 3e8114beb67d2025d304973b5579edb14d6cf878 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/19] 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 fd91f3d5eb86254b8ca2d34a98b1681238bada05 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/19] 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 a3212ef26d2d871086e2c05e516de4fc99c3183d 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/19] 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 225b461ce0d1ac79049bba9b65325e0429a9736b 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/19] 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 c54cf1d11f721d8584bf28979835ecdf1b7a7fd9 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Mon, 23 Mar 2026 14:34:07 -0700
Subject: [PATCH 09/19] 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 0e6d8cbbe32facda14f1b02132c70949907230a1 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Mon, 23 Mar 2026 14:38:46 -0700
Subject: [PATCH 10/19] 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 6b272d61f0beba440bb6d8a0dfed097e97d66ec1 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Mon, 23 Mar 2026 14:50:19 -0700
Subject: [PATCH 11/19] 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 5185bbb0c2ab81cd862c85545b827d2b01dcb099 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Tue, 24 Mar 2026 05:27:18 -0700
Subject: [PATCH 12/19] 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 c15ab6435e97af0b03155bca53cf8ec743d964b9 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Tue, 24 Mar 2026 05:31:00 -0700
Subject: [PATCH 13/19] 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 459e4465de61dcfc24e1c8013e0db6f9bc1d8810 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Tue, 24 Mar 2026 05:34:35 -0700
Subject: [PATCH 14/19] 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 3386854946d96def53246072e03747c07bf4ce44 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Tue, 24 Mar 2026 06:19:53 -0700
Subject: [PATCH 15/19] 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 f95818429333fb0db194e89e9bee2d116ee09a4a Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Tue, 24 Mar 2026 06:34:31 -0700
Subject: [PATCH 16/19] 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,
   },

From b24a7a97b8d4d1e37b02072f637f4bdec62f1dee Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Tue, 24 Mar 2026 06:47:50 -0700
Subject: [PATCH 17/19] =?UTF-8?q?fix(templates):=20resolve=20review=20find?=
 =?UTF-8?q?ings=20=E2=80=94=20security=20comment,=20chip=20fallback,=20see?=
 =?UTF-8?q?d=20sync,=20param=20order?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add comment explaining why postMessage uses targetOrigin "*" (sandboxed iframe)
- Rewrite TemplateChip with useSyncExternalStore to satisfy lint rules, add
  inline fallback when CopilotKit DOM structure isn't available, document coupling
- Seed templates into agent state on first render so apply_template works when
  users ask by name in chat (not just via UI button)
- Reorder apply_template params to put runtime first, removing unsafe None default
---
 apps/agent/src/templates.py                   |   2 +-
 .../generative-ui/widget-renderer.tsx         |   2 +
 .../src/components/template-library/index.tsx |  20 +++-
 .../template-library/template-chip.tsx        | 102 ++++++++++++------
 4 files changed, 89 insertions(+), 37 deletions(-)

diff --git a/apps/agent/src/templates.py b/apps/agent/src/templates.py
index 7eb1605..d4327fe 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 = None):
+def apply_template(runtime: ToolRuntime, name: str = "", template_id: str = ""):
     """
     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 3aa17fd..15c7fa7 100644
--- a/apps/app/src/components/generative-ui/widget-renderer.tsx
+++ b/apps/app/src/components/generative-ui/widget-renderer.tsx
@@ -517,6 +517,8 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
 
     const iframe = iframeRef.current;
     if (iframe.contentWindow) {
+      // targetOrigin "*" is required: the sandboxed iframe (allow-scripts only,
+      // no allow-same-origin) has a null origin, so no specific origin can be used.
       iframe.contentWindow.postMessage(
         { type: "update-content", html },
         "*"
diff --git a/apps/app/src/components/template-library/index.tsx b/apps/app/src/components/template-library/index.tsx
index 164af19..fecb1f5 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 { useEffect } from "react";
 import { useAgent } from "@copilotkit/react-core/v2";
 import { TemplateCard } from "./template-card";
 import { SEED_TEMPLATES } from "./seed-templates";
@@ -23,7 +24,24 @@ interface Template {
 export function TemplateLibrary({ open, onClose }: TemplateLibraryProps) {
   const { agent } = useAgent();
   const agentTemplates: Template[] = agent.state?.templates || [];
-  // Merge seed templates with user-saved ones
+
+  // Seed templates into agent state on first render so the backend can find them
+  // via apply_template even when the user asks by name in chat (no pending_template).
+  useEffect(() => {
+    const missing = SEED_TEMPLATES.filter(
+      (s) => !agentTemplates.some((t) => t.id === s.id)
+    );
+    if (missing.length > 0 && agent.state) {
+      agent.setState({
+        ...agent.state,
+        templates: [...agentTemplates, ...missing],
+      });
+    }
+    // Only run when agent state first becomes available
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [!!agent.state]);
+
+  // Merge seed templates with user-saved ones for display
   const templates: Template[] = [
     ...SEED_TEMPLATES.filter((s) => !agentTemplates.some((t) => t.id === s.id)),
     ...agentTemplates,
diff --git a/apps/app/src/components/template-library/template-chip.tsx b/apps/app/src/components/template-library/template-chip.tsx
index 21efd7b..31caa94 100644
--- a/apps/app/src/components/template-library/template-chip.tsx
+++ b/apps/app/src/components/template-library/template-chip.tsx
@@ -1,14 +1,60 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
+import { useSyncExternalStore, useEffect, 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.
+ * Manages the DOM element used as the portal container for the template chip.
+ * Uses a subscribe/getSnapshot pattern compatible with useSyncExternalStore
+ * to avoid setState-in-effect and ref-during-render lint violations.
+ *
+ * COUPLING NOTE: This depends on CopilotKit's internal DOM structure —
+ * specifically that `[data-testid="copilot-chat-textarea"]` exists and sits inside
+ * a parent column div. If CopilotKit changes this structure, the chip falls back
+ * to rendering inline instead of portaling into the textarea.
  */
+let chipContainer: HTMLElement | null = null;
+const listeners = new Set<() => void>();
+
+function getChipContainer() {
+  return chipContainer;
+}
+
+function subscribeChipContainer(cb: () => void) {
+  listeners.add(cb);
+  return () => { listeners.delete(cb); };
+}
+
+function ensureChipContainer(active: boolean) {
+  if (!active) {
+    if (chipContainer) {
+      chipContainer.remove();
+      chipContainer = null;
+      listeners.forEach((cb) => cb());
+    }
+    return;
+  }
+
+  if (chipContainer) return;
+
+  const textarea = document.querySelector<HTMLElement>(
+    '[data-testid="copilot-chat-textarea"]'
+  );
+  const textareaColumn = textarea?.parentElement;
+  if (!textareaColumn) return;
+
+  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);
+  }
+  chipContainer = el;
+  listeners.forEach((cb) => cb());
+}
+
 export function TemplateChip() {
   const { agent } = useAgent();
   const pending = agent.state?.pending_template as
@@ -16,44 +62,26 @@ export function TemplateChip() {
     | null
     | undefined;
 
-  const [container, setContainer] = useState<HTMLElement | null>(null);
+  const container = useSyncExternalStore(subscribeChipContainer, getChipContainer, () => 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);
+    ensureChipContainer(!!pending?.name);
   }, [pending?.name]);
 
+  // Clean up DOM node on unmount
+  useEffect(() => {
+    return () => {
+      ensureChipContainer(false);
+    };
+  }, []);
+
   const handleDismiss = useCallback(() => {
     agent.setState({ ...agent.state, pending_template: null });
   }, [agent]);
 
-  if (!pending?.name || !container) return null;
+  if (!pending?.name) return null;
 
-  return createPortal(
+  const chipContent = (
     <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={{
@@ -101,7 +129,11 @@ export function TemplateChip() {
           <path d="m6 6 12 12" />
         </svg>
       </button>
-    </div>,
-    container
+    </div>
   );
+
+  // Fallback: render inline when CopilotKit DOM structure isn't available
+  if (!container) return chipContent;
+
+  return createPortal(chipContent, container);
 }

From 917d72b24d1f775f7c251e45736231b1e75c219a Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Tue, 24 Mar 2026 07:28:31 -0700
Subject: [PATCH 18/19] fix(templates): seed delete bug, backend seed lookup,
 and delete button visibility

- Hide delete button on seed templates (they reappeared after deletion
  because client-side merge re-added them on every render)
- handleDelete now filters from agentTemplates only, not the merged list
- Backend apply_template and list_templates now include SEED_TEMPLATES as
  a fallback so users can apply seeds by name in chat without clicking
  the UI button (fixes chat-only flow for seed templates)
- Seed HTML loaded from frontend source at module init (single source of truth)
---
 apps/agent/src/templates.py                   | 78 ++++++++++++++++++-
 .../src/components/template-library/index.tsx |  6 +-
 .../template-library/seed-templates.ts        |  2 +
 .../template-library/template-card.tsx        | 24 +++---
 4 files changed, 93 insertions(+), 17 deletions(-)

diff --git a/apps/agent/src/templates.py b/apps/agent/src/templates.py
index d4327fe..38e66c2 100644
--- a/apps/agent/src/templates.py
+++ b/apps/agent/src/templates.py
@@ -18,6 +18,70 @@ class UITemplate(TypedDict, total=False):
     component_data: Optional[dict[str, Any]]
 
 
+# Built-in seed templates — must stay in sync with apps/app/src/components/template-library/seed-templates.ts
+# Only id, name, description, html, and data_description are needed for apply_template lookups.
+SEED_TEMPLATES: list[UITemplate] = [
+    {
+        "id": "seed-weather-001",
+        "name": "Weather",
+        "description": "Current weather conditions card with temperature, humidity, wind, and UV index",
+        "html": "",  # Populated at module load from _SEED_HTML below
+        "data_description": "City name, date, temperature, condition, humidity, wind speed/direction, UV index",
+        "version": 1,
+    },
+    {
+        "id": "seed-invoice-001",
+        "name": "Invoice Card",
+        "description": "Compact invoice card with amount, client info, and action buttons",
+        "html": "",
+        "data_description": "Title, amount, description, client name, billing month, invoice number, due date",
+        "version": 1,
+    },
+    {
+        "id": "seed-dashboard-001",
+        "name": "Dashboard",
+        "description": "KPI dashboard with metrics cards and bar chart for quarterly performance",
+        "html": "",
+        "data_description": "Title, subtitle, KPI labels/values/changes, monthly bar chart data, legend items",
+        "version": 1,
+    },
+]
+
+# Load seed HTML from the frontend source so there's a single source of truth.
+# If the file isn't available (e.g. in a standalone agent deploy), seeds will
+# still be discoverable by name but with empty HTML — the agent can regenerate.
+def _load_seed_html() -> None:
+    from pathlib import Path
+
+    seed_file = Path(__file__).resolve().parents[2] / "app" / "src" / "components" / "template-library" / "seed-templates.ts"
+    if not seed_file.exists():
+        return
+    text = seed_file.read_text()
+    # Map TS variable names to seed IDs
+    mapping = {
+        "weatherHtml": "seed-weather-001",
+        "invoiceHtml": "seed-invoice-001",
+        "dashboardHtml": "seed-dashboard-001",
+    }
+    for var_name, seed_id in mapping.items():
+        # Extract template literal content between first ` and last `
+        marker = f"const {var_name} = `"
+        start = text.find(marker)
+        if start == -1:
+            continue
+        start += len(marker)
+        end = text.find("`;", start)
+        if end == -1:
+            continue
+        html = text[start:end]
+        for seed in SEED_TEMPLATES:
+            if seed["id"] == seed_id:
+                seed["html"] = html
+                break
+
+_load_seed_html()
+
+
 @tool
 def save_template(
     name: str,
@@ -63,9 +127,12 @@ def save_template(
 @tool
 def list_templates(runtime: ToolRuntime):
     """
-    List all saved UI templates. Returns template summaries (id, name, description, data_description).
+    List all saved UI templates, including built-in seed templates.
+    Returns template summaries (id, name, description, data_description).
     """
-    templates = runtime.state.get("templates", [])
+    state_templates = runtime.state.get("templates", [])
+    state_ids = {t["id"] for t in state_templates}
+    templates = [*state_templates, *(s for s in SEED_TEMPLATES if s["id"] not in state_ids)]
     return [
         {
             "id": t["id"],
@@ -88,11 +155,16 @@ def apply_template(runtime: ToolRuntime, name: str = "", template_id: str = ""):
     frontend when the user picks a template from the library). If pending_template
     is present, it takes priority over name/template_id arguments.
 
+    Also searches built-in seed templates, so users can apply them by name in chat
+    even if the frontend hasn't pushed them into agent state yet.
+
     Args:
         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", [])
+    state_templates = runtime.state.get("templates", [])
+    state_ids = {t["id"] for t in state_templates}
+    templates = [*state_templates, *(s for s in SEED_TEMPLATES if s["id"] not in state_ids)]
 
     # Check pending_template from frontend first — this is the most reliable source
     pending = runtime.state.get("pending_template")
diff --git a/apps/app/src/components/template-library/index.tsx b/apps/app/src/components/template-library/index.tsx
index fecb1f5..3fca2ea 100644
--- a/apps/app/src/components/template-library/index.tsx
+++ b/apps/app/src/components/template-library/index.tsx
@@ -3,7 +3,7 @@
 import { useEffect } from "react";
 import { useAgent } from "@copilotkit/react-core/v2";
 import { TemplateCard } from "./template-card";
-import { SEED_TEMPLATES } from "./seed-templates";
+import { SEED_TEMPLATES, SEED_IDS } from "./seed-templates";
 
 interface TemplateLibraryProps {
   open: boolean;
@@ -75,7 +75,7 @@ export function TemplateLibrary({ open, onClose }: TemplateLibraryProps) {
   const handleDelete = (id: string) => {
     agent.setState({
       ...agent.state,
-      templates: templates.filter((t) => t.id !== id),
+      templates: agentTemplates.filter((t) => t.id !== id),
     });
   };
 
@@ -175,7 +175,7 @@ export function TemplateLibrary({ open, onClose }: TemplateLibraryProps) {
                   dataDescription={t.data_description}
                   version={t.version}
                   onApply={handleApplyClick}
-                  onDelete={handleDelete}
+                  onDelete={SEED_IDS.has(t.id) ? undefined : handleDelete}
                 />
               ))}
             </div>
diff --git a/apps/app/src/components/template-library/seed-templates.ts b/apps/app/src/components/template-library/seed-templates.ts
index 6c46ac3..847eb46 100644
--- a/apps/app/src/components/template-library/seed-templates.ts
+++ b/apps/app/src/components/template-library/seed-templates.ts
@@ -198,6 +198,8 @@ const dashboardHtml = `<style>
   </div>
 </div>`;
 
+export const SEED_IDS = new Set(["seed-weather-001", "seed-invoice-001", "seed-dashboard-001"]);
+
 export const SEED_TEMPLATES: SeedTemplate[] = [
   {
     id: "seed-weather-001",
diff --git a/apps/app/src/components/template-library/template-card.tsx b/apps/app/src/components/template-library/template-card.tsx
index eef53d0..8ec39be 100644
--- a/apps/app/src/components/template-library/template-card.tsx
+++ b/apps/app/src/components/template-library/template-card.tsx
@@ -18,7 +18,7 @@ interface TemplateCardProps {
   dataDescription: string;
   version: number;
   onApply: (id: string) => void;
-  onDelete: (id: string) => void;
+  onDelete?: (id: string) => void;
 }
 
 /** Mini bar chart preview rendered as inline SVG */
@@ -219,16 +219,18 @@ body {
         >
           Apply
         </button>
-        <button
-          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))",
-            color: "var(--color-text-danger, #A32D2D)",
-          }}
-        >
-          Delete
-        </button>
+        {onDelete && (
+          <button
+            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))",
+              color: "var(--color-text-danger, #A32D2D)",
+            }}
+          >
+            Delete
+          </button>
+        )}
       </div>
     </div>
   );

From 2b78e17f3424fea35be100d44ef0652eb9332128 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Tue, 24 Mar 2026 07:32:46 -0700
Subject: [PATCH 19/19] feat(ui): use kite emoji as logo/favicon and set page
 title
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace layers SVG icon with 🪁 kite emoji in header
- Add inline SVG emoji favicon, remove old favicon.ico
- Set browser tab title to "Open Generative UI"
---
 apps/app/src/app/favicon.ico | Bin 25931 -> 0 bytes
 apps/app/src/app/layout.tsx  |   2 ++
 apps/app/src/app/page.tsx    |  10 +++-------
 3 files changed, 5 insertions(+), 7 deletions(-)
 delete mode 100644 apps/app/src/app/favicon.ico

diff --git a/apps/app/src/app/favicon.ico b/apps/app/src/app/favicon.ico
deleted file mode 100644
index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 25931
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
LrJugUA?W`A8`#=m

diff --git a/apps/app/src/app/layout.tsx b/apps/app/src/app/layout.tsx
index 26a81a7..112234f 100644
--- a/apps/app/src/app/layout.tsx
+++ b/apps/app/src/app/layout.tsx
@@ -10,6 +10,8 @@ export default function RootLayout({children}: Readonly<{ children: React.ReactN
   return (
     <html lang="en">
       <head>
+        <title>Open Generative UI</title>
+        <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🪁</text></svg>" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link
diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index 5f52618..28b6d9d 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -47,16 +47,12 @@ export default function HomePage() {
             <div className="flex items-center justify-between gap-4 px-5 py-3">
               <div className="flex items-center gap-3 min-w-0 flex-1">
                 <div
-                  className="flex items-center justify-center shrink-0 w-9 h-9 rounded-lg text-white"
+                  className="flex items-center justify-center shrink-0 w-9 h-9 rounded-lg"
                   style={{
-                    background: "linear-gradient(135deg, var(--color-lilac), var(--color-mint))",
+                    background: "linear-gradient(135deg, rgba(190,194,255,0.15), rgba(133,224,206,0.12))",
                   }}
                 >
-                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="M12 2L2 7l10 5 10-5-10-5z" />
-                    <path d="M2 17l10 5 10-5" />
-                    <path d="M2 12l10 5 10-5" />
-                  </svg>
+                  <span className="text-xl leading-none" role="img" aria-label="CopilotKit">🪁</span>
                 </div>
                 <p className="text-base font-semibold m-0 leading-snug" style={{ color: "var(--text-primary)" }}>
                   Open Generative UI