This document describes the test panel architecture and multi-column testing system used across all workspace types in the Prompt Optimizer UI. Test panels provide the interface for validating prompt effectiveness by executing them against LLM models and displaying results. Multi-column testing enables simultaneous A/B/C/D testing with different model configurations and prompt versions.
For information about workspace layouts and split-pane architecture, see 3.2. For variable management systems, see 3.6. For evaluation and scoring features, see 2.8.
The system provides three distinct test panel implementations, each optimized for specific workspace modes:
| Panel Type | Used In | Key Features | Mode Support |
|---|---|---|---|
TestAreaPanel | Basic System/User | Single test input, Compare mode | full only |
ConversationTestPanel | Context System (Pro Multi) | Multi-message conversation, Tool calls | full or variables-only |
ContextUserTestPanel | Context User (Pro Variable) | Variable-focused, Smart generation | full or variables-only |
Sources: packages/ui/src/components/TestAreaPanel.vue1-50 packages/ui/src/components/context-mode/ConversationTestPanel.vue1-150 packages/ui/src/components/context-mode/ContextUserTestPanel.vue1-200
Test panels support two rendering modes:
full mode: Renders complete test UI including control bar, input sections, and result displayvariables-only mode: Renders only the temporary variable form, allowing workspace to manage test columns independentlySources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue128-135 packages/ui/src/components/context-mode/ConversationTestPanel.vue128-135
Diagram: Test Panel Rendering Modes and Workspace Integration
In variables-only mode, the workspace directly manages the variant deck layout, while the test panel provides only the shared variable form. This separation allows workspaces to implement custom multi-column testing layouts.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue201-280 packages/ui/src/components/context-mode/ContextSystemWorkspace.vue157-235
Multi-column testing allows users to run tests simultaneously across multiple configurations (variants), each with different models, prompt versions, or parameters. This feature is exclusive to Context mode workspaces.
Diagram: Multi-Column Variant System with Shared Variables
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue220-350 packages/ui/src/components/context-mode/ContextSystemWorkspace.vue176-295
Users can select 2, 3, or 4 columns dynamically:
The 4-column option is disabled on narrow screens where canUseFourColumns is false based on responsive breakpoints.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue228-235 packages/ui/src/components/context-mode/ContextSystemWorkspace.vue183-190
Variants are identified by lowercase letters:
| Column Count | Active Variants |
|---|---|
| 2 | ['a', 'b'] |
| 3 | ['a', 'b', 'c'] |
| 4 | ['a', 'b', 'c', 'd'] |
Each variant maintains independent state:
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue384-425
Each variant is rendered as a "variant cell" containing configuration controls and results:
Diagram: Variant Cell Component Hierarchy
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue280-340
Version options are dynamically labeled based on the current version:
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue554-574
Each variant has an independent SelectWithConfig component:
The variantModelKeyModels is a map of reactive refs, one per variant ID.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue306-316
A variant becomes "stale" when its configuration differs from the workspace's current state:
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue673-682
Stale variants display a warning tag:
This alerts users that the variant's configuration no longer matches the current workspace settings, and re-running may yield different results.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue287-295 packages/ui/src/i18n/locales/en-US.ts1043
| Scenario | Current State | Variant A Config | Stale? |
|---|---|---|---|
| Initial run | V1, GPT-4 | V1, GPT-4 | ❌ No |
| After iteration | V2, GPT-4 | V1, GPT-4 | ✅ Yes (version mismatch) |
| After model change | V2, Claude-3 | V2, GPT-4 | ✅ Yes (model mismatch) |
| After sync | V2, Claude-3 | V2, Claude-3 | ❌ No |
Diagram: Individual Variant Test Execution Flow
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue781-864
The "Run All" button executes all active variants sequentially:
Variants run in series (not parallel) to avoid overwhelming the LLM API. The isAnyVariantRunning computed property disables controls during execution.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue870-878
All test-related elements use consistent test ID patterns:
Example: pro-variable-test-variant-a-run or pro-multi-test-run-all
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue517-527
The TemporaryVariablesPanel is rendered once and shared by all variants:
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue204-218
When executing a variant, variables are resolved in this order:
{{originalPrompt}}, {{currentPrompt}})Temporary variables override global variables, allowing users to experiment without modifying persistent state.
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue196-216
Diagram: Variable Resolution Hierarchy in Multi-Column Tests
All variants use the same variable values, ensuring consistent test conditions across configurations.
Sources: packages/ui/src/composables/variable/useTestVariableManager.ts1-100
Context User mode includes smart variable generation:
This triggers the useSmartVariableValueGeneration composable which uses the evaluation model to automatically suggest variable values based on the prompt context.
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue3-8 packages/ui/src/composables/variable/useSmartVariableValueGeneration.ts1-50
After generation, a preview dialog shows suggested values:
Users can review and selectively apply the AI-generated values to temporary variables.
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue85-89
Each variant can be independently evaluated after test execution:
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue360-375
When exactly 2 variants have results, a compare evaluation button appears:
This evaluates which variant performed better using the evaluation model.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue250-275 packages/ui/src/components/context-mode/ContextSystemWorkspace.vue205-230
The variant deck uses CSS Grid with dynamic columns:
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue280-282 packages/ui/src/components/context-mode/ContextUserWorkspace.vue545-550
This prevents cramped layouts on smaller screens by limiting to 3 columns.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue561-567
Basic mode workspaces use TestAreaPanel in full mode with compare toggle:
Sources: packages/ui/src/components/basic-mode/BasicSystemWorkspace.vue130-165
| Feature | Basic Mode | Context Mode (Multi-Column) |
|---|---|---|
| Test configurations | 1 (single) or 2 (compare) | 2-4 simultaneous |
| Layout | Vertical split (original/optimized) | Horizontal grid (variants) |
| Model selection | Single shared selector | Per-variant selector |
| Version testing | V0 vs V1 only | Any version combination |
| Variable support | Basic | Advanced (smart generation) |
| Test execution | Sequential | Sequential per-variant |
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue128-216
Sources: packages/ui/src/components/context-mode/ConversationTestPanel.vue190-250
All test executions use streaming to provide real-time feedback:
This prevents UI freezing during long-running tests.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue800-840
Variable changes are debounced to prevent excessive re-renders:
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue120
Key Files:
Refresh this wiki