This document describes the application's mode system and workspace architecture. The Prompt Optimizer uses a two-level mode system: Function Modes (Basic, Context, Image) and Sub-Modes (System/User, Multi/Variable, Text2Image/Image2Image). Each mode combination maps to a specific workspace component that provides optimized UI and functionality for that use case.
For information about the underlying UI component architecture, see Workspace Components. For multi-platform adaptations of these workspaces, see Multi-Platform Architecture.
The application organizes functionality into a hierarchical mode system where each Function Mode contains multiple Sub-Modes:
Mermaid Diagram: Mode System Hierarchy
Sources: packages/ui/src/i18n/locales/en-US.ts110-124 packages/ui/src/components/app-layout/PromptOptimizerApp.vue55-61
Users select the primary function mode through the FunctionModeSelector component in the application header. This determines the broad category of optimization task.
Mermaid Diagram: Function Mode Selection Flow
The three function modes are:
| Function Mode | Purpose | I18n Key | Navigation Path |
|---|---|---|---|
| Basic | Simple single-prompt optimization | nav.basicMode | /basic/* |
| Context | Advanced multi-message or variable-based optimization | nav.contextMode | /pro/* |
| Image | AI image generation with prompt optimization | nav.imageMode | /image/* |
Sources: packages/ui/src/components/FunctionModeSelector.vue1-50 packages/ui/src/i18n/locales/en-US.ts120-123
Within each function mode, users select a sub-mode that determines the specific optimization strategy:
The OptimizationModeSelector component provides two options for Basic mode:
| Sub-Mode | Value | Workspace | Purpose |
|---|---|---|---|
| System | "system" | BasicSystemWorkspace | Optimize system prompts that define AI behavior |
| User | "user" | BasicUserWorkspace | Optimize user prompts for better interaction |
Sources: packages/ui/src/components/OptimizationModeSelector.vue10-26 packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue1-10 packages/ui/src/components/basic-mode/BasicUserWorkspace.vue1-10
Context mode (formerly "Pro" mode) offers two advanced sub-modes:
| Sub-Mode | Value | Workspace | Purpose |
|---|---|---|---|
| Multi-Message | "multi" | ContextSystemWorkspace | Optimize conversations with multiple system/user/assistant messages |
| Variable | "variable" | ContextUserWorkspace | Optimize single prompts with variable support and tool management |
Note: Legacy values "system" and "user" are automatically normalized to "multi" and "variable" respectively via packages/ui/src/composables/mode/useProSubMode.ts17-22
Sources: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue1-10 packages/ui/src/components/context-mode/ContextUserWorkspace.vue1-14 packages/ui/src/composables/mode/useProSubMode.ts17-22
The ImageModeSelector component provides two generation workflows:
| Sub-Mode | Value | Workspace | Purpose |
|---|---|---|---|
| Text-to-Image | "text2image" | ImageText2ImageWorkspace | Generate images from text prompts |
| Image-to-Image | "image2image" | ImageImage2ImageWorkspace | Transform existing images with text guidance |
Sources: packages/ui/src/components/image-mode/ImageText2ImageWorkspace.vue1-10 packages/ui/src/components/image-mode/ImageImage2ImageWorkspace.vue1-10
Each mode combination maps to a specific workspace component that implements the UI and logic for that scenario:
Mermaid Diagram: Mode to Workspace Component Mapping
Sources: packages/ui/src/components/app-layout/PromptOptimizerApp.vue55-68
| Workspace | Conversation Manager | Variable Extraction | Multi-Column Testing | Image Upload | Tool Management |
|---|---|---|---|---|---|
BasicSystemWorkspace | ❌ | ❌ | ❌ | ❌ | ❌ |
BasicUserWorkspace | ❌ | ❌ | ❌ | ❌ | ❌ |
ContextSystemWorkspace | ✅ | ✅ | ✅ | ❌ | ✅ |
ContextUserWorkspace | ❌ | ✅ | ✅ | ❌ | ✅ |
ImageText2ImageWorkspace | ❌ | ✅ | ✅ | ❌ | ❌ |
ImageImage2ImageWorkspace | ❌ | ✅ | ✅ | ✅ | ❌ |
Key Differences:
Conversation Manager (only in ContextSystemWorkspace): Manages multi-message conversations with system/user/assistant/tool roles. See packages/ui/src/components/context-mode/ContextSystemWorkspace.vue15-49
Variable Extraction: Context and Image workspaces support AI-powered variable detection and value generation. Basic workspaces do not.
Multi-Column Testing: Context and Image workspaces provide A/B/C/D testing with multiple prompt variants. Basic workspaces use simpler single/compare testing via TestAreaPanel. See packages/ui/src/components/context-mode/ContextUserWorkspace.vue220-277
Image Upload: Only ImageImage2ImageWorkspace provides image upload for transformation workflows. See packages/ui/src/components/image-mode/ImageImage2ImageWorkspace.vue142-146
Tool Management: Context workspaces support function/tool definitions for AI tool calling.
Sources: packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue1-100 packages/ui/src/components/context-mode/ContextSystemWorkspace.vue15-49 packages/ui/src/components/context-mode/ContextUserWorkspace.vue1-50
The application uses Vue Router to manage workspace navigation. Routes follow the pattern /{functionMode}/{subMode}:
Mermaid Diagram: Router Configuration
The router is defined in packages/ui/src/router/index.ts and dynamically imported by workspaces to reduce initial bundle size. The PromptOptimizerApp component uses <RouterView> to render the active workspace:
Sources: packages/ui/src/components/app-layout/PromptOptimizerApp.vue62-68 packages/ui/src/router/index.ts1-100
When users navigate to a function mode without specifying a sub-mode (e.g., /basic), the router redirects to the last-used sub-mode for that function, stored in PreferenceService:
Mermaid Diagram: Sub-Mode Resolution Flow
Sources: packages/ui/src/composables/mode/useProSubMode.ts48-80
Mode preferences are persisted using the PreferenceService to maintain user selections across sessions:
| State | Storage Key | Type | Default | Composable |
|---|---|---|---|---|
| Function Mode | UI_SETTINGS_KEYS.FUNCTION_MODE | "basic" | "pro" | "image" | "basic" | useFunctionMode() |
| Basic Sub-Mode | UI_SETTINGS_KEYS.BASIC_SUB_MODE | "system" | "user" | "system" | useBasicSubMode() |
| Pro Sub-Mode | UI_SETTINGS_KEYS.PRO_SUB_MODE | "multi" | "variable" | "variable" | useProSubMode() |
| Image Sub-Mode | UI_SETTINGS_KEYS.IMAGE_SUB_MODE | "text2image" | "image2image" | "text2image" | useImageSubMode() |
Each mode composable follows the singleton pattern with lazy initialization:
Key characteristics:
PreferenceService"system", "user") automatically converted to new values ("multi", "variable")Sources: packages/ui/src/composables/mode/useProSubMode.ts24-98
All workspace components follow a consistent split-pane layout:
Mermaid Diagram: Common Workspace Structure
Each workspace uses a CSS Grid-based split layout with a draggable divider:
The split percentage (mainSplitLeftPct) is persisted per-mode in PreferenceService, allowing users to customize layouts independently for each workspace.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue14-198 packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue9-50
The ContextSystemWorkspace is unique in providing the ConversationManager component for multi-message optimization:
Key Features:
Sources: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue15-49 packages/ui/src/components/context-mode/ConversationManager.vue1-100
The ContextUserWorkspace focuses on single-prompt optimization with advanced variable management:
Key Features:
No ConversationManager is rendered, as documented in packages/ui/src/components/context-mode/ContextUserWorkspace.vue142-151:
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue1-150
Image workspaces integrate text prompt optimization with image generation APIs:
Text2Image Workflow:
Image2Image Workflow:
Both workspaces use ImageService for API communication and support multi-column generation for comparing different models/parameters.
Sources: packages/ui/src/components/image-mode/ImageText2ImageWorkspace.vue1-200 packages/ui/src/components/image-mode/ImageImage2ImageWorkspace.vue1-200
When users switch modes, the application performs cleanup and initialization:
Mermaid Diagram: Mode Switch Lifecycle
Each workspace maintains independent state through Pinia stores:
| Workspace | Pinia Store | Purpose |
|---|---|---|
BasicSystemWorkspace | useBasicSystemSession | Original prompt, optimized prompt, versions, selected models |
BasicUserWorkspace | useBasicUserSession | Original prompt, optimized prompt, versions, selected models |
ContextSystemWorkspace | useContextSystemSession | Conversation messages, message optimizations, selected message |
ContextUserWorkspace | useContextUserSession | User prompt, optimized prompt, versions, temporary variables |
ImageText2ImageWorkspace | useImageText2ImageSession | Text prompt, optimized prompt, image generation results |
ImageImage2ImageWorkspace | useImageImage2ImageSession | Text prompt, optimized prompt, source image, transformation results |
These stores survive component unmounts but are cleared on page reload, providing session-level persistence without polluting long-term storage.
Sources: packages/ui/src/composables/session/index.ts1-50 packages/ui/src/components/app-layout/PromptOptimizerApp.vue1-500
The Prompt Optimizer's mode system provides:
This architecture enables the application to serve diverse use cases—from simple prompt optimization to complex multi-message conversations—while maintaining a consistent UX pattern and shared component library.
Refresh this wiki