@burdenoff/microfe-botmanor 2026.813.1

package/dist/botlit/pages/PromptTemplateDetailPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptTemplateDetailPage.js","names":[],"sources":["../../../src/botlit/pages/PromptTemplateDetailPage.tsx"],"sourcesContent":["/**\n * Prompt Template Detail Page\n * @module botlit/pages\n */\n\nimport type { FC } from 'react';\nimport { useState, useMemo } from 'react';\nimport { useParams } from 'react-router';\nimport { toast } from 'sonner';\nimport { useBotlit } from '../providers/BotlitProvider';\nimport {\n  isNative,\n  nativeCopyText,\n  nativeImpact,\n  nativeNotify,\n  nativeToast,\n} from '../../utils/nativeBridge';\nimport {\n  ArrowLeft,\n  FileText,\n  Variable,\n  Play,\n  Save,\n  Copy,\n  Check,\n  Settings,\n  Code,\n  Eye,\n  Edit3,\n  Trash2,\n} from 'lucide-react';\nimport { PageLayout } from '../components/PageLayout';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { EmptyState } from '../components/EmptyState';\nimport { Card, CardHeader, CardTitle, CardContent, CardDescription } from '../components/Card';\nimport { Button } from '../components/Button';\nimport { Input, Textarea, FormField } from '../components/Input';\nimport { StatusBadge, Badge } from '../components/Badge';\nimport {\n  usePromptTemplate,\n  useCreatePromptTemplate,\n  useUpdatePromptTemplate,\n  useDeletePromptTemplate,\n  useRenderPromptTemplate,\n} from '../hooks';\nimport {\n  promptTemplateExamples,\n  promptTemplateVariables,\n  type PromptTemplateVariable,\n} from '../hooks/usePromptTemplates';\nimport { formatRelativeTime } from '../utils/formatters';\nimport { toUnion } from '../utils/unions';\nimport type { Visibility } from '../types';\n\ninterface PromptTemplateDetailPageProps {\n  isNew?: boolean;\n}\n\nconst VARIABLE_TYPES = ['string', 'number', 'boolean', 'array', 'object'] as const;\n\nconst VISIBILITIES: Visibility[] = ['PRIVATE', 'WORKSPACE', 'PUBLIC'];\n\nexport const PromptTemplateDetailPage: FC<PromptTemplateDetailPageProps> = ({ isNew }) => {\n  const { templateId } = useParams();\n  const { navigateTo } = useBotlit();\n  const { data: template, loading } = usePromptTemplate(isNew ? undefined : templateId);\n  const { create: createTemplate, loading: createLoading } = useCreatePromptTemplate();\n  const { update: updateTemplate, loading: updateLoading } = useUpdatePromptTemplate();\n  const { remove: deleteTemplate, loading: deleteLoading } = useDeletePromptTemplate();\n  const { render: renderTemplate, loading: renderLoading } = useRenderPromptTemplate();\n\n  const [activeTab, setActiveTab] = useState<'edit' | 'preview' | 'test'>('edit');\n  const [copied, setCopied] = useState(false);\n  const [testInputs, setTestInputs] = useState<Record<string, string>>({});\n  const [renderedOutput, setRenderedOutput] = useState<string | null>(null);\n  const [isEditing, setIsEditing] = useState(false);\n  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);\n\n  const [formData, setFormData] = useState({\n    name: '',\n    slug: '',\n    description: '',\n    visibility: 'PRIVATE' as Visibility,\n    templateText: '',\n    variables: [] as PromptTemplateVariable[],\n    exampleInputs: [{}] as Record<string, unknown>[],\n  });\n\n  // Extract variables from template text\n  const detectedVariables = useMemo(() => {\n    const text = isNew ? formData.templateText : template?.templateText || '';\n    const regex = /\\{\\{(\\w+)\\}\\}/g;\n    const matches = new Set<string>();\n    let match;\n    while ((match = regex.exec(text)) !== null) {\n      matches.add(match[1]);\n    }\n    return Array.from(matches);\n  }, [isNew, formData.templateText, template?.templateText]);\n\n  const handleCreate = async () => {\n    if (!formData.name || !formData.slug) return;\n    try {\n      await createTemplate({\n        name: formData.name,\n        slug: formData.slug,\n        description: formData.description,\n        visibility: formData.visibility,\n        templateText: formData.templateText,\n        variables: formData.variables,\n        exampleInputs: formData.exampleInputs,\n      });\n    } catch (err) {\n      toast.error(err instanceof Error ? err.message : 'Failed to create prompt template');\n      return;\n    }\n    toast.success(`Template \"${formData.name}\" created`);\n    navigateTo('prompt-templates');\n  };\n\n  const handleAddVariable = () => {\n    setFormData({\n      ...formData,\n      variables: [\n        ...formData.variables,\n        { name: '', type: 'string', required: true, defaultValue: undefined },\n      ],\n    });\n  };\n\n  const handleUpdateVariable = (index: number, updates: Partial<PromptTemplateVariable>) => {\n    const newVariables = [...formData.variables];\n    newVariables[index] = { ...newVariables[index], ...updates };\n    setFormData({ ...formData, variables: newVariables });\n  };\n\n  const handleRemoveVariable = (index: number) => {\n    setFormData({\n      ...formData,\n      variables: formData.variables.filter((_, i) => i !== index),\n    });\n  };\n\n  const handleTestRender = async () => {\n    if (!template) return;\n    const result = await renderTemplate({\n      templateId: template.id,\n      variables: testInputs,\n    });\n    setRenderedOutput(result);\n  };\n\n  const handleCopyTemplate = async () => {\n    const text = template?.templateText || formData.templateText;\n    await nativeCopyText(text);\n    setCopied(true);\n    if (isNative()) void nativeToast('Copied');\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  const startEditing = () => {\n    if (template) {\n      setFormData({\n        name: template.name,\n        slug: template.slug,\n        description: template.description || '',\n        visibility: toUnion(template.visibility, VISIBILITIES, 'PRIVATE'),\n        templateText: template.templateText,\n        variables: promptTemplateVariables(template),\n        exampleInputs: promptTemplateExamples(template),\n      });\n      setIsEditing(true);\n    }\n  };\n\n  const handleUpdate = async () => {\n    if (!template || !formData.name || !formData.slug) return;\n    try {\n      await updateTemplate({\n        templateId: template.id,\n        input: {\n          name: formData.name,\n          slug: formData.slug,\n          description: formData.description,\n          visibility: formData.visibility,\n          templateText: formData.templateText,\n          variables: formData.variables,\n          exampleInputs: formData.exampleInputs,\n        },\n      });\n    } catch (err) {\n      toast.error(err instanceof Error ? err.message : 'Failed to update prompt template');\n      return;\n    }\n    toast.success('Template updated');\n    setIsEditing(false);\n  };\n\n  const handleDelete = async () => {\n    if (!template) return;\n    try {\n      await deleteTemplate(template.id);\n      if (isNative()) void nativeNotify('success');\n      navigateTo('prompt-templates');\n    } catch (err) {\n      if (isNative()) void nativeNotify('error');\n      throw err;\n    }\n  };\n\n  const highlightVariables = (text: string) => {\n    return text.replace(\n      /\\{\\{(\\w+)\\}\\}/g,\n      '<span class=\"bg-action-primary-bg/20 text-primary px-1 rounded font-mono\">{{$1}}</span>'\n    );\n  };\n\n  if (isNew) {\n    return (\n      <PageLayout\n        title=\"Create Prompt Template\"\n        description=\"Define a reusable prompt template with variables\"\n        actions={\n          <div className=\"flex gap-2\">\n            <Button variant=\"outline\" onClick={() => navigateTo('prompt-templates')}>\n              Cancel\n            </Button>\n            <Button\n              leftIcon={<Save size={16} />}\n              onClick={handleCreate}\n              isLoading={createLoading}\n              disabled={!formData.name || !formData.slug}\n            >\n              Create Template\n            </Button>\n          </div>\n        }\n      >\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          {/* Left: Form */}\n          <div className=\"lg:col-span-2 space-y-6\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Basic Information</CardTitle>\n              </CardHeader>\n              <CardContent className=\"space-y-4\">\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <FormField label=\"Template Name\" required>\n                    <Input\n                      placeholder=\"e.g., Technical Support Template\"\n                      value={formData.name}\n                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}\n                    />\n                  </FormField>\n\n                  <FormField\n                    label=\"Slug\"\n                    required\n                    description=\"Unique identifier (lowercase, dashes)\"\n                  >\n                    <Input\n                      placeholder=\"e.g., technical-support\"\n                      value={formData.slug}\n                      onChange={(e) =>\n                        setFormData({\n                          ...formData,\n                          slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '-'),\n                        })\n                      }\n                    />\n                  </FormField>\n                </div>\n\n                <FormField label=\"Description\">\n                  <Textarea\n                    placeholder=\"What is this template used for?\"\n                    value={formData.description}\n                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}\n                    rows={2}\n                  />\n                </FormField>\n\n                <FormField label=\"Visibility\">\n                  <select\n                    className=\"flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\"\n                    value={formData.visibility}\n                    onChange={(e) =>\n                      setFormData({ ...formData, visibility: e.target.value as Visibility })\n                    }\n                  >\n                    <option value=\"PRIVATE\">Private</option>\n                    <option value=\"WORKSPACE\">Workspace</option>\n                    <option value=\"PUBLIC\">Public</option>\n                  </select>\n                </FormField>\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"flex items-center gap-2\">\n                  <Code size={18} />\n                  Template Content\n                </CardTitle>\n                <CardDescription>Use {'{{variable_name}}'} syntax for variables</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Textarea\n                  className=\"font-mono text-sm min-h-[300px]\"\n                  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}}`}\n                  value={formData.templateText}\n                  onChange={(e) => setFormData({ ...formData, templateText: e.target.value })}\n                />\n                {detectedVariables.length > 0 && (\n                  <div className=\"mt-3 flex items-center gap-2\">\n                    <span className=\"text-sm text-text-secondary\">Detected variables:</span>\n                    {detectedVariables.map((v) => (\n                      <Badge key={v} variant=\"secondary\" className=\"font-mono\">\n                        {v}\n                      </Badge>\n                    ))}\n                  </div>\n                )}\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"flex items-center justify-between\">\n                  <span className=\"flex items-center gap-2\">\n                    <Variable size={18} />\n                    Variables\n                  </span>\n                  <Button variant=\"outline\" size=\"sm\" onClick={handleAddVariable}>\n                    Add Variable\n                  </Button>\n                </CardTitle>\n                <CardDescription>Define the variables used in your template</CardDescription>\n              </CardHeader>\n              <CardContent>\n                {formData.variables.length > 0 ? (\n                  <div className=\"space-y-4\">\n                    {formData.variables.map((variable, index) => (\n                      <div key={index} className=\"p-4 border rounded-lg bg-bg-sunken/30 space-y-3\">\n                        <div className=\"grid grid-cols-4 gap-3\">\n                          <FormField label=\"Name\">\n                            <Input\n                              className=\"font-mono\"\n                              placeholder=\"variable_name\"\n                              value={variable.name}\n                              onChange={(e) =>\n                                handleUpdateVariable(index, { name: e.target.value })\n                              }\n                            />\n                          </FormField>\n                          <FormField label=\"Type\">\n                            <select\n                              className=\"flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\"\n                              value={variable.type}\n                              onChange={(e) =>\n                                handleUpdateVariable(index, {\n                                  type: toUnion(e.target.value, VARIABLE_TYPES, 'string'),\n                                })\n                              }\n                            >\n                              {VARIABLE_TYPES.map((type) => (\n                                <option key={type} value={type}>\n                                  {type}\n                                </option>\n                              ))}\n                            </select>\n                          </FormField>\n                          <FormField label=\"Default Value\">\n                            <Input\n                              placeholder=\"Optional\"\n                              value={String(variable.defaultValue || '')}\n                              onChange={(e) =>\n                                handleUpdateVariable(index, {\n                                  defaultValue: e.target.value || undefined,\n                                })\n                              }\n                            />\n                          </FormField>\n                          <div className=\"flex items-end gap-2\">\n                            <label className=\"flex items-center gap-2 h-10\">\n                              <input\n                                type=\"checkbox\"\n                                checked={variable.required}\n                                onChange={(e) =>\n                                  handleUpdateVariable(index, { required: e.target.checked })\n                                }\n                                className=\"h-4 w-4\"\n                              />\n                              <span className=\"text-sm\">Required</span>\n                            </label>\n                            <Button\n                              variant=\"ghost\"\n                              size=\"sm\"\n                              className=\"text-status-error-text\"\n                              onClick={() => handleRemoveVariable(index)}\n                            >\n                              Remove\n                            </Button>\n                          </div>\n                        </div>\n                        <FormField label=\"Description\">\n                          <Input\n                            placeholder=\"What is this variable for?\"\n                            value={variable.description || ''}\n                            onChange={(e) =>\n                              handleUpdateVariable(index, { description: e.target.value })\n                            }\n                          />\n                        </FormField>\n                      </div>\n                    ))}\n                  </div>\n                ) : (\n                  <div className=\"text-center py-8 text-text-secondary\">\n                    <Variable className=\"h-8 w-8 mx-auto mb-2 opacity-50\" />\n                    <p>No variables defined yet</p>\n                    <p className=\"text-sm\">\n                      Variables are automatically detected from {'{{variable}}'} syntax\n                    </p>\n                  </div>\n                )}\n              </CardContent>\n            </Card>\n          </div>\n\n          {/* Right: Preview */}\n          <div className=\"space-y-6\">\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"flex items-center gap-2\">\n                  <Eye size={18} />\n                  Preview\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div\n                  className=\"p-4 bg-bg-sunken rounded-lg text-sm whitespace-pre-wrap font-mono\"\n                  dangerouslySetInnerHTML={{\n                    __html: highlightVariables(formData.templateText || 'Enter template text...'),\n                  }}\n                />\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader>\n                <CardTitle>Quick Tips</CardTitle>\n              </CardHeader>\n              <CardContent className=\"text-sm space-y-2\">\n                <p>\n                  <strong>Variables:</strong> Use {'{{name}}'} syntax\n                </p>\n                <p>\n                  <strong>Best Practices:</strong>\n                </p>\n                <ul className=\"list-disc list-inside text-text-secondary space-y-1\">\n                  <li>Use descriptive variable names</li>\n                  <li>Provide default values when possible</li>\n                  <li>Include example inputs for testing</li>\n                  <li>Version your templates for changes</li>\n                </ul>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  if (loading) {\n    return (\n      <PageLayout title=\"Loading...\">\n        <div className=\"h-96 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg\" />\n      </PageLayout>\n    );\n  }\n\n  if (!template) {\n    return (\n      <PageLayout title=\"Template Not Found\">\n        <EmptyState\n          illustration=\"empty-files\"\n          title=\"Template Not Found\"\n          description=\"This prompt template doesn't exist.\"\n          action={<Button onClick={() => navigateTo('prompt-templates')}>Back to Templates</Button>}\n        />\n      </PageLayout>\n    );\n  }\n\n  // `variables`/`exampleInputs` are free-form JSON columns — normalise once.\n  const templateVariables = promptTemplateVariables(template);\n  const templateExamples = promptTemplateExamples(template);\n\n  return (\n    <PageLayout\n      title={\n        <div className=\"flex items-center gap-3\">\n          <Button variant=\"ghost\" size=\"icon\" onClick={() => navigateTo('prompt-templates')}>\n            <ArrowLeft size={20} />\n          </Button>\n          <div className=\"p-2 rounded-lg bg-action-primary-bg/10\">\n            <FileText className=\"h-6 w-6 text-primary\" />\n          </div>\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <span>{template.name}</span>\n              <StatusBadge status={template.status} />\n              <Badge variant=\"secondary\" className=\"font-mono\">\n                v{template.version}\n              </Badge>\n            </div>\n            <p className=\"text-sm font-normal text-text-secondary\">\n              {template.slug} - {template.description}\n            </p>\n          </div>\n        </div>\n      }\n      actions={\n        <div className=\"flex gap-2\">\n          <Button\n            variant=\"outline\"\n            leftIcon={copied ? <Check size={16} /> : <Copy size={16} />}\n            onClick={handleCopyTemplate}\n          >\n            {copied ? 'Copied!' : 'Copy'}\n          </Button>\n          {isEditing ? (\n            <>\n              <Button variant=\"outline\" onClick={() => setIsEditing(false)}>\n                Cancel\n              </Button>\n              <Button\n                leftIcon={<Save size={16} />}\n                onClick={handleUpdate}\n                isLoading={updateLoading}\n                disabled={!formData.name || !formData.slug}\n              >\n                Save Changes\n              </Button>\n            </>\n          ) : showDeleteConfirm ? (\n            <>\n              <Button variant=\"outline\" onClick={() => setShowDeleteConfirm(false)}>\n                Cancel\n              </Button>\n              <Button\n                variant=\"destructive\"\n                leftIcon={<Trash2 size={16} />}\n                onClick={() => {\n                  nativeImpact('medium');\n                  void handleDelete();\n                }}\n                isLoading={deleteLoading}\n              >\n                Confirm Delete\n              </Button>\n            </>\n          ) : (\n            <>\n              <Button variant=\"outline\" leftIcon={<Edit3 size={16} />} onClick={startEditing}>\n                Edit Template\n              </Button>\n              <Button\n                variant=\"outline\"\n                leftIcon={<Trash2 size={16} />}\n                onClick={() => setShowDeleteConfirm(true)}\n              >\n                Delete\n              </Button>\n            </>\n          )}\n        </div>\n      }\n    >\n      <div className=\"space-y-6\">\n        <PagePurpose icon={<FileText size={18} />}>\n          This is a single reusable prompt template — its content with{' '}\n          <code>{'{{variables}}'}</code>, its declared variables and example inputs, and its version\n          history. Edit and preview it here to perfect the instructions, then reuse it across agents\n          so they share consistent, version-controlled behaviour.\n        </PagePurpose>\n\n        {/* Edit Form */}\n        {isEditing && (\n          <Card>\n            <CardHeader>\n              <CardTitle>Edit Template</CardTitle>\n              <CardDescription>Update template details and content</CardDescription>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <div className=\"grid grid-cols-2 gap-4\">\n                <FormField label=\"Template Name\" required>\n                  <Input\n                    placeholder=\"e.g., Technical Support Template\"\n                    value={formData.name}\n                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}\n                  />\n                </FormField>\n\n                <FormField\n                  label=\"Slug\"\n                  required\n                  description=\"Unique identifier (lowercase, dashes)\"\n                >\n                  <Input\n                    placeholder=\"e.g., technical-support\"\n                    value={formData.slug}\n                    onChange={(e) =>\n                      setFormData({\n                        ...formData,\n                        slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '-'),\n                      })\n                    }\n                  />\n                </FormField>\n              </div>\n\n              <FormField label=\"Description\">\n                <Textarea\n                  placeholder=\"What is this template used for?\"\n                  value={formData.description}\n                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}\n                  rows={2}\n                />\n              </FormField>\n\n              <FormField label=\"Visibility\">\n                <select\n                  className=\"flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\"\n                  value={formData.visibility}\n                  onChange={(e) =>\n                    setFormData({ ...formData, visibility: e.target.value as Visibility })\n                  }\n                >\n                  <option value=\"PRIVATE\">Private</option>\n                  <option value=\"WORKSPACE\">Workspace</option>\n                  <option value=\"PUBLIC\">Public</option>\n                </select>\n              </FormField>\n\n              <FormField\n                label=\"Template Content\"\n                description=\"Use {{variable_name}} syntax for variables\"\n              >\n                <Textarea\n                  className=\"font-mono text-sm min-h-[200px]\"\n                  value={formData.templateText}\n                  onChange={(e) => setFormData({ ...formData, templateText: e.target.value })}\n                />\n              </FormField>\n\n              {detectedVariables.length > 0 && (\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-sm text-text-secondary\">Detected variables:</span>\n                  {detectedVariables.map((v) => (\n                    <Badge key={v} variant=\"secondary\" className=\"font-mono\">\n                      {v}\n                    </Badge>\n                  ))}\n                </div>\n              )}\n            </CardContent>\n          </Card>\n        )}\n\n        {/* Stats */}\n        <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n          <Card treatment=\"glass\" glow>\n            <CardContent className=\"pt-6 text-center\">\n              <p className=\"text-3xl font-bold text-text-primary\">{templateVariables.length}</p>\n              <p className=\"text-sm text-text-secondary\">Variables</p>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent className=\"pt-6 text-center\">\n              <p className=\"text-3xl font-bold text-text-primary\">{templateExamples.length}</p>\n              <p className=\"text-sm text-text-secondary\">Examples</p>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent className=\"pt-6 text-center\">\n              <p className=\"text-3xl font-bold text-text-primary\">{template.revision}</p>\n              <p className=\"text-sm text-text-secondary\">Revision</p>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent className=\"pt-6 text-center\">\n              <p className=\"text-lg font-bold text-text-primary capitalize\">\n                {template.visibility.toLowerCase()}\n              </p>\n              <p className=\"text-sm text-text-secondary\">Visibility</p>\n            </CardContent>\n          </Card>\n        </div>\n\n        {/* Tabs */}\n        <div className=\"flex gap-2 border-b\">\n          <Button\n            variant={activeTab === 'edit' ? 'default' : 'ghost'}\n            onClick={() => setActiveTab('edit')}\n          >\n            <Code className=\"h-4 w-4 mr-2\" />\n            Template\n          </Button>\n          <Button\n            variant={activeTab === 'preview' ? 'default' : 'ghost'}\n            onClick={() => setActiveTab('preview')}\n          >\n            <Eye className=\"h-4 w-4 mr-2\" />\n            Preview\n          </Button>\n          <Button\n            variant={activeTab === 'test' ? 'default' : 'ghost'}\n            onClick={() => setActiveTab('test')}\n          >\n            <Play className=\"h-4 w-4 mr-2\" />\n            Test\n          </Button>\n        </div>\n\n        {/* Tab Content */}\n        {activeTab === 'edit' && (\n          <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n            <div className=\"lg:col-span-2\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Template Content</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"p-4 bg-bg-sunken rounded-lg font-mono text-sm whitespace-pre-wrap\">\n                    <div\n                      dangerouslySetInnerHTML={{\n                        __html: highlightVariables(template.templateText),\n                      }}\n                    />\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n\n            <div>\n              <Card>\n                <CardHeader>\n                  <CardTitle className=\"flex items-center gap-2\">\n                    <Variable size={18} />\n                    Variables ({templateVariables.length})\n                  </CardTitle>\n                </CardHeader>\n                <CardContent>\n                  {templateVariables.length > 0 ? (\n                    <div className=\"space-y-3\">\n                      {templateVariables.map(\n                        (\n                          v: {\n                            name: string;\n                            type: string;\n                            required?: boolean;\n                            description?: string | null;\n                            defaultValue?: unknown;\n                          },\n                          i: number\n                        ) => (\n                          <div key={i} className=\"p-3 border rounded-lg\">\n                            <div className=\"flex items-center justify-between mb-1\">\n                              <span className=\"font-mono font-medium\">{v.name}</span>\n                              <div className=\"flex gap-1\">\n                                <Badge variant=\"outline\" className=\"text-xs\">\n                                  {v.type}\n                                </Badge>\n                                {v.required && (\n                                  <Badge variant=\"destructive\" className=\"text-xs\">\n                                    required\n                                  </Badge>\n                                )}\n                              </div>\n                            </div>\n                            {v.description && (\n                              <p className=\"text-sm text-text-secondary\">{v.description}</p>\n                            )}\n                            {v.defaultValue !== undefined && (\n                              <p className=\"text-xs text-text-secondary mt-1\">\n                                Default:{' '}\n                                <code className=\"bg-bg-sunken px-1\">{String(v.defaultValue)}</code>\n                              </p>\n                            )}\n                          </div>\n                        )\n                      )}\n                    </div>\n                  ) : (\n                    <p className=\"text-text-secondary text-center py-4\">No variables defined</p>\n                  )}\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n        )}\n\n        {activeTab === 'preview' && (\n          <Card>\n            <CardHeader>\n              <CardTitle>Rendered Preview</CardTitle>\n              <CardDescription>Preview with example inputs (first example set)</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"p-4 bg-bg-sunken rounded-lg font-mono text-sm whitespace-pre-wrap\">\n                {templateExamples[0] ? (\n                  template.templateText.replace(/\\{\\{(\\w+)\\}\\}/g, (_: string, key: string) => {\n                    const value = templateExamples[0][key];\n                    return value !== undefined ? String(value) : `{{${key}}}`;\n                  })\n                ) : (\n                  <span className=\"text-text-secondary\">\n                    No example inputs defined. Add examples to preview rendered output.\n                  </span>\n                )}\n              </div>\n            </CardContent>\n          </Card>\n        )}\n\n        {activeTab === 'test' && (\n          <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Test Inputs</CardTitle>\n                <CardDescription>Enter values to test the template</CardDescription>\n              </CardHeader>\n              <CardContent className=\"space-y-4\">\n                {templateVariables.map((v) => (\n                  <FormField key={v.name} label={v.name} required={v.required}>\n                    <Input\n                      placeholder={v.defaultValue ? String(v.defaultValue) : `Enter ${v.name}`}\n                      value={testInputs[v.name] || ''}\n                      onChange={(e) => setTestInputs({ ...testInputs, [v.name]: e.target.value })}\n                    />\n                    {v.description && (\n                      <p className=\"text-xs text-text-secondary mt-1\">{v.description}</p>\n                    )}\n                  </FormField>\n                ))}\n                <Button\n                  className=\"w-full\"\n                  leftIcon={<Play size={16} />}\n                  onClick={handleTestRender}\n                  isLoading={renderLoading}\n                >\n                  Render Template\n                </Button>\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader>\n                <CardTitle>Output</CardTitle>\n              </CardHeader>\n              <CardContent>\n                {renderedOutput ? (\n                  <div className=\"p-4 bg-bg-sunken rounded-lg font-mono text-sm whitespace-pre-wrap\">\n                    {renderedOutput}\n                  </div>\n                ) : (\n                  <div className=\"p-8 text-center text-text-secondary\">\n                    <Play className=\"h-8 w-8 mx-auto mb-2 opacity-50\" />\n                    <p>Enter inputs and click \"Render Template\" to see output</p>\n                  </div>\n                )}\n              </CardContent>\n            </Card>\n          </div>\n        )}\n\n        {/* Example Inputs */}\n        {templateExamples.length > 0 && activeTab === 'edit' && (\n          <Card>\n            <CardHeader>\n              <CardTitle>Example Inputs</CardTitle>\n              <CardDescription>Pre-defined inputs for testing and documentation</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n                {templateExamples.map((example, index) => (\n                  <div key={index} className=\"p-4 border rounded-lg bg-bg-sunken/30\">\n                    <p className=\"text-sm font-medium mb-2\">Example {index + 1}</p>\n                    <div className=\"space-y-1 text-sm\">\n                      {Object.entries(example).map(([key, value]) => (\n                        <div key={key} className=\"flex justify-between\">\n                          <span className=\"font-mono text-text-secondary\">{key}:</span>\n                          <span className=\"font-mono truncate max-w-[60%]\">{String(value)}</span>\n                        </div>\n                      ))}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n        )}\n\n        {/* Metadata */}\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"flex items-center gap-2\">\n              <Settings size={18} />\n              Metadata\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <div className=\"grid grid-cols-2 md:grid-cols-4 gap-6 text-sm\">\n              <div>\n                <p className=\"text-text-secondary\">Created</p>\n                <p className=\"font-medium\">{formatRelativeTime(template.createdAt)}</p>\n              </div>\n              <div>\n                <p className=\"text-text-secondary\">Updated</p>\n                <p className=\"font-medium\">{formatRelativeTime(template.updatedAt)}</p>\n              </div>\n              <div>\n                <p className=\"text-text-secondary\">Tags</p>\n                <div className=\"flex gap-1\">\n                  {template.tags.length > 0 ? (\n                    template.tags.map((tag: string) => (\n                      <Badge key={tag} variant=\"secondary\" className=\"text-xs\">\n                        {tag}\n                      </Badge>\n                    ))\n                  ) : (\n                    <span className=\"text-text-secondary\">None</span>\n                  )}\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}

package/dist/botlit/pages/PromptTemplatesPage.js

@@ -0,0 +1,269 @@
+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 u } from "../components/Badge.js";
+import { EmptyState as d } from "../components/EmptyState.js";
+import { Input as f } from "../components/Input.js";
+import { ErrorState as p } from "../components/ErrorState.js";
+import { promptTemplateVariables as m, usePromptTemplates as h } from "../hooks/usePromptTemplates.js";
+import "../hooks/index.js";
+import { useState as g } from "react";
+import { GlassCard as _, PagePurpose as v } from "@burdenoff/fe-libs/ui";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { Link as x } from "react-router";
+import { Code as S, Copy as C, FileText as w, Filter as T, Play as E, Plus as D, Search as O, Tag as k, Variable as A } from "lucide-react";
+//#region src/botlit/pages/PromptTemplatesPage.tsx
+var j = () => {
+	let { getPath: j } = e(), [M, N] = g(""), { data: P, loading: F, error: I, refetch: L } = h({ search: M });
+	return /* @__PURE__ */ y(n, {
+		title: "Prompt Templates",
+		description: "Create and manage reusable prompt templates with variable support",
+		actions: /* @__PURE__ */ y(c, {
+			leftIcon: /* @__PURE__ */ y(D, { size: 16 }),
+			children: /* @__PURE__ */ y(x, {
+				to: j("prompt-templates/new"),
+				children: "Create Template"
+			})
+		}),
+		children: /* @__PURE__ */ b("div", {
+			className: "space-y-6",
+			children: [
+				/* @__PURE__ */ b(v, {
+					icon: /* @__PURE__ */ y(w, { size: 18 }),
+					children: [
+						"Prompt templates are the reusable instructions that shape how an agent thinks and replies. Write the system prompt once with ",
+						/* @__PURE__ */ y("code", { children: "{{variables}}" }),
+						" for the bits that change (role, company name, tone), version it, and reuse it across agents — so you can refine wording in one place instead of editing every agent by hand."
+					]
+				}),
+				/* @__PURE__ */ b("div", {
+					className: "flex items-center gap-4",
+					children: [/* @__PURE__ */ b("div", {
+						className: "relative flex-1 max-w-md",
+						children: [/* @__PURE__ */ y(O, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ y(f, {
+							placeholder: "Search templates...",
+							value: M,
+							onChange: (e) => N(e.target.value),
+							className: "pl-9"
+						})]
+					}), /* @__PURE__ */ y(c, {
+						variant: "outline",
+						leftIcon: /* @__PURE__ */ y(T, { size: 16 }),
+						children: "Filters"
+					})]
+				}),
+				F ? /* @__PURE__ */ y("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+					children: [
+						1,
+						2,
+						3,
+						4,
+						5,
+						6
+					].map((e) => /* @__PURE__ */ y("div", { className: "h-48 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" }, e))
+				}) : I ? /* @__PURE__ */ y(p, {
+					resource: "prompt templates",
+					error: I,
+					onRetry: () => void L()
+				}) : P.length > 0 ? /* @__PURE__ */ y("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+					children: P.map((e) => {
+						let n = m(e).length;
+						return /* @__PURE__ */ y(x, {
+							to: j(`prompt-templates/${e.id}`),
+							children: /* @__PURE__ */ b(r, {
+								className: "h-full hover:border-primary/50 transition-colors cursor-pointer group",
+								children: [/* @__PURE__ */ y(o, { children: /* @__PURE__ */ b("div", {
+									className: "flex items-start justify-between",
+									children: [/* @__PURE__ */ b("div", {
+										className: "flex items-center gap-3",
+										children: [/* @__PURE__ */ y("div", {
+											className: "p-2 bg-action-primary-bg/10 rounded-lg",
+											children: /* @__PURE__ */ y(w, { className: "h-5 w-5 text-primary" })
+										}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y(s, {
+											className: "text-base",
+											children: e.name
+										}), /* @__PURE__ */ y(a, {
+											className: "text-xs",
+											children: e.slug
+										})] })]
+									}), /* @__PURE__ */ y(u, { status: e.status })]
+								}) }), /* @__PURE__ */ y(i, { children: /* @__PURE__ */ b("div", {
+									className: "space-y-3",
+									children: [
+										/* @__PURE__ */ y("p", {
+											className: "text-sm text-text-secondary line-clamp-2",
+											children: e.description
+										}),
+										/* @__PURE__ */ b("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ y(A, {
+												size: 14,
+												className: "text-text-secondary"
+											}), /* @__PURE__ */ b("span", {
+												className: "text-sm",
+												children: [
+													n,
+													" variable",
+													n === 1 ? "" : "s"
+												]
+											})]
+										}),
+										/* @__PURE__ */ b("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ y(k, {
+												size: 14,
+												className: "text-text-secondary"
+											}), /* @__PURE__ */ b("span", {
+												className: "text-sm",
+												children: ["v", e.version]
+											})]
+										}),
+										/* @__PURE__ */ b("div", {
+											className: "pt-3 border-t border-border-subtle flex items-center justify-between",
+											children: [/* @__PURE__ */ y("span", {
+												className: "text-xs text-text-secondary",
+												children: t(e.createdAt)
+											}), /* @__PURE__ */ b("div", {
+												className: "flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity",
+												children: [/* @__PURE__ */ y(c, {
+													variant: "ghost",
+													size: "icon",
+													className: "h-7 w-7",
+													onClick: (e) => e.preventDefault(),
+													children: /* @__PURE__ */ y(C, { size: 14 })
+												}), /* @__PURE__ */ y(c, {
+													variant: "ghost",
+													size: "icon",
+													className: "h-7 w-7",
+													onClick: (e) => e.preventDefault(),
+													children: /* @__PURE__ */ y(E, { size: 14 })
+												})]
+											})]
+										})
+									]
+								}) })]
+							})
+						}, e.id);
+					})
+				}) : /* @__PURE__ */ y(d, {
+					illustration: "empty-files",
+					title: "No prompt templates",
+					description: "Create reusable prompt templates with variables to ensure consistent agent behavior.",
+					action: /* @__PURE__ */ y(c, {
+						leftIcon: /* @__PURE__ */ y(D, { size: 16 }),
+						children: /* @__PURE__ */ y(x, {
+							to: j("prompt-templates/new"),
+							children: "Create Template"
+						})
+					})
+				}),
+				/* @__PURE__ */ b(_, {
+					treatment: "glass",
+					glow: !0,
+					className: "p-6",
+					children: [
+						/* @__PURE__ */ b("div", {
+							className: "mb-4",
+							children: [/* @__PURE__ */ b("h2", {
+								className: "flex items-center gap-2 text-lg font-semibold tracking-tight text-text-primary",
+								children: [/* @__PURE__ */ y(S, { size: 18 }), "Template Syntax"]
+							}), /* @__PURE__ */ y("p", {
+								className: "text-sm text-text-secondary",
+								children: "Use variables in your prompts with double curly braces"
+							})]
+						}),
+						/* @__PURE__ */ b("div", {
+							className: "grid grid-cols-1 md:grid-cols-2 gap-6",
+							children: [/* @__PURE__ */ b("div", {
+								className: "space-y-3",
+								children: [
+									/* @__PURE__ */ y("h4", {
+										className: "font-medium",
+										children: "Variable Syntax"
+									}),
+									/* @__PURE__ */ b("div", {
+										className: "bg-bg-sunken p-4 rounded-lg font-mono text-sm",
+										children: [/* @__PURE__ */ y("p", { children: "You are a {{role}} for {{company_name}}." }), /* @__PURE__ */ y("p", {
+											className: "mt-2",
+											children: "Guidelines: {{guidelines}}"
+										})]
+									}),
+									/* @__PURE__ */ y("p", {
+										className: "text-sm text-text-secondary",
+										children: "Variables are replaced at runtime with values provided by the agent configuration."
+									})
+								]
+							}), /* @__PURE__ */ b("div", {
+								className: "space-y-3",
+								children: [/* @__PURE__ */ y("h4", {
+									className: "font-medium",
+									children: "Variable Types"
+								}), /* @__PURE__ */ b("ul", {
+									className: "text-sm space-y-2",
+									children: [
+										/* @__PURE__ */ b("li", {
+											className: "flex items-start gap-2",
+											children: [/* @__PURE__ */ y(l, {
+												variant: "outline",
+												className: "mt-0.5",
+												children: "string"
+											}), /* @__PURE__ */ y("span", {
+												className: "text-text-secondary",
+												children: "Text values like names, descriptions"
+											})]
+										}),
+										/* @__PURE__ */ b("li", {
+											className: "flex items-start gap-2",
+											children: [/* @__PURE__ */ y(l, {
+												variant: "outline",
+												className: "mt-0.5",
+												children: "array"
+											}), /* @__PURE__ */ y("span", {
+												className: "text-text-secondary",
+												children: "Lists rendered as bullet points"
+											})]
+										}),
+										/* @__PURE__ */ b("li", {
+											className: "flex items-start gap-2",
+											children: [/* @__PURE__ */ y(l, {
+												variant: "outline",
+												className: "mt-0.5",
+												children: "object"
+											}), /* @__PURE__ */ y("span", {
+												className: "text-text-secondary",
+												children: "Structured data (JSON)"
+											})]
+										})
+									]
+								})]
+							})]
+						}),
+						/* @__PURE__ */ b("div", {
+							className: "mt-6 p-4 bg-bg-sunken/50 rounded-lg",
+							children: [/* @__PURE__ */ y("h4", {
+								className: "font-medium mb-2",
+								children: "Best Practices"
+							}), /* @__PURE__ */ b("ul", {
+								className: "text-sm text-text-secondary space-y-1",
+								children: [
+									/* @__PURE__ */ y("li", { children: "• Use descriptive variable names (company_name vs cn)" }),
+									/* @__PURE__ */ y("li", { children: "• Provide default values for optional variables" }),
+									/* @__PURE__ */ y("li", { children: "• Document expected values in variable descriptions" }),
+									/* @__PURE__ */ y("li", { children: "• Version your templates to track changes" })
+								]
+							})]
+						})
+					]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { j as PromptTemplatesPage };
+
+//# sourceMappingURL=PromptTemplatesPage.js.map

package/dist/botlit/pages/PromptTemplatesPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptTemplatesPage.js","names":[],"sources":["../../../src/botlit/pages/PromptTemplatesPage.tsx"],"sourcesContent":["/**\n * Prompt Templates Page\n * @module botlit/pages\n */\n\nimport type { FC } from 'react';\nimport { useState } from 'react';\nimport { Link } from 'react-router';\nimport { useBotlit } from '../providers/BotlitProvider';\nimport {\n  Plus,\n  Search as SearchIcon,\n  Filter,\n  FileText,\n  Code,\n  Variable,\n  Copy,\n  Play,\n  Tag,\n} from 'lucide-react';\nimport { PagePurpose, GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { Card, CardHeader, CardTitle, CardContent, CardDescription } from '../components/Card';\nimport { Button } from '../components/Button';\nimport { Input } from '../components/Input';\nimport { Badge, StatusBadge } from '../components/Badge';\nimport { EmptyState } from '../components/EmptyState';\nimport { ErrorState } from '../components/ErrorState';\nimport { usePromptTemplates, promptTemplateVariables, type PromptTemplateRecord } from '../hooks';\nimport { formatRelativeTime } from '../utils/formatters';\n\nexport const PromptTemplatesPage: FC = () => {\n  const { getPath } = useBotlit();\n  const [search, setSearch] = useState('');\n  const { data: templates, loading, error, refetch } = usePromptTemplates({ search });\n\n  return (\n    <PageLayout\n      title=\"Prompt Templates\"\n      description=\"Create and manage reusable prompt templates with variable support\"\n      actions={\n        <Button leftIcon={<Plus size={16} />}>\n          <Link to={getPath('prompt-templates/new')}>Create Template</Link>\n        </Button>\n      }\n    >\n      <div className=\"space-y-6\">\n        <PagePurpose icon={<FileText size={18} />}>\n          Prompt templates are the reusable instructions that shape how an agent thinks and replies.\n          Write the system prompt once with <code>{'{{variables}}'}</code> for the bits that change\n          (role, company name, tone), version it, and reuse it across agents — so you can refine\n          wording in one place instead of editing every agent by hand.\n        </PagePurpose>\n\n        {/* Search */}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"relative flex-1 max-w-md\">\n            <SearchIcon className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n            <Input\n              placeholder=\"Search templates...\"\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              className=\"pl-9\"\n            />\n          </div>\n          <Button variant=\"outline\" leftIcon={<Filter size={16} />}>\n            Filters\n          </Button>\n        </div>\n\n        {/* Templates List */}\n        {loading ? (\n          <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n            {[1, 2, 3, 4, 5, 6].map((i) => (\n              <div\n                key={i}\n                className=\"h-48 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg\"\n              />\n            ))}\n          </div>\n        ) : error ? (\n          <ErrorState resource=\"prompt templates\" error={error} onRetry={() => void refetch()} />\n        ) : templates.length > 0 ? (\n          <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n            {templates.map((template: PromptTemplateRecord) => {\n              const variableCount = promptTemplateVariables(template).length;\n              return (\n                <Link key={template.id} to={getPath(`prompt-templates/${template.id}`)}>\n                  <Card className=\"h-full hover:border-primary/50 transition-colors cursor-pointer group\">\n                    <CardHeader>\n                      <div className=\"flex items-start justify-between\">\n                        <div className=\"flex items-center gap-3\">\n                          <div className=\"p-2 bg-action-primary-bg/10 rounded-lg\">\n                            <FileText className=\"h-5 w-5 text-primary\" />\n                          </div>\n                          <div>\n                            <CardTitle className=\"text-base\">{template.name}</CardTitle>\n                            <CardDescription className=\"text-xs\">{template.slug}</CardDescription>\n                          </div>\n                        </div>\n                        <StatusBadge status={template.status} />\n                      </div>\n                    </CardHeader>\n                    <CardContent>\n                      <div className=\"space-y-3\">\n                        <p className=\"text-sm text-text-secondary line-clamp-2\">\n                          {template.description}\n                        </p>\n\n                        {/* Variables */}\n                        <div className=\"flex items-center gap-2\">\n                          <Variable size={14} className=\"text-text-secondary\" />\n                          <span className=\"text-sm\">\n                            {variableCount} variable{variableCount !== 1 ? 's' : ''}\n                          </span>\n                        </div>\n\n                        {/* Version */}\n                        <div className=\"flex items-center gap-2\">\n                          <Tag size={14} className=\"text-text-secondary\" />\n                          <span className=\"text-sm\">v{template.version}</span>\n                        </div>\n\n                        {/* Footer */}\n                        <div className=\"pt-3 border-t border-border-subtle flex items-center justify-between\">\n                          <span className=\"text-xs text-text-secondary\">\n                            {formatRelativeTime(template.createdAt)}\n                          </span>\n                          <div className=\"flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity\">\n                            <Button\n                              variant=\"ghost\"\n                              size=\"icon\"\n                              className=\"h-7 w-7\"\n                              onClick={(e) => e.preventDefault()}\n                            >\n                              <Copy size={14} />\n                            </Button>\n                            <Button\n                              variant=\"ghost\"\n                              size=\"icon\"\n                              className=\"h-7 w-7\"\n                              onClick={(e) => e.preventDefault()}\n                            >\n                              <Play size={14} />\n                            </Button>\n                          </div>\n                        </div>\n                      </div>\n                    </CardContent>\n                  </Card>\n                </Link>\n              );\n            })}\n          </div>\n        ) : (\n          <EmptyState\n            illustration=\"empty-files\"\n            title=\"No prompt templates\"\n            description=\"Create reusable prompt templates with variables to ensure consistent agent behavior.\"\n            action={\n              <Button leftIcon={<Plus size={16} />}>\n                <Link to={getPath('prompt-templates/new')}>Create Template</Link>\n              </Button>\n            }\n          />\n        )}\n\n        {/* Template Guide */}\n        <GlassCard treatment=\"glass\" glow className=\"p-6\">\n          <div className=\"mb-4\">\n            <h2 className=\"flex items-center gap-2 text-lg font-semibold tracking-tight text-text-primary\">\n              <Code size={18} />\n              Template Syntax\n            </h2>\n            <p className=\"text-sm text-text-secondary\">\n              Use variables in your prompts with double curly braces\n            </p>\n          </div>\n          <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n            <div className=\"space-y-3\">\n              <h4 className=\"font-medium\">Variable Syntax</h4>\n              <div className=\"bg-bg-sunken p-4 rounded-lg font-mono text-sm\">\n                <p>{'You are a {{role}} for {{company_name}}.'}</p>\n                <p className=\"mt-2\">{'Guidelines: {{guidelines}}'}</p>\n              </div>\n              <p className=\"text-sm text-text-secondary\">\n                Variables are replaced at runtime with values provided by the agent configuration.\n              </p>\n            </div>\n            <div className=\"space-y-3\">\n              <h4 className=\"font-medium\">Variable Types</h4>\n              <ul className=\"text-sm space-y-2\">\n                <li className=\"flex items-start gap-2\">\n                  <Badge variant=\"outline\" className=\"mt-0.5\">\n                    string\n                  </Badge>\n                  <span className=\"text-text-secondary\">Text values like names, descriptions</span>\n                </li>\n                <li className=\"flex items-start gap-2\">\n                  <Badge variant=\"outline\" className=\"mt-0.5\">\n                    array\n                  </Badge>\n                  <span className=\"text-text-secondary\">Lists rendered as bullet points</span>\n                </li>\n                <li className=\"flex items-start gap-2\">\n                  <Badge variant=\"outline\" className=\"mt-0.5\">\n                    object\n                  </Badge>\n                  <span className=\"text-text-secondary\">Structured data (JSON)</span>\n                </li>\n              </ul>\n            </div>\n          </div>\n\n          <div className=\"mt-6 p-4 bg-bg-sunken/50 rounded-lg\">\n            <h4 className=\"font-medium mb-2\">Best Practices</h4>\n            <ul className=\"text-sm text-text-secondary space-y-1\">\n              <li>• Use descriptive variable names (company_name vs cn)</li>\n              <li>• Provide default values for optional variables</li>\n              <li>• Document expected values in variable descriptions</li>\n              <li>• Version your templates to track changes</li>\n            </ul>\n          </div>\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}