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

Author: GeneralJerel

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:

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

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

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