elasticdash-test 0.1.12-hotfix → 0.1.13-alpha

package/dist/dashboard-server.js

@@ -24,6 +24,9 @@ function loadSnapshot(cwd, snapshotId) {
         return null;
     }
 }
+function isDenoProject(dir) {
+    return existsSync(path.join(dir, 'deno.json')) || existsSync(path.join(dir, 'deno.jsonc'));
+}
 function resolveRuntimeModule(cwd, baseName) {
     for (const ext of ['.ts', '.tsx', '.js', '.jsx']) {
         const candidate = path.join(cwd, `${baseName}${ext}`);
@@ -164,12 +167,21 @@ function formatError(error) {
 }
 function runToolInSubprocess(toolsModulePath, toolName, args) {
     return new Promise((resolve) => {
+        const startMs = Date.now();
         const workerScript = new URL('./tool-runner-worker.js', import.meta.url).pathname;
-        // Forward NODE_OPTIONS so tsx/esm transpiles TypeScript in the child process
+        const projectDir = path.dirname(toolsModulePath);
+        const denoProject = isDenoProject(projectDir);
+        // For Deno projects use `deno run --allow-all` so that https:// imports and
+        // TypeScript are handled natively. For Node projects keep the existing tsx path.
         const nodeOptions = process.env.NODE_OPTIONS ?? '';
-        const childEnv = { ...process.env, NODE_OPTIONS: nodeOptions };
-        const child = spawn(process.execPath, [workerScript], {
+        const tsxFlag = '--import tsx';
+        const childNodeOptions = nodeOptions.includes('tsx') ? nodeOptions : `${nodeOptions} ${tsxFlag}`.trim();
+        const childEnv = { ...process.env, NODE_OPTIONS: denoProject ? nodeOptions : childNodeOptions };
+        const runtime = denoProject ? 'deno' : process.execPath;
+        const runtimeArgs = denoProject ? ['run', '--allow-all', workerScript] : [workerScript];
+        const child = spawn(runtime, runtimeArgs, {
             env: childEnv,
+            cwd: projectDir,
             stdio: ['pipe', 'pipe', 'pipe'],
         });
         const RESULT_PREFIX = '__ELASTICDASH_RESULT__:';
@@ -191,17 +203,21 @@ function runToolInSubprocess(toolsModulePath, toolName, args) {
             process.stderr.write(chunk);
         });
         child.on('close', () => {
+            const currentDurationMs = Date.now() - startMs;
             if (resultLine) {
                 try {
-                    resolve(JSON.parse(resultLine));
+                    resolve({ ...JSON.parse(resultLine), currentDurationMs });
                     return;
                 }
                 catch { /* fall through */ }
             }
-            resolve({ ok: false, error: stderr.trim() || 'Tool subprocess produced no output.' });
+            resolve({ ok: false, error: stderr.trim() || 'Tool subprocess produced no output.', currentDurationMs });
         });
         child.on('error', (err) => {
-            resolve({ ok: false, error: `Failed to spawn tool subprocess: ${err.message}` });
+            const hint = denoProject && err.code === 'ENOENT'
+                ? ' (Deno project detected — ensure "deno" is installed and available in PATH)'
+                : '';
+            resolve({ ok: false, error: `Failed to spawn tool subprocess: ${err.message}${hint}`, currentDurationMs: Date.now() - startMs });
         });
         // Always use absolute file URL for toolsModulePath
         const payload = JSON.stringify({
@@ -216,17 +232,40 @@ function runToolInSubprocess(toolsModulePath, toolName, args) {
 function runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowName, args, input, options) {
     return new Promise((resolve) => {
         const workerScript = new URL('./workflow-runner-worker.js', import.meta.url).pathname;
-        // Forward NODE_OPTIONS so tsx/esm transpiles TypeScript in the child process
+        const projectDir = path.dirname(workflowsModulePath);
+        const denoProject = isDenoProject(projectDir);
+        // For Deno projects use `deno run --allow-all` so that https:// imports and
+        // TypeScript are handled natively. For Node projects keep the existing tsx path.
         const nodeOptions = process.env.NODE_OPTIONS ?? '';
-        const childEnv = { ...process.env, NODE_OPTIONS: nodeOptions };
-        const child = spawn(process.execPath, [workerScript], {
+        const tsxFlag = '--import tsx';
+        const childNodeOptions = nodeOptions.includes('tsx') ? nodeOptions : `${nodeOptions} ${tsxFlag}`.trim();
+        const childEnv = { ...process.env, NODE_OPTIONS: denoProject ? nodeOptions : childNodeOptions };
+        const runtime = denoProject ? 'deno' : process.execPath;
+        const runtimeArgs = denoProject ? ['run', '--allow-all', workerScript] : [workerScript];
+        const child = spawn(runtime, runtimeArgs, {
             env: childEnv,
+            cwd: projectDir,
             stdio: ['pipe', 'pipe', 'pipe', 'pipe'],
         });
         let fd3Data = '';
         let stderr = '';
+        // Line-buffer stdout so that large result JSON lines split across multiple
+        // data events are reassembled before processing.
+        const WORKFLOW_RESULT_PREFIX = '__ELASTICDASH_RESULT__:';
+        let stdoutBuf = '';
         child.stdout.on('data', (chunk) => {
-            process.stdout.write(chunk);
+            stdoutBuf += chunk.toString();
+            const lines = stdoutBuf.split('\n');
+            stdoutBuf = lines.pop() ?? ''; // keep last (possibly incomplete) line
+            for (const line of lines) {
+                if (line.startsWith(WORKFLOW_RESULT_PREFIX)) {
+                    // Stdout fallback channel (used by Deno when fd3 is unavailable)
+                    fd3Data += line.slice(WORKFLOW_RESULT_PREFIX.length);
+                }
+                else if (line) {
+                    process.stdout.write(line + '\n');
+                }
+            }
         });
         child.stderr.on('data', (chunk) => {
             stderr += chunk.toString();
@@ -237,6 +276,13 @@ function runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowN
             fd3Data += chunk.toString();
         });
         child.on('close', () => {
+            // Flush any remaining buffered stdout line (e.g. result with no trailing newline)
+            if (stdoutBuf.startsWith(WORKFLOW_RESULT_PREFIX)) {
+                fd3Data += stdoutBuf.slice(WORKFLOW_RESULT_PREFIX.length);
+            }
+            else if (stdoutBuf) {
+                process.stdout.write(stdoutBuf + '\n');
+            }
             if (fd3Data) {
                 try {
                     resolve(JSON.parse(fd3Data));
@@ -247,7 +293,10 @@ function runWorkflowInSubprocess(workflowsModulePath, toolsModulePath, workflowN
             resolve({ ok: false, error: stderr.trim() || 'Workflow subprocess produced no output.' });
         });
         child.on('error', (err) => {
-            resolve({ ok: false, error: `Failed to spawn workflow subprocess: ${err.message}` });
+            const hint = denoProject && err.code === 'ENOENT'
+                ? ' (Deno project detected — ensure "deno" is installed and available in PATH)'
+                : '';
+            resolve({ ok: false, error: `Failed to spawn workflow subprocess: ${err.message}${hint}` });
         });
         // Always use absolute file URL for workflowsModulePath and toolsModulePath
         const payload = JSON.stringify({
@@ -301,8 +350,8 @@ async function runGenerationObservation(observation) {
         const model = observation.model;
         const temperature = typeof observation.modelParameters?.temperature === 'number' ? observation.modelParameters.temperature : 0;
         const maxTokens = typeof observation.modelParameters?.max_tokens === 'number' ? observation.modelParameters.max_tokens : 512;
-        const output = await callProviderLLM(prompt, { provider, model }, systemPrompt ?? 'You are a helpful assistant.', maxTokens, temperature);
-        return { ok: true, currentOutput: output };
+        const result = await callProviderLLM(prompt, { provider, model }, systemPrompt ?? 'You are a helpful assistant.', maxTokens, temperature);
+        return { ok: true, currentOutput: result.content, currentDurationMs: result.durationMs, currentUsage: result.usage };
     }
     catch (error) {
         return { ok: false, error: `Generation rerun failed: ${formatError(error)}` };
@@ -418,64 +467,21 @@ function toObservationFromWorkflowEvent(event) {
         const inp = event.input;
         const out = event.output;
         const provider = inp?.provider ?? '';
-        let completion = '';
-        if (out) {
-            if (out.streamed === true && typeof out.completion === 'string') {
-                completion = out.completion;
-            }
-            else if (provider === 'gemini') {
-                const candidates = out.candidates;
-                if (Array.isArray(candidates) && candidates.length > 0) {
-                    const first = candidates[0];
-                    if (first.content && typeof first.content === 'object') {
-                        const parts = first.content.parts;
-                        if (Array.isArray(parts) && parts.length > 0) {
-                            completion = String(parts[0].text ?? '');
-                        }
-                    }
-                }
-            }
-            else {
-                const choices = out.choices;
-                if (Array.isArray(choices) && choices.length > 0) {
-                    const first = choices[0];
-                    if (first.message && typeof first.message === 'object') {
-                        completion = String(first.message.content ?? '');
-                    }
-                    else if (typeof first.text === 'string') {
-                        completion = first.text;
-                    }
-                }
-                // Embedding response: data[].embedding
-                if (!completion) {
-                    const data = out.data;
-                    if (Array.isArray(data) && data.length > 0) {
-                        const first = data[0];
-                        if (Array.isArray(first?.embedding)) {
-                            completion = `[${data.length} embedding(s), ${first.embedding.length} dimensions]`;
-                        }
-                    }
-                }
-                // Gemini embedding response: embeddings[].values
-                if (!completion) {
-                    const embeddings = out.embeddings;
-                    if (Array.isArray(embeddings) && embeddings.length > 0) {
-                        const first = embeddings[0];
-                        if (Array.isArray(first?.values)) {
-                            completion = `[${embeddings.length} embedding(s), ${first.values.length} dimensions]`;
-                        }
-                    }
-                }
-            }
+        // For streaming events, out is { streamed: true, completion } — extract text for fallback
+        let streamedCompletion;
+        if (out?.streamed === true && typeof out.completion === 'string') {
+            streamedCompletion = out.completion;
         }
         return {
             type: 'GENERATION',
             name: provider || 'llm',
             provider: provider || undefined,
             model: inp?.model ?? event.name,
-            input: inp?.prompt,
-            output: completion,
+            input: inp?.messages ?? inp?.prompt,
+            output: streamedCompletion !== undefined ? streamedCompletion : out,
             startTime: normalizeStartTime(event.timestamp),
+            durationMs: event.durationMs,
+            usage: event.usage,
             workflowEventId: event.id,
             ...agentFields,
         };
@@ -487,6 +493,7 @@ function toObservationFromWorkflowEvent(event) {
             input: event.input,
             output: event.output,
             startTime: normalizeStartTime(event.timestamp),
+            durationMs: event.durationMs,
             workflowEventId: event.id,
             ...agentFields,
         };
@@ -499,6 +506,7 @@ function toObservationFromWorkflowEvent(event) {
             input: event.input,
             output: event.output,
             startTime: normalizeStartTime(event.timestamp),
+            durationMs: event.durationMs,
             workflowEventId: event.id,
             ...agentFields,
         };
@@ -510,6 +518,7 @@ function toObservationFromWorkflowEvent(event) {
             input: event.input,
             output: event.output,
             startTime: normalizeStartTime(event.timestamp),
+            durationMs: event.durationMs,
             workflowEventId: event.id,
             ...agentFields,
         };
@@ -520,6 +529,7 @@ function toObservationFromWorkflowEvent(event) {
         input: event.input,
         output: event.output,
         startTime: normalizeStartTime(event.timestamp),
+        durationMs: event.durationMs,
         workflowEventId: event.id,
         ...agentFields,
     };
@@ -571,6 +581,22 @@ function buildValidationObservations(workflowName, workflowInput, workflowOutput
             }
         }
     }
+    // Compute total duration and aggregate token usage for the container observation
+    if (workflowTrace && workflowTrace.events.length > 0) {
+        const endTime = workflowTrace.events.reduce((max, e) => Math.max(max, e.timestamp + e.durationMs), workflowStartTime);
+        observations[0].durationMs = endTime - workflowStartTime;
+        let inputTokens = 0, outputTokens = 0, totalTokens = 0;
+        for (const e of workflowTrace.events) {
+            if (e.type === 'ai' && e.usage) {
+                inputTokens += e.usage.inputTokens ?? 0;
+                outputTokens += e.usage.outputTokens ?? 0;
+                totalTokens += e.usage.totalTokens ?? 0;
+            }
+        }
+        if (totalTokens > 0) {
+            observations[0].usage = { inputTokens, outputTokens, totalTokens };
+        }
+    }
     // Sort all observations except the workflow entry (index 0) by startTime
     const [workflowEntry, ...rest] = observations;
     rest.sort((a, b) => (a.startTime ?? 0) - (b.startTime ?? 0));
@@ -1067,7 +1093,7 @@ function getDashboardHtml() {
                             <div class="trace-section-title">Observations</div>
                             <div class="observation-table-wrap">
                                 <table class="observation-table">
-                                <thead id="observationTableHead"><tr><th style="width: 40px;">Check</th><th>Name</th><th>Type</th></tr></thead>
+                                <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>
@@ -1098,6 +1124,47 @@ function getDashboardHtml() {
             } catch {}
             let step5RunMeta = { loading: false, error: '', runCount: 0, sequential: 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.usage && (obs.usage.inputTokens != null || obs.usage.outputTokens != null)) {
+                    return obs.usage;
+                }
+                if (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.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)
@@ -1202,8 +1269,12 @@ function getDashboardHtml() {
                 // Extract unique tool names and their call details from the uploaded trace observations
                 const toolCalls = {};
                 currentObservations.forEach(function(obs, i) {
-                    if (obs.type !== 'TOOL') return;
-                    const name = obs.name || '(unknown)';
+                    const isToolByType = obs.type === 'TOOL';
+                    const isToolByName = typeof obs.name === 'string' && obs.name.startsWith('tool-');
+                    if (!isToolByType && !isToolByName) return;
+                    const name = isToolByName && obs.type !== 'TOOL'
+                        ? obs.name.slice(5)
+                        : (obs.name || '(unknown)');
                     if (!toolCalls[name]) toolCalls[name] = [];
                     toolCalls[name].push({ index: toolCalls[name].length + 1, obsIndex: i, input: obs.input, output: obs.output });
                 });
@@ -1643,6 +1714,27 @@ function getDashboardHtml() {
                     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();
@@ -1709,7 +1801,7 @@ function getDashboardHtml() {
                         observationsTable += \`<div class="trace-section-title">Observations</div>
                         <div class="observation-table-wrap">
                             <table class="observation-table">
-                            <thead><tr><th>Name</th><th>Type</th></tr></thead>
+                            <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;
@@ -1718,7 +1810,7 @@ function getDashboardHtml() {
                             const typeClass = type === "TOOL" ? "tool" : "ai";
                             const agentBadge = obs.agentTaskIndex != null ? \`<span class="agent-task-badge">T\${obs.agentTaskIndex + 1}</span>\` : '';
                             const rowClass = obs.agentTaskIndex != null ? 'agent-task-row' : '';
-                            return \`<tr class="\${isSelected ? "selected" : ""} \${rowClass}" onclick="window.step5SelectedObservation=\${j};renderObservationTable();"><td>\${esc(name)}\${agentBadge}</td><td><span class="obs-type \${typeClass}">\${esc(type)}</span></td></tr>\`;
+                            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
@@ -1730,9 +1822,12 @@ function getDashboardHtml() {
                         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>
@@ -1753,7 +1848,7 @@ function getDashboardHtml() {
                             observationsTable += \`<div class="trace-section-title">Observations</div>
                                 <div class="observation-table-wrap">
                                 <table class="observation-table">
-                                    <thead><tr><th>Name</th><th>Type</th></tr></thead>
+                                    <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;
@@ -1767,7 +1862,7 @@ function getDashboardHtml() {
                                     action.agentTaskIndex != null ? 'agent-task-row' : '',
                                     action.isFrozen ? 'frozen-row' : '',
                                 ].filter(Boolean).join(' ');
-                                return \`<tr class="\${rowClasses}" onclick="window.step5SelectedObservation=\${j};renderObservationTable();"><td>\${esc(name)}\${agentBadge}\${frozenBadge}</td><td><span class="obs-type \${typeClass}">\${esc(type)}</span></td></tr>\`;
+                                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
@@ -1799,10 +1894,13 @@ function getDashboardHtml() {
                                 } 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>
@@ -1860,7 +1958,7 @@ function getDashboardHtml() {
                     let col1 = \`<div class="trace-section-title">Steps</div>
                         <div class="observation-table-wrap">
                         <table class="observation-table">
-                        <thead><tr><th>Name</th><th>Type</th></tr></thead>
+                        <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];
@@ -1875,7 +1973,7 @@ function getDashboardHtml() {
                                 : latest.ok ? ' <span class="rerun-status success">✓</span>'
                                 : ' <span class="rerun-status error">✗</span>')
                             : '';
-                        return \`<tr class="\${isSelected ? 'selected' : ''}" onclick="window.step4SelectObservation(\${idx})"><td>\${esc(name)}\${badge}</td><td><span class="obs-type \${typeClass}">\${esc(type)}</span></td></tr>\`;
+                        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>\`;
 
@@ -1945,9 +2043,24 @@ function getDashboardHtml() {
                         } 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}
@@ -2013,6 +2126,7 @@ function getDashboardHtml() {
                     <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("");
 
@@ -2061,9 +2175,12 @@ function getDashboardHtml() {
                 ? '<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>
@@ -2105,6 +2222,8 @@ function getDashboardHtml() {
                     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.';
@@ -2402,16 +2521,46 @@ function getDashboardHtml() {
                     }
                 }
                 
-                // Handle GENERATION output format: {role, content, ...}
-                if (type === "GENERATION" && value.role && value.content) {
-                    return stripMarkdownCodeFence(value.content || "No content");
+                // GENERATION input: raw messages array
+                if (type === "GENERATION" && Array.isArray(value)) {
+                    return JSON.stringify(value, null, 2);
                 }
-                
-                // Handle GENERATION input format: {messages: [...]}
+
+                // 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);