elasticdash-test 0.1.12 → 0.1.13-alpha-1

package/dist/dashboard-server.js

@@ -3,6 +3,7 @@ import path from 'node:path';
 import { existsSync, readFileSync, readdirSync, statSync, writeFileSync, mkdirSync, rmSync } from 'node:fs';
 import { spawn } from 'node:child_process';
 import { pathToFileURL } from 'url';
+import { randomUUID } from 'node:crypto';
 import { callProviderLLM } from './matchers/index.js';
 import chokidar from 'chokidar';
 import express from 'express';
@@ -24,6 +25,9 @@ function loadSnapshot(cwd, snapshotId) {
         return null;
     }
 }
+function isDenoProject(dir) {
+    return existsSync(path.join(dir, 'deno.json')) || existsSync(path.join(dir, 'deno.jsonc'));
+}
 function resolveRuntimeModule(cwd, baseName) {
     for (const ext of ['.ts', '.tsx', '.js', '.jsx']) {
         const candidate = path.join(cwd, `${baseName}${ext}`);
@@ -164,12 +168,21 @@ function formatError(error) {
 }
 function runToolInSubprocess(toolsModulePath, toolName, args) {
     return new Promise((resolve) => {
+        const startMs = Date.now();
         const workerScript = new URL('./tool-runner-worker.js', import.meta.url).pathname;
-        // Forward NODE_OPTIONS so tsx/esm transpiles TypeScript in the child process
+        const projectDir = path.dirname(toolsModulePath);
+        const denoProject = isDenoProject(projectDir);
+        // For Deno projects use `deno run --allow-all` so that https:// imports and
+        // TypeScript are handled natively. For Node projects keep the existing tsx path.
         const nodeOptions = process.env.NODE_OPTIONS ?? '';
-        const childEnv = { ...process.env, NODE_OPTIONS: nodeOptions };
-        const child = spawn(process.execPath, [workerScript], {
+        const tsxFlag = '--import tsx';
+        const childNodeOptions = nodeOptions.includes('tsx') ? nodeOptions : `${nodeOptions} ${tsxFlag}`.trim();
+        const childEnv = { ...process.env, NODE_OPTIONS: denoProject ? nodeOptions : childNodeOptions };
+        const runtime = denoProject ? 'deno' : process.execPath;
+        const runtimeArgs = denoProject ? ['run', '--allow-all', workerScript] : [workerScript];
+        const child = spawn(runtime, runtimeArgs, {
             env: childEnv,
+            cwd: projectDir,
             stdio: ['pipe', 'pipe', 'pipe'],
         });
         const RESULT_PREFIX = '__ELASTICDASH_RESULT__:';
@@ -191,17 +204,21 @@ function runToolInSubprocess(toolsModulePath, toolName, args) {
             process.stderr.write(chunk);
         });
         child.on('close', () => {
+            const currentDurationMs = Date.now() - startMs;
             if (resultLine) {
                 try {
-                    resolve(JSON.parse(resultLine));
+                    resolve({ ...JSON.parse(resultLine), currentDurationMs });
                     return;
                 }
                 catch { /* fall through */ }
             }
-            resolve({ ok: false, error: stderr.trim() || 'Tool subprocess produced no output.' });
+            resolve({ ok: false, error: stderr.trim() || 'Tool subprocess produced no output.', currentDurationMs });
         });
         child.on('error', (err) => {
-            resolve({ ok: false, error: `Failed to spawn tool subprocess: ${err.message}` });
+            const hint = denoProject && err.code === 'ENOENT'
+                ? ' (Deno project detected — ensure "deno" is installed and available in PATH)'
+                : '';
+            resolve({ ok: false, error: `Failed to spawn tool subprocess: ${err.message}${hint}`, currentDurationMs: Date.now() - startMs });
         });
         // Always use absolute file URL for toolsModulePath
         const payload = JSON.stringify({
@@ -216,17 +233,40 @@ function runToolInSubprocess(toolsModulePath, toolName, args) {
 function runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, args, input, options) {
     return new Promise((resolve) => {
         const workerScript = new URL('./workflow-runner-worker.js', import.meta.url).pathname;
-        // Forward NODE_OPTIONS so tsx/esm transpiles TypeScript in the child process
+        const projectDir = path.dirname(workflowsModulePath);
+        const denoProject = isDenoProject(projectDir);
+        // For Deno projects use `deno run --allow-all` so that https:// imports and
+        // TypeScript are handled natively. For Node projects keep the existing tsx path.
         const nodeOptions = process.env.NODE_OPTIONS ?? '';
-        const childEnv = { ...process.env, NODE_OPTIONS: nodeOptions };
-        const child = spawn(process.execPath, [workerScript], {
+        const tsxFlag = '--import tsx';
+        const childNodeOptions = nodeOptions.includes('tsx') ? nodeOptions : `${nodeOptions} ${tsxFlag}`.trim();
+        const childEnv = { ...process.env, NODE_OPTIONS: denoProject ? nodeOptions : childNodeOptions };
+        const runtime = denoProject ? 'deno' : process.execPath;
+        const runtimeArgs = denoProject ? ['run', '--allow-all', workerScript] : [workerScript];
+        const child = spawn(runtime, runtimeArgs, {
             env: childEnv,
+            cwd: projectDir,
             stdio: ['pipe', 'pipe', 'pipe', 'pipe'],
         });
         let fd3Data = '';
         let stderr = '';
+        // Line-buffer stdout so that large result JSON lines split across multiple
+        // data events are reassembled before processing.
+        const WORKFLOW_RESULT_PREFIX = '__ELASTICDASH_RESULT__:';
+        let stdoutBuf = '';
         child.stdout.on('data', (chunk) => {
-            process.stdout.write(chunk);
+            stdoutBuf += chunk.toString();
+            const lines = stdoutBuf.split('\n');
+            stdoutBuf = lines.pop() ?? ''; // keep last (possibly incomplete) line
+            for (const line of lines) {
+                if (line.startsWith(WORKFLOW_RESULT_PREFIX)) {
+                    // Stdout fallback channel (used by Deno when fd3 is unavailable)
+                    fd3Data += line.slice(WORKFLOW_RESULT_PREFIX.length);
+                }
+                else if (line) {
+                    process.stdout.write(line + '\n');
+                }
+            }
         });
         child.stderr.on('data', (chunk) => {
             stderr += chunk.toString();
@@ -237,6 +277,13 @@ function runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowN
             fd3Data += chunk.toString();
         });
         child.on('close', () => {
+            // Flush any remaining buffered stdout line (e.g. result with no trailing newline)
+            if (stdoutBuf.startsWith(WORKFLOW_RESULT_PREFIX)) {
+                fd3Data += stdoutBuf.slice(WORKFLOW_RESULT_PREFIX.length);
+            }
+            else if (stdoutBuf) {
+                process.stdout.write(stdoutBuf + '\n');
+            }
             if (fd3Data) {
                 try {
                     resolve(JSON.parse(fd3Data));
@@ -247,7 +294,10 @@ function runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowN
             resolve({ ok: false, error: stderr.trim() || 'Workflow subprocess produced no output.' });
         });
         child.on('error', (err) => {
-            resolve({ ok: false, error: `Failed to spawn workflow subprocess: ${err.message}` });
+            const hint = denoProject && err.code === 'ENOENT'
+                ? ' (Deno project detected — ensure "deno" is installed and available in PATH)'
+                : '';
+            resolve({ ok: false, error: `Failed to spawn workflow subprocess: ${err.message}${hint}` });
         });
         // Always use absolute file URL for workflowsModulePath and toolsModulePath
         const payload = JSON.stringify({
@@ -301,8 +351,8 @@ async function runGenerationObservation(observation) {
         const model = observation.model;
         const temperature = typeof observation.modelParameters?.temperature === 'number' ? observation.modelParameters.temperature : 0;
         const maxTokens = typeof observation.modelParameters?.max_tokens === 'number' ? observation.modelParameters.max_tokens : 512;
-        const output = await callProviderLLM(prompt, { provider, model }, systemPrompt ?? 'You are a helpful assistant.', maxTokens, temperature);
-        return { ok: true, currentOutput: output };
+        const result = await callProviderLLM(prompt, { provider, model }, systemPrompt ?? 'You are a helpful assistant.', maxTokens, temperature);
+        return { ok: true, currentOutput: result.content, currentDurationMs: result.durationMs, currentUsage: result.usage };
     }
     catch (error) {
         return { ok: false, error: `Generation rerun failed: ${formatError(error)}` };
@@ -418,64 +468,21 @@ function toObservationFromWorkflowEvent(event) {
         const inp = event.input;
         const out = event.output;
         const provider = inp?.provider ?? '';
-        let completion = '';
-        if (out) {
-            if (out.streamed === true && typeof out.completion === 'string') {
-                completion = out.completion;
-            }
-            else if (provider === 'gemini') {
-                const candidates = out.candidates;
-                if (Array.isArray(candidates) && candidates.length > 0) {
-                    const first = candidates[0];
-                    if (first.content && typeof first.content === 'object') {
-                        const parts = first.content.parts;
-                        if (Array.isArray(parts) && parts.length > 0) {
-                            completion = String(parts[0].text ?? '');
-                        }
-                    }
-                }
-            }
-            else {
-                const choices = out.choices;
-                if (Array.isArray(choices) && choices.length > 0) {
-                    const first = choices[0];
-                    if (first.message && typeof first.message === 'object') {
-                        completion = String(first.message.content ?? '');
-                    }
-                    else if (typeof first.text === 'string') {
-                        completion = first.text;
-                    }
-                }
-                // Embedding response: data[].embedding
-                if (!completion) {
-                    const data = out.data;
-                    if (Array.isArray(data) && data.length > 0) {
-                        const first = data[0];
-                        if (Array.isArray(first?.embedding)) {
-                            completion = `[${data.length} embedding(s), ${first.embedding.length} dimensions]`;
-                        }
-                    }
-                }
-                // Gemini embedding response: embeddings[].values
-                if (!completion) {
-                    const embeddings = out.embeddings;
-                    if (Array.isArray(embeddings) && embeddings.length > 0) {
-                        const first = embeddings[0];
-                        if (Array.isArray(first?.values)) {
-                            completion = `[${embeddings.length} embedding(s), ${first.values.length} dimensions]`;
-                        }
-                    }
-                }
-            }
+        // For streaming events, out is { streamed: true, completion } — extract text for fallback
+        let streamedCompletion;
+        if (out?.streamed === true && typeof out.completion === 'string') {
+            streamedCompletion = out.completion;
         }
         return {
             type: 'GENERATION',
             name: provider || 'llm',
             provider: provider || undefined,
             model: inp?.model ?? event.name,
-            input: inp?.prompt,
-            output: completion,
+            input: inp?.messages ?? inp?.prompt,
+            output: streamedCompletion !== undefined ? streamedCompletion : out,
             startTime: normalizeStartTime(event.timestamp),
+            durationMs: event.durationMs,
+            usage: event.usage,
             workflowEventId: event.id,
             ...agentFields,
         };
@@ -487,6 +494,7 @@ function toObservationFromWorkflowEvent(event) {
             input: event.input,
             output: event.output,
             startTime: normalizeStartTime(event.timestamp),
+            durationMs: event.durationMs,
             workflowEventId: event.id,
             ...agentFields,
         };
@@ -499,6 +507,7 @@ function toObservationFromWorkflowEvent(event) {
             input: event.input,
             output: event.output,
             startTime: normalizeStartTime(event.timestamp),
+            durationMs: event.durationMs,
             workflowEventId: event.id,
             ...agentFields,
         };
@@ -510,6 +519,7 @@ function toObservationFromWorkflowEvent(event) {
             input: event.input,
             output: event.output,
             startTime: normalizeStartTime(event.timestamp),
+            durationMs: event.durationMs,
             workflowEventId: event.id,
             ...agentFields,
         };
@@ -520,6 +530,7 @@ function toObservationFromWorkflowEvent(event) {
         input: event.input,
         output: event.output,
         startTime: normalizeStartTime(event.timestamp),
+        durationMs: event.durationMs,
         workflowEventId: event.id,
         ...agentFields,
     };
@@ -571,6 +582,22 @@ function buildValidationObservations(workflowName, workflowInput, workflowOutput
             }
         }
     }
+    // Compute total duration and aggregate token usage for the container observation
+    if (workflowTrace && workflowTrace.events.length > 0) {
+        const endTime = workflowTrace.events.reduce((max, e) => Math.max(max, e.timestamp + e.durationMs), workflowStartTime);
+        observations[0].durationMs = endTime - workflowStartTime;
+        let inputTokens = 0, outputTokens = 0, totalTokens = 0;
+        for (const e of workflowTrace.events) {
+            if (e.type === 'ai' && e.usage) {
+                inputTokens += e.usage.inputTokens ?? 0;
+                outputTokens += e.usage.outputTokens ?? 0;
+                totalTokens += e.usage.totalTokens ?? 0;
+            }
+        }
+        if (totalTokens > 0) {
+            observations[0].usage = { inputTokens, outputTokens, totalTokens };
+        }
+    }
     // Sort all observations except the workflow entry (index 0) by startTime
     const [workflowEntry, ...rest] = observations;
     rest.sort((a, b) => (a.startTime ?? 0) - (b.startTime ?? 0));
@@ -925,1626 +952,7 @@ function openBrowser(url) {
  */
 function getDashboardHtml() {
     /* DASHBOARD_HTML_START */
-    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></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 };
-
-            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: {} } }
-
-            function getToolsFromTrace() {
-                // Extract unique tool names and their call details from the uploaded trace observations
-                const toolCalls = {};
-                currentObservations.forEach(function(obs, i) {
-                    if (obs.type !== 'TOOL') return;
-                    const name = 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;
-            }
-
-            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 config each time dialog opens
-
-                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"></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 the tool mock section after DOM insertion
-                const toolMockContainer = document.getElementById('toolMockContainer');
-                if (toolMockContainer) {
-                    toolMockContainer.innerHTML = renderToolMockSection(false);
-                }
-                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 the tool mock config from UI state
-                        const toolMockConfig = buildToolMockConfigFromUI();
-                        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 };
-                                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 };
-                            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;
-                });
-                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)
-                        observationsTable += \`<div class="trace-section-title">Observations</div>
-                        <div class="observation-table-wrap">
-                            <table class="observation-table">
-                            <thead><tr><th>Name</th><th>Type</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></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));
-                        detailsSection = \`<div class="detail-sections" id="\${detailId}">
-                            \${filePathHtml}
-                            \${renderModel(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;
-                            observationsTable += \`<div class="trace-section-title">Observations</div>
-                                <div class="observation-table-wrap">
-                                <table class="observation-table">
-                                    <thead><tr><th>Name</th><th>Type</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></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>\`;
-                                }
-                                detailsSection = \`<div class="detail-sections" id="\${detailId}">
-                                \${filePathHtml}
-                                \${runFromBpHtml}
-                                \${renderModel(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></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></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>\`;
-                        }
-                        col3 = \`<div class="detail-sections" id="\${detailId}">
-                            \${filePathHtml}
-                            \${renderModel(obs)}
-                            \${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></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>
-                    </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));
-
-                observationDetail.innerHTML = \`<div class="detail-sections" id="\${detailId}">
-                \${filePathHtml}
-                \${renderModel(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;
-                    } 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,
-                    };
-                    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 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,
-                    };
-                    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);
-                    }
-                }
-                
-                // Handle GENERATION output format: {role, content, ...}
-                if (type === "GENERATION" && value.role && value.content) {
-                    return stripMarkdownCodeFence(value.content || "No content");
-                }
-                
-                // Handle GENERATION input format: {messages: [...]}
-                if (type === "GENERATION" && value.messages) {
-                    return JSON.stringify(value.messages, null, 2);
-                }
-                
-                // 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>`;
+    return readFileSync(path.join(__dirname, 'html', 'dashboard.html'), 'utf8');
     /* DASHBOARD_HTML_END */
 }
 const SEARCH_SKIP_DIRS = new Set(['node_modules', '.git', 'dist', '.next', '.turbo', 'build', 'coverage']);
@@ -2619,16 +1027,144 @@ function searchInFiles(dir, query) {
     }
     return null;
 }
+/** Load elasticdash.config.ts via a tsx-enabled subprocess and return the parsed object. */
+async function loadElasticDashConfig(cwd) {
+    const configPath = resolveRuntimeModule(cwd, 'elasticdash.config');
+    if (!configPath)
+        return {};
+    return new Promise((resolve) => {
+        const nodeOptions = process.env.NODE_OPTIONS ?? '';
+        const tsxFlag = '--import tsx';
+        const childNodeOptions = nodeOptions.includes('tsx') ? nodeOptions : `${nodeOptions} ${tsxFlag}`.trim();
+        const childEnv = { ...process.env, NODE_OPTIONS: isDenoProject(cwd) ? nodeOptions : childNodeOptions };
+        const configUrl = pathToFileURL(configPath).href;
+        const child = spawn(process.execPath, ['--input-type=module'], {
+            env: childEnv,
+            cwd,
+            stdio: ['pipe', 'pipe', 'ignore'],
+        });
+        let output = '';
+        child.stdout.on('data', (chunk) => { output += chunk.toString(); });
+        child.on('close', () => {
+            try {
+                resolve(JSON.parse(output));
+            }
+            catch {
+                resolve({});
+            }
+        });
+        child.on('error', () => resolve({}));
+        child.stdin.write(`import m from '${configUrl}'; process.stdout.write(JSON.stringify(m.default ?? m))`);
+        child.stdin.end();
+    });
+}
+/** Resolve {{env.VAR}} and {{input.field}} placeholders in a value. */
+function resolveTemplateValue(value, input) {
+    if (typeof value === 'string') {
+        return value.replace(/\{\{env\.([^}]+)\}\}/g, (_, k) => process.env[k] ?? '')
+            .replace(/\{\{input\.([^}]+)\}\}/g, (_, k) => String(input[k] ?? ''))
+            .replace(/\{\{timestamp\}\}/g, () => String(Date.now()));
+    }
+    if (Array.isArray(value))
+        return value.map(v => resolveTemplateValue(v, input));
+    if (value && typeof value === 'object') {
+        const out = {};
+        for (const [k, v] of Object.entries(value)) {
+            out[k] = resolveTemplateValue(v, input);
+        }
+        return out;
+    }
+    return value;
+}
+async function runHttpWorkflow(opts) {
+    const { workflowName, workflowInput, frozenEvents = [], pushedEvents, runConfigs, config, dashboardPort } = opts;
+    const runId = randomUUID();
+    // Register run config so the user's server can fetch frozen events
+    pushedEvents.set(runId, []);
+    runConfigs.set(runId, { frozenEvents });
+    try {
+        const inputObj = workflowInput && typeof workflowInput === 'object' ? workflowInput : {};
+        const method = config.method ?? 'POST';
+        const resolvedHeaders = {};
+        for (const [k, v] of Object.entries(config.headers ?? {})) {
+            resolvedHeaders[k] = resolveTemplateValue(v, inputObj);
+        }
+        resolvedHeaders['x-elasticdash-run-id'] = runId;
+        resolvedHeaders['x-elasticdash-server'] = `http://localhost:${dashboardPort}`;
+        const body = config.bodyTemplate
+            ? JSON.stringify(resolveTemplateValue(config.bodyTemplate, inputObj))
+            : undefined;
+        if (body && !resolvedHeaders['Content-Type']) {
+            resolvedHeaders['Content-Type'] = 'application/json';
+        }
+        console.log(`[elasticdash] HTTP workflow "${workflowName}" → ${method} ${config.url} (runId=${runId})`);
+        const response = await fetch(config.url, { method, headers: resolvedHeaders, body });
+        let currentOutput;
+        if (config.responseFormat === 'vercel-ai-stream' && response.body) {
+            const decoder = new TextDecoder();
+            const reader = response.body.getReader();
+            let text = '';
+            for (;;) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                text += decoder.decode(value, { stream: true });
+            }
+            // Extract final text from Vercel AI stream data lines
+            let finalText = '';
+            for (const line of text.split('\n')) {
+                if (!line.startsWith('0:'))
+                    continue;
+                try {
+                    finalText += JSON.parse(line.slice(2));
+                }
+                catch { /* skip */ }
+            }
+            currentOutput = finalText || text;
+        }
+        else {
+            try {
+                currentOutput = await response.clone().json();
+            }
+            catch {
+                currentOutput = await response.text();
+            }
+        }
+        if (!response.ok) {
+            return { ok: false, error: `HTTP ${response.status}: ${response.statusText}`, currentOutput };
+        }
+        // Drain window: wait for in-flight push POSTs to arrive
+        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);
+        const workflowTrace = { traceId: runId, events };
+        return { ok: true, currentOutput, workflowTrace, steps: [], llmSteps: [], toolCalls: [], customSteps: [] };
+    }
+    catch (error) {
+        return { ok: false, error: `HTTP workflow failed: ${formatError(error)}` };
+    }
+    finally {
+        pushedEvents.delete(runId);
+        runConfigs.delete(runId);
+    }
+}
 /**
  * Start the dashboard server
  */
 export async function startDashboardServer(cwd, options = {}) {
     const port = options.port ?? 4573;
     const autoOpen = options.autoOpen ?? true;
-    // Scan workflows and tools once at startup
+    // 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 }
+    const runConfigs = new Map();
+    // Scan workflows, tools, and config once at startup
     const workflows = scanWorkflows(cwd);
     const tools = scanTools(cwd);
     const codeIndex = { workflows, tools };
+    const elasticdashConfig = await loadElasticDashConfig(cwd);
     console.log(`[elasticdash] Scanned: ${workflows.length} workflows, ${tools.length} tools`);
     // Create HTTP server
     const server = http.createServer((req, res) => {
@@ -2679,6 +1215,41 @@ export async function startDashboardServer(cwd, options = {}) {
             (async () => {
                 try {
                     const body = (await readJsonBody(req));
+                    const workflowName = typeof body.workflowName === 'string' ? body.workflowName.trim() : '';
+                    const httpConfig = elasticdashConfig.workflows?.[workflowName];
+                    if (httpConfig?.mode === 'http') {
+                        // HTTP workflow mode — call user's dev server instead of subprocess
+                        const runCount = typeof body.runCount === 'number' ? Math.max(1, Math.min(50, body.runCount)) : 1;
+                        const sequential = body.sequential === true;
+                        const resolvedInput = resolveWorkflowArgsFromObservations(body, workflowName);
+                        const workflowInput = resolvedInput.input ?? null;
+                        const traces = [];
+                        const runOne = async (runNumber) => {
+                            const result = await runHttpWorkflow({
+                                workflowName, workflowInput, pushedEvents, runConfigs,
+                                config: httpConfig, dashboardPort: port,
+                            });
+                            const traceStub = { getSteps: () => [], getLLMSteps: () => [], getToolCalls: () => [], getCustomSteps: () => [], recordLLMStep: () => { }, recordToolCall: () => { }, recordCustomStep: () => { } };
+                            return {
+                                runNumber, ok: result.ok, error: result.error,
+                                observations: buildValidationObservations(workflowName, workflowInput, result.currentOutput, result.error, traceStub, result.workflowTrace),
+                                workflowTrace: result.workflowTrace,
+                                currentOutput: result.currentOutput,
+                                snapshotId: result.workflowTrace ? saveSnapshot(cwd, result.workflowTrace) : undefined,
+                            };
+                        };
+                        if (sequential) {
+                            for (let i = 1; i <= runCount; i++)
+                                traces.push(await runOne(i));
+                        }
+                        else {
+                            traces.push(...await Promise.all(Array.from({ length: runCount }, (_, i) => runOne(i + 1))));
+                        }
+                        const ok = traces.some(t => t.ok);
+                        res.writeHead(ok ? 200 : 400, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ ok, mode: sequential ? 'sequential' : 'parallel', runCount, traces }));
+                        return;
+                    }
                     const result = await validateWorkflowRuns(cwd, body);
                     const statusCode = result.ok ? 200 : 400;
                     res.writeHead(statusCode, { 'Content-Type': 'application/json' });
@@ -2710,12 +1281,6 @@ export async function startDashboardServer(cwd, options = {}) {
                     else {
                         history = Array.isArray(body.history) ? body.history : [];
                     }
-                    const workflowsModulePath = resolveWorkflowModule(cwd);
-                    if (!workflowsModulePath) {
-                        res.writeHead(400, { 'Content-Type': 'application/json' });
-                        res.end(JSON.stringify({ ok: false, error: 'Cannot find ed_workflows.ts/js in workspace root.' }));
-                        return;
-                    }
                     const validationBody = { workflowName, observations: body.observations };
                     const resolvedInput = resolveWorkflowArgsFromObservations(validationBody, workflowName);
                     if (resolvedInput.error) {
@@ -2723,15 +1288,47 @@ export async function startDashboardServer(cwd, options = {}) {
                         res.end(JSON.stringify({ ok: false, error: resolvedInput.error }));
                         return;
                     }
-                    const workflowArgs = resolvedInput.args ?? [];
                     const workflowInput = resolvedInput.input ?? null;
+                    const frozenEvents = history.filter((event) => (event.id <= checkpoint
+                        && (event.type === 'ai' || event.type === 'tool' || event.type === 'http' || event.type === 'db')));
+                    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
+                        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,
+                        });
+                        const traceStub = { getSteps: () => [], getLLMSteps: () => [], getToolCalls: () => [], getCustomSteps: () => [], recordLLMStep: () => { }, recordToolCall: () => { }, recordCustomStep: () => { } };
+                        const snapshotId = result.workflowTrace ? saveSnapshot(cwd, result.workflowTrace) : undefined;
+                        const trace = {
+                            runNumber: 0,
+                            ok: result.ok,
+                            error: result.ok ? undefined : result.error,
+                            observations: buildValidationObservations(workflowName, workflowInput, result.currentOutput, result.ok ? undefined : result.error, traceStub, result.workflowTrace, frozenEventIds),
+                            workflowTrace: result.workflowTrace,
+                            currentOutput: result.currentOutput,
+                            snapshotId,
+                        };
+                        res.writeHead(200, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify(trace));
+                        return;
+                    }
+                    const workflowsModulePath = resolveWorkflowModule(cwd);
+                    if (!workflowsModulePath) {
+                        res.writeHead(400, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ ok: false, error: 'Cannot find ed_workflows.ts/js in workspace root.' }));
+                        return;
+                    }
+                    const workflowArgs = resolvedInput.args ?? [];
                     const toolsModulePath = resolveRuntimeModule(cwd, 'ed_tools') ?? null;
-                    const frozenEventIds = new Set(history
-                        .filter((event) => (event.id <= checkpoint
-                        && (event.type === 'ai' || event.type === 'tool' || event.type === 'http' || event.type === 'db')))
-                        .map((event) => event.id));
+                    const toolMockConfig = body.toolMockConfig && typeof body.toolMockConfig === 'object' && !Array.isArray(body.toolMockConfig)
+                        ? body.toolMockConfig
+                        : 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 });
+                    const result = await runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, workflowArgs, workflowInput, { replayMode: true, checkpoint, history, ...(toolMockConfig ? { toolMockConfig } : {}) });
                     const traceStub = {
                         getSteps: () => (result.steps ?? []),
                         getLLMSteps: () => (result.llmSteps ?? []),
@@ -2799,8 +1396,11 @@ export async function startDashboardServer(cwd, options = {}) {
                         return;
                     }
                     const toolsModulePath = resolveRuntimeModule(cwd, 'ed_tools') ?? null;
+                    const toolMockConfig = body.toolMockConfig && typeof body.toolMockConfig === 'object' && !Array.isArray(body.toolMockConfig)
+                        ? body.toolMockConfig
+                        : 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 });
+                    const result = await runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, [], null, { replayMode: history.length > 0, checkpoint: 0, history, agentState, ...(toolMockConfig ? { toolMockConfig } : {}) });
                     const traceStub = {
                         getSteps: () => (result.steps ?? []),
                         getLLMSteps: () => (result.llmSteps ?? []),
@@ -2847,6 +1447,35 @@ export async function startDashboardServer(cwd, options = {}) {
                 }
             }
         }
+        else if (url.pathname.startsWith('/api/run-configs/') && req.method === 'GET') {
+            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 ?? [] }));
+        }
+        else if (url.pathname === '/api/trace-events' && req.method === 'POST') {
+            // Receive telemetry events pushed from wrapAI / wrapTool in HTTP workflow mode
+            ;
+            (async () => {
+                try {
+                    const body = (await readJsonBody(req));
+                    if (typeof body.runId !== 'string' || !body.runId || !body.event || typeof body.event !== 'object') {
+                        res.writeHead(400, { 'Content-Type': 'application/json' });
+                        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);
+                    res.writeHead(200, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ ok: true }));
+                }
+                catch (error) {
+                    res.writeHead(500, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ ok: false, error: formatError(error) }));
+                }
+            })();
+        }
         else {
             res.writeHead(200, { 'Content-Type': 'text/html' });
             res.end(getDashboardHtml());