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)

Author: GeneralJerel

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")

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>

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",

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>
   );