@burdenoff/microfe-botmanor 2026.813.1

package/dist/botlit/pages/PromptTemplateDetailPage.js

@@ -0,0 +1,812 @@
+import { useBotlit as e } from "../providers/BotlitProvider.js";
+import { formatRelativeTime as t } from "../utils/formatters.js";
+import { PageLayout as n } from "../components/PageLayout.js";
+import { Card as r, CardContent as i, CardDescription as a, CardHeader as o, CardTitle as s } from "../components/Card.js";
+import { Button as c } from "../components/Button.js";
+import { Badge as l, StatusBadge as ee } from "../components/Badge.js";
+import { isNative as u, nativeCopyText as te, nativeImpact as ne, nativeNotify as d, nativeToast as f } from "../../utils/nativeBridge.js";
+import { EmptyState as p } from "../components/EmptyState.js";
+import { FormField as m, Input as h, Textarea as g } from "../components/Input.js";
+import { toUnion as _ } from "../utils/unions.js";
+import { promptTemplateExamples as v, promptTemplateVariables as y, useCreatePromptTemplate as re, useDeletePromptTemplate as ie, usePromptTemplate as ae, useRenderPromptTemplate as oe, useUpdatePromptTemplate as se } from "../hooks/usePromptTemplates.js";
+import "../hooks/index.js";
+import { useMemo as ce, useState as b } from "react";
+import { PagePurpose as le } from "@burdenoff/fe-libs/ui";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { useParams as ue } from "react-router";
+import { ArrowLeft as de, Check as fe, Code as w, Copy as pe, Edit3 as me, Eye as T, FileText as E, Play as D, Save as O, Settings as he, Trash2 as k, Variable as A } from "lucide-react";
+import { toast as j } from "sonner";
+//#region src/botlit/pages/PromptTemplateDetailPage.tsx
+var M = [
+	"string",
+	"number",
+	"boolean",
+	"array",
+	"object"
+], ge = [
+	"PRIVATE",
+	"WORKSPACE",
+	"PUBLIC"
+], N = ({ isNew: N }) => {
+	let { templateId: _e } = ue(), { navigateTo: P } = e(), { data: F, loading: I } = ae(N ? void 0 : _e), { create: ve, loading: ye } = re(), { update: be, loading: xe } = se(), { remove: Se, loading: Ce } = ie(), { render: we, loading: Te } = oe(), [L, R] = b("edit"), [z, B] = b(!1), [V, Ee] = b({}), [H, De] = b(null), [U, W] = b(!1), [Oe, G] = b(!1), [K, q] = b({
+		name: "",
+		slug: "",
+		description: "",
+		visibility: "PRIVATE",
+		templateText: "",
+		variables: [],
+		exampleInputs: [{}]
+	}), J = ce(() => {
+		let e = N ? K.templateText : F?.templateText || "", t = /\{\{(\w+)\}\}/g, n = /* @__PURE__ */ new Set(), r;
+		for (; (r = t.exec(e)) !== null;) n.add(r[1]);
+		return Array.from(n);
+	}, [
+		N,
+		K.templateText,
+		F?.templateText
+	]), ke = async () => {
+		if (!(!K.name || !K.slug)) {
+			try {
+				await ve({
+					name: K.name,
+					slug: K.slug,
+					description: K.description,
+					visibility: K.visibility,
+					templateText: K.templateText,
+					variables: K.variables,
+					exampleInputs: K.exampleInputs
+				});
+			} catch (e) {
+				j.error(e instanceof Error ? e.message : "Failed to create prompt template");
+				return;
+			}
+			j.success(`Template "${K.name}" created`), P("prompt-templates");
+		}
+	}, Ae = () => {
+		q({
+			...K,
+			variables: [...K.variables, {
+				name: "",
+				type: "string",
+				required: !0,
+				defaultValue: void 0
+			}]
+		});
+	}, Y = (e, t) => {
+		let n = [...K.variables];
+		n[e] = {
+			...n[e],
+			...t
+		}, q({
+			...K,
+			variables: n
+		});
+	}, je = (e) => {
+		q({
+			...K,
+			variables: K.variables.filter((t, n) => n !== e)
+		});
+	}, Me = async () => {
+		F && De(await we({
+			templateId: F.id,
+			variables: V
+		}));
+	}, Ne = async () => {
+		await te(F?.templateText || K.templateText), B(!0), u() && f("Copied"), setTimeout(() => B(!1), 2e3);
+	}, X = () => {
+		F && (q({
+			name: F.name,
+			slug: F.slug,
+			description: F.description || "",
+			visibility: _(F.visibility, ge, "PRIVATE"),
+			templateText: F.templateText,
+			variables: y(F),
+			exampleInputs: v(F)
+		}), W(!0));
+	}, Pe = async () => {
+		if (!(!F || !K.name || !K.slug)) {
+			try {
+				await be({
+					templateId: F.id,
+					input: {
+						name: K.name,
+						slug: K.slug,
+						description: K.description,
+						visibility: K.visibility,
+						templateText: K.templateText,
+						variables: K.variables,
+						exampleInputs: K.exampleInputs
+					}
+				});
+			} catch (e) {
+				j.error(e instanceof Error ? e.message : "Failed to update prompt template");
+				return;
+			}
+			j.success("Template updated"), W(!1);
+		}
+	}, Fe = async () => {
+		if (F) try {
+			await Se(F.id), u() && d("success"), P("prompt-templates");
+		} catch (e) {
+			throw u() && d("error"), e;
+		}
+	}, Z = (e) => e.replace(/\{\{(\w+)\}\}/g, "<span class=\"bg-action-primary-bg/20 text-primary px-1 rounded font-mono\">{{$1}}</span>");
+	if (N) return /* @__PURE__ */ S(n, {
+		title: "Create Prompt Template",
+		description: "Define a reusable prompt template with variables",
+		actions: /* @__PURE__ */ C("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ S(c, {
+				variant: "outline",
+				onClick: () => P("prompt-templates"),
+				children: "Cancel"
+			}), /* @__PURE__ */ S(c, {
+				leftIcon: /* @__PURE__ */ S(O, { size: 16 }),
+				onClick: ke,
+				isLoading: ye,
+				disabled: !K.name || !K.slug,
+				children: "Create Template"
+			})]
+		}),
+		children: /* @__PURE__ */ C("div", {
+			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+			children: [/* @__PURE__ */ C("div", {
+				className: "lg:col-span-2 space-y-6",
+				children: [
+					/* @__PURE__ */ C(r, { children: [/* @__PURE__ */ S(o, { children: /* @__PURE__ */ S(s, { children: "Basic Information" }) }), /* @__PURE__ */ C(i, {
+						className: "space-y-4",
+						children: [
+							/* @__PURE__ */ C("div", {
+								className: "grid grid-cols-2 gap-4",
+								children: [/* @__PURE__ */ S(m, {
+									label: "Template Name",
+									required: !0,
+									children: /* @__PURE__ */ S(h, {
+										placeholder: "e.g., Technical Support Template",
+										value: K.name,
+										onChange: (e) => q({
+											...K,
+											name: e.target.value
+										})
+									})
+								}), /* @__PURE__ */ S(m, {
+									label: "Slug",
+									required: !0,
+									description: "Unique identifier (lowercase, dashes)",
+									children: /* @__PURE__ */ S(h, {
+										placeholder: "e.g., technical-support",
+										value: K.slug,
+										onChange: (e) => q({
+											...K,
+											slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, "-")
+										})
+									})
+								})]
+							}),
+							/* @__PURE__ */ S(m, {
+								label: "Description",
+								children: /* @__PURE__ */ S(g, {
+									placeholder: "What is this template used for?",
+									value: K.description,
+									onChange: (e) => q({
+										...K,
+										description: e.target.value
+									}),
+									rows: 2
+								})
+							}),
+							/* @__PURE__ */ S(m, {
+								label: "Visibility",
+								children: /* @__PURE__ */ C("select", {
+									className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+									value: K.visibility,
+									onChange: (e) => q({
+										...K,
+										visibility: e.target.value
+									}),
+									children: [
+										/* @__PURE__ */ S("option", {
+											value: "PRIVATE",
+											children: "Private"
+										}),
+										/* @__PURE__ */ S("option", {
+											value: "WORKSPACE",
+											children: "Workspace"
+										}),
+										/* @__PURE__ */ S("option", {
+											value: "PUBLIC",
+											children: "Public"
+										})
+									]
+								})
+							})
+						]
+					})] }),
+					/* @__PURE__ */ C(r, { children: [/* @__PURE__ */ C(o, { children: [/* @__PURE__ */ C(s, {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ S(w, { size: 18 }), "Template Content"]
+					}), /* @__PURE__ */ C(a, { children: [
+						"Use ",
+						"{{variable_name}}",
+						" syntax for variables"
+					] })] }), /* @__PURE__ */ C(i, { children: [/* @__PURE__ */ S(g, {
+						className: "font-mono text-sm min-h-[300px]",
+						placeholder: "You are a helpful assistant for {{company_name}}.\n\nYour role is to help users with {{task_type}}.\n\nGuidelines:\n- Be helpful and friendly\n- Provide accurate information\n- Reference: {{docs_url}}",
+						value: K.templateText,
+						onChange: (e) => q({
+							...K,
+							templateText: e.target.value
+						})
+					}), J.length > 0 && /* @__PURE__ */ C("div", {
+						className: "mt-3 flex items-center gap-2",
+						children: [/* @__PURE__ */ S("span", {
+							className: "text-sm text-text-secondary",
+							children: "Detected variables:"
+						}), J.map((e) => /* @__PURE__ */ S(l, {
+							variant: "secondary",
+							className: "font-mono",
+							children: e
+						}, e))]
+					})] })] }),
+					/* @__PURE__ */ C(r, { children: [/* @__PURE__ */ C(o, { children: [/* @__PURE__ */ C(s, {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ C("span", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ S(A, { size: 18 }), "Variables"]
+						}), /* @__PURE__ */ S(c, {
+							variant: "outline",
+							size: "sm",
+							onClick: Ae,
+							children: "Add Variable"
+						})]
+					}), /* @__PURE__ */ S(a, { children: "Define the variables used in your template" })] }), /* @__PURE__ */ S(i, { children: K.variables.length > 0 ? /* @__PURE__ */ S("div", {
+						className: "space-y-4",
+						children: K.variables.map((e, t) => /* @__PURE__ */ C("div", {
+							className: "p-4 border rounded-lg bg-bg-sunken/30 space-y-3",
+							children: [/* @__PURE__ */ C("div", {
+								className: "grid grid-cols-4 gap-3",
+								children: [
+									/* @__PURE__ */ S(m, {
+										label: "Name",
+										children: /* @__PURE__ */ S(h, {
+											className: "font-mono",
+											placeholder: "variable_name",
+											value: e.name,
+											onChange: (e) => Y(t, { name: e.target.value })
+										})
+									}),
+									/* @__PURE__ */ S(m, {
+										label: "Type",
+										children: /* @__PURE__ */ S("select", {
+											className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+											value: e.type,
+											onChange: (e) => Y(t, { type: _(e.target.value, M, "string") }),
+											children: M.map((e) => /* @__PURE__ */ S("option", {
+												value: e,
+												children: e
+											}, e))
+										})
+									}),
+									/* @__PURE__ */ S(m, {
+										label: "Default Value",
+										children: /* @__PURE__ */ S(h, {
+											placeholder: "Optional",
+											value: String(e.defaultValue || ""),
+											onChange: (e) => Y(t, { defaultValue: e.target.value || void 0 })
+										})
+									}),
+									/* @__PURE__ */ C("div", {
+										className: "flex items-end gap-2",
+										children: [/* @__PURE__ */ C("label", {
+											className: "flex items-center gap-2 h-10",
+											children: [/* @__PURE__ */ S("input", {
+												type: "checkbox",
+												checked: e.required,
+												onChange: (e) => Y(t, { required: e.target.checked }),
+												className: "h-4 w-4"
+											}), /* @__PURE__ */ S("span", {
+												className: "text-sm",
+												children: "Required"
+											})]
+										}), /* @__PURE__ */ S(c, {
+											variant: "ghost",
+											size: "sm",
+											className: "text-status-error-text",
+											onClick: () => je(t),
+											children: "Remove"
+										})]
+									})
+								]
+							}), /* @__PURE__ */ S(m, {
+								label: "Description",
+								children: /* @__PURE__ */ S(h, {
+									placeholder: "What is this variable for?",
+									value: e.description || "",
+									onChange: (e) => Y(t, { description: e.target.value })
+								})
+							})]
+						}, t))
+					}) : /* @__PURE__ */ C("div", {
+						className: "text-center py-8 text-text-secondary",
+						children: [
+							/* @__PURE__ */ S(A, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
+							/* @__PURE__ */ S("p", { children: "No variables defined yet" }),
+							/* @__PURE__ */ C("p", {
+								className: "text-sm",
+								children: [
+									"Variables are automatically detected from ",
+									"{{variable}}",
+									" syntax"
+								]
+							})
+						]
+					}) })] })
+				]
+			}), /* @__PURE__ */ C("div", {
+				className: "space-y-6",
+				children: [/* @__PURE__ */ C(r, { children: [/* @__PURE__ */ S(o, { children: /* @__PURE__ */ C(s, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ S(T, { size: 18 }), "Preview"]
+				}) }), /* @__PURE__ */ S(i, { children: /* @__PURE__ */ S("div", {
+					className: "p-4 bg-bg-sunken rounded-lg text-sm whitespace-pre-wrap font-mono",
+					dangerouslySetInnerHTML: { __html: Z(K.templateText || "Enter template text...") }
+				}) })] }), /* @__PURE__ */ C(r, { children: [/* @__PURE__ */ S(o, { children: /* @__PURE__ */ S(s, { children: "Quick Tips" }) }), /* @__PURE__ */ C(i, {
+					className: "text-sm space-y-2",
+					children: [
+						/* @__PURE__ */ C("p", { children: [
+							/* @__PURE__ */ S("strong", { children: "Variables:" }),
+							" Use ",
+							"{{name}}",
+							" syntax"
+						] }),
+						/* @__PURE__ */ S("p", { children: /* @__PURE__ */ S("strong", { children: "Best Practices:" }) }),
+						/* @__PURE__ */ C("ul", {
+							className: "list-disc list-inside text-text-secondary space-y-1",
+							children: [
+								/* @__PURE__ */ S("li", { children: "Use descriptive variable names" }),
+								/* @__PURE__ */ S("li", { children: "Provide default values when possible" }),
+								/* @__PURE__ */ S("li", { children: "Include example inputs for testing" }),
+								/* @__PURE__ */ S("li", { children: "Version your templates for changes" })
+							]
+						})
+					]
+				})] })]
+			})]
+		})
+	});
+	if (I) return /* @__PURE__ */ S(n, {
+		title: "Loading...",
+		children: /* @__PURE__ */ S("div", { className: "h-96 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" })
+	});
+	if (!F) return /* @__PURE__ */ S(n, {
+		title: "Template Not Found",
+		children: /* @__PURE__ */ S(p, {
+			illustration: "empty-files",
+			title: "Template Not Found",
+			description: "This prompt template doesn't exist.",
+			action: /* @__PURE__ */ S(c, {
+				onClick: () => P("prompt-templates"),
+				children: "Back to Templates"
+			})
+		})
+	});
+	let Q = y(F), $ = v(F);
+	return /* @__PURE__ */ S(n, {
+		title: /* @__PURE__ */ C("div", {
+			className: "flex items-center gap-3",
+			children: [
+				/* @__PURE__ */ S(c, {
+					variant: "ghost",
+					size: "icon",
+					onClick: () => P("prompt-templates"),
+					children: /* @__PURE__ */ S(de, { size: 20 })
+				}),
+				/* @__PURE__ */ S("div", {
+					className: "p-2 rounded-lg bg-action-primary-bg/10",
+					children: /* @__PURE__ */ S(E, { className: "h-6 w-6 text-primary" })
+				}),
+				/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ C("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ S("span", { children: F.name }),
+						/* @__PURE__ */ S(ee, { status: F.status }),
+						/* @__PURE__ */ C(l, {
+							variant: "secondary",
+							className: "font-mono",
+							children: ["v", F.version]
+						})
+					]
+				}), /* @__PURE__ */ C("p", {
+					className: "text-sm font-normal text-text-secondary",
+					children: [
+						F.slug,
+						" - ",
+						F.description
+					]
+				})] })
+			]
+		}),
+		actions: /* @__PURE__ */ C("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ S(c, {
+				variant: "outline",
+				leftIcon: S(z ? fe : pe, { size: 16 }),
+				onClick: Ne,
+				children: z ? "Copied!" : "Copy"
+			}), U ? /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(c, {
+				variant: "outline",
+				onClick: () => W(!1),
+				children: "Cancel"
+			}), /* @__PURE__ */ S(c, {
+				leftIcon: /* @__PURE__ */ S(O, { size: 16 }),
+				onClick: Pe,
+				isLoading: xe,
+				disabled: !K.name || !K.slug,
+				children: "Save Changes"
+			})] }) : Oe ? /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(c, {
+				variant: "outline",
+				onClick: () => G(!1),
+				children: "Cancel"
+			}), /* @__PURE__ */ S(c, {
+				variant: "destructive",
+				leftIcon: /* @__PURE__ */ S(k, { size: 16 }),
+				onClick: () => {
+					ne("medium"), Fe();
+				},
+				isLoading: Ce,
+				children: "Confirm Delete"
+			})] }) : /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(c, {
+				variant: "outline",
+				leftIcon: /* @__PURE__ */ S(me, { size: 16 }),
+				onClick: X,
+				children: "Edit Template"
+			}), /* @__PURE__ */ S(c, {
+				variant: "outline",
+				leftIcon: /* @__PURE__ */ S(k, { size: 16 }),
+				onClick: () => G(!0),
+				children: "Delete"
+			})] })]
+		}),
+		children: /* @__PURE__ */ C("div", {
+			className: "space-y-6",
+			children: [
+				/* @__PURE__ */ C(le, {
+					icon: /* @__PURE__ */ S(E, { size: 18 }),
+					children: [
+						"This is a single reusable prompt template — its content with",
+						" ",
+						/* @__PURE__ */ S("code", { children: "{{variables}}" }),
+						", its declared variables and example inputs, and its version history. Edit and preview it here to perfect the instructions, then reuse it across agents so they share consistent, version-controlled behaviour."
+					]
+				}),
+				U && /* @__PURE__ */ C(r, { children: [/* @__PURE__ */ C(o, { children: [/* @__PURE__ */ S(s, { children: "Edit Template" }), /* @__PURE__ */ S(a, { children: "Update template details and content" })] }), /* @__PURE__ */ C(i, {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ C("div", {
+							className: "grid grid-cols-2 gap-4",
+							children: [/* @__PURE__ */ S(m, {
+								label: "Template Name",
+								required: !0,
+								children: /* @__PURE__ */ S(h, {
+									placeholder: "e.g., Technical Support Template",
+									value: K.name,
+									onChange: (e) => q({
+										...K,
+										name: e.target.value
+									})
+								})
+							}), /* @__PURE__ */ S(m, {
+								label: "Slug",
+								required: !0,
+								description: "Unique identifier (lowercase, dashes)",
+								children: /* @__PURE__ */ S(h, {
+									placeholder: "e.g., technical-support",
+									value: K.slug,
+									onChange: (e) => q({
+										...K,
+										slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, "-")
+									})
+								})
+							})]
+						}),
+						/* @__PURE__ */ S(m, {
+							label: "Description",
+							children: /* @__PURE__ */ S(g, {
+								placeholder: "What is this template used for?",
+								value: K.description,
+								onChange: (e) => q({
+									...K,
+									description: e.target.value
+								}),
+								rows: 2
+							})
+						}),
+						/* @__PURE__ */ S(m, {
+							label: "Visibility",
+							children: /* @__PURE__ */ C("select", {
+								className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+								value: K.visibility,
+								onChange: (e) => q({
+									...K,
+									visibility: e.target.value
+								}),
+								children: [
+									/* @__PURE__ */ S("option", {
+										value: "PRIVATE",
+										children: "Private"
+									}),
+									/* @__PURE__ */ S("option", {
+										value: "WORKSPACE",
+										children: "Workspace"
+									}),
+									/* @__PURE__ */ S("option", {
+										value: "PUBLIC",
+										children: "Public"
+									})
+								]
+							})
+						}),
+						/* @__PURE__ */ S(m, {
+							label: "Template Content",
+							description: "Use {{variable_name}} syntax for variables",
+							children: /* @__PURE__ */ S(g, {
+								className: "font-mono text-sm min-h-[200px]",
+								value: K.templateText,
+								onChange: (e) => q({
+									...K,
+									templateText: e.target.value
+								})
+							})
+						}),
+						J.length > 0 && /* @__PURE__ */ C("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ S("span", {
+								className: "text-sm text-text-secondary",
+								children: "Detected variables:"
+							}), J.map((e) => /* @__PURE__ */ S(l, {
+								variant: "secondary",
+								className: "font-mono",
+								children: e
+							}, e))]
+						})
+					]
+				})] }),
+				/* @__PURE__ */ C("div", {
+					className: "grid grid-cols-2 md:grid-cols-4 gap-4",
+					children: [
+						/* @__PURE__ */ S(r, {
+							treatment: "glass",
+							glow: !0,
+							children: /* @__PURE__ */ C(i, {
+								className: "pt-6 text-center",
+								children: [/* @__PURE__ */ S("p", {
+									className: "text-3xl font-bold text-text-primary",
+									children: Q.length
+								}), /* @__PURE__ */ S("p", {
+									className: "text-sm text-text-secondary",
+									children: "Variables"
+								})]
+							})
+						}),
+						/* @__PURE__ */ S(r, { children: /* @__PURE__ */ C(i, {
+							className: "pt-6 text-center",
+							children: [/* @__PURE__ */ S("p", {
+								className: "text-3xl font-bold text-text-primary",
+								children: $.length
+							}), /* @__PURE__ */ S("p", {
+								className: "text-sm text-text-secondary",
+								children: "Examples"
+							})]
+						}) }),
+						/* @__PURE__ */ S(r, { children: /* @__PURE__ */ C(i, {
+							className: "pt-6 text-center",
+							children: [/* @__PURE__ */ S("p", {
+								className: "text-3xl font-bold text-text-primary",
+								children: F.revision
+							}), /* @__PURE__ */ S("p", {
+								className: "text-sm text-text-secondary",
+								children: "Revision"
+							})]
+						}) }),
+						/* @__PURE__ */ S(r, { children: /* @__PURE__ */ C(i, {
+							className: "pt-6 text-center",
+							children: [/* @__PURE__ */ S("p", {
+								className: "text-lg font-bold text-text-primary capitalize",
+								children: F.visibility.toLowerCase()
+							}), /* @__PURE__ */ S("p", {
+								className: "text-sm text-text-secondary",
+								children: "Visibility"
+							})]
+						}) })
+					]
+				}),
+				/* @__PURE__ */ C("div", {
+					className: "flex gap-2 border-b",
+					children: [
+						/* @__PURE__ */ C(c, {
+							variant: L === "edit" ? "default" : "ghost",
+							onClick: () => R("edit"),
+							children: [/* @__PURE__ */ S(w, { className: "h-4 w-4 mr-2" }), "Template"]
+						}),
+						/* @__PURE__ */ C(c, {
+							variant: L === "preview" ? "default" : "ghost",
+							onClick: () => R("preview"),
+							children: [/* @__PURE__ */ S(T, { className: "h-4 w-4 mr-2" }), "Preview"]
+						}),
+						/* @__PURE__ */ C(c, {
+							variant: L === "test" ? "default" : "ghost",
+							onClick: () => R("test"),
+							children: [/* @__PURE__ */ S(D, { className: "h-4 w-4 mr-2" }), "Test"]
+						})
+					]
+				}),
+				L === "edit" && /* @__PURE__ */ C("div", {
+					className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+					children: [/* @__PURE__ */ S("div", {
+						className: "lg:col-span-2",
+						children: /* @__PURE__ */ C(r, { children: [/* @__PURE__ */ S(o, { children: /* @__PURE__ */ S(s, { children: "Template Content" }) }), /* @__PURE__ */ S(i, { children: /* @__PURE__ */ S("div", {
+							className: "p-4 bg-bg-sunken rounded-lg font-mono text-sm whitespace-pre-wrap",
+							children: /* @__PURE__ */ S("div", { dangerouslySetInnerHTML: { __html: Z(F.templateText) } })
+						}) })] })
+					}), /* @__PURE__ */ S("div", { children: /* @__PURE__ */ C(r, { children: [/* @__PURE__ */ S(o, { children: /* @__PURE__ */ C(s, {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ S(A, { size: 18 }),
+							"Variables (",
+							Q.length,
+							")"
+						]
+					}) }), /* @__PURE__ */ S(i, { children: Q.length > 0 ? /* @__PURE__ */ S("div", {
+						className: "space-y-3",
+						children: Q.map((e, t) => /* @__PURE__ */ C("div", {
+							className: "p-3 border rounded-lg",
+							children: [
+								/* @__PURE__ */ C("div", {
+									className: "flex items-center justify-between mb-1",
+									children: [/* @__PURE__ */ S("span", {
+										className: "font-mono font-medium",
+										children: e.name
+									}), /* @__PURE__ */ C("div", {
+										className: "flex gap-1",
+										children: [/* @__PURE__ */ S(l, {
+											variant: "outline",
+											className: "text-xs",
+											children: e.type
+										}), e.required && /* @__PURE__ */ S(l, {
+											variant: "destructive",
+											className: "text-xs",
+											children: "required"
+										})]
+									})]
+								}),
+								e.description && /* @__PURE__ */ S("p", {
+									className: "text-sm text-text-secondary",
+									children: e.description
+								}),
+								e.defaultValue !== void 0 && /* @__PURE__ */ C("p", {
+									className: "text-xs text-text-secondary mt-1",
+									children: [
+										"Default:",
+										" ",
+										/* @__PURE__ */ S("code", {
+											className: "bg-bg-sunken px-1",
+											children: String(e.defaultValue)
+										})
+									]
+								})
+							]
+						}, t))
+					}) : /* @__PURE__ */ S("p", {
+						className: "text-text-secondary text-center py-4",
+						children: "No variables defined"
+					}) })] }) })]
+				}),
+				L === "preview" && /* @__PURE__ */ C(r, { children: [/* @__PURE__ */ C(o, { children: [/* @__PURE__ */ S(s, { children: "Rendered Preview" }), /* @__PURE__ */ S(a, { children: "Preview with example inputs (first example set)" })] }), /* @__PURE__ */ S(i, { children: /* @__PURE__ */ S("div", {
+					className: "p-4 bg-bg-sunken rounded-lg font-mono text-sm whitespace-pre-wrap",
+					children: $[0] ? F.templateText.replace(/\{\{(\w+)\}\}/g, (e, t) => {
+						let n = $[0][t];
+						return n === void 0 ? `{{${t}}}` : String(n);
+					}) : /* @__PURE__ */ S("span", {
+						className: "text-text-secondary",
+						children: "No example inputs defined. Add examples to preview rendered output."
+					})
+				}) })] }),
+				L === "test" && /* @__PURE__ */ C("div", {
+					className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
+					children: [/* @__PURE__ */ C(r, { children: [/* @__PURE__ */ C(o, { children: [/* @__PURE__ */ S(s, { children: "Test Inputs" }), /* @__PURE__ */ S(a, { children: "Enter values to test the template" })] }), /* @__PURE__ */ C(i, {
+						className: "space-y-4",
+						children: [Q.map((e) => /* @__PURE__ */ C(m, {
+							label: e.name,
+							required: e.required,
+							children: [/* @__PURE__ */ S(h, {
+								placeholder: e.defaultValue ? String(e.defaultValue) : `Enter ${e.name}`,
+								value: V[e.name] || "",
+								onChange: (t) => Ee({
+									...V,
+									[e.name]: t.target.value
+								})
+							}), e.description && /* @__PURE__ */ S("p", {
+								className: "text-xs text-text-secondary mt-1",
+								children: e.description
+							})]
+						}, e.name)), /* @__PURE__ */ S(c, {
+							className: "w-full",
+							leftIcon: /* @__PURE__ */ S(D, { size: 16 }),
+							onClick: Me,
+							isLoading: Te,
+							children: "Render Template"
+						})]
+					})] }), /* @__PURE__ */ C(r, { children: [/* @__PURE__ */ S(o, { children: /* @__PURE__ */ S(s, { children: "Output" }) }), /* @__PURE__ */ S(i, { children: H ? /* @__PURE__ */ S("div", {
+						className: "p-4 bg-bg-sunken rounded-lg font-mono text-sm whitespace-pre-wrap",
+						children: H
+					}) : /* @__PURE__ */ C("div", {
+						className: "p-8 text-center text-text-secondary",
+						children: [/* @__PURE__ */ S(D, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }), /* @__PURE__ */ S("p", { children: "Enter inputs and click \"Render Template\" to see output" })]
+					}) })] })]
+				}),
+				$.length > 0 && L === "edit" && /* @__PURE__ */ C(r, { children: [/* @__PURE__ */ C(o, { children: [/* @__PURE__ */ S(s, { children: "Example Inputs" }), /* @__PURE__ */ S(a, { children: "Pre-defined inputs for testing and documentation" })] }), /* @__PURE__ */ S(i, { children: /* @__PURE__ */ S("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+					children: $.map((e, t) => /* @__PURE__ */ C("div", {
+						className: "p-4 border rounded-lg bg-bg-sunken/30",
+						children: [/* @__PURE__ */ C("p", {
+							className: "text-sm font-medium mb-2",
+							children: ["Example ", t + 1]
+						}), /* @__PURE__ */ S("div", {
+							className: "space-y-1 text-sm",
+							children: Object.entries(e).map(([e, t]) => /* @__PURE__ */ C("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ C("span", {
+									className: "font-mono text-text-secondary",
+									children: [e, ":"]
+								}), /* @__PURE__ */ S("span", {
+									className: "font-mono truncate max-w-[60%]",
+									children: String(t)
+								})]
+							}, e))
+						})]
+					}, t))
+				}) })] }),
+				/* @__PURE__ */ C(r, { children: [/* @__PURE__ */ S(o, { children: /* @__PURE__ */ C(s, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ S(he, { size: 18 }), "Metadata"]
+				}) }), /* @__PURE__ */ S(i, { children: /* @__PURE__ */ C("div", {
+					className: "grid grid-cols-2 md:grid-cols-4 gap-6 text-sm",
+					children: [
+						/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+							className: "text-text-secondary",
+							children: "Created"
+						}), /* @__PURE__ */ S("p", {
+							className: "font-medium",
+							children: t(F.createdAt)
+						})] }),
+						/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+							className: "text-text-secondary",
+							children: "Updated"
+						}), /* @__PURE__ */ S("p", {
+							className: "font-medium",
+							children: t(F.updatedAt)
+						})] }),
+						/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+							className: "text-text-secondary",
+							children: "Tags"
+						}), /* @__PURE__ */ S("div", {
+							className: "flex gap-1",
+							children: F.tags.length > 0 ? F.tags.map((e) => /* @__PURE__ */ S(l, {
+								variant: "secondary",
+								className: "text-xs",
+								children: e
+							}, e)) : /* @__PURE__ */ S("span", {
+								className: "text-text-secondary",
+								children: "None"
+							})
+						})] })
+					]
+				}) })] })
+			]
+		})
+	});
+};
+//#endregion
+export { N as PromptTemplateDetailPage };
+
+//# sourceMappingURL=PromptTemplateDetailPage.js.map