elasticdash-sdk 0.2.0

package/dist/dashboard-server.js

@@ -0,0 +1,3940 @@
+import http from 'node:http';
+import path from 'node:path';
+import { existsSync, readFileSync, readdirSync, statSync, writeFileSync, mkdirSync, rmSync } from 'node:fs';
+import { spawn } from 'node:child_process';
+import { pathToFileURL } from 'url';
+import { randomUUID, createCipheriv, createDecipheriv, randomBytes } from 'node:crypto';
+import { callProviderLLM } from './matchers/index.js';
+import chokidar from 'chokidar';
+import express from 'express';
+import { Worker } from 'worker_threads';
+const app = express();
+// ─── Snapshot Encryption (opt-in via ELASTICDASH_SNAPSHOT_ENCRYPTION_KEY) ────
+const SNAPSHOT_ENCRYPTION_KEY = process.env.ELASTICDASH_SNAPSHOT_ENCRYPTION_KEY
+    ? Buffer.from(process.env.ELASTICDASH_SNAPSHOT_ENCRYPTION_KEY, 'hex')
+    : null;
+function encryptSnapshot(data) {
+    if (!SNAPSHOT_ENCRYPTION_KEY || SNAPSHOT_ENCRYPTION_KEY.length !== 32)
+        return data;
+    const iv = randomBytes(16);
+    const cipher = createCipheriv('aes-256-gcm', SNAPSHOT_ENCRYPTION_KEY, iv);
+    const encrypted = Buffer.concat([cipher.update(data, 'utf8'), cipher.final()]);
+    const authTag = cipher.getAuthTag();
+    return `${iv.toString('hex')}:${authTag.toString('hex')}:${encrypted.toString('hex')}`;
+}
+function decryptSnapshot(data) {
+    if (!SNAPSHOT_ENCRYPTION_KEY || SNAPSHOT_ENCRYPTION_KEY.length !== 32)
+        return data;
+    const parts = data.split(':');
+    if (parts.length !== 3)
+        return data; // not encrypted, return as-is
+    const [ivHex, authTagHex, encryptedHex] = parts;
+    try {
+        const iv = Buffer.from(ivHex, 'hex');
+        const authTag = Buffer.from(authTagHex, 'hex');
+        const encrypted = Buffer.from(encryptedHex, 'hex');
+        const decipher = createDecipheriv('aes-256-gcm', SNAPSHOT_ENCRYPTION_KEY, iv);
+        decipher.setAuthTag(authTag);
+        return Buffer.concat([decipher.update(encrypted), decipher.final()]).toString('utf8');
+    }
+    catch {
+        return data; // decryption failed, return raw (may be unencrypted legacy data)
+    }
+}
+function saveSnapshot(cwd, workflowTrace) {
+    const dir = path.join(cwd, '.temp', 'snapshots');
+    mkdirSync(dir, { recursive: true });
+    const id = workflowTrace.traceId;
+    const content = encryptSnapshot(JSON.stringify(workflowTrace));
+    writeFileSync(path.join(dir, `${id}.json`), content, 'utf8');
+    return id;
+}
+function loadSnapshot(cwd, snapshotId) {
+    try {
+        const file = path.join(cwd, '.temp', 'snapshots', `${snapshotId}.json`);
+        const raw = readFileSync(file, 'utf8');
+        return JSON.parse(decryptSnapshot(raw));
+    }
+    catch {
+        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}`);
+        if (existsSync(candidate))
+            return candidate;
+    }
+    return null;
+}
+function parseSignatureParams(signature) {
+    if (!signature)
+        return [];
+    const trimmed = signature.trim();
+    if (!trimmed.startsWith('(') || !trimmed.endsWith(')'))
+        return [];
+    const body = trimmed.slice(1, -1).trim();
+    if (!body)
+        return [];
+    return body
+        .split(',')
+        .map(part => part.trim())
+        .filter(Boolean)
+        .map(part => part.replace(/^\.\.\./, '').split('=')[0].split(':')[0].replace(/\?/g, '').trim())
+        .filter(part => /^[$A-Z_][0-9A-Z_$]*$/i.test(part));
+}
+function normalizeMessageContent(content) {
+    if (typeof content === 'string')
+        return content;
+    if (Array.isArray(content)) {
+        return content
+            .map((part) => {
+            if (typeof part === 'string')
+                return part;
+            if (part && typeof part === 'object' && typeof part.text === 'string')
+                return part.text;
+            try {
+                return JSON.stringify(part);
+            }
+            catch {
+                return String(part);
+            }
+        })
+            .join('\n');
+    }
+    if (content && typeof content === 'object') {
+        if (typeof content.text === 'string')
+            return content.text;
+        try {
+            return JSON.stringify(content);
+        }
+        catch {
+            return String(content);
+        }
+    }
+    return content == null ? '' : String(content);
+}
+function extractPromptFromGenerationInput(input) {
+    if (typeof input === 'string') {
+        return { prompt: input };
+    }
+    const messages = Array.isArray(input)
+        ? input
+        : input && typeof input === 'object' && Array.isArray(input.messages)
+            ? input.messages
+            : null;
+    if (messages && messages.length > 0) {
+        const systemParts = [];
+        const promptParts = [];
+        for (const message of messages) {
+            const role = typeof message?.role === 'string' ? message.role : 'user';
+            const content = normalizeMessageContent(message?.content).trim();
+            if (!content)
+                continue;
+            if (role === 'system') {
+                systemParts.push(content);
+            }
+            else {
+                promptParts.push(`${role}: ${content}`);
+            }
+        }
+        return {
+            prompt: promptParts.join('\n\n') || systemParts.join('\n\n') || JSON.stringify(input),
+            systemPrompt: systemParts.length > 0 ? systemParts.join('\n\n') : undefined,
+        };
+    }
+    if (input && typeof input === 'object' && typeof input.prompt === 'string') {
+        return {
+            prompt: input.prompt,
+            systemPrompt: typeof input.systemPrompt === 'string' ? input.systemPrompt : undefined,
+        };
+    }
+    try {
+        return { prompt: JSON.stringify(input) };
+    }
+    catch {
+        return { prompt: String(input ?? '') };
+    }
+}
+function inferProvider(observation) {
+    const provider = observation.provider?.toLowerCase();
+    if (provider === 'openai' || provider === 'claude' || provider === 'gemini' || provider === 'grok' || provider === 'kimi') {
+        return provider;
+    }
+    const model = observation.model?.toLowerCase() ?? '';
+    if (model.includes('claude'))
+        return 'claude';
+    if (model.includes('gemini'))
+        return 'gemini';
+    if (model.includes('grok'))
+        return 'grok';
+    if (model.includes('kimi'))
+        return 'kimi';
+    return 'openai';
+}
+function buildToolArgs(input, tool) {
+    if (input === undefined)
+        return [];
+    if (Array.isArray(input))
+        return input;
+    if (input && typeof input === 'object') {
+        const argObject = input;
+        const paramNames = parseSignatureParams(tool?.signature);
+        if (paramNames.length > 0 && paramNames.every(name => Object.prototype.hasOwnProperty.call(argObject, name))) {
+            return paramNames.map(name => argObject[name]);
+        }
+        return [input];
+    }
+    return [input];
+}
+/**
+ * Flatten structured prompt mock config to simple Record<string, string> for HTTP mode.
+ * Accepts both the new structured format { mode, replacement } and legacy string values.
+ * Only entries with mode !== 'live' (or plain string entries) are included.
+ */
+function flattenPromptMockConfig(raw) {
+    if (!raw || typeof raw !== 'object' || Array.isArray(raw))
+        return {};
+    const result = {};
+    for (const [key, val] of Object.entries(raw)) {
+        if (typeof val === 'string') {
+            result[key] = val;
+        }
+        else if (val && typeof val === 'object' && 'replacement' in val) {
+            const entry = val;
+            if (entry.mode !== 'live' && typeof entry.replacement === 'string') {
+                result[key] = entry.replacement;
+            }
+        }
+    }
+    return result;
+}
+function formatError(error) {
+    if (error instanceof Error)
+        return error.message;
+    try {
+        return JSON.stringify(error);
+    }
+    catch {
+        return String(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;
+        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 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__:';
+        let resultLine = '';
+        let stderr = '';
+        child.stdout.on('data', (chunk) => {
+            const text = chunk.toString();
+            for (const line of text.split('\n')) {
+                if (line.startsWith(RESULT_PREFIX)) {
+                    resultLine = line.slice(RESULT_PREFIX.length);
+                }
+                else if (line) {
+                    process.stdout.write(line + '\n');
+                }
+            }
+        });
+        child.stderr.on('data', (chunk) => {
+            stderr += chunk.toString();
+            process.stderr.write(chunk);
+        });
+        child.on('close', () => {
+            const currentDurationMs = Date.now() - startMs;
+            if (resultLine) {
+                try {
+                    resolve({ ...JSON.parse(resultLine), currentDurationMs });
+                    return;
+                }
+                catch { /* fall through */ }
+            }
+            resolve({ ok: false, error: stderr.trim() || 'Tool subprocess produced no output.', currentDurationMs });
+        });
+        child.on('error', (err) => {
+            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({
+            toolsModulePath: pathToFileURL(toolsModulePath).pathname,
+            toolName,
+            args
+        });
+        child.stdin.write(payload);
+        child.stdin.end(); // Always close stdin to avoid subprocess hang
+    });
+}
+function runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, args, input, options) {
+    return new Promise((resolve) => {
+        const workerScript = new URL('./workflow-runner-worker.js', import.meta.url).pathname;
+        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 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) => {
+            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();
+            process.stderr.write(chunk);
+        });
+        const fd3 = child.stdio[3];
+        fd3?.on('data', (chunk) => {
+            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));
+                    return;
+                }
+                catch { /* fall through */ }
+            }
+            resolve({ ok: false, error: stderr.trim() || 'Workflow subprocess produced no output.' });
+        });
+        child.on('error', (err) => {
+            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({
+            workflowsModulePath: pathToFileURL(workflowsModulePath).pathname,
+            toolsModulePath: toolsModulePath ? pathToFileURL(toolsModulePath).pathname : undefined,
+            workflowName,
+            args,
+            input,
+            ...(options?.replayMode !== undefined ? { replayMode: options.replayMode } : {}),
+            ...(options?.checkpoint !== undefined ? { checkpoint: options.checkpoint } : {}),
+            ...(options?.history !== undefined ? { history: options.history } : {}),
+            ...(options?.agentState !== undefined ? { agentState: options.agentState } : {}),
+            ...(options?.toolMockConfig !== undefined ? { toolMockConfig: options.toolMockConfig } : {}),
+            ...(options?.aiMockConfig !== undefined ? { aiMockConfig: options.aiMockConfig } : {}),
+            ...(options?.promptMockConfig !== undefined ? { promptMockConfig: options.promptMockConfig } : {}),
+            ...(options?.userPromptMockConfig !== undefined ? { userPromptMockConfig: options.userPromptMockConfig } : {}),
+        });
+        child.stdin.write(payload);
+        child.stdin.end(); // Always close stdin to avoid subprocess hang
+    });
+}
+async function runToolObservation(cwd, observation, tools) {
+    const toolName = observation.name;
+    if (!toolName) {
+        return { ok: false, error: 'Missing tool name on observation.' };
+    }
+    const toolsModulePath = resolveRuntimeModule(cwd, 'ed_tools');
+    if (!toolsModulePath) {
+        return { ok: false, error: 'Cannot find ed_tools.ts/js in workspace root.' };
+    }
+    // Parse input if it's a JSON string (common in trace exports)
+    let parsedInput = observation.input;
+    if (typeof parsedInput === 'string') {
+        try {
+            parsedInput = JSON.parse(parsedInput);
+        }
+        catch {
+            // Not JSON, use as-is
+        }
+    }
+    const toolInfo = tools.find(tool => tool.name === toolName);
+    const args = buildToolArgs(parsedInput, toolInfo);
+    console.log('[elasticdash] Rerunning tool observation:', { toolName, input: observation.input });
+    console.log(`[elasticdash] Loading tools from ${toolsModulePath} (fresh subprocess)...`);
+    return runToolInSubprocess(toolsModulePath, toolName, args);
+}
+async function runGenerationObservation(observation) {
+    try {
+        const { prompt, systemPrompt } = extractPromptFromGenerationInput(observation.input);
+        if (!prompt.trim()) {
+            return { ok: false, error: 'Generation input is empty; cannot rerun.' };
+        }
+        const provider = inferProvider(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 result = await callProviderLLM(prompt, { provider, model }, systemPrompt ?? 'You are a helpful assistant.', maxTokens);
+        return { ok: true, currentOutput: result.content, currentDurationMs: result.durationMs, currentUsage: result.usage };
+    }
+    catch (error) {
+        return { ok: false, error: `Generation rerun failed: ${formatError(error)}` };
+    }
+}
+async function rerunObservation(cwd, observation, tools) {
+    const type = observation.type?.toUpperCase();
+    const name = observation.name ?? '(unknown)';
+    const isToolByName = name.startsWith('tool-') || name.startsWith('tool:');
+    if (type === 'TOOL' || isToolByName) {
+        observation.name = isToolByName ? name.slice(5) : name; // Support both explicit type and name prefix for tool observations
+        return runToolObservation(cwd, observation, tools);
+    }
+    if (type === 'GENERATION') {
+        return runGenerationObservation(observation);
+    }
+    return { ok: false, error: `Unsupported observation type: ${observation.type ?? '(missing type)'}` };
+}
+function resolveWorkflowModule(cwd) {
+    return resolveRuntimeModule(cwd, 'ed_workflows');
+}
+function normalizeRunCount(value) {
+    const parsed = typeof value === 'number' ? value : Number.parseInt(String(value ?? ''), 10);
+    if (!Number.isFinite(parsed))
+        return 1;
+    const floored = Math.floor(parsed);
+    if (floored < 1)
+        return 1;
+    if (floored > 50)
+        return 50;
+    return floored;
+}
+function parseObservationInput(input) {
+    if (typeof input !== 'string')
+        return input;
+    const trimmed = input.trim();
+    if (!trimmed)
+        return input;
+    try {
+        return JSON.parse(trimmed);
+    }
+    catch {
+        return input;
+    }
+}
+function normalizeWorkflowArgs(input) {
+    const parsedInput = parseObservationInput(input);
+    if (parsedInput === undefined || parsedInput === null)
+        return [];
+    if (Array.isArray(parsedInput))
+        return parsedInput;
+    return [parsedInput];
+}
+function resolveWorkflowArgsFromObservations(body, workflowName) {
+    if (!Array.isArray(body.observations)) {
+        return { error: 'observations array is required for workflow validation input.' };
+    }
+    const matched = body.observations.find((item) => {
+        if (!item || typeof item !== 'object')
+            return false;
+        return typeof item.name === 'string' && (item.name ?? '').trim() === workflowName;
+    });
+    if (!matched) {
+        // No workflow-level observation found (e.g. trace was loaded from an external format that
+        // only contains child observations). Fall back to running the workflow with no arguments.
+        return { args: [], input: null };
+    }
+    return { args: normalizeWorkflowArgs(matched.input), input: matched.input };
+}
+function normalizeStartTime(value) {
+    if (typeof value === 'number' && Number.isFinite(value) && value > 1) {
+        return value;
+    }
+    return Date.now();
+}
+function toObservationFromStep(step) {
+    if (step.type === 'llm') {
+        return {
+            type: 'GENERATION',
+            name: typeof step.data.provider === 'string' ? step.data.provider : 'llm',
+            provider: typeof step.data.provider === 'string' ? step.data.provider : undefined,
+            model: typeof step.data.model === 'string' ? step.data.model : undefined,
+            input: step.data.prompt,
+            output: step.data.completion,
+            startTime: normalizeStartTime(step.timestamp),
+            workflowEventId: typeof step.data.workflowEventId === 'number' ? step.data.workflowEventId : undefined,
+        };
+    }
+    if (step.type === 'tool') {
+        return {
+            type: 'TOOL',
+            name: typeof step.data.name === 'string' ? step.data.name : 'tool',
+            input: step.data.args,
+            output: step.data.result,
+            startTime: normalizeStartTime(step.timestamp),
+            workflowEventId: typeof step.data.workflowEventId === 'number' ? step.data.workflowEventId : undefined,
+        };
+    }
+    return {
+        type: 'SPAN',
+        name: typeof step.data.name === 'string' ? step.data.name : typeof step.data.kind === 'string' ? step.data.kind : 'custom',
+        input: step.data.payload ?? step.data.metadata,
+        output: step.data.result,
+        startTime: normalizeStartTime(step.timestamp),
+    };
+}
+function toObservationFromWorkflowEvent(event) {
+    const agentFields = {};
+    if (event.agentTaskId !== undefined)
+        agentFields.agentTaskId = event.agentTaskId;
+    if (event.agentTaskIndex !== undefined)
+        agentFields.agentTaskIndex = event.agentTaskIndex;
+    if (event.type === 'ai') {
+        const inp = event.input;
+        const out = event.output;
+        const provider = inp?.provider ?? '';
+        // 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: event.name || provider || 'llm',
+            provider: provider || undefined,
+            model: inp?.model ?? event.name,
+            input: inp?.messages ?? inp?.prompt,
+            output: streamedCompletion !== undefined ? streamedCompletion : out,
+            startTime: normalizeStartTime(event.timestamp),
+            durationMs: event.durationMs,
+            usage: event.usage,
+            workflowEventId: event.id,
+            ...agentFields,
+        };
+    }
+    if (event.type === 'tool') {
+        return {
+            type: 'TOOL',
+            name: event.name,
+            input: event.input,
+            output: event.output,
+            startTime: normalizeStartTime(event.timestamp),
+            durationMs: event.durationMs,
+            workflowEventId: event.id,
+            ...agentFields,
+        };
+    }
+    if (event.type === 'http') {
+        const inp = event.input;
+        return {
+            type: 'HTTP',
+            name: inp?.url ?? 'http',
+            input: event.input,
+            output: event.output,
+            startTime: normalizeStartTime(event.timestamp),
+            durationMs: event.durationMs,
+            workflowEventId: event.id,
+            ...agentFields,
+        };
+    }
+    if (event.type === 'db') {
+        return {
+            type: 'DB',
+            name: event.name,
+            input: event.input,
+            output: event.output,
+            startTime: normalizeStartTime(event.timestamp),
+            durationMs: event.durationMs,
+            workflowEventId: event.id,
+            ...agentFields,
+        };
+    }
+    return {
+        type: 'SPAN',
+        name: event.name,
+        input: event.input,
+        output: event.output,
+        startTime: normalizeStartTime(event.timestamp),
+        durationMs: event.durationMs,
+        workflowEventId: event.id,
+        ...agentFields,
+    };
+}
+function buildValidationObservations(workflowName, workflowInput, workflowOutput, workflowError, trace, workflowTrace, frozenEventIds) {
+    const steps = trace.getSteps();
+    const workflowStartTime = steps.length > 0 ? steps[0].timestamp : Date.now();
+    const observations = [
+        {
+            type: 'SPAN',
+            name: workflowName,
+            input: workflowInput,
+            output: workflowError ? `Workflow run failed: ${workflowError}` : workflowOutput,
+            startTime: workflowStartTime,
+        },
+    ];
+    // If workflowTrace has ai/tool events, use those as the source of truth to avoid duplicates
+    const hasAiEvents = workflowTrace?.events.some(e => e.type === 'ai') ?? false;
+    const hasToolEvents = workflowTrace?.events.some(e => e.type === 'tool') ?? false;
+    let firstGenerationIndex = -1;
+    for (const step of steps) {
+        if (hasAiEvents && step.type === 'llm')
+            continue;
+        if (hasToolEvents && step.type === 'tool')
+            continue;
+        const obs = toObservationFromStep({ type: step.type, data: step.data, timestamp: step.timestamp });
+        // Mark frozen if this step's workflowEventId is in the frozen set
+        if (obs.workflowEventId !== undefined && frozenEventIds?.has(obs.workflowEventId)) {
+            obs.isFrozen = true;
+        }
+        observations.push(obs);
+        // Track the index of the first GENERATION observation
+        if (firstGenerationIndex === -1 && obs.type === 'GENERATION') {
+            firstGenerationIndex = observations.length - 1;
+        }
+    }
+    // Append captured events from the workflow trace (ai, tool, http, db)
+    if (workflowTrace) {
+        for (const event of workflowTrace.events) {
+            if (event.type === 'ai' || event.type === 'tool' || event.type === 'http' || event.type === 'db') {
+                const obs = toObservationFromWorkflowEvent(event);
+                if (frozenEventIds?.has(event.id)) {
+                    obs.isFrozen = true;
+                }
+                observations.push(obs);
+                if (firstGenerationIndex === -1 && obs.type === 'GENERATION') {
+                    firstGenerationIndex = observations.length - 1;
+                }
+            }
+        }
+    }
+    // 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));
+    return [workflowEntry, ...rest];
+}
+async function validateWorkflowRuns(cwd, body) {
+    const workflowName = typeof body.workflowName === 'string' ? body.workflowName.trim() : '';
+    if (!workflowName) {
+        return {
+            ok: false,
+            mode: 'parallel',
+            runCount: 0,
+            traces: [],
+            error: 'workflowName is required.',
+        };
+    }
+    const runCount = normalizeRunCount(body.runCount);
+    const sequential = body.sequential === true;
+    const mode = sequential ? 'sequential' : 'parallel';
+    const resolvedInput = resolveWorkflowArgsFromObservations(body, workflowName);
+    if (resolvedInput.error) {
+        return {
+            ok: false,
+            mode,
+            runCount,
+            traces: [],
+            error: resolvedInput.error,
+        };
+    }
+    const workflowArgs = resolvedInput.args ?? [];
+    const workflowInput = resolvedInput.input ?? null;
+    // Parse tool mock config if provided
+    const toolMockConfig = body.toolMockConfig && typeof body.toolMockConfig === 'object' && !Array.isArray(body.toolMockConfig)
+        ? body.toolMockConfig
+        : undefined;
+    // Parse AI mock config if provided
+    const aiMockConfig = body.aiMockConfig && typeof body.aiMockConfig === 'object' && !Array.isArray(body.aiMockConfig)
+        ? body.aiMockConfig
+        : undefined;
+    // Parse prompt mock config if provided
+    const promptMockConfig = body.promptMockConfig && typeof body.promptMockConfig === 'object' && !Array.isArray(body.promptMockConfig)
+        ? body.promptMockConfig
+        : undefined;
+    // Parse user prompt mock config if provided
+    const userPromptMockConfig = body.userPromptMockConfig && typeof body.userPromptMockConfig === 'object' && !Array.isArray(body.userPromptMockConfig)
+        ? body.userPromptMockConfig
+        : undefined;
+    const workflowsModulePath = resolveWorkflowModule(cwd);
+    if (!workflowsModulePath) {
+        return {
+            ok: false,
+            mode,
+            runCount,
+            traces: [],
+            error: 'Cannot find ed_workflows.ts/js in workspace root.',
+        };
+    }
+    const toolsModulePath = resolveRuntimeModule(cwd, 'ed_tools') ?? null;
+    const runs = Array.from({ length: runCount }, (_, i) => i + 1);
+    console.log(`[elasticdash] Running workflow "${workflowName}" ${runCount} time(s) in ${mode} mode via subprocess`);
+    async function runOne(runNumber) {
+        console.log(`[elasticdash] === Run ${runNumber}: Starting workflow "${workflowName}" ===`);
+        const result = await runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, workflowArgs, workflowInput, (toolMockConfig || aiMockConfig || promptMockConfig || userPromptMockConfig) ? { ...(toolMockConfig ? { toolMockConfig } : {}), ...(aiMockConfig ? { aiMockConfig } : {}), ...(promptMockConfig ? { promptMockConfig } : {}), ...(userPromptMockConfig ? { userPromptMockConfig } : {}) } : undefined)
+            .catch(err => {
+            throw { ok: false, error: `Workflow subprocess failed: ${formatError(err)}` };
+        });
+        // Reconstruct a minimal TraceHandle from serialised trace arrays
+        const traceStub = {
+            getSteps: () => (result.steps ?? []),
+            getLLMSteps: () => (result.llmSteps ?? []),
+            getToolCalls: () => (result.toolCalls ?? []),
+            getCustomSteps: () => (result.customSteps ?? []),
+            recordLLMStep: () => { },
+            recordToolCall: () => { },
+            recordCustomStep: () => { },
+        };
+        if (!result.ok) {
+            console.error(`[elasticdash] Run ${runNumber}: Workflow failed:`, result.error);
+            return {
+                runNumber,
+                ok: false,
+                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,
+            };
+        }
+        console.log(`[elasticdash] Run ${runNumber}: Workflow completed successfully`);
+        return {
+            runNumber,
+            ok: true,
+            observations: buildValidationObservations(workflowName, workflowInput, result.currentOutput, undefined, traceStub, result.workflowTrace),
+            workflowTrace: result.workflowTrace,
+            currentOutput: result.currentOutput,
+            snapshotId: result.workflowTrace ? saveSnapshot(cwd, result.workflowTrace) : undefined,
+        };
+    }
+    try {
+        let traces;
+        if (sequential) {
+            traces = [];
+            for (const runNumber of runs) {
+                traces.push(await runOne(runNumber));
+            }
+        }
+        else {
+            traces = await Promise.all(runs.map(runOne));
+        }
+        console.log(`[elasticdash] Completed ${traces.length} workflow run(s). Success: ${traces.filter(t => t.ok).length}, Failed: ${traces.filter(t => !t.ok).length}`);
+        return { ok: true, mode, runCount, traces };
+    }
+    catch (error) {
+        console.error('[elasticdash] Workflow validation failed with exception:', error);
+        return {
+            ok: false,
+            mode,
+            runCount,
+            traces: [],
+            error: `Workflow validation failed: ${formatError(error)}`,
+        };
+    }
+}
+function readJsonBody(req) {
+    return new Promise((resolve, reject) => {
+        let raw = '';
+        req.setEncoding('utf8');
+        req.on('data', (chunk) => {
+            raw += chunk;
+            if (raw.length > 2_000_000) {
+                reject(new Error('Request body too large.'));
+            }
+        });
+        req.on('end', () => {
+            if (!raw.trim()) {
+                resolve({});
+                return;
+            }
+            try {
+                resolve(JSON.parse(raw));
+            }
+            catch {
+                reject(new Error('Invalid JSON body.'));
+            }
+        });
+        req.on('error', reject);
+    });
+}
+/**
+ * Resolve a relative module specifier to an existing file path.
+ * Tries .ts, .tsx, .js, .jsx extensions (TypeScript sources preferred).
+ */
+function resolveModulePath(fromDir, specifier) {
+    if (!specifier.startsWith('.'))
+        return null;
+    const exts = ['.ts', '.tsx', '.js', '.jsx', ''];
+    for (const ext of exts) {
+        const candidate = path.resolve(fromDir, specifier + ext);
+        if (existsSync(candidate))
+            return candidate;
+    }
+    return null;
+}
+/** 1-based line number of a character index within source text */
+function lineAt(src, index) {
+    return src.slice(0, index).split('\n').length;
+}
+/**
+ * Given source text, try to find the signature of a named export or declaration.
+ * Returns { isAsync, signature, lineNumber?, sourceCode? }.
+ */
+function findFunctionInSource(src, name) {
+    const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    // export [async] function name(params)
+    let m = src.match(new RegExp(`export\\s+(async\\s+)?function\\s+${escaped}\\s*(\\([^)]*\\))`));
+    if (m)
+        return { isAsync: !!m[1], signature: m[2], lineNumber: lineAt(src, m.index), sourceCode: extractSource(src, m.index) };
+    // [async] function name(params) — non-exported, for re-export cases
+    m = src.match(new RegExp(`(?:^|\\n)\\s*(?:async\\s+)?function\\s+${escaped}\\s*(\\([^)]*\\))`, 'm'));
+    if (m)
+        return {
+            isAsync: new RegExp(`async\\s+function\\s+${escaped}`).test(src),
+            signature: m[1],
+            lineNumber: lineAt(src, m.index),
+            sourceCode: extractSource(src, m.index),
+        };
+    // export const name = [async] (params) =>
+    m = src.match(new RegExp(`export\\s+const\\s+${escaped}\\s*=\\s*(async\\s*)?(\\([^)]*\\))\\s*=>`));
+    if (m)
+        return { isAsync: !!m[1], signature: m[2], lineNumber: lineAt(src, m.index) };
+    // const name = [async] (params) =>
+    m = src.match(new RegExp(`(?:^|\\n)\\s*const\\s+${escaped}\\s*=\\s*(async\\s*)?(\\([^)]*\\))\\s*=>`, 'm'));
+    if (m)
+        return { isAsync: !!m[1], signature: m[2], lineNumber: lineAt(src, m.index) };
+    return { isAsync: false, signature: '()' };
+}
+/** Extract ~2000 chars of source starting at a matched index */
+function extractSource(src, index) {
+    const snippet = src.slice(index, index + 2000);
+    return snippet.length < 2000 ? snippet : snippet + '\n// (truncated)';
+}
+/**
+ * Parse exported names from an ed_*.ts / ed_*.js source file without executing it.
+ * Handles: direct function/const exports, named re-exports, and import+destructure exports.
+ */
+function extractExportsFromSource(filePath) {
+    let src;
+    try {
+        src = readFileSync(filePath, 'utf8');
+    }
+    catch {
+        return [];
+    }
+    const dir = path.dirname(filePath);
+    const results = [];
+    // 1. Direct: export [async] function name(params) { … }
+    for (const m of src.matchAll(/export\s+(async\s+)?function\s+(\w+)\s*(\([^)]*\))/g)) {
+        results.push({
+            name: m[2],
+            isAsync: !!m[1],
+            signature: m[3],
+            filePath,
+            lineNumber: lineAt(src, m.index),
+            sourceCode: extractSource(src, m.index),
+        });
+    }
+    // 2. Direct: export const name = [async] (params) => …
+    for (const m of src.matchAll(/export\s+const\s+(\w+)\s*=\s*(async\s*)?\(([^)]*)\)\s*=>/g)) {
+        results.push({
+            name: m[1],
+            isAsync: !!m[2],
+            signature: `(${m[3]})`,
+            filePath,
+            lineNumber: lineAt(src, m.index),
+            sourceCode: extractSource(src, m.index),
+        });
+    }
+    // 3. Named re-exports: export { X [as Y], … } from './module'
+    for (const m of src.matchAll(/export\s*\{([^}]+)\}\s*from\s*['"]([^'"]+)['"]/g)) {
+        const modulePath = resolveModulePath(dir, m[2]);
+        let moduleSrc = '';
+        try {
+            if (modulePath)
+                moduleSrc = readFileSync(modulePath, 'utf8');
+        }
+        catch { /* ignore */ }
+        for (const spec of m[1].split(',')) {
+            const parts = spec.trim().split(/\s+as\s+/);
+            const originalName = parts[0].trim();
+            const exportedName = (parts[1] ?? parts[0]).trim();
+            if (!exportedName || exportedName === 'default')
+                continue;
+            const info = moduleSrc ? findFunctionInSource(moduleSrc, originalName) : { isAsync: false, signature: '()' };
+            results.push({
+                name: exportedName,
+                isAsync: info.isAsync,
+                signature: info.signature,
+                filePath: modulePath ?? filePath,
+                lineNumber: info.lineNumber,
+                sourceCode: info.sourceCode,
+            });
+        }
+    }
+    // 4. Import + destructure: import { obj } from './m'  +  export const { a, b } = obj
+    for (const imp of src.matchAll(/import\s*\{([^}]+)\}\s*from\s*['"]([^'"]+)['"]/g)) {
+        const importedNames = imp[1].split(',').map(s => {
+            const parts = s.trim().split(/\s+as\s+/);
+            return { original: parts[0].trim(), local: (parts[1] ?? parts[0]).trim() };
+        }).filter(n => n.local);
+        const modulePath = resolveModulePath(dir, imp[2]);
+        for (const { local } of importedNames) {
+            // Look for: export const { a, b, c } = local
+            const destructureRe = new RegExp(`export\\s+const\\s+\\{([^}]+)\\}\\s*=\\s*${local.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`);
+            const dm = src.match(destructureRe);
+            if (!dm)
+                continue;
+            let moduleSrc = '';
+            try {
+                if (modulePath)
+                    moduleSrc = readFileSync(modulePath, 'utf8');
+            }
+            catch { /* ignore */ }
+            for (const member of dm[1].split(',')) {
+                const name = member.trim();
+                if (!name)
+                    continue;
+                const info = moduleSrc ? findFunctionInSource(moduleSrc, name) : { isAsync: false, signature: '()' };
+                results.push({
+                    name,
+                    isAsync: info.isAsync,
+                    signature: info.signature,
+                    filePath: modulePath ?? filePath,
+                    lineNumber: info.lineNumber,
+                    sourceCode: info.sourceCode,
+                });
+            }
+        }
+    }
+    return results;
+}
+/**
+ * Scan for ed_tools.ts or ed_tools.js and extract exported functions
+ */
+function scanTools(cwd) {
+    for (const candidate of [path.join(cwd, 'ed_tools.ts'), path.join(cwd, 'ed_tools.js')]) {
+        if (!existsSync(candidate))
+            continue;
+        const exports = extractExportsFromSource(candidate);
+        if (exports.length > 0) {
+            return exports.map(e => ({
+                name: e.name,
+                isAsync: e.isAsync,
+                signature: e.signature,
+                filePath: e.filePath,
+                lineNumber: e.lineNumber,
+                sourceCode: e.sourceCode,
+            }));
+        }
+    }
+    return [];
+}
+/**
+ * Scan for ed_workflows.ts or ed_workflows.js and extract exported functions
+ */
+function scanWorkflows(cwd) {
+    for (const candidate of [path.join(cwd, 'ed_workflows.ts'), path.join(cwd, 'ed_workflows.js')]) {
+        if (!existsSync(candidate))
+            continue;
+        const exports = extractExportsFromSource(candidate);
+        if (exports.length > 0) {
+            return exports.map(e => ({
+                name: e.name,
+                isAsync: e.isAsync,
+                signature: e.signature,
+                filePath: e.filePath,
+                lineNumber: e.lineNumber,
+                sourceFile: e.filePath,
+                sourceCode: e.sourceCode,
+            }));
+        }
+    }
+    return [];
+}
+/**
+ * Open URL in default browser (platform-aware)
+ */
+function openBrowser(url) {
+    const platform = process.platform;
+    if (platform === 'darwin') {
+        spawn('open', [url], { detached: true, stdio: 'ignore' });
+    }
+    else if (platform === 'linux') {
+        spawn('xdg-open', [url], { detached: true, stdio: 'ignore' });
+    }
+    else if (platform === 'win32') {
+        spawn('cmd', ['/c', 'start', url], { detached: true, stdio: 'ignore', shell: true });
+    }
+}
+/**
+ * Get the dashboard HTML page
+ *
+ * HTML content is inlined at build time by scripts/inline-html.js
+ * Edit src/html/dashboard.html to modify the dashboard UI
+ */
+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>
+            /* Help icon tooltip */
+            .help-icon-wrap { position: relative; display: inline-flex; align-items: center; }
+            .help-icon {
+                display: inline-flex; align-items: center; justify-content: center;
+                width: 16px; height: 16px; border-radius: 50%;
+                background: #e0e0e0; color: #666; font-size: 11px; font-weight: bold;
+                cursor: help; vertical-align: middle; margin-left: 4px;
+                user-select: none;
+            }
+            .help-tooltip {
+                display: none; position: absolute; left: 50%; bottom: calc(100% + 8px);
+                transform: translateX(-50%);
+                background: #333; color: #fff; font-size: 12px; font-weight: 400;
+                line-height: 1.4; padding: 8px 12px; border-radius: 6px;
+                width: 280px; white-space: normal; z-index: 10000;
+                box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+                pointer-events: auto;
+            }
+            .help-tooltip::after {
+                content: ''; position: absolute; top: 100%; left: 50%;
+                transform: translateX(-50%);
+                border: 6px solid transparent; border-top-color: #333;
+            }
+            .help-icon-wrap:hover .help-tooltip { display: block; }
+            /* Ensure first cell in observation-table never overflows parent */
+            .observation-table td:first-child {
+                max-width: 120px;
+                overflow: auto;
+                white-space: nowrap;
+            }
+            * { margin: 0; padding: 0; box-sizing: border-box; }
+            body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f5f5; color: #333; }
+            .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
+            header { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+            h1 { font-size: 28px; margin-bottom: 8px; color: #1a1a1a; }
+            .subtitle { font-size: 14px; color: #666; margin-bottom: 16px; }
+            .search-box { display: flex; gap: 10px; }
+            input[type="text"] { flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
+            input[type="text"]:focus { outline: none; border-color: #0066cc; box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1); }
+            .result-count { padding: 10px 12px; background: #f0f0f0; border-radius: 6px; font-size: 14px; color: #666; }
+            .workflows-list { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; max-height: 65vh; display: flex; flex-direction: column; }
+            .workflows-table { width: 100%; border-collapse: collapse; }
+            .workflows-table thead { background: #f5f5f5; position: sticky; top: 0; z-index: 10; }
+            .workflows-table th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 13px; color: #333; border-bottom: 2px solid #ddd; }
+            .workflows-table td { padding: 12px 16px; border-bottom: 1px solid #eee; }
+            .workflows-table tbody tr { cursor: pointer; transition: background-color 0.2s; }
+            .workflows-table tbody tr:hover { background-color: #f9f9f9; }
+            .workflow-name-cell { font-family: Monaco, monospace; font-weight: 600; color: #0066cc; }
+            .workflow-path-cell { font-family: Monaco, monospace; font-size: 12px; color: #666; }
+            .async-badge { display: inline-block; background: #e8f3ff; color: #0066cc; padding: 2px 8px; border-radius: 4px; font-size: 11px; margin-left: 8px; }
+            .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; align-items: center; justify-content: center; }
+            .modal.open { display: flex; }
+            .modal-content { background: white; border-radius: 12px; width: 92%; max-width: 1100px; max-height: 90vh; overflow-y: auto; padding: 30px; }
+            .modal-header { display: flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
+            .modal-title { font-size: 20px; font-weight: 600; }
+            .modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #999; }
+            .upload-area { border: 2px dashed #ddd; border-radius: 8px; padding: 30px; text-align: center; cursor: pointer; background: #fafafa; overflow: hidden; height: 520px; position: relative; }
+            .upload-area:hover { border-color: #0066cc; background: #f0f7ff; }
+            .upload-area > div {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+            .upload-icon { font-size: 32px; margin-bottom: 12px; }
+            input[type="file"] { display: none; }
+            .upload-status { margin-top: 20px; padding: 12px; border-radius: 6px; display: none; }
+            .upload-status.success { display: block; background: #e8f5e9; color: #2e7d32; }
+            .upload-status.error { display: block; background: #ffebee; color: #c62828; }
+            .hidden { display: none !important; }
+            .trace-viewer { display: none; margin-top: 20px; }
+            .trace-viewer.visible { display: block; }
+            .trace-layout { display: grid; grid-template-columns: 40% calc(60% - 16px); gap: 16px; overflow: auto; height: 520px; }
+            .trace-layout.step-5 { display: grid; grid-template-columns: calc(30% - 16px) calc(30% - 16px) 40%; gap: 16px; overflow: auto; height: 520px; }
+            .trace-layout.step-4 { display: grid; grid-template-columns: calc(30% - 16px) calc(30% - 16px) 40%; gap: 16px; overflow: auto; height: 520px; }
+            .trace-left, .trace-right { background: #f9f9f9; border-radius: 8px; padding: 14px; border: 1px solid #eee; }
+            .trace-section-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
+            .observation-table-wrap { max-height: 460px; overflow: auto; background: white; border-radius: 6px; border: 1px solid #eee; }
+            .observation-table { width: 100%; border-collapse: collapse; }
+            .observation-table thead { background: #f5f5f5; position: sticky; top: 0; z-index: 1; }
+            .observation-table th { text-align: left; font-size: 12px; font-weight: 600; color: #555; padding: 10px 12px; border-bottom: 1px solid #e8e8e8; }
+            .observation-table td { font-size: 13px; padding: 10px 12px; border-bottom: 1px solid #f0f0f0; }
+            .observation-table tbody tr { cursor: pointer; }
+            .observation-table tbody tr:hover { background: #f7fbff; }
+            .observation-table tbody tr.selected { background: #e8f3ff; }
+            .obs-type { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; background: #e6e6e6; color: #333; }
+            .obs-type.tool { background: #e8f7ef; color: #1f7a44; }
+            .obs-type.ai { background: #e8f1ff; color: #1f5fbf; }
+            .run-from-bp-btn { font-size: 11px; padding: 2px 8px; border: 1px solid #bbb; border-radius: 4px; background: #f5f5f5; color: #333; cursor: pointer; white-space: nowrap; }
+            .run-from-bp-btn:hover { background: #e0edff; border-color: #5a8fd8; color: #1f5fbf; }
+            .run-from-bp-btn:disabled { opacity: 0.6; cursor: default; }
+            .resume-agent-btn { font-size: 11px; padding: 2px 8px; border: 1px solid #b8a0d8; border-radius: 4px; background: #f3eeff; color: #5a2d9c; cursor: pointer; white-space: nowrap; margin-left: 6px; }
+            .resume-agent-btn:hover { background: #e6d8ff; border-color: #7c52b8; color: #3d1f7a; }
+            .resume-agent-btn:disabled { opacity: 0.6; cursor: default; }
+            .agent-task-badge { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; background: #f0e8ff; color: #6a2fb0; border: 1px solid #d4b8f0; margin-left: 6px; font-weight: 600; }
+            .agent-task-row { background: #f7f0ff; border-left: 3px solid #8560c6; }
+            .frozen-row { background: #eef7ff; border-left: 3px solid #8cbcf5; }
+            .observation-table tbody tr.selected.frozen-row { background: #dcebff; }
+            .frozen-tag { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; background: #dcecff; color: #1f5fbf; border: 1px solid #a9c8f3; margin-left: 6px; font-weight: 600; }
+            .detail-sections { display: flex; flex-direction: column; gap: 12px; height: 486.5px; overflow-y: auto; }
+            .detail-section { background: white; border: 1px solid #eee; border-radius: 6px; padding: 10px; }
+            .detail-title { font-size: 12px; font-weight: 600; margin-bottom: 8px; color: #555; text-transform: uppercase; letter-spacing: 0.02em; }
+            .detail-pre { margin: 0; font-family: Monaco, monospace; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: #fafafa; border-radius: 4px; padding: 10px; border: 1px solid #f0f0f0; min-height: 56px; max-height: 340px; overflow-y: auto; }
+            .modal-footer { display: flex; margin-top: 24px; padding-top: 20px; border-top: 1px solid #eee; gap: 12px; justify-content: space-between; }
+            .btn { padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; }
+            .btn-secondary { background: #f0f0f0; color: #333; }
+            .btn-secondary:hover { background: #e0e0e0; }
+            .btn-primary { background: #0066cc; color: white; }
+            .btn-primary:hover { background: #0052a3; }
+            .btn:disabled { opacity: 0.6; cursor: not-allowed; }
+            .btn-primary:disabled:hover { background: #0066cc; }
+            .btn-secondary:disabled:hover { background: #f0f0f0; }
+            .obs-checkbox { width: 18px; height: 18px; cursor: pointer; }
+            .rerun-status { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; }
+            .rerun-status.running { color: #666; }
+            .rerun-status.success { color: #1f7a44; }
+            .rerun-status.error { color: #c62828; }
+            @media (max-width: 900px) {
+            .trace-layout { grid-template-columns: 1fr; }
+            }
+        </style>
+        <script>
+            const updatedInputs = new Map();
+        </script>
+    </head>
+    <body>
+        <div class="container">
+            <header>
+                <h1>Workflow Functions</h1>
+                <div class="subtitle">Select a workflow to debug with trace analysis</div>
+                <div class="search-box">
+                    <input type="text" id="searchInput" placeholder="Search by name or path..." autocomplete="off">
+                    <div class="result-count"><span id="resultCount">0</span> workflows</div>
+                </div>
+            </header>
+            <div class="workflows-list">
+                <table class="workflows-table">
+                    <thead><tr><th style="width: 35%">Function Name</th><th>File Path</th></tr></thead>
+                    <tbody id="workflowsTableBody"><tr><td colspan="2" style="text-align: center; padding: 40px;">Loading...</td></tr></tbody>
+                </table>
+            </div>
+        </div>
+        <div id="traceModal" class="modal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="modal-title">Import Trace for Analysis</h2>
+                    <button class="modal-close" id="closeModal">&times;</button>
+                </div>
+                <div id="uploadArea" class="upload-area">
+                    <div>Drag and Drop <br />or <br />Click to Upload</div>
+                    <input type="file" id="traceFile" accept=".json" />
+                </div>
+                <div id="uploadStatus" class="upload-status"></div>
+                <div id="traceViewer" class="trace-viewer">
+                    <div class="trace-layout">
+                        <div class="trace-left">
+                            <div class="trace-section-title">Observations</div>
+                            <div class="observation-table-wrap">
+                                <table class="observation-table">
+                                <thead id="observationTableHead"><tr><th style="width: 40px;">Check</th><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
+                                <tbody id="observationTableBody"></tbody>
+                                </table>
+                            </div>
+                        </div>
+                        <div class="trace-right">
+                            <div id="observationDetail"></div>
+                        </div>
+                    </div>
+                </div>
+                <div id="modalFooter" class="modal-footer">
+                    <button class="btn btn-secondary" id="changeTraceBtn">Change Trace File</button>
+                    <button class="btn btn-primary" id="nextBtn">Next</button>
+                </div>
+            </div>
+        </div>
+        <script>
+            console.log("[Dashboard] Script starting...");
+            let allWorkflows = [], codeIndex = {workflows: [], tools: []}, selectedWorkflow = null;
+            let currentObservations = [], selectedObservationIndex = -1;
+            let rerunHistory = new Map();
+            let rerunInFlight = new Set();
+            let step4SelectedRun = -1;
+            let step5RunTraces = [];
+            let repoRoot = ''; // Will be fetched from API
+            try {
+                const _saved = localStorage.getItem('ed_step5RunTraces');
+                if (_saved) step5RunTraces = JSON.parse(_saved);
+            } catch {}
+            let step5RunMeta = { loading: false, error: '', runCount: 0, sequential: false };
+            let step5RerunInFlight = false;
+
+            function computeDurationMs(obs) {
+                if (obs.durationMs != null) return obs.durationMs;
+                if (obs.latency != null && obs.latency > 0) return Math.round(obs.latency * 1000);
+                if (obs.startTime && obs.endTime) {
+                    const diff = new Date(obs.endTime).getTime() - new Date(obs.startTime).getTime();
+                    if (Number.isFinite(diff) && diff >= 0) return diff;
+                }
+                if (obs.latency != null) return 0;
+                return null;
+            }
+
+            function formatDuration(ms) {
+                if (ms == null) return '—';
+                if (ms < 1000) return ms + ' ms';
+                return (ms / 1000).toFixed(2) + ' s';
+            }
+
+            function extractUsage(obs) {
+                if (obs && (obs.usage && (obs.usage.inputTokens != null || obs.usage.outputTokens != null))) {
+                    return obs.usage;
+                }
+                if (obs && (obs.usageDetails && (obs.usageDetails.input != null || obs.usageDetails.output != null))) {
+                    return { inputTokens: obs.usageDetails.input, outputTokens: obs.usageDetails.output, totalTokens: obs.usageDetails.total };
+                }
+                if (obs && (obs.inputUsage != null || obs.outputUsage != null)) {
+                    return { inputTokens: obs.inputUsage, outputTokens: obs.outputUsage, totalTokens: obs.totalUsage };
+                }
+                return null;
+            }
+
+            function renderUsage(obs) {
+                const u = extractUsage(obs);
+                if (!u || !(u.inputTokens > 0 || u.outputTokens > 0 || u.totalTokens > 0)) return '';
+                const lines = [];
+                if (u.inputTokens  != null) lines.push('Input tokens:  ' + u.inputTokens);
+                if (u.outputTokens != null) lines.push('Output tokens: ' + u.outputTokens);
+                if (u.totalTokens  != null) lines.push('Total tokens:  ' + u.totalTokens);
+                if (!lines.length) return '';
+                return \`<div class="detail-section"><div class="detail-title">Usage</div><pre class="detail-pre">\${lines.join('\\n')}</pre></div>\`;
+            }
+
+            function persistTraces() {
+                try {
+                    // Store compact version — strip bulky workflowTrace.events (snapshot is on server)
+                    const compact = step5RunTraces.map(function(t) {
+                        const { workflowTrace, ...rest } = t;
+                        return rest;
+                    });
+                    localStorage.setItem('ed_step5RunTraces', JSON.stringify(compact));
+                } catch {}
+            }
+            const tbody = document.getElementById("workflowsTableBody");
+            const countEl = document.getElementById("resultCount");
+            const modal = document.getElementById("traceModal");
+            const uploadArea = document.getElementById("uploadArea");
+            const fileInput = document.getElementById("traceFile");
+            const modalFooter = document.getElementById("modalFooter");
+            const uploadStatus = document.getElementById("uploadStatus");
+            const traceViewer = document.getElementById("traceViewer");
+            let observationTableBody = document.getElementById("observationTableBody");
+            let observationDetail = document.getElementById("observationDetail");
+            const modalTitle = document.querySelector(".modal-title");
+            console.log("[Dashboard] DOM elements loaded, tbody:", tbody);
+            
+            let currentStep = 0; // 0=upload, 3=mark, 4=verify, 5=validate
+            let checkedObservations = new Set();
+            
+            document.getElementById("closeModal").onclick = () => {
+                modal.classList.remove("open");
+                resetTraceModal();
+            };
+            modal.onclick = (e) => {
+                if (e.target === modal) {
+                modal.classList.remove("open");
+                resetTraceModal();
+                }
+            };
+            
+            document.getElementById("changeTraceBtn").onclick = () => {
+            if (currentStep === 3) {
+                resetTraceModal();
+            } else if (currentStep === 4) {
+                // Go back to Step 3
+                currentStep = 3;
+                checkedObservations.clear();  // Clear to allow reselecting different steps
+                updateModalTitle();
+                updateFooterButtons();
+                renderObservationTable();
+                // Auto-select first observation
+                if (currentObservations.length > 0) {
+                    selectObservation(0);
+                }
+            } else if (currentStep === 5) {
+                // Go back to Step 3 (Still Failing)
+                currentStep = 3;
+                checkedObservations.clear();  // Clear to allow reselecting different steps
+                updateModalTitle();
+                updateFooterButtons();
+                renderObservationTable();
+                // Auto-select first observation
+                if (currentObservations.length > 0) {
+                    selectObservation(0);
+                }
+            }
+            };
+            
+            document.getElementById("nextBtn").onclick = () => {
+            if (currentStep < 3) {
+                alert("Please upload a trace file to continue");
+                return;
+            }
+            if (currentStep === 3) {
+                // Validate that at least one checkbox is checked
+                if (checkedObservations.size === 0) {
+                alert("Please select at least one step to mark as broken");
+                return;
+                }
+                // Move to Step 4
+                currentStep = 4;
+                updateModalTitle();
+                updateFooterButtons();
+                renderObservationTable();
+                // Auto-select first checked observation
+                const checkedArray = Array.from(checkedObservations);
+                if (checkedArray.length > 0) {
+                    window.step4SelectObservation(checkedArray[0]);
+                }
+            } else if (currentStep === 4) {
+                // Show prompt-update confirmation (if needed), then live validation dialog
+                window.openPromptConfirmation(() => window.openLiveValidationDialog());
+                return;
+            } else if (currentStep === 5) {
+                modal.classList.remove("open");
+                resetTraceModal();
+                customFooter.remove();
+            }
+            };
+            
+            // ---- Tool Mock Config State ----
+            window._toolMockConfig = {}; // { toolName: { mode: 'live'|'mock-all'|'mock-specific', callIndices: [], mockData: {} } }
+
+            // ---- Prompt Mock Config State ----
+            // { [originalSystemPrompt]: { mode, replacement, callIndices? } }
+            window._promptMockConfig = {};
+
+            function getToolsFromTrace() {
+                // Extract unique tool names and their call details from the uploaded trace observations
+                const toolCalls = {};
+                currentObservations.forEach(function(obs, i) {
+                    const isToolByType = obs.type === 'TOOL';
+                    const isToolByName = typeof obs.name === 'string' && (obs.name.startsWith('tool-') || obs.name.startsWith('tool:'));
+                    if (!isToolByType && !isToolByName) return;
+                    const name = isToolByName && obs.type !== 'TOOL'
+                        ? obs.name.slice(5)
+                        : (obs.name || '(unknown)');
+                    if (!toolCalls[name]) toolCalls[name] = [];
+                    toolCalls[name].push({ index: toolCalls[name].length + 1, obsIndex: i, input: obs.input, output: obs.output });
+                });
+                return toolCalls;
+            }
+
+            function getAllRegisteredTools() {
+                // From codeIndex.tools (fetched at page load from /api/code-index)
+                return (codeIndex.tools || []).map(function(t) { return t.name; });
+            }
+
+            function buildToolMockConfigFromUI() {
+                const config = {};
+                const rows = document.querySelectorAll('.tool-mock-row');
+                rows.forEach(function(row) {
+                    const toolName = row.dataset.toolName;
+                    const modeSelect = row.querySelector('.tool-mock-mode');
+                    const mode = modeSelect ? modeSelect.value : 'live';
+                    if (mode === 'live') return;
+                    const entry = { mode: mode };
+                    if (mode === 'mock-specific') {
+                        const checkboxes = row.querySelectorAll('.tool-call-checkbox:checked');
+                        entry.callIndices = Array.from(checkboxes).map(function(cb) { return parseInt(cb.value, 10); });
+                        if (entry.callIndices.length === 0) return; // No calls selected, treat as live
+                    }
+                    // Collect mock data
+                    entry.mockData = {};
+                    const dataInputs = row.querySelectorAll('.tool-mock-data-input');
+                    dataInputs.forEach(function(inp) {
+                        const callIdx = parseInt(inp.dataset.callIdx, 10);
+                        if (!inp.value.trim()) return;
+                        try { entry.mockData[callIdx] = JSON.parse(inp.value); }
+                        catch(e) { entry.mockData[callIdx] = inp.value; }
+                    });
+                    config[toolName] = entry;
+                });
+                return config;
+            }
+
+            function cleanValue(value) {
+                if (typeof value === "string") {
+                    value = value.replaceAll('\\\\"', '');
+                    // remove surrounding quotes if they exist
+                    if (value.startsWith('"') && value.endsWith('"')) {
+                        return value.slice(1, -1);
+                    }
+                    return value;
+                }
+
+                if (Array.isArray(value)) {
+                    return value.map(cleanValue);
+                }
+
+                if (typeof value === "object" && value !== null) {
+                    const result = {};
+                    for (const key in value) {
+                    result[key] = cleanValue(value[key]);
+                    }
+                    return result;
+                }
+
+                return value;
+            }
+
+            function convert(input) {
+                const parsed = JSON.parse(input);
+                return cleanValue(parsed);
+            }
+
+            function renderToolMockSection(showAll) {
+                const traceTools = getToolsFromTrace();
+                const allToolNames = getAllRegisteredTools();
+                const traceToolNames = Object.keys(traceTools);
+                const toolNames = showAll
+                    ? Array.from(new Set([...traceToolNames, ...allToolNames]))
+                    : traceToolNames;
+
+                if (toolNames.length === 0) {
+                    return '<div style="color:#999;font-size:13px;padding:6px 0;">No tools detected.</div>';
+                }
+
+                let html = '<div style="border:1px solid #e0e0e0;border-radius:6px;height:100%;display:flex;flex-direction:column;overflow:hidden;">';
+                html += '<table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;">';
+                html += '<thead><tr style="background:#f5f5f5;">';
+                html += '<th style="width:30%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Tool</th>';
+                html += '<th style="width:15%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Calls</th>';
+                html += '<th style="width:20%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Mode</th>';
+                html += '<th style="width:35%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Details</th>';
+                html += '</tr></thead></table>';
+                html += '<div style="flex:1;overflow-y:auto;"><table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;"><tbody>';
+
+                toolNames.forEach(function(name) {
+                    const calls = traceTools[name] || [];
+                    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="width:30%;padding:6px 10px;font-family:Monaco,monospace;overflow:hidden;text-overflow:ellipsis;' + nameStyle + '">' + esc(name) + (inTrace ? '' : ' <span style="font-size:10px;color:#aaa;">(not in trace)</span>') + '</td>';
+                    html += '<td style="width:15%;padding:6px 10px;">' + calls.length + '</td>';
+                    html += '<td style="width:20%;padding:6px 10px;">';
+                    html += '<select class="tool-mock-mode" style="font-size:12px;padding:2px 4px;width: 100%;" onchange="window.onToolMockModeChange(\\'' + esc(name) + '\\', this.value)">';
+                    html += '<option value="live"' + (existing.mode === 'live' ? ' selected' : '') + '>Live</option>';
+                    html += '<option value="mock-all"' + (existing.mode === 'mock-all' ? ' selected' : '') + '>Mock All Calls</option>';
+                    if (calls.length > 0) {
+                        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="width:35%;padding:6px 10px;">';
+                    if (existing.mode === 'mock-all') {
+                        let defaultData = (existing.mockData && existing.mockData[0] !== undefined) ? JSON.stringify(existing.mockData[0]) : (calls.length > 0 ? JSON.stringify(calls[0].output) : '');
+                        defaultData = convert(defaultData);
+                        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></div>';
+                return html;
+            }
+
+            // ---- Prompt Mock Helpers ----
+
+            /** Extract the system prompt string from an LLM call input object or JSON string. */
+            function extractSystemPromptFromInput(input) {
+                // Input may arrive as a JSON-encoded string (e.g. from Langfuse traces).
+                // Unwrap until we get a non-string value.
+                while (typeof input === 'string') {
+                    try { input = JSON.parse(input); } catch(e) { break; }
+                }
+                if (!input || typeof input !== 'object') return null;
+                // Anthropic style: { system: "...", messages: [...] }
+                if (typeof input.system === 'string') return input.system;
+                // Custom wrapAI callers: { systemPrompt: "...", messages: [...] }
+                if (typeof input.systemPrompt === 'string' && input.systemPrompt.length > 0) return input.systemPrompt;
+                // OpenAI / plain array: messages with role === "system"
+                var msgs = Array.isArray(input.messages) ? input.messages : (Array.isArray(input) ? input : null);
+                if (msgs) {
+                    for (var i = 0; i < msgs.length; i++) {
+                        var m = msgs[i];
+                        if (m && typeof m === 'object' && m.role === 'system' && typeof m.content === 'string') {
+                            return m.content;
+                        }
+                    }
+                }
+                return null;
+            }
+
+            /**
+             * Returns an array of unique system prompts observed across all GENERATION observations.
+             * Each entry: { systemPrompt, modelName, calls: [{obsIndex, callNumber}], count, rowIndex }
+             * callNumber is the 1-indexed occurrence of this prompt across GENERATION observations.
+             */
+            function getSystemPromptsFromTrace() {
+                var seen = []; // [{ systemPrompt, modelName, calls, count }]
+                var seenMap = {}; // systemPrompt -> index in seen
+                var callCounters = {}; // systemPrompt -> running count
+                currentObservations.forEach(function(obs, obsIndex) {
+                    if (obs.type !== 'GENERATION') return;
+                    var sp = extractSystemPromptFromInput(obs.input);
+                    if (!sp) return;
+                    callCounters[sp] = (callCounters[sp] || 0) + 1;
+                    var callNumber = callCounters[sp];
+                    if (seenMap[sp] === undefined) {
+                        seenMap[sp] = seen.length;
+                        seen.push({ systemPrompt: sp, modelName: obs.model || obs.name || '(unknown)', calls: [], count: 0 });
+                    }
+                    seen[seenMap[sp]].calls.push({ obsIndex: obsIndex, callNumber: callNumber });
+                    seen[seenMap[sp]].count++;
+                });
+                return seen.map(function(e, i) { return Object.assign({}, e, { rowIndex: i }); });
+            }
+
+            function renderPromptMockSection() {
+                const prompts = getSystemPromptsFromTrace();
+                if (prompts.length === 0) {
+                    return '<div style="color:#999;font-size:13px;padding:6px 0;">No system prompts detected in trace. Only AI calls with a system prompt can be mocked here.</div>';
+                }
+
+                let html = '<div style="border:1px solid #e0e0e0;border-radius:6px;height:100%;display:flex;flex-direction:column;overflow:hidden;">';
+                html += '<table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;">';
+                html += '<thead><tr style="background:#f5f5f5;">';
+                html += '<th style="width:25%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">System Prompt</th>';
+                html += '<th style="width:10%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Calls</th>';
+                html += '<th style="width:20%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Mode</th>';
+                html += '<th style="width:45%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Replacement</th>';
+                html += '</tr></thead></table>';
+                html += '<div style="flex:1;overflow-y:auto;"><table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;"><tbody>';
+
+                prompts.forEach(function(row) {
+                    const key = row.systemPrompt;
+                    const existing = window._promptMockConfig[key] || { mode: 'live', replacement: '' };
+                    const preview = key.length > 60 ? key.slice(0, 60) + '…' : key;
+
+                    html += '<tr class="prompt-mock-row" data-row-index="' + row.rowIndex + '" style="border-bottom:1px solid #f0f0f0;vertical-align:top;">';
+
+                    // System prompt preview column
+                    html += '<td style="width:25%;padding:6px 10px;overflow:hidden;text-overflow:ellipsis;"><div style="font-size:11px;color:#555;font-family:Monaco,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + esc(key) + '">' + esc(preview) + '</div></td>';
+
+                    // Calls count column
+                    html += '<td style="width:10%;padding:6px 10px;color:#555;white-space:nowrap;">' + row.count + 'x</td>';
+
+                    // Mode column
+                    html += '<td style="width:20%;padding:6px 10px;white-space:nowrap;">';
+                    html += '<select class="prompt-mock-mode" style="font-size:12px;padding:2px 4px;width: 100%;" onchange="window.onSystemPromptMockModeChange(' + row.rowIndex + ', this.value)">';
+                    html += '<option value="live"' + (existing.mode === 'live' ? ' selected' : '') + '>Live</option>';
+                    html += '<option value="replace-all"' + (existing.mode === 'replace-all' ? ' selected' : '') + '>Replace All</option>';
+                    if (row.count > 1) {
+                        html += '<option value="replace-specific"' + (existing.mode === 'replace-specific' ? ' selected' : '') + '>Replace Specific</option>';
+                    }
+                    html += '</select>';
+                    html += '</td>';
+
+                    // Replacement column
+                    html += '<td style="width:45%;padding:6px 10px;">';
+                    if (existing.mode === 'replace-all') {
+                        html += '<textarea class="prompt-mock-input" data-row-index="' + row.rowIndex + '" style="width:100%;box-sizing:border-box;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:48px;resize:vertical;" oninput="window.onPromptMockInput(' + row.rowIndex + ', this.value)">' + esc(existing.replacement || key) + '</textarea>';
+                    } else if (existing.mode === 'replace-specific') {
+                        html += '<div style="font-size:11px;color:#555;margin-bottom:4px;">Select calls to replace:</div>';
+                        row.calls.forEach(function(call) {
+                            const isChecked = existing.callIndices && existing.callIndices.indexOf(call.callNumber) !== -1;
+                            html += '<div style="margin-bottom:4px;padding:4px;background:#fafafa;border-radius:4px;border:1px solid #eee;">';
+                            html += '<label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">';
+                            html += '<input type="checkbox" class="prompt-call-checkbox" value="' + call.callNumber + '"' + (isChecked ? ' checked' : '') + ' onchange="window.onSystemPromptCallCheckChange(' + row.rowIndex + ',' + call.callNumber + ',this.checked)">';
+                            html += '<span>Call #' + call.callNumber + '</span>';
+                            html += '</label>';
+                            html += '</div>';
+                        });
+                        html += '<textarea class="prompt-mock-input" data-row-index="' + row.rowIndex + '" style="width:100%;box-sizing:border-box;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:48px;resize:vertical;margin-top:4px;" oninput="window.onPromptMockInput(' + row.rowIndex + ', this.value)">' + esc(existing.replacement || key) + '</textarea>';
+                    } else {
+                        html += '<span style="color:#aaa;font-size:11px;">—</span>';
+                    }
+                    html += '</td>';
+
+                    html += '</tr>';
+                });
+
+                html += '</tbody></table></div></div>';
+                return html;
+            }
+
+            function buildPromptMockConfigFromUI() {
+                const config = {};
+                Object.keys(window._promptMockConfig).forEach(function(key) {
+                    const entry = window._promptMockConfig[key];
+                    if (!entry || entry.mode === 'live') return;
+                    config[key] = { mode: entry.mode, replacement: entry.replacement || '' };
+                    if (entry.mode === 'replace-specific' && entry.callIndices) {
+                        config[key].callIndices = entry.callIndices;
+                    }
+                });
+                return config;
+            }
+
+            window.onSystemPromptMockModeChange = function(rowIndex, mode) {
+                const prompts = getSystemPromptsFromTrace();
+                const row = prompts[rowIndex];
+                if (!row) return;
+                const key = row.systemPrompt;
+                if (mode === 'live') {
+                    delete window._promptMockConfig[key];
+                } else {
+                    if (!window._promptMockConfig[key]) {
+                        window._promptMockConfig[key] = { mode: mode, replacement: row.systemPrompt };
+                    } else {
+                        window._promptMockConfig[key].mode = mode;
+                    }
+                    if (mode === 'replace-specific' && !window._promptMockConfig[key].callIndices) {
+                        window._promptMockConfig[key].callIndices = [];
+                    }
+                }
+                const container = document.getElementById('promptMockContainer');
+                if (container) container.innerHTML = renderPromptMockSection();
+            };
+
+            window.onSystemPromptCallCheckChange = function(rowIndex, callNumber, checked) {
+                const prompts = getSystemPromptsFromTrace();
+                const row = prompts[rowIndex];
+                if (!row) return;
+                const key = row.systemPrompt;
+                if (!window._promptMockConfig[key]) return;
+                var indices = window._promptMockConfig[key].callIndices || [];
+                if (checked) {
+                    if (indices.indexOf(callNumber) === -1) indices.push(callNumber);
+                } else {
+                    var pos = indices.indexOf(callNumber);
+                    if (pos >= 0) indices.splice(pos, 1);
+                }
+                window._promptMockConfig[key].callIndices = indices;
+            };
+
+            window.switchMockTab = function(tabName) {
+                const tabs = {
+                    tool: document.getElementById('mockTabTool'),
+                    prompt: document.getElementById('mockTabPrompt'),
+                    userPrompt: document.getElementById('mockTabUserPrompt'),
+                };
+                const contents = {
+                    tool: document.getElementById('mockTabToolContent'),
+                    prompt: document.getElementById('mockTabPromptContent'),
+                    userPrompt: document.getElementById('mockTabUserPromptContent'),
+                };
+                const toolExtra = document.getElementById('mockTabToolExtra');
+                Object.keys(tabs).forEach(function(key) {
+                    const isActive = key === tabName;
+                    if (tabs[key]) { tabs[key].style.borderBottomColor = isActive ? '#4f46e5' : 'transparent'; tabs[key].style.color = isActive ? '#4f46e5' : '#888'; }
+                    if (contents[key]) contents[key].style.display = isActive ? '' : 'none';
+                });
+                if (toolExtra) toolExtra.style.display = tabName === 'tool' ? 'flex' : 'none';
+            };
+
+            window.onPromptMockInput = function(rowIndex, value) {
+                const prompts = getSystemPromptsFromTrace();
+                const row = prompts[rowIndex];
+                if (!row) return;
+                if (window._promptMockConfig[row.systemPrompt]) {
+                    window._promptMockConfig[row.systemPrompt].replacement = value;
+                }
+            };
+
+            window.onToolMockModeChange = function(toolName, mode) {
+                if (!window._toolMockConfig[toolName]) window._toolMockConfig[toolName] = { mode: 'live' };
+                // Save current mock data before switching
+                window._toolMockConfig[toolName] = { ...window._toolMockConfig[toolName], mode: mode };
+                if (mode === 'mock-specific' && !window._toolMockConfig[toolName].callIndices) {
+                    window._toolMockConfig[toolName].callIndices = [];
+                }
+                // Re-render tool mock section
+                const showAll = document.getElementById('showAllToolsToggle');
+                const container = document.getElementById('toolMockContainer');
+                if (container) container.innerHTML = renderToolMockSection(showAll && showAll.checked);
+            };
+
+            window.onToolCallCheckChange = function(toolName, callIdx, checked) {
+                if (!window._toolMockConfig[toolName]) window._toolMockConfig[toolName] = { mode: 'mock-specific', callIndices: [] };
+                const indices = window._toolMockConfig[toolName].callIndices || [];
+                if (checked && !indices.includes(callIdx)) {
+                    indices.push(callIdx);
+                } else if (!checked) {
+                    const pos = indices.indexOf(callIdx);
+                    if (pos >= 0) indices.splice(pos, 1);
+                }
+                window._toolMockConfig[toolName].callIndices = indices;
+                const showAll = document.getElementById('showAllToolsToggle');
+                const container = document.getElementById('toolMockContainer');
+                if (container) container.innerHTML = renderToolMockSection(showAll && showAll.checked);
+            };
+
+            // ---- User Prompt Mock Helpers ----
+
+            /** Extract all user-role message content strings from an LLM call input. */
+            function extractUserPromptsFromInput(input) {
+                // Unwrap JSON-encoded strings until we get a non-string value.
+                while (typeof input === 'string') {
+                    try { input = JSON.parse(input); } catch(e) { break; }
+                }
+                if (!input || typeof input !== 'object') return [];
+                var msgs = Array.isArray(input.messages) ? input.messages : (Array.isArray(input) ? input : null);
+                if (!msgs) return [];
+                var results = [];
+                for (var i = 0; i < msgs.length; i++) {
+                    var m = msgs[i];
+                    if (m && typeof m === 'object' && m.role === 'user' && typeof m.content === 'string') {
+                        results.push(m.content);
+                    }
+                }
+                return results;
+            }
+
+            /**
+             * Returns an array of unique user prompt texts observed across all GENERATION observations.
+             * Each entry: { userPrompt, modelName, calls: [{obsIndex, callNumber}], count, rowIndex }
+             * callNumber is the 1-indexed occurrence of this text across GENERATION observations.
+             */
+            function getUserPromptsFromTrace() {
+                var seen = []; // [{ userPrompt, modelName, calls, count }]
+                var seenMap = {}; // userPrompt -> index in seen
+                var callCounters = {}; // userPrompt -> running count
+                currentObservations.forEach(function(obs, obsIndex) {
+                    if (obs.type !== 'GENERATION') return;
+                    var prompts = extractUserPromptsFromInput(obs.input);
+                    var uniqueInCall = [];
+                    prompts.forEach(function(p) { if (uniqueInCall.indexOf(p) === -1) uniqueInCall.push(p); });
+                    uniqueInCall.forEach(function(p) {
+                        callCounters[p] = (callCounters[p] || 0) + 1;
+                        var callNumber = callCounters[p];
+                        if (seenMap[p] === undefined) {
+                            seenMap[p] = seen.length;
+                            seen.push({ userPrompt: p, modelName: obs.model || obs.name || '(unknown)', calls: [], count: 0 });
+                        }
+                        seen[seenMap[p]].calls.push({ obsIndex: obsIndex, callNumber: callNumber });
+                        seen[seenMap[p]].count++;
+                    });
+                });
+                return seen.map(function(e, i) { return Object.assign({}, e, { rowIndex: i }); });
+            }
+
+            function renderUserPromptMockSection() {
+                const prompts = getUserPromptsFromTrace();
+                if (prompts.length === 0) {
+                    return '<div style="color:#999;font-size:13px;padding:6px 0;">No user prompts detected in trace. Only AI calls with user-role messages can be mocked here.</div>';
+                }
+
+                let html = '<div style="border:1px solid #e0e0e0;border-radius:6px;height:100%;display:flex;flex-direction:column;overflow:hidden;">';
+                html += '<table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;">';
+                html += '<thead><tr style="background:#f5f5f5;">';
+                html += '<th style="width:30%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">User Prompt</th>';
+                html += '<th style="width:10%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Calls</th>';
+                html += '<th style="width:20%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Mode</th>';
+                html += '<th style="width:40%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Replacement</th>';
+                html += '</tr></thead></table>';
+                html += '<div style="flex:1;overflow-y:auto;"><table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;"><tbody>';
+
+                prompts.forEach(function(row) {
+                    const key = row.userPrompt;
+                    const existing = window._userPromptMockConfig[key] || { mode: 'live', replacement: '' };
+                    const preview = key.length > 60 ? key.slice(0, 60) + '…' : key;
+
+                    html += '<tr class="user-prompt-mock-row" data-row-index="' + row.rowIndex + '" style="border-bottom:1px solid #f0f0f0;vertical-align:top;">';
+
+                    // User prompt preview column
+                    html += '<td style="width:30%;padding:6px 10px;overflow:hidden;text-overflow:ellipsis;"><div style="font-size:11px;color:#555;font-family:Monaco,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + esc(key) + '">' + esc(preview) + '</div></td>';
+
+                    // Calls count column
+                    html += '<td style="width:10%;padding:6px 10px;color:#555;white-space:nowrap;">' + row.count + 'x</td>';
+
+                    // Mode column
+                    html += '<td style="width:20%;padding:6px 10px;white-space:nowrap;">';
+                    html += '<select class="user-prompt-mock-mode" style="font-size:12px;padding:2px 4px;width: 100%;" onchange="window.onUserPromptMockModeChange(' + row.rowIndex + ', this.value)">';
+                    html += '<option value="live"' + (existing.mode === 'live' ? ' selected' : '') + '>Live</option>';
+                    html += '<option value="replace-all"' + (existing.mode === 'replace-all' ? ' selected' : '') + '>Replace All</option>';
+                    if (row.count > 1) {
+                        html += '<option value="replace-specific"' + (existing.mode === 'replace-specific' ? ' selected' : '') + '>Replace Specific</option>';
+                    }
+                    html += '</select>';
+                    html += '</td>';
+
+                    // Replacement column
+                    html += '<td style="width:40%;padding:6px 10px;">';
+                    if (existing.mode === 'replace-all') {
+                        html += '<textarea class="user-prompt-mock-input" data-row-index="' + row.rowIndex + '" style="width:100%;box-sizing:border-box;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:48px;resize:vertical;" oninput="window.onUserPromptMockInput(' + row.rowIndex + ', this.value)">' + esc(existing.replacement || key) + '</textarea>';
+                    } else if (existing.mode === 'replace-specific') {
+                        html += '<div style="font-size:11px;color:#555;margin-bottom:4px;">Select calls to replace:</div>';
+                        row.calls.forEach(function(call) {
+                            const isChecked = existing.callIndices && existing.callIndices.indexOf(call.callNumber) !== -1;
+                            html += '<div style="margin-bottom:4px;padding:4px;background:#fafafa;border-radius:4px;border:1px solid #eee;">';
+                            html += '<label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">';
+                            html += '<input type="checkbox" class="user-prompt-call-checkbox" value="' + call.callNumber + '"' + (isChecked ? ' checked' : '') + ' onchange="window.onUserPromptCallCheckChange(' + row.rowIndex + ',' + call.callNumber + ',this.checked)">';
+                            html += '<span>Call #' + call.callNumber + '</span>';
+                            html += '</label>';
+                            html += '</div>';
+                        });
+                        html += '<textarea class="user-prompt-mock-input" data-row-index="' + row.rowIndex + '" style="width:100%;box-sizing:border-box;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:48px;resize:vertical;margin-top:4px;" oninput="window.onUserPromptMockInput(' + row.rowIndex + ', this.value)">' + esc(existing.replacement || key) + '</textarea>';
+                    } else {
+                        html += '<span style="color:#aaa;font-size:11px;">—</span>';
+                    }
+                    html += '</td>';
+
+                    html += '</tr>';
+                });
+
+                html += '</tbody></table></div></div>';
+                return html;
+            }
+
+            function buildUserPromptMockConfigFromUI() {
+                const config = {};
+                Object.keys(window._userPromptMockConfig).forEach(function(key) {
+                    const entry = window._userPromptMockConfig[key];
+                    if (!entry || entry.mode === 'live') return;
+                    config[key] = { mode: entry.mode, replacement: entry.replacement || '' };
+                    if (entry.mode === 'replace-specific' && entry.callIndices) {
+                        config[key].callIndices = entry.callIndices;
+                    }
+                });
+                return config;
+            }
+
+            window.onUserPromptMockModeChange = function(rowIndex, mode) {
+                const prompts = getUserPromptsFromTrace();
+                const row = prompts[rowIndex];
+                if (!row) return;
+                const key = row.userPrompt;
+                if (mode === 'live') {
+                    delete window._userPromptMockConfig[key];
+                } else {
+                    if (!window._userPromptMockConfig[key]) {
+                        window._userPromptMockConfig[key] = { mode: mode, replacement: row.userPrompt };
+                    } else {
+                        window._userPromptMockConfig[key].mode = mode;
+                    }
+                    if (mode === 'replace-specific' && !window._userPromptMockConfig[key].callIndices) {
+                        window._userPromptMockConfig[key].callIndices = [];
+                    }
+                }
+                const container = document.getElementById('userPromptMockContainer');
+                if (container) container.innerHTML = renderUserPromptMockSection();
+            };
+
+            window.onUserPromptMockInput = function(rowIndex, value) {
+                const prompts = getUserPromptsFromTrace();
+                const row = prompts[rowIndex];
+                if (!row) return;
+                if (window._userPromptMockConfig[row.userPrompt]) {
+                    window._userPromptMockConfig[row.userPrompt].replacement = value;
+                }
+            };
+
+            window.onUserPromptCallCheckChange = function(rowIndex, callNumber, checked) {
+                const prompts = getUserPromptsFromTrace();
+                const row = prompts[rowIndex];
+                if (!row) return;
+                const key = row.userPrompt;
+                if (!window._userPromptMockConfig[key]) return;
+                var indices = window._userPromptMockConfig[key].callIndices || [];
+                if (checked) {
+                    if (indices.indexOf(callNumber) === -1) indices.push(callNumber);
+                } else {
+                    var pos = indices.indexOf(callNumber);
+                    if (pos >= 0) indices.splice(pos, 1);
+                }
+                window._userPromptMockConfig[key].callIndices = indices;
+            };
+
+            window.openLiveValidationDialog = function() {
+                if (window.liveValidationDialog) return;
+                window._toolMockConfig = {};    // Reset mock configs each time dialog opens
+                window._promptMockConfig = {};
+                window._userPromptMockConfig = {};
+
+                const hasTraceTools = currentObservations.some(function(o) { return o.type === 'TOOL'; });
+                const hasRegisteredTools = codeIndex.tools && codeIndex.tools.length > 0;
+
+                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;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>
+                    <div style="border-top:1px solid #eee;padding-top:16px;margin-bottom:16px;">
+                        <div style="display:flex;align-items:center;gap:0;border-bottom:2px solid #e0e0e0;margin-bottom:0;">
+                            \${(hasTraceTools || hasRegisteredTools) ? \`<button id="mockTabTool" class="mock-tab-btn" onclick="window.switchMockTab('tool')" style="padding:8px 18px;font-size:14px;font-weight:600;border:none;background:none;cursor:pointer;border-bottom:2px solid #4f46e5;color:#4f46e5;margin-bottom:-2px;">Tool Mocking <span class="help-icon-wrap"><span class="help-icon">?</span><span class="help-tooltip">Control which tools use real calls vs mock data. &lsquo;Live&rsquo; runs the real tool, &lsquo;Mock All Calls&rsquo; returns mock data for every call, and &lsquo;Mock Specific Calls&rsquo; lets you pick which call indices to mock.</span></span></button>\` : ''}
+                            <button id="mockTabPrompt" class="mock-tab-btn" onclick="window.switchMockTab('prompt')" style="padding:8px 18px;font-size:14px;font-weight:600;border:none;background:none;cursor:pointer;border-bottom:2px solid \${(hasTraceTools || hasRegisteredTools) ? 'transparent' : '#4f46e5'};color:\${(hasTraceTools || hasRegisteredTools) ? '#888' : '#4f46e5'};margin-bottom:-2px;">System Prompt <span class="help-icon-wrap"><span class="help-icon">?</span><span class="help-tooltip">Override the system prompt for LLM calls. Check a row to enable editing &mdash; the replacement applies to all LLM calls that use that exact system prompt text.</span></span></button>
+                            <button id="mockTabUserPrompt" class="mock-tab-btn" onclick="window.switchMockTab('userPrompt')" style="padding:8px 18px;font-size:14px;font-weight:600;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;color:#888;margin-bottom:-2px;">User Prompt <span class="help-icon-wrap"><span class="help-icon">?</span><span class="help-tooltip">Override user-role messages in LLM calls. Each unique user message text is listed. Choose &lsquo;Replace All&rsquo; to replace it in every LLM call where it appears, or &lsquo;Replace Specific&rsquo; to only replace it in selected call occurrences.</span></span></button>
+                            <div id="mockTabToolExtra" style="margin-left:auto;display:flex;align-items:center;">
+                                \${(hasTraceTools || hasRegisteredTools) ? \`<label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
+                                    <input id="showAllToolsToggle" type="checkbox" onchange="document.getElementById('toolMockContainer').innerHTML = renderToolMockSection(this.checked);" />
+                                    Show all tools
+                                </label>\` : ''}
+                            </div>
+                        </div>
+                        <div style="height:300px;position:relative;">
+                            <div id="mockTabToolContent" style="height:100%;overflow:hidden;\${(hasTraceTools || hasRegisteredTools) ? '' : 'display:none;'}">
+                                <div id="toolMockContainer" style="height:100%;"></div>
+                            </div>
+                            <div id="mockTabPromptContent" style="height:100%;overflow:hidden;\${(hasTraceTools || hasRegisteredTools) ? 'display:none;' : ''}">
+                                <div id="promptMockContainer" style="height:100%;"></div>
+                            </div>
+                            <div id="mockTabUserPromptContent" style="height:100%;overflow:hidden;display:none;">
+                                <div id="userPromptMockContainer" style="height:100%;"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div style="display:flex;gap:12px;justify-content:space-between;align-items:center;">
+                        <span id="liveValidationProgress" style="font-size:14px;color:#555;"></span>
+                        <div style="display:flex;gap:12px;">
+                            <button id="cancelLiveValidation" class="btn btn-secondary">Cancel</button>
+                            <button id="submitLiveValidation" class="btn btn-primary">Validate</button>
+                        </div>
+                    </div>
+                    </div>
+                \`;
+                document.body.appendChild(window.liveValidationDialog);
+                // Render mock sections after DOM insertion
+                const toolMockContainer = document.getElementById('toolMockContainer');
+                if (toolMockContainer) {
+                    toolMockContainer.innerHTML = renderToolMockSection(false);
+                }
+                const promptMockContainer = document.getElementById('promptMockContainer');
+                if (promptMockContainer) {
+                    promptMockContainer.innerHTML = renderPromptMockSection();
+                }
+                const userPromptMockContainer = document.getElementById('userPromptMockContainer');
+                if (userPromptMockContainer) {
+                    userPromptMockContainer.innerHTML = renderUserPromptMockSection();
+                }
+                document.getElementById('cancelLiveValidation').onclick = function() {
+                    window.liveValidationDialog.remove();
+                    window.liveValidationDialog = null;
+                };
+                document.getElementById('submitLiveValidation').onclick = async function() {
+                    const count = parseInt(document.getElementById('liveValidationCount').value, 10);
+                    const sequential = document.getElementById('liveValidationSequential').checked;
+                    if (count >= 1) {
+                        // Build mock configs from UI state and persist for "Run from here"
+                        const toolMockConfig = buildToolMockConfigFromUI();
+                        window._toolMockConfig = toolMockConfig;
+                        const promptMockConfig = buildPromptMockConfigFromUI();
+                        window._promptMockConfig = promptMockConfig;
+                        const userPromptMockConfig = buildUserPromptMockConfigFromUI();
+                        window._userPromptMockConfig = userPromptMockConfig;
+                        const submitBtn = document.getElementById('submitLiveValidation');
+                        submitBtn.disabled = true;
+                        submitBtn.textContent = 'Validating...';
+                        const progressEl = document.getElementById('liveValidationProgress');
+
+                        function finishValidation(collectedTraces, errorMsg, usedSequential) {
+                            if (progressEl) progressEl.textContent = '';
+                            window.liveValidationDialog.remove();
+                            window.liveValidationDialog = null;
+                            window.liveValidationCount = count;
+                            window.liveValidationSequential = usedSequential;
+                            window.step5SelectedTrace = 0;
+                            window.step5SelectedObservation = 0;
+                            currentStep = 5;
+                            updateModalTitle();
+                            updateFooterButtons();
+                            if (errorMsg && collectedTraces.length === 0) {
+                                step5RunTraces = [];
+                                localStorage.removeItem('ed_step5RunTraces');
+                                step5RunMeta = { loading: false, error: errorMsg, runCount: count, sequential: usedSequential };
+                            } else {
+                                step5RunTraces = collectedTraces;
+                                persistTraces();
+                                step5RunMeta = { loading: false, error: '', runCount: collectedTraces.length, sequential: usedSequential };
+                            }
+                            if (window.step5SelectedTrace > step5RunTraces.length) window.step5SelectedTrace = 0;
+                            window.step5SelectedObservation = 0;
+                            renderObservationTable();
+                        }
+
+                        if (sequential) {
+                            // Sequential mode: fire one request per run so progress reflects real completion
+                            if (progressEl) progressEl.textContent = \`0 of \${count} workflow runs completed\`;
+                            const collectedTraces = [];
+                            let fatalError = null;
+                            for (let i = 0; i < count; i++) {
+                                const singlePayload = { workflowName: selectedWorkflow?.name, runCount: 1, sequential: false, observations: currentObservations, toolMockConfig, promptMockConfig, userPromptMockConfig };
+                                try {
+                                    const response = await fetch('/api/validate-workflow', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(singlePayload) });
+                                    const data = await response.json();
+                                    if (response.ok && data.ok && Array.isArray(data.traces) && data.traces.length > 0) {
+                                        collectedTraces.push({ ...data.traces[0], runNumber: i + 1 });
+                                    } else {
+                                        // Push an error trace so the run is still visible in Step 5
+                                        collectedTraces.push({ runNumber: i + 1, ok: false, error: data.error || 'Workflow validation failed.', observations: [], workflowTrace: null });
+                                    }
+                                } catch (err) {
+                                    collectedTraces.push({ runNumber: i + 1, ok: false, error: err && err.message ? err.message : String(err), observations: [], workflowTrace: null });
+                                }
+                                if (progressEl) progressEl.textContent = \`\${i + 1} of \${count} workflow runs completed\`;
+                            }
+                            finishValidation(collectedTraces, fatalError, true);
+                        } else {
+                            // Parallel mode: single bulk request
+                            if (progressEl) progressEl.textContent = \`Running \${count} workflow run\${count !== 1 ? 's' : ''} in parallel…\`;
+                            const payload = { workflowName: selectedWorkflow?.name, runCount: count, sequential: false, observations: currentObservations, toolMockConfig, promptMockConfig, userPromptMockConfig };
+                            try {
+                                const response = await fetch('/api/validate-workflow', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
+                                const data = await response.json();
+                                if (response.ok && data.ok) {
+                                    finishValidation(Array.isArray(data.traces) ? data.traces : [], null, false);
+                                } else {
+                                    finishValidation([], data.error || 'Workflow validation failed.', false);
+                                }
+                            } catch (err) {
+                                finishValidation([], err && err.message ? err.message : String(err), false);
+                            }
+                        }
+                    } else {
+                        document.getElementById('liveValidationCount').style.borderColor = 'red';
+                    }
+                };
+            };
+
+            window.openPromptConfirmation = function(onConfirm) {
+                const genObs = currentObservations
+                    .map((o, i) => ({ obs: o, idx: i }))
+                    .filter(({ obs, idx }) => obs.type === 'GENERATION' && checkedObservations.has(idx));
+                if (genObs.length === 0) { onConfirm(); return; }
+
+                const tableRows = genObs.map(({ obs, idx }) => {
+                    const preview = toDisplayText(obs.input, obs.type).replace(/\\s+/g, ' ').trim().slice(0, 50);
+                    const model = obs.model || '—';
+                    return \`<tr>
+                        <td style="padding:8px 10px;font-size:13px;color:#555;">\${idx + 1}</td>
+                        <td style="padding:8px 10px;font-size:13px;font-family:Monaco,monospace;">\${esc(obs.name || 'AI call')}</td>
+                        <td style="padding:8px 10px;font-size:12px;font-family:Monaco,monospace;color:#444;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">\${esc(preview)}\${preview.length === 50 ? '…' : ''}</td>
+                        <td style="padding:8px 10px;font-size:12px;font-family:Monaco,monospace;color:#555;">\${esc(model)}</td>
+                    </tr>\`;
+                }).join('');
+
+                const dlg = document.createElement('div');
+                dlg.style = 'position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;z-index:9998;';
+                dlg.innerHTML = \`
+                    <div style="background:white;padding:32px 28px;border-radius:12px;box-shadow:0 2px 24px #0003;min-width:640px;max-width:92vw;">
+                        <h3 style="margin-top:0;margin-bottom:8px;font-size:20px;">Have you updated your AI prompts?</h3>
+                        <p style="margin:0 0 18px;font-size:14px;color:#555;">The following AI generation steps were found in your trace. Make sure you have edited the prompts in Step 4 before validating with live data.</p>
+                        <div style="border:1px solid #e0e0e0;border-radius:6px;overflow:hidden;margin-bottom:24px;">
+                            <table style="width:100%;border-collapse:collapse;">
+                                <thead>
+                                    <tr style="background:#f5f5f5;">
+                                        <th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">#</th>
+                                        <th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">Name</th>
+                                        <th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">Input preview</th>
+                                        <th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">Model</th>
+                                    </tr>
+                                </thead>
+                                <tbody>\${tableRows}</tbody>
+                            </table>
+                        </div>
+                        <div style="display:flex;gap:12px;justify-content:flex-end;">
+                            <button id="cancelPromptConfirm" class="btn btn-secondary">Cancel</button>
+                            <button id="proceedPromptConfirm" class="btn btn-primary">Yes, Proceed</button>
+                        </div>
+                    </div>
+                \`;
+                document.body.appendChild(dlg);
+                dlg.querySelector('#cancelPromptConfirm').onclick = () => dlg.remove();
+                dlg.querySelector('#proceedPromptConfirm').onclick = () => { dlg.remove(); onConfirm(); };
+            };
+
+            uploadArea.onclick = () => fileInput.click();
+            
+            // Drag and drop handlers
+            uploadArea.ondragover = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                uploadArea.style.borderColor = '#0066cc';
+                uploadArea.style.background = '#f0f7ff';
+            };
+            
+            uploadArea.ondragleave = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                uploadArea.style.borderColor = '#ddd';
+                uploadArea.style.background = '#fafafa';
+            };
+            
+            uploadArea.ondrop = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                uploadArea.style.borderColor = '#ddd';
+                uploadArea.style.background = '#fafafa';
+                
+                const files = e.dataTransfer.files;
+                if (files.length === 0) return;
+                
+                const file = files[0];
+                // Check if it's a JSON file
+                if (!file.name.toLowerCase().endsWith('.json')) {
+                    uploadStatus.className = "upload-status error";
+                    uploadStatus.textContent = "Please drop a JSON file";
+                    return;
+                }
+                
+                handleFileUpload(file);
+            };
+            
+            fileInput.onchange = (e) => {
+                if (!e.target.files[0]) return;
+                const file = e.target.files[0];
+                // Always clear file input so same file can be uploaded again
+                fileInput.value = "";
+                handleFileUpload(file);
+            };
+            
+            function handleFileUpload(file) {
+                // Clear observations before loading new trace
+                resetTraceModal();
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    try {
+                        const data = JSON.parse(e.target.result);
+                        uploadStatus.className = "upload-status";
+                        uploadStatus.textContent = "";
+                        displayTrace(data);
+                    } catch (err) {
+                        uploadArea.classList.remove("hidden");
+                        traceViewer.classList.remove("visible");
+                        uploadStatus.className = "upload-status error";
+                        uploadStatus.textContent = "Invalid JSON";
+                    }
+                };
+                reader.readAsText(file);
+            }
+            
+            function displayTrace(data) {
+                let obs = [];
+                if (Array.isArray(data)) {
+                    obs = data.filter(o => 
+                        (o.type === "GENERATION" || o.type === "TOOL" || o.type === "SPAN") &&
+                        (o.input !== null && o.input !== undefined) &&
+                        (o.output !== null && o.output !== undefined)
+                    );
+                } else {
+                    const trace = data.trace || data;
+                    // Handle multiple formats: data.data, data.observations, trace.observations
+                    const rawObs = data.data || data.observations || trace.observations || [];
+                    obs = rawObs.filter(o => 
+                        (o.type === "GENERATION" || o.type === "TOOL" || o.type === "SPAN") &&
+                        (o.input !== null && o.input !== undefined) &&
+                        (o.output !== null && o.output !== undefined)
+                    );
+                }
+                // Sort by startTime ascending
+                obs = obs.sort((a, b) => {
+                    const timeA = new Date(a.startTime || 0).getTime();
+                    const timeB = new Date(b.startTime || 0).getTime();
+                    return timeA - timeB;
+                });
+                // Aggregate token usage onto the workflow container SPAN if it has none
+                if (selectedWorkflow?.name) {
+                    const containerIdx = obs.findIndex(
+                        o => o.type === 'SPAN' && o.name === selectedWorkflow.name
+                    );
+                    const _existingUsage = extractUsage(obs[containerIdx]);
+                    if (containerIdx >= 0 && (!_existingUsage || !(_existingUsage.totalTokens > 0))) {
+                        let inputTokens = 0, outputTokens = 0, totalTokens = 0;
+                        for (const o of obs) {
+                            if (o.type !== 'GENERATION') continue;
+                            const u = extractUsage(o);
+                            if (!u) continue;
+                            inputTokens  += u.inputTokens  ?? 0;
+                            outputTokens += u.outputTokens ?? 0;
+                            totalTokens  += u.totalTokens  ?? 0;
+                        }
+                        if (totalTokens > 0) {
+                            obs[containerIdx].usage = { inputTokens, outputTokens, totalTokens };
+                        }
+                    }
+                }
+                currentObservations = obs;
+                selectedObservationIndex = -1;
+                checkedObservations.clear();
+                observationDetail.innerHTML = "";
+                uploadArea.classList.add("hidden");
+                traceViewer.classList.add("visible");
+                currentStep = 3;
+                updateModalTitle();
+                updateFooterButtons();
+                renderObservationTable();
+                // Auto-select first observation
+                if (currentObservations.length > 0) {
+                    selectObservation(0);
+                }
+            }
+
+
+            function renderObservationTable() {
+                // Capture scroll positions for step 5 columns before rebuilding DOM
+                let _step5Col1Scroll = 0, _step5Col2Scroll = 0;
+                if (currentStep === 5) {
+                    const tls = document.querySelectorAll('.trace-left');
+                    _step5Col1Scroll = tls[0]?.querySelector('.observation-table-wrap')?.scrollTop ?? 0;
+                    _step5Col2Scroll = tls[1]?.querySelector('.observation-table-wrap')?.scrollTop ?? 0;
+                }
+                // For other steps, preserve scroll position of the first .observation-table-wrap
+                let obsTableWrap = document.querySelector('.observation-table-wrap');
+                let prevScrollTop = obsTableWrap ? obsTableWrap.scrollTop : null;
+                if (currentStep === 5) {
+                    // Initialize selections if not set
+                    if (window.step5SelectedTrace === undefined || window.step5SelectedTrace === null) {
+                        window.step5SelectedTrace = 0;
+                    }
+                    if (window.step5SelectedObservation === undefined || window.step5SelectedObservation === null) {
+                        window.step5SelectedObservation = 0;
+                    }
+                    // Step 5: Validate Updated Flow with Live Data
+                    // Render traceTable before observationsTable
+                    const traces = Array.isArray(step5RunTraces) ? step5RunTraces : [];
+                    const traceCount = traces.length + 1;
+                    document.getElementsByClassName("trace-layout")[0].classList.add("step-5");
+                    let traceTable = \`<div class="trace-section-title">Traces</div>
+                        <div class="observation-table-wrap">
+                        <table class="observation-table">
+                            <tbody>\`;
+                    for (let i = 0; i < traceCount; i++) {
+                        const isSelected = i === window.step5SelectedTrace;
+                        const run = i === 0 ? null : traces[i - 1];
+                        const status = run ? (run.ok ? ' ✓' : ' ✗') : '';
+                        const label = i === 0 ? "Original Trace" : \`\${run?.traceName ?? \`Trace-\${run?.runNumber ?? i}\`}\${status}\`;
+                        traceTable += \`<tr class="\${isSelected ? "selected" : ""}" onclick="window.step5SelectedTrace=\${i};window.step5SelectedObservation=0;renderObservationTable();"><td>\${label}</td></tr>\`;
+                    }
+                    traceTable += \`</tbody></table></div>\`;
+
+                    // Observations table for selected trace
+                    let observationsTable = "";
+                    let detailsSection = "";
+
+                    if (window.step5SelectedTrace > traces.length) {
+                        window.step5SelectedTrace = 0;
+                    }
+
+                    if (window.step5SelectedTrace === 0) {
+                        // Original Trace: show all currentObservations (same as step 3)
+                        const _rerunDisabled = step5RunMeta.loading || step5RerunInFlight;
+                        observationsTable += \`<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
+                            <div class="trace-section-title" style="margin-bottom:0">Observations</div>
+                            <button class="btn btn-primary" style="padding:4px 10px;font-size:12px;" onclick="rerunFullFlow(this)" \${_rerunDisabled ? 'disabled' : ''}>&#9654; Rerun</button>
+                        </div>
+                        <div class="observation-table-wrap">
+                            <table class="observation-table">
+                            <thead><tr><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
+                            <tbody>\`;
+                        observationsTable += currentObservations.map((obs, j) => {
+                            const isSelected = j === window.step5SelectedObservation;
+                            const name = obs.name || obs.id || ("Observation " + (j + 1));
+                            const type = obs.type || "UNKNOWN";
+                            const typeClass = type === "TOOL" ? "tool" : "ai";
+                            const agentBadge = obs.agentTaskIndex != null ? \`<span class="agent-task-badge">T\${obs.agentTaskIndex + 1}</span>\` : '';
+                            const rowClass = obs.agentTaskIndex != null ? 'agent-task-row' : '';
+                            return \`<tr class="\${isSelected ? "selected" : ""} \${rowClass}" onclick="window.step5SelectedObservation=\${j};renderObservationTable();"><td>\${esc(name)}\${agentBadge}</td><td><span class="obs-type \${typeClass}">\${esc(type)}</span></td><td style="color:#888;font-size:12px;">\${formatDuration(computeDurationMs(obs))}</td></tr>\`;
+                        }).join("");
+                        observationsTable += \`</tbody></table></div>\`;
+                        // Details for selected observation
+                        const selObs = currentObservations[window.step5SelectedObservation];
+                        if (selObs) {
+                        const inputText = toDisplayText(selObs.input, selObs.type);
+                        const outputText = toDisplayText(selObs.output, selObs.type);
+                        const detailId = 'step5-orig-' + window.step5SelectedObservation;
+                        const filePathHtml = selObs.type === "GENERATION"
+                            ? '<div class="file-path-placeholder"></div>'
+                            : renderFilePath(getObsFilePath(selObs));
+                        const _dur5orig = computeDurationMs(selObs);
+                        detailsSection = \`<div class="detail-sections" id="\${detailId}">
+                            \${filePathHtml}
+                            \${renderModel(selObs)}
+                            \${_dur5orig != null ? \`<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">\${formatDuration(_dur5orig)}</pre></div>\` : ''}
+                            \${renderUsage(selObs)}
+                            <div class="detail-section">
+                            <div class="detail-title">Input</div>
+                            <pre class="detail-pre">\${esc(inputText)}</pre>
+                            </div>
+                            <div class="detail-section">
+                            <div class="detail-title">Output</div>
+                            <pre class="detail-pre">\${esc(outputText)}</pre>
+                            </div>
+                        </div>\`;
+                        if (selObs.type === "GENERATION") setTimeout(() => resolveGenFilePath(selObs, detailId), 0);
+                        }
+                    } else {
+                        // Live traces: index 1 → traces[0], index 2 → traces[1], …
+                        const liveTrace = traces[window.step5SelectedTrace - 1];
+                        if (liveTrace) {
+                            const actions = Array.isArray(liveTrace.observations) ? liveTrace.observations : [];
+                            const traceIdx = window.step5SelectedTrace - 1;
+                            const _rerunDisabled2 = step5RunMeta.loading || step5RerunInFlight;
+                            observationsTable += \`<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
+                                <div class="trace-section-title" style="margin-bottom:0">Observations</div>
+                                <button class="btn btn-primary" style="padding:4px 10px;font-size:12px;" onclick="rerunFullFlow(this)" \${_rerunDisabled2 ? 'disabled' : ''}>&#9654; Rerun</button>
+                            </div>
+                                <div class="observation-table-wrap">
+                                <table class="observation-table">
+                                    <thead><tr><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
+                                    <tbody>\`;
+                            observationsTable += actions.map((action, j) => {
+                                const isSelected = j === window.step5SelectedObservation;
+                                const name = action.name || action.id || ("Observation " + (j + 1));
+                                const type = action.type || "UNKNOWN";
+                                const typeClass = type === "TOOL" ? "tool" : "ai";
+                                const agentBadge = action.agentTaskIndex != null ? \`<span class="agent-task-badge">T\${action.agentTaskIndex + 1}</span>\` : '';
+                                const frozenBadge = action.isFrozen ? '<span class="frozen-tag">Frozen</span>' : '';
+                                const rowClasses = [
+                                    isSelected ? 'selected' : '',
+                                    action.agentTaskIndex != null ? 'agent-task-row' : '',
+                                    action.isFrozen ? 'frozen-row' : '',
+                                ].filter(Boolean).join(' ');
+                                return \`<tr class="\${rowClasses}" onclick="window.step5SelectedObservation=\${j};renderObservationTable();"><td>\${esc(name)}\${agentBadge}\${frozenBadge}</td><td><span class="obs-type \${typeClass}">\${esc(type)}</span></td><td style="color:#888;font-size:12px;">\${formatDuration(computeDurationMs(action))}</td></tr>\`;
+                            }).join("");
+                            observationsTable += \`</tbody></table></div>\`;
+                            // Details for selected observation
+                            if (actions[window.step5SelectedObservation]) {
+                                const obs = actions[window.step5SelectedObservation];
+                                const inputText = toDisplayText(obs.input, obs.type);
+                                const outputText = toDisplayText(obs.output, obs.type);
+                                const detailId = 'step5-live-' + (window.step5SelectedTrace - 1) + '-' + window.step5SelectedObservation;
+                                const filePathHtml = obs.type === "GENERATION"
+                                ? '<div class="file-path-placeholder"></div>'
+                                : renderFilePath(getObsFilePath(obs));
+                                
+                                // For the first observation (workflow output), show Original Output for comparison
+                                let originalOutputSection = '';
+                                if (window.step5SelectedObservation === 0 && currentObservations[0]) {
+                                    const originalOutputText = toDisplayText(currentObservations[0].output, currentObservations[0].type);
+                                    originalOutputSection = \`<div class="detail-section">
+                                        <div class="detail-title">Original Output</div>
+                                        <pre class="detail-pre">\${esc(originalOutputText)}</pre>
+                                    </div>\`;
+                                }
+                                
+                                // Agent steps: always show "Resume from Task X" button
+                                // Non-agent steps: show "Run from here" only if they have workflowEventId (HTTP/DB events)
+                                // Steps without agentTaskIndex and without workflowEventId get no button
+                                let runFromBpHtml = '';
+                                if (obs.agentTaskIndex != null) {
+                                    runFromBpHtml = \`<div class="detail-section" style="padding:8px 12px;"><button class="resume-agent-btn" onclick="resumeAgentFromTask(\${traceIdx},\${window.step5SelectedObservation},\${obs.agentTaskIndex},event)">&#9654; Resume from Task \${obs.agentTaskIndex + 1}</button></div>\`;
+                                } else if (obs.workflowEventId != null) {
+                                    runFromBpHtml = \`<div class="detail-section" style="padding:8px 12px;"><button class="run-from-bp-btn" onclick="runFromBreakpoint(\${traceIdx},\${window.step5SelectedObservation},event)">&#9654; Run from here</button></div>\`;
+                                }
+                                const _dur5live = computeDurationMs(obs);
+                                detailsSection = \`<div class="detail-sections" id="\${detailId}">
+                                \${filePathHtml}
+                                \${runFromBpHtml}
+                                \${renderModel(obs)}
+                                \${_dur5live != null ? \`<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">\${formatDuration(_dur5live)}</pre></div>\` : ''}
+                                \${renderUsage(obs)}
+                                <div class="detail-section">
+                                    <div class="detail-title">Input</div>
+                                    <pre class="detail-pre">\${esc(inputText)}</pre>
+                                </div>
+                                \${originalOutputSection}
+                                <div class="detail-section">
+                                    <div class="detail-title">Output</div>
+                                    <pre class="detail-pre">\${esc(outputText)}</pre>
+                                </div>
+                                </div>\`;
+                                if (obs.type === "GENERATION") setTimeout(() => resolveGenFilePath(obs, detailId), 0);
+                            }
+                        }
+                    }
+
+                    if (step5RunMeta.loading) {
+                        detailsSection = \`<div class="detail-sections">
+                            <div class="detail-section">
+                                <div class="detail-title">Validation</div>
+                                <pre class="detail-pre">Running \${step5RunMeta.runCount || 1} workflow run(s) in \${step5RunMeta.sequential ? 'sequence' : 'parallel'} mode...</pre>
+                            </div>
+                        </div>\`;
+                    } else if (step5RunMeta.error && !detailsSection) {
+                        detailsSection = \`<div class="detail-sections">
+                            <div class="detail-section">
+                                <div class="detail-title">Validation Error</div>
+                                <pre class="detail-pre">\${esc(step5RunMeta.error)}</pre>
+                            </div>
+                        </div>\`;
+                    }
+
+                    // Render 3 sibling columns inside the CSS grid
+                    const traceLayout = document.getElementsByClassName("trace-layout")[0];
+                    traceLayout.innerHTML = \`
+                        <div class="trace-left">\${traceTable}</div>
+                        <div class="trace-left">\${observationsTable || '<div class="trace-section-title">Observations</div>'}</div>
+                        <div class="trace-right">\${detailsSection}</div>
+                    \`;
+                    // Restore scroll positions after DOM rebuild
+                    const _newTls = traceLayout.querySelectorAll('.trace-left');
+                    const _w1 = _newTls[0]?.querySelector('.observation-table-wrap');
+                    const _w2 = _newTls[1]?.querySelector('.observation-table-wrap');
+                    if (_w1) _w1.scrollTop = _step5Col1Scroll;
+                    if (_w2) _w2.scrollTop = _step5Col2Scroll;
+                    return;
+                }
+
+                if (currentStep === 4) {
+                    const traceLayout = document.getElementsByClassName("trace-layout")[0];
+                    traceLayout.classList.remove("step-5");
+                    traceLayout.classList.add("step-4");
+                    const obsIndices = Array.from(checkedObservations);
+
+                    // Column 1: Steps (observation list)
+                    let col1 = \`<div class="trace-section-title">Steps</div>
+                        <div class="observation-table-wrap">
+                        <table class="observation-table">
+                        <thead><tr><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
+                        <tbody>\`;
+                    col1 += obsIndices.map(idx => {
+                        const obs = currentObservations[idx];
+                        const isSelected = idx === selectedObservationIndex;
+                        const name = obs.name || obs.id || ('Observation ' + (idx + 1));
+                        const type = obs.type || 'UNKNOWN';
+                        const typeClass = type === 'TOOL' ? 'tool' : 'ai';
+                        const history = rerunHistory.get(idx) || [];
+                        const latest = history[history.length - 1];
+                        const badge = latest
+                            ? (latest.running ? ' <span class="rerun-status running">⟳</span>'
+                                : latest.ok ? ' <span class="rerun-status success">✓</span>'
+                                : ' <span class="rerun-status error">✗</span>')
+                            : '';
+                        return \`<tr class="\${isSelected ? 'selected' : ''}" onclick="window.step4SelectObservation(\${idx})"><td>\${esc(name)}\${badge}</td><td><span class="obs-type \${typeClass}">\${esc(type)}</span></td><td style="color:#888;font-size:12px;">\${formatDuration(computeDurationMs(obs))}</td></tr>\`;
+                    }).join('');
+                    col1 += \`</tbody></table></div>\`;
+
+                    // Column 2: Runs for the selected observation
+                    const inFlight = selectedObservationIndex >= 0 && rerunInFlight.has(selectedObservationIndex);
+                    let col2 = \`<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
+                        <div class="trace-section-title" style="margin-bottom:0">Runs</div>
+                        \${selectedObservationIndex >= 0 ? \`<button class="btn btn-primary" style="padding:4px 12px;font-size:12px;" onclick="rerunObservation(\${selectedObservationIndex})" \${inFlight ? 'disabled' : ''}>\${inFlight ? 'Running...' : 'Rerun'}</button>\` : ''}
+                    </div>\`;
+                    if (selectedObservationIndex >= 0) {
+                        const history = rerunHistory.get(selectedObservationIndex) || [];
+                        if (history.length === 0) {
+                            col2 += \`<div style="color:#999;font-size:13px;padding:8px;">No runs yet. Click Rerun to start.</div>\`;
+                        } else {
+                            col2 += \`<div class="observation-table-wrap"><table class="observation-table"><thead><tr><th>Run</th><th>Status</th></tr></thead><tbody>\`;
+                            col2 += history.map((run, ri) => {
+                                const isSelRun = ri === step4SelectedRun;
+                                const status = run.running ? '⟳ Running' : (run.ok ? '✓ Complete' : '✗ Failed');
+                                return \`<tr class="\${isSelRun ? 'selected' : ''}" onclick="window.step4SelectRun(\${ri})"><td>Run \${run.runNumber}</td><td>\${status}</td></tr>\`;
+                            }).join('');
+                            col2 += \`</tbody></table></div>\`;
+                        }
+                    } else {
+                        col2 += \`<div style="color:#999;font-size:13px;padding:8px;">Select a step to view runs.</div>\`;
+                    }
+
+                    // Column 3: Details for the selected run
+                    let col3 = '';
+                    if (selectedObservationIndex >= 0) {
+                        const obs = currentObservations[selectedObservationIndex];
+                        const history = rerunHistory.get(selectedObservationIndex) || [];
+                        const run = step4SelectedRun >= 0 ? history[step4SelectedRun] : null;
+                        const inputText = toDisplayText(obs.input, obs.type);
+                        const outputText = toDisplayText(obs.output, obs.type);
+                        const detailId = 'step4-detail-' + selectedObservationIndex + '-' + step4SelectedRun;
+                        const filePathHtml = obs.type === "GENERATION"
+                            ? '<div class="file-path-placeholder"></div>'
+                            : renderFilePath(getObsFilePath(obs));
+                        let currentOutputSection = '';
+                        if (run) {
+                            if (run.running) {
+                                currentOutputSection = \`<div class="detail-section"><div class="detail-title">Current Output</div><pre class="detail-pre">Running...</pre></div>\`;
+                            } else if (run.ok) {
+                                currentOutputSection = \`<div class="detail-section"><div class="detail-title">Current Output</div><pre class="detail-pre">\${esc(toDisplayText(run.output, obs.type))}</pre></div>\`;
+                            } else {
+                                currentOutputSection = \`<div class="detail-section"><div class="detail-title">Current Output</div><pre class="detail-pre">Rerun failed: \${esc(run.error || 'Unknown error')}</pre></div>\`;
+                            }
+                        }
+                        // Editable AI input UI
+                        let inputSection = '';
+                        if (obs.type === "GENERATION") {
+                            const hasUpdate = updatedInputs.has(selectedObservationIndex);
+                            inputSection += \`<div class="detail-section">
+                                <div class="detail-title">Input</div>
+                                <pre class="detail-pre" style="position:relative;">\${esc(toDisplayText(obs.input, obs.type))}
+                                    <button class="btn btn-secondary edit-btn" style="position:absolute;top:8px;right:8px;padding:2px 10px;font-size:12px;\${hasUpdate ? 'display:none;' : ''}" onclick="window.enableInputEditing('\${detailId}', \${selectedObservationIndex})">Edit</button>
+                                    <button class="btn btn-secondary reset-btn" style="position:absolute;top:8px;right:8px;padding:2px 10px;font-size:12px;\${hasUpdate ? '' : 'display:none;'}" onclick="window.resetInput('\${detailId}', \${selectedObservationIndex})">Reset</button>
+                                </pre>
+                            </div>\`;
+                            if (hasUpdate) {
+                                inputSection += \`<div class="detail-section updated-input-section">
+                                    <div class="detail-title">Update Input</div>
+                                    <textarea id="editInputTextarea" class="detail-pre" style="width:100%;height:400px;">\${esc(updatedInputs.get(selectedObservationIndex))}</textarea>
+                                    <button class="btn btn-secondary save-btn" style="margin-top:8px;float:right;padding:2px 10px;font-size:12px;" onclick="window.saveUpdatedInput(\${selectedObservationIndex})">Save</button>
+                                </div>\`;
+                            }
+                        } else {
+                            inputSection += \`<div class="detail-section"><div class="detail-title">Input</div><pre class="detail-pre">\${esc(toDisplayText(obs.input, obs.type))}</pre></div>\`;
+                        }
+                        const _dur4 = computeDurationMs(obs);
+                        const currentDurSection = (run && !run.running && run.ok && run.currentDurationMs != null)
+                            ? \`<div class="detail-section"><div class="detail-title">Current Duration</div><pre class="detail-pre">\${formatDuration(run.currentDurationMs)}</pre></div>\`
+                            : '';
+                        const currentUsageSection = (run && !run.running && run.ok && run.currentUsage && run.currentUsage.totalTokens > 0)
+                            ? \`<div class="detail-section"><div class="detail-title">Current Usage</div><pre class="detail-pre">\${[
+                                run.currentUsage.inputTokens  != null ? 'Input tokens:  ' + run.currentUsage.inputTokens  : null,
+                                run.currentUsage.outputTokens != null ? 'Output tokens: ' + run.currentUsage.outputTokens : null,
+                                run.currentUsage.totalTokens  != null ? 'Total tokens:  ' + run.currentUsage.totalTokens  : null,
+                              ].filter(Boolean).join('\\n')}</pre></div>\`
+                            : '';
+                        col3 = \`<div class="detail-sections" id="\${detailId}">
+                            \${filePathHtml}
+                            \${renderModel(obs)}
+                            \${_dur4 != null ? \`<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">\${formatDuration(_dur4)}</pre></div>\` : ''}
+                            \${currentDurSection}
+                            \${renderUsage(obs)}
+                            \${currentUsageSection}
+                            \${inputSection}
+                            <div class="detail-section"><div class="detail-title">Output</div><pre class="detail-pre">\${esc(outputText)}</pre></div>
+                            \${currentOutputSection}
+                        </div>\`;
+                        if (obs.type === "GENERATION") setTimeout(() => resolveGenFilePath(obs, detailId), 0);
+                    }
+
+                    traceLayout.innerHTML = \`
+                        <div class="trace-left">\${col1}</div>
+                        <div class="trace-left">\${col2}</div>
+                        <div class="trace-right">\${col3}</div>
+                    \`;
+                    // Auto-select first observation if none selected
+                    if (obsIndices.length > 0 && selectedObservationIndex === -1) {
+                        window.step4SelectObservation(obsIndices[0]);
+                    }
+                    return;
+                }
+
+                const traceLayoutEl = document.getElementsByClassName("trace-layout")[0];
+                if (traceLayoutEl.classList.contains("step-5") || traceLayoutEl.classList.contains("step-4")) {
+                    traceLayoutEl.classList.remove("step-5");
+                    traceLayoutEl.classList.remove("step-4");
+                    let headerHtml = '';
+                    if (currentStep === 3) {
+                        headerHtml = '<tr><th style="width: 40px;">Check</th><th>Name</th><th>Type</th><th>Duration</th></tr>';
+                    }
+                    traceLayoutEl.innerHTML = \`
+                        <div class="trace-left">
+                        <div class="trace-section-title">Observations</div>
+                        <div class="observation-table-wrap">
+                            <table class="observation-table">
+                            <thead id="observationTableHead">\${headerHtml}</thead>
+                            <tbody id="observationTableBody"></tbody>
+                            </table>
+                        </div>
+                        </div>
+                        <div class="trace-right">
+                        <div id="observationDetail"></div>
+                        </div>
+                    \`;
+                    observationTableBody = document.getElementById("observationTableBody");
+                    observationDetail = document.getElementById("observationDetail");
+                }
+
+                const obsToRender = currentObservations;
+                const indices = currentObservations.map((_, i) => i);
+
+                if (!obsToRender.length) {
+                    observationTableBody.innerHTML = '<tr><td colspan="3" style="padding: 16px; color: #777;">No observations found.</td></tr>';
+                    return;
+                }
+
+                observationTableBody.innerHTML = obsToRender.map((obs, displayIndex) => {
+                const actualIndex = indices[displayIndex];
+                const isSelected = actualIndex === selectedObservationIndex;
+                const isChecked = checkedObservations.has(actualIndex);
+                const name = obs.name || obs.id || ("Observation " + (displayIndex + 1));
+                const type = obs.type || "UNKNOWN";
+                const typeClass = type === "TOOL" ? "tool" : "ai";
+                // Step 3: Mark broken - show checkboxes
+                return \`<tr class="\${isSelected ? "selected" : ""}">
+                    <td style="width: 40px;"><input type="checkbox" class="obs-checkbox" value="\${actualIndex}" \${isChecked ? "checked" : ""}></td>
+                    <td onclick="selectObservation(\${actualIndex})">\${esc(name)}</td>
+                    <td><span class="obs-type \${typeClass}">\${esc(type)}</span></td>
+                    <td style="color:#888;font-size:12px;">\${formatDuration(computeDurationMs(obs))}</td>
+                    </tr>\`;
+                }).join("");
+
+                document.querySelectorAll(".obs-checkbox").forEach(checkbox => {
+                    checkbox.onchange = (e) => {
+                        const idx = parseInt(e.target.value);
+                        if (e.target.checked) {
+                            checkedObservations.add(idx);
+                        } else {
+                            checkedObservations.delete(idx);
+                        }
+                    };
+                });
+                // Restore scroll position if previously saved
+                if (currentStep === 5 && prevStep5ObsScrollTop !== null) {
+                    // After rendering, restore scroll for the observations table in the second .trace-left
+                    const traceLefts = document.querySelectorAll('.trace-left');
+                    if (traceLefts.length > 1) {
+                        const obsWrap = traceLefts[1].querySelector('.observation-table-wrap');
+                        if (obsWrap) obsWrap.scrollTop = prevStep5ObsScrollTop;
+                    }
+                } else {
+                    obsTableWrap = document.querySelector('.observation-table-wrap');
+                    if (obsTableWrap && prevScrollTop !== null) {
+                        obsTableWrap.scrollTop = prevScrollTop;
+                    }
+                }
+            }
+
+            function selectObservation(index) {
+                // Preserve scroll position of observation-table-wrap
+                let obsTableWrap = document.querySelector('.observation-table-wrap');
+                let prevScrollTop = obsTableWrap ? obsTableWrap.scrollTop : null;
+                selectedObservationIndex = index;
+                renderObservationTable();
+                // Restore scroll position after rendering
+                obsTableWrap = document.querySelector('.observation-table-wrap');
+                if (obsTableWrap && prevScrollTop !== null) {
+                    obsTableWrap.scrollTop = prevScrollTop;
+                }
+                const obs = currentObservations[index];
+                const inputText = toDisplayText(obs.input, obs.type);
+                const outputText = toDisplayText(obs.output, obs.type);
+                const detailId = 'obs-detail-' + index;
+                const filePathHtml = obs.type === "GENERATION"
+                ? '<div class="file-path-placeholder"></div>'
+                : renderFilePath(getObsFilePath(obs));
+
+                const _dur3 = computeDurationMs(obs);
+                observationDetail.innerHTML = \`<div class="detail-sections" id="\${detailId}">
+                \${filePathHtml}
+                \${renderModel(obs)}
+                \${_dur3 != null ? \`<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">\${formatDuration(_dur3)}</pre></div>\` : ''}
+                \${renderUsage(obs)}
+                <div class="detail-section">
+                    <div class="detail-title">Input</div>
+                    <pre class="detail-pre">\${esc(inputText)}</pre>
+                </div>
+                <div class="detail-section">
+                    <div class="detail-title">Output</div>
+                    <pre class="detail-pre">\${esc(outputText)}</pre>
+                </div>
+                </div>\`;
+                if (obs.type === "GENERATION") resolveGenFilePath(obs, detailId);
+            }
+
+            async function rerunObservation(index) {
+                const obs = currentObservations[index];
+                let inputToUse = obs.input;
+                if (obs.type === "GENERATION" && updatedInputs.has(index)) {
+                    inputToUse = updatedInputs.get(index);
+                }
+                // Proceed with rerun logic using inputToUse
+                console.log('Rerunning observation with input:', inputToUse);
+                const history = rerunHistory.get(index) || [];
+                const newRun = { runNumber: history.length + 1, running: true, ok: null };
+                history.push(newRun);
+                rerunHistory.set(index, history);
+                rerunInFlight.add(index);
+                if (selectedObservationIndex === index) {
+                    step4SelectedRun = history.length - 1;
+                }
+                renderObservationTable();
+                try {
+                    const payload = { observation: { ...obs, input: inputToUse } };
+                    const response = await fetch('/api/rerun-observation', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload),
+                    });
+                    const data = await response.json();
+                    newRun.running = false;
+                    if (response.ok && data.ok) {
+                        newRun.ok = true;
+                        newRun.output = data.currentOutput;
+                        newRun.currentDurationMs = data.currentDurationMs ?? null;
+                        newRun.currentUsage = data.currentUsage ?? null;
+                    } else {
+                        newRun.ok = false;
+                        newRun.error = data.error || 'Rerun failed.';
+                    }
+                } catch (err) {
+                    newRun.running = false;
+                    newRun.ok = false;
+                    newRun.error = err && err.message ? err.message : String(err);
+                } finally {
+                    rerunInFlight.delete(index);
+                    renderObservationTable();
+                }
+            }
+
+            async function runFromBreakpoint(traceIdx, obsIdx, evt) {
+                const btn = evt.target;
+                const liveTrace = step5RunTraces[traceIdx];
+                if (!liveTrace) return;
+                const obs = liveTrace.observations[obsIdx];
+                if (!obs || obs.workflowEventId == null) return;
+
+                btn.disabled = true;
+                btn.textContent = 'Running…';
+
+                try {
+                    const payload = {
+                        workflowName: selectedWorkflow ? selectedWorkflow.name : '',
+                        checkpoint: obs.workflowEventId,
+                        snapshotId: liveTrace.snapshotId,
+                        observations: currentObservations,
+                        toolMockConfig: window._toolMockConfig || {},
+                        promptMockConfig: window._promptMockConfig || {},
+                        userPromptMockConfig: window._userPromptMockConfig || {},
+                    };
+                    const response = await fetch('/api/run-from-breakpoint', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload),
+                    });
+                    const data = await response.json();
+                    if (response.ok) {
+                        // Sub-trace naming: "Trace-N-M" where N = parent name, M = resume count from parent
+                        const parentTraceName = liveTrace.traceName ?? \`Trace-\${traceIdx + 1}\`;
+                        const siblingCount = step5RunTraces.filter(t => t.parentTraceName === parentTraceName).length;
+                        const traceName = \`\${parentTraceName}-\${siblingCount + 1}\`;
+                        const newTrace = { ...data, runNumber: step5RunTraces.length + 1, traceName, parentTraceName };
+                        step5RunTraces.push(newTrace);
+                        persistTraces();
+                        renderObservationTable();
+                    } else {
+                        btn.textContent = '✗ ' + (data.error || 'Failed');
+                        btn.disabled = false;
+                    }
+                } catch (err) {
+                    btn.textContent = '✗ Error';
+                    btn.disabled = false;
+                }
+            }
+
+            async function rerunFullFlow(btn) {
+                if (step5RerunInFlight || step5RunMeta.loading) return;
+                step5RerunInFlight = true;
+                renderObservationTable();
+                try {
+                    const payload = { workflowName: selectedWorkflow?.name, runCount: 1, sequential: false, observations: currentObservations, toolMockConfig: window._toolMockConfig || {}, promptMockConfig: window._promptMockConfig || {}, userPromptMockConfig: window._userPromptMockConfig || {} };
+                    const response = await fetch('/api/validate-workflow', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload),
+                    });
+                    const data = await response.json();
+                    if (response.ok && data.ok && Array.isArray(data.traces) && data.traces.length > 0) {
+                        const newTrace = { ...data.traces[0], runNumber: step5RunTraces.length + 1 };
+                        step5RunTraces.push(newTrace);
+                        persistTraces();
+                        window.step5SelectedTrace = step5RunTraces.length;
+                        window.step5SelectedObservation = 0;
+                    }
+                } catch (err) {
+                    // silently ignore — dashboard may not be connected
+                } finally {
+                    step5RerunInFlight = false;
+                    renderObservationTable();
+                }
+            }
+
+            async function resumeAgentFromTask(traceIdx, obsIdx, taskIndex, evt) {
+                const btn = evt.target;
+                const liveTrace = step5RunTraces[traceIdx];
+                if (!liveTrace) return;
+
+                // Extract AgentPlan from the workflow's currentOutput
+                const currentOutput = liveTrace.currentOutput;
+                const agentPlan = currentOutput && typeof currentOutput === 'object' && Array.isArray(currentOutput.tasks)
+                    ? currentOutput
+                    : null;
+                if (!agentPlan) {
+                    alert('No agent plan found in this trace. Ensure the workflow returns an AgentPlan from executorAgent() or resumeAgentFromTrace().');
+                    return;
+                }
+
+                btn.disabled = true;
+                btn.textContent = 'Resuming…';
+
+                try {
+                    const payload = {
+                        workflowName: selectedWorkflow ? selectedWorkflow.name : '',
+                        taskIndex: taskIndex,
+                        agentState: {
+                            plan: agentPlan,
+                            trace: [],
+                            resumeFromTaskIndex: taskIndex,
+                        },
+                        snapshotId: liveTrace.snapshotId,
+                        toolMockConfig: window._toolMockConfig || {},
+                        promptMockConfig: window._promptMockConfig || {},
+                        userPromptMockConfig: window._userPromptMockConfig || {},
+                    };
+                    const response = await fetch('/api/resume-agent-from-task', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload),
+                    });
+                    const data = await response.json();
+                    if (response.ok) {
+                        // Sub-trace naming: "Trace-N-M" where N = parent name, M = resume count from parent
+                        const parentTraceName = liveTrace.traceName ?? \`Trace-\${traceIdx + 1}\`;
+                        const siblingCount = step5RunTraces.filter(t => t.parentTraceName === parentTraceName).length;
+                        const traceName = \`\${parentTraceName}-\${siblingCount + 1}\`;
+                        const newTrace = { ...data, runNumber: step5RunTraces.length + 1, traceName, parentTraceName };
+                        step5RunTraces.push(newTrace);
+                        persistTraces();
+                        renderObservationTable();
+                    } else {
+                        btn.textContent = '✗ ' + (data.error || 'Failed');
+                        btn.disabled = false;
+                    }
+                } catch (err) {
+                    btn.textContent = '✗ Error';
+                    btn.disabled = false;
+                }
+            }
+
+            window.enableInputEditing = function(detailId, index) {
+                const obs = currentObservations[index];
+                const current = updatedInputs.has(index)
+                    ? updatedInputs.get(index)
+                    : toDisplayText(obs.input, obs.type);
+                updatedInputs.set(index, current);
+                renderObservationTable();
+            };
+
+            window.resetInput = function(detailId, index) {
+                updatedInputs.delete(index);
+                renderObservationTable();
+            };
+
+            window.saveUpdatedInput = function(index) {
+                const ta = document.getElementById('editInputTextarea');
+                if (!ta) return;
+                updatedInputs.set(index, ta.value);
+                renderObservationTable();
+            };
+
+            function getObsFilePath(obs) {
+                if (obs && obs.type === "TOOL") {
+                const tool = codeIndex.tools.find(t => t.name === obs.name);
+                if (tool) return tool.lineNumber ? tool.filePath + ':' + tool.lineNumber : tool.filePath;
+                }
+                return null;
+            }
+
+            function extractSystemPrompt(obs) {
+                if (!obs || obs.type !== "GENERATION") return null;
+                let input = obs.input;
+                // Parse input if it's a JSON string
+                if (
+                    typeof input === 'string' && 
+                    (input.startsWith('{') || input.startsWith('[')) &&
+                    (input.endsWith('}') || input.endsWith(']'))
+                ) {
+                    try {
+                        input = JSON.parse(input);
+                    } catch { /* not JSON */ }
+                }
+                const messages = Array.isArray(input) ? input
+                : (input && Array.isArray(input.messages)) ? input.messages : [];
+                const sys = messages.find(m => m && m.role === "system");
+                if (!sys || !sys.content) return null;
+                return String(sys.content).trim();
+            }
+
+            function getSearchFragments(systemPrompt) {
+                if (!systemPrompt || systemPrompt.length < 10) return [];
+                const fragments = [];
+                
+                // 1. First sentence (often unique: "You are an expert SQL generator...")
+                const firstSentence = systemPrompt.split(/[.!?]\\n/)[0].trim();
+                if (firstSentence.length >= 20 && firstSentence.length <= 100) {
+                    fragments.push(firstSentence);
+                }
+                
+                // 2. First 50 chars
+                if (systemPrompt.length >= 40) {
+                    fragments.push(systemPrompt.slice(0, 50).trim());
+                }
+                
+                // 3. First 80 chars (if different from above)
+                if (systemPrompt.length >= 80) {
+                    const fragment80 = systemPrompt.slice(0, 80).trim();
+                    if (!fragments.some(f => fragment80.startsWith(f))) {
+                        fragments.push(fragment80);
+                    }
+                }
+                
+                // 4. Try to find a unique phrase after common prefixes
+                const afterYouAre = systemPrompt.match(/You are (?:an? )?([^.\\n]{15,60})/);
+                if (afterYouAre && afterYouAre[1]) {
+                    fragments.push(afterYouAre[1].trim());
+                }
+                
+                return fragments.filter(f => f.length >= 15);
+            }
+
+            async function resolveGenFilePath(obs, containerId) {
+                const systemPrompt = extractSystemPrompt(obs);
+                if (!systemPrompt) return;
+                
+                const fragments = getSearchFragments(systemPrompt);
+                if (fragments.length === 0) return;
+                
+                try {
+                    // Try each fragment until we find a match
+                    for (const fragment of fragments) {
+                        const res = await fetch('/api/search-source?q=' + encodeURIComponent(fragment));
+                        const data = await res.json();
+                        if (data.filePath) {
+                            const label = data.lineNumber ? data.filePath + ':' + data.lineNumber : data.filePath;
+                            const container = document.getElementById(containerId);
+                            if (!container) return;
+                            const placeholder = container.querySelector('.file-path-placeholder');
+                            if (placeholder) placeholder.outerHTML = renderFilePath(label);
+                            return; // Success, stop trying
+                        }
+                    }
+                } catch { /* ignore network errors */ }
+            }
+
+            function stripAbsolutePath(filePath) {
+                console.log('stripAbsolutePath called with:', filePath, 'repoRoot:', repoRoot);
+                if (!filePath) return filePath;
+                
+                // If we have a repo root, strip it from the absolute path
+                if (repoRoot) {
+                    // Normalize path separators and handle case-insensitive filesystems
+                    let normalizedRoot = repoRoot.replace(/\\\\/g, '/').toLowerCase();
+                    let normalizedPath = filePath.replace(/\\\\/g, '/').toLowerCase();
+                    
+                    // Ensure root ends with / for proper matching
+                    if (!normalizedRoot.endsWith('/')) {
+                        normalizedRoot += '/';
+                    }
+                    
+                    if (normalizedPath.startsWith(normalizedRoot)) {
+                        // Return the original case of the file path after the root
+                        return filePath.replace(/\\\\/g, '/').substring(repoRoot.length).replace(/^\\//, '');
+                    }
+                    
+                    // Also try without trailing slash
+                    normalizedRoot = normalizedRoot.slice(0, -1);
+                    if (normalizedPath.startsWith(normalizedRoot + '/')) {
+                        return filePath.replace(/\\\\/g, '/').substring(repoRoot.length).replace(/^\\//, '');
+                    }
+                }
+                
+                // Fallback if repo root not available or path doesn't match
+                return filePath;
+            }
+
+            function renderFilePath(filePath) {
+                if (!filePath) return '';
+                const cleanPath = stripAbsolutePath(filePath);
+                return \`<div class="detail-section">
+                <div class="detail-title">File Path</div>
+                <pre class="detail-pre">\${esc(cleanPath)}</pre>
+                </div>\`;
+            }
+
+            function renderModel(obs) {
+                if (!obs || obs.type !== "GENERATION" || !obs.model) return '';
+                let label = obs.model;
+                if (obs.modelParameters) {
+                const parts = [];
+                if (obs.modelParameters.temperature != null) parts.push('temp=' + obs.modelParameters.temperature);
+                if (obs.modelParameters.max_tokens != null) parts.push('max_tokens=' + obs.modelParameters.max_tokens);
+                if (parts.length) label += '  (' + parts.join(', ') + ')';
+                }
+                return \`<div class="detail-section">
+                <div class="detail-title">Model</div>
+                <pre class="detail-pre">\${esc(label)}</pre>
+                </div>\`;
+            }
+
+            function stripMarkdownCodeFence(text) {
+                // Remove markdown code fences like \`\`\`sql, \`\`\`json, \`\`\`, etc.
+                return text.replace(/^\`\`\`[\\w]*\\n?/gm, '').replace(/\\n?\`\`\`\$/gm, '').trim();
+            }
+
+            function toDisplayText(value, type) {
+                if (value === null || value === undefined || value === "") {
+                    return "No data";
+                }
+                
+                // If it's a string, try to parse it first (might be JSON)
+                if (typeof value === "string") {
+                    if (value.startsWith('[') || value.startsWith('{')) {
+                        try {
+                            const parsed = JSON.parse(value);
+                            value = parsed; // Use parsed version for further processing
+                        } catch {
+                            // Not JSON, strip markdown and return
+                            return stripMarkdownCodeFence(value);
+                        }
+                    } else {
+                        return stripMarkdownCodeFence(value);
+                    }
+                }
+                
+                // GENERATION input: raw messages array
+                if (type === "GENERATION" && Array.isArray(value)) {
+                    return JSON.stringify(value, null, 2);
+                }
+
+                // GENERATION input wrapped in {messages:[...]}  (legacy / Langfuse format)
+                if (type === "GENERATION" && value.messages) {
+                    return JSON.stringify(value.messages, null, 2);
+                }
+
+                // GENERATION output: assistant message object
+                if (type === "GENERATION" && value.role) {
+                    const parts = [];
+                    // Text content
+                    if (value.content && typeof value.content === 'string') {
+                        parts.push(stripMarkdownCodeFence(value.content));
+                    } else if (Array.isArray(value.content)) {
+                        // Anthropic / Gemini content block array
+                        const text = value.content
+                            .filter(b => b && (b.type === 'text' || b.text))
+                            .map(b => b.text || b.value || '')
+                            .join('');
+                        if (text) parts.push(stripMarkdownCodeFence(text));
+                        // Anthropic tool_use blocks
+                        const toolUses = value.content.filter(b => b && b.type === 'tool_use');
+                        if (toolUses.length) parts.push('Tool calls:\\n' + JSON.stringify(toolUses, null, 2));
+                    } else if (value.parts && Array.isArray(value.parts)) {
+                        // Gemini parts array
+                        const text = value.parts.filter(p => p.text).map(p => p.text).join('');
+                        if (text) parts.push(stripMarkdownCodeFence(text));
+                        const fnCalls = value.parts.filter(p => p.functionCall);
+                        if (fnCalls.length) parts.push('Function calls:\\n' + JSON.stringify(fnCalls, null, 2));
+                    }
+                    // OpenAI tool_calls array
+                    if (Array.isArray(value.tool_calls) && value.tool_calls.length) {
+                        parts.push('Tool calls:\\n' + JSON.stringify(value.tool_calls, null, 2));
+                    }
+                    return parts.length ? parts.join('\\n\\n') : 'No content';
+                }
+
+                // For other objects, stringify them
+                try {
+                    return JSON.stringify(value, null, 2);
+                } catch {
+                    return String(value);
+                }
+            }
+
+            function resetTraceModal() {
+                uploadArea.classList.remove("hidden");
+                traceViewer.classList.remove("visible");
+                let customFooter = document.getElementById("step5FooterBtns");
+                if (customFooter) customFooter.remove();
+                uploadStatus.className = "upload-status";
+                uploadStatus.textContent = "";
+                fileInput.value = "";
+                currentObservations = [];
+                selectedObservationIndex = -1;
+                checkedObservations.clear();
+                rerunHistory.clear();
+                rerunInFlight.clear();
+                step4SelectedRun = -1;
+                step5RunTraces = [];
+                localStorage.removeItem('ed_step5RunTraces');
+                step5RunMeta = { loading: false, error: '', runCount: 0, sequential: false };
+                observationTableBody.innerHTML = "";
+                observationDetail.innerHTML = "";
+                currentStep = 0;
+                updateModalTitle();
+            }
+            
+            function updateModalTitle() {
+                const titles = {
+                    0: "Step 2: Import Failed Trace",
+                    3: "Step 3: Mark broken step",
+                    4: "Step 4: Validate your Fixes",
+                    5: "Step 5: Validate Updated Flow with Live Data"
+                };
+                modalTitle.textContent = titles[currentStep] || "Step 2: Import Failed Trace";
+            }
+            
+            function updateFooterButtons() {
+                const changeBtn = document.getElementById("changeTraceBtn");
+                const nextBtn = document.getElementById("nextBtn");
+                
+                if (currentStep <= 2) {
+                    changeBtn.textContent = "Change Workflow Function";
+                    nextBtn.textContent = "Next";
+                    nextBtn.disabled = true;
+                } else if (currentStep === 3) {
+                    changeBtn.textContent = "Change Trace File";
+                    nextBtn.textContent = "Next";
+                    nextBtn.disabled = false;
+                } else if (currentStep === 4) {
+                    changeBtn.textContent = "Select Different Steps";
+                    nextBtn.textContent = "Fix Works as Expected";
+                    nextBtn.disabled = false;
+                } else if (currentStep === 5) {
+                // Step 5 - show custom buttons
+                    changeBtn.textContent = "Still Failing";
+                    nextBtn.textContent = "Done";
+                } else {
+                    let customFooter = document.getElementById("step5FooterBtns");
+                    if (customFooter) customFooter.remove();
+                }
+            }
+            
+            fetch("/api/repo-root").then(r => r.json()).then(d => {
+                console.log("[Dashboard] Repo root fetched:", d);
+                repoRoot = d.repoRoot || '';
+                console.log("[Dashboard] repoRoot set to:", repoRoot);
+                
+                // Now fetch workflows after repo root is loaded
+                return fetch("/api/workflows");
+            }).then(r => r.json()).then(d => {
+                console.log("[Dashboard] Workflows fetched:", d);
+                allWorkflows = d.workflows || [];
+                console.log("[Dashboard] Calling render with", allWorkflows.length, "workflows");
+                render();
+            }).catch(err => {
+                console.error("Failed to fetch repo root or workflows:", err);
+                tbody.innerHTML = '<tr><td colspan="2" style="text-align: center; padding: 40px; color: #c62828;">Error loading workflows</td></tr>';
+            });
+            
+            fetch("/api/code-index").then(r => r.json()).then(d => {
+                codeIndex = d;
+                console.log("Code index:", d);
+            }).catch(err => {
+                console.error("Failed to fetch code index:", err);
+            });
+            
+            function render(search = "") {
+                console.log("[Dashboard] render() called with search:", search, "workflows:", allWorkflows.length);
+                const filtered = search ? allWorkflows.filter(w => 
+                    w.name.toLowerCase().includes(search.toLowerCase()) || 
+                    w.filePath.toLowerCase().includes(search.toLowerCase())
+                ) : allWorkflows;
+                countEl.textContent = filtered.length;
+                console.log("[Dashboard] Rendering", filtered.length, "workflows");
+                tbody.innerHTML = filtered.length ? filtered.map((w, i) => \`<tr onclick="showModal(\${i},'\${search}')">
+                    <td><div class="workflow-name-cell">\${esc(w.name)}\${w.isAsync ? '<span class="async-badge">async</span>' : ""}</div></td>
+                    <td><div class="workflow-path-cell">\${esc(stripAbsolutePath(w.filePath))}</div></td>
+                </tr>\`).join("") : \`<tr><td colspan="2" style="text-align: center; padding: 40px; color: #999;">No workflows found</td></tr>\`;
+                console.log("[Dashboard] tbody updated");
+            }
+            
+            function showModal(index, search) {
+                const filtered = search ? allWorkflows.filter(w => 
+                    w.name.toLowerCase().includes(search.toLowerCase()) || 
+                    w.filePath.toLowerCase().includes(search.toLowerCase())
+                ) : allWorkflows;
+                selectedWorkflow = filtered[index];
+                modal.classList.add("open");
+                resetTraceModal();
+                updateFooterButtons();
+            }
+            
+            window.showModal = showModal;
+            window.selectObservation = selectObservation;
+            window.step4SelectObservation = function(idx) {
+                selectedObservationIndex = idx;
+                const history = rerunHistory.get(idx) || [];
+                step4SelectedRun = history.length > 0 ? history.length - 1 : -1;
+                renderObservationTable();
+            };
+            window.step4SelectRun = function(ri) {
+                step4SelectedRun = ri;
+                renderObservationTable();
+            };
+            function esc(t) { const d = document.createElement("div"); d.textContent = t; return d.innerHTML; }
+            window.esc = esc;
+            
+            document.getElementById("searchInput").oninput = (e) => render(e.target.value);
+        </script>
+    </body>
+</html>`;
+    /* DASHBOARD_HTML_END */
+}
+const SEARCH_SKIP_DIRS = new Set(['node_modules', '.git', 'dist', '.next', '.turbo', 'build', 'coverage']);
+const SEARCH_EXTS = new Set(['.ts', '.tsx', '.js', '.jsx']);
+/**
+ * Normalize text for fuzzy searching: collapse whitespace, handle common variations
+ */
+function normalizeForSearch(text) {
+    return text
+        .replace(/\s+/g, ' ') // Collapse whitespace
+        .replace(/["'`]/g, '') // Remove quotes that might differ
+        .trim()
+        .toLowerCase();
+}
+/**
+ * Walk the project tree and find the first file+line containing `query`.
+ * Returns { filePath, lineNumber } or null.
+ * Now supports fuzzy matching with normalized text.
+ */
+function searchInFiles(dir, query) {
+    let entries;
+    try {
+        entries = readdirSync(dir);
+    }
+    catch {
+        return null;
+    }
+    const normalizedQuery = normalizeForSearch(query);
+    const exactQuery = query.trim();
+    for (const entry of entries) {
+        if (SEARCH_SKIP_DIRS.has(entry))
+            continue;
+        const full = path.join(dir, entry);
+        let stat;
+        try {
+            stat = statSync(full);
+        }
+        catch {
+            continue;
+        }
+        if (stat.isDirectory()) {
+            const result = searchInFiles(full, query);
+            if (result)
+                return result;
+        }
+        else if (SEARCH_EXTS.has(path.extname(entry))) {
+            try {
+                const content = readFileSync(full, 'utf8');
+                const lines = content.split('\n');
+                // Try exact match first (faster)
+                for (let i = 0; i < lines.length; i++) {
+                    if (lines[i].includes(exactQuery)) {
+                        return { filePath: full, lineNumber: i + 1 };
+                    }
+                }
+                // Try normalized/fuzzy match
+                const normalizedContent = normalizeForSearch(content);
+                if (normalizedContent.includes(normalizedQuery)) {
+                    // Find which line it's on
+                    let charCount = 0;
+                    for (let i = 0; i < lines.length; i++) {
+                        const normalizedLine = normalizeForSearch(lines[i]);
+                        if (normalizedLine.includes(normalizedQuery)) {
+                            return { filePath: full, lineNumber: i + 1 };
+                        }
+                        charCount += lines[i].length + 1; // +1 for newline
+                    }
+                }
+            }
+            catch { /* skip unreadable files */ }
+        }
+    }
+    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') {
+        // If the entire string is a single placeholder, return the raw value so arrays/objects
+        // are not coerced to strings (e.g. messages: "{{input.messages}}" stays an array).
+        const exactInput = value.match(/^\{\{input\.([^}]+)\}\}$/);
+        if (exactInput)
+            return input[exactInput[1]] ?? '';
+        const exactEnv = value.match(/^\{\{env\.([^}]+)\}\}$/);
+        if (exactEnv)
+            return process.env[exactEnv[1]] ?? '';
+        // Interpolated placeholder — coerce to string for embedding within a larger 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 = [], promptMocks = {}, userPromptMocks, toolMockConfig, aiMockConfig, pushedEvents, runConfigs, config, dashboardPort } = opts;
+    const runId = randomUUID();
+    // Register run config so the user's server can fetch frozen events, prompt mocks, and output mocks
+    pushedEvents.set(runId, []);
+    runConfigs.set(runId, { frozenEvents, promptMocks, userPromptMocks, toolMockConfig, aiMockConfig });
+    try {
+        const parsedInput = parseObservationInput(workflowInput);
+        const inputObj = parsedInput && typeof parsedInput === 'object' && !Array.isArray(parsedInput) ? parsedInput : {};
+        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);
+        console.log(`[elasticdash] runHttpWorkflow drain complete: ${events.length} events collected for runId=${runId}`);
+        const workflowTrace = { traceId: runId, events };
+        return { ok: true, currentOutput, workflowTrace, steps: [], llmSteps: [], toolCalls: [], customSteps: [] };
+    }
+    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;
+    // 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 + prompt mocks for replay).
+    // Maps runId -> { frozenEvents, promptMocks }
+    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) => {
+        // Disable socket inactivity timeout — workflow runs can take arbitrarily long
+        req.socket.setTimeout(0);
+        const url = new URL(req.url || '/', `http://${req.headers.host}`);
+        if (url.pathname === '/api/workflows') {
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ workflows }));
+        }
+        else if (url.pathname === '/api/repo-root') {
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ repoRoot: cwd }));
+        }
+        else if (url.pathname === '/api/code-index') {
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify(codeIndex));
+        }
+        else if (url.pathname === '/api/search-source') {
+            const q = url.searchParams.get('q') || '';
+            const result = q.length >= 8 ? searchInFiles(cwd, q) : null;
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify(result ?? {}));
+        }
+        else if (url.pathname === '/api/rerun-observation' && req.method === 'POST') {
+            ;
+            (async () => {
+                try {
+                    const body = (await readJsonBody(req));
+                    if (!body?.observation || typeof body.observation !== 'object') {
+                        res.writeHead(400, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ ok: false, error: 'Request must include an observation object.' }));
+                        return;
+                    }
+                    const result = await rerunObservation(cwd, body.observation, tools);
+                    const statusCode = result.ok ? 200 : 400;
+                    res.writeHead(statusCode, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify(result));
+                }
+                catch (error) {
+                    res.writeHead(500, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ ok: false, error: formatError(error) }));
+                }
+            })();
+        }
+        else if (url.pathname === '/api/validate-workflow' && req.method === 'POST') {
+            ;
+            (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 promptMocks = flattenPromptMockConfig(body.promptMockConfig);
+                        const valUserPromptMocks = body.userPromptMockConfig && typeof body.userPromptMockConfig === 'object' && !Array.isArray(body.userPromptMockConfig)
+                            ? body.userPromptMockConfig
+                            : undefined;
+                        const valToolMockConfig = body.toolMockConfig && typeof body.toolMockConfig === 'object' && !Array.isArray(body.toolMockConfig)
+                            ? body.toolMockConfig
+                            : undefined;
+                        const valAiMockConfig = body.aiMockConfig && typeof body.aiMockConfig === 'object' && !Array.isArray(body.aiMockConfig)
+                            ? body.aiMockConfig
+                            : undefined;
+                        const runOne = async (runNumber) => {
+                            const result = await runHttpWorkflow({
+                                workflowName, workflowInput, pushedEvents, runConfigs,
+                                config: httpConfig, dashboardPort: port,
+                                promptMocks, userPromptMocks: valUserPromptMocks, toolMockConfig: valToolMockConfig, aiMockConfig: valAiMockConfig,
+                            });
+                            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' });
+                    res.end(JSON.stringify(result));
+                }
+                catch (error) {
+                    res.writeHead(500, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ ok: false, error: formatError(error) }));
+                }
+            })();
+        }
+        else if (url.pathname === '/api/run-from-breakpoint' && req.method === 'POST') {
+            ;
+            (async () => {
+                try {
+                    const body = (await readJsonBody(req));
+                    const workflowName = typeof body.workflowName === 'string' ? body.workflowName.trim() : '';
+                    if (!workflowName) {
+                        res.writeHead(400, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ ok: false, error: 'workflowName is required.' }));
+                        return;
+                    }
+                    const checkpoint = typeof body.checkpoint === 'number' ? body.checkpoint : 0;
+                    let history;
+                    if (typeof body.snapshotId === 'string') {
+                        const snap = loadSnapshot(cwd, body.snapshotId);
+                        history = snap ? snap.events : [];
+                    }
+                    else {
+                        history = Array.isArray(body.history) ? body.history : [];
+                    }
+                    const validationBody = { workflowName, observations: body.observations };
+                    const resolvedInput = resolveWorkflowArgsFromObservations(validationBody, workflowName);
+                    if (resolvedInput.error) {
+                        res.writeHead(400, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ ok: false, error: resolvedInput.error }));
+                        return;
+                    }
+                    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 + prompt mocks for step replay
+                        const bpPromptMocks = flattenPromptMockConfig(body.promptMockConfig);
+                        const bpUserPromptMocks = body.userPromptMockConfig && typeof body.userPromptMockConfig === 'object' && !Array.isArray(body.userPromptMockConfig)
+                            ? body.userPromptMockConfig
+                            : undefined;
+                        const bpToolMockConfig = body.toolMockConfig && typeof body.toolMockConfig === 'object' && !Array.isArray(body.toolMockConfig)
+                            ? body.toolMockConfig
+                            : undefined;
+                        const bpAiMockConfig = body.aiMockConfig && typeof body.aiMockConfig === 'object' && !Array.isArray(body.aiMockConfig)
+                            ? body.aiMockConfig
+                            : undefined;
+                        console.log(`[elasticdash] Run from breakpoint (HTTP mode): workflow="${workflowName}" checkpoint=${checkpoint} frozen=${frozenEvents.length}`);
+                        const result = await runHttpWorkflow({
+                            workflowName, workflowInput, pushedEvents, runConfigs,
+                            config: httpConfig, dashboardPort: port,
+                            frozenEvents, promptMocks: bpPromptMocks, userPromptMocks: bpUserPromptMocks,
+                            toolMockConfig: bpToolMockConfig, aiMockConfig: bpAiMockConfig,
+                        });
+                        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 toolMockConfig = body.toolMockConfig && typeof body.toolMockConfig === 'object' && !Array.isArray(body.toolMockConfig)
+                        ? body.toolMockConfig
+                        : undefined;
+                    const aiMockConfig = body.aiMockConfig && typeof body.aiMockConfig === 'object' && !Array.isArray(body.aiMockConfig)
+                        ? body.aiMockConfig
+                        : undefined;
+                    const promptMockConfig = body.promptMockConfig && typeof body.promptMockConfig === 'object' && !Array.isArray(body.promptMockConfig)
+                        ? body.promptMockConfig
+                        : undefined;
+                    const userPromptMockConfig = body.userPromptMockConfig && typeof body.userPromptMockConfig === 'object' && !Array.isArray(body.userPromptMockConfig)
+                        ? body.userPromptMockConfig
+                        : undefined;
+                    console.log(`[elasticdash] Run from breakpoint: workflow="${workflowName}" checkpoint=${checkpoint} historyLen=${history.length}`);
+                    const result = await runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, workflowArgs, workflowInput, { replayMode: true, checkpoint, history, ...(toolMockConfig ? { toolMockConfig } : {}), ...(aiMockConfig ? { aiMockConfig } : {}), ...(promptMockConfig ? { promptMockConfig } : {}), ...(userPromptMockConfig ? { userPromptMockConfig } : {}) });
+                    const traceStub = {
+                        getSteps: () => (result.steps ?? []),
+                        getLLMSteps: () => (result.llmSteps ?? []),
+                        getToolCalls: () => (result.toolCalls ?? []),
+                        getCustomSteps: () => (result.customSteps ?? []),
+                        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));
+                }
+                catch (error) {
+                    res.writeHead(500, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ ok: false, error: formatError(error) }));
+                }
+            })();
+        }
+        else if (url.pathname === '/api/resume-agent-from-task' && req.method === 'POST') {
+            ;
+            (async () => {
+                try {
+                    const body = (await readJsonBody(req));
+                    const workflowName = typeof body.workflowName === 'string' ? body.workflowName.trim() : '';
+                    if (!workflowName) {
+                        res.writeHead(400, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ ok: false, error: 'workflowName is required.' }));
+                        return;
+                    }
+                    const taskIndex = typeof body.taskIndex === 'number' ? body.taskIndex : 0;
+                    let history;
+                    if (typeof body.snapshotId === 'string') {
+                        const snap = loadSnapshot(cwd, body.snapshotId);
+                        history = snap ? snap.events : [];
+                    }
+                    else {
+                        history = Array.isArray(body.history) ? body.history : [];
+                    }
+                    if (!body.agentState || typeof body.agentState !== 'object') {
+                        res.writeHead(400, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ ok: false, error: 'agentState is required.' }));
+                        return;
+                    }
+                    // Reconstruct AgentState: override resumeFromTaskIndex with the requested taskIndex
+                    const incomingState = body.agentState;
+                    const agentState = {
+                        plan: (incomingState.plan ?? incomingState),
+                        trace: incomingState.trace ?? history,
+                        resumeFromTaskIndex: taskIndex,
+                    };
+                    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 toolsModulePath = resolveRuntimeModule(cwd, 'ed_tools') ?? null;
+                    const toolMockConfig = body.toolMockConfig && typeof body.toolMockConfig === 'object' && !Array.isArray(body.toolMockConfig)
+                        ? body.toolMockConfig
+                        : undefined;
+                    const aiMockConfig = body.aiMockConfig && typeof body.aiMockConfig === 'object' && !Array.isArray(body.aiMockConfig)
+                        ? body.aiMockConfig
+                        : undefined;
+                    const promptMockConfig = body.promptMockConfig && typeof body.promptMockConfig === 'object' && !Array.isArray(body.promptMockConfig)
+                        ? body.promptMockConfig
+                        : undefined;
+                    const userPromptMockConfig = body.userPromptMockConfig && typeof body.userPromptMockConfig === 'object' && !Array.isArray(body.userPromptMockConfig)
+                        ? body.userPromptMockConfig
+                        : undefined;
+                    console.log(`[elasticdash] Resume agent from task: workflow="${workflowName}" taskIndex=${taskIndex}`);
+                    const result = await runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, [], null, { replayMode: history.length > 0, checkpoint: 0, history, agentState, ...(toolMockConfig ? { toolMockConfig } : {}), ...(aiMockConfig ? { aiMockConfig } : {}), ...(promptMockConfig ? { promptMockConfig } : {}), ...(userPromptMockConfig ? { userPromptMockConfig } : {}) });
+                    const traceStub = {
+                        getSteps: () => (result.steps ?? []),
+                        getLLMSteps: () => (result.llmSteps ?? []),
+                        getToolCalls: () => (result.toolCalls ?? []),
+                        getCustomSteps: () => (result.customSteps ?? []),
+                        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, null, result.currentOutput, result.ok ? undefined : result.error, traceStub, result.workflowTrace),
+                        workflowTrace: result.workflowTrace,
+                        currentOutput: result.currentOutput,
+                        snapshotId,
+                    };
+                    res.writeHead(200, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify(trace));
+                }
+                catch (error) {
+                    res.writeHead(500, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ ok: false, error: formatError(error) }));
+                }
+            })();
+        }
+        else if (url.pathname === '/api/snapshots' && req.method === 'GET') {
+            const id = url.searchParams.get('id');
+            if (!id) {
+                res.writeHead(400, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ ok: false, error: 'id is required.' }));
+            }
+            else {
+                const snap = loadSnapshot(cwd, id);
+                if (!snap) {
+                    res.writeHead(404, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ ok: false, error: 'Snapshot not found.' }));
+                }
+                else {
+                    res.writeHead(200, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify(snap));
+                }
+            }
+        }
+        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 ?? [], promptMocks: cfg?.promptMocks ?? {}, ...(cfg?.userPromptMocks ? { userPromptMocks: cfg.userPromptMocks } : {}), ...(cfg?.toolMockConfig ? { toolMockConfig: cfg.toolMockConfig } : {}), ...(cfg?.aiMockConfig ? { aiMockConfig: cfg.aiMockConfig } : {}) }));
+        }
+        else if (url.pathname === '/api/trace-events' && req.method === 'POST') {
+            // Receive telemetry events pushed from wrapAI / wrapTool in HTTP workflow mode
+            ;
+            (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);
+                    if (!existing) {
+                        console.log(`[elasticdash] /api/trace-events: unknown runId=${body.runId}, known runIds=[${[...pushedEvents.keys()].join(',')}]`);
+                        res.writeHead(404, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ ok: false, error: 'unknown runId' }));
+                        return;
+                    }
+                    const evt = body.event;
+                    existing.push(evt);
+                    console.log(`[elasticdash] /api/trace-events: stored event type=${evt.type} name=${('name' in evt ? evt.name : '?')} runId=${body.runId} total=${existing.length}`);
+                    res.writeHead(200, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ ok: true }));
+                }
+                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());
+        }
+    });
+    // Start listening
+    await new Promise((resolve, reject) => {
+        server.listen(port, () => resolve());
+        server.on('error', reject);
+    });
+    const snapshotsDir = path.join(cwd, '.temp', 'snapshots');
+    function cleanupSnapshots() {
+        try {
+            if (existsSync(snapshotsDir))
+                rmSync(snapshotsDir, { recursive: true, force: true });
+        }
+        catch { /* best-effort */ }
+    }
+    for (const sig of ['SIGINT', 'SIGTERM']) {
+        process.once(sig, () => {
+            cleanupSnapshots();
+            process.exit(0);
+        });
+    }
+    const url = `http://localhost:${port}`;
+    // Auto-open browser
+    if (autoOpen) {
+        openBrowser(url);
+    }
+    return {
+        url,
+        async close() {
+            cleanupSnapshots();
+            return new Promise((resolve, reject) => {
+                server.close((err) => {
+                    if (err)
+                        reject(err);
+                    else
+                        resolve();
+                });
+            });
+        },
+    };
+}
+// Watch for changes in eb_* files
+const watcher = chokidar.watch('**/*', {
+    ignored: /node_modules/,
+    persistent: true
+});
+watcher.on('ready', () => {
+    console.log('File watcher is ready');
+});
+watcher.on('error', (error) => {
+    console.error('File watcher error:', error);
+});
+// Throttle refetching to avoid excessive calls
+let refetchTimeout = null;
+watcher.on('change', (path) => {
+    if (refetchTimeout)
+        clearTimeout(refetchTimeout);
+    refetchTimeout = setTimeout(() => {
+        console.log(`File ${path} has been changed`);
+        refetchFunctions();
+    }, 1000); // Throttle to 1 second
+});
+async function refetchFunctions() {
+    console.log('Refetching functions...');
+    // Clear the require cache for all files in the watched directory (ESM-compatible)
+    const visited = new Set();
+    async function clearCacheRecursively(url) {
+        console.log(`Clearing cache for ${url}`);
+        if (visited.has(url))
+            return; // Avoid infinite loops in circular dependencies
+        visited.add(url);
+        try {
+            const worker = new Worker('./runner.js', {
+                workerData: { url },
+            });
+            worker.on('message', (message) => {
+                console.log(`Worker message: ${message}`);
+            });
+            worker.on('error', (error) => {
+                console.warn(`Worker error for ${url}:`, error);
+            });
+            worker.on('exit', (code) => {
+                if (code !== 0) {
+                    console.warn(`Worker stopped with exit code ${code}`);
+                }
+            });
+            await new Promise((resolve) => worker.on('exit', resolve));
+        }
+        catch (error) {
+            console.warn(`Failed to clear cache for ${url}:`, error);
+        }
+    }
+    try {
+        const watchedDirectory = 'path/to/watched/directory';
+        const resolvedUrl = pathToFileURL(watchedDirectory).href;
+        await clearCacheRecursively(resolvedUrl);
+        // Re-import and reload functions
+        const updatedFunctions = await import(`${resolvedUrl}?v=${Date.now()}`);
+        console.log('Functions reloaded:', Object.keys(updatedFunctions));
+    }
+    catch (error) {
+        console.error('Error reloading functions:', error);
+    }
+}
+// Global map for updated AI inputs (used by dashboard UI)
+// The dashboard.html UI expects three buttons for editable AI input:
+// - Edit: Shows textarea for editing input (only for AI calls)
+// - Save: Saves the updated input from textarea
+// - Reset: Removes the updated input and restores original
+// These buttons are rendered in the HTML string and handled by window.enableInputEditing, window.saveUpdatedInput, window.resetInput.
+export const updatedInputs = new Map();
+//# sourceMappingURL=dashboard-server.js.map