Workspace Components

Relevant source files

Purpose and Scope

This document provides an overview of the workspace component architecture in the Prompt Optimizer application. Workspaces are the primary user interfaces for prompt optimization, organized by function mode (basic, context, image) and optimization mode (system vs user). This page covers the common architectural patterns, split-pane layout system, and integration points shared across all workspace types.

For detailed information about specific workspace implementations, see:

Basic Mode Workspaces - BasicSystemWorkspace and BasicUserWorkspace
Pro/Context Mode Workspaces - ContextSystemWorkspace and ContextUserWorkspace
Image Mode Workspaces - ImageText2ImageWorkspace and ImageImage2ImageWorkspace

For information about how workspaces are integrated into the application shell, see Application Shell and Internationalization.

Workspace Type Matrix

The application defines six distinct workspace types, organized in a two-dimensional matrix:

Function Mode	Optimization Mode: System	Optimization Mode: User
Basic	BasicSystemWorkspace	BasicUserWorkspace
Context/Pro	ContextSystemWorkspace	ContextUserWorkspace
Image	ImageText2ImageWorkspace	ImageImage2ImageWorkspace

Function Mode determines the complexity and feature set:

Basic: Simple single-prompt optimization with optional test content
Context/Pro: Advanced multi-message conversations with variable management
Image: Image generation prompt optimization with optional image input

Optimization Mode determines the prompt optimization target:

System: Optimizes system prompts (AI behavior/role definition)
User: Optimizes user prompts (user input/questions)

Sources: packages/ui/src/i18n/locales/en-US.ts110-123 packages/ui/src/components/app-layout/PromptOptimizerApp.vue55-68

Workspace Routing Architecture

Each workspace component:

Is rendered via <RouterView> in PromptOptimizerApp
Has a unique data-mode attribute for testing and analytics
Maps to a specific Pinia session store for state persistence
Receives refs and event handlers from the parent app

Sources: packages/ui/src/components/app-layout/PromptOptimizerApp.vue55-68 packages/ui/src/components/context-mode/ContextUserWorkspace.vue14 packages/ui/src/components/context-mode/ContextSystemWorkspace.vue2

Split-Pane Layout Pattern

Layout Structure

All workspace components implement a consistent three-column grid layout:

Grid Template Columns: ${mainSplitLeftPct}% 12px 1fr

Left pane width is controlled by mainSplitLeftPct (default 50%)
Fixed 12px divider
Right pane takes remaining space (1fr)

Resizable Divider Implementation

The divider supports both pointer and keyboard interactions:

Pointer Events:

@pointerdown: Captures pointer, starts drag tracking
Document pointermove: Updates split percentage
Document pointerup: Releases pointer, saves to preferences

Keyboard Events (@keydown):

ArrowLeft: Decrease left pane width
ArrowRight: Increase left pane width
Hold Shift: Larger increments (5% vs 1%)

Constraints:

Minimum left pane: 30%
Maximum left pane: 70%
User preference persisted via PreferenceService

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue189-197 packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue123-131

Left Pane: Optimization Area

Component Hierarchy

Collapsible Input Panel Pattern

All workspaces implement a collapsible input panel to maximize vertical space for optimization results:

Collapsed State (title bar only):

Displays prompt label and truncated summary
Expand button (chevron-down icon)
Minimal vertical space usage

Expanded State (full panel):

Complete InputPanelUI component
Model and template selectors
Optimization button
Collapse button (chevron-up icon)

Implementation:

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue28-63 packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue19-55

Mode-Specific Customizations

Workspace Type	Unique Left Pane Features
ContextSystemWorkspace	Includes `ConversationManager` for multi-message editing
ContextUserWorkspace	Variable management preview, no conversation manager
ImageText2ImageWorkspace	No additional input, prompt optimization only
ImageImage2ImageWorkspace	Image upload UI (file selection + preview)
BasicSystemWorkspace	Simple single-prompt input
BasicUserWorkspace	Simple single-prompt input

Sources: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue15-49 packages/ui/src/components/image-mode/ImageImage2ImageWorkspace.vue142-196

Right Pane: Test Area

Test Area Architecture

Test Panel Modes

Context workspaces use a specialized two-tier architecture:

Variables-Only Mode (used by ContextUserWorkspace and ContextSystemWorkspace):

Test panel renders only TemporaryVariablesPanel
Workspace itself renders multi-column test configuration and results
Supports 2, 3, or 4 test variants running in parallel
Each variant has independent model and version selection

Full Mode (used by BasicSystemWorkspace and BasicUserWorkspace):

Test panel renders complete UI including control bar and results
Single test execution (with optional compare mode)
Traditional vertical or horizontal result layout

Mode Selection Logic:

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue201-218 packages/ui/src/components/context-mode/ContextUserTestPanel.vue128-185 packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue141-165

Multi-Variant Test Grid (Context Mode)

Context mode workspaces implement a sophisticated multi-column test grid:

Variant Configuration:

Label: "Original", "Latest", etc.
Version Selector: V0, V1, V2, etc. (from optimization history)
Model Selector: Any enabled text model
Stale Indicator: Shown when configuration changes after last test run

Grid Layout Calculation:

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue220-277 packages/ui/src/components/context-mode/ContextSystemWorkspace.vue176-232

Session State Integration

Pinia Store Mapping

Each workspace type integrates with a dedicated Pinia session store:

Workspace Component	Session Store	Key State Properties
BasicSystemWorkspace	`useBasicSystemSession`	`prompt`, `optimizedPrompt`, `selectedModelKey`, `selectedTemplateId`
BasicUserWorkspace	`useBasicUserSession`	`prompt`, `optimizedPrompt`, `selectedModelKey`, `selectedTemplateId`
ContextSystemWorkspace	`useProMultiMessageSession`	`conversationMessages`, `selectedMessageId`, `messageOptimizations`
ContextUserWorkspace	`useProVariableSession`	`prompt`, `optimizedPrompt`, `temporaryVariables`
ImageText2ImageWorkspace	`useImageText2ImageSession`	`originalPrompt`, `selectedTextModelKey`, `selectedImageModelKey`
ImageImage2ImageWorkspace	`useImageImage2ImageSession`	`originalPrompt`, `uploadedImage`, `previewImageUrl`

Session Restoration:

Session state persists across navigation
Automatic restoration on workspace mount
Managed by useSessionRestoreCoordinator composable

Sources: packages/ui/src/components/app-layout/PromptOptimizerApp.vue296-307 packages/ui/src/stores/session/useSessionManager.ts1-50

State Synchronization Pattern

Sources: packages/ui/src/components/app-layout/PromptOptimizerApp.vue615-655

Common Event Handling Patterns

Parent-Child Communication

All workspaces emit standardized events that are handled by PromptOptimizerApp:

Core Events:

Event Name	Payload	Purpose
`config-model`	`type?: 'text' \| 'image'`	Opens ModelManagerUI
`config-template`	`type: TemplateType`	Opens TemplateManagerUI
`save-favorite`	`{ content: string, originalContent?: string }`	Opens SaveFavoriteDialog
`open-variable-manager`	`focusVariable?: string`	Opens VariableManagerModal
`open-tool-manager`	`void`	Opens ToolManagerModal (Context mode)
`open-preview`	`{ content: string, mode: ContextMode }`	Opens PromptPreviewPanel
`message-change`	`(index, message, action)`	Handles conversation updates

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue169-183 packages/ui/src/components/app-layout/PromptOptimizerApp.vue44-52

Service Injection Pattern

Workspaces receive services via props rather than direct service imports:

Benefits:

Centralized service lifecycle management
Easier testing and mocking
Clear dependency injection boundary

Sources: packages/ui/src/components/app-layout/PromptOptimizerApp.vue508-516

Shared UI Components

Component Usage Matrix

Component	Basic Workspaces	Context Workspaces	Image Workspaces	Purpose
`InputPanelUI`	✓	✓	✗	Prompt input with model/template selection
`PromptPanelUI`	✓	✓	✓	Optimization result display with version control
`TestAreaPanel`	✓	✗	✓	Complete test UI (basic/image modes)
`ContextUserTestPanel`	✗	✓ (User)	✗	Variable-aware test panel
`ConversationTestPanel`	✗	✓ (System)	✗	Conversation-aware test panel
`ConversationManager`	✗	✓ (System only)	✗	Multi-message conversation editor
`TemporaryVariablesPanel`	✗	✓	✗	Variable value input form
`SelectWithConfig`	✓	✓	✓	Model/template selector with config button
`OutputDisplay`	✓	✓	✓	Markdown/text result rendering
`EvaluationScoreBadge`	✓	✓	✓	Evaluation score display

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue66-94 packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue58-100 packages/ui/src/components/TestAreaPanel.vue1-45

Component Integration Example

InputPanelUI Integration:

PromptPanelUI Integration:

Sources: packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue58-100 packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue129-157

Responsive Design Considerations

Adaptive Layout Composable

All workspaces use useResponsive() composable for consistent responsive behavior:

Breakpoint Rules:

Button size:
- Large: width ≥ 1024px
- Medium: 768px ≤ width < 1024px
- Small: width < 768px
Four-column support: Disabled if width < 1400px
Vertical layout: Enabled if height < 600px

Layout Adaptations:

Test result sections switch from horizontal to vertical stacking
Button labels may be hidden on narrow screens
Input areas adjust between inline and stacked arrangements

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue233-234 packages/ui/src/composables/ui/useResponsive.ts1-50

Split Pane Persistence

Split pane positions are persisted per workspace type:

This allows users to customize layouts independently for each workspace type.

Sources: packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue180-210

Performance Optimizations

Component Lifecycle Management

Lazy Rendering:

Test results only render after first test execution
Evaluation components conditionally mounted based on feature flags
Fullscreen modals use v-if to completely unmount when closed

Debounced Operations:

Performance Monitoring:

Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue117-120 packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue195-220

Memory Management

Cleanup on Unmount:

Sources: packages/ui/src/components/TestAreaPanel.vue250-270

Testing and Accessibility

Data Test IDs

All workspaces implement consistent test ID patterns:

Test ID Conventions:

Workspace container: data-testid="workspace"
Mode identifier: data-mode="[mode-key]"
Actions: [prefix]-[action] (e.g., basic-system-optimize)
Inputs: [prefix]-[field] (e.g., pro-variable-input)
Variants: [prefix]-variant-[id]-[element] (e.g., pro-multi-variant-a-model)

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue14 packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue4-5

ARIA Attributes

Split Divider Accessibility:

Button Labels:

All icon-only buttons include :aria-label and :title attributes
Loading states announced via aria-busy
Disabled states properly propagated to screen readers

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue189-197

Workspace Components

Relevant source files

Purpose and Scope

For detailed information about specific workspace implementations, see:

Basic Mode Workspaces - BasicSystemWorkspace and BasicUserWorkspace
Pro/Context Mode Workspaces - ContextSystemWorkspace and ContextUserWorkspace
Image Mode Workspaces - ImageText2ImageWorkspace and ImageImage2ImageWorkspace

For information about how workspaces are integrated into the application shell, see Application Shell and Internationalization.

Workspace Type Matrix

The application defines six distinct workspace types, organized in a two-dimensional matrix:

Function Mode	Optimization Mode: System	Optimization Mode: User
Basic	BasicSystemWorkspace	BasicUserWorkspace
Context/Pro	ContextSystemWorkspace	ContextUserWorkspace
Image	ImageText2ImageWorkspace	ImageImage2ImageWorkspace

Function Mode determines the complexity and feature set:

Basic: Simple single-prompt optimization with optional test content
Context/Pro: Advanced multi-message conversations with variable management
Image: Image generation prompt optimization with optional image input

Optimization Mode determines the prompt optimization target:

System: Optimizes system prompts (AI behavior/role definition)
User: Optimizes user prompts (user input/questions)

Sources: packages/ui/src/i18n/locales/en-US.ts110-123 packages/ui/src/components/app-layout/PromptOptimizerApp.vue55-68

Workspace Routing Architecture

Each workspace component:

Is rendered via <RouterView> in PromptOptimizerApp
Has a unique data-mode attribute for testing and analytics
Maps to a specific Pinia session store for state persistence
Receives refs and event handlers from the parent app

Split-Pane Layout Pattern

Layout Structure

All workspace components implement a consistent three-column grid layout:

Grid Template Columns: ${mainSplitLeftPct}% 12px 1fr

Left pane width is controlled by mainSplitLeftPct (default 50%)
Fixed 12px divider
Right pane takes remaining space (1fr)

Resizable Divider Implementation

The divider supports both pointer and keyboard interactions:

Pointer Events:

@pointerdown: Captures pointer, starts drag tracking
Document pointermove: Updates split percentage
Document pointerup: Releases pointer, saves to preferences

Keyboard Events (@keydown):

ArrowLeft: Decrease left pane width
ArrowRight: Increase left pane width
Hold Shift: Larger increments (5% vs 1%)

Constraints:

Minimum left pane: 30%
Maximum left pane: 70%
User preference persisted via PreferenceService

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue189-197 packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue123-131

Left Pane: Optimization Area

Component Hierarchy

Collapsible Input Panel Pattern

All workspaces implement a collapsible input panel to maximize vertical space for optimization results:

Collapsed State (title bar only):

Displays prompt label and truncated summary
Expand button (chevron-down icon)
Minimal vertical space usage

Expanded State (full panel):

Complete InputPanelUI component
Model and template selectors
Optimization button
Collapse button (chevron-up icon)

Implementation:

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue28-63 packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue19-55

Mode-Specific Customizations

Workspace Type	Unique Left Pane Features
ContextSystemWorkspace	Includes `ConversationManager` for multi-message editing
ContextUserWorkspace	Variable management preview, no conversation manager
ImageText2ImageWorkspace	No additional input, prompt optimization only
ImageImage2ImageWorkspace	Image upload UI (file selection + preview)
BasicSystemWorkspace	Simple single-prompt input
BasicUserWorkspace	Simple single-prompt input

Sources: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue15-49 packages/ui/src/components/image-mode/ImageImage2ImageWorkspace.vue142-196

Right Pane: Test Area

Test Area Architecture

Test Panel Modes

Context workspaces use a specialized two-tier architecture:

Variables-Only Mode (used by ContextUserWorkspace and ContextSystemWorkspace):

Test panel renders only TemporaryVariablesPanel
Workspace itself renders multi-column test configuration and results
Supports 2, 3, or 4 test variants running in parallel
Each variant has independent model and version selection

Full Mode (used by BasicSystemWorkspace and BasicUserWorkspace):

Test panel renders complete UI including control bar and results
Single test execution (with optional compare mode)
Traditional vertical or horizontal result layout

Mode Selection Logic:

Multi-Variant Test Grid (Context Mode)

Context mode workspaces implement a sophisticated multi-column test grid:

Variant Configuration:

Label: "Original", "Latest", etc.
Version Selector: V0, V1, V2, etc. (from optimization history)
Model Selector: Any enabled text model
Stale Indicator: Shown when configuration changes after last test run

Grid Layout Calculation:

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue220-277 packages/ui/src/components/context-mode/ContextSystemWorkspace.vue176-232

Session State Integration

Pinia Store Mapping

Each workspace type integrates with a dedicated Pinia session store:

Workspace Component	Session Store	Key State Properties
BasicSystemWorkspace	`useBasicSystemSession`	`prompt`, `optimizedPrompt`, `selectedModelKey`, `selectedTemplateId`
BasicUserWorkspace	`useBasicUserSession`	`prompt`, `optimizedPrompt`, `selectedModelKey`, `selectedTemplateId`
ContextSystemWorkspace	`useProMultiMessageSession`	`conversationMessages`, `selectedMessageId`, `messageOptimizations`
ContextUserWorkspace	`useProVariableSession`	`prompt`, `optimizedPrompt`, `temporaryVariables`
ImageText2ImageWorkspace	`useImageText2ImageSession`	`originalPrompt`, `selectedTextModelKey`, `selectedImageModelKey`
ImageImage2ImageWorkspace	`useImageImage2ImageSession`	`originalPrompt`, `uploadedImage`, `previewImageUrl`

Session Restoration:

Session state persists across navigation
Automatic restoration on workspace mount
Managed by useSessionRestoreCoordinator composable

Sources: packages/ui/src/components/app-layout/PromptOptimizerApp.vue296-307 packages/ui/src/stores/session/useSessionManager.ts1-50

State Synchronization Pattern

Sources: packages/ui/src/components/app-layout/PromptOptimizerApp.vue615-655

Common Event Handling Patterns

Parent-Child Communication

All workspaces emit standardized events that are handled by PromptOptimizerApp:

Core Events:

Event Name	Payload	Purpose
`config-model`	`type?: 'text' \| 'image'`	Opens ModelManagerUI
`config-template`	`type: TemplateType`	Opens TemplateManagerUI
`save-favorite`	`{ content: string, originalContent?: string }`	Opens SaveFavoriteDialog
`open-variable-manager`	`focusVariable?: string`	Opens VariableManagerModal
`open-tool-manager`	`void`	Opens ToolManagerModal (Context mode)
`open-preview`	`{ content: string, mode: ContextMode }`	Opens PromptPreviewPanel
`message-change`	`(index, message, action)`	Handles conversation updates

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue169-183 packages/ui/src/components/app-layout/PromptOptimizerApp.vue44-52

Service Injection Pattern

Workspaces receive services via props rather than direct service imports:

Benefits:

Centralized service lifecycle management
Easier testing and mocking
Clear dependency injection boundary

Sources: packages/ui/src/components/app-layout/PromptOptimizerApp.vue508-516

Shared UI Components

Component Usage Matrix

Component	Basic Workspaces	Context Workspaces	Image Workspaces	Purpose
`InputPanelUI`	✓	✓	✗	Prompt input with model/template selection
`PromptPanelUI`	✓	✓	✓	Optimization result display with version control
`TestAreaPanel`	✓	✗	✓	Complete test UI (basic/image modes)
`ContextUserTestPanel`	✗	✓ (User)	✗	Variable-aware test panel
`ConversationTestPanel`	✗	✓ (System)	✗	Conversation-aware test panel
`ConversationManager`	✗	✓ (System only)	✗	Multi-message conversation editor
`TemporaryVariablesPanel`	✗	✓	✗	Variable value input form
`SelectWithConfig`	✓	✓	✓	Model/template selector with config button
`OutputDisplay`	✓	✓	✓	Markdown/text result rendering
`EvaluationScoreBadge`	✓	✓	✓	Evaluation score display

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue66-94 packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue58-100 packages/ui/src/components/TestAreaPanel.vue1-45

Component Integration Example

InputPanelUI Integration:

PromptPanelUI Integration:

Sources: packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue58-100 packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue129-157

Responsive Design Considerations

Adaptive Layout Composable

All workspaces use useResponsive() composable for consistent responsive behavior:

Breakpoint Rules:

Button size:
- Large: width ≥ 1024px
- Medium: 768px ≤ width < 1024px
- Small: width < 768px
Four-column support: Disabled if width < 1400px
Vertical layout: Enabled if height < 600px

Layout Adaptations:

Test result sections switch from horizontal to vertical stacking
Button labels may be hidden on narrow screens
Input areas adjust between inline and stacked arrangements

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue233-234 packages/ui/src/composables/ui/useResponsive.ts1-50

Split Pane Persistence

Split pane positions are persisted per workspace type:

This allows users to customize layouts independently for each workspace type.

Sources: packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue180-210

Performance Optimizations

Component Lifecycle Management

Lazy Rendering:

Test results only render after first test execution
Evaluation components conditionally mounted based on feature flags
Fullscreen modals use v-if to completely unmount when closed

Debounced Operations:

Performance Monitoring:

Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue117-120 packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue195-220

Memory Management

Cleanup on Unmount:

Sources: packages/ui/src/components/TestAreaPanel.vue250-270

Testing and Accessibility

Data Test IDs

All workspaces implement consistent test ID patterns:

Test ID Conventions:

Workspace container: data-testid="workspace"
Mode identifier: data-mode="[mode-key]"
Actions: [prefix]-[action] (e.g., basic-system-optimize)
Inputs: [prefix]-[field] (e.g., pro-variable-input)
Variants: [prefix]-variant-[id]-[element] (e.g., pro-multi-variant-a-model)

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue14 packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue4-5

ARIA Attributes

Split Divider Accessibility:

Button Labels:

All icon-only buttons include :aria-label and :title attributes
Loading states announced via aria-busy
Disabled states properly propagated to screen readers

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue189-197

Workspace Components

Purpose and Scope

Workspace Type Matrix

Workspace Routing Architecture

Split-Pane Layout Pattern

Layout Structure

Resizable Divider Implementation

Left Pane: Optimization Area

Component Hierarchy

Collapsible Input Panel Pattern

Mode-Specific Customizations

Right Pane: Test Area

Test Area Architecture

Test Panel Modes

Multi-Variant Test Grid (Context Mode)

Session State Integration

Pinia Store Mapping

State Synchronization Pattern

Common Event Handling Patterns

Parent-Child Communication

Service Injection Pattern

Shared UI Components

Component Usage Matrix

Component Integration Example

Responsive Design Considerations

Adaptive Layout Composable

Split Pane Persistence

Performance Optimizations

Component Lifecycle Management

Memory Management

Testing and Accessibility

Data Test IDs

ARIA Attributes

On this page

Workspace Components

Purpose and Scope

Workspace Type Matrix

Workspace Routing Architecture

Split-Pane Layout Pattern

Layout Structure

Resizable Divider Implementation

Left Pane: Optimization Area

Component Hierarchy

Collapsible Input Panel Pattern

Mode-Specific Customizations

Right Pane: Test Area

Test Area Architecture

Test Panel Modes

Multi-Variant Test Grid (Context Mode)

Session State Integration

Pinia Store Mapping

State Synchronization Pattern

Common Event Handling Patterns

Parent-Child Communication

Service Injection Pattern

Shared UI Components

Component Usage Matrix

Component Integration Example

Responsive Design Considerations

Adaptive Layout Composable

Split Pane Persistence

Performance Optimizations

Component Lifecycle Management

Memory Management

Testing and Accessibility

Data Test IDs

ARIA Attributes

On this page