Pro/Context Mode Workspaces

Relevant source files

• packages/ui/src/components/TestAreaPanel.vue
• packages/ui/src/components/TestResultSection.vue
• packages/ui/src/components/app-layout/PromptOptimizerApp.vue
• packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue
• packages/ui/src/components/basic-mode/BasicUserWorkspace.vue
• packages/ui/src/components/context-mode/ContextSystemWorkspace.vue
• packages/ui/src/components/context-mode/ContextUserTestPanel.vue
• packages/ui/src/components/context-mode/ContextUserWorkspace.vue
• packages/ui/src/components/context-mode/ConversationTestPanel.vue
• packages/ui/src/components/evaluation/FeedbackAnalyzeButton.vue
• packages/ui/src/components/evaluation/index.ts
• packages/ui/src/components/image-mode/ImageImage2ImageWorkspace.vue
• packages/ui/src/components/image-mode/ImageText2ImageWorkspace.vue
• packages/ui/src/i18n/locales/en-US.ts
• packages/ui/src/i18n/locales/zh-CN.ts
• packages/ui/src/i18n/locales/zh-TW.ts

Purpose and Scope

This page documents the Pro/Context Mode workspaces, which provide advanced prompt optimization capabilities beyond Basic mode. Pro mode consists of two distinct workspace components designed for different optimization scenarios:

• ContextUserWorkspace: Optimizes single user prompts with variable substitution support
• ContextSystemWorkspace: Optimizes multi-turn conversations with system/user/assistant messages

For information about Basic mode workspaces, see Basic Mode Workspaces. For general workspace architecture patterns, see Workspace Components. For session state management, see Session Management with Pinia.

---

Architecture Overview

Pro mode workspaces share a common split-panel architecture but differ in their optimization targets and feature sets.

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue1-2000 packages/ui/src/components/context-mode/ContextSystemWorkspace.vue1-2000

---

ContextUserWorkspace: Single Prompt with Variables

Purpose and Use Case

ContextUserWorkspace optimizes single user prompts that contain variable placeholders (e.g., {{userName}}, {{topic}}). This workspace is designed for:

• Testing prompt variations with different variable values
• Comparing original vs optimized prompts across multiple test scenarios
• Generating variable values using AI assistance
• Managing temporary variables that exist only for the current session

Key Difference from System Mode: Does not include conversation management or multi-turn context.

Layout Structure

The workspace uses a resizable split-panel layout with optimization on the left and testing on the right.

Split Panel Implementation: packages/ui/src/components/context-mode/ContextUserWorkspace.vue741-817

The split percentage is persisted in session storage and supports:

• Mouse dragging (ContextUserWorkspace.vue764-785)
• Keyboard navigation (Arrow keys, Home, End) (ContextUserWorkspace.vue799-813)
• Minimum 25% / Maximum 50% constraints (ContextUserWorkspace.vue746)

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue14-423

Variable System Architecture

The workspace integrates a four-tier variable system with priority-based resolution:

Priority	Variable Type	Source	Lifecycle	Example Use
1 (Lowest)	Global Variables	variableManager inject	Persistent across sessions	User preferences, common values
2	Temporary Variables	useTemporaryVariables()	Current session only	Test-specific values
3 (Highest)	Predefined Variables	System-generated	Computed per optimization	{{originalPrompt}}, {{currentPrompt}}

Variable Resolution Logic: packages/ui/src/components/context-mode/ContextUserWorkspace.vue689-718

Predefined Variables: Automatically populated with optimization context (ContextUserWorkspace.vue695-711)

• originalPrompt: Initial user input
• lastOptimizedPrompt: Most recent optimization result
• currentPrompt: Active prompt (optimized if available, else original)
• userQuestion: Alias for currentPrompt

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue682-718

Variable Extraction and Generation

The workspace supports AI-assisted variable workflows:

1. Text Selection Extraction: Users can select text in the input and extract it as a variable (ContextUserWorkspace.vue87-93)
2. Automatic Detection: Parse prompt for {{variableName}} placeholders
3. Smart Value Generation: Use LLM to generate example values (ContextUserTestPanel.vue309-327)

Variable Generation Flow:

Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue309-327

Multi-Column Test Variants

The workspace supports 2-4 parallel test columns, each with independent configuration:

Variant Configuration: packages/ui/src/components/context-mode/ContextUserWorkspace.vue278-339

Stale Detection: Each variant tracks an input hash to detect when the source prompt/variables have changed (ContextUserWorkspace.vue1220-1247)

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue220-420

Optimization Workflow

The optimization flow uses useContextUserOptimization composable:

Optimization Handler: packages/ui/src/components/context-mode/ContextUserWorkspace.vue1082-1123

Session Update: Results are persisted to useProVariableSession (ContextUserWorkspace.vue834-851)

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue1082-1200

Input Panel Collapse Feature

The input panel supports collapsible UI to maximize screen space for results:

• Collapsed State: Shows title + prompt summary (ContextUserWorkspace.vue30-63)
• Expanded State: Full InputPanelUI with all controls (ContextUserWorkspace.vue66-138)
• Toggle via header button (ContextUserWorkspace.vue120-137)

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue28-139

---

ContextSystemWorkspace: Multi-Turn Conversation

Purpose and Use Case

ContextSystemWorkspace optimizes multi-turn conversations consisting of system, user, assistant, and tool messages. This workspace is designed for:

• Optimizing system prompts in the context of a conversation
• Optimizing individual user messages
• Testing conversation flows with tool calls
• Managing complex multi-message scenarios

Key Difference from User Mode: Includes ConversationManager for message editing and message-level optimization.

Layout Structure

Similar split-panel layout, but left pane includes conversation management:

Sources: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue1-155

Conversation Management

The ConversationManager component provides full CRUD operations on conversation messages:

Conversation Manager Props: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue20-48

Message Operations: Changes emit message-change events with action type (ContextSystemWorkspace.vue23-28)

Sources: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue15-49

Message Optimization vs Prompt Optimization

ContextSystemWorkspace supports two optimization modes:

Mode	Target	Trigger	Display Adapter
Message Optimization	Single selected message from conversation	Select message → Click "Optimize"	usePromptDisplayAdapter adapts message to PromptPanelUI
Conversation Test	Entire conversation (all messages)	Run test variants	Sends full message array to LLM

Display Adapter Pattern: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue819-933

Sources: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue819-933

Message Selection and Optimization Flow

Message Selection: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue44

Optimization Trigger: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue88-97

Sources: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue1100-1200

Tool Call Support

ContextSystemWorkspace supports tool calls in test execution:

Tool Call Tracking: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue1598-1629

Tool Call Display: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue309-313

Sources: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue307-390

Apply to Conversation Feature

After optimizing a message, users can apply the optimized version back to the conversation:

Apply Handler: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue1257-1294

This action:

1. Replaces the original message content with optimized version
2. Records the applied version in message metadata
3. Clears the optimization state
4. Deselects the message

Sources: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue1257-1294

---

Shared Components and Patterns

Test Variant System

Both workspaces share the same multi-column test variant system:

Test Variant Type Definitions:

Common Logic: packages/ui/src/components/context-mode/ContextUserWorkspace.vue1329-1486

Sources: packages/ui/src/stores/session/useProVariableSession.ts packages/ui/src/stores/session/useProMultiMessageSession.ts

Split Panel Pattern

Both workspaces implement identical split-panel resizing:

Implementation Table:

Feature	Implementation	Constraints
Grid Layout	grid-template-columns: ${leftPct}% 12px 1fr	CSS Grid
Resize Handle	div.split-divider with pointer events	12px wide
Drag Tracking	pointermove + pointerup listeners	Document-level
Keyboard Control	Arrow keys (±1%), Home (25%), End (50%)	Accessibility
Persistence	Session store: setMainSplitLeftPct(pct)	Auto-saved
Range	25% minimum, 50% maximum	Clamped

Split Divider Element: packages/ui/src/components/context-mode/ContextUserWorkspace.vue189-198

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue741-817 packages/ui/src/components/context-mode/ContextSystemWorkspace.vue741-817

Evaluation Integration

Both workspaces integrate the evaluation system for scoring test results:

Evaluation Context Setup: packages/ui/src/components/context-mode/ContextUserWorkspace.vue1635-1700

Evaluation Types:

• original: Evaluate the original (v0) prompt's test result
• optimized: Evaluate the optimized prompt's test result
• compare: Compare original vs optimized results

Badge Display: packages/ui/src/components/context-mode/ContextUserWorkspace.vue367-415

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue1635-1700

Model and Template Selection

Both workspaces use useWorkspaceModelSelection and useWorkspaceTemplateSelection composables:

SelectWithConfig Component: Dropdown with built-in "Configure" button (ContextUserWorkspace.vue97-117)

Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue819-826

---

State Management

Session Stores

Each workspace has a dedicated Pinia store for persistent state:

Workspace	Store	File	Purpose
ContextUserWorkspace	useProVariableSession()	useProVariableSession.ts	Single prompt + variables + test variants
ContextSystemWorkspace	useProMultiMessageSession()	useProMultiMessageSession.ts	Conversation messages + test variants

Session Store Fields:

Session Store Usage: packages/ui/src/components/context-mode/ContextUserWorkspace.vue739

Sources: packages/ui/src/stores/session/useProVariableSession.ts packages/ui/src/stores/session/useProMultiMessageSession.ts

Variable Management Composables

Pro mode uses specialized composables for variable handling:

Temporary Variables Composable: packages/ui/src/components/context-mode/ContextUserWorkspace.vue682-684

Test Variable Manager: packages/ui/src/components/context-mode/ContextUserTestPanel.vue276-298

Sources: packages/ui/src/composables/variable/useTemporaryVariables.ts packages/ui/src/composables/variable/useTestVariableManager.ts

Test Configuration Persistence

Test variant configuration is automatically persisted to session storage:

Session Save: Automatically triggered on state changes via Pinia reactivity

Session Restore: Automatically loaded on component mount (ContextUserWorkspace.vue739)

Sources: packages/ui/src/stores/session/useProVariableSession.ts packages/ui/src/stores/session/useProMultiMessageSession.ts

---

Component Interaction Map

This diagram bridges natural language concepts to concrete code entities:

Key Class Names and Functions:

• ContextUserWorkspace - Main Vue component (ContextUserWorkspace.vue453-2000)
• ContextSystemWorkspace - Main Vue component (ContextSystemWorkspace.vue425-2000)
• useContextUserOptimization() - Optimization logic for user prompts
• useConversationOptimization() - Optimization logic for conversations
• useProVariableSession() - Pinia store for user workspace state
• useProMultiMessageSession() - Pinia store for system workspace state
• handleOptimize() - Trigger optimization (ContextUserWorkspace.vue1082)
• runVariant() - Execute single test variant (ContextUserWorkspace.vue1329)
• runAllVariants() - Execute all visible test variants (ContextUserWorkspace.vue1389)

Sources: All component files listed above