This document describes the Template Management UI components that provide a user interface for creating, editing, viewing, and organizing optimization templates. Templates define the prompts and message structures used to guide the LLM during optimization and iteration operations. The Template Management UI is separate from the core template system logic (see 2.3 for the backend Template System).
This page covers:
TemplateManager modal component for template CRUD operationsTemplateSelect dropdown component for template selectionThe Template Management UI consists of two primary components working together with core services:
Sources: packages/ui/src/components/TemplateManager.vue1-1198 packages/ui/src/components/TemplateSelect.vue1-220
Templates are organized into categories based on function mode (basic, context, image) and operation type (optimize, iterate). The UI provides dedicated sections for each category:
| Category Key | Display Label | Template Type | Use Case |
|---|---|---|---|
system-optimize | System Prompt Optimization Templates | optimize | Basic mode system prompt optimization |
user-optimize | User Prompt Optimization Templates | userOptimize | Basic mode user prompt optimization |
basic-system-iterate | Iteration Templates (System) | iterate | Basic mode system prompt iteration |
basic-user-iterate | Iteration Templates (User) | iterate | Basic mode user prompt iteration |
context-system-optimize | System Prompt Optimization Templates (Context) | conversationMessageOptimize | Context mode multi-message optimization |
context-user-optimize | User Prompt Optimization Templates (Context) | contextUserOptimize | Context mode variable optimization |
context-iterate | Iteration Templates (Context) | contextIterate | Context mode prompt iteration |
image-text2image-optimize | Image · Text-to-Image Templates | text2imageOptimize | Image mode text-to-image generation |
image-image2image-optimize | Image · Image-to-Image Templates | image2imageOptimize | Image mode image-to-image generation |
image-iterate | Image · Iterate Templates | imageIterate | Image mode prompt iteration |
Category Switching Implementation:
The UI uses a grid layout with buttons for each category:
Sources: packages/ui/src/components/TemplateManager.vue30-86 packages/ui/src/i18n/locales/en-US.ts896-914
Templates are displayed as interactive cards within a scrollable area. Each card shows:
Template Filtering:
The list supports real-time filtering based on the current category:
Sources: packages/ui/src/components/TemplateManager.vue114-257 packages/ui/src/components/TemplateManager.vue449-453
Creating a new template opens an inline modal with a form for entering template details:
Form Fields:
| Field | Type | Required | Description |
|---|---|---|---|
name | string | Yes | Template name (displayed in UI) |
description | string | No | Template description |
templateFormat | 'simple' | 'advanced' | Yes | Template format type |
content | string | Yes (simple) | Template content string (simple format only) |
messages | MessageTemplate[] | Yes (advanced) | Array of message templates (advanced format only) |
Sources: packages/ui/src/components/TemplateManager.vue562-648 packages/ui/src/components/TemplateManager.vue899-947
Built-in templates can be viewed in read-only mode:
Sources: packages/ui/src/components/TemplateManager.vue648-653 packages/ui/src/components/TemplateManager.vue269-480
Custom templates can be edited with full CRUD permissions:
Validation Rules:
name: Must not be emptycontent (simple): Must not be emptymessages (advanced): At least one message required, all messages must have non-empty contentSources: packages/ui/src/components/TemplateManager.vue653-658 packages/ui/src/components/TemplateManager.vue728-771
Custom templates can be deleted with confirmation:
Sources: packages/ui/src/components/TemplateManager.vue673-690 packages/ui/src/components/TemplateManager.vue773-787
Built-in templates can be copied to create custom variants:
Sources: packages/ui/src/components/TemplateManager.vue660-672
Templates come in two formats with different capabilities:
Structure:
Characteristics:
{{variableName}} syntaxUI Display:
Sources: packages/ui/src/components/TemplateManager.vue932-936
Structure:
Characteristics:
originalPrompt, lastOptimizedPrompt, iterateInput, and custom variablesUI Display:
Message Template Editor:
Sources: packages/ui/src/components/TemplateManager.vue948-1080 packages/ui/src/i18n/locales/en-US.ts935-936
The migration dialog allows converting simple templates to advanced format for increased flexibility:
The dialog displays a side-by-side comparison:
| Section | Content |
|---|---|
| Original Template | Simple template content as plain text |
| Converted Template | Advanced template with message structure |
| Action Buttons | Apply Conversion, Cancel |
Conversion Logic:
The TemplateProcessor.migrateToAdvanced() method:
content stringrole: 'system'content: <original content>Sources: packages/ui/src/components/TemplateManager.vue692-724 packages/ui/src/i18n/locales/en-US.ts961-967
Templates are selected in workspace components using the SelectWithConfig pattern, which combines a dropdown selector with a configuration button:
Sources: packages/ui/src/components/TemplateSelect.vue1-220 packages/ui/src/components/context-mode/ContextUserWorkspace.vue109-117
The TemplateSelect component provides a dropdown interface for template selection:
Key Features:
| Feature | Description |
|---|---|
| Lazy Loading | Templates loaded on first focus, not on mount |
| Filtering | Options filtered by type and optimizationMode props |
| Empty State | Shows "Configure" button when no templates available |
| Built-in Indicator | Displays built-in vs custom template badges |
| Description Preview | Shows template description in dropdown |
Props:
| Prop | Type | Required | Description |
|---|---|---|---|
modelValue | Template | null | No | Currently selected template |
type | TemplateType | Yes | Template type to filter by |
optimizationMode | OptimizationMode | Yes | Optimization mode context |
Events:
| Event | Payload | Description |
|---|---|---|
update:modelValue | Template | null | Selected template changed |
manage | TemplateType | User clicked configuration button |
select | Template, showToast? | Template selected with optional toast |
Template Loading Logic:
Sources: packages/ui/src/components/TemplateSelect.vue30-220
In workspace components, templates are selected using this pattern:
The @config event triggers opening the TemplateManager modal with the appropriate category pre-selected based on the current workspace mode.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue108-117 packages/ui/src/components/InputPanel.vue108-117
The Template Management UI supports internationalization through:
Template-Related I18n Keys:
| Key Path | Purpose |
|---|---|
templateManager.title | Modal title |
templateManager.optimizeTemplates | Category labels |
templateManager.addTemplate | Button labels |
templateManager.simpleTemplate | Format labels |
templateManager.templateCount | Template count display |
templateManager.updateSuccess | Operation result messages |
Sources: packages/ui/src/components/TemplateManager.vue26-27 packages/ui/src/i18n/locales/en-US.ts896-1012 packages/ui/src/i18n/locales/zh-CN.ts867-992
Built-in templates can have localized descriptions stored in the template metadata. The UI displays:
Date Formatting:
Sources: packages/ui/src/components/TemplateManager.vue435-447
The TemplateManager component manages complex state for modal interactions:
| State Variable | Type | Purpose |
|---|---|---|
showAddForm | boolean | Controls add template modal visibility |
editingTemplate | Template | null | Currently editing template (null = not editing) |
viewingTemplate | Template | null | Currently viewing template (null = not viewing) |
showMigrationDialog | boolean | Controls migration dialog visibility |
migratingTemplate | Template | null | Template being migrated |
convertedTemplate | Template | null | Result of migration conversion |
showSyntaxGuide | boolean | Controls syntax guide modal visibility |
currentCategory | TemplateCategory | Active template category |
templateForm | TemplateFormData | Form data for create/edit |
Modal Title Logic:
The modal title changes based on the current state:
Sources: packages/ui/src/components/TemplateManager.vue481-533 packages/ui/src/components/TemplateManager.vue535-561
For long template content, the UI provides fullscreen editing:
Sources: packages/ui/src/components/TemplateManager.vue1089-1155
The syntax guide provides documentation on template variable syntax:
Sources: packages/ui/src/components/TemplateManager.vue18-27
Templates are validated before save:
| Validation Rule | Error Message |
|---|---|
| Empty name | "Template name cannot be empty" |
| Empty content (simple) | "Template content cannot be empty" |
| No messages (advanced) | "Advanced template requires at least one message" |
| Empty message content | "Message content cannot be empty" |
Validation Flow:
Sources: packages/ui/src/components/TemplateManager.vue808-865 packages/ui/src/i18n/locales/en-US.ts985-987
Refresh this wiki