Parse reasoning, tool calls, route and usage; live OpenRouter pricing

api-tester.html

@@ -314,7 +314,7 @@
             flex-direction: column;
             gap: 0.5rem;
             min-height: 200px;
-            max-height: 400px;
+            max-height: 720px;
             overflow-y: auto;
         }
 
@@ -371,6 +371,7 @@
         }
 
         .status-dot.success { background: var(--success); }
+        .status-dot.warning { background: var(--warning); }
         .status-dot.error { background: var(--error); }
 
         @keyframes pulse {
@@ -385,7 +386,7 @@
             line-height: 1.5;
             white-space: pre-wrap;
             word-break: break-word;
-            max-height: 150px;
+            max-height: 360px;
             overflow-y: auto;
         }
 
@@ -394,6 +395,30 @@
             overflow: hidden;
         }
 
+        /* Parsed turn: answer, reasoning, tools, route, usage */
+        .turn { white-space: normal; font-family: inherit; }
+        .turn .dim { color: var(--text-dim); }
+        .turn-meta, .turn-metrics, .turn-route { font-size: 0.75rem; margin-bottom: 0.35rem; }
+        .turn-metrics { color: var(--accent-hover); }
+        .badge {
+            display: inline-block;
+            padding: 0 0.4rem;
+            border-radius: 4px;
+            font-size: 0.7rem;
+            font-weight: 700;
+            text-transform: uppercase;
+        }
+        .badge-ok { background: rgba(34, 197, 94, 0.15); color: var(--success); }
+        .badge-err { background: rgba(239, 68, 68, 0.15); color: var(--error); }
+        .badge-run { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
+        .turn-section { margin: 0.35rem 0; border: 1px solid var(--border); border-radius: 6px; }
+        .turn-section summary { cursor: pointer; padding: 0.25rem 0.5rem; font-size: 0.75rem; color: var(--text-dim); }
+        .section-body { padding: 0.35rem 0.5rem; white-space: pre-wrap; font-size: 0.75rem; }
+        .tool-row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.15rem 0; }
+        .answer { white-space: pre-wrap; margin: 0.35rem 0; }
+        .turn-warning { color: var(--warning); font-size: 0.75rem; margin: 0.35rem 0; }
+        .price-status { font-size: 0.75rem; color: var(--text-dim); padding-top: 0.45rem; white-space: nowrap; }
+
         /* Stream Preview */
         .stream-preview {
             font-family: 'SF Mono', monospace;
@@ -414,7 +439,7 @@
             background: rgba(99, 102, 241, 0.05);
             border-top: 1px solid var(--border);
             display: grid;
-            grid-template-columns: repeat(3, 1fr);
+            grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
             gap: 0.5rem;
             font-size: 0.75rem;
         }
@@ -513,16 +538,21 @@
         <div class="field">
             <label>Output</label>
             <div class="mode-toggle">
-                <label title="Show raw SSE events as-is">
-                    <input type="radio" name="outputMode" value="raw" checked>
+                <label title="Show raw SSE events as-is (stats are still parsed)">
+                    <input type="radio" name="outputMode" value="raw">
                     <span>RAW</span>
                 </label>
-                <label title="Parse and show only text content">
-                    <input type="radio" name="outputMode" value="parsed">
+                <label title="Answer, reasoning, tool calls, route, usage and cost">
+                    <input type="radio" name="outputMode" value="parsed" checked>
                     <span>Parsed</span>
                 </label>
             </div>
         </div>
+        <div class="field">
+            <label title="Live price list from openrouter.ai/api/v1/models; used when the API reports no cost">Prices (OpenRouter)</label>
+            <div class="price-status" id="openrouterStatus">loading…</div>
+            <datalist id="openrouterModels"></datalist>
+        </div>
     </div>
 
     <div class="toolbar">
@@ -608,8 +638,8 @@
             return div.innerHTML;
         }
 
-        // Results storage for export
-        const testResults = new Map();
+        // Parsed step summaries per lane: laneId -> { steps: [...] }
+        const laneRuns = new Map();
 
         function collectResults() {
             const results = {
@@ -632,11 +662,8 @@
                     },
                     prompts: [],
                     responses: [],
-                    stats: {
-                        ttft: document.getElementById(`${laneId}-ttft`)?.textContent || '-',
-                        tps: document.getElementById(`${laneId}-tps`)?.textContent || '-',
-                        total: document.getElementById(`${laneId}-total`)?.textContent || '-'
-                    }
+                    steps: laneRuns.get(laneId)?.steps || [],
+                    stats: aggregateLaneStats(laneRuns.get(laneId)?.steps || [])
                 };
 
                 // Collect prompts
@@ -644,10 +671,8 @@
                 for (let i = 1; i <= chainLength; i++) {
                     const promptEl = document.getElementById(`${laneId}-prompt-${i}`);
                     if (promptEl) laneData.prompts.push(promptEl.value);
-
-                    const outputEl = document.getElementById(`${laneId}-output-${i}`);
-                    if (outputEl) laneData.responses.push(outputEl.textContent);
                 }
+                laneData.responses = laneData.steps.map(step => step.raw ?? step.text);
 
                 results.lanes.push(laneData);
             });
@@ -674,13 +699,23 @@
             text += `Stream Mode: ${results.globalConfig.streamMode}\n\n`;
 
             results.lanes.forEach((lane, idx) => {
+                const s = lane.stats;
                 text += `═══ Lane ${idx + 1}: ${lane.config.model} ═══\n`;
                 text += `Endpoint: ${lane.config.endpoint}\n`;
-                text += `Stats: TTFT=${lane.stats.ttft} | tok/s=${lane.stats.tps} | Total=${lane.stats.total}\n\n`;
+                text += `Stats: TTFT=${s.ttft} | decode=${s.tps} tok/s | out=${s.out} | tools=${s.tools} | Total=${s.total} | cost=${s.cost}\n\n`;
 
                 lane.prompts.forEach((prompt, i) => {
                     text += `[Prompt ${i+1}]: ${prompt.slice(0, 100)}${prompt.length > 100 ? '...' : ''}\n`;
-                    text += `[Response ${i+1}]: ${(lane.responses[i] || '').slice(0, 200)}${(lane.responses[i] || '').length > 200 ? '...' : ''}\n\n`;
+                    const step = lane.steps[i];
+                    if (!step) {
+                        text += `[Response ${i+1}]: (not run)\n\n`;
+                        return;
+                    }
+                    text += `[Response ${i+1}]: ${describeStep(step)}\n`;
+                    step.tools.forEach(tool => { text += `  tool: ${describeTool(tool)}\n`; });
+                    if (step.reasoningChars) text += `  reasoning: ${step.reasoningChars} chars\n`;
+                    step.warnings.forEach(warning => { text += `  ⚠ ${warning}\n`; });
+                    text += `  answer: ${step.text ? truncate(step.text, 200) : '(no answer text)'}\n\n`;
                 });
                 text += '\n';
             });
@@ -779,6 +814,7 @@
                     model: document.getElementById(`${laneId}-model`)?.value || 'chat',
                     chain: chainCount,
                     systemPrompt: document.getElementById(`${laneId}-system`)?.value || '',
+                    priceAs: document.getElementById(`${laneId}-priceAs`)?.value || '',
                     prompts: []
                 };
 
@@ -844,6 +880,8 @@
                     updatePrompts(laneId);
                 }
                 if (systemEl) systemEl.value = laneData.systemPrompt;
+                const priceAsEl = document.getElementById(`${laneId}-priceAs`);
+                if (priceAsEl) priceAsEl.value = laneData.priceAs || '';
 
                 // Set prompts (after updatePrompts created the fields)
                 setTimeout(() => {
@@ -899,6 +937,7 @@
             updatePrompts('lane-1'); // Generate all 4 canonical prompts
             updateLogCount();
             updatePresetDropdown();
+            loadOpenRouterCatalog();
         });
 
         function addLane() {
@@ -939,6 +978,10 @@
                             <input type="number" id="${laneId}-chain" value="4" min="1" max="10" onchange="updatePrompts('${laneId}')">
                         </div>
                     </div>
+                    <div class="field">
+                        <label title="OpenRouter model whose live price estimates this lane's cost; empty = auto from the model name">Price as (OpenRouter model)</label>
+                        <input type="text" id="${laneId}-priceAs" list="openrouterModels" placeholder="auto (e.g. qwen/qwen3.8-flash)">
+                    </div>
                     <div class="field">
                         <label>System Prompt (optional)</label>
                         <textarea id="${laneId}-system" placeholder="You are a helpful assistant..."></textarea>
@@ -978,18 +1021,30 @@
                 </div>
 
                 <div class="lane-stats" id="${laneId}-stats" style="display: none;">
-                    <div class="stat">
+                    <div class="stat" title="First output of any kind (reasoning, text or tool) in step 1">
                         <div class="stat-value" id="${laneId}-ttft">-</div>
                         <div class="stat-label">TTFT</div>
                     </div>
-                    <div class="stat">
+                    <div class="stat" title="usage.output_tokens ÷ time between the first and the last delta, all steps">
                         <div class="stat-value" id="${laneId}-tps">-</div>
-                        <div class="stat-label">tok/s</div>
+                        <div class="stat-label">decode tok/s</div>
+                    </div>
+                    <div class="stat" title="usage.output_tokens (of which reasoning), all steps">
+                        <div class="stat-value" id="${laneId}-out">-</div>
+                        <div class="stat-label">out tok (reason)</div>
+                    </div>
+                    <div class="stat" title="Tool calls and their wall time, all steps">
+                        <div class="stat-value" id="${laneId}-tools">-</div>
+                        <div class="stat-label">tools</div>
                     </div>
                     <div class="stat">
                         <div class="stat-value" id="${laneId}-total">-</div>
                         <div class="stat-label">Total</div>
                     </div>
+                    <div class="stat" title="Reported by the API, or estimated from the price fields">
+                        <div class="stat-value" id="${laneId}-cost">-</div>
+                        <div class="stat-label">cost</div>
+                    </div>
                 </div>
             `;
 
@@ -1170,6 +1225,7 @@
                 outputSection.innerHTML = '<h4>Responses</h4>';
                 document.getElementById(`${laneId}-stats`).style.display = 'none';
             });
+            laneRuns.clear();
         }
 
         function handleAttachmentSelection(laneId) {
@@ -1286,9 +1342,8 @@
             statsSection.style.display = 'grid';
 
             let previousResponseId = null;
-            let totalTokens = 0;
-            let totalTime = 0;
-            let firstTTFT = null;
+            const laneRun = { steps: [] };
+            laneRuns.set(laneId, laneRun);
 
             for (let step = 1; step <= chainCount; step++) {
                 const prompt = document.getElementById(`${laneId}-prompt-${step}`).value;
@@ -1327,17 +1382,16 @@
                     });
 
                     previousResponseId = result.responseId;
-                    totalTokens += result.tokens;
-                    totalTime += result.time;
-                    if (step === 1) firstTTFT = result.ttft;
-
-                    // Update stats
-                    document.getElementById(`${laneId}-ttft`).textContent = `${firstTTFT}ms`;
-                    document.getElementById(`${laneId}-tps`).textContent =
-                        totalTime > 0 ? (totalTokens / (totalTime / 1000)).toFixed(1) : '-';
-                    document.getElementById(`${laneId}-total`).textContent = `${(totalTime / 1000).toFixed(2)}s`;
+                    laneRun.steps.push(result.summary);
+                    const stats = aggregateLaneStats(laneRun.steps);
+                    for (const key of ['ttft', 'tps', 'out', 'tools', 'total', 'cost']) {
+                        document.getElementById(`${laneId}-${key}`).textContent = stats[key];
+                    }
 
-                    document.getElementById(`${laneId}-dot-${step}`).className = 'status-dot success';
+                    const completed = result.summary.status === 'completed';
+                    document.getElementById(`${laneId}-dot-${step}`).className = !completed
+                        ? 'status-dot error'
+                        : (result.summary.warnings.length ? 'status-dot warning' : 'status-dot success');
 
                 } catch (error) {
                     document.getElementById(`${laneId}-output-${step}`).textContent = `Error: ${error.message}`;
@@ -1347,18 +1401,529 @@
             }
         }
 
+        // ===== Responses / Chat Completions stream parsing =====
+        const TERMINAL_TYPES = new Set([
+            'response.completed', 'response.failed', 'response.incomplete', 'response.cancelled'
+        ]);
+        const TOOL_ITEM_TYPES = new Set([
+            'function_call', 'web_search_call', 'file_search_call', 'code_interpreter_call',
+            'computer_call', 'image_generation_call', 'mcp_call', 'custom_tool_call', 'local_shell_call'
+        ]);
+        const HOSTED_TOOL_EVENT =
+            /^response\.(web_search_call|file_search_call|code_interpreter_call|image_generation_call|mcp_call)\.([a-z_]+)$/;
+
+        function truncate(text, limit) {
+            const value = String(text ?? '');
+            return value.length > limit ? `${value.slice(0, limit)}…` : value;
+        }
+
+        // ===== Live price list: openrouter.ai/api/v1/models (public, CORS *) =====
+        const OPENROUTER_CATALOG_URL = 'https://openrouter.ai/api/v1/models';
+        const OPENROUTER_CACHE_KEY = 'api-tester-openrouter-catalog';
+        const OPENROUTER_CACHE_TTL_MS = 24 * 60 * 60 * 1000;
+        // Every gateway alias runs on the fused Qwen3.8-Flash-Next runtime, whose
+        // hosted counterpart on OpenRouter is qwen/qwen3.8-flash.
+        const FLASH_ALIASES = new Set([
+            'chat', 'buddy', 'programmer', 'master', 'vision', 'soap', 'ai-suggestions', 'svetliq', 'gpt-oss-20b'
+        ]);
+        const openRouterPricing = new Map();
+
+        function applyOpenRouterCatalog(models, fetchedAt) {
+            openRouterPricing.clear();
+            const options = [];
+            for (const model of models) {
+                if (!model?.id || !model.pricing) continue;
+                openRouterPricing.set(model.id, model);
+                options.push(`<option value="${escapeHtml(model.id)}">${escapeHtml(model.name || '')}</option>`);
+            }
+            const datalist = document.getElementById('openrouterModels');
+            if (datalist) datalist.innerHTML = options.join('');
+            const status = document.getElementById('openrouterStatus');
+            if (status) status.textContent = `${openRouterPricing.size} models · ${new Date(fetchedAt).toLocaleString()}`;
+        }
+
+        async function loadOpenRouterCatalog() {
+            try {
+                const cached = JSON.parse(localStorage.getItem(OPENROUTER_CACHE_KEY) || 'null');
+                if (cached?.models?.length && Date.now() - cached.fetchedAt < OPENROUTER_CACHE_TTL_MS) {
+                    applyOpenRouterCatalog(cached.models, cached.fetchedAt);
+                    return;
+                }
+            } catch (e) {
+                // Unreadable cache: fetch a fresh list below.
+            }
+            try {
+                const response = await fetch(OPENROUTER_CATALOG_URL);
+                if (!response.ok) throw new Error(`HTTP ${response.status}`);
+                const body = await response.json();
+                const models = (body.data || []).map(model => ({ id: model.id, name: model.name, pricing: model.pricing }));
+                const fetchedAt = Date.now();
+                applyOpenRouterCatalog(models, fetchedAt);
+                try {
+                    localStorage.setItem(OPENROUTER_CACHE_KEY, JSON.stringify({ fetchedAt, models }));
+                } catch (e) {
+                    // Storage quota: keep the list in memory for this session only.
+                }
+            } catch (e) {
+                const status = document.getElementById('openrouterStatus');
+                if (status) status.textContent = `unavailable (${e.message})`;
+            }
+        }
+
+        function priceModelFor(laneId, model) {
+            const explicit = document.getElementById(`${laneId}-priceAs`)?.value.trim();
+            if (explicit) return explicit;
+            const name = String(model || '').trim();
+            const lower = name.toLowerCase();
+            if (openRouterPricing.has(name)) return name;
+            if (lower.includes('qwen3.8-27b')) return 'qwen/qwen3.8-27b';
+            if (FLASH_ALIASES.has(lower) || lower.includes('qwen3.8-flash')) return 'qwen/qwen3.8-flash';
+            return null;
+        }
+
+        async function* readSseEvents(response) {
+            // An event may straddle network chunks, and so may a multi-byte character.
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+            while (true) {
+                const { done, value } = await reader.read();
+                buffer += decoder.decode(value || new Uint8Array(), { stream: !done });
+                buffer = buffer.replace(/\r\n/g, '\n');
+                let boundary;
+                while ((boundary = buffer.indexOf('\n\n')) !== -1) {
+                    const block = buffer.slice(0, boundary);
+                    buffer = buffer.slice(boundary + 2);
+                    if (block.trim()) yield parseSseBlock(block);
+                }
+                if (done) {
+                    if (buffer.trim()) yield parseSseBlock(buffer);
+                    return;
+                }
+            }
+        }
+
+        function parseSseBlock(block) {
+            let event = null;
+            const data = [];
+            for (const line of block.split('\n')) {
+                if (line.startsWith('event:')) event = line.slice(6).trim();
+                else if (line.startsWith('data:')) data.push(line.slice(5).replace(/^ /, ''));
+            }
+            return { event, data: data.join('\n'), raw: block };
+        }
+
+        function createTurnState() {
+            return {
+                responseId: null, model: null, status: null,
+                text: '', reasoning: '',
+                tools: new Map(), route: [],
+                usage: null, metadata: null, error: null, incomplete: null, reportedCost: null,
+                firstOutputAt: null, firstTextAt: null, lastDeltaAt: null,
+                rawBlocks: []
+            };
+        }
+
+        function markDelta(state, now, isText) {
+            if (state.firstOutputAt === null) state.firstOutputAt = now;
+            if (isText && state.firstTextAt === null) state.firstTextAt = now;
+            state.lastDeltaAt = now;
+        }
+
+        function toolFor(state, itemId, outputIndex, type) {
+            let key = itemId;
+            if ((!key || !state.tools.has(key)) && outputIndex !== undefined && outputIndex !== null) {
+                for (const [existingKey, tool] of state.tools) {
+                    if (tool.outputIndex === outputIndex) { key = existingKey; break; }
+                }
+            }
+            key = key || `index-${outputIndex}`;
+            if (!state.tools.has(key)) {
+                state.tools.set(key, {
+                    type: type || 'tool', name: '', args: '', status: '', query: '', sources: null,
+                    outputIndex, startedAt: null, endedAt: null
+                });
+            }
+            const tool = state.tools.get(key);
+            if (type && tool.type === 'tool') tool.type = type;
+            return tool;
+        }
+
+        function recordToolItem(state, item, outputIndex, now, finished) {
+            if (!item || !TOOL_ITEM_TYPES.has(item.type)) return false;
+            const tool = toolFor(state, item.id, outputIndex, item.type);
+            if (tool.startedAt === null) tool.startedAt = now;
+            if (item.name) tool.name = item.name;
+            if (typeof item.arguments === 'string' && item.arguments) tool.args = item.arguments;
+            if (item.status) tool.status = item.status;
+            const action = item.action || {};
+            if (action.query) tool.query = action.query;
+            if (Array.isArray(action.sources)) tool.sources = action.sources.length;
+            if (finished && tool.endedAt === null) tool.endedAt = now;
+            return true;
+        }
+
+        function messageText(item) {
+            return (item.content || [])
+                .filter(part => part.type === 'output_text' || part.type === 'text')
+                .map(part => part.text || '')
+                .join('');
+        }
+
+        function reasoningText(item) {
+            return [...(item.summary || []), ...(item.content || [])].map(part => part.text || '').join('\n');
+        }
+
+        function applyResponseObject(state, response, now) {
+            if (!response || typeof response !== 'object') return;
+            state.responseId = response.id || state.responseId;
+            state.model = response.model || state.model;
+            if (response.status) state.status = response.status;
+            if (response.usage) state.usage = response.usage;
+            if (response.metadata && Object.keys(response.metadata).length) state.metadata = response.metadata;
+            if (response.error) state.error = response.error;
+            if (response.incomplete_details) state.incomplete = response.incomplete_details;
+            const cost = response.usage?.cost ?? response.usage?.total_cost ?? response.metadata?.cost
+                ?? response.metadata?.price ?? response.cost;
+            if (cost !== undefined && cost !== null) state.reportedCost = cost;
+            // Deltas are the live truth; the terminal object only fills what never streamed.
+            const hadText = Boolean(state.text);
+            const hadReasoning = Boolean(state.reasoning);
+            (Array.isArray(response.output) ? response.output : []).forEach((item, index) => {
+                if (item.type === 'message') {
+                    if (!hadText) state.text += messageText(item);
+                } else if (item.type === 'reasoning') {
+                    if (!hadReasoning) state.reasoning += reasoningText(item);
+                } else {
+                    recordToolItem(state, item, index, now, true);
+                }
+            });
+        }
+
+        function applyResponsesEvent(state, parsed, now) {
+            const type = parsed.type || 'unknown';
+            if (parsed.response?.id) state.responseId = parsed.response.id;
+            if (parsed.response?.model) state.model = parsed.response.model;
+            if (type === 'response.output_text.delta') {
+                if (parsed.delta) { markDelta(state, now, true); state.text += parsed.delta; }
+            } else if (type === 'response.reasoning_text.delta' || type === 'response.reasoning_summary_text.delta') {
+                if (parsed.delta) { markDelta(state, now, false); state.reasoning += parsed.delta; }
+            } else if (type === 'response.reasoning_summary_part.added') {
+                if (state.reasoning) state.reasoning += '\n\n';
+            } else if (type === 'response.function_call_arguments.delta') {
+                const tool = toolFor(state, parsed.item_id, parsed.output_index, 'function_call');
+                if (parsed.delta) { tool.args += parsed.delta; markDelta(state, now, false); }
+            } else if (type === 'response.function_call_arguments.done') {
+                const tool = toolFor(state, parsed.item_id, parsed.output_index, 'function_call');
+                if (typeof parsed.arguments === 'string') tool.args = parsed.arguments;
+            } else if (type === 'response.output_item.added') {
+                recordToolItem(state, parsed.item, parsed.output_index, now, false);
+            } else if (type === 'response.output_item.done') {
+                if (!recordToolItem(state, parsed.item, parsed.output_index, now, true)) {
+                    if (parsed.item?.type === 'message' && !state.text) state.text = messageText(parsed.item);
+                    if (parsed.item?.type === 'reasoning' && !state.reasoning) state.reasoning = reasoningText(parsed.item);
+                }
+            } else if (type.startsWith('response.route.')) {
+                state.route.push({
+                    type: type.slice('response.route.'.length),
+                    route: parsed.route, attempt: parsed.attempt, at: now
+                });
+            } else if (TERMINAL_TYPES.has(type)) {
+                applyResponseObject(state, parsed.response, now);
+                if (!state.status) state.status = type.slice('response.'.length);
+            } else if (type === 'error') {
+                state.error = parsed.error || { message: parsed.message || 'stream error', code: parsed.code };
+                state.status = state.status || 'failed';
+            } else {
+                const hosted = type.match(HOSTED_TOOL_EVENT);
+                if (hosted) {
+                    const tool = toolFor(state, parsed.item_id, parsed.output_index, hosted[1]);
+                    if (tool.startedAt === null) tool.startedAt = now;
+                    tool.status = hosted[2];
+                    if ((hosted[2] === 'completed' || hosted[2] === 'failed') && tool.endedAt === null) {
+                        tool.endedAt = now;
+                    }
+                }
+            }
+        }
+
+        function chatUsage(usage) {
+            if (!usage) return null;
+            return {
+                input_tokens: usage.prompt_tokens,
+                output_tokens: usage.completion_tokens,
+                input_tokens_details: { cached_tokens: usage.prompt_tokens_details?.cached_tokens ?? 0 },
+                output_tokens_details: { reasoning_tokens: usage.completion_tokens_details?.reasoning_tokens ?? 0 },
+                total_tokens: usage.total_tokens,
+                cost: usage.cost
+            };
+        }
+
+        function chatStatus(finishReason) {
+            return ['stop', 'tool_calls'].includes(finishReason) ? 'completed' : finishReason;
+        }
+
+        function applyChatChunk(state, chunk, now) {
+            if (chunk.id && !state.responseId) state.responseId = chunk.id;
+            if (chunk.model) state.model = chunk.model;
+            if (chunk.usage) {
+                state.usage = chatUsage(chunk.usage);
+                if (chunk.usage.cost !== undefined) state.reportedCost = chunk.usage.cost;
+            }
+            const choice = chunk.choices?.[0];
+            if (!choice) return;
+            const delta = choice.delta || {};
+            if (delta.content) { markDelta(state, now, true); state.text += delta.content; }
+            const reasoning = delta.reasoning_content ?? delta.reasoning;
+            if (typeof reasoning === 'string' && reasoning) { markDelta(state, now, false); state.reasoning += reasoning; }
+            (delta.tool_calls || []).forEach(call => {
+                const tool = toolFor(state, `chat-call-${call.index ?? 0}`, undefined, 'function_call');
+                if (tool.startedAt === null) tool.startedAt = now;
+                if (call.function?.name) tool.name = call.function.name;
+                if (call.function?.arguments) { tool.args += call.function.arguments; markDelta(state, now, false); }
+            });
+            if (choice.finish_reason) {
+                state.status = chatStatus(choice.finish_reason);
+                for (const tool of state.tools.values()) if (tool.endedAt === null) tool.endedAt = now;
+            }
+        }
+
+        function applyChatCompletion(state, data, now) {
+            const choice = data.choices?.[0] || {};
+            const message = choice.message || {};
+            state.responseId = data.id || state.responseId;
+            state.model = data.model || state.model;
+            state.text = message.content || '';
+            state.reasoning = message.reasoning_content || message.reasoning || '';
+            (message.tool_calls || []).forEach((call, index) => {
+                const tool = toolFor(state, `chat-call-${index}`, undefined, 'function_call');
+                Object.assign(tool, {
+                    name: call.function?.name || '', args: call.function?.arguments || '',
+                    status: 'completed', startedAt: now, endedAt: now
+                });
+            });
+            if (choice.finish_reason) state.status = chatStatus(choice.finish_reason);
+            if (data.usage) {
+                state.usage = chatUsage(data.usage);
+                if (data.usage.cost !== undefined) state.reportedCost = data.usage.cost;
+            }
+        }
+
+        function resolveCost(state, priceModel) {
+            const reported = Number(state.reportedCost);
+            if (state.reportedCost !== null && state.reportedCost !== undefined && Number.isFinite(reported)) {
+                return { value: reported, source: 'reported' };
+            }
+            const pricing = priceModel ? openRouterPricing.get(priceModel)?.pricing : null;
+            const usage = state.usage || {};
+            if (!pricing || !Number.isFinite(usage.input_tokens) || !Number.isFinite(usage.output_tokens)) return null;
+            // OpenRouter prices are USD per token, as strings.
+            const rate = key => {
+                const value = Number(pricing[key]);
+                return Number.isFinite(value) ? value : null;
+            };
+            const prompt = rate('prompt') ?? 0;
+            const completion = rate('completion') ?? 0;
+            const cached = Math.min(usage.input_tokens_details?.cached_tokens || 0, usage.input_tokens);
+            const reasoning = Math.min(usage.output_tokens_details?.reasoning_tokens || 0, usage.output_tokens);
+            const value = (usage.input_tokens - cached) * prompt
+                + cached * (rate('input_cache_read') ?? prompt)
+                + (usage.output_tokens - reasoning) * completion
+                + reasoning * (rate('internal_reasoning') ?? completion)
+                + (rate('request') ?? 0);
+            return { value, source: 'estimate', model: priceModel };
+        }
+
+        function toolSummary(tool, requestStartedAt) {
+            return {
+                type: tool.type, name: tool.name, query: tool.query, args: tool.args,
+                status: tool.status, sources: tool.sources,
+                startedAtSeconds: tool.startedAt !== null ? (tool.startedAt - requestStartedAt) / 1000 : null,
+                seconds: tool.startedAt !== null && tool.endedAt !== null ? (tool.endedAt - tool.startedAt) / 1000 : null
+            };
+        }
+
+        function summarizeTurn(state, startedAt, finishedAt, streamed, priceModel) {
+            const usage = state.usage || {};
+            const outputTokens = Number.isFinite(usage.output_tokens) ? usage.output_tokens : null;
+            const decodeSpan = streamed && state.firstOutputAt !== null && state.lastDeltaAt !== null
+                ? (state.lastDeltaAt - state.firstOutputAt) / 1000
+                : 0;
+            const tools = [...state.tools.values()].map(tool => toolSummary(tool, startedAt));
+            const lastRoute = state.route[state.route.length - 1];
+            const warnings = [];
+            if (state.status === 'completed' && !state.text && !tools.length) {
+                warnings.push(state.reasoning ? 'reasoning only, no answer text' : 'completed with empty output');
+            }
+            if (!state.status) {
+                warnings.push(lastRoute && lastRoute.type !== 'terminal'
+                    ? `stream ended while the route was "${lastRoute.type}" — no upstream output`
+                    : 'stream ended without a terminal event');
+            }
+            if (state.error) warnings.push(`error: ${state.error.code || ''} ${state.error.message || ''}`.trim());
+            if (state.incomplete) warnings.push(`incomplete: ${state.incomplete.reason || JSON.stringify(state.incomplete)}`);
+            return {
+                responseId: state.responseId, model: state.model, status: state.status || 'no terminal',
+                ttftMs: state.firstOutputAt !== null ? Math.round(state.firstOutputAt - startedAt) : null,
+                firstTextMs: state.firstTextAt !== null ? Math.round(state.firstTextAt - startedAt) : null,
+                totalSeconds: (finishedAt - startedAt) / 1000,
+                decodeSpan,
+                decodeTps: outputTokens !== null && decodeSpan > 0 ? outputTokens / decodeSpan : null,
+                inputTokens: Number.isFinite(usage.input_tokens) ? usage.input_tokens : null,
+                outputTokens,
+                reasoningTokens: usage.output_tokens_details?.reasoning_tokens ?? null,
+                cachedTokens: usage.input_tokens_details?.cached_tokens ?? null,
+                tools,
+                route: state.route.map(entry => ({
+                    type: entry.type, route: entry.route, attempt: entry.attempt,
+                    atSeconds: (entry.at - startedAt) / 1000
+                })),
+                cost: resolveCost(state, priceModel),
+                priceModel,
+                usage: state.usage, metadata: state.metadata, error: state.error, incomplete: state.incomplete,
+                text: state.text,
+                reasoningChars: state.reasoning.length,
+                warnings
+            };
+        }
+
+        function fmtSeconds(ms) {
+            return ms === null || ms === undefined ? '-' : `${(ms / 1000).toFixed(2)}s`;
+        }
+
+        function fmtUsd(value) {
+            return `$${value < 0.01 ? value.toFixed(6) : value.toFixed(4)}`;
+        }
+
+        function fmtCost(cost) {
+            if (!cost) return '-';
+            return cost.source === 'reported' ? fmtUsd(cost.value) : `≈${fmtUsd(cost.value)} (${cost.model})`;
+        }
+
+        function describeTool(tool) {
+            const subject = tool.type === 'web_search_call'
+                ? `web_search "${truncate(tool.query || '?', 80)}"`
+                : `${tool.name || tool.type}(${truncate(tool.args, 80)})`;
+            const parts = [tool.status || 'pending'];
+            if (tool.sources !== null && tool.sources !== undefined) parts.push(`${tool.sources} sources`);
+            if (tool.startedAtSeconds !== null && tool.startedAtSeconds !== undefined) {
+                parts.push(`@+${tool.startedAtSeconds.toFixed(1)}s`);
+            }
+            if (tool.seconds !== null && tool.seconds !== undefined) parts.push(`${tool.seconds.toFixed(1)}s`);
+            return `${subject} · ${parts.join(' · ')}`;
+        }
+
+        function stepMetricsLine(step) {
+            const tokens = step.outputTokens !== null
+                ? `out ${step.outputTokens}${step.reasoningTokens ? ` (reasoning ${step.reasoningTokens})` : ''}` +
+                  ` · in ${step.inputTokens ?? '?'}${step.cachedTokens ? ` (cached ${step.cachedTokens})` : ''}`
+                : 'no usage reported';
+            const rate = step.decodeTps !== null ? `${step.decodeTps.toFixed(1)} tok/s` : '- tok/s';
+            return `TTFT ${fmtSeconds(step.ttftMs)} · first text ${fmtSeconds(step.firstTextMs)} · ${rate} · ` +
+                `${tokens} · tools ${step.tools.length} · total ${step.totalSeconds.toFixed(2)}s · cost ${fmtCost(step.cost)}`;
+        }
+
+        function describeStep(step) {
+            return `${step.status} · ${step.responseId || '?'} · ${stepMetricsLine(step)}`;
+        }
+
+        function aggregateLaneStats(steps) {
+            if (!steps.length) return { ttft: '-', tps: '-', out: '-', tools: '-', total: '-', cost: '-' };
+            const decodeSteps = steps.filter(step => step.decodeTps !== null);
+            const decodeTokens = decodeSteps.reduce((sum, step) => sum + step.outputTokens, 0);
+            const decodeSpan = decodeSteps.reduce((sum, step) => sum + step.decodeSpan, 0);
+            const out = steps.reduce((sum, step) => sum + (step.outputTokens || 0), 0);
+            const reasoning = steps.reduce((sum, step) => sum + (step.reasoningTokens || 0), 0);
+            const total = steps.reduce((sum, step) => sum + step.totalSeconds, 0);
+            const toolCount = steps.reduce((sum, step) => sum + step.tools.length, 0);
+            const toolSeconds = steps.reduce(
+                (sum, step) => sum + step.tools.reduce((inner, tool) => inner + (tool.seconds || 0), 0), 0
+            );
+            const costs = steps.map(step => step.cost).filter(Boolean);
+            const estimated = costs.some(cost => cost.source === 'estimate');
+            let tps = '-';
+            if (decodeSpan > 0) tps = (decodeTokens / decodeSpan).toFixed(1);
+            else if (total > 0 && out > 0) tps = `${(out / total).toFixed(1)}*`;  // sync: whole-request rate
+            return {
+                ttft: fmtSeconds(steps[0].ttftMs),
+                tps,
+                out: out ? `${out} (${reasoning})` : '-',
+                tools: toolCount ? `${toolCount} · ${toolSeconds.toFixed(1)}s` : '0',
+                total: `${total.toFixed(2)}s`,
+                cost: costs.length
+                    ? `${estimated ? '≈' : ''}${fmtUsd(costs.reduce((sum, cost) => sum + cost.value, 0))}`
+                    : '-'
+            };
+        }
+
+        function sectionOpen(outputEl, key, openByDefault) {
+            const existing = outputEl.querySelector(`details[data-section="${key}"]`);
+            return existing ? existing.open : openByDefault;
+        }
+
+        function renderTurn(outputEl, state, summary, isRawMode, startedAt) {
+            const status = summary ? summary.status : 'streaming';
+            const badge = !summary ? 'badge-run'
+                : (summary.status === 'completed' && !summary.warnings.length ? 'badge-ok' : 'badge-err');
+            const identity = [state.responseId, state.model].filter(Boolean).map(escapeHtml).join(' · ');
+            let html = `<div class="turn-meta"><span class="badge ${badge}">${escapeHtml(status)}</span> ` +
+                `<span class="dim">${identity}</span></div>`;
+            if (summary) html += `<div class="turn-metrics">${escapeHtml(stepMetricsLine(summary))}</div>`;
+            if (state.route.length) {
+                const route = state.route.map(entry => {
+                    const where = entry.route ? ` ${entry.route}${entry.attempt !== undefined ? `#${entry.attempt}` : ''}` : '';
+                    return `${entry.type}${where} +${((entry.at - startedAt) / 1000).toFixed(1)}s`;
+                }).join(' → ');
+                html += `<div class="turn-route dim">route: ${escapeHtml(route)}</div>`;
+            }
+            (summary?.warnings || []).forEach(warning => {
+                html += `<div class="turn-warning">⚠ ${escapeHtml(warning)}</div>`;
+            });
+            if (isRawMode) {
+                const raw = state.rawBlocks.map(block => escapeHtml(block)).join('\n\n');
+                outputEl.innerHTML = `<div class="turn">${html}</div>` +
+                    `<pre style="white-space: pre-wrap; font-size: 0.75rem; font-family: monospace;">${raw}</pre>`;
+                return;
+            }
+            const tools = [...state.tools.values()].map(tool => toolSummary(tool, startedAt));
+            if (tools.length) {
+                const rows = tools.map(tool => {
+                    const [subject, ...details] = describeTool(tool).split(' · ');
+                    return `<div class="tool-row"><span>${escapeHtml(subject)}</span>` +
+                        `<span class="dim">${escapeHtml(details.join(' · '))}</span></div>`;
+                }).join('');
+                html += `<details class="turn-section" data-section="tools" ${sectionOpen(outputEl, 'tools', true) ? 'open' : ''}>` +
+                    `<summary>🔧 Tools · ${tools.length}</summary><div class="section-body">${rows}</div></details>`;
+            }
+            if (state.reasoning) {
+                const tokens = summary?.reasoningTokens ? ` · ${summary.reasoningTokens} tok` : '';
+                html += `<details class="turn-section" data-section="reasoning" ${sectionOpen(outputEl, 'reasoning', false) ? 'open' : ''}>` +
+                    `<summary>🧠 Reasoning · ${state.reasoning.length} chars${tokens}</summary>` +
+                    `<div class="section-body">${escapeHtml(state.reasoning)}</div></details>`;
+            }
+            if (state.text) html += `<div class="answer">${escapeHtml(state.text)}</div>`;
+            if (summary && (summary.usage || summary.metadata || summary.error || summary.incomplete)) {
+                const payload = {
+                    usage: summary.usage, metadata: summary.metadata,
+                    error: summary.error, incomplete_details: summary.incomplete
+                };
+                html += `<details class="turn-section" data-section="meta" ${sectionOpen(outputEl, 'meta', false) ? 'open' : ''}>` +
+                    `<summary>📊 Usage & metadata</summary>` +
+                    `<div class="section-body">${escapeHtml(JSON.stringify(payload, null, 2))}</div></details>`;
+            }
+            outputEl.innerHTML = `<div class="turn">${html}</div>`;
+        }
+
         async function executeRequest({ endpoint, model, prompt, imageUrl, imageDataUrls, systemPrompt, apiKey, isStream, previousResponseId, laneId, step }) {
             const outputEl = document.getElementById(`${laneId}-output-${step}`);
             const previewEl = document.getElementById(`${laneId}-preview-${step}`);
 
             // Detect endpoint type
             const isResponsesAPI = endpoint.includes('/v1/responses');
-            const isChatAPI = endpoint.includes('/v1/chat/completions');
 
             // Build request body based on endpoint type
             let body;
             if (isResponsesAPI) {
-                // Responses API format
                 const input = [];
                 if (systemPrompt) {
                     input.push({ role: 'system', content: systemPrompt });
@@ -1406,6 +1971,7 @@
                 messages.push({ role: 'user', content: userContent });
 
                 body = { model, messages, stream: isStream };
+                if (isStream) body.stream_options = { include_usage: true };
             }
 
             const headers = {
@@ -1416,11 +1982,9 @@
                 headers['Accept'] = 'text/event-stream';
             }
 
+            const isRawMode = document.querySelector('input[name="outputMode"]:checked')?.value === 'raw';
+            const state = createTurnState();
             const startTime = performance.now();
-            let ttft = null;
-            let tokens = 0;
-            let fullText = '';
-            let responseId = null;
 
             const response = await fetch(endpoint, {
                 method: 'POST',
@@ -1429,116 +1993,50 @@
             });
 
             if (!response.ok) {
-                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                const detail = await response.text().catch(() => '');
+                let message = detail;
+                try { message = JSON.parse(detail).error?.message || detail; } catch (e) { /* plain text body */ }
+                throw new Error(`HTTP ${response.status}: ${truncate(message || response.statusText, 300)}`);
             }
 
-            // Check output mode
-            const isRawMode = document.querySelector('input[name="outputMode"]:checked')?.value === 'raw';
-            let rawEvents = [];
-
-            if (isStream) {
-                const reader = response.body.getReader();
-                const decoder = new TextDecoder();
-
-                while (true) {
-                    const { done, value } = await reader.read();
-                    if (done) break;
-
-                    const chunk = decoder.decode(value);
-                    const lines = chunk.split('\n');
-
-                    for (const line of lines) {
-                        // RAW MODE: Show everything including event: lines
-                        if (isRawMode && line.trim()) {
-                            rawEvents.push(line);
-                            outputEl.innerHTML = '<pre style="white-space: pre-wrap; font-size: 0.75rem; font-family: monospace;">' +
-                                rawEvents.map(e => escapeHtml(e)).join('\n') + '</pre>';
-                            if (ttft === null) {
-                                ttft = Math.round(performance.now() - startTime);
-                            }
-                            tokens++;
-                        }
-
-                        if (!line.startsWith('data: ')) continue;
-
-                        const data = line.slice(6);
-                        if (data === '[DONE]') continue;
-
-                        try {
-                            const parsed = JSON.parse(data);
-
-                            // Extract response ID
-                            if (parsed.id) responseId = parsed.id;
-                            if (parsed.response?.id) responseId = parsed.response.id;
-
-                            // PARSED MODE: Extract text delta only
-                            if (!isRawMode) {
-                                let delta = '';
-                                if (parsed.type === 'response.output_text.delta') {
-                                    delta = parsed.delta || '';
-                                } else if (parsed.delta?.text) {
-                                    delta = parsed.delta.text;
-                                } else if (parsed.choices?.[0]?.delta?.content) {
-                                    delta = parsed.choices[0].delta.content;
-                                }
-
-                                if (delta) {
-                                    if (ttft === null) {
-                                        ttft = Math.round(performance.now() - startTime);
-                                    }
-                                    tokens++;
-                                    fullText += delta;
-                                    outputEl.textContent = fullText;
-
-                                    // Update preview (last 30 chars)
-                                    previewEl.textContent = fullText.slice(-30);
-                                }
-                            }
-                        } catch (e) {
-                            // Skip non-JSON lines
+            const streamed = isStream && (response.headers.get('content-type') || '').includes('text/event-stream');
+            let lastRender = 0;
+
+            if (streamed) {
+                for await (const block of readSseEvents(response)) {
+                    const now = performance.now();
+                    if (isRawMode) state.rawBlocks.push(block.raw);
+                    if (block.data && block.data !== '[DONE]') {
+                        let parsed = null;
+                        try { parsed = JSON.parse(block.data); } catch (e) { /* non-JSON data line */ }
+                        if (parsed && typeof parsed === 'object') {
+                            if (!parsed.type && block.event) parsed.type = block.event;
+                            if (parsed.choices || parsed.object === 'chat.completion.chunk') applyChatChunk(state, parsed, now);
+                            else applyResponsesEvent(state, parsed, now);
                         }
                     }
-                }
-
-                // RAW mode: store full text from raw events
-                if (isRawMode) {
-                    fullText = rawEvents.join('\n');
+                    if (now - lastRender > 120) {
+                        lastRender = now;
+                        renderTurn(outputEl, state, null, isRawMode, startTime);
+                        previewEl.textContent = (state.text || state.reasoning).slice(-30);
+                    }
                 }
             } else {
-                // Non-streaming response
                 const data = await response.json();
-                responseId = data.id || null;
-                ttft = Math.round(performance.now() - startTime);
-
-                // Extract text based on format
-                if (data.output) {
-                    for (const item of data.output) {
-                        if (item.type === 'message' && item.content) {
-                            for (const c of item.content) {
-                                if (c.type === 'output_text') {
-                                    fullText += c.text;
-                                }
-                            }
-                        }
-                    }
-                } else if (data.choices?.[0]?.message?.content) {
-                    fullText = data.choices[0].message.content;
-                }
-
-                tokens = fullText.split(/\s+/).length; // Rough estimate
-                outputEl.textContent = fullText || JSON.stringify(data, null, 2);
+                const now = performance.now();
+                if (data.choices) applyChatCompletion(state, data, now);
+                else applyResponseObject(state, data, now);
+                state.firstOutputAt = now;
+                if (state.text) state.firstTextAt = now;
+                if (isRawMode) state.rawBlocks.push(JSON.stringify(data, null, 2));
             }
 
-            const totalTime = performance.now() - startTime;
-            previewEl.textContent = responseId ? responseId.slice(0, 16) + '...' : '';
+            const summary = summarizeTurn(state, startTime, performance.now(), streamed, priceModelFor(laneId, model));
+            if (isRawMode) summary.raw = state.rawBlocks.join('\n\n');
+            renderTurn(outputEl, state, summary, isRawMode, startTime);
+            previewEl.textContent = state.responseId ? state.responseId.slice(0, 16) + '...' : '';
 
-            return {
-                responseId,
-                tokens,
-                time: totalTime,
-                ttft: ttft || Math.round(totalTime),
-                text: fullText
-            };
+            return { responseId: state.responseId, summary };
         }
     </script>
 </body>