deepline 0.2.41 → 0.2.43

package/dist/viewer/viewer.js

@@ -871,20 +871,33 @@ function processRawSession(raw) {
 
     const toolCalls = timeline.filter(e => e.kind === 'tool_call').length;
     const toolErrors = timeline.filter(e => e.kind === 'tool_call' && e.is_error).length;
+    const canonicalPerformance = raw.transcript_unavailable === true
+        && raw.performance && typeof raw.performance === 'object'
+        ? raw.performance
+        : null;
+    const canonicalNumber = (key, fallback) => {
+        const value = canonicalPerformance && canonicalPerformance[key];
+        if (value == null || !Number.isFinite(Number(value))) return fallback;
+        return Number(value);
+    };
 
     return {
         label: raw.label,
+        transcript_available: raw.transcript_unavailable !== true,
         meta: meta,
         prompt: prompt,
         result: result,
         timeline: timeline,
         timing_mode: timingMode,
         stats: {
-            duration_s: totalDurationS,
-            tool_calls: toolCalls,
-            tool_errors: toolErrors,
-            num_turns: numTurns,
-            cost_usd: (result || {}).total_cost_usd != null ? result.total_cost_usd : null,
+            duration_s: canonicalNumber('duration_s', totalDurationS),
+            tool_calls: canonicalNumber('tool_calls', toolCalls),
+            tool_errors: canonicalNumber('tool_errors', toolErrors),
+            num_turns: canonicalNumber('turns', numTurns),
+            cost_usd: canonicalNumber(
+                'cost_usd',
+                (result || {}).total_cost_usd != null ? result.total_cost_usd : null,
+            ),
             tool_breakdown: toolBreakdown,
             file_touches: fileTouches,
             loop_groups: analysis.loopGroups,
@@ -905,6 +918,135 @@ let currentSession = 0;
 let filterErrors = false;
 let isLive = false;
 let liveIntervalId = null;
+let currentEval = '';
+let currentSelection = 'all';
+let sliceBy = 'run';
+let runFilter = '';
+let agentFilter = 'all';
+let modelFilter = 'all';
+let skillFilter = 'all';
+let visibleEvalKeys = [];
+let visibleSelectionKeys = [];
+
+function readEvalMetrics() {
+    const el = document.getElementById('eval-harness-metrics');
+    if (!el || !el.textContent) return [];
+    try {
+        const parsed = JSON.parse(el.textContent);
+        return Array.isArray(parsed) ? parsed : [];
+    } catch(e) { return []; }
+}
+
+function firstPresent(values, fallback) {
+    for (const value of values) {
+        if (value != null && String(value).trim()) return String(value).trim();
+    }
+    return fallback;
+}
+
+function inferEval(label) {
+    return String(label || 'Session')
+        .replace(/\s+run\s+\d+.*$/i, '')
+        .replace(/\s+[·|].*$/, '')
+        .trim() || 'Session';
+}
+
+function inferRun(label, index) {
+    const match = String(label || '').match(/\brun\s+(\d+)/i);
+    return match ? match[1] : String(index + 1);
+}
+
+function inferAgent(label, meta) {
+    const match = String(label || '').match(/[·|]\s*([^/·|]+)\//);
+    const env = (meta || {}).environment || {};
+    return firstPresent([match && match[1], env.agent_runtime], 'Unknown agent');
+}
+
+function inferModel(label, meta) {
+    const match = String(label || '').match(/[·|]\s*[^/·|]+\/([^·|]+)/);
+    return firstPresent([match && match[1], (meta || {}).model], 'Unknown model');
+}
+
+function inferSkill(session) {
+    const promptMatch = String(session.prompt || '').match(/\b(deepline-(?:plays|gtm))\b/i);
+    if (promptMatch) return promptMatch[1].toLowerCase();
+    for (const entry of session.timeline || []) {
+        if (entry.kind !== 'tool_call' || entry.tool !== 'Skill') continue;
+        const value = String(entry.command || (entry.input || {}).skill || '');
+        const match = value.match(/\b(deepline-[\w-]+)\b/i);
+        if (match) return match[1].toLowerCase();
+    }
+    return 'Unspecified';
+}
+
+function attachEvalMetadata() {
+    const metrics = readEvalMetrics();
+    const bySession = new Map(metrics.filter(m => m && m.session_id).map(m => [String(m.session_id), m]));
+    const byLabel = new Map(metrics.filter(m => m && m.label).map(m => [String(m.label), m]));
+    SESSIONS.forEach((session, index) => {
+        const metric = bySession.get(String(session.meta.session_id || '')) || byLabel.get(String(session.label || '')) || null;
+        session.evalMetric = metric;
+        session.sourceIndex = index;
+        session.dimensions = {
+            eval: firstPresent([metric && metric.eval_id], inferEval(session.label)),
+            run: firstPresent([metric && metric.run], inferRun(session.label, index)),
+            agent: firstPresent([metric && metric.agent], inferAgent(session.label, session.meta)),
+            model: firstPresent([metric && metric.model_id, metric && metric.requested_model, metric && metric.model], inferModel(session.label, session.meta)),
+            skill: firstPresent([metric && metric.invoke_skill], inferSkill(session)),
+        };
+    });
+}
+
+function uniqueValues(values) {
+    return Array.from(new Set(values.filter(value => value != null && String(value).trim()).map(String)));
+}
+
+function sessionsForCurrentEval() {
+    return SESSIONS.filter(s => s.dimensions.eval === currentEval);
+}
+
+function selectionDimensions() {
+    const dimensions = ['run', 'agent', 'model', 'skill'];
+    return sliceBy === 'none' ? dimensions : dimensions.filter(dimension => dimension !== sliceBy);
+}
+
+function selectionKey(session) {
+    return selectionDimensions().map(dimension => session.dimensions[dimension]).join('\u001f');
+}
+
+function selectionLabel(session) {
+    const labels = {
+        run: value => 'Run ' + value,
+        agent: value => value,
+        model: value => value,
+        skill: value => value,
+    };
+    return selectionDimensions().map(dimension => labels[dimension](session.dimensions[dimension])).join(' · ') || 'All transcripts';
+}
+
+function matchesTopFilters(session) {
+    const query = runFilter.trim().toLowerCase();
+    const d = session.dimensions;
+    if (agentFilter !== 'all' && d.agent !== agentFilter) return false;
+    if (modelFilter !== 'all' && d.model !== modelFilter) return false;
+    if (skillFilter !== 'all' && d.skill !== skillFilter) return false;
+    return !query || [session.label, d.eval, d.run, d.agent, d.model, d.skill].join(' ').toLowerCase().includes(query);
+}
+
+function matchingConfigurations() {
+    const groups = new Map();
+    for (const session of sessionsForCurrentEval().filter(matchesTopFilters)) {
+        const key = selectionKey(session);
+        if (!groups.has(key)) groups.set(key, {key, label: selectionLabel(session), sessions: []});
+        groups.get(key).sessions.push(session);
+    }
+    return Array.from(groups.values());
+}
+
+function filteredSessions() {
+    return sessionsForCurrentEval().filter(session => matchesTopFilters(session)
+        && (currentSelection === 'all' || selectionKey(session) === currentSelection));
+}
 
 function saveViewerState() {
     const main = document.getElementById('main-content');
@@ -925,6 +1067,13 @@ function saveViewerState() {
         expandedText: expandedText,
         filterErrors: filterErrors,
         search: searchVal,
+        currentEval: currentEval,
+        currentSelection: currentSelection,
+        sliceBy: sliceBy,
+        runFilter: runFilter,
+        agentFilter: agentFilter,
+        modelFilter: modelFilter,
+        skillFilter: skillFilter,
     }));
 }
 
@@ -953,33 +1102,47 @@ function toggleLive() {
 
 function init() {
     SESSIONS = RAW_SESSIONS.map(processRawSession);
+    attachEvalMetadata();
+    ensureRunSidebar();
 
     const saved = restoreViewerState();
     const initialSession = (saved && saved.session != null && saved.session < SESSIONS.length && saved.session >= -1) ? saved.session : 0;
     currentSession = initialSession;
+    visibleEvalKeys = uniqueValues(SESSIONS.map(s => s.dimensions.eval));
+    currentEval = saved && visibleEvalKeys.includes(saved.currentEval)
+        ? saved.currentEval
+        : ((SESSIONS[Math.max(0, initialSession)] || {}).dimensions || {}).eval || visibleEvalKeys[0] || '';
+    sliceBy = saved && ['none', 'run', 'agent', 'model', 'skill'].includes(saved.sliceBy)
+        ? saved.sliceBy
+        : (SESSIONS.length > 1 ? 'run' : 'none');
+    currentSelection = (saved && (saved.currentSelection || saved.currentRun)) || 'all';
+    runFilter = (saved && saved.runFilter) || '';
+    agentFilter = (saved && saved.agentFilter) || 'all';
+    modelFilter = (saved && saved.modelFilter) || 'all';
+    skillFilter = (saved && saved.skillFilter) || 'all';
 
     if (SESSIONS.length > 1) {
         document.getElementById('sidebar').classList.remove('hidden');
+        document.getElementById('run-sidebar').classList.remove('hidden');
         renderSidebar();
+        renderRunSidebar();
         document.addEventListener('keydown', function(e) {
-            if (e.target.tagName === 'INPUT') return;
+            if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
             if (e.key === 'ArrowDown' || e.key === 'j') {
                 e.preventDefault();
-                if (currentSession < SESSIONS.length - 1) switchSession(currentSession + 1);
+                const index = Math.max(0, visibleSelectionKeys.indexOf(currentSelection));
+                if (index < visibleSelectionKeys.length - 1) switchSelection(index + 1);
             } else if (e.key === 'ArrowUp' || e.key === 'k') {
                 e.preventDefault();
-                if (currentSession > 0) switchSession(currentSession - 1);
+                const index = Math.max(0, visibleSelectionKeys.indexOf(currentSelection));
+                if (index > 0) switchSelection(index - 1);
             } else if (e.key === 'q' || e.key === 'Q') {
                 switchToCompare();
             }
         });
     }
 
-    if (initialSession === -1 && SESSIONS.length > 1) {
-        renderComparison();
-    } else {
-        renderSession(Math.max(0, initialSession));
-    }
+    renderWorkspace();
 
     if (saved) {
         if (saved.filterErrors) {
@@ -1032,33 +1195,226 @@ function init() {
 
 function renderSidebar() {
     const el = document.getElementById('sidebar');
-    let html = '';
-    if (SESSIONS.length > 1) {
-        html += `<div class="sidebar-item sidebar-compare ${currentSession === -1 ? 'active' : ''}" onclick="switchToCompare()">
-            <div class="label">Compare All</div>
-            <div class="sub">${SESSIONS.length} sessions &middot; press <kbd>Q</kbd></div>
-        </div>`;
-    }
-    html += SESSIONS.map((s, i) => {
-        const errRate = s.stats.tool_calls > 0 ? Math.round(s.stats.tool_errors / s.stats.tool_calls * 100) : 0;
-        return `<div class="sidebar-item ${i === currentSession ? 'active' : ''}" onclick="switchSession(${i})">
-            <div class="label">${esc(s.label)}</div>
-            <div class="sub">${s.stats.tool_calls} calls &middot; ${s.stats.tool_errors} err${errRate > 0 ? ' (' + errRate + '%)' : ''} &middot; ${formatDuration(s.stats.duration_s)}</div>
-        </div>`;
+    el.classList.remove('hidden');
+    visibleEvalKeys = uniqueValues(SESSIONS.map(s => s.dimensions.eval));
+    let html = '<div class="rail-heading"><span>Evaluations</span><strong>' + visibleEvalKeys.length + '</strong></div>';
+    html += visibleEvalKeys.map((evalName, i) => {
+        const sessions = SESSIONS.filter(s => s.dimensions.eval === evalName);
+        const runs = uniqueValues(sessions.map(s => s.dimensions.run)).length;
+        return `<button class="sidebar-item ${evalName === currentEval ? 'active' : ''}" onclick="switchEval(${i})">
+            <span class="label">${esc(evalName)}</span>
+            <span class="sub">${runs} run${runs === 1 ? '' : 's'} &middot; ${sessions.length} session${sessions.length === 1 ? '' : 's'}</span>
+        </button>`;
+    }).join('');
+    el.innerHTML = html;
+}
+
+function ensureRunSidebar() {
+    if (document.getElementById('run-sidebar')) return;
+    const main = document.getElementById('main-content');
+    if (!main || !main.parentElement) return;
+    const rail = document.createElement('div');
+    rail.id = 'run-sidebar';
+    rail.className = 'run-sidebar hidden';
+    main.parentElement.insertBefore(rail, main);
+}
+
+function renderRunSidebar() {
+    const el = document.getElementById('run-sidebar');
+    if (!el) return;
+    el.classList.remove('hidden');
+    const groups = matchingConfigurations();
+    visibleSelectionKeys = ['all'].concat(groups.map(group => group.key));
+    if (!visibleSelectionKeys.includes(currentSelection)) currentSelection = 'all';
+    const dimensions = selectionDimensions();
+    const heading = dimensions.length ? 'Compare setup' : 'Transcripts';
+    let html = `<div class="rail-heading"><span>${heading}</span><strong>${groups.length}</strong></div>`;
+    html += `<button class="run-sidebar-item ${currentSelection === 'all' ? 'active' : ''}" onclick="switchSelection(0)">
+        <span class="run-number">All matching</span><span class="run-meta">${sessionsForCurrentEval().filter(matchesTopFilters).length} transcripts &middot; ${sliceBy === 'none' ? 'stacked' : 'sliced by ' + sliceBy}</span>
+    </button>`;
+    html += groups.map((group, index) => {
+        const selectedDimensions = selectionDimensions();
+        const muted = selectedDimensions.map(dimension => dimension[0].toUpperCase() + dimension.slice(1)).join(' · ');
+        return `<button class="run-sidebar-item ${currentSelection === group.key ? 'active' : ''}" onclick="switchSelection(${index + 1})">
+            <span class="run-number">${esc(group.label)}</span>
+            <span class="run-meta">${esc(muted)} &middot; ${group.sessions.length} transcript${group.sessions.length === 1 ? '' : 's'}</span>
+            <span class="run-skill">${sliceBy === 'none' ? 'single transcript' : 'compare ' + esc(sliceBy)}</span>
+        </button>`;
     }).join('');
     el.innerHTML = html;
 }
 
+function switchEval(index) {
+    currentEval = visibleEvalKeys[index] || visibleEvalKeys[0] || '';
+    currentSelection = 'all';
+    currentSession = (sessionsForCurrentEval()[0] || {}).sourceIndex || 0;
+    agentFilter = 'all';
+    modelFilter = 'all';
+    skillFilter = 'all';
+    renderSidebar();
+    renderRunSidebar();
+    renderWorkspace();
+}
+
+function switchSelection(index) {
+    currentSelection = visibleSelectionKeys[index] || 'all';
+    const selected = filteredSessions();
+    if (selected.length) currentSession = selected[0].sourceIndex;
+    renderRunSidebar();
+    renderWorkspace();
+}
+
 function switchSession(i) {
     currentSession = i;
+    currentEval = SESSIONS[i].dimensions.eval;
+    currentSelection = selectionKey(SESSIONS[i]);
     renderSidebar();
+    renderRunSidebar();
     renderSession(i);
 }
 
 function switchToCompare() {
-    currentSession = -1;
-    renderSidebar();
-    renderComparison();
+    currentSelection = 'all';
+    sliceBy = 'run';
+    renderRunSidebar();
+    renderWorkspace();
+}
+
+function optionList(values, selected, allLabel) {
+    let html = `<option value="all" ${selected === 'all' ? 'selected' : ''}>${esc(allLabel)}</option>`;
+    html += values.map(value => `<option value="${esc(value)}" ${selected === value ? 'selected' : ''}>${esc(value)}</option>`).join('');
+    return html;
+}
+
+function renderWorkspaceControls() {
+    const sessions = sessionsForCurrentEval();
+    const agents = uniqueValues(sessions.map(s => s.dimensions.agent));
+    const models = uniqueValues(sessions.map(s => s.dimensions.model));
+    const skills = uniqueValues(sessions.map(s => s.dimensions.skill));
+    return `<section class="workspace-controls" aria-label="Transcript filters">
+        <div class="workspace-context"><span class="eyebrow">Evaluation</span><strong>${esc(currentEval)}</strong></div>
+        <label class="control-field control-search"><span>Filter runs</span><input id="run-filter" value="${esc(runFilter)}" placeholder="model, skill, label…" oninput="runFilter=this.value" onkeydown="if(event.key==='Enter'){applyWorkspaceFilters()}"></label>
+        <label class="control-field"><span>Agent</span><select id="agent-filter" onchange="agentFilter=this.value;applyWorkspaceFilters()">${optionList(agents, agentFilter, 'All agents')}</select></label>
+        <label class="control-field"><span>Model</span><select id="model-filter" onchange="modelFilter=this.value;applyWorkspaceFilters()">${optionList(models, modelFilter, 'All models')}</select></label>
+        <label class="control-field"><span>Skill</span><select id="skill-filter" onchange="skillFilter=this.value;applyWorkspaceFilters()">${optionList(skills, skillFilter, 'All skills')}</select></label>
+        <label class="control-field slice-control"><span>Slice by</span><select id="slice-by" onchange="changeSlice(this.value)">
+            <option value="none" ${sliceBy === 'none' ? 'selected' : ''}>No slicing</option>
+            <option value="run" ${sliceBy === 'run' ? 'selected' : ''}>Run number</option>
+            <option value="agent" ${sliceBy === 'agent' ? 'selected' : ''}>Agent</option>
+            <option value="model" ${sliceBy === 'model' ? 'selected' : ''}>Model</option>
+            <option value="skill" ${sliceBy === 'skill' ? 'selected' : ''}>Skill</option>
+        </select></label>
+        <button class="apply-filter-btn" onclick="applyWorkspaceFilters()">Apply</button>
+        <button class="reset-filter-btn" onclick="resetWorkspaceFilters()">Reset</button>
+    </section>`;
+}
+
+function applyWorkspaceFilters() {
+    const input = document.getElementById('run-filter');
+    if (input) runFilter = input.value;
+    renderRunSidebar();
+    renderWorkspace();
+}
+
+function resetWorkspaceFilters() {
+    runFilter = '';
+    agentFilter = 'all';
+    modelFilter = 'all';
+    skillFilter = 'all';
+    renderRunSidebar();
+    renderWorkspace();
+}
+
+function changeSlice(value) {
+    sliceBy = value;
+    currentSelection = 'all';
+    renderRunSidebar();
+    renderWorkspace();
+}
+
+function renderExpectationMiniTable(session) {
+    const metric = session.evalMetric;
+    const expectations = metric && Array.isArray(metric.expectations) ? metric.expectations : [];
+    const summary = metric && metric.expectation_summary;
+    if (!expectations.length) {
+        return `<div class="expectations-empty"><span>Eval results</span><strong>Pending or unavailable</strong></div>`;
+    }
+    const passed = summary ? summary.passed : expectations.filter(item => String(item.result || '').toUpperCase() === 'PASS').length;
+    const total = summary ? summary.total : expectations.length;
+    const failed = summary ? summary.failed : total - passed;
+    const statusClass = failed > 0 ? 'has-failures' : 'all-passed';
+    const rows = expectations.map(item => {
+        const result = String(item.result || '—').toUpperCase();
+        const resultClass = result === 'PASS' ? 'pass' : (result === 'FAIL' ? 'fail' : 'unknown');
+        return `<tr title="${esc(item.reason || '')}"><td>${esc(item.expectation || '—')}</td><td>${esc(item.category || 'other')}</td><td><span class="expectation-result ${resultClass}">${esc(result)}</span></td></tr>`;
+    }).join('');
+    return `<div class="expectations-mini ${statusClass}">
+        <div class="expectations-mini-heading"><span>Eval results</span><strong>${passed}/${total} passed</strong></div>
+        <div class="expectations-table-wrap"><table><thead><tr><th>Expectation</th><th>Category</th><th>Result</th></tr></thead><tbody>${rows}</tbody></table></div>
+    </div>`;
+}
+
+function renderLaneSession(session) {
+    const i = session.sourceIndex;
+    const d = session.dimensions;
+    const prefix = 'lane-' + i;
+    const errorRate = session.stats.tool_calls > 0 ? Math.round(session.stats.tool_errors / session.stats.tool_calls * 100) : 0;
+    let html = `<article class="lane-session">
+        <header class="lane-session-header">
+            <div class="lane-title-row"><div><span class="run-kicker">Run ${esc(d.run)}</span><h3>${esc(d.agent)} / ${esc(d.model)}</h3></div><button class="download-btn" onclick="downloadJsonl(${i})">JSONL</button></div>
+            <div class="dimension-chips"><span>${esc(d.skill)}</span><span>${formatDuration(session.stats.duration_s)}</span><span>${session.stats.tool_calls} calls</span><span class="${session.stats.tool_errors ? 'chip-error' : ''}">${session.stats.tool_errors} errors${errorRate ? ' · ' + errorRate + '%' : ''}</span></div>
+            ${renderExpectationMiniTable(session)}
+        </header>`;
+    if (!session.transcript_available) {
+        html += '<div class="transcript-unavailable">No transcript was retained for this completed eval. Its scored expectations remain included in this comparison.</div>';
+    }
+    if (session.prompt) {
+        html += `<details class="lane-prompt"><summary>Prompt</summary><div class="prompt-text">${esc(session.prompt)}</div></details>`;
+    }
+    html += `<div class="timeline lane-timeline">${renderTimeline(session.timeline, prefix)}</div>`;
+    if (session.result && session.result.result_text) {
+        html += `<details class="lane-result"><summary>Final output</summary><div class="md-rendered">${renderMarkdown(session.result.result_text)}</div></details>`;
+    }
+    return html + '</article>';
+}
+
+function renderSlicedTranscripts(sessions) {
+    const main = document.getElementById('main-content');
+    main.classList.add('full-width');
+    let html = renderWorkspaceControls();
+    html += `<div class="timeline-filter-bar"><input type="text" id="search-input" placeholder="Filter visible transcripts…" oninput="applyFilter()"><button class="filter-btn ${filterErrors ? 'active' : ''}" onclick="toggleErrorFilter()">Errors Only</button></div>`;
+    if (!sessions.length) {
+        main.innerHTML = html + '<div class="empty-workspace"><strong>No runs match these filters.</strong><span>Reset the filters or select another run.</span></div>';
+        return;
+    }
+    const dimension = sliceBy === 'none' ? null : sliceBy;
+    const groups = [];
+    if (!dimension) {
+        groups.push({label: 'Selected transcripts', sessions});
+    } else {
+        for (const value of uniqueValues(sessions.map(s => s.dimensions[dimension]))) {
+            groups.push({label: dimension === 'run' ? 'Run ' + value : value, sessions: sessions.filter(s => s.dimensions[dimension] === value)});
+        }
+    }
+    html += `<div class="slice-summary"><span>${sessions.length} transcript${sessions.length === 1 ? '' : 's'}</span><span>${groups.length} ${groups.length === 1 ? 'column' : 'columns'}</span><span>Sliced by ${dimension || 'none'}</span></div>`;
+    const sliceMinWidth = groups.length * 460 + Math.max(0, groups.length - 1) * 12;
+    html += `<div class="slice-grid" style="--lane-count:${groups.length};--slice-min-width:${sliceMinWidth}px">`;
+    for (const group of groups) {
+        html += `<section class="transcript-lane"><div class="transcript-lane-heading"><span>${esc(group.label)}</span><strong>${group.sessions.length}</strong></div>${group.sessions.map(renderLaneSession).join('')}</section>`;
+    }
+    main.innerHTML = html + '</div>';
+    applyFilter();
+}
+
+function renderWorkspace() {
+    window.__evalHarnessActive = false;
+    const sessions = filteredSessions();
+    if (sliceBy === 'none' && sessions.length === 1) {
+        currentSession = sessions[0].sourceIndex;
+        renderSession(currentSession);
+        return;
+    }
+    renderSlicedTranscripts(sessions);
 }
 
 function downloadJsonl(i) {
@@ -1076,14 +1432,19 @@ function downloadJsonl(i) {
 function renderSession(i) {
     const s = SESSIONS[i];
     const main = document.getElementById('main-content');
+    main.classList.add('full-width');
 
     // Header
     const timingBadge = s.timing_mode === 'exact'
         ? '<span class="timing-badge exact">exact timestamps</span>'
         : '<span class="timing-badge estimated">estimated timestamps</span>';
     const liveBadge = isLive ? '<span class="live-badge" onclick="toggleLive()" title="Click to pause/resume auto-refresh">LIVE</span>' : '';
-    let html = `<div class="header"><div class="header-title-row"><h1>${esc(s.label)}</h1>${timingBadge}${liveBadge}<button class="download-btn" onclick="downloadJsonl(${i})" title="Download raw JSONL">Download JSONL</button></div><div class="header-grid">`;
-    html += item('Model', s.meta.model || '\u2014');
+    let html = renderWorkspaceControls();
+    html += `<div class="header"><div class="header-title-row"><h1>${esc(s.label)}</h1>${timingBadge}${liveBadge}<button class="download-btn" onclick="downloadJsonl(${i})" title="Download raw JSONL">Download JSONL</button></div><div class="header-grid">`;
+    html += item('Agent', s.dimensions.agent);
+    html += item('Model', s.dimensions.model || s.meta.model || '\u2014');
+    html += item('Skill', s.dimensions.skill);
+    html += item('Run', s.dimensions.run);
     html += item('Session', (s.meta.session_id || '\u2014').slice(0, 12));
     if (s.meta.uploaded_by) html += item('Uploaded by', s.meta.uploaded_by);
     const env = s.meta.environment || {};
@@ -1101,6 +1462,10 @@ function renderSession(i) {
     if (s.stats.loop_groups > 0) html += item('Retry Loops', s.stats.loop_groups);
     if (s.stats.error_streak_groups > 0) html += item('Error Streaks', s.stats.error_streak_groups + ' (max ' + s.stats.max_error_streak + ')');
     html += '</div>';
+    html += renderExpectationMiniTable(s);
+    if (!s.transcript_available) {
+        html += '<div class="transcript-unavailable">No transcript was retained for this completed eval. Its scored expectations remain included in this comparison.</div>';
+    }
 
     // Tool breakdown
     const tbEntries = Object.entries(s.stats.tool_breakdown).sort((a, b) => b[1] - a[1]);
@@ -1158,7 +1523,7 @@ function renderSession(i) {
 
     // Timeline
     html += '<div class="timeline" id="timeline">';
-    html += renderTimeline(s.timeline);
+    html += renderTimeline(s.timeline, 'session-' + i);
     html += '</div>';
 
     // Result card
@@ -1273,12 +1638,14 @@ function compareRow(label, displayValues, numericValues, betterIs) {
     return html;
 }
 
-function renderTimeline(timeline) {
+function renderTimeline(timeline, idPrefix) {
     let html = '';
+    const prefix = idPrefix ? String(idPrefix).replace(/[^a-zA-Z0-9_-]/g, '-') + '-' : '';
 
     for (let i = 0; i < timeline.length; i++) {
         const e = timeline[i];
-        const id = 'entry-' + i;
+        const id = prefix + 'entry-' + i;
+        const detailId = prefix + 'detail-' + i;
 
         if (e.kind === 'user_message') {
             const long = e.text.length > 300;
@@ -1322,7 +1689,7 @@ function renderTimeline(timeline) {
             if (e.is_loop) entryClasses.push('in-loop');
 
             html += `<div class="${entryClasses.join(' ')}" data-searchtext="${esc(searchContent)}">
-                <div class="tool-row" onclick="toggleDetail('detail-${i}', this)">
+                <div class="tool-row" onclick="toggleDetail('${detailId}', this)">
                     <span class="tool-step">#${e.step}</span>
                     <span class="tool-elapsed">${formatElapsed(e.elapsed)}</span>
                     <span class="tool-status ${statusClass}">${statusLabel}</span>
@@ -1331,10 +1698,10 @@ function renderTimeline(timeline) {
                     ${e.parallel ? '<span class="parallel-badge">parallel</span>' : ''}
                     ${e.is_loop ? '<span class="loop-badge">loop \u00d7' + e.loop_count + '</span>' : ''}
                 </div>
-                <div class="tool-detail" id="detail-${i}">
+                <div class="tool-detail" id="${detailId}">
                     <div class="tool-detail-section">
                         <div class="label">Input</div>
-                        ${formatToolInputHtml(e.tool, e.input, i)}
+                        ${formatToolInputHtml(e.tool, e.input, prefix + i)}
                     </div>
                     ${e.result_content != null ? `<div class="tool-detail-section">
                         <div class="label">Result</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepline",
-  "version": "0.2.41",
+  "version": "0.2.43",
   "description": "Deepline SDK + CLI — B2B data enrichment powered by durable cloud execution",
   "license": "MIT",
   "repository": {