npm - elasticdash-test - Versions diffs - 0.1.13 → 0.1.16 - Mend

elasticdash-test 0.1.13 → 0.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/README.md +36 -5
package/dist/cli.js +0 -0
package/dist/dashboard-server.d.ts +9 -0
package/dist/dashboard-server.d.ts.map +1 -1
package/dist/dashboard-server.js +1984 -17
package/dist/dashboard-server.js.map +1 -1
package/dist/html/dashboard.html +161 -11
package/dist/index.cjs +828 -108
package/dist/index.d.ts +3 -2
package/dist/index.d.ts.map +1 -1
package/dist/index.js +2 -2
package/dist/index.js.map +1 -1
package/dist/interceptors/telemetry-push.d.ts +47 -0
package/dist/interceptors/telemetry-push.d.ts.map +1 -1
package/dist/interceptors/telemetry-push.js +139 -6
package/dist/interceptors/telemetry-push.js.map +1 -1
package/dist/interceptors/tool.d.ts.map +1 -1
package/dist/interceptors/tool.js +2 -1
package/dist/interceptors/tool.js.map +1 -1
package/dist/interceptors/workflow-ai.d.ts.map +1 -1
package/dist/interceptors/workflow-ai.js +28 -4
package/dist/interceptors/workflow-ai.js.map +1 -1
package/dist/internals/mock-resolver.d.ts +42 -5
package/dist/internals/mock-resolver.d.ts.map +1 -1
package/dist/internals/mock-resolver.js +124 -5
package/dist/internals/mock-resolver.js.map +1 -1
package/dist/workflow-runner-worker.js +8 -2
package/dist/workflow-runner-worker.js.map +1 -1
package/package.json +3 -2
package/src/dashboard-server.ts +86 -17
package/src/html/dashboard.html +161 -11
package/src/index.ts +3 -2
package/src/interceptors/telemetry-push.ts +158 -7
package/src/interceptors/tool.ts +2 -1
package/src/interceptors/workflow-ai.ts +30 -4
package/src/internals/mock-resolver.ts +131 -5
package/src/workflow-runner-worker.ts +23 -2

package/dist/dashboard-server.js CHANGED Viewed

@@ -2,7 +2,7 @@ import http from 'node:http';
 import path from 'node:path';
 import { existsSync, readFileSync, readdirSync, statSync, writeFileSync, mkdirSync, rmSync } from 'node:fs';
 import { spawn } from 'node:child_process';
-import { pathToFileURL, fileURLToPath } from 'url';
+import { pathToFileURL } from 'url';
 import { randomUUID } from 'node:crypto';
 import { callProviderLLM } from './matchers/index.js';
 import chokidar from 'chokidar';
@@ -311,6 +311,8 @@ function runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowN
             ...(options?.history !== undefined ? { history: options.history } : {}),
             ...(options?.agentState !== undefined ? { agentState: options.agentState } : {}),
             ...(options?.toolMockConfig !== undefined ? { toolMockConfig: options.toolMockConfig } : {}),
+            ...(options?.aiMockConfig !== undefined ? { aiMockConfig: options.aiMockConfig } : {}),
+            ...(options?.promptMockConfig !== undefined ? { promptMockConfig: options.promptMockConfig } : {}),
         });
         child.stdin.write(payload);
         child.stdin.end(); // Always close stdin to avoid subprocess hang
@@ -633,6 +635,14 @@ async function validateWorkflowRuns(cwd, body) {
     const toolMockConfig = body.toolMockConfig && typeof body.toolMockConfig === 'object' && !Array.isArray(body.toolMockConfig)
         ? body.toolMockConfig
         : undefined;
+    // Parse AI mock config if provided
+    const aiMockConfig = body.aiMockConfig && typeof body.aiMockConfig === 'object' && !Array.isArray(body.aiMockConfig)
+        ? body.aiMockConfig
+        : undefined;
+    // Parse prompt mock config if provided
+    const promptMockConfig = body.promptMockConfig && typeof body.promptMockConfig === 'object' && !Array.isArray(body.promptMockConfig)
+        ? body.promptMockConfig
+        : undefined;
     const workflowsModulePath = resolveWorkflowModule(cwd);
     if (!workflowsModulePath) {
         return {
@@ -648,7 +658,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 ? { toolMockConfig } : undefined)
+        const result = await runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, workflowArgs, workflowInput, (toolMockConfig || aiMockConfig || promptMockConfig) ? { ...(toolMockConfig ? { toolMockConfig } : {}), ...(aiMockConfig ? { aiMockConfig } : {}), ...(promptMockConfig ? { promptMockConfig } : {}) } : undefined)
             .catch(err => {
             throw { ok: false, error: `Workflow subprocess failed: ${formatError(err)}` };
         });
@@ -952,8 +962,1938 @@ function openBrowser(url) {
  */
 function getDashboardHtml() {
     /* DASHBOARD_HTML_START */
-    const __dirname = path.dirname(fileURLToPath(import.meta.url));
-    return readFileSync(path.join(__dirname, 'html', 'dashboard.html'), 'utf8');
+    return `<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>ElasticDash Dashboard</title>
+        <style>
+            /* Ensure first cell in observation-table never overflows parent */
+            .observation-table td:first-child {
+                max-width: 120px;
+                overflow: auto;
+                white-space: nowrap;
+            }
+            * { margin: 0; padding: 0; box-sizing: border-box; }
+            body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f5f5; color: #333; }
+            .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
+            header { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+            h1 { font-size: 28px; margin-bottom: 8px; color: #1a1a1a; }
+            .subtitle { font-size: 14px; color: #666; margin-bottom: 16px; }
+            .search-box { display: flex; gap: 10px; }
+            input[type="text"] { flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
+            input[type="text"]:focus { outline: none; border-color: #0066cc; box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1); }
+            .result-count { padding: 10px 12px; background: #f0f0f0; border-radius: 6px; font-size: 14px; color: #666; }
+            .workflows-list { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; max-height: 65vh; display: flex; flex-direction: column; }
+            .workflows-table { width: 100%; border-collapse: collapse; }
+            .workflows-table thead { background: #f5f5f5; position: sticky; top: 0; z-index: 10; }
+            .workflows-table th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 13px; color: #333; border-bottom: 2px solid #ddd; }
+            .workflows-table td { padding: 12px 16px; border-bottom: 1px solid #eee; }
+            .workflows-table tbody tr { cursor: pointer; transition: background-color 0.2s; }
+            .workflows-table tbody tr:hover { background-color: #f9f9f9; }
+            .workflow-name-cell { font-family: Monaco, monospace; font-weight: 600; color: #0066cc; }
+            .workflow-path-cell { font-family: Monaco, monospace; font-size: 12px; color: #666; }
+            .async-badge { display: inline-block; background: #e8f3ff; color: #0066cc; padding: 2px 8px; border-radius: 4px; font-size: 11px; margin-left: 8px; }
+            .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; align-items: center; justify-content: center; }
+            .modal.open { display: flex; }
+            .modal-content { background: white; border-radius: 12px; width: 92%; max-width: 1100px; max-height: 90vh; overflow-y: auto; padding: 30px; }
+            .modal-header { display: flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
+            .modal-title { font-size: 20px; font-weight: 600; }
+            .modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #999; }
+            .upload-area { border: 2px dashed #ddd; border-radius: 8px; padding: 30px; text-align: center; cursor: pointer; background: #fafafa; overflow: hidden; height: 520px; position: relative; }
+            .upload-area:hover { border-color: #0066cc; background: #f0f7ff; }
+            .upload-area > div {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+            .upload-icon { font-size: 32px; margin-bottom: 12px; }
+            input[type="file"] { display: none; }
+            .upload-status { margin-top: 20px; padding: 12px; border-radius: 6px; display: none; }
+            .upload-status.success { display: block; background: #e8f5e9; color: #2e7d32; }
+            .upload-status.error { display: block; background: #ffebee; color: #c62828; }
+            .hidden { display: none !important; }
+            .trace-viewer { display: none; margin-top: 20px; }
+            .trace-viewer.visible { display: block; }
+            .trace-layout { display: grid; grid-template-columns: 40% calc(60% - 16px); gap: 16px; overflow: auto; height: 520px; }
+            .trace-layout.step-5 { display: grid; grid-template-columns: calc(30% - 16px) calc(30% - 16px) 40%; gap: 16px; overflow: auto; height: 520px; }
+            .trace-layout.step-4 { display: grid; grid-template-columns: calc(30% - 16px) calc(30% - 16px) 40%; gap: 16px; overflow: auto; height: 520px; }
+            .trace-left, .trace-right { background: #f9f9f9; border-radius: 8px; padding: 14px; border: 1px solid #eee; }
+            .trace-section-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
+            .observation-table-wrap { max-height: 460px; overflow: auto; background: white; border-radius: 6px; border: 1px solid #eee; }
+            .observation-table { width: 100%; border-collapse: collapse; }
+            .observation-table thead { background: #f5f5f5; position: sticky; top: 0; z-index: 1; }
+            .observation-table th { text-align: left; font-size: 12px; font-weight: 600; color: #555; padding: 10px 12px; border-bottom: 1px solid #e8e8e8; }
+            .observation-table td { font-size: 13px; padding: 10px 12px; border-bottom: 1px solid #f0f0f0; }
+            .observation-table tbody tr { cursor: pointer; }
+            .observation-table tbody tr:hover { background: #f7fbff; }
+            .observation-table tbody tr.selected { background: #e8f3ff; }
+            .obs-type { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; background: #e6e6e6; color: #333; }
+            .obs-type.tool { background: #e8f7ef; color: #1f7a44; }
+            .obs-type.ai { background: #e8f1ff; color: #1f5fbf; }
+            .run-from-bp-btn { font-size: 11px; padding: 2px 8px; border: 1px solid #bbb; border-radius: 4px; background: #f5f5f5; color: #333; cursor: pointer; white-space: nowrap; }
+            .run-from-bp-btn:hover { background: #e0edff; border-color: #5a8fd8; color: #1f5fbf; }
+            .run-from-bp-btn:disabled { opacity: 0.6; cursor: default; }
+            .resume-agent-btn { font-size: 11px; padding: 2px 8px; border: 1px solid #b8a0d8; border-radius: 4px; background: #f3eeff; color: #5a2d9c; cursor: pointer; white-space: nowrap; margin-left: 6px; }
+            .resume-agent-btn:hover { background: #e6d8ff; border-color: #7c52b8; color: #3d1f7a; }
+            .resume-agent-btn:disabled { opacity: 0.6; cursor: default; }
+            .agent-task-badge { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; background: #f0e8ff; color: #6a2fb0; border: 1px solid #d4b8f0; margin-left: 6px; font-weight: 600; }
+            .agent-task-row { background: #f7f0ff; border-left: 3px solid #8560c6; }
+            .frozen-row { background: #eef7ff; border-left: 3px solid #8cbcf5; }
+            .observation-table tbody tr.selected.frozen-row { background: #dcebff; }
+            .frozen-tag { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; background: #dcecff; color: #1f5fbf; border: 1px solid #a9c8f3; margin-left: 6px; font-weight: 600; }
+            .detail-sections { display: flex; flex-direction: column; gap: 12px; height: 486.5px; overflow-y: auto; }
+            .detail-section { background: white; border: 1px solid #eee; border-radius: 6px; padding: 10px; }
+            .detail-title { font-size: 12px; font-weight: 600; margin-bottom: 8px; color: #555; text-transform: uppercase; letter-spacing: 0.02em; }
+            .detail-pre { margin: 0; font-family: Monaco, monospace; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: #fafafa; border-radius: 4px; padding: 10px; border: 1px solid #f0f0f0; min-height: 56px; max-height: 340px; overflow-y: auto; }
+            .modal-footer { display: flex; margin-top: 24px; padding-top: 20px; border-top: 1px solid #eee; gap: 12px; justify-content: space-between; }
+            .btn { padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; }
+            .btn-secondary { background: #f0f0f0; color: #333; }
+            .btn-secondary:hover { background: #e0e0e0; }
+            .btn-primary { background: #0066cc; color: white; }
+            .btn-primary:hover { background: #0052a3; }
+            .btn:disabled { opacity: 0.6; cursor: not-allowed; }
+            .btn-primary:disabled:hover { background: #0066cc; }
+            .btn-secondary:disabled:hover { background: #f0f0f0; }
+            .obs-checkbox { width: 18px; height: 18px; cursor: pointer; }
+            .rerun-status { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; }
+            .rerun-status.running { color: #666; }
+            .rerun-status.success { color: #1f7a44; }
+            .rerun-status.error { color: #c62828; }
+            @media (max-width: 900px) {
+            .trace-layout { grid-template-columns: 1fr; }
+            }
+        </style>
+        <script>
+            const updatedInputs = new Map();
+        </script>
+    </head>
+    <body>
+        <div class="container">
+            <header>
+                <h1>Workflow Functions</h1>
+                <div class="subtitle">Select a workflow to debug with trace analysis</div>
+                <div class="search-box">
+                    <input type="text" id="searchInput" placeholder="Search by name or path..." autocomplete="off">
+                    <div class="result-count"><span id="resultCount">0</span> workflows</div>
+                </div>
+            </header>
+            <div class="workflows-list">
+                <table class="workflows-table">
+                    <thead><tr><th style="width: 35%">Function Name</th><th>File Path</th></tr></thead>
+                    <tbody id="workflowsTableBody"><tr><td colspan="2" style="text-align: center; padding: 40px;">Loading...</td></tr></tbody>
+                </table>
+            </div>
+        </div>
+        <div id="traceModal" class="modal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="modal-title">Import Trace for Analysis</h2>
+                    <button class="modal-close" id="closeModal">&times;</button>
+                </div>
+                <div id="uploadArea" class="upload-area">
+                    <div>Drag and Drop <br />or <br />Click to Upload</div>
+                    <input type="file" id="traceFile" accept=".json" />
+                </div>
+                <div id="uploadStatus" class="upload-status"></div>
+                <div id="traceViewer" class="trace-viewer">
+                    <div class="trace-layout">
+                        <div class="trace-left">
+                            <div class="trace-section-title">Observations</div>
+                            <div class="observation-table-wrap">
+                                <table class="observation-table">
+                                <thead id="observationTableHead"><tr><th style="width: 40px;">Check</th><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
+                                <tbody id="observationTableBody"></tbody>
+                                </table>
+                            </div>
+                        </div>
+                        <div class="trace-right">
+                            <div id="observationDetail"></div>
+                        </div>
+                    </div>
+                </div>
+                <div id="modalFooter" class="modal-footer">
+                    <button class="btn btn-secondary" id="changeTraceBtn">Change Trace File</button>
+                    <button class="btn btn-primary" id="nextBtn">Next</button>
+                </div>
+            </div>
+        </div>
+        <script>
+            console.log("[Dashboard] Script starting...");
+            let allWorkflows = [], codeIndex = {workflows: [], tools: []}, selectedWorkflow = null;
+            let currentObservations = [], selectedObservationIndex = -1;
+            let rerunHistory = new Map();
+            let rerunInFlight = new Set();
+            let step4SelectedRun = -1;
+            let step5RunTraces = [];
+            let repoRoot = ''; // Will be fetched from API
+            try {
+                const _saved = localStorage.getItem('ed_step5RunTraces');
+                if (_saved) step5RunTraces = JSON.parse(_saved);
+            } catch {}
+            let step5RunMeta = { loading: false, error: '', runCount: 0, sequential: false };
+            let step5RerunInFlight = false;
+            function computeDurationMs(obs) {
+                if (obs.durationMs != null) return obs.durationMs;
+                if (obs.latency != null && obs.latency > 0) return Math.round(obs.latency * 1000);
+                if (obs.startTime && obs.endTime) {
+                    const diff = new Date(obs.endTime).getTime() - new Date(obs.startTime).getTime();
+                    if (Number.isFinite(diff) && diff >= 0) return diff;
+                }
+                if (obs.latency != null) return 0;
+                return null;
+            }
+            function formatDuration(ms) {
+                if (ms == null) return '—';
+                if (ms < 1000) return ms + ' ms';
+                return (ms / 1000).toFixed(2) + ' s';
+            }
+            function extractUsage(obs) {
+                if (obs && (obs.usage && (obs.usage.inputTokens != null || obs.usage.outputTokens != null))) {
+                    return obs.usage;
+                }
+                if (obs && (obs.usageDetails && (obs.usageDetails.input != null || obs.usageDetails.output != null))) {
+                    return { inputTokens: obs.usageDetails.input, outputTokens: obs.usageDetails.output, totalTokens: obs.usageDetails.total };
+                }
+                if (obs && (obs.inputUsage != null || obs.outputUsage != null)) {
+                    return { inputTokens: obs.inputUsage, outputTokens: obs.outputUsage, totalTokens: obs.totalUsage };
+                }
+                return null;
+            }
+            function renderUsage(obs) {
+                const u = extractUsage(obs);
+                if (!u || !(u.inputTokens > 0 || u.outputTokens > 0 || u.totalTokens > 0)) return '';
+                const lines = [];
+                if (u.inputTokens  != null) lines.push('Input tokens:  ' + u.inputTokens);
+                if (u.outputTokens != null) lines.push('Output tokens: ' + u.outputTokens);
+                if (u.totalTokens  != null) lines.push('Total tokens:  ' + u.totalTokens);
+                if (!lines.length) return '';
+                return \`<div class="detail-section"><div class="detail-title">Usage</div><pre class="detail-pre">\${lines.join('\\n')}</pre></div>\`;
+            }
+            function persistTraces() {
+                try {
+                    // Store compact version — strip bulky workflowTrace.events (snapshot is on server)
+                    const compact = step5RunTraces.map(function(t) {
+                        const { workflowTrace, ...rest } = t;
+                        return rest;
+                    });
+                    localStorage.setItem('ed_step5RunTraces', JSON.stringify(compact));
+                } catch {}
+            }
+            const tbody = document.getElementById("workflowsTableBody");
+            const countEl = document.getElementById("resultCount");
+            const modal = document.getElementById("traceModal");
+            const uploadArea = document.getElementById("uploadArea");
+            const fileInput = document.getElementById("traceFile");
+            const modalFooter = document.getElementById("modalFooter");
+            const uploadStatus = document.getElementById("uploadStatus");
+            const traceViewer = document.getElementById("traceViewer");
+            let observationTableBody = document.getElementById("observationTableBody");
+            let observationDetail = document.getElementById("observationDetail");
+            const modalTitle = document.querySelector(".modal-title");
+            console.log("[Dashboard] DOM elements loaded, tbody:", tbody);
+            let currentStep = 0; // 0=upload, 3=mark, 4=verify, 5=validate
+            let checkedObservations = new Set();
+            document.getElementById("closeModal").onclick = () => {
+                modal.classList.remove("open");
+                resetTraceModal();
+            };
+            modal.onclick = (e) => {
+                if (e.target === modal) {
+                modal.classList.remove("open");
+                resetTraceModal();
+                }
+            };
+            document.getElementById("changeTraceBtn").onclick = () => {
+            if (currentStep === 3) {
+                resetTraceModal();
+            } else if (currentStep === 4) {
+                // Go back to Step 3
+                currentStep = 3;
+                checkedObservations.clear();  // Clear to allow reselecting different steps
+                updateModalTitle();
+                updateFooterButtons();
+                renderObservationTable();
+                // Auto-select first observation
+                if (currentObservations.length > 0) {
+                    selectObservation(0);
+                }
+            } else if (currentStep === 5) {
+                // Go back to Step 3 (Still Failing)
+                currentStep = 3;
+                checkedObservations.clear();  // Clear to allow reselecting different steps
+                updateModalTitle();
+                updateFooterButtons();
+                renderObservationTable();
+                // Auto-select first observation
+                if (currentObservations.length > 0) {
+                    selectObservation(0);
+                }
+            }
+            };
+            document.getElementById("nextBtn").onclick = () => {
+            if (currentStep < 3) {
+                alert("Please upload a trace file to continue");
+                return;
+            }
+            if (currentStep === 3) {
+                // Validate that at least one checkbox is checked
+                if (checkedObservations.size === 0) {
+                alert("Please select at least one step to mark as broken");
+                return;
+                }
+                // Move to Step 4
+                currentStep = 4;
+                updateModalTitle();
+                updateFooterButtons();
+                renderObservationTable();
+                // Auto-select first checked observation
+                const checkedArray = Array.from(checkedObservations);
+                if (checkedArray.length > 0) {
+                    window.step4SelectObservation(checkedArray[0]);
+                }
+            } else if (currentStep === 4) {
+                // Show prompt-update confirmation (if needed), then live validation dialog
+                window.openPromptConfirmation(() => window.openLiveValidationDialog());
+                return;
+            } else if (currentStep === 5) {
+                modal.classList.remove("open");
+                resetTraceModal();
+                customFooter.remove();
+            }
+            };
+            // ---- Tool Mock Config State ----
+            window._toolMockConfig = {}; // { toolName: { mode: 'live'|'mock-all'|'mock-specific', callIndices: [], mockData: {} } }
+            // ---- Prompt Mock Config State ----
+            // { [originalSystemPrompt]: newSystemPrompt } — only keys where user enabled the override
+            window._promptMockConfig = {};
+            function getToolsFromTrace() {
+                // Extract unique tool names and their call details from the uploaded trace observations
+                const toolCalls = {};
+                currentObservations.forEach(function(obs, i) {
+                    const isToolByType = obs.type === 'TOOL';
+                    const isToolByName = typeof obs.name === 'string' && obs.name.startsWith('tool-');
+                    if (!isToolByType && !isToolByName) return;
+                    const name = isToolByName && obs.type !== 'TOOL'
+                        ? obs.name.slice(5)
+                        : (obs.name || '(unknown)');
+                    if (!toolCalls[name]) toolCalls[name] = [];
+                    toolCalls[name].push({ index: toolCalls[name].length + 1, obsIndex: i, input: obs.input, output: obs.output });
+                });
+                return toolCalls;
+            }
+            function getAllRegisteredTools() {
+                // From codeIndex.tools (fetched at page load from /api/code-index)
+                return (codeIndex.tools || []).map(function(t) { return t.name; });
+            }
+            function buildToolMockConfigFromUI() {
+                const config = {};
+                const rows = document.querySelectorAll('.tool-mock-row');
+                rows.forEach(function(row) {
+                    const toolName = row.dataset.toolName;
+                    const modeSelect = row.querySelector('.tool-mock-mode');
+                    const mode = modeSelect ? modeSelect.value : 'live';
+                    if (mode === 'live') return;
+                    const entry = { mode: mode };
+                    if (mode === 'mock-specific') {
+                        const checkboxes = row.querySelectorAll('.tool-call-checkbox:checked');
+                        entry.callIndices = Array.from(checkboxes).map(function(cb) { return parseInt(cb.value, 10); });
+                        if (entry.callIndices.length === 0) return; // No calls selected, treat as live
+                    }
+                    // Collect mock data
+                    entry.mockData = {};
+                    const dataInputs = row.querySelectorAll('.tool-mock-data-input');
+                    dataInputs.forEach(function(inp) {
+                        const callIdx = parseInt(inp.dataset.callIdx, 10);
+                        if (!inp.value.trim()) return;
+                        try { entry.mockData[callIdx] = JSON.parse(inp.value); }
+                        catch(e) { entry.mockData[callIdx] = inp.value; }
+                    });
+                    config[toolName] = entry;
+                });
+                return config;
+            }
+            function cleanValue(value) {
+                if (typeof value === "string") {
+                    value = value.replaceAll('\\\\"', '');
+                    // remove surrounding quotes if they exist
+                    if (value.startsWith('"') && value.endsWith('"')) {
+                        return value.slice(1, -1);
+                    }
+                    return value;
+                }
+                if (Array.isArray(value)) {
+                    return value.map(cleanValue);
+                }
+                if (typeof value === "object" && value !== null) {
+                    const result = {};
+                    for (const key in value) {
+                    result[key] = cleanValue(value[key]);
+                    }
+                    return result;
+                }
+                return value;
+            }
+            function convert(input) {
+                const parsed = JSON.parse(input);
+                return cleanValue(parsed);
+            }
+            function renderToolMockSection(showAll) {
+                const traceTools = getToolsFromTrace();
+                const allToolNames = getAllRegisteredTools();
+                const traceToolNames = Object.keys(traceTools);
+                const toolNames = showAll
+                    ? Array.from(new Set([...traceToolNames, ...allToolNames]))
+                    : traceToolNames;
+                if (toolNames.length === 0) {
+                    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;">';
+                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>';
+                toolNames.forEach(function(name) {
+                    const calls = traceTools[name] || [];
+                    const inTrace = traceToolNames.includes(name);
+                    const existing = window._toolMockConfig[name] || { mode: 'live' };
+                    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 += '<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) {
+                        html += '<option value="mock-specific"' + (existing.mode === 'mock-specific' ? ' selected' : '') + '>Mock Specific Calls</option>';
+                    }
+                    html += '</select>';
+                    html += '</td>';
+                    // Details column: per-call checkboxes + mock data inputs
+                    html += '<td style="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);
+                        html += '<div style="font-size:11px;color:#555;margin-bottom:4px;">Mock data (JSON):</div>';
+                        html += '<textarea class="tool-mock-data-input" data-call-idx="0" style="width:100%;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:32px;resize:vertical;" placeholder="Return value for all calls">' + esc(defaultData) + '</textarea>';
+                    } else if (existing.mode === 'mock-specific' && calls.length > 0) {
+                        html += '<div style="font-size:11px;color:#555;margin-bottom:4px;">Select calls to mock:</div>';
+                        calls.forEach(function(call) {
+                            const isChecked = existing.callIndices && existing.callIndices.includes(call.index);
+                            const inputPreview = typeof call.input === 'string' ? call.input.slice(0, 40) : JSON.stringify(call.input || '').slice(0, 40);
+                            let mockVal = (existing.mockData && existing.mockData[call.index] !== undefined) ? JSON.stringify(existing.mockData[call.index]) : JSON.stringify(call.output);
+                            mockVal = convert(mockVal);
+                            html += '<div style="margin-bottom:6px;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="tool-call-checkbox" value="' + call.index + '"' + (isChecked ? ' checked' : '') + ' onchange="window.onToolCallCheckChange(\\'' + esc(name) + '\\',' + call.index + ',this.checked)">';
+                            html += '<span>Call #' + call.index + '</span>';
+                            html += '<span style="color:#888;font-size:11px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + esc(inputPreview) + '</span>';
+                            html += '</label>';
+                            if (isChecked) {
+                                html += '<textarea class="tool-mock-data-input" data-call-idx="' + call.index + '" style="width:100%;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:28px;resize:vertical;margin-top:4px;" placeholder="Mock return value (JSON)">' + esc(mockVal) + '</textarea>';
+                            }
+                            html += '</div>';
+                        });
+                    } else {
+                        html += '<span style="color:#aaa;font-size:11px;">—</span>';
+                    }
+                    html += '</td>';
+                    html += '</tr>';
+                });
+                html += '</tbody></table></div>';
+                return html;
+            }
+            // ---- Prompt Mock Helpers ----
+            /** 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; }
+                }
+                if (!input || typeof input !== 'object') return null;
+                // Anthropic style: { system: "...", messages: [...] }
+                if (typeof input.system === 'string') return input.system;
+                // Custom wrapAI callers: { systemPrompt: "...", messages: [...] }
+                if (typeof input.systemPrompt === 'string' && input.systemPrompt.length > 0) return input.systemPrompt;
+                // OpenAI / plain array: messages with role === "system"
+                var msgs = Array.isArray(input.messages) ? input.messages : (Array.isArray(input) ? input : null);
+                if (msgs) {
+                    for (var i = 0; i < msgs.length; i++) {
+                        var m = msgs[i];
+                        if (m && typeof m === 'object' && m.role === 'system' && typeof m.content === 'string') {
+                            return m.content;
+                        }
+                    }
+                }
+                return null;
+            }
+            /**
+             * Returns an array of unique system prompts observed across all GENERATION observations.
+             * Each entry: { systemPrompt, modelName, count, rowIndex }
+             */
+            function getSystemPromptsFromTrace() {
+                var seen = []; // [{ systemPrompt, modelName, count }]
+                var seenMap = {}; // systemPrompt -> index in seen
+                currentObservations.forEach(function(obs) {
+                    if (obs.type !== 'GENERATION') return;
+                    var sp = extractSystemPromptFromInput(obs.input);
+                    if (!sp) return;
+                    if (seenMap[sp] === undefined) {
+                        seenMap[sp] = seen.length;
+                        seen.push({ systemPrompt: sp, modelName: obs.model || obs.name || '(unknown)', count: 0 });
+                    }
+                    seen[seenMap[sp]].count++;
+                });
+                return seen.map(function(e, i) { return Object.assign({}, e, { rowIndex: i }); });
+            }
+            function renderPromptMockSection() {
+                const prompts = getSystemPromptsFromTrace();
+                if (prompts.length === 0) {
+                    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;">';
+                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>';
+                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;
+                    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>';
+                    // Model column
+                    html += '<td style="padding:8px 10px;font-family:Monaco,monospace;font-size:12px;white-space:nowrap;">' + esc(row.modelName) + '</td>';
+                    // Uses count column
+                    html += '<td style="padding:8px 10px;color:#555;white-space:nowrap;">' + row.count + 'x</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>';
+                    } 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 += '</td>';
+                    html += '</tr>';
+                });
+                html += '</tbody></table></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;
+                });
+                return config;
+            }
+            window.onPromptMockToggle = function(rowIndex, enabled) {
+                const prompts = getSystemPromptsFromTrace();
+                const row = prompts[rowIndex];
+                if (!row) return;
+                const key = row.systemPrompt;
+                if (!enabled) {
+                    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;
+                    }
+                }
+                const container = document.getElementById('promptMockContainer');
+                if (container) container.innerHTML = renderPromptMockSection();
+            };
+            window.onPromptMockInput = function(rowIndex, value) {
+                const prompts = getSystemPromptsFromTrace();
+                const row = prompts[rowIndex];
+                if (!row) return;
+                window._promptMockConfig[row.systemPrompt] = value;
+            };
+            window.onToolMockModeChange = function(toolName, mode) {
+                if (!window._toolMockConfig[toolName]) window._toolMockConfig[toolName] = { mode: 'live' };
+                // Save current mock data before switching
+                window._toolMockConfig[toolName] = { ...window._toolMockConfig[toolName], mode: mode };
+                if (mode === 'mock-specific' && !window._toolMockConfig[toolName].callIndices) {
+                    window._toolMockConfig[toolName].callIndices = [];
+                }
+                // Re-render tool mock section
+                const showAll = document.getElementById('showAllToolsToggle');
+                const container = document.getElementById('toolMockContainer');
+                if (container) container.innerHTML = renderToolMockSection(showAll && showAll.checked);
+            };
+            window.onToolCallCheckChange = function(toolName, callIdx, checked) {
+                if (!window._toolMockConfig[toolName]) window._toolMockConfig[toolName] = { mode: 'mock-specific', callIndices: [] };
+                const indices = window._toolMockConfig[toolName].callIndices || [];
+                if (checked && !indices.includes(callIdx)) {
+                    indices.push(callIdx);
+                } else if (!checked) {
+                    const pos = indices.indexOf(callIdx);
+                    if (pos >= 0) indices.splice(pos, 1);
+                }
+                window._toolMockConfig[toolName].callIndices = indices;
+                const showAll = document.getElementById('showAllToolsToggle');
+                const container = document.getElementById('toolMockContainer');
+                if (container) container.innerHTML = renderToolMockSection(showAll && showAll.checked);
+            };
+            window.openLiveValidationDialog = function() {
+                if (window.liveValidationDialog) return;
+                window._toolMockConfig = {};    // Reset mock configs each time dialog opens
+                window._promptMockConfig = {};
+                const hasTraceTools = currentObservations.some(function(o) { return o.type === 'TOOL'; });
+                const hasRegisteredTools = codeIndex.tools && codeIndex.tools.length > 0;
+                window.liveValidationDialog = document.createElement('div');
+                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;">
+                    <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;" />
+                    <label style="display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:18px;">
+                        <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>
+                        <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>
+                        <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>
+                        <div style="display:flex;gap:12px;">
+                            <button id="cancelLiveValidation" class="btn btn-secondary">Cancel</button>
+                            <button id="submitLiveValidation" class="btn btn-primary">Validate</button>
+                        </div>
+                    </div>
+                    </div>
+                \`;
+                document.body.appendChild(window.liveValidationDialog);
+                // Render mock sections after DOM insertion
+                const toolMockContainer = document.getElementById('toolMockContainer');
+                if (toolMockContainer) {
+                    toolMockContainer.innerHTML = renderToolMockSection(false);
+                }
+                const promptMockContainer = document.getElementById('promptMockContainer');
+                if (promptMockContainer) {
+                    promptMockContainer.innerHTML = renderPromptMockSection();
+                }
+                document.getElementById('cancelLiveValidation').onclick = function() {
+                    window.liveValidationDialog.remove();
+                    window.liveValidationDialog = null;
+                };
+                document.getElementById('submitLiveValidation').onclick = async function() {
+                    const count = parseInt(document.getElementById('liveValidationCount').value, 10);
+                    const sequential = document.getElementById('liveValidationSequential').checked;
+                    if (count >= 1) {
+                        // Build mock configs from UI state and persist for "Run from here"
+                        const toolMockConfig = buildToolMockConfigFromUI();
+                        window._toolMockConfig = toolMockConfig;
+                        const promptMockConfig = buildPromptMockConfigFromUI();
+                        window._promptMockConfig = promptMockConfig;
+                        const submitBtn = document.getElementById('submitLiveValidation');
+                        submitBtn.disabled = true;
+                        submitBtn.textContent = 'Validating...';
+                        const progressEl = document.getElementById('liveValidationProgress');
+                        function finishValidation(collectedTraces, errorMsg, usedSequential) {
+                            if (progressEl) progressEl.textContent = '';
+                            window.liveValidationDialog.remove();
+                            window.liveValidationDialog = null;
+                            window.liveValidationCount = count;
+                            window.liveValidationSequential = usedSequential;
+                            window.step5SelectedTrace = 0;
+                            window.step5SelectedObservation = 0;
+                            currentStep = 5;
+                            updateModalTitle();
+                            updateFooterButtons();
+                            if (errorMsg && collectedTraces.length === 0) {
+                                step5RunTraces = [];
+                                localStorage.removeItem('ed_step5RunTraces');
+                                step5RunMeta = { loading: false, error: errorMsg, runCount: count, sequential: usedSequential };
+                            } else {
+                                step5RunTraces = collectedTraces;
+                                persistTraces();
+                                step5RunMeta = { loading: false, error: '', runCount: collectedTraces.length, sequential: usedSequential };
+                            }
+                            if (window.step5SelectedTrace > step5RunTraces.length) window.step5SelectedTrace = 0;
+                            window.step5SelectedObservation = 0;
+                            renderObservationTable();
+                        }
+                        if (sequential) {
+                            // Sequential mode: fire one request per run so progress reflects real completion
+                            if (progressEl) progressEl.textContent = \`0 of \${count} workflow runs completed\`;
+                            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 };
+                                try {
+                                    const response = await fetch('/api/validate-workflow', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(singlePayload) });
+                                    const data = await response.json();
+                                    if (response.ok && data.ok && Array.isArray(data.traces) && data.traces.length > 0) {
+                                        collectedTraces.push({ ...data.traces[0], runNumber: i + 1 });
+                                    } else {
+                                        // Push an error trace so the run is still visible in Step 5
+                                        collectedTraces.push({ runNumber: i + 1, ok: false, error: data.error || 'Workflow validation failed.', observations: [], workflowTrace: null });
+                                    }
+                                } catch (err) {
+                                    collectedTraces.push({ runNumber: i + 1, ok: false, error: err && err.message ? err.message : String(err), observations: [], workflowTrace: null });
+                                }
+                                if (progressEl) progressEl.textContent = \`\${i + 1} of \${count} workflow runs completed\`;
+                            }
+                            finishValidation(collectedTraces, fatalError, true);
+                        } 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 };
+                            try {
+                                const response = await fetch('/api/validate-workflow', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
+                                const data = await response.json();
+                                if (response.ok && data.ok) {
+                                    finishValidation(Array.isArray(data.traces) ? data.traces : [], null, false);
+                                } else {
+                                    finishValidation([], data.error || 'Workflow validation failed.', false);
+                                }
+                            } catch (err) {
+                                finishValidation([], err && err.message ? err.message : String(err), false);
+                            }
+                        }
+                    } else {
+                        document.getElementById('liveValidationCount').style.borderColor = 'red';
+                    }
+                };
+            };
+            window.openPromptConfirmation = function(onConfirm) {
+                const genObs = currentObservations
+                    .map((o, i) => ({ obs: o, idx: i }))
+                    .filter(({ obs, idx }) => obs.type === 'GENERATION' && checkedObservations.has(idx));
+                if (genObs.length === 0) { onConfirm(); return; }
+                const tableRows = genObs.map(({ obs, idx }) => {
+                    const preview = toDisplayText(obs.input, obs.type).replace(/\\s+/g, ' ').trim().slice(0, 50);
+                    const model = obs.model || '—';
+                    return \`<tr>
+                        <td style="padding:8px 10px;font-size:13px;color:#555;">\${idx + 1}</td>
+                        <td style="padding:8px 10px;font-size:13px;font-family:Monaco,monospace;">\${esc(obs.name || 'AI call')}</td>
+                        <td style="padding:8px 10px;font-size:12px;font-family:Monaco,monospace;color:#444;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">\${esc(preview)}\${preview.length === 50 ? '…' : ''}</td>
+                        <td style="padding:8px 10px;font-size:12px;font-family:Monaco,monospace;color:#555;">\${esc(model)}</td>
+                    </tr>\`;
+                }).join('');
+                const dlg = document.createElement('div');
+                dlg.style = 'position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;z-index:9998;';
+                dlg.innerHTML = \`
+                    <div style="background:white;padding:32px 28px;border-radius:12px;box-shadow:0 2px 24px #0003;min-width:640px;max-width:92vw;">
+                        <h3 style="margin-top:0;margin-bottom:8px;font-size:20px;">Have you updated your AI prompts?</h3>
+                        <p style="margin:0 0 18px;font-size:14px;color:#555;">The following AI generation steps were found in your trace. Make sure you have edited the prompts in Step 4 before validating with live data.</p>
+                        <div style="border:1px solid #e0e0e0;border-radius:6px;overflow:hidden;margin-bottom:24px;">
+                            <table style="width:100%;border-collapse:collapse;">
+                                <thead>
+                                    <tr style="background:#f5f5f5;">
+                                        <th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">#</th>
+                                        <th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">Name</th>
+                                        <th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">Input preview</th>
+                                        <th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">Model</th>
+                                    </tr>
+                                </thead>
+                                <tbody>\${tableRows}</tbody>
+                            </table>
+                        </div>
+                        <div style="display:flex;gap:12px;justify-content:flex-end;">
+                            <button id="cancelPromptConfirm" class="btn btn-secondary">Cancel</button>
+                            <button id="proceedPromptConfirm" class="btn btn-primary">Yes, Proceed</button>
+                        </div>
+                    </div>
+                \`;
+                document.body.appendChild(dlg);
+                dlg.querySelector('#cancelPromptConfirm').onclick = () => dlg.remove();
+                dlg.querySelector('#proceedPromptConfirm').onclick = () => { dlg.remove(); onConfirm(); };
+            };
+            uploadArea.onclick = () => fileInput.click();
+            // Drag and drop handlers
+            uploadArea.ondragover = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                uploadArea.style.borderColor = '#0066cc';
+                uploadArea.style.background = '#f0f7ff';
+            };
+            uploadArea.ondragleave = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                uploadArea.style.borderColor = '#ddd';
+                uploadArea.style.background = '#fafafa';
+            };
+            uploadArea.ondrop = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                uploadArea.style.borderColor = '#ddd';
+                uploadArea.style.background = '#fafafa';
+                const files = e.dataTransfer.files;
+                if (files.length === 0) return;
+                const file = files[0];
+                // Check if it's a JSON file
+                if (!file.name.toLowerCase().endsWith('.json')) {
+                    uploadStatus.className = "upload-status error";
+                    uploadStatus.textContent = "Please drop a JSON file";
+                    return;
+                }
+                handleFileUpload(file);
+            };
+            fileInput.onchange = (e) => {
+                if (!e.target.files[0]) return;
+                const file = e.target.files[0];
+                // Always clear file input so same file can be uploaded again
+                fileInput.value = "";
+                handleFileUpload(file);
+            };
+            function handleFileUpload(file) {
+                // Clear observations before loading new trace
+                resetTraceModal();
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    try {
+                        const data = JSON.parse(e.target.result);
+                        uploadStatus.className = "upload-status";
+                        uploadStatus.textContent = "";
+                        displayTrace(data);
+                    } catch (err) {
+                        uploadArea.classList.remove("hidden");
+                        traceViewer.classList.remove("visible");
+                        uploadStatus.className = "upload-status error";
+                        uploadStatus.textContent = "Invalid JSON";
+                    }
+                };
+                reader.readAsText(file);
+            }
+            function displayTrace(data) {
+                let obs = [];
+                if (Array.isArray(data)) {
+                    obs = data.filter(o =>
+                        (o.type === "GENERATION" || o.type === "TOOL" || o.type === "SPAN") &&
+                        (o.input !== null && o.input !== undefined) &&
+                        (o.output !== null && o.output !== undefined)
+                    );
+                } else {
+                    const trace = data.trace || data;
+                    // Handle multiple formats: data.data, data.observations, trace.observations
+                    const rawObs = data.data || data.observations || trace.observations || [];
+                    obs = rawObs.filter(o =>
+                        (o.type === "GENERATION" || o.type === "TOOL" || o.type === "SPAN") &&
+                        (o.input !== null && o.input !== undefined) &&
+                        (o.output !== null && o.output !== undefined)
+                    );
+                }
+                // Sort by startTime ascending
+                obs = obs.sort((a, b) => {
+                    const timeA = new Date(a.startTime || 0).getTime();
+                    const timeB = new Date(b.startTime || 0).getTime();
+                    return timeA - timeB;
+                });
+                // Aggregate token usage onto the workflow container SPAN if it has none
+                if (selectedWorkflow?.name) {
+                    const containerIdx = obs.findIndex(
+                        o => o.type === 'SPAN' && o.name === selectedWorkflow.name
+                    );
+                    const _existingUsage = extractUsage(obs[containerIdx]);
+                    if (containerIdx >= 0 && (!_existingUsage || !(_existingUsage.totalTokens > 0))) {
+                        let inputTokens = 0, outputTokens = 0, totalTokens = 0;
+                        for (const o of obs) {
+                            if (o.type !== 'GENERATION') continue;
+                            const u = extractUsage(o);
+                            if (!u) continue;
+                            inputTokens  += u.inputTokens  ?? 0;
+                            outputTokens += u.outputTokens ?? 0;
+                            totalTokens  += u.totalTokens  ?? 0;
+                        }
+                        if (totalTokens > 0) {
+                            obs[containerIdx].usage = { inputTokens, outputTokens, totalTokens };
+                        }
+                    }
+                }
+                currentObservations = obs;
+                selectedObservationIndex = -1;
+                checkedObservations.clear();
+                observationDetail.innerHTML = "";
+                uploadArea.classList.add("hidden");
+                traceViewer.classList.add("visible");
+                currentStep = 3;
+                updateModalTitle();
+                updateFooterButtons();
+                renderObservationTable();
+                // Auto-select first observation
+                if (currentObservations.length > 0) {
+                    selectObservation(0);
+                }
+            }
+            function renderObservationTable() {
+                // Capture scroll positions for step 5 columns before rebuilding DOM
+                let _step5Col1Scroll = 0, _step5Col2Scroll = 0;
+                if (currentStep === 5) {
+                    const tls = document.querySelectorAll('.trace-left');
+                    _step5Col1Scroll = tls[0]?.querySelector('.observation-table-wrap')?.scrollTop ?? 0;
+                    _step5Col2Scroll = tls[1]?.querySelector('.observation-table-wrap')?.scrollTop ?? 0;
+                }
+                // For other steps, preserve scroll position of the first .observation-table-wrap
+                let obsTableWrap = document.querySelector('.observation-table-wrap');
+                let prevScrollTop = obsTableWrap ? obsTableWrap.scrollTop : null;
+                if (currentStep === 5) {
+                    // Initialize selections if not set
+                    if (window.step5SelectedTrace === undefined || window.step5SelectedTrace === null) {
+                        window.step5SelectedTrace = 0;
+                    }
+                    if (window.step5SelectedObservation === undefined || window.step5SelectedObservation === null) {
+                        window.step5SelectedObservation = 0;
+                    }
+                    // Step 5: Validate Updated Flow with Live Data
+                    // Render traceTable before observationsTable
+                    const traces = Array.isArray(step5RunTraces) ? step5RunTraces : [];
+                    const traceCount = traces.length + 1;
+                    document.getElementsByClassName("trace-layout")[0].classList.add("step-5");
+                    let traceTable = \`<div class="trace-section-title">Traces</div>
+                        <div class="observation-table-wrap">
+                        <table class="observation-table">
+                            <tbody>\`;
+                    for (let i = 0; i < traceCount; i++) {
+                        const isSelected = i === window.step5SelectedTrace;
+                        const run = i === 0 ? null : traces[i - 1];
+                        const status = run ? (run.ok ? ' ✓' : ' ✗') : '';
+                        const label = i === 0 ? "Original Trace" : \`\${run?.traceName ?? \`Trace-\${run?.runNumber ?? i}\`}\${status}\`;
+                        traceTable += \`<tr class="\${isSelected ? "selected" : ""}" onclick="window.step5SelectedTrace=\${i};window.step5SelectedObservation=0;renderObservationTable();"><td>\${label}</td></tr>\`;
+                    }
+                    traceTable += \`</tbody></table></div>\`;
+                    // Observations table for selected trace
+                    let observationsTable = "";
+                    let detailsSection = "";
+                    if (window.step5SelectedTrace > traces.length) {
+                        window.step5SelectedTrace = 0;
+                    }
+                    if (window.step5SelectedTrace === 0) {
+                        // Original Trace: show all currentObservations (same as step 3)
+                        const _rerunDisabled = step5RunMeta.loading || step5RerunInFlight;
+                        observationsTable += \`<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
+                            <div class="trace-section-title" style="margin-bottom:0">Observations</div>
+                            <button class="btn btn-primary" style="padding:4px 10px;font-size:12px;" onclick="rerunFullFlow(this)" \${_rerunDisabled ? 'disabled' : ''}>&#9654; Rerun</button>
+                        </div>
+                        <div class="observation-table-wrap">
+                            <table class="observation-table">
+                            <thead><tr><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
+                            <tbody>\`;
+                        observationsTable += currentObservations.map((obs, j) => {
+                            const isSelected = j === window.step5SelectedObservation;
+                            const name = obs.name || obs.id || ("Observation " + (j + 1));
+                            const type = obs.type || "UNKNOWN";
+                            const typeClass = type === "TOOL" ? "tool" : "ai";
+                            const agentBadge = obs.agentTaskIndex != null ? \`<span class="agent-task-badge">T\${obs.agentTaskIndex + 1}</span>\` : '';
+                            const rowClass = obs.agentTaskIndex != null ? 'agent-task-row' : '';
+                            return \`<tr class="\${isSelected ? "selected" : ""} \${rowClass}" onclick="window.step5SelectedObservation=\${j};renderObservationTable();"><td>\${esc(name)}\${agentBadge}</td><td><span class="obs-type \${typeClass}">\${esc(type)}</span></td><td style="color:#888;font-size:12px;">\${formatDuration(computeDurationMs(obs))}</td></tr>\`;
+                        }).join("");
+                        observationsTable += \`</tbody></table></div>\`;
+                        // Details for selected observation
+                        const selObs = currentObservations[window.step5SelectedObservation];
+                        if (selObs) {
+                        const inputText = toDisplayText(selObs.input, selObs.type);
+                        const outputText = toDisplayText(selObs.output, selObs.type);
+                        const detailId = 'step5-orig-' + window.step5SelectedObservation;
+                        const filePathHtml = selObs.type === "GENERATION"
+                            ? '<div class="file-path-placeholder"></div>'
+                            : renderFilePath(getObsFilePath(selObs));
+                        const _dur5orig = computeDurationMs(selObs);
+                        detailsSection = \`<div class="detail-sections" id="\${detailId}">
+                            \${filePathHtml}
+                            \${renderModel(selObs)}
+                            \${_dur5orig != null ? \`<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">\${formatDuration(_dur5orig)}</pre></div>\` : ''}
+                            \${renderUsage(selObs)}
+                            <div class="detail-section">
+                            <div class="detail-title">Input</div>
+                            <pre class="detail-pre">\${esc(inputText)}</pre>
+                            </div>
+                            <div class="detail-section">
+                            <div class="detail-title">Output</div>
+                            <pre class="detail-pre">\${esc(outputText)}</pre>
+                            </div>
+                        </div>\`;
+                        if (selObs.type === "GENERATION") setTimeout(() => resolveGenFilePath(selObs, detailId), 0);
+                        }
+                    } else {
+                        // Live traces: index 1 → traces[0], index 2 → traces[1], …
+                        const liveTrace = traces[window.step5SelectedTrace - 1];
+                        if (liveTrace) {
+                            const actions = Array.isArray(liveTrace.observations) ? liveTrace.observations : [];
+                            const traceIdx = window.step5SelectedTrace - 1;
+                            const _rerunDisabled2 = step5RunMeta.loading || step5RerunInFlight;
+                            observationsTable += \`<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
+                                <div class="trace-section-title" style="margin-bottom:0">Observations</div>
+                                <button class="btn btn-primary" style="padding:4px 10px;font-size:12px;" onclick="rerunFullFlow(this)" \${_rerunDisabled2 ? 'disabled' : ''}>&#9654; Rerun</button>
+                            </div>
+                                <div class="observation-table-wrap">
+                                <table class="observation-table">
+                                    <thead><tr><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
+                                    <tbody>\`;
+                            observationsTable += actions.map((action, j) => {
+                                const isSelected = j === window.step5SelectedObservation;
+                                const name = action.name || action.id || ("Observation " + (j + 1));
+                                const type = action.type || "UNKNOWN";
+                                const typeClass = type === "TOOL" ? "tool" : "ai";
+                                const agentBadge = action.agentTaskIndex != null ? \`<span class="agent-task-badge">T\${action.agentTaskIndex + 1}</span>\` : '';
+                                const frozenBadge = action.isFrozen ? '<span class="frozen-tag">Frozen</span>' : '';
+                                const rowClasses = [
+                                    isSelected ? 'selected' : '',
+                                    action.agentTaskIndex != null ? 'agent-task-row' : '',
+                                    action.isFrozen ? 'frozen-row' : '',
+                                ].filter(Boolean).join(' ');
+                                return \`<tr class="\${rowClasses}" onclick="window.step5SelectedObservation=\${j};renderObservationTable();"><td>\${esc(name)}\${agentBadge}\${frozenBadge}</td><td><span class="obs-type \${typeClass}">\${esc(type)}</span></td><td style="color:#888;font-size:12px;">\${formatDuration(computeDurationMs(action))}</td></tr>\`;
+                            }).join("");
+                            observationsTable += \`</tbody></table></div>\`;
+                            // Details for selected observation
+                            if (actions[window.step5SelectedObservation]) {
+                                const obs = actions[window.step5SelectedObservation];
+                                const inputText = toDisplayText(obs.input, obs.type);
+                                const outputText = toDisplayText(obs.output, obs.type);
+                                const detailId = 'step5-live-' + (window.step5SelectedTrace - 1) + '-' + window.step5SelectedObservation;
+                                const filePathHtml = obs.type === "GENERATION"
+                                ? '<div class="file-path-placeholder"></div>'
+                                : renderFilePath(getObsFilePath(obs));
+                                // For the first observation (workflow output), show Original Output for comparison
+                                let originalOutputSection = '';
+                                if (window.step5SelectedObservation === 0 && currentObservations[0]) {
+                                    const originalOutputText = toDisplayText(currentObservations[0].output, currentObservations[0].type);
+                                    originalOutputSection = \`<div class="detail-section">
+                                        <div class="detail-title">Original Output</div>
+                                        <pre class="detail-pre">\${esc(originalOutputText)}</pre>
+                                    </div>\`;
+                                }
+                                // Agent steps: always show "Resume from Task X" button
+                                // Non-agent steps: show "Run from here" only if they have workflowEventId (HTTP/DB events)
+                                // Steps without agentTaskIndex and without workflowEventId get no button
+                                let runFromBpHtml = '';
+                                if (obs.agentTaskIndex != null) {
+                                    runFromBpHtml = \`<div class="detail-section" style="padding:8px 12px;"><button class="resume-agent-btn" onclick="resumeAgentFromTask(\${traceIdx},\${window.step5SelectedObservation},\${obs.agentTaskIndex},event)">&#9654; Resume from Task \${obs.agentTaskIndex + 1}</button></div>\`;
+                                } else if (obs.workflowEventId != null) {
+                                    runFromBpHtml = \`<div class="detail-section" style="padding:8px 12px;"><button class="run-from-bp-btn" onclick="runFromBreakpoint(\${traceIdx},\${window.step5SelectedObservation},event)">&#9654; Run from here</button></div>\`;
+                                }
+                                const _dur5live = computeDurationMs(obs);
+                                detailsSection = \`<div class="detail-sections" id="\${detailId}">
+                                \${filePathHtml}
+                                \${runFromBpHtml}
+                                \${renderModel(obs)}
+                                \${_dur5live != null ? \`<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">\${formatDuration(_dur5live)}</pre></div>\` : ''}
+                                \${renderUsage(obs)}
+                                <div class="detail-section">
+                                    <div class="detail-title">Input</div>
+                                    <pre class="detail-pre">\${esc(inputText)}</pre>
+                                </div>
+                                \${originalOutputSection}
+                                <div class="detail-section">
+                                    <div class="detail-title">Output</div>
+                                    <pre class="detail-pre">\${esc(outputText)}</pre>
+                                </div>
+                                </div>\`;
+                                if (obs.type === "GENERATION") setTimeout(() => resolveGenFilePath(obs, detailId), 0);
+                            }
+                        }
+                    }
+                    if (step5RunMeta.loading) {
+                        detailsSection = \`<div class="detail-sections">
+                            <div class="detail-section">
+                                <div class="detail-title">Validation</div>
+                                <pre class="detail-pre">Running \${step5RunMeta.runCount || 1} workflow run(s) in \${step5RunMeta.sequential ? 'sequence' : 'parallel'} mode...</pre>
+                            </div>
+                        </div>\`;
+                    } else if (step5RunMeta.error && !detailsSection) {
+                        detailsSection = \`<div class="detail-sections">
+                            <div class="detail-section">
+                                <div class="detail-title">Validation Error</div>
+                                <pre class="detail-pre">\${esc(step5RunMeta.error)}</pre>
+                            </div>
+                        </div>\`;
+                    }
+                    // Render 3 sibling columns inside the CSS grid
+                    const traceLayout = document.getElementsByClassName("trace-layout")[0];
+                    traceLayout.innerHTML = \`
+                        <div class="trace-left">\${traceTable}</div>
+                        <div class="trace-left">\${observationsTable || '<div class="trace-section-title">Observations</div>'}</div>
+                        <div class="trace-right">\${detailsSection}</div>
+                    \`;
+                    // Restore scroll positions after DOM rebuild
+                    const _newTls = traceLayout.querySelectorAll('.trace-left');
+                    const _w1 = _newTls[0]?.querySelector('.observation-table-wrap');
+                    const _w2 = _newTls[1]?.querySelector('.observation-table-wrap');
+                    if (_w1) _w1.scrollTop = _step5Col1Scroll;
+                    if (_w2) _w2.scrollTop = _step5Col2Scroll;
+                    return;
+                }
+                if (currentStep === 4) {
+                    const traceLayout = document.getElementsByClassName("trace-layout")[0];
+                    traceLayout.classList.remove("step-5");
+                    traceLayout.classList.add("step-4");
+                    const obsIndices = Array.from(checkedObservations);
+                    // Column 1: Steps (observation list)
+                    let col1 = \`<div class="trace-section-title">Steps</div>
+                        <div class="observation-table-wrap">
+                        <table class="observation-table">
+                        <thead><tr><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
+                        <tbody>\`;
+                    col1 += obsIndices.map(idx => {
+                        const obs = currentObservations[idx];
+                        const isSelected = idx === selectedObservationIndex;
+                        const name = obs.name || obs.id || ('Observation ' + (idx + 1));
+                        const type = obs.type || 'UNKNOWN';
+                        const typeClass = type === 'TOOL' ? 'tool' : 'ai';
+                        const history = rerunHistory.get(idx) || [];
+                        const latest = history[history.length - 1];
+                        const badge = latest
+                            ? (latest.running ? ' <span class="rerun-status running">⟳</span>'
+                                : latest.ok ? ' <span class="rerun-status success">✓</span>'
+                                : ' <span class="rerun-status error">✗</span>')
+                            : '';
+                        return \`<tr class="\${isSelected ? 'selected' : ''}" onclick="window.step4SelectObservation(\${idx})"><td>\${esc(name)}\${badge}</td><td><span class="obs-type \${typeClass}">\${esc(type)}</span></td><td style="color:#888;font-size:12px;">\${formatDuration(computeDurationMs(obs))}</td></tr>\`;
+                    }).join('');
+                    col1 += \`</tbody></table></div>\`;
+                    // Column 2: Runs for the selected observation
+                    const inFlight = selectedObservationIndex >= 0 && rerunInFlight.has(selectedObservationIndex);
+                    let col2 = \`<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
+                        <div class="trace-section-title" style="margin-bottom:0">Runs</div>
+                        \${selectedObservationIndex >= 0 ? \`<button class="btn btn-primary" style="padding:4px 12px;font-size:12px;" onclick="rerunObservation(\${selectedObservationIndex})" \${inFlight ? 'disabled' : ''}>\${inFlight ? 'Running...' : 'Rerun'}</button>\` : ''}
+                    </div>\`;
+                    if (selectedObservationIndex >= 0) {
+                        const history = rerunHistory.get(selectedObservationIndex) || [];
+                        if (history.length === 0) {
+                            col2 += \`<div style="color:#999;font-size:13px;padding:8px;">No runs yet. Click Rerun to start.</div>\`;
+                        } else {
+                            col2 += \`<div class="observation-table-wrap"><table class="observation-table"><thead><tr><th>Run</th><th>Status</th></tr></thead><tbody>\`;
+                            col2 += history.map((run, ri) => {
+                                const isSelRun = ri === step4SelectedRun;
+                                const status = run.running ? '⟳ Running' : (run.ok ? '✓ Complete' : '✗ Failed');
+                                return \`<tr class="\${isSelRun ? 'selected' : ''}" onclick="window.step4SelectRun(\${ri})"><td>Run \${run.runNumber}</td><td>\${status}</td></tr>\`;
+                            }).join('');
+                            col2 += \`</tbody></table></div>\`;
+                        }
+                    } else {
+                        col2 += \`<div style="color:#999;font-size:13px;padding:8px;">Select a step to view runs.</div>\`;
+                    }
+                    // Column 3: Details for the selected run
+                    let col3 = '';
+                    if (selectedObservationIndex >= 0) {
+                        const obs = currentObservations[selectedObservationIndex];
+                        const history = rerunHistory.get(selectedObservationIndex) || [];
+                        const run = step4SelectedRun >= 0 ? history[step4SelectedRun] : null;
+                        const inputText = toDisplayText(obs.input, obs.type);
+                        const outputText = toDisplayText(obs.output, obs.type);
+                        const detailId = 'step4-detail-' + selectedObservationIndex + '-' + step4SelectedRun;
+                        const filePathHtml = obs.type === "GENERATION"
+                            ? '<div class="file-path-placeholder"></div>'
+                            : renderFilePath(getObsFilePath(obs));
+                        let currentOutputSection = '';
+                        if (run) {
+                            if (run.running) {
+                                currentOutputSection = \`<div class="detail-section"><div class="detail-title">Current Output</div><pre class="detail-pre">Running...</pre></div>\`;
+                            } else if (run.ok) {
+                                currentOutputSection = \`<div class="detail-section"><div class="detail-title">Current Output</div><pre class="detail-pre">\${esc(toDisplayText(run.output, obs.type))}</pre></div>\`;
+                            } else {
+                                currentOutputSection = \`<div class="detail-section"><div class="detail-title">Current Output</div><pre class="detail-pre">Rerun failed: \${esc(run.error || 'Unknown error')}</pre></div>\`;
+                            }
+                        }
+                        // Editable AI input UI
+                        let inputSection = '';
+                        if (obs.type === "GENERATION") {
+                            const hasUpdate = updatedInputs.has(selectedObservationIndex);
+                            inputSection += \`<div class="detail-section">
+                                <div class="detail-title">Input</div>
+                                <pre class="detail-pre" style="position:relative;">\${esc(toDisplayText(obs.input, obs.type))}
+                                    <button class="btn btn-secondary edit-btn" style="position:absolute;top:8px;right:8px;padding:2px 10px;font-size:12px;\${hasUpdate ? 'display:none;' : ''}" onclick="window.enableInputEditing('\${detailId}', \${selectedObservationIndex})">Edit</button>
+                                    <button class="btn btn-secondary reset-btn" style="position:absolute;top:8px;right:8px;padding:2px 10px;font-size:12px;\${hasUpdate ? '' : 'display:none;'}" onclick="window.resetInput('\${detailId}', \${selectedObservationIndex})">Reset</button>
+                                </pre>
+                            </div>\`;
+                            if (hasUpdate) {
+                                inputSection += \`<div class="detail-section updated-input-section">
+                                    <div class="detail-title">Update Input</div>
+                                    <textarea id="editInputTextarea" class="detail-pre" style="width:100%;height:400px;">\${esc(updatedInputs.get(selectedObservationIndex))}</textarea>
+                                    <button class="btn btn-secondary save-btn" style="margin-top:8px;float:right;padding:2px 10px;font-size:12px;" onclick="window.saveUpdatedInput(\${selectedObservationIndex})">Save</button>
+                                </div>\`;
+                            }
+                        } else {
+                            inputSection += \`<div class="detail-section"><div class="detail-title">Input</div><pre class="detail-pre">\${esc(toDisplayText(obs.input, obs.type))}</pre></div>\`;
+                        }
+                        const _dur4 = computeDurationMs(obs);
+                        const currentDurSection = (run && !run.running && run.ok && run.currentDurationMs != null)
+                            ? \`<div class="detail-section"><div class="detail-title">Current Duration</div><pre class="detail-pre">\${formatDuration(run.currentDurationMs)}</pre></div>\`
+                            : '';
+                        const currentUsageSection = (run && !run.running && run.ok && run.currentUsage && run.currentUsage.totalTokens > 0)
+                            ? \`<div class="detail-section"><div class="detail-title">Current Usage</div><pre class="detail-pre">\${[
+                                run.currentUsage.inputTokens  != null ? 'Input tokens:  ' + run.currentUsage.inputTokens  : null,
+                                run.currentUsage.outputTokens != null ? 'Output tokens: ' + run.currentUsage.outputTokens : null,
+                                run.currentUsage.totalTokens  != null ? 'Total tokens:  ' + run.currentUsage.totalTokens  : null,
+                              ].filter(Boolean).join('\\n')}</pre></div>\`
+                            : '';
+                        col3 = \`<div class="detail-sections" id="\${detailId}">
+                            \${filePathHtml}
+                            \${renderModel(obs)}
+                            \${_dur4 != null ? \`<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">\${formatDuration(_dur4)}</pre></div>\` : ''}
+                            \${currentDurSection}
+                            \${renderUsage(obs)}
+                            \${currentUsageSection}
+                            \${inputSection}
+                            <div class="detail-section"><div class="detail-title">Output</div><pre class="detail-pre">\${esc(outputText)}</pre></div>
+                            \${currentOutputSection}
+                        </div>\`;
+                        if (obs.type === "GENERATION") setTimeout(() => resolveGenFilePath(obs, detailId), 0);
+                    }
+                    traceLayout.innerHTML = \`
+                        <div class="trace-left">\${col1}</div>
+                        <div class="trace-left">\${col2}</div>
+                        <div class="trace-right">\${col3}</div>
+                    \`;
+                    // Auto-select first observation if none selected
+                    if (obsIndices.length > 0 && selectedObservationIndex === -1) {
+                        window.step4SelectObservation(obsIndices[0]);
+                    }
+                    return;
+                }
+                const traceLayoutEl = document.getElementsByClassName("trace-layout")[0];
+                if (traceLayoutEl.classList.contains("step-5") || traceLayoutEl.classList.contains("step-4")) {
+                    traceLayoutEl.classList.remove("step-5");
+                    traceLayoutEl.classList.remove("step-4");
+                    let headerHtml = '';
+                    if (currentStep === 3) {
+                        headerHtml = '<tr><th style="width: 40px;">Check</th><th>Name</th><th>Type</th><th>Duration</th></tr>';
+                    }
+                    traceLayoutEl.innerHTML = \`
+                        <div class="trace-left">
+                        <div class="trace-section-title">Observations</div>
+                        <div class="observation-table-wrap">
+                            <table class="observation-table">
+                            <thead id="observationTableHead">\${headerHtml}</thead>
+                            <tbody id="observationTableBody"></tbody>
+                            </table>
+                        </div>
+                        </div>
+                        <div class="trace-right">
+                        <div id="observationDetail"></div>
+                        </div>
+                    \`;
+                    observationTableBody = document.getElementById("observationTableBody");
+                    observationDetail = document.getElementById("observationDetail");
+                }
+                const obsToRender = currentObservations;
+                const indices = currentObservations.map((_, i) => i);
+                if (!obsToRender.length) {
+                    observationTableBody.innerHTML = '<tr><td colspan="3" style="padding: 16px; color: #777;">No observations found.</td></tr>';
+                    return;
+                }
+                observationTableBody.innerHTML = obsToRender.map((obs, displayIndex) => {
+                const actualIndex = indices[displayIndex];
+                const isSelected = actualIndex === selectedObservationIndex;
+                const isChecked = checkedObservations.has(actualIndex);
+                const name = obs.name || obs.id || ("Observation " + (displayIndex + 1));
+                const type = obs.type || "UNKNOWN";
+                const typeClass = type === "TOOL" ? "tool" : "ai";
+                // Step 3: Mark broken - show checkboxes
+                return \`<tr class="\${isSelected ? "selected" : ""}">
+                    <td style="width: 40px;"><input type="checkbox" class="obs-checkbox" value="\${actualIndex}" \${isChecked ? "checked" : ""}></td>
+                    <td onclick="selectObservation(\${actualIndex})">\${esc(name)}</td>
+                    <td><span class="obs-type \${typeClass}">\${esc(type)}</span></td>
+                    <td style="color:#888;font-size:12px;">\${formatDuration(computeDurationMs(obs))}</td>
+                    </tr>\`;
+                }).join("");
+                document.querySelectorAll(".obs-checkbox").forEach(checkbox => {
+                    checkbox.onchange = (e) => {
+                        const idx = parseInt(e.target.value);
+                        if (e.target.checked) {
+                            checkedObservations.add(idx);
+                        } else {
+                            checkedObservations.delete(idx);
+                        }
+                    };
+                });
+                // Restore scroll position if previously saved
+                if (currentStep === 5 && prevStep5ObsScrollTop !== null) {
+                    // After rendering, restore scroll for the observations table in the second .trace-left
+                    const traceLefts = document.querySelectorAll('.trace-left');
+                    if (traceLefts.length > 1) {
+                        const obsWrap = traceLefts[1].querySelector('.observation-table-wrap');
+                        if (obsWrap) obsWrap.scrollTop = prevStep5ObsScrollTop;
+                    }
+                } else {
+                    obsTableWrap = document.querySelector('.observation-table-wrap');
+                    if (obsTableWrap && prevScrollTop !== null) {
+                        obsTableWrap.scrollTop = prevScrollTop;
+                    }
+                }
+            }
+            function selectObservation(index) {
+                // Preserve scroll position of observation-table-wrap
+                let obsTableWrap = document.querySelector('.observation-table-wrap');
+                let prevScrollTop = obsTableWrap ? obsTableWrap.scrollTop : null;
+                selectedObservationIndex = index;
+                renderObservationTable();
+                // Restore scroll position after rendering
+                obsTableWrap = document.querySelector('.observation-table-wrap');
+                if (obsTableWrap && prevScrollTop !== null) {
+                    obsTableWrap.scrollTop = prevScrollTop;
+                }
+                const obs = currentObservations[index];
+                const inputText = toDisplayText(obs.input, obs.type);
+                const outputText = toDisplayText(obs.output, obs.type);
+                const detailId = 'obs-detail-' + index;
+                const filePathHtml = obs.type === "GENERATION"
+                ? '<div class="file-path-placeholder"></div>'
+                : renderFilePath(getObsFilePath(obs));
+                const _dur3 = computeDurationMs(obs);
+                observationDetail.innerHTML = \`<div class="detail-sections" id="\${detailId}">
+                \${filePathHtml}
+                \${renderModel(obs)}
+                \${_dur3 != null ? \`<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">\${formatDuration(_dur3)}</pre></div>\` : ''}
+                \${renderUsage(obs)}
+                <div class="detail-section">
+                    <div class="detail-title">Input</div>
+                    <pre class="detail-pre">\${esc(inputText)}</pre>
+                </div>
+                <div class="detail-section">
+                    <div class="detail-title">Output</div>
+                    <pre class="detail-pre">\${esc(outputText)}</pre>
+                </div>
+                </div>\`;
+                if (obs.type === "GENERATION") resolveGenFilePath(obs, detailId);
+            }
+            async function rerunObservation(index) {
+                const obs = currentObservations[index];
+                let inputToUse = obs.input;
+                if (obs.type === "GENERATION" && updatedInputs.has(index)) {
+                    inputToUse = updatedInputs.get(index);
+                }
+                // Proceed with rerun logic using inputToUse
+                console.log('Rerunning observation with input:', inputToUse);
+                const history = rerunHistory.get(index) || [];
+                const newRun = { runNumber: history.length + 1, running: true, ok: null };
+                history.push(newRun);
+                rerunHistory.set(index, history);
+                rerunInFlight.add(index);
+                if (selectedObservationIndex === index) {
+                    step4SelectedRun = history.length - 1;
+                }
+                renderObservationTable();
+                try {
+                    const payload = { observation: { ...obs, input: inputToUse } };
+                    const response = await fetch('/api/rerun-observation', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload),
+                    });
+                    const data = await response.json();
+                    newRun.running = false;
+                    if (response.ok && data.ok) {
+                        newRun.ok = true;
+                        newRun.output = data.currentOutput;
+                        newRun.currentDurationMs = data.currentDurationMs ?? null;
+                        newRun.currentUsage = data.currentUsage ?? null;
+                    } else {
+                        newRun.ok = false;
+                        newRun.error = data.error || 'Rerun failed.';
+                    }
+                } catch (err) {
+                    newRun.running = false;
+                    newRun.ok = false;
+                    newRun.error = err && err.message ? err.message : String(err);
+                } finally {
+                    rerunInFlight.delete(index);
+                    renderObservationTable();
+                }
+            }
+            async function runFromBreakpoint(traceIdx, obsIdx, evt) {
+                const btn = evt.target;
+                const liveTrace = step5RunTraces[traceIdx];
+                if (!liveTrace) return;
+                const obs = liveTrace.observations[obsIdx];
+                if (!obs || obs.workflowEventId == null) return;
+                btn.disabled = true;
+                btn.textContent = 'Running…';
+                try {
+                    const payload = {
+                        workflowName: selectedWorkflow ? selectedWorkflow.name : '',
+                        checkpoint: obs.workflowEventId,
+                        snapshotId: liveTrace.snapshotId,
+                        observations: currentObservations,
+                        toolMockConfig: window._toolMockConfig || {},
+                        promptMockConfig: window._promptMockConfig || {},
+                    };
+                    const response = await fetch('/api/run-from-breakpoint', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload),
+                    });
+                    const data = await response.json();
+                    if (response.ok) {
+                        // Sub-trace naming: "Trace-N-M" where N = parent name, M = resume count from parent
+                        const parentTraceName = liveTrace.traceName ?? \`Trace-\${traceIdx + 1}\`;
+                        const siblingCount = step5RunTraces.filter(t => t.parentTraceName === parentTraceName).length;
+                        const traceName = \`\${parentTraceName}-\${siblingCount + 1}\`;
+                        const newTrace = { ...data, runNumber: step5RunTraces.length + 1, traceName, parentTraceName };
+                        step5RunTraces.push(newTrace);
+                        persistTraces();
+                        renderObservationTable();
+                    } else {
+                        btn.textContent = '✗ ' + (data.error || 'Failed');
+                        btn.disabled = false;
+                    }
+                } catch (err) {
+                    btn.textContent = '✗ Error';
+                    btn.disabled = false;
+                }
+            }
+            async function rerunFullFlow(btn) {
+                if (step5RerunInFlight || step5RunMeta.loading) return;
+                step5RerunInFlight = true;
+                renderObservationTable();
+                try {
+                    const payload = { workflowName: selectedWorkflow?.name, runCount: 1, sequential: false, observations: currentObservations, toolMockConfig: window._toolMockConfig || {}, promptMockConfig: window._promptMockConfig || {} };
+                    const response = await fetch('/api/validate-workflow', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload),
+                    });
+                    const data = await response.json();
+                    if (response.ok && data.ok && Array.isArray(data.traces) && data.traces.length > 0) {
+                        const newTrace = { ...data.traces[0], runNumber: step5RunTraces.length + 1 };
+                        step5RunTraces.push(newTrace);
+                        persistTraces();
+                        window.step5SelectedTrace = step5RunTraces.length;
+                        window.step5SelectedObservation = 0;
+                    }
+                } catch (err) {
+                    // silently ignore — dashboard may not be connected
+                } finally {
+                    step5RerunInFlight = false;
+                    renderObservationTable();
+                }
+            }
+            async function resumeAgentFromTask(traceIdx, obsIdx, taskIndex, evt) {
+                const btn = evt.target;
+                const liveTrace = step5RunTraces[traceIdx];
+                if (!liveTrace) return;
+                // Extract AgentPlan from the workflow's currentOutput
+                const currentOutput = liveTrace.currentOutput;
+                const agentPlan = currentOutput && typeof currentOutput === 'object' && Array.isArray(currentOutput.tasks)
+                    ? currentOutput
+                    : null;
+                if (!agentPlan) {
+                    alert('No agent plan found in this trace. Ensure the workflow returns an AgentPlan from executorAgent() or resumeAgentFromTrace().');
+                    return;
+                }
+                btn.disabled = true;
+                btn.textContent = 'Resuming…';
+                try {
+                    const payload = {
+                        workflowName: selectedWorkflow ? selectedWorkflow.name : '',
+                        taskIndex: taskIndex,
+                        agentState: {
+                            plan: agentPlan,
+                            trace: [],
+                            resumeFromTaskIndex: taskIndex,
+                        },
+                        snapshotId: liveTrace.snapshotId,
+                        toolMockConfig: window._toolMockConfig || {},
+                        promptMockConfig: window._promptMockConfig || {},
+                    };
+                    const response = await fetch('/api/resume-agent-from-task', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload),
+                    });
+                    const data = await response.json();
+                    if (response.ok) {
+                        // Sub-trace naming: "Trace-N-M" where N = parent name, M = resume count from parent
+                        const parentTraceName = liveTrace.traceName ?? \`Trace-\${traceIdx + 1}\`;
+                        const siblingCount = step5RunTraces.filter(t => t.parentTraceName === parentTraceName).length;
+                        const traceName = \`\${parentTraceName}-\${siblingCount + 1}\`;
+                        const newTrace = { ...data, runNumber: step5RunTraces.length + 1, traceName, parentTraceName };
+                        step5RunTraces.push(newTrace);
+                        persistTraces();
+                        renderObservationTable();
+                    } else {
+                        btn.textContent = '✗ ' + (data.error || 'Failed');
+                        btn.disabled = false;
+                    }
+                } catch (err) {
+                    btn.textContent = '✗ Error';
+                    btn.disabled = false;
+                }
+            }
+            window.enableInputEditing = function(detailId, index) {
+                const obs = currentObservations[index];
+                const current = updatedInputs.has(index)
+                    ? updatedInputs.get(index)
+                    : toDisplayText(obs.input, obs.type);
+                updatedInputs.set(index, current);
+                renderObservationTable();
+            };
+            window.resetInput = function(detailId, index) {
+                updatedInputs.delete(index);
+                renderObservationTable();
+            };
+            window.saveUpdatedInput = function(index) {
+                const ta = document.getElementById('editInputTextarea');
+                if (!ta) return;
+                updatedInputs.set(index, ta.value);
+                renderObservationTable();
+            };
+            function getObsFilePath(obs) {
+                if (obs && obs.type === "TOOL") {
+                const tool = codeIndex.tools.find(t => t.name === obs.name);
+                if (tool) return tool.lineNumber ? tool.filePath + ':' + tool.lineNumber : tool.filePath;
+                }
+                return null;
+            }
+            function extractSystemPrompt(obs) {
+                if (!obs || obs.type !== "GENERATION") return null;
+                let input = obs.input;
+                // Parse input if it's a JSON string
+                if (
+                    typeof input === 'string' &&
+                    (input.startsWith('{') || input.startsWith('[')) &&
+                    (input.endsWith('}') || input.endsWith(']'))
+                ) {
+                    try {
+                        input = JSON.parse(input);
+                    } catch { /* not JSON */ }
+                }
+                const messages = Array.isArray(input) ? input
+                : (input && Array.isArray(input.messages)) ? input.messages : [];
+                const sys = messages.find(m => m && m.role === "system");
+                if (!sys || !sys.content) return null;
+                return String(sys.content).trim();
+            }
+            function getSearchFragments(systemPrompt) {
+                if (!systemPrompt || systemPrompt.length < 10) return [];
+                const fragments = [];
+                // 1. First sentence (often unique: "You are an expert SQL generator...")
+                const firstSentence = systemPrompt.split(/[.!?]\\n/)[0].trim();
+                if (firstSentence.length >= 20 && firstSentence.length <= 100) {
+                    fragments.push(firstSentence);
+                }
+                // 2. First 50 chars
+                if (systemPrompt.length >= 40) {
+                    fragments.push(systemPrompt.slice(0, 50).trim());
+                }
+                // 3. First 80 chars (if different from above)
+                if (systemPrompt.length >= 80) {
+                    const fragment80 = systemPrompt.slice(0, 80).trim();
+                    if (!fragments.some(f => fragment80.startsWith(f))) {
+                        fragments.push(fragment80);
+                    }
+                }
+                // 4. Try to find a unique phrase after common prefixes
+                const afterYouAre = systemPrompt.match(/You are (?:an? )?([^.\\n]{15,60})/);
+                if (afterYouAre && afterYouAre[1]) {
+                    fragments.push(afterYouAre[1].trim());
+                }
+                return fragments.filter(f => f.length >= 15);
+            }
+            async function resolveGenFilePath(obs, containerId) {
+                const systemPrompt = extractSystemPrompt(obs);
+                if (!systemPrompt) return;
+                const fragments = getSearchFragments(systemPrompt);
+                if (fragments.length === 0) return;
+                try {
+                    // Try each fragment until we find a match
+                    for (const fragment of fragments) {
+                        const res = await fetch('/api/search-source?q=' + encodeURIComponent(fragment));
+                        const data = await res.json();
+                        if (data.filePath) {
+                            const label = data.lineNumber ? data.filePath + ':' + data.lineNumber : data.filePath;
+                            const container = document.getElementById(containerId);
+                            if (!container) return;
+                            const placeholder = container.querySelector('.file-path-placeholder');
+                            if (placeholder) placeholder.outerHTML = renderFilePath(label);
+                            return; // Success, stop trying
+                        }
+                    }
+                } catch { /* ignore network errors */ }
+            }
+            function stripAbsolutePath(filePath) {
+                console.log('stripAbsolutePath called with:', filePath, 'repoRoot:', repoRoot);
+                if (!filePath) return filePath;
+                // If we have a repo root, strip it from the absolute path
+                if (repoRoot) {
+                    // Normalize path separators and handle case-insensitive filesystems
+                    let normalizedRoot = repoRoot.replace(/\\\\/g, '/').toLowerCase();
+                    let normalizedPath = filePath.replace(/\\\\/g, '/').toLowerCase();
+                    // Ensure root ends with / for proper matching
+                    if (!normalizedRoot.endsWith('/')) {
+                        normalizedRoot += '/';
+                    }
+                    if (normalizedPath.startsWith(normalizedRoot)) {
+                        // Return the original case of the file path after the root
+                        return filePath.replace(/\\\\/g, '/').substring(repoRoot.length).replace(/^\\//, '');
+                    }
+                    // Also try without trailing slash
+                    normalizedRoot = normalizedRoot.slice(0, -1);
+                    if (normalizedPath.startsWith(normalizedRoot + '/')) {
+                        return filePath.replace(/\\\\/g, '/').substring(repoRoot.length).replace(/^\\//, '');
+                    }
+                }
+                // Fallback if repo root not available or path doesn't match
+                return filePath;
+            }
+            function renderFilePath(filePath) {
+                if (!filePath) return '';
+                const cleanPath = stripAbsolutePath(filePath);
+                return \`<div class="detail-section">
+                <div class="detail-title">File Path</div>
+                <pre class="detail-pre">\${esc(cleanPath)}</pre>
+                </div>\`;
+            }
+            function renderModel(obs) {
+                if (!obs || obs.type !== "GENERATION" || !obs.model) return '';
+                let label = obs.model;
+                if (obs.modelParameters) {
+                const parts = [];
+                if (obs.modelParameters.temperature != null) parts.push('temp=' + obs.modelParameters.temperature);
+                if (obs.modelParameters.max_tokens != null) parts.push('max_tokens=' + obs.modelParameters.max_tokens);
+                if (parts.length) label += '  (' + parts.join(', ') + ')';
+                }
+                return \`<div class="detail-section">
+                <div class="detail-title">Model</div>
+                <pre class="detail-pre">\${esc(label)}</pre>
+                </div>\`;
+            }
+            function stripMarkdownCodeFence(text) {
+                // Remove markdown code fences like \`\`\`sql, \`\`\`json, \`\`\`, etc.
+                return text.replace(/^\`\`\`[\\w]*\\n?/gm, '').replace(/\\n?\`\`\`\$/gm, '').trim();
+            }
+            function toDisplayText(value, type) {
+                if (value === null || value === undefined || value === "") {
+                    return "No data";
+                }
+                // If it's a string, try to parse it first (might be JSON)
+                if (typeof value === "string") {
+                    if (value.startsWith('[') || value.startsWith('{')) {
+                        try {
+                            const parsed = JSON.parse(value);
+                            value = parsed; // Use parsed version for further processing
+                        } catch {
+                            // Not JSON, strip markdown and return
+                            return stripMarkdownCodeFence(value);
+                        }
+                    } else {
+                        return stripMarkdownCodeFence(value);
+                    }
+                }
+                // GENERATION input: raw messages array
+                if (type === "GENERATION" && Array.isArray(value)) {
+                    return JSON.stringify(value, null, 2);
+                }
+                // GENERATION input wrapped in {messages:[...]}  (legacy / Langfuse format)
+                if (type === "GENERATION" && value.messages) {
+                    return JSON.stringify(value.messages, null, 2);
+                }
+                // GENERATION output: assistant message object
+                if (type === "GENERATION" && value.role) {
+                    const parts = [];
+                    // Text content
+                    if (value.content && typeof value.content === 'string') {
+                        parts.push(stripMarkdownCodeFence(value.content));
+                    } else if (Array.isArray(value.content)) {
+                        // Anthropic / Gemini content block array
+                        const text = value.content
+                            .filter(b => b && (b.type === 'text' || b.text))
+                            .map(b => b.text || b.value || '')
+                            .join('');
+                        if (text) parts.push(stripMarkdownCodeFence(text));
+                        // Anthropic tool_use blocks
+                        const toolUses = value.content.filter(b => b && b.type === 'tool_use');
+                        if (toolUses.length) parts.push('Tool calls:\\n' + JSON.stringify(toolUses, null, 2));
+                    } else if (value.parts && Array.isArray(value.parts)) {
+                        // Gemini parts array
+                        const text = value.parts.filter(p => p.text).map(p => p.text).join('');
+                        if (text) parts.push(stripMarkdownCodeFence(text));
+                        const fnCalls = value.parts.filter(p => p.functionCall);
+                        if (fnCalls.length) parts.push('Function calls:\\n' + JSON.stringify(fnCalls, null, 2));
+                    }
+                    // OpenAI tool_calls array
+                    if (Array.isArray(value.tool_calls) && value.tool_calls.length) {
+                        parts.push('Tool calls:\\n' + JSON.stringify(value.tool_calls, null, 2));
+                    }
+                    return parts.length ? parts.join('\\n\\n') : 'No content';
+                }
+                // For other objects, stringify them
+                try {
+                    return JSON.stringify(value, null, 2);
+                } catch {
+                    return String(value);
+                }
+            }
+            function resetTraceModal() {
+                uploadArea.classList.remove("hidden");
+                traceViewer.classList.remove("visible");
+                let customFooter = document.getElementById("step5FooterBtns");
+                if (customFooter) customFooter.remove();
+                uploadStatus.className = "upload-status";
+                uploadStatus.textContent = "";
+                fileInput.value = "";
+                currentObservations = [];
+                selectedObservationIndex = -1;
+                checkedObservations.clear();
+                rerunHistory.clear();
+                rerunInFlight.clear();
+                step4SelectedRun = -1;
+                step5RunTraces = [];
+                localStorage.removeItem('ed_step5RunTraces');
+                step5RunMeta = { loading: false, error: '', runCount: 0, sequential: false };
+                observationTableBody.innerHTML = "";
+                observationDetail.innerHTML = "";
+                currentStep = 0;
+                updateModalTitle();
+            }
+            function updateModalTitle() {
+                const titles = {
+                    0: "Step 2: Import Failed Trace",
+                    3: "Step 3: Mark broken step",
+                    4: "Step 4: Validate your Fixes",
+                    5: "Step 5: Validate Updated Flow with Live Data"
+                };
+                modalTitle.textContent = titles[currentStep] || "Step 2: Import Failed Trace";
+            }
+            function updateFooterButtons() {
+                const changeBtn = document.getElementById("changeTraceBtn");
+                const nextBtn = document.getElementById("nextBtn");
+                if (currentStep <= 2) {
+                    changeBtn.textContent = "Change Workflow Function";
+                    nextBtn.textContent = "Next";
+                    nextBtn.disabled = true;
+                } else if (currentStep === 3) {
+                    changeBtn.textContent = "Change Trace File";
+                    nextBtn.textContent = "Next";
+                    nextBtn.disabled = false;
+                } else if (currentStep === 4) {
+                    changeBtn.textContent = "Select Different Steps";
+                    nextBtn.textContent = "Fix Works as Expected";
+                    nextBtn.disabled = false;
+                } else if (currentStep === 5) {
+                // Step 5 - show custom buttons
+                    changeBtn.textContent = "Still Failing";
+                    nextBtn.textContent = "Done";
+                } else {
+                    let customFooter = document.getElementById("step5FooterBtns");
+                    if (customFooter) customFooter.remove();
+                }
+            }
+            fetch("/api/repo-root").then(r => r.json()).then(d => {
+                console.log("[Dashboard] Repo root fetched:", d);
+                repoRoot = d.repoRoot || '';
+                console.log("[Dashboard] repoRoot set to:", repoRoot);
+                // Now fetch workflows after repo root is loaded
+                return fetch("/api/workflows");
+            }).then(r => r.json()).then(d => {
+                console.log("[Dashboard] Workflows fetched:", d);
+                allWorkflows = d.workflows || [];
+                console.log("[Dashboard] Calling render with", allWorkflows.length, "workflows");
+                render();
+            }).catch(err => {
+                console.error("Failed to fetch repo root or workflows:", err);
+                tbody.innerHTML = '<tr><td colspan="2" style="text-align: center; padding: 40px; color: #c62828;">Error loading workflows</td></tr>';
+            });
+            fetch("/api/code-index").then(r => r.json()).then(d => {
+                codeIndex = d;
+                console.log("Code index:", d);
+            }).catch(err => {
+                console.error("Failed to fetch code index:", err);
+            });
+            function render(search = "") {
+                console.log("[Dashboard] render() called with search:", search, "workflows:", allWorkflows.length);
+                const filtered = search ? allWorkflows.filter(w =>
+                    w.name.toLowerCase().includes(search.toLowerCase()) ||
+                    w.filePath.toLowerCase().includes(search.toLowerCase())
+                ) : allWorkflows;
+                countEl.textContent = filtered.length;
+                console.log("[Dashboard] Rendering", filtered.length, "workflows");
+                tbody.innerHTML = filtered.length ? filtered.map((w, i) => \`<tr onclick="showModal(\${i},'\${search}')">
+                    <td><div class="workflow-name-cell">\${esc(w.name)}\${w.isAsync ? '<span class="async-badge">async</span>' : ""}</div></td>
+                    <td><div class="workflow-path-cell">\${esc(stripAbsolutePath(w.filePath))}</div></td>
+                </tr>\`).join("") : \`<tr><td colspan="2" style="text-align: center; padding: 40px; color: #999;">No workflows found</td></tr>\`;
+                console.log("[Dashboard] tbody updated");
+            }
+            function showModal(index, search) {
+                const filtered = search ? allWorkflows.filter(w =>
+                    w.name.toLowerCase().includes(search.toLowerCase()) ||
+                    w.filePath.toLowerCase().includes(search.toLowerCase())
+                ) : allWorkflows;
+                selectedWorkflow = filtered[index];
+                modal.classList.add("open");
+                resetTraceModal();
+                updateFooterButtons();
+            }
+            window.showModal = showModal;
+            window.selectObservation = selectObservation;
+            window.step4SelectObservation = function(idx) {
+                selectedObservationIndex = idx;
+                const history = rerunHistory.get(idx) || [];
+                step4SelectedRun = history.length > 0 ? history.length - 1 : -1;
+                renderObservationTable();
+            };
+            window.step4SelectRun = function(ri) {
+                step4SelectedRun = ri;
+                renderObservationTable();
+            };
+            function esc(t) { const d = document.createElement("div"); d.textContent = t; return d.innerHTML; }
+            window.esc = esc;
+            document.getElementById("searchInput").oninput = (e) => render(e.target.value);
+        </script>
+    </body>
+</html>`;
     /* DASHBOARD_HTML_END */
 }
 const SEARCH_SKIP_DIRS = new Set(['node_modules', '.git', 'dist', '.next', '.turbo', 'build', 'coverage']);
@@ -1087,11 +3027,11 @@ function resolveTemplateValue(value, input) {
     return value;
 }
 async function runHttpWorkflow(opts) {
-    const { workflowName, workflowInput, frozenEvents = [], pushedEvents, runConfigs, config, dashboardPort } = opts;
+    const { workflowName, workflowInput, frozenEvents = [], promptMocks = {}, pushedEvents, runConfigs, config, dashboardPort } = opts;
     const runId = randomUUID();
-    // Register run config so the user's server can fetch frozen events
+    // Register run config so the user's server can fetch frozen events and prompt mocks
     pushedEvents.set(runId, []);
-    runConfigs.set(runId, { frozenEvents });
+    runConfigs.set(runId, { frozenEvents, promptMocks });
     try {
         const parsedInput = parseObservationInput(workflowInput);
         const inputObj = parsedInput && typeof parsedInput === 'object' && !Array.isArray(parsedInput) ? parsedInput : {};
@@ -1148,6 +3088,7 @@ async function runHttpWorkflow(opts) {
         const drainMs = parseInt(process.env.ELASTICDASH_HTTP_DRAIN_MS ?? '300', 10);
         await new Promise(resolve => setTimeout(resolve, drainMs));
         const events = (pushedEvents.get(runId) ?? []).sort((a, b) => a.timestamp - b.timestamp);
+        console.log(`[elasticdash] runHttpWorkflow drain complete: ${events.length} events collected for runId=${runId}`);
         const workflowTrace = { traceId: runId, events };
         return { ok: true, currentOutput, workflowTrace, steps: [], llmSteps: [], toolCalls: [], customSteps: [] };
     }
@@ -1168,8 +3109,8 @@ export async function startDashboardServer(cwd, options = {}) {
     // In-memory store for telemetry events pushed from HTTP workflow mode runs.
     // Maps runId -> accumulated WorkflowEvent[]
     const pushedEvents = new Map();
-    // Per-run config for HTTP workflow mode (frozen events for replay).
-    // Maps runId -> { frozenEvents }
+    // Per-run config for HTTP workflow mode (frozen events + prompt mocks for replay).
+    // Maps runId -> { frozenEvents, promptMocks }
     const runConfigs = new Map();
     // Scan workflows, tools, and config once at startup
     const workflows = scanWorkflows(cwd);
@@ -1235,10 +3176,14 @@ 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 runOne = async (runNumber) => {
                             const result = await runHttpWorkflow({
                                 workflowName, workflowInput, pushedEvents, runConfigs,
                                 config: httpConfig, dashboardPort: port,
+                                promptMocks,
                             });
                             const traceStub = { getSteps: () => [], getLLMSteps: () => [], getToolCalls: () => [], getCustomSteps: () => [], recordLLMStep: () => { }, recordToolCall: () => { }, recordCustomStep: () => { } };
                             return {
@@ -1305,12 +3250,15 @@ export async function startDashboardServer(cwd, options = {}) {
                     const frozenEventIds = new Set(frozenEvents.map((e) => e.id));
                     const httpConfig = elasticdashConfig.workflows?.[workflowName];
                     if (httpConfig?.mode === 'http') {
-                        // HTTP workflow mode — call user's dev server with frozen events for step replay
+                        // 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
+                            : {};
                         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,
+                            frozenEvents, promptMocks: bpPromptMocks,
                         });
                         const traceStub = { getSteps: () => [], getLLMSteps: () => [], getToolCalls: () => [], getCustomSteps: () => [], recordLLMStep: () => { }, recordToolCall: () => { }, recordCustomStep: () => { } };
                         const snapshotId = result.workflowTrace ? saveSnapshot(cwd, result.workflowTrace) : undefined;
@@ -1338,8 +3286,14 @@ export async function startDashboardServer(cwd, options = {}) {
                     const toolMockConfig = body.toolMockConfig && typeof body.toolMockConfig === 'object' && !Array.isArray(body.toolMockConfig)
                         ? body.toolMockConfig
                         : undefined;
+                    const aiMockConfig = body.aiMockConfig && typeof body.aiMockConfig === 'object' && !Array.isArray(body.aiMockConfig)
+                        ? body.aiMockConfig
+                        : undefined;
+                    const promptMockConfig = body.promptMockConfig && typeof body.promptMockConfig === 'object' && !Array.isArray(body.promptMockConfig)
+                        ? body.promptMockConfig
+                        : 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 } : {}) });
+                    const result = await runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, workflowArgs, workflowInput, { replayMode: true, checkpoint, history, ...(toolMockConfig ? { toolMockConfig } : {}), ...(aiMockConfig ? { aiMockConfig } : {}), ...(promptMockConfig ? { promptMockConfig } : {}) });
                     const traceStub = {
                         getSteps: () => (result.steps ?? []),
                         getLLMSteps: () => (result.llmSteps ?? []),
@@ -1410,8 +3364,14 @@ export async function startDashboardServer(cwd, options = {}) {
                     const toolMockConfig = body.toolMockConfig && typeof body.toolMockConfig === 'object' && !Array.isArray(body.toolMockConfig)
                         ? body.toolMockConfig
                         : undefined;
+                    const aiMockConfig = body.aiMockConfig && typeof body.aiMockConfig === 'object' && !Array.isArray(body.aiMockConfig)
+                        ? body.aiMockConfig
+                        : undefined;
+                    const promptMockConfig = body.promptMockConfig && typeof body.promptMockConfig === 'object' && !Array.isArray(body.promptMockConfig)
+                        ? body.promptMockConfig
+                        : 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 } : {}) });
+                    const result = await runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, [], null, { replayMode: history.length > 0, checkpoint: 0, history, agentState, ...(toolMockConfig ? { toolMockConfig } : {}), ...(aiMockConfig ? { aiMockConfig } : {}), ...(promptMockConfig ? { promptMockConfig } : {}) });
                     const traceStub = {
                         getSteps: () => (result.steps ?? []),
                         getLLMSteps: () => (result.llmSteps ?? []),
@@ -1462,7 +3422,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 ?? [] }));
+            res.end(JSON.stringify({ frozenEvents: cfg?.frozenEvents ?? [], promptMocks: cfg?.promptMocks ?? {} }));
         }
         else if (url.pathname === '/api/trace-events' && req.method === 'POST') {
             // Receive telemetry events pushed from wrapAI / wrapTool in HTTP workflow mode
@@ -1475,9 +3435,16 @@ export async function startDashboardServer(cwd, options = {}) {
                         res.end(JSON.stringify({ ok: false, error: 'runId (string) and event (object) are required.' }));
                         return;
                     }
-                    const existing = pushedEvents.get(body.runId) ?? [];
-                    existing.push(body.event);
-                    pushedEvents.set(body.runId, existing);
+                    const existing = pushedEvents.get(body.runId);
+                    if (!existing) {
+                        console.log(`[elasticdash] /api/trace-events: unknown runId=${body.runId}, known runIds=[${[...pushedEvents.keys()].join(',')}]`);
+                        res.writeHead(404, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ ok: false, error: 'unknown runId' }));
+                        return;
+                    }
+                    const evt = body.event;
+                    existing.push(evt);
+                    console.log(`[elasticdash] /api/trace-events: stored event type=${evt.type} name=${('name' in evt ? evt.name : '?')} runId=${body.runId} total=${existing.length}`);
                     res.writeHead(200, { 'Content-Type': 'application/json' });
                     res.end(JSON.stringify({ ok: true }));
                 }