elasticdash-test 0.1.16 → 0.1.17-alpha-2

package/dist/html/dashboard.html

@@ -5,6 +5,30 @@
         <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;
@@ -314,7 +338,7 @@
             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() {
@@ -322,7 +346,7 @@
                 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)
@@ -408,14 +432,15 @@
                     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] || [];
@@ -424,10 +449,10 @@
                     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) {
@@ -437,7 +462,7 @@
                     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);
@@ -468,7 +493,7 @@
                     html += '</tr>';
                 });
 
-                html += '</tbody></table></div>';
+                html += '</tbody></table></div></div>';
                 return html;
             }
 
@@ -476,9 +501,10 @@
 
             /** 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: [...] }
@@ -500,19 +526,24 @@
 
             /**
              * 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 }); });
@@ -524,82 +555,145 @@
                     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) {
@@ -630,10 +724,187 @@
                 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;
@@ -642,7 +913,7 @@
                 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;" />
@@ -650,23 +921,29 @@
                         <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>
@@ -687,6 +964,10 @@
                 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;
@@ -700,6 +981,8 @@
                         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...';
@@ -736,7 +1019,7 @@
                             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();
@@ -755,7 +1038,7 @@
                         } 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();
@@ -947,6 +1230,7 @@
                 }
             }
 
+
             function renderObservationTable() {
                 // Capture scroll positions for step 5 columns before rebuilding DOM
                 let _step5Col1Scroll = 0, _step5Col2Scroll = 0;
@@ -1460,6 +1744,7 @@
                         observations: currentObservations,
                         toolMockConfig: window._toolMockConfig || {},
                         promptMockConfig: window._promptMockConfig || {},
+                        userPromptMockConfig: window._userPromptMockConfig || {},
                     };
                     const response = await fetch('/api/run-from-breakpoint', {
                         method: 'POST',
@@ -1491,7 +1776,7 @@
                 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' },
@@ -1543,6 +1828,7 @@
                         snapshotId: liveTrace.snapshotId,
                         toolMockConfig: window._toolMockConfig || {},
                         promptMockConfig: window._promptMockConfig || {},
+                        userPromptMockConfig: window._userPromptMockConfig || {},
                     };
                     const response = await fetch('/api/resume-agent-from-task', {
                         method: 'POST',