elasticdash-test 0.1.16 → 0.1.17-alpha-2

package/dist/dashboard-server.js

@@ -156,6 +156,28 @@ function buildToolArgs(input, tool) {
     }
     return [input];
 }
+/**
+ * Flatten structured prompt mock config to simple Record<string, string> for HTTP mode.
+ * Accepts both the new structured format { mode, replacement } and legacy string values.
+ * Only entries with mode !== 'live' (or plain string entries) are included.
+ */
+function flattenPromptMockConfig(raw) {
+    if (!raw || typeof raw !== 'object' || Array.isArray(raw))
+        return {};
+    const result = {};
+    for (const [key, val] of Object.entries(raw)) {
+        if (typeof val === 'string') {
+            result[key] = val;
+        }
+        else if (val && typeof val === 'object' && 'replacement' in val) {
+            const entry = val;
+            if (entry.mode !== 'live' && typeof entry.replacement === 'string') {
+                result[key] = entry.replacement;
+            }
+        }
+    }
+    return result;
+}
 function formatError(error) {
     if (error instanceof Error)
         return error.message;
@@ -313,6 +335,7 @@ function runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowN
             ...(options?.toolMockConfig !== undefined ? { toolMockConfig: options.toolMockConfig } : {}),
             ...(options?.aiMockConfig !== undefined ? { aiMockConfig: options.aiMockConfig } : {}),
             ...(options?.promptMockConfig !== undefined ? { promptMockConfig: options.promptMockConfig } : {}),
+            ...(options?.userPromptMockConfig !== undefined ? { userPromptMockConfig: options.userPromptMockConfig } : {}),
         });
         child.stdin.write(payload);
         child.stdin.end(); // Always close stdin to avoid subprocess hang
@@ -363,8 +386,9 @@ async function runGenerationObservation(observation) {
 async function rerunObservation(cwd, observation, tools) {
     const type = observation.type?.toUpperCase();
     const name = observation.name ?? '(unknown)';
-    if (type === 'TOOL' || name.startsWith('tool-')) {
-        observation.name = name.startsWith('tool-') ? name.slice(5) : name; // Support both explicit type and name prefix for tool observations
+    const isToolByName = name.startsWith('tool-') || name.startsWith('tool:');
+    if (type === 'TOOL' || isToolByName) {
+        observation.name = isToolByName ? name.slice(5) : name; // Support both explicit type and name prefix for tool observations
         return runToolObservation(cwd, observation, tools);
     }
     if (type === 'GENERATION') {
@@ -643,6 +667,10 @@ async function validateWorkflowRuns(cwd, body) {
     const promptMockConfig = body.promptMockConfig && typeof body.promptMockConfig === 'object' && !Array.isArray(body.promptMockConfig)
         ? body.promptMockConfig
         : undefined;
+    // Parse user prompt mock config if provided
+    const userPromptMockConfig = body.userPromptMockConfig && typeof body.userPromptMockConfig === 'object' && !Array.isArray(body.userPromptMockConfig)
+        ? body.userPromptMockConfig
+        : undefined;
     const workflowsModulePath = resolveWorkflowModule(cwd);
     if (!workflowsModulePath) {
         return {
@@ -658,7 +686,7 @@ async function validateWorkflowRuns(cwd, body) {
     console.log(`[elasticdash] Running workflow "${workflowName}" ${runCount} time(s) in ${mode} mode via subprocess`);
     async function runOne(runNumber) {
         console.log(`[elasticdash] === Run ${runNumber}: Starting workflow "${workflowName}" ===`);
-        const result = await runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, workflowArgs, workflowInput, (toolMockConfig || aiMockConfig || promptMockConfig) ? { ...(toolMockConfig ? { toolMockConfig } : {}), ...(aiMockConfig ? { aiMockConfig } : {}), ...(promptMockConfig ? { promptMockConfig } : {}) } : undefined)
+        const result = await runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, workflowArgs, workflowInput, (toolMockConfig || aiMockConfig || promptMockConfig || userPromptMockConfig) ? { ...(toolMockConfig ? { toolMockConfig } : {}), ...(aiMockConfig ? { aiMockConfig } : {}), ...(promptMockConfig ? { promptMockConfig } : {}), ...(userPromptMockConfig ? { userPromptMockConfig } : {}) } : undefined)
             .catch(err => {
             throw { ok: false, error: `Workflow subprocess failed: ${formatError(err)}` };
         });
@@ -969,6 +997,30 @@ function getDashboardHtml() {
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>ElasticDash Dashboard</title>
         <style>
+            /* Help icon tooltip */
+            .help-icon-wrap { position: relative; display: inline-flex; align-items: center; }
+            .help-icon {
+                display: inline-flex; align-items: center; justify-content: center;
+                width: 16px; height: 16px; border-radius: 50%;
+                background: #e0e0e0; color: #666; font-size: 11px; font-weight: bold;
+                cursor: help; vertical-align: middle; margin-left: 4px;
+                user-select: none;
+            }
+            .help-tooltip {
+                display: none; position: absolute; left: 50%; bottom: calc(100% + 8px);
+                transform: translateX(-50%);
+                background: #333; color: #fff; font-size: 12px; font-weight: 400;
+                line-height: 1.4; padding: 8px 12px; border-radius: 6px;
+                width: 280px; white-space: normal; z-index: 10000;
+                box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+                pointer-events: auto;
+            }
+            .help-tooltip::after {
+                content: ''; position: absolute; top: 100%; left: 50%;
+                transform: translateX(-50%);
+                border: 6px solid transparent; border-top-color: #333;
+            }
+            .help-icon-wrap:hover .help-tooltip { display: block; }
             /* Ensure first cell in observation-table never overflows parent */
             .observation-table td:first-child {
                 max-width: 120px;
@@ -1278,7 +1330,7 @@ function getDashboardHtml() {
             window._toolMockConfig = {}; // { toolName: { mode: 'live'|'mock-all'|'mock-specific', callIndices: [], mockData: {} } }
 
             // ---- Prompt Mock Config State ----
-            // { [originalSystemPrompt]: newSystemPrompt } — only keys where user enabled the override
+            // { [originalSystemPrompt]: { mode, replacement, callIndices? } }
             window._promptMockConfig = {};
 
             function getToolsFromTrace() {
@@ -1286,7 +1338,7 @@ function getDashboardHtml() {
                 const toolCalls = {};
                 currentObservations.forEach(function(obs, i) {
                     const isToolByType = obs.type === 'TOOL';
-                    const isToolByName = typeof obs.name === 'string' && obs.name.startsWith('tool-');
+                    const isToolByName = typeof obs.name === 'string' && (obs.name.startsWith('tool-') || obs.name.startsWith('tool:'));
                     if (!isToolByType && !isToolByName) return;
                     const name = isToolByName && obs.type !== 'TOOL'
                         ? obs.name.slice(5)
@@ -1372,14 +1424,15 @@ function getDashboardHtml() {
                     return '<div style="color:#999;font-size:13px;padding:6px 0;">No tools detected.</div>';
                 }
 
-                let html = '<div style="max-height:260px;overflow-y:auto;border:1px solid #e0e0e0;border-radius:6px;">';
-                html += '<table style="width:100%;border-collapse:collapse;font-size:13px;">';
+                let html = '<div style="border:1px solid #e0e0e0;border-radius:6px;height:100%;display:flex;flex-direction:column;overflow:hidden;">';
+                html += '<table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;">';
                 html += '<thead><tr style="background:#f5f5f5;">';
-                html += '<th style="padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Tool</th>';
-                html += '<th style="padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Calls in Trace</th>';
-                html += '<th style="padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Mock Mode</th>';
-                html += '<th style="padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Details</th>';
-                html += '</tr></thead><tbody>';
+                html += '<th style="width:30%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Tool</th>';
+                html += '<th style="width:15%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Calls</th>';
+                html += '<th style="width:20%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Mode</th>';
+                html += '<th style="width:35%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Details</th>';
+                html += '</tr></thead></table>';
+                html += '<div style="flex:1;overflow-y:auto;"><table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;"><tbody>';
 
                 toolNames.forEach(function(name) {
                     const calls = traceTools[name] || [];
@@ -1388,10 +1441,10 @@ function getDashboardHtml() {
                     const nameStyle = inTrace ? '' : 'color:#999;';
 
                     html += '<tr class="tool-mock-row" data-tool-name="' + esc(name) + '" style="border-bottom:1px solid #f0f0f0;">';
-                    html += '<td style="padding:6px 10px;font-family:Monaco,monospace;' + nameStyle + '">' + esc(name) + (inTrace ? '' : ' <span style="font-size:10px;color:#aaa;">(not in trace)</span>') + '</td>';
-                    html += '<td style="padding:6px 10px;">' + calls.length + '</td>';
-                    html += '<td style="padding:6px 10px;">';
-                    html += '<select class="tool-mock-mode" style="font-size:12px;padding:2px 4px;" onchange="window.onToolMockModeChange(\\'' + esc(name) + '\\', this.value)">';
+                    html += '<td style="width:30%;padding:6px 10px;font-family:Monaco,monospace;overflow:hidden;text-overflow:ellipsis;' + nameStyle + '">' + esc(name) + (inTrace ? '' : ' <span style="font-size:10px;color:#aaa;">(not in trace)</span>') + '</td>';
+                    html += '<td style="width:15%;padding:6px 10px;">' + calls.length + '</td>';
+                    html += '<td style="width:20%;padding:6px 10px;">';
+                    html += '<select class="tool-mock-mode" style="font-size:12px;padding:2px 4px;width: 100%;" onchange="window.onToolMockModeChange(\\'' + esc(name) + '\\', this.value)">';
                     html += '<option value="live"' + (existing.mode === 'live' ? ' selected' : '') + '>Live</option>';
                     html += '<option value="mock-all"' + (existing.mode === 'mock-all' ? ' selected' : '') + '>Mock All Calls</option>';
                     if (calls.length > 0) {
@@ -1401,7 +1454,7 @@ function getDashboardHtml() {
                     html += '</td>';
 
                     // Details column: per-call checkboxes + mock data inputs
-                    html += '<td style="padding:6px 10px;">';
+                    html += '<td style="width:35%;padding:6px 10px;">';
                     if (existing.mode === 'mock-all') {
                         let defaultData = (existing.mockData && existing.mockData[0] !== undefined) ? JSON.stringify(existing.mockData[0]) : (calls.length > 0 ? JSON.stringify(calls[0].output) : '');
                         defaultData = convert(defaultData);
@@ -1432,7 +1485,7 @@ function getDashboardHtml() {
                     html += '</tr>';
                 });
 
-                html += '</tbody></table></div>';
+                html += '</tbody></table></div></div>';
                 return html;
             }
 
@@ -1440,9 +1493,10 @@ function getDashboardHtml() {
 
             /** Extract the system prompt string from an LLM call input object or JSON string. */
             function extractSystemPromptFromInput(input) {
-                // Input may arrive as a JSON-encoded string (e.g. from Langfuse traces)
-                if (typeof input === 'string') {
-                    try { input = JSON.parse(input); } catch(e) { return null; }
+                // Input may arrive as a JSON-encoded string (e.g. from Langfuse traces).
+                // Unwrap until we get a non-string value.
+                while (typeof input === 'string') {
+                    try { input = JSON.parse(input); } catch(e) { break; }
                 }
                 if (!input || typeof input !== 'object') return null;
                 // Anthropic style: { system: "...", messages: [...] }
@@ -1464,19 +1518,24 @@ function getDashboardHtml() {
 
             /**
              * Returns an array of unique system prompts observed across all GENERATION observations.
-             * Each entry: { systemPrompt, modelName, count, rowIndex }
+             * Each entry: { systemPrompt, modelName, calls: [{obsIndex, callNumber}], count, rowIndex }
+             * callNumber is the 1-indexed occurrence of this prompt across GENERATION observations.
              */
             function getSystemPromptsFromTrace() {
-                var seen = []; // [{ systemPrompt, modelName, count }]
+                var seen = []; // [{ systemPrompt, modelName, calls, count }]
                 var seenMap = {}; // systemPrompt -> index in seen
-                currentObservations.forEach(function(obs) {
+                var callCounters = {}; // systemPrompt -> running count
+                currentObservations.forEach(function(obs, obsIndex) {
                     if (obs.type !== 'GENERATION') return;
                     var sp = extractSystemPromptFromInput(obs.input);
                     if (!sp) return;
+                    callCounters[sp] = (callCounters[sp] || 0) + 1;
+                    var callNumber = callCounters[sp];
                     if (seenMap[sp] === undefined) {
                         seenMap[sp] = seen.length;
-                        seen.push({ systemPrompt: sp, modelName: obs.model || obs.name || '(unknown)', count: 0 });
+                        seen.push({ systemPrompt: sp, modelName: obs.model || obs.name || '(unknown)', calls: [], count: 0 });
                     }
+                    seen[seenMap[sp]].calls.push({ obsIndex: obsIndex, callNumber: callNumber });
                     seen[seenMap[sp]].count++;
                 });
                 return seen.map(function(e, i) { return Object.assign({}, e, { rowIndex: i }); });
@@ -1488,82 +1547,145 @@ function getDashboardHtml() {
                     return '<div style="color:#999;font-size:13px;padding:6px 0;">No system prompts detected in trace. Only AI calls with a system prompt can be mocked here.</div>';
                 }
 
-                let html = '<div style="max-height:360px;overflow-y:auto;border:1px solid #e0e0e0;border-radius:6px;">';
-                html += '<table style="width:100%;border-collapse:collapse;font-size:13px;">';
+                let html = '<div style="border:1px solid #e0e0e0;border-radius:6px;height:100%;display:flex;flex-direction:column;overflow:hidden;">';
+                html += '<table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;">';
                 html += '<thead><tr style="background:#f5f5f5;">';
-                html += '<th style="padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;width:24px;"></th>';
-                html += '<th style="padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Model</th>';
-                html += '<th style="padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Uses</th>';
-                html += '<th style="padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">System Prompt (override applies to all calls using this prompt)</th>';
-                html += '</tr></thead><tbody>';
+                html += '<th style="width:25%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">System Prompt</th>';
+                html += '<th style="width:10%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Calls</th>';
+                html += '<th style="width:20%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Mode</th>';
+                html += '<th style="width:45%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Replacement</th>';
+                html += '</tr></thead></table>';
+                html += '<div style="flex:1;overflow-y:auto;"><table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;"><tbody>';
 
                 prompts.forEach(function(row) {
                     const key = row.systemPrompt;
-                    const isEnabled = window._promptMockConfig[key] !== undefined;
-                    const currentVal = isEnabled ? window._promptMockConfig[key] : row.systemPrompt;
-                    const preview = key.length > 80 ? key.slice(0, 80) + '…' : key;
+                    const existing = window._promptMockConfig[key] || { mode: 'live', replacement: '' };
+                    const preview = key.length > 60 ? key.slice(0, 60) + '…' : key;
 
                     html += '<tr class="prompt-mock-row" data-row-index="' + row.rowIndex + '" style="border-bottom:1px solid #f0f0f0;vertical-align:top;">';
 
-                    // Checkbox column
-                    html += '<td style="padding:8px 10px;white-space:nowrap;">';
-                    html += '<input type="checkbox" class="prompt-mock-enable" title="Override this system prompt"' + (isEnabled ? ' checked' : '') + ' onchange="window.onPromptMockToggle(' + row.rowIndex + ', this.checked)">';
-                    html += '</td>';
+                    // System prompt preview column
+                    html += '<td style="width:25%;padding:6px 10px;overflow:hidden;text-overflow:ellipsis;"><div style="font-size:11px;color:#555;font-family:Monaco,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + esc(key) + '">' + esc(preview) + '</div></td>';
 
-                    // Model column
-                    html += '<td style="padding:8px 10px;font-family:Monaco,monospace;font-size:12px;white-space:nowrap;">' + esc(row.modelName) + '</td>';
+                    // Calls count column
+                    html += '<td style="width:10%;padding:6px 10px;color:#555;white-space:nowrap;">' + row.count + 'x</td>';
 
-                    // Uses count column
-                    html += '<td style="padding:8px 10px;color:#555;white-space:nowrap;">' + row.count + 'x</td>';
+                    // Mode column
+                    html += '<td style="width:20%;padding:6px 10px;white-space:nowrap;">';
+                    html += '<select class="prompt-mock-mode" style="font-size:12px;padding:2px 4px;width: 100%;" onchange="window.onSystemPromptMockModeChange(' + row.rowIndex + ', this.value)">';
+                    html += '<option value="live"' + (existing.mode === 'live' ? ' selected' : '') + '>Live</option>';
+                    html += '<option value="replace-all"' + (existing.mode === 'replace-all' ? ' selected' : '') + '>Replace All</option>';
+                    if (row.count > 1) {
+                        html += '<option value="replace-specific"' + (existing.mode === 'replace-specific' ? ' selected' : '') + '>Replace Specific</option>';
+                    }
+                    html += '</select>';
+                    html += '</td>';
 
-                    // System prompt column
-                    html += '<td style="padding:8px 10px;width:100%;">';
-                    if (!isEnabled) {
-                        html += '<div style="font-size:11px;color:#888;font-style:italic;font-family:Monaco,monospace;max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + esc(key) + '">' + esc(preview) + '</div>';
+                    // Replacement column
+                    html += '<td style="width:45%;padding:6px 10px;">';
+                    if (existing.mode === 'replace-all') {
+                        html += '<textarea class="prompt-mock-input" data-row-index="' + row.rowIndex + '" style="width:100%;box-sizing:border-box;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:48px;resize:vertical;" oninput="window.onPromptMockInput(' + row.rowIndex + ', this.value)">' + esc(existing.replacement || key) + '</textarea>';
+                    } else if (existing.mode === 'replace-specific') {
+                        html += '<div style="font-size:11px;color:#555;margin-bottom:4px;">Select calls to replace:</div>';
+                        row.calls.forEach(function(call) {
+                            const isChecked = existing.callIndices && existing.callIndices.indexOf(call.callNumber) !== -1;
+                            html += '<div style="margin-bottom:4px;padding:4px;background:#fafafa;border-radius:4px;border:1px solid #eee;">';
+                            html += '<label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">';
+                            html += '<input type="checkbox" class="prompt-call-checkbox" value="' + call.callNumber + '"' + (isChecked ? ' checked' : '') + ' onchange="window.onSystemPromptCallCheckChange(' + row.rowIndex + ',' + call.callNumber + ',this.checked)">';
+                            html += '<span>Call #' + call.callNumber + '</span>';
+                            html += '</label>';
+                            html += '</div>';
+                        });
+                        html += '<textarea class="prompt-mock-input" data-row-index="' + row.rowIndex + '" style="width:100%;box-sizing:border-box;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:48px;resize:vertical;margin-top:4px;" oninput="window.onPromptMockInput(' + row.rowIndex + ', this.value)">' + esc(existing.replacement || key) + '</textarea>';
                     } else {
-                        html += '<textarea class="prompt-mock-input" data-row-index="' + row.rowIndex + '" style="width:100%;box-sizing:border-box;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:72px;resize:vertical;" oninput="window.onPromptMockInput(' + row.rowIndex + ', this.value)">' + esc(currentVal) + '</textarea>';
+                        html += '<span style="color:#aaa;font-size:11px;">—</span>';
                     }
                     html += '</td>';
 
                     html += '</tr>';
                 });
 
-                html += '</tbody></table></div>';
+                html += '</tbody></table></div></div>';
                 return html;
             }
 
             function buildPromptMockConfigFromUI() {
-                // Return _promptMockConfig as-is (string key → string value), filtering out blank values
                 const config = {};
                 Object.keys(window._promptMockConfig).forEach(function(key) {
-                    const val = window._promptMockConfig[key];
-                    if (typeof val === 'string' && val.trim()) config[key] = val;
+                    const entry = window._promptMockConfig[key];
+                    if (!entry || entry.mode === 'live') return;
+                    config[key] = { mode: entry.mode, replacement: entry.replacement || '' };
+                    if (entry.mode === 'replace-specific' && entry.callIndices) {
+                        config[key].callIndices = entry.callIndices;
+                    }
                 });
                 return config;
             }
 
-            window.onPromptMockToggle = function(rowIndex, enabled) {
+            window.onSystemPromptMockModeChange = function(rowIndex, mode) {
                 const prompts = getSystemPromptsFromTrace();
                 const row = prompts[rowIndex];
                 if (!row) return;
                 const key = row.systemPrompt;
-                if (!enabled) {
+                if (mode === 'live') {
                     delete window._promptMockConfig[key];
                 } else {
-                    // Pre-fill with the original system prompt so user can edit from there
-                    if (window._promptMockConfig[key] === undefined) {
-                        window._promptMockConfig[key] = row.systemPrompt;
+                    if (!window._promptMockConfig[key]) {
+                        window._promptMockConfig[key] = { mode: mode, replacement: row.systemPrompt };
+                    } else {
+                        window._promptMockConfig[key].mode = mode;
+                    }
+                    if (mode === 'replace-specific' && !window._promptMockConfig[key].callIndices) {
+                        window._promptMockConfig[key].callIndices = [];
                     }
                 }
                 const container = document.getElementById('promptMockContainer');
                 if (container) container.innerHTML = renderPromptMockSection();
             };
 
+            window.onSystemPromptCallCheckChange = function(rowIndex, callNumber, checked) {
+                const prompts = getSystemPromptsFromTrace();
+                const row = prompts[rowIndex];
+                if (!row) return;
+                const key = row.systemPrompt;
+                if (!window._promptMockConfig[key]) return;
+                var indices = window._promptMockConfig[key].callIndices || [];
+                if (checked) {
+                    if (indices.indexOf(callNumber) === -1) indices.push(callNumber);
+                } else {
+                    var pos = indices.indexOf(callNumber);
+                    if (pos >= 0) indices.splice(pos, 1);
+                }
+                window._promptMockConfig[key].callIndices = indices;
+            };
+
+            window.switchMockTab = function(tabName) {
+                const tabs = {
+                    tool: document.getElementById('mockTabTool'),
+                    prompt: document.getElementById('mockTabPrompt'),
+                    userPrompt: document.getElementById('mockTabUserPrompt'),
+                };
+                const contents = {
+                    tool: document.getElementById('mockTabToolContent'),
+                    prompt: document.getElementById('mockTabPromptContent'),
+                    userPrompt: document.getElementById('mockTabUserPromptContent'),
+                };
+                const toolExtra = document.getElementById('mockTabToolExtra');
+                Object.keys(tabs).forEach(function(key) {
+                    const isActive = key === tabName;
+                    if (tabs[key]) { tabs[key].style.borderBottomColor = isActive ? '#4f46e5' : 'transparent'; tabs[key].style.color = isActive ? '#4f46e5' : '#888'; }
+                    if (contents[key]) contents[key].style.display = isActive ? '' : 'none';
+                });
+                if (toolExtra) toolExtra.style.display = tabName === 'tool' ? 'flex' : 'none';
+            };
+
             window.onPromptMockInput = function(rowIndex, value) {
                 const prompts = getSystemPromptsFromTrace();
                 const row = prompts[rowIndex];
                 if (!row) return;
-                window._promptMockConfig[row.systemPrompt] = value;
+                if (window._promptMockConfig[row.systemPrompt]) {
+                    window._promptMockConfig[row.systemPrompt].replacement = value;
+                }
             };
 
             window.onToolMockModeChange = function(toolName, mode) {
@@ -1594,10 +1716,187 @@ function getDashboardHtml() {
                 if (container) container.innerHTML = renderToolMockSection(showAll && showAll.checked);
             };
 
+            // ---- User Prompt Mock Helpers ----
+
+            /** Extract all user-role message content strings from an LLM call input. */
+            function extractUserPromptsFromInput(input) {
+                // Unwrap JSON-encoded strings until we get a non-string value.
+                while (typeof input === 'string') {
+                    try { input = JSON.parse(input); } catch(e) { break; }
+                }
+                if (!input || typeof input !== 'object') return [];
+                var msgs = Array.isArray(input.messages) ? input.messages : (Array.isArray(input) ? input : null);
+                if (!msgs) return [];
+                var results = [];
+                for (var i = 0; i < msgs.length; i++) {
+                    var m = msgs[i];
+                    if (m && typeof m === 'object' && m.role === 'user' && typeof m.content === 'string') {
+                        results.push(m.content);
+                    }
+                }
+                return results;
+            }
+
+            /**
+             * Returns an array of unique user prompt texts observed across all GENERATION observations.
+             * Each entry: { userPrompt, modelName, calls: [{obsIndex, callNumber}], count, rowIndex }
+             * callNumber is the 1-indexed occurrence of this text across GENERATION observations.
+             */
+            function getUserPromptsFromTrace() {
+                var seen = []; // [{ userPrompt, modelName, calls, count }]
+                var seenMap = {}; // userPrompt -> index in seen
+                var callCounters = {}; // userPrompt -> running count
+                currentObservations.forEach(function(obs, obsIndex) {
+                    if (obs.type !== 'GENERATION') return;
+                    var prompts = extractUserPromptsFromInput(obs.input);
+                    var uniqueInCall = [];
+                    prompts.forEach(function(p) { if (uniqueInCall.indexOf(p) === -1) uniqueInCall.push(p); });
+                    uniqueInCall.forEach(function(p) {
+                        callCounters[p] = (callCounters[p] || 0) + 1;
+                        var callNumber = callCounters[p];
+                        if (seenMap[p] === undefined) {
+                            seenMap[p] = seen.length;
+                            seen.push({ userPrompt: p, modelName: obs.model || obs.name || '(unknown)', calls: [], count: 0 });
+                        }
+                        seen[seenMap[p]].calls.push({ obsIndex: obsIndex, callNumber: callNumber });
+                        seen[seenMap[p]].count++;
+                    });
+                });
+                return seen.map(function(e, i) { return Object.assign({}, e, { rowIndex: i }); });
+            }
+
+            function renderUserPromptMockSection() {
+                const prompts = getUserPromptsFromTrace();
+                if (prompts.length === 0) {
+                    return '<div style="color:#999;font-size:13px;padding:6px 0;">No user prompts detected in trace. Only AI calls with user-role messages can be mocked here.</div>';
+                }
+
+                let html = '<div style="border:1px solid #e0e0e0;border-radius:6px;height:100%;display:flex;flex-direction:column;overflow:hidden;">';
+                html += '<table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;">';
+                html += '<thead><tr style="background:#f5f5f5;">';
+                html += '<th style="width:30%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">User Prompt</th>';
+                html += '<th style="width:10%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Calls</th>';
+                html += '<th style="width:20%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Mode</th>';
+                html += '<th style="width:40%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Replacement</th>';
+                html += '</tr></thead></table>';
+                html += '<div style="flex:1;overflow-y:auto;"><table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;"><tbody>';
+
+                prompts.forEach(function(row) {
+                    const key = row.userPrompt;
+                    const existing = window._userPromptMockConfig[key] || { mode: 'live', replacement: '' };
+                    const preview = key.length > 60 ? key.slice(0, 60) + '…' : key;
+
+                    html += '<tr class="user-prompt-mock-row" data-row-index="' + row.rowIndex + '" style="border-bottom:1px solid #f0f0f0;vertical-align:top;">';
+
+                    // User prompt preview column
+                    html += '<td style="width:30%;padding:6px 10px;overflow:hidden;text-overflow:ellipsis;"><div style="font-size:11px;color:#555;font-family:Monaco,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + esc(key) + '">' + esc(preview) + '</div></td>';
+
+                    // Calls count column
+                    html += '<td style="width:10%;padding:6px 10px;color:#555;white-space:nowrap;">' + row.count + 'x</td>';
+
+                    // Mode column
+                    html += '<td style="width:20%;padding:6px 10px;white-space:nowrap;">';
+                    html += '<select class="user-prompt-mock-mode" style="font-size:12px;padding:2px 4px;width: 100%;" onchange="window.onUserPromptMockModeChange(' + row.rowIndex + ', this.value)">';
+                    html += '<option value="live"' + (existing.mode === 'live' ? ' selected' : '') + '>Live</option>';
+                    html += '<option value="replace-all"' + (existing.mode === 'replace-all' ? ' selected' : '') + '>Replace All</option>';
+                    if (row.count > 1) {
+                        html += '<option value="replace-specific"' + (existing.mode === 'replace-specific' ? ' selected' : '') + '>Replace Specific</option>';
+                    }
+                    html += '</select>';
+                    html += '</td>';
+
+                    // Replacement column
+                    html += '<td style="width:40%;padding:6px 10px;">';
+                    if (existing.mode === 'replace-all') {
+                        html += '<textarea class="user-prompt-mock-input" data-row-index="' + row.rowIndex + '" style="width:100%;box-sizing:border-box;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:48px;resize:vertical;" oninput="window.onUserPromptMockInput(' + row.rowIndex + ', this.value)">' + esc(existing.replacement || key) + '</textarea>';
+                    } else if (existing.mode === 'replace-specific') {
+                        html += '<div style="font-size:11px;color:#555;margin-bottom:4px;">Select calls to replace:</div>';
+                        row.calls.forEach(function(call) {
+                            const isChecked = existing.callIndices && existing.callIndices.indexOf(call.callNumber) !== -1;
+                            html += '<div style="margin-bottom:4px;padding:4px;background:#fafafa;border-radius:4px;border:1px solid #eee;">';
+                            html += '<label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">';
+                            html += '<input type="checkbox" class="user-prompt-call-checkbox" value="' + call.callNumber + '"' + (isChecked ? ' checked' : '') + ' onchange="window.onUserPromptCallCheckChange(' + row.rowIndex + ',' + call.callNumber + ',this.checked)">';
+                            html += '<span>Call #' + call.callNumber + '</span>';
+                            html += '</label>';
+                            html += '</div>';
+                        });
+                        html += '<textarea class="user-prompt-mock-input" data-row-index="' + row.rowIndex + '" style="width:100%;box-sizing:border-box;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:48px;resize:vertical;margin-top:4px;" oninput="window.onUserPromptMockInput(' + row.rowIndex + ', this.value)">' + esc(existing.replacement || key) + '</textarea>';
+                    } else {
+                        html += '<span style="color:#aaa;font-size:11px;">—</span>';
+                    }
+                    html += '</td>';
+
+                    html += '</tr>';
+                });
+
+                html += '</tbody></table></div></div>';
+                return html;
+            }
+
+            function buildUserPromptMockConfigFromUI() {
+                const config = {};
+                Object.keys(window._userPromptMockConfig).forEach(function(key) {
+                    const entry = window._userPromptMockConfig[key];
+                    if (!entry || entry.mode === 'live') return;
+                    config[key] = { mode: entry.mode, replacement: entry.replacement || '' };
+                    if (entry.mode === 'replace-specific' && entry.callIndices) {
+                        config[key].callIndices = entry.callIndices;
+                    }
+                });
+                return config;
+            }
+
+            window.onUserPromptMockModeChange = function(rowIndex, mode) {
+                const prompts = getUserPromptsFromTrace();
+                const row = prompts[rowIndex];
+                if (!row) return;
+                const key = row.userPrompt;
+                if (mode === 'live') {
+                    delete window._userPromptMockConfig[key];
+                } else {
+                    if (!window._userPromptMockConfig[key]) {
+                        window._userPromptMockConfig[key] = { mode: mode, replacement: row.userPrompt };
+                    } else {
+                        window._userPromptMockConfig[key].mode = mode;
+                    }
+                    if (mode === 'replace-specific' && !window._userPromptMockConfig[key].callIndices) {
+                        window._userPromptMockConfig[key].callIndices = [];
+                    }
+                }
+                const container = document.getElementById('userPromptMockContainer');
+                if (container) container.innerHTML = renderUserPromptMockSection();
+            };
+
+            window.onUserPromptMockInput = function(rowIndex, value) {
+                const prompts = getUserPromptsFromTrace();
+                const row = prompts[rowIndex];
+                if (!row) return;
+                if (window._userPromptMockConfig[row.userPrompt]) {
+                    window._userPromptMockConfig[row.userPrompt].replacement = value;
+                }
+            };
+
+            window.onUserPromptCallCheckChange = function(rowIndex, callNumber, checked) {
+                const prompts = getUserPromptsFromTrace();
+                const row = prompts[rowIndex];
+                if (!row) return;
+                const key = row.userPrompt;
+                if (!window._userPromptMockConfig[key]) return;
+                var indices = window._userPromptMockConfig[key].callIndices || [];
+                if (checked) {
+                    if (indices.indexOf(callNumber) === -1) indices.push(callNumber);
+                } else {
+                    var pos = indices.indexOf(callNumber);
+                    if (pos >= 0) indices.splice(pos, 1);
+                }
+                window._userPromptMockConfig[key].callIndices = indices;
+            };
+
             window.openLiveValidationDialog = function() {
                 if (window.liveValidationDialog) return;
                 window._toolMockConfig = {};    // Reset mock configs each time dialog opens
                 window._promptMockConfig = {};
+                window._userPromptMockConfig = {};
 
                 const hasTraceTools = currentObservations.some(function(o) { return o.type === 'TOOL'; });
                 const hasRegisteredTools = codeIndex.tools && codeIndex.tools.length > 0;
@@ -1606,7 +1905,7 @@ function getDashboardHtml() {
                 window.liveValidationDialog.id = 'liveValidationDialog';
                 window.liveValidationDialog.style = 'position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center;z-index:9999;';
                 window.liveValidationDialog.innerHTML = \`
-                    <div style="background:white;padding:32px 28px;border-radius:12px;box-shadow:0 2px 24px #0002;min-width:680px;max-width:90vw;max-height:90vh;overflow-y:auto;">
+                    <div style="background:white;padding:32px 28px;border-radius:12px;box-shadow:0 2px 24px #0002;width:680px;max-width:90vw;max-height:90vh;overflow-y:auto;">
                     <h3 style="margin-top:0;margin-bottom:18px;font-size:20px;">Validate Updated Flow with Live Data</h3>
                     <label style="font-size:15px;display:block;margin-bottom:8px;">How many times do you want to run the flow with live data?</label>
                     <input id="liveValidationCount" type="number" min="1" value="1" style="width:100%;font-size:16px;padding:6px 10px;margin-bottom:18px;" />
@@ -1614,23 +1913,29 @@ function getDashboardHtml() {
                         <input id="liveValidationSequential" type="checkbox" />
                         Run in sequence instead of parallel
                     </label>
-                    \${(hasTraceTools || hasRegisteredTools) ? \`
                     <div style="border-top:1px solid #eee;padding-top:16px;margin-bottom:16px;">
-                        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
-                            <div style="font-size:15px;font-weight:600;">Tool Mocking</div>
-                            <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
-                                <input id="showAllToolsToggle" type="checkbox" onchange="document.getElementById('toolMockContainer').innerHTML = renderToolMockSection(this.checked);" />
-                                Show all registered tools
-                            </label>
+                        <div style="display:flex;align-items:center;gap:0;border-bottom:2px solid #e0e0e0;margin-bottom:0;">
+                            \${(hasTraceTools || hasRegisteredTools) ? \`<button id="mockTabTool" class="mock-tab-btn" onclick="window.switchMockTab('tool')" style="padding:8px 18px;font-size:14px;font-weight:600;border:none;background:none;cursor:pointer;border-bottom:2px solid #4f46e5;color:#4f46e5;margin-bottom:-2px;">Tool Mocking <span class="help-icon-wrap"><span class="help-icon">?</span><span class="help-tooltip">Control which tools use real calls vs mock data. &lsquo;Live&rsquo; runs the real tool, &lsquo;Mock All Calls&rsquo; returns mock data for every call, and &lsquo;Mock Specific Calls&rsquo; lets you pick which call indices to mock.</span></span></button>\` : ''}
+                            <button id="mockTabPrompt" class="mock-tab-btn" onclick="window.switchMockTab('prompt')" style="padding:8px 18px;font-size:14px;font-weight:600;border:none;background:none;cursor:pointer;border-bottom:2px solid \${(hasTraceTools || hasRegisteredTools) ? 'transparent' : '#4f46e5'};color:\${(hasTraceTools || hasRegisteredTools) ? '#888' : '#4f46e5'};margin-bottom:-2px;">System Prompt <span class="help-icon-wrap"><span class="help-icon">?</span><span class="help-tooltip">Override the system prompt for LLM calls. Check a row to enable editing &mdash; the replacement applies to all LLM calls that use that exact system prompt text.</span></span></button>
+                            <button id="mockTabUserPrompt" class="mock-tab-btn" onclick="window.switchMockTab('userPrompt')" style="padding:8px 18px;font-size:14px;font-weight:600;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;color:#888;margin-bottom:-2px;">User Prompt <span class="help-icon-wrap"><span class="help-icon">?</span><span class="help-tooltip">Override user-role messages in LLM calls. Each unique user message text is listed. Choose &lsquo;Replace All&rsquo; to replace it in every LLM call where it appears, or &lsquo;Replace Specific&rsquo; to only replace it in selected call occurrences.</span></span></button>
+                            <div id="mockTabToolExtra" style="margin-left:auto;display:flex;align-items:center;">
+                                \${(hasTraceTools || hasRegisteredTools) ? \`<label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
+                                    <input id="showAllToolsToggle" type="checkbox" onchange="document.getElementById('toolMockContainer').innerHTML = renderToolMockSection(this.checked);" />
+                                    Show all tools
+                                </label>\` : ''}
+                            </div>
                         </div>
-                        <div id="toolMockContainer" style="max-height:160px;overflow-y:auto;"></div>
-                    </div>\` : ''}
-                    <div style="border-top:1px solid #eee;padding-top:16px;margin-bottom:16px;">
-                        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
-                            <div style="font-size:15px;font-weight:600;">Prompt Mocking</div>
-                            <span style="font-size:12px;color:#888;">Check a row to replace the system prompt for all calls using it</span>
+                        <div style="height:300px;position:relative;">
+                            <div id="mockTabToolContent" style="height:100%;overflow:hidden;\${(hasTraceTools || hasRegisteredTools) ? '' : 'display:none;'}">
+                                <div id="toolMockContainer" style="height:100%;"></div>
+                            </div>
+                            <div id="mockTabPromptContent" style="height:100%;overflow:hidden;\${(hasTraceTools || hasRegisteredTools) ? 'display:none;' : ''}">
+                                <div id="promptMockContainer" style="height:100%;"></div>
+                            </div>
+                            <div id="mockTabUserPromptContent" style="height:100%;overflow:hidden;display:none;">
+                                <div id="userPromptMockContainer" style="height:100%;"></div>
+                            </div>
                         </div>
-                        <div id="promptMockContainer" style="max-height:160px;overflow-y:auto;"></div>
                     </div>
                     <div style="display:flex;gap:12px;justify-content:space-between;align-items:center;">
                         <span id="liveValidationProgress" style="font-size:14px;color:#555;"></span>
@@ -1651,6 +1956,10 @@ function getDashboardHtml() {
                 if (promptMockContainer) {
                     promptMockContainer.innerHTML = renderPromptMockSection();
                 }
+                const userPromptMockContainer = document.getElementById('userPromptMockContainer');
+                if (userPromptMockContainer) {
+                    userPromptMockContainer.innerHTML = renderUserPromptMockSection();
+                }
                 document.getElementById('cancelLiveValidation').onclick = function() {
                     window.liveValidationDialog.remove();
                     window.liveValidationDialog = null;
@@ -1664,6 +1973,8 @@ function getDashboardHtml() {
                         window._toolMockConfig = toolMockConfig;
                         const promptMockConfig = buildPromptMockConfigFromUI();
                         window._promptMockConfig = promptMockConfig;
+                        const userPromptMockConfig = buildUserPromptMockConfigFromUI();
+                        window._userPromptMockConfig = userPromptMockConfig;
                         const submitBtn = document.getElementById('submitLiveValidation');
                         submitBtn.disabled = true;
                         submitBtn.textContent = 'Validating...';
@@ -1700,7 +2011,7 @@ function getDashboardHtml() {
                             const collectedTraces = [];
                             let fatalError = null;
                             for (let i = 0; i < count; i++) {
-                                const singlePayload = { workflowName: selectedWorkflow?.name, runCount: 1, sequential: false, observations: currentObservations, toolMockConfig, promptMockConfig };
+                                const singlePayload = { workflowName: selectedWorkflow?.name, runCount: 1, sequential: false, observations: currentObservations, toolMockConfig, promptMockConfig, userPromptMockConfig };
                                 try {
                                     const response = await fetch('/api/validate-workflow', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(singlePayload) });
                                     const data = await response.json();
@@ -1719,7 +2030,7 @@ function getDashboardHtml() {
                         } else {
                             // Parallel mode: single bulk request
                             if (progressEl) progressEl.textContent = \`Running \${count} workflow run\${count !== 1 ? 's' : ''} in parallel…\`;
-                            const payload = { workflowName: selectedWorkflow?.name, runCount: count, sequential: false, observations: currentObservations, toolMockConfig, promptMockConfig };
+                            const payload = { workflowName: selectedWorkflow?.name, runCount: count, sequential: false, observations: currentObservations, toolMockConfig, promptMockConfig, userPromptMockConfig };
                             try {
                                 const response = await fetch('/api/validate-workflow', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
                                 const data = await response.json();
@@ -1911,6 +2222,7 @@ function getDashboardHtml() {
                 }
             }
 
+
             function renderObservationTable() {
                 // Capture scroll positions for step 5 columns before rebuilding DOM
                 let _step5Col1Scroll = 0, _step5Col2Scroll = 0;
@@ -2424,6 +2736,7 @@ function getDashboardHtml() {
                         observations: currentObservations,
                         toolMockConfig: window._toolMockConfig || {},
                         promptMockConfig: window._promptMockConfig || {},
+                        userPromptMockConfig: window._userPromptMockConfig || {},
                     };
                     const response = await fetch('/api/run-from-breakpoint', {
                         method: 'POST',
@@ -2455,7 +2768,7 @@ function getDashboardHtml() {
                 step5RerunInFlight = true;
                 renderObservationTable();
                 try {
-                    const payload = { workflowName: selectedWorkflow?.name, runCount: 1, sequential: false, observations: currentObservations, toolMockConfig: window._toolMockConfig || {}, promptMockConfig: window._promptMockConfig || {} };
+                    const payload = { workflowName: selectedWorkflow?.name, runCount: 1, sequential: false, observations: currentObservations, toolMockConfig: window._toolMockConfig || {}, promptMockConfig: window._promptMockConfig || {}, userPromptMockConfig: window._userPromptMockConfig || {} };
                     const response = await fetch('/api/validate-workflow', {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
@@ -2507,6 +2820,7 @@ function getDashboardHtml() {
                         snapshotId: liveTrace.snapshotId,
                         toolMockConfig: window._toolMockConfig || {},
                         promptMockConfig: window._promptMockConfig || {},
+                        userPromptMockConfig: window._userPromptMockConfig || {},
                     };
                     const response = await fetch('/api/resume-agent-from-task', {
                         method: 'POST',
@@ -3027,11 +3341,11 @@ function resolveTemplateValue(value, input) {
     return value;
 }
 async function runHttpWorkflow(opts) {
-    const { workflowName, workflowInput, frozenEvents = [], promptMocks = {}, pushedEvents, runConfigs, config, dashboardPort } = opts;
+    const { workflowName, workflowInput, frozenEvents = [], promptMocks = {}, userPromptMocks, toolMockConfig, aiMockConfig, pushedEvents, runConfigs, config, dashboardPort } = opts;
     const runId = randomUUID();
-    // Register run config so the user's server can fetch frozen events and prompt mocks
+    // Register run config so the user's server can fetch frozen events, prompt mocks, and output mocks
     pushedEvents.set(runId, []);
-    runConfigs.set(runId, { frozenEvents, promptMocks });
+    runConfigs.set(runId, { frozenEvents, promptMocks, userPromptMocks, toolMockConfig, aiMockConfig });
     try {
         const parsedInput = parseObservationInput(workflowInput);
         const inputObj = parsedInput && typeof parsedInput === 'object' && !Array.isArray(parsedInput) ? parsedInput : {};
@@ -3176,14 +3490,21 @@ export async function startDashboardServer(cwd, options = {}) {
                         const resolvedInput = resolveWorkflowArgsFromObservations(body, workflowName);
                         const workflowInput = resolvedInput.input ?? null;
                         const traces = [];
-                        const promptMocks = body.promptMockConfig && typeof body.promptMockConfig === 'object' && !Array.isArray(body.promptMockConfig)
-                            ? body.promptMockConfig
-                            : {};
+                        const promptMocks = flattenPromptMockConfig(body.promptMockConfig);
+                        const valUserPromptMocks = body.userPromptMockConfig && typeof body.userPromptMockConfig === 'object' && !Array.isArray(body.userPromptMockConfig)
+                            ? body.userPromptMockConfig
+                            : undefined;
+                        const valToolMockConfig = body.toolMockConfig && typeof body.toolMockConfig === 'object' && !Array.isArray(body.toolMockConfig)
+                            ? body.toolMockConfig
+                            : undefined;
+                        const valAiMockConfig = body.aiMockConfig && typeof body.aiMockConfig === 'object' && !Array.isArray(body.aiMockConfig)
+                            ? body.aiMockConfig
+                            : undefined;
                         const runOne = async (runNumber) => {
                             const result = await runHttpWorkflow({
                                 workflowName, workflowInput, pushedEvents, runConfigs,
                                 config: httpConfig, dashboardPort: port,
-                                promptMocks,
+                                promptMocks, userPromptMocks: valUserPromptMocks, toolMockConfig: valToolMockConfig, aiMockConfig: valAiMockConfig,
                             });
                             const traceStub = { getSteps: () => [], getLLMSteps: () => [], getToolCalls: () => [], getCustomSteps: () => [], recordLLMStep: () => { }, recordToolCall: () => { }, recordCustomStep: () => { } };
                             return {
@@ -3251,14 +3572,22 @@ export async function startDashboardServer(cwd, options = {}) {
                     const httpConfig = elasticdashConfig.workflows?.[workflowName];
                     if (httpConfig?.mode === 'http') {
                         // HTTP workflow mode — call user's dev server with frozen events + prompt mocks for step replay
-                        const bpPromptMocks = body.promptMockConfig && typeof body.promptMockConfig === 'object' && !Array.isArray(body.promptMockConfig)
-                            ? body.promptMockConfig
-                            : {};
+                        const bpPromptMocks = flattenPromptMockConfig(body.promptMockConfig);
+                        const bpUserPromptMocks = body.userPromptMockConfig && typeof body.userPromptMockConfig === 'object' && !Array.isArray(body.userPromptMockConfig)
+                            ? body.userPromptMockConfig
+                            : undefined;
+                        const bpToolMockConfig = body.toolMockConfig && typeof body.toolMockConfig === 'object' && !Array.isArray(body.toolMockConfig)
+                            ? body.toolMockConfig
+                            : undefined;
+                        const bpAiMockConfig = body.aiMockConfig && typeof body.aiMockConfig === 'object' && !Array.isArray(body.aiMockConfig)
+                            ? body.aiMockConfig
+                            : undefined;
                         console.log(`[elasticdash] Run from breakpoint (HTTP mode): workflow="${workflowName}" checkpoint=${checkpoint} frozen=${frozenEvents.length}`);
                         const result = await runHttpWorkflow({
                             workflowName, workflowInput, pushedEvents, runConfigs,
                             config: httpConfig, dashboardPort: port,
-                            frozenEvents, promptMocks: bpPromptMocks,
+                            frozenEvents, promptMocks: bpPromptMocks, userPromptMocks: bpUserPromptMocks,
+                            toolMockConfig: bpToolMockConfig, aiMockConfig: bpAiMockConfig,
                         });
                         const traceStub = { getSteps: () => [], getLLMSteps: () => [], getToolCalls: () => [], getCustomSteps: () => [], recordLLMStep: () => { }, recordToolCall: () => { }, recordCustomStep: () => { } };
                         const snapshotId = result.workflowTrace ? saveSnapshot(cwd, result.workflowTrace) : undefined;
@@ -3292,8 +3621,11 @@ export async function startDashboardServer(cwd, options = {}) {
                     const promptMockConfig = body.promptMockConfig && typeof body.promptMockConfig === 'object' && !Array.isArray(body.promptMockConfig)
                         ? body.promptMockConfig
                         : undefined;
+                    const userPromptMockConfig = body.userPromptMockConfig && typeof body.userPromptMockConfig === 'object' && !Array.isArray(body.userPromptMockConfig)
+                        ? body.userPromptMockConfig
+                        : undefined;
                     console.log(`[elasticdash] Run from breakpoint: workflow="${workflowName}" checkpoint=${checkpoint} historyLen=${history.length}`);
-                    const result = await runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, workflowArgs, workflowInput, { replayMode: true, checkpoint, history, ...(toolMockConfig ? { toolMockConfig } : {}), ...(aiMockConfig ? { aiMockConfig } : {}), ...(promptMockConfig ? { promptMockConfig } : {}) });
+                    const result = await runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, workflowArgs, workflowInput, { replayMode: true, checkpoint, history, ...(toolMockConfig ? { toolMockConfig } : {}), ...(aiMockConfig ? { aiMockConfig } : {}), ...(promptMockConfig ? { promptMockConfig } : {}), ...(userPromptMockConfig ? { userPromptMockConfig } : {}) });
                     const traceStub = {
                         getSteps: () => (result.steps ?? []),
                         getLLMSteps: () => (result.llmSteps ?? []),
@@ -3370,8 +3702,11 @@ export async function startDashboardServer(cwd, options = {}) {
                     const promptMockConfig = body.promptMockConfig && typeof body.promptMockConfig === 'object' && !Array.isArray(body.promptMockConfig)
                         ? body.promptMockConfig
                         : undefined;
+                    const userPromptMockConfig = body.userPromptMockConfig && typeof body.userPromptMockConfig === 'object' && !Array.isArray(body.userPromptMockConfig)
+                        ? body.userPromptMockConfig
+                        : undefined;
                     console.log(`[elasticdash] Resume agent from task: workflow="${workflowName}" taskIndex=${taskIndex}`);
-                    const result = await runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, [], null, { replayMode: history.length > 0, checkpoint: 0, history, agentState, ...(toolMockConfig ? { toolMockConfig } : {}), ...(aiMockConfig ? { aiMockConfig } : {}), ...(promptMockConfig ? { promptMockConfig } : {}) });
+                    const result = await runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, [], null, { replayMode: history.length > 0, checkpoint: 0, history, agentState, ...(toolMockConfig ? { toolMockConfig } : {}), ...(aiMockConfig ? { aiMockConfig } : {}), ...(promptMockConfig ? { promptMockConfig } : {}), ...(userPromptMockConfig ? { userPromptMockConfig } : {}) });
                     const traceStub = {
                         getSteps: () => (result.steps ?? []),
                         getLLMSteps: () => (result.llmSteps ?? []),
@@ -3422,7 +3757,7 @@ export async function startDashboardServer(cwd, options = {}) {
             const runId = url.pathname.slice('/api/run-configs/'.length);
             const cfg = runConfigs.get(runId);
             res.writeHead(cfg ? 200 : 404, { 'Content-Type': 'application/json' });
-            res.end(JSON.stringify({ frozenEvents: cfg?.frozenEvents ?? [], promptMocks: cfg?.promptMocks ?? {} }));
+            res.end(JSON.stringify({ frozenEvents: cfg?.frozenEvents ?? [], promptMocks: cfg?.promptMocks ?? {}, ...(cfg?.userPromptMocks ? { userPromptMocks: cfg.userPromptMocks } : {}), ...(cfg?.toolMockConfig ? { toolMockConfig: cfg.toolMockConfig } : {}), ...(cfg?.aiMockConfig ? { aiMockConfig: cfg.aiMockConfig } : {}) }));
         }
         else if (url.pathname === '/api/trace-events' && req.method === 'POST') {
             // Receive telemetry events pushed from wrapAI / wrapTool in HTTP workflow mode