User Interface

Relevant source files

• packages/core/src/constants/storage-keys.ts
• packages/extension/src/App.vue
• packages/ui/src/components/PromptPanel.vue
• packages/ui/src/components/SelectWithConfig.vue
• packages/ui/src/components/image-mode/ImageWorkspace.vue
• packages/ui/src/composables/useImageWorkspace.ts
• packages/ui/src/index.ts
• packages/web/src/App.vue

The @prompt-optimizer/ui package provides a shared Vue 3 component library and state management system consumed by all platform applications. The package is located at packages/ui/ and exports components, composables, theme configuration, and internationalization support.

Core Package Characteristics:

• Vue 3 Composition API throughout
• Naive UI component library for base widgets
• Slot-based component composition
• Service injection via Vue provide/inject
• Platform-agnostic design (web, extension, desktop)

Package Entry Point Structure:

The main export file packages/ui/src/index.ts organizes exports into categories:

Export Category	Lines	Description
Component Exports	30-75	All UI components with UI suffix (e.g., MainLayoutUI, PromptPanelUI)
Naive UI Re-exports	77-107	Direct re-exports from naive-ui for convenience
Composables	113	All composables via export * from './composables'
Core Service Re-exports	116-146	Factory functions and proxy classes from @prompt-optimizer/core
Type Exports	149-168	TypeScript interfaces and types
Utility Exports	182-183	DataTransformer, OptionAccessors for data transformation

For component details, see Model and Template Management UI, Prompt Input and Output Display. For state management patterns, see Composables and State Management. For image generation UI, see Image Workspace.

Package Architecture

UI Package Component and Composable Structure:

Key File Locations:

• Main Entry: packages/ui/src/index.ts1-184
• Components: packages/ui/src/components/
• Composables: packages/ui/src/composables/
• Utilities: packages/ui/src/utils/data-transformer.ts

Sources: packages/ui/src/index.ts packages/web/src/App.vue1-380 packages/ui/src/composables/

Application Layout Structure

MainLayoutUI Slot-Based Composition:

The MainLayoutUI component at packages/ui/src/components/MainLayout.vue provides a fixed-position full-screen layout with named slots for flexible content injection.

Named Slot Reference:

Slot	Template Location	Populated With
#title	App.vue:13-15	{{ $t('promptOptimizer.title') }}
#core-nav	App.vue:18-23	FunctionModeSelector component
#actions	App.vue:26-103	Action buttons: Variable Manager, Templates, History, Model Manager, Favorites, Data Manager, Theme Toggle, Language Switch, GitHub link, UpdaterIcon
#main	App.vue:104-302	Primary workspace: two-column layout for basic/pro mode, ImageWorkspace for image mode

Conditional Rendering:

• ConversationManager uses v-show="advancedModeEnabled" (App.vue:178) to hide/show without destroying state
• Image mode replaces entire layout with ImageWorkspace when functionMode === 'image' (App.vue:299)

Sources: packages/web/src/App.vue1-377 packages/ui/src/components/MainLayout.vue

Composables and State Management

Service Initialization and Dependency Injection:

The useAppInitializer composable at packages/ui/src/composables/useAppInitializer.ts bootstraps all core services, which are then injected throughout the component tree.

Composable Implementation Details:

Composable	File Location	Constructor Signature	Key Exports
useAppInitializer	packages/ui/src/composables/useAppInitializer.ts	()	services: Ref<AppServices | null>, isInitializing: Ref<boolean>
usePromptOptimizer	packages/ui/src/composables/usePromptOptimizer.ts	(services, mode, optimizeModel, testModel)	prompt, optimizedPrompt, isOptimizing, handleOptimizePrompt(), handleIteratePrompt()
useModelManager	packages/ui/src/composables/useModelManager.ts	(services, modelSelectRefs)	selectedOptimizeModel, selectedTestModel, showConfig
useTemplateManager	packages/ui/src/composables/useTemplateManager.ts	(services, selectedTemplates)	showTemplates, currentType, openTemplateManager()
usePromptHistory	packages/ui/src/composables/usePromptHistory.ts	(services, ...)	history, handleSelectHistory(), handleClearHistory(), handleDeleteChain()
useVariableManager	packages/ui/src/composables/useVariableManager.ts	(services)	variableManager, allVariables, refresh()
useFunctionMode	packages/ui/src/composables/useFunctionMode.ts	(services)	functionMode, setFunctionMode()
useImageWorkspace	packages/ui/src/composables/useImageWorkspace.ts	(services)	Image generation state and methods

Service Injection Pattern:

Child components access services using inject:

The AppServices interface provides typed access to all core services: modelManager, templateManager, historyManager, promptService, llmService, contextRepo, favoriteManager.

Sources: packages/web/src/App.vue435-451 packages/web/src/App.vue692-739 packages/ui/src/composables/useAppInitializer.ts packages/ui/src/composables/usePromptOptimizer.ts

Template Selection System

Dynamic Template Type Resolution:

Template type is computed based on function mode and optimization mode, determining which template set to load.

Template Type Mapping Table:

Function Mode	Optimization Mode	Computed Type	Storage Key
basic	system	optimize	TEMPLATE_SELECTION_KEYS.SYSTEM_OPTIMIZE_TEMPLATE
basic	user	userOptimize	TEMPLATE_SELECTION_KEYS.USER_OPTIMIZE_TEMPLATE
pro	system	contextSystemOptimize	TEMPLATE_SELECTION_KEYS.CONTEXT_SYSTEM_OPTIMIZE_TEMPLATE
pro	user	contextUserOptimize	TEMPLATE_SELECTION_KEYS.CONTEXT_USER_OPTIMIZE_TEMPLATE
image	N/A	text2imageOptimize or image2imageOptimize	IMAGE_MODE_KEYS.SELECTED_TEMPLATE_TEXT2IMAGE

Iteration Template Types:

• Basic/Pro mode: iterate or contextIterate (determined by PromptPanel.vue:217-218)
• Image mode: imageIterate (hardcoded in ImageWorkspace.vue:209)

Template Manager Integration:

The handleOpenOptimizeTemplateManager function (App.vue:793-797) opens the template management UI with the current template type:

Sources: packages/web/src/App.vue596-602 packages/web/src/App.vue828-843 packages/web/src/App.vue877-893 packages/ui/src/components/PromptPanel.vue217-219 packages/core/src/constants/storage-keys.ts32-38

Prompt Optimization Workflow

Input Panel Structure:

InputPanelUI (packages/ui/src/components/InputPanel.vue) uses a slot-based composition pattern to allow parent components to provide custom selectors:

Output and Version Management:

PromptPanelUI (packages/ui/src/components/PromptPanel.vue1-349) wraps OutputDisplay with version management and iteration controls:

Sources: packages/web/src/App.vue107-166 packages/web/src/App.vue919-937 packages/ui/src/components/PromptPanel.vue1-71 packages/ui/src/components/PromptPanel.vue233-250 packages/ui/src/components/PromptPanel.vue291-309 packages/ui/src/components/InputPanel.vue

Output Display Component

The OutputDisplay component at packages/ui/src/components/OutputDisplay.vue handles content display with streaming, editing, and diff visualization capabilities.

Component Props and Features:

Usage in PromptPanel:

The PromptPanel component (packages/ui/src/components/PromptPanel.vue:56-71) wraps OutputDisplay with version control and iteration UI:

Version Switch Mechanism:

When a user clicks a version tag (PromptPanel.vue:291-311):

1. switchVersion(version) emits 'switchVersion' event
2. Parent (App.vue) updates optimizedPrompt and currentVersionId
3. await nextTick() ensures DOM updates
4. outputDisplayRef.value.forceRefreshContent() triggers re-render
5. refreshKey increment forces component re-render with new content

Sources: packages/ui/src/components/OutputDisplay.vue packages/ui/src/components/PromptPanel.vue56-71 packages/ui/src/components/PromptPanel.vue291-311 packages/ui/src/components/MarkdownRenderer.vue packages/ui/src/components/TextDiff.vue

Data Transformation Utilities

The UI package provides DataTransformer and OptionAccessors utilities at packages/ui/src/utils/data-transformer.ts for converting core domain objects to select-compatible formats.

Transformation Pipeline:

App.vue Usage Example:

SelectWithConfig Component Integration:

The SelectWithConfig component (packages/ui/src/components/SelectWithConfig.vue:1-219) uses accessor functions for rendering:

• Primary Text: Model/template name (bold, larger font)
• Secondary Text: Provider name or description (smaller, dimmed)
• Value: Unique identifier for v-model binding

The component uses renderOptionLabel (SelectWithConfig.vue:110-118) to create two-line option displays:

Sources: packages/ui/src/utils/data-transformer.ts packages/ui/src/types/select-options.ts packages/ui/src/components/SelectWithConfig.vue1-219 packages/web/src/App.vue846-875

Theme System

Theme Implementation:

The UI package uses Naive UI's programmatic theming system exclusively. All styling is configured through NConfigProvider with dynamic theme objects.

Available Themes:

Theme ID	Description	Primary Color
light	Default light theme	Yellow sun icon
dark	Dark mode	Blue moon icon
blue	Blue accent theme	Blue star icon
classic	Classic neutral theme	Brown vintage icon
green	Green nature theme	Green leaf icon
purple	Purple creative theme	Purple robot icon

Theme Configuration Flow:

CSS Assets:

The package imports minimal CSS for base styles only:

• packages/ui/src/styles/index.css - Base layout styles
• packages/ui/src/styles/scrollbar.css - Custom scrollbar styling
• packages/ui/src/styles/common.css - Utility classes

Note: packages/ui/src/index.ts1-5 explicitly excludes theme.css - all theming is handled by Naive UI.

Sources: packages/ui/src/index.ts1-22 packages/ui/src/composables/useNaiveTheme.ts packages/ui/src/components/ThemeToggleUI.vue1-141 packages/web/src/App.vue472-478 packages/web/src/App.vue2 packages/web/src/App.vue344

Advanced Context Management

The UI system provides sophisticated context management capabilities for advanced prompt optimization scenarios, including variable management and conversation context editing.

Sources: packages/web/src/App.vue152-164 packages/web/src/App.vue454-650 packages/ui/src/components/ConversationManager.vue packages/ui/src/components/ContextEditor.vue packages/ui/src/composables/useVariableManager.ts