@agi-fans/dsh-tui 0.21.0 → 0.22.0

package/lib/views/trajectory.js

@@ -3,6 +3,11 @@ import { padToWidth, truncateToWidth, visibleWidth, wrapText } from "../chrome/w
 import { moveGraphemeLeft, moveGraphemeRight } from "../chrome/grapheme.js";
 import { firstVisibleStreamTime } from "./stream-time.js";
 import { formatOverlayHint } from "./hotkey-format.js";
+import { listNavigation } from "./list-navigation.js";
+import { highlightCodeLines, toolPayloadLanguage } from "../chrome/code-highlight.js";
+import { renderMarkdown } from "../chrome/markdown.js";
+import { renderTimelineOverview, trajectoryTimeline } from "./trajectory-timeline.js";
+import { formatDuration, formatTokens } from "../chrome/status-line.js";
 function object(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value)
         ? value
@@ -92,7 +97,7 @@ export class TrajectoryLedger {
         const cached = this.#fieldCache.get(record);
         if (cached !== undefined)
             return cached;
-        const fields = [record.type, record.label, record.summary, record.payload, record.result, record.schema]
+        const fields = [record.type, record.label, record.summary, record.payload, record.result, record.schema, record.thinking]
             .map(field => field.toLocaleLowerCase());
         this.#fieldCache.set(record, fields);
         return fields;
@@ -139,7 +144,9 @@ export class TrajectoryLedger {
             turn: place.turn,
             step: place.step,
             label,
+            name: '',
             summary,
+            thinking: '',
             payload: json(event.data),
             result: '',
             schema: '',
@@ -196,7 +203,6 @@ export class TrajectoryLedger {
             const usage = object(message?.['usage'] ?? data['usage']);
             const startedAt = this.#stepStarted.get(key) ?? event.time;
             const existing = this.#assistantByStep.get(key);
-            const result = reasoning === '' ? text : `Thinking\n${reasoning}\n\nAnswer\n${text}`;
             // Format-v2 messages embed the exact timed stream; derive the first
             // visible token time from it instead of live chunk events.
             if (!this.#stepFirstToken.has(key)) {
@@ -211,7 +217,8 @@ export class TrajectoryLedger {
                 const record = this.#base(event, 'assistant', 'ASSISTANT', compact(text, 'Assistant response'), data);
                 record.id = `assistant:${key}`;
                 record.payload = this.#requestByStep.get(key) ?? record.payload;
-                record.result = result;
+                record.result = text;
+                record.thinking = reasoning;
                 record.startedAt = startedAt;
                 record.durationMs = Math.max(0, event.time - startedAt);
                 const first = this.#stepFirstToken.get(key);
@@ -226,7 +233,8 @@ export class TrajectoryLedger {
                     this.#invalidateText(record);
                     record.seq = event.seq;
                     record.summary = compact(text, record.summary);
-                    record.result = result;
+                    record.result = text;
+                    record.thinking = reasoning;
                     record.status = data['interrupted'] === true ? 'error' : 'ok';
                     record.durationMs = Math.max(0, event.time - startedAt);
                     record.inputTokens = tokenValue(usage, 'inputTokens', 'input_tokens', 'promptTokens', 'prompt_tokens');
@@ -243,6 +251,7 @@ export class TrajectoryLedger {
             const record = this.#base(event, parentCallId === null ? 'tool' : 'subtool', name, `${name} ${compact(json(args), '')}`.trim(), data);
             record.id = `tool:${callId}`;
             record.label = parentCallId === null ? 'TOOL' : 'SUBTOOL';
+            record.name = name;
             record.status = 'running';
             record.parentCallId = parentCallId;
             record.schema = this.#schemas.get(name) ?? '';
@@ -350,7 +359,7 @@ export class TrajectoryLedger {
         }
     }
 }
-const SEARCH_FIELDS = ['type', 'label', 'summary', 'payload', 'result', 'schema'];
+const SEARCH_FIELDS = ['type', 'label', 'summary', 'payload', 'result', 'schema', 'thinking'];
 export function createTrajectory(events) {
     const ledger = new TrajectoryLedger(events);
     return {
@@ -433,11 +442,15 @@ export function restoreSearchTarget(state, target) {
         return { ...state, searchFocus: null };
     return { ...state, searchFocus: index, selectedId: match.record.id };
 }
+/** Whether a record is a tool call, shown or hidden by the calls fold. */
+function isCall(record) {
+    return record.kind === 'tool' || record.kind === 'subtool';
+}
 export function trajectoryVisibleRecords(state) {
     const query = state.query.trim().toLocaleLowerCase();
     const firstInCollapsed = new Set();
     return state.ledger.records.filter((record) => {
-        if (state.callsCollapsed && record.kind === 'subtool')
+        if (state.callsCollapsed && isCall(record))
             return false;
         if (record.turn !== null && state.collapsedTurns.has(record.turn)) {
             if (firstInCollapsed.has(record.turn))
@@ -449,6 +462,125 @@ export function trajectoryVisibleRecords(state) {
         return state.ledger.recordMatches(record, query);
     });
 }
+/**
+ * One pass over the ledger for everything a frame needs to describe structure:
+ * turn totals and per-step call histograms.
+ *
+ * A folded turn still has to state how much it folded, and the calls fold has to
+ * say what it hid, so both come from every record rather than from the rows that
+ * survived folding. Deriving them per render would walk a 10,000-record ledger
+ * several times per keystroke; the ledger already counts its own mutations, so
+ * one pass lasts until it moves.
+ */
+const turnStatsCache = new WeakMap();
+function trajectoryIndex(ledger) {
+    const cached = turnStatsCache.get(ledger);
+    if (cached !== undefined && cached.version === ledger.version)
+        return cached;
+    const spans = new Map();
+    const calls = new Map();
+    for (const record of ledger.records) {
+        const key = record.turn === null ? 'between' : String(record.turn);
+        let entry = spans.get(key);
+        if (entry === undefined) {
+            entry = { turn: record.turn, steps: new Set(), errors: 0, warnings: 0, earliest: Number.POSITIVE_INFINITY, latest: Number.NEGATIVE_INFINITY };
+            spans.set(key, entry);
+        }
+        if (record.step !== null)
+            entry.steps.add(record.step);
+        if (record.status === 'error')
+            entry.errors += 1;
+        if (record.status === 'warning')
+            entry.warnings += 1;
+        if (record.startedAt !== null) {
+            entry.earliest = Math.min(entry.earliest, record.startedAt);
+            // A running record has no end yet. Counting its start as its end keeps the
+            // span from inventing elapsed time the ledger never recorded.
+            entry.latest = Math.max(entry.latest, record.startedAt + (record.durationMs ?? 0));
+        }
+        if (!isCall(record))
+            continue;
+        const callKey = `${key}:${record.step ?? 'none'}`;
+        const counts = calls.get(callKey) ?? new Map();
+        const name = record.summary.split(/\s/u)[0] ?? record.label;
+        counts.set(name, (counts.get(name) ?? 0) + 1);
+        calls.set(callKey, counts);
+    }
+    const stats = new Map();
+    for (const [key, entry] of spans) {
+        stats.set(key, {
+            turn: entry.turn,
+            steps: entry.steps.size,
+            errors: entry.errors,
+            warnings: entry.warnings,
+            spanMs: entry.latest > entry.earliest ? entry.latest - entry.earliest : null,
+        });
+    }
+    const entry = {
+        version: ledger.version,
+        stats,
+        calls: new Map([...calls].map(([key, counts]) => [key, [...counts]])),
+    };
+    turnStatsCache.set(ledger, entry);
+    return entry;
+}
+/**
+ * The ledger as three levels, the shape the desktop client settled on.
+ *
+ * A turn is the question, a step is one model request and the calls it made, and
+ * a record is one event. The flat list this replaced gave a user message and a
+ * tool result the same weight, so answering "which step took sixteen minutes"
+ * meant reading a location column on every row and adding durations up by hand.
+ * Step headers also give the calls fold somewhere to report what it hid, which is
+ * why the histogram comes from the whole ledger and not from the visible rows.
+ */
+function trajectoryRows(state) {
+    const index = trajectoryIndex(state.ledger);
+    const rows = [];
+    const buckets = [];
+    for (const record of trajectoryVisibleRecords(state)) {
+        const last = buckets.at(-1);
+        if (last !== undefined && last.turn === record.turn)
+            last.records.push(record);
+        else
+            buckets.push({ turn: record.turn, records: [record] });
+    }
+    for (const bucket of buckets) {
+        const key = bucket.turn === null ? 'between' : String(bucket.turn);
+        rows.push({
+            kind: 'turn',
+            id: `turn:${key}`,
+            stats: index.stats.get(key) ?? { turn: bucket.turn, steps: 0, errors: 0, warnings: 0, spanMs: null },
+            collapsed: bucket.turn !== null && state.collapsedTurns.has(bucket.turn),
+        });
+        let step;
+        let group = [];
+        const flush = () => {
+            if (group.length === 0)
+                return;
+            if (step !== null && step !== undefined) {
+                rows.push({
+                    kind: 'step',
+                    id: `step:${key}:${step}`,
+                    step,
+                    hiddenCalls: state.callsCollapsed ? index.calls.get(`${key}:${step}`) ?? [] : [],
+                });
+            }
+            for (const record of group)
+                rows.push({ kind: 'record', id: record.id, record });
+            group = [];
+        };
+        for (const record of bucket.records) {
+            if (record.step !== step) {
+                flush();
+                step = record.step;
+            }
+            group.push(record);
+        }
+        flush();
+    }
+    return rows;
+}
 /** Shared result for the empty query, which matches nothing by definition. */
 const EMPTY_SEARCH = { matches: [], counts: new Map() };
 /**
@@ -524,7 +656,7 @@ function locateMatch(state, index) {
         searchFocus: index,
         selectedId: record.id,
         collapsedTurns,
-        callsCollapsed: state.callsCollapsed && record.kind !== 'subtool',
+        callsCollapsed: state.callsCollapsed && !isCall(record),
         detailScroll: 0,
         following: false,
     };
@@ -559,11 +691,44 @@ function graphemes(text) {
     trajectorySegmenter ??= new Intl.Segmenter(undefined, { granularity: 'grapheme' });
     return trajectorySegmenter.segment(text);
 }
-const DETAIL_TABS = ['summary', 'payload', 'result', 'schema', 'timing'];
+/**
+ * Tabs a record can actually fill.
+ *
+ * The tabs used to be fixed, so most records offered four that said "No payload
+ * recorded." and the reader pressed `Tab` through them to find the one with
+ * content. The desktop client instead asks each record which sections it has,
+ * which is also why its tab row never shows a dead one. Timing was a section of
+ * its own until it became clear that the numbers a reader wants first belong in
+ * the summary, beside the record's identity.
+ */
+function detailTabsFor(record) {
+    if (record === undefined)
+        return ['summary'];
+    const tabs = ['summary'];
+    if (record.payload !== '')
+        tabs.push('payload');
+    if (record.result !== '')
+        tabs.push('result');
+    if (record.schema !== '')
+        tabs.push('schema');
+    return tabs;
+}
+/**
+ * The tab the pane is actually showing.
+ *
+ * The state keeps the reader's last choice, so returning to a record brings the
+ * same section back; a record without that section falls back to its first one
+ * instead of printing an empty placeholder.
+ */
+function activeTab(state) {
+    const tabs = detailTabsFor(selectedRecord(state));
+    return tabs.includes(state.detailTab) ? state.detailTab : tabs[0] ?? 'summary';
+}
 function moveTab(state, delta) {
-    const current = DETAIL_TABS.indexOf(state.detailTab);
-    const next = (current + delta + DETAIL_TABS.length) % DETAIL_TABS.length;
-    return { ...state, detailTab: DETAIL_TABS[next] ?? 'summary', detailScroll: 0 };
+    const tabs = detailTabsFor(selectedRecord(state));
+    const current = Math.max(0, tabs.indexOf(activeTab(state)));
+    const next = (current + delta + tabs.length) % tabs.length;
+    return { ...state, detailTab: tabs[next] ?? 'summary', detailScroll: 0 };
 }
 const DEFAULT_PAGE_SIZE = 10;
 const DEFAULT_DETAIL_PAGE_LINES = 10;
@@ -625,17 +790,56 @@ export function applyTrajectoryEvent(state, event, options = {}) {
         }
         return { state };
     }
+    /**
+     * A wheel gesture scrolls whatever the reader is reading.
+     *
+     * The view received wheel events already but ignored everything that was not a
+     * key, so a mouse reader found the only way to scroll the detail pane was
+     * `PgUp`/`PgDn` — while the wheel silently did nothing at all. It now scrolls
+     * the detail when one is open and moves the selection otherwise, which is what
+     * the same gesture does in the transcript.
+     */
+    if (event.type === 'wheel') {
+        const step = Math.max(1, Math.round(detailPageLines / 2));
+        if (state.details) {
+            const delta = event.direction === 'up' ? -step : step;
+            return { state: { ...state, detailScroll: Math.max(0, state.detailScroll + delta) } };
+        }
+        return { state: move(state, (event.direction === 'up' ? -1 : 1) * 3) };
+    }
     if (event.type !== 'key')
         return { state };
-    if (event.id === 'escape' || event.id === 'ctrl+c') {
+    // This ledger keeps three keys that the shared reading would move through a
+    // list: `tab` switches the detail tab, `pageUp`/`pageDown` scroll an open
+    // detail pane, and `home`/`end` carry following state. They are read first, so
+    // the shared reading below only ever answers for the keys this surface really
+    // shares — up, down, and closing one layer.
+    if (event.id === 'tab' || event.id === 'right')
+        return { state: moveTab(state, 1) };
+    if (event.id === 'shift+tab' || event.id === 'left')
+        return { state: moveTab(state, -1) };
+    /**
+     * With the detail pane open, the arrows belong to it.
+     *
+     * They used to move the record selection even then, so a reader scrolling a long
+     * payload changed which record the pane described instead of scrolling: the
+     * content jumped out from under them and the pane snapped back to the top of a
+     * different record. `Tab` still switches tabs and `Esc` still closes the pane,
+     * so nothing is lost — the selection simply stops competing with the text.
+     */
+    if (state.details && (event.id === 'up' || event.id === 'down')) {
+        const delta = event.id === 'up' ? -1 : 1;
+        return { state: { ...state, detailScroll: Math.max(0, state.detailScroll + delta) } };
+    }
+    const navigation = listNavigation(event);
+    if (navigation.kind === 'close') {
+        // One layer per press: an open detail panel closes before the ledger does.
         if (state.details)
             return { state: { ...state, details: false, detailScroll: 0 } };
         return { close: true };
     }
-    if (event.id === 'up')
-        return { state: move(state, -1) };
-    if (event.id === 'down')
-        return { state: move(state, 1) };
+    if (navigation.kind === 'move')
+        return { state: move(state, navigation.delta) };
     if (event.id === 'pageUp') {
         if (state.details)
             return { state: { ...state, detailScroll: Math.max(0, state.detailScroll - detailPageLines) } };
@@ -660,17 +864,13 @@ export function applyTrajectoryEvent(state, event, options = {}) {
     }
     if (event.id === 'enter')
         return { state: { ...state, details: !state.details, detailScroll: 0 } };
-    if (event.id === 'tab' || event.id === 'right')
-        return { state: moveTab(state, 1) };
-    if (event.id === 'shift+tab' || event.id === 'left')
-        return { state: moveTab(state, -1) };
     return { state };
 }
 // Every key `applyTrajectoryEvent` accepts. Rows whose first word is the footer
 // label are also printed by the overlay's toolbar and footer.
-const HOTKEY_NAVIGATE = { keys: '↑↓', action: 'Navigate records' };
+const HOTKEY_NAVIGATE = { keys: '↑↓', action: 'Navigate records, or scroll an open detail' };
 const HOTKEY_EDGE = { keys: 'Home / End', action: 'Jump to the first record, or follow the newest' };
-const HOTKEY_PAGE = { keys: 'PgUp / PgDn', action: 'Scroll — page the detail or the record list' };
+const HOTKEY_PAGE = { keys: '↑↓ / PgUp / PgDn', action: 'Scroll the open detail, or page the record list' };
 const HOTKEY_DETAILS = { keys: 'Enter', action: 'Details — open or close the detail panel' };
 const HOTKEY_SECTION = { keys: 'Tab / ←→', action: 'Section — switch the detail tab' };
 const HOTKEY_SEARCH = { keys: '/', action: 'Search the ledger' };
@@ -697,53 +897,67 @@ export const TRAJECTORY_HOTKEYS = [
     HOTKEY_BACKSPACE,
     HOTKEY_CLOSE,
 ];
+/**
+ * Rows the timing overview occupies, or 0 when it is not drawn.
+ *
+ * Rendering and paging both need this: the overview sits between the toolbar and
+ * the ledger, so a page that ignored it would scroll three rows further than the
+ * frame can show.
+ */
+export function trajectoryOverviewHeight(state, width = Number.POSITIVE_INFINITY) {
+    if (state.details || state.query !== '')
+        return 0;
+    if (width < 24)
+        return 0;
+    let steps = 0;
+    for (const stats of trajectoryIndex(state.ledger).stats.values())
+        steps += stats.steps;
+    if (steps < 2)
+        return 0;
+    const overview = trajectoryTimeline(state.ledger.records, { width: 1 });
+    return overview === undefined ? 0 : overview.lanes.filter(span => span.ms > 0).length;
+}
 /** List paging capacity in records for one body height (pure, shared with rendering). */
-export function trajectoryListMetrics(state, height) {
-    const body = Math.max(0, height - 4);
+export function trajectoryListMetrics(state, height, width = Number.POSITIVE_INFINITY) {
+    const body = Math.max(0, height - 4 - trajectoryOverviewHeight(state, width));
     if (body <= 0)
         return { pageSize: 0 };
-    const layout = rowLayout(state);
-    if (layout.length === 0)
+    const rows = trajectoryRows(state);
+    if (rows.length === 0)
         return { pageSize: 1 };
-    const selected = Math.max(0, layout.findIndex(row => row.id === state.selectedId));
-    const start = Math.max(0, Math.min(layout.length - 1, selected - Math.floor(body / 2)));
-    // Count record rows inside the window; turn headers only occupy space.
-    let rows = 0;
+    const selected = rows.findIndex(row => row.kind === 'record' && row.id === state.selectedId);
+    const start = Math.max(0, Math.min(rows.length - 1, Math.max(0, selected) - Math.floor(body / 2)));
+    // Count record rows inside the window; turn and step headers only occupy space.
     let count = 0;
-    for (let index = start; index < layout.length; index += 1) {
-        rows += 1;
-        if (rows > body)
-            break;
-        if (layout[index]?.turnHeader !== true)
+    for (let index = start; index < rows.length && index - start < body; index += 1) {
+        if (rows[index]?.kind === 'record')
             count += 1;
     }
     return { pageSize: Math.max(1, count) };
 }
-/** Per-record row layout (turn headers included), consumed by rendering and metrics. */
-function rowLayout(state) {
-    const layout = [];
-    let previousTurn;
-    for (const record of trajectoryVisibleRecords(state)) {
-        if (record.turn !== previousTurn) {
-            previousTurn = record.turn;
-            layout.push({ id: `turn:${record.turn ?? 'between'}`, turnHeader: true });
-        }
-        layout.push({ id: record.id, turnHeader: false });
-    }
-    return layout;
-}
 /** Detail scroll step in wrapped lines for one body height (pure, shared with rendering). */
 export function trajectoryDetailMetrics(_state, height) {
+    // The frame spends four rows on its own chrome and the pane three on its title,
+    // its sections and the gap between them.
     const body = Math.max(0, height - 4);
-    const viewport = Math.max(0, body - 2);
+    const viewport = Math.max(0, body - 3);
     return { pageLines: Math.max(1, viewport) };
 }
 function duration(record) {
     if (record.durationMs === null)
         return record.status === 'running' ? 'live' : '—';
-    if (record.durationMs < 1_000)
-        return `${Math.round(record.durationMs)}ms`;
-    return `${(record.durationMs / 1_000).toFixed(record.durationMs < 10_000 ? 1 : 0)}s`;
+    return formatDuration(record.durationMs);
+}
+/** `12.4K→812` for a model request, or '' for a record that reported no usage. */
+function tokenPair(record) {
+    if (record.kind !== 'assistant')
+        return '';
+    if (record.inputTokens === null && record.outputTokens === null)
+        return '';
+    const side = (value) => value === null ? '—' : formatTokens(value);
+    // The incoming side is padded so the arrow, and therefore the duration column
+    // beside it, stays on one column across every request in the ledger.
+    return `${side(record.inputTokens).padStart(6)}→${side(record.outputTokens)}`;
 }
 function kindColor(kind) {
     if (kind === 'user')
@@ -778,14 +992,29 @@ function highlightSummary(summary, spans, theme) {
 }
 function recordLine(record, selected, theme, width, highlightSpans, matchCount, summaryOverride) {
     const marker = selected ? theme.fg('accent', '›') : ' ';
-    const locationLabel = record.turn === null ? ' —   ' : `T${record.turn}${record.step === null ? '' : `·${record.step}`}`.padEnd(5);
-    const kind = theme.fg(kindColor(record.kind), record.label.padEnd(9).slice(0, 9));
-    const elapsed = duration(record).padStart(6);
+    /*
+     * No location column: the turn rule and the step header above already say
+     * where this row is, and `T1·1` on every line spent five cells restating it in
+     * a form nobody reads. The right edge instead carries what the row cost:
+     * tokens for a model request, duration for everything.
+     */
+    const prefix = `${marker} ${theme.fg('dim', `#${String(record.index).padStart(3)}`)}  ${theme.fg(kindColor(record.kind), record.label.padEnd(9).slice(0, 9))}  `;
     const badge = matchCount === undefined ? '' : ` ${theme.fg('dim', `×${matchCount}`)}`;
-    const prefix = `${marker} ${String(record.index).padStart(4)} ${locationLabel} ${kind} ${elapsed}  `;
-    const bodyWidth = Math.max(0, width - visibleWidth(prefix) - visibleWidth(badge));
+    // A record with no recorded duration prints nothing rather than an em dash:
+    // a column of `—` where most rows have a time reads as missing data, when in
+    // fact a user message simply never had a duration.
+    const elapsed = record.durationMs === null && record.status !== 'running' ? '' : duration(record);
+    const tokens = tokenPair(record);
+    const right = (withTokens) => withTokens ? `${tokens}  ${elapsed}` : elapsed;
+    const fixed = visibleWidth(prefix) + visibleWidth(badge);
+    // Tokens are the first thing to go: the pane still has them, and the duration
+    // is the reason this view exists.
+    const columns = tokens === '' || width - fixed - visibleWidth(right(true)) - 12 < 0 ? right(false) : right(true);
     const body = summaryOverride ?? highlightSummary(record.summary, highlightSpans);
-    return prefix + truncateToWidth(body, bodyWidth) + badge;
+    const bodyWidth = Math.max(0, width - fixed - visibleWidth(columns) - 2);
+    const text = truncateToWidth(body, bodyWidth);
+    const gap = Math.max(1, width - fixed - visibleWidth(text) - visibleWidth(columns));
+    return prefix + text + ' '.repeat(Math.max(0, gap)) + columns + badge;
 }
 /** Snippet of one record field around its first hit (non-summary fields). */
 function fieldSnippet(record, field, highlightSpans, width, theme, focused) {
@@ -816,38 +1045,72 @@ function graphemeStart(text, cursor) {
 function selectedRecord(state) {
     return state.ledger.records.find(record => record.id === state.selectedId);
 }
-function timingText(record) {
-    return [
-        `Event: ${record.type} (#${record.seq})`,
-        `Started: ${record.startedAt === null ? '—' : new Date(record.startedAt).toISOString()}`,
-        `Duration: ${record.durationMs === null ? '—' : `${Math.round(record.durationMs)} ms`}`,
-        `TTFT: ${record.ttftMs === null ? '—' : `${Math.round(record.ttftMs)} ms`}`,
-        `Tokens: ${record.inputTokens ?? '—'} in · ${record.outputTokens ?? '—'} out`,
-        `Status: ${record.status}`,
-    ].join('\n');
-}
-function detailText(state, record) {
+/** Clock time, which is what a reader compares against a log line. */
+function clockTime(ms) {
+    const date = new Date(ms);
+    const pad = (value) => String(value).padStart(2, '0');
+    return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+}
+/**
+ * Label/value pairs for one record, omitting what it does not have.
+ *
+ * The title already states where the record sits and how long it took, so this
+ * block does not repeat either: it answers what the record is, when it happened,
+ * and what it cost the model.
+ */
+function summaryFields(record) {
+    const rows = [];
+    rows.push({ label: 'Event', value: `${record.type} · #${record.seq}` });
+    if (record.startedAt !== null)
+        rows.push({ label: 'Started', value: clockTime(record.startedAt) });
+    if (record.ttftMs !== null)
+        rows.push({ label: 'First token', value: formatDuration(record.ttftMs) });
+    if (record.inputTokens !== null || record.outputTokens !== null) {
+        const side = (value) => value === null ? '—' : formatTokens(value);
+        rows.push({ label: 'Tokens', value: `${side(record.inputTokens)} in · ${side(record.outputTokens)} out` });
+    }
+    // `ok` on every record is the kind of field that teaches nothing; the ones
+    // worth a line are the ones that went wrong.
+    if (record.status !== 'ok')
+        rows.push({ label: 'Status', value: record.status });
+    return rows;
+}
+/** The assistant's reasoning and answer are two pieces of writing, not one blob. */
+function assistantWriting(record, theme, width) {
+    const out = [];
+    if (record.thinking !== '') {
+        out.push(theme.fg('dim', 'Thinking'), ...renderMarkdown(record.thinking, theme, width));
+        if (record.result !== '')
+            out.push('', theme.fg('dim', 'Answer'));
+    }
+    if (record.result !== '')
+        out.push(...renderMarkdown(record.result, theme, width));
+    return out;
+}
+function detailSection(tab, record) {
     if (record === undefined)
-        return 'No trajectory record selected.';
-    if (state.detailTab === 'payload')
-        return record.payload || 'No payload recorded.';
-    if (state.detailTab === 'result')
-        return record.result || 'No result recorded.';
-    if (state.detailTab === 'schema')
-        return record.schema || 'No tool schema recorded.';
-    if (state.detailTab === 'timing')
-        return timingText(record);
-    return [
-        `${record.label} · ${record.type}`,
-        `Turn ${record.turn ?? 'between'} · Step ${record.step ?? '—'} · ${duration(record)}`,
-        '',
-        record.summary,
-    ].join('\n');
+        return { kind: 'prose', text: 'No trajectory record selected.' };
+    if (tab === 'summary')
+        return { kind: 'fields', rows: summaryFields(record) };
+    if (tab === 'payload')
+        return { kind: 'code', text: record.payload, language: 'json' };
+    if (tab === 'schema')
+        return { kind: 'code', text: record.schema, language: 'json' };
+    // A model's answer is prose; a tool's output is whatever the tool spoke.
+    const spoken = record.kind === 'assistant' || record.kind === 'compaction';
+    if (spoken)
+        return { kind: 'prose', text: record.result };
+    return {
+        kind: 'code',
+        text: record.result,
+        language: toolPayloadLanguage(record.type === 'tool/call' ? record.label.toLowerCase() : ''),
+    };
 }
 function ledgerRows(state, theme, width, height) {
-    const visible = trajectoryVisibleRecords(state);
-    if (visible.length === 0)
+    const rows = trajectoryRows(state);
+    if (!rows.some(row => row.kind === 'record')) {
         return [theme.fg('dim', state.query === '' ? '  No trajectory records.' : '  No matching trajectory records.')];
+    }
     const { matches, counts } = trajectorySearch(state);
     const focused = state.searchFocus === null ? undefined : matches[state.searchFocus];
     const highlighted = new Map();
@@ -856,16 +1119,12 @@ function ledgerRows(state, theme, width, height) {
         list.push(match);
         highlighted.set(match.record.id, list);
     }
-    const lines = [];
-    const layout = rowLayout(state);
-    let previousTurn;
-    for (const record of visible) {
-        if (record.turn !== previousTurn) {
-            previousTurn = record.turn;
-            const label = record.turn === null ? 'Between turns' : `Turn ${record.turn}`;
-            const collapsed = record.turn !== null && state.collapsedTurns.has(record.turn) ? ' · collapsed' : '';
-            lines.push({ id: `turn:${record.turn ?? 'between'}`, text: theme.fg('accent', `── ${label}${collapsed} `) });
-        }
+    const lines = rows.map((row) => {
+        if (row.kind === 'turn')
+            return turnLine(row.stats, row.collapsed, theme, width);
+        if (row.kind === 'step')
+            return stepLine(row.step, row.hiddenCalls, theme, width);
+        const record = row.record;
         const recordMatches = highlighted.get(record.id) ?? [];
         const focusedForRecord = focused?.record === record ? focused : undefined;
         const headField = focusedForRecord !== undefined ? focusedForRecord.field : recordMatches[0]?.field;
@@ -873,26 +1132,150 @@ function ledgerRows(state, theme, width, height) {
         const summary = headField === undefined || headField === 'summary'
             ? highlightSummary(record.summary, headSpans, theme)
             : fieldSnippet(record, headField, headSpans, Math.max(0, width - 24), theme, focusedForRecord);
-        lines.push({
-            id: record.id,
-            text: recordLine(record, record.id === state.selectedId, theme, width, headField === 'summary' ? headSpans : [], state.query === '' ? undefined : counts.get(record.id), summary),
-        });
-    }
-    const selectedIndex = Math.max(0, layout.findIndex(row => row.id === state.selectedId));
-    const start = Math.max(0, Math.min(layout.length - 1, selectedIndex - Math.floor(height / 2)));
-    return lines.slice(start, start + height).map(line => truncateToWidth(line.text, width));
+        return recordLine(record, record.id === state.selectedId, theme, width, headField === 'summary' ? headSpans : [], state.query === '' ? undefined : counts.get(record.id), summary);
+    });
+    const selectedIndex = Math.max(0, rows.findIndex(row => row.kind === 'record' && row.id === state.selectedId));
+    const start = Math.max(0, Math.min(rows.length - 1, selectedIndex - Math.floor(height / 2)));
+    return lines.slice(start, start + height).map(line => truncateToWidth(line, width));
 }
+/**
+ * The detail pane.
+ *
+ * Two rows of header — the record's identity and its section names — then the
+ * section itself. Position and scroll hint ride on the section row rather than
+ * taking a line of their own, and the sections are separated from the content by
+ * whitespace instead of a rule, because in the split view a rule would sit one
+ * column from the pane's own border.
+ */
 function detailRows(state, theme, width, height) {
-    const tabs = DETAIL_TABS.map(tab => tab === state.detailTab ? theme.fg('accent', `[${tab}]`) : theme.fg('dim', tab)).join(' ');
-    const body = wrapText(detailText(state, selectedRecord(state)), Math.max(1, width - 2));
-    const viewportHeight = Math.max(0, height - 2);
-    const maxScroll = Math.max(0, body.length - viewportHeight);
+    const record = selectedRecord(state);
+    const tab = activeTab(state);
+    const tabs = detailTabsFor(record);
+    const section = detailSection(tab, record);
+    const inner = Math.max(1, width - 2);
+    const body = section.kind === 'fields'
+        ? summaryBlock(section.rows, record, theme, inner)
+        : section.kind === 'prose'
+            ? (record !== undefined && record.kind === 'assistant' && tab === 'result'
+                ? assistantWriting(record, theme, inner)
+                : renderMarkdown(section.text, theme, inner))
+            : codeRows(section.text, section.language, theme, inner);
+    const viewport = Math.max(0, height - 3);
+    const maxScroll = Math.max(0, body.length - viewport);
     const start = Math.min(state.detailScroll, maxScroll);
-    const end = Math.min(body.length, start + viewportHeight);
-    const position = body.length > viewportHeight
-        ? theme.fg('dim', ` ${start + 1}-${end} / ${body.length} lines · PgUp/PgDn scroll`)
-        : '';
-    return [truncateToWidth(tabs, width), truncateToWidth(position, width), ...body.slice(start, end)];
+    const end = Math.min(body.length, start + viewport);
+    const first = truncateToWidth(titleLine(record, theme, width), width);
+    /*
+     * The active section is marked, not only coloured. Every style helper is a
+     * no-op when the terminal has no colour, so colour alone would leave a reader
+     * on such a terminal unable to tell which section they are looking at. `›` is
+     * the same "this one" the ledger uses for its selected row.
+     */
+    const tabsText = tabs.map(candidate => candidate === tab
+        ? theme.bold(theme.fg('accent', `› ${candidate}`))
+        : theme.fg('dim', `  ${candidate}`)).join('  ');
+    const position = body.length > viewport ? theme.fg('dim', `${start + 1}-${end} / ${body.length}`) : '';
+    const gap = Math.max(1, width - visibleWidth(tabsText) - visibleWidth(position));
+    const second = truncateToWidth(tabsText + ' '.repeat(gap) + position, width);
+    return [first, second, '', ...body.slice(start, end).map(line => truncateToWidth(' ' + line, width))];
+}
+/** `#3  TOOL` — which record this pane is about, and what it cost. */
+function titleLine(record, theme, width) {
+    if (record === undefined)
+        return '';
+    const where = record.turn === null ? 'Between turns' : `Turn ${record.turn}`;
+    const place = record.step === null ? where : `${where} · Step ${record.step}`;
+    const called = record.name === '' ? '' : theme.fg('text', ` ${record.name}`);
+    const left = theme.bold(`#${record.index} ${record.label}`) + called + theme.fg('dim', `  ${place}`);
+    const right = record.durationMs === null ? '' : theme.fg('dim', duration(record));
+    const gap = Math.max(1, width - visibleWidth(left) - visibleWidth(right));
+    return left + ' '.repeat(gap) + right;
+}
+/**
+ * The facts, then the record's own text when no other section holds it.
+ *
+ * A record whose text has a section of its own — an answer in `result`, a call in
+ * `payload` — would only see that text flattened into one row here, which is what
+ * made the pane read as a wall of code. A record with nowhere else to put it (a
+ * turn that failed, a message the user sent) gets it as writing, below the facts.
+ */
+function summaryBlock(rows, record, theme, width) {
+    const facts = fieldRows(rows, theme, width);
+    if (record === undefined || record.result !== '' || record.summary === '')
+        return facts;
+    return [...facts, '', ...renderMarkdown(record.summary, theme, width)];
+}
+/** Label/value rows with the label column as wide as the widest label needs. */
+function fieldRows(rows, theme, width) {
+    const labelWidth = Math.max(...rows.map(field => field.label.length));
+    const out = [];
+    for (const field of rows) {
+        const room = Math.max(1, width - labelWidth - 2);
+        const wrapped = field.wrap === true ? wrapText(field.value, room) : [truncateToWidth(field.value, room)];
+        out.push(theme.fg('dim', field.label.padEnd(labelWidth)) + '  ' + (wrapped[0] ?? ''));
+        // A long value continues under itself rather than under its label.
+        for (const line of wrapped.slice(1))
+            out.push(' '.repeat(labelWidth + 2) + line);
+    }
+    return out;
+}
+/**
+ * Code, numbered only once it wraps.
+ *
+ * The gutter used to number every wrapped row, so a JSON line spread over four
+ * rows read as four source lines and nothing lined up. Numbers now belong to
+ * source lines, a wrapped continuation leaves the column blank, and the gutter
+ * appears at all only when some line is too long to fit — a short payload reads
+ * better as the block it is.
+ */
+function codeRows(text, language, theme, width) {
+    if (text === '')
+        return [theme.fg('dim', 'Nothing recorded.')];
+    const source = text.split('\n');
+    const digits = String(source.length).length;
+    const gutter = digits + 1;
+    const unwrapped = source.every(line => visibleWidth(line) <= width);
+    const room = Math.max(1, width - (unwrapped ? 0 : gutter));
+    const painted = language === undefined
+        ? source
+        : highlightCodeLines(source, language, theme);
+    const out = [];
+    for (const [index, line] of painted.entries()) {
+        const rows = wrapText(line, room);
+        out.push(unwrapped ? (rows[0] ?? '') : theme.fg('dim', String(index + 1).padStart(digits) + ' ') + (rows[0] ?? ''));
+        for (const rest of rows.slice(1))
+            out.push(' '.repeat(unwrapped ? 0 : gutter) + rest);
+    }
+    return out;
+}
+/**
+ * A turn rule: the label on the left, the time it took against the right edge.
+ *
+ * The time is the whole reason this view exists, and "where did sixteen minutes
+ * go" is answered top-down: the turn states its span, the step headers break it
+ * into requests, and each record states its own duration.
+ */
+function turnLine(stats, collapsed, theme, width) {
+    const notes = [];
+    // Steps are only worth counting where they are not visible.
+    if (collapsed)
+        notes.push(`${stats.steps} ${stats.steps === 1 ? 'step' : 'steps'}`, 'collapsed');
+    if (stats.errors > 0)
+        notes.push(`${stats.errors} ${stats.errors === 1 ? 'error' : 'errors'}`);
+    if (stats.warnings > 0)
+        notes.push(`${stats.warnings} ${stats.warnings === 1 ? 'warning' : 'warnings'}`);
+    const label = stats.turn === null ? 'Between turns' : `Turn ${stats.turn}`;
+    const left = `── ${label}${notes.length === 0 ? '' : ` · ${notes.join(' · ')}`} `;
+    const right = stats.spanMs === null ? '' : ` ${formatDuration(stats.spanMs)}`;
+    const room = Math.max(0, width - visibleWidth(left) - visibleWidth(right));
+    return theme.fg('accent', left) + theme.fg('border', '─'.repeat(room)) + theme.fg('dim', right);
+}
+/** A step group: the request's boundary, and what the calls fold is hiding. */
+function stepLine(step, hiddenCalls, theme, width) {
+    const tools = hiddenCalls.map(([name, count]) => count > 1 ? `${name}×${count}` : name).join(' ');
+    const left = `   Step ${step}${tools === '' ? '' : ` · ${tools}`} `;
+    const room = Math.max(0, width - visibleWidth(left) - 1);
+    return theme.fg('dim', left + '·'.repeat(room));
 }
 /** `(3/10)`-style position while the search is active, or ''. */
 function searchPosition(state) {
@@ -902,23 +1285,74 @@ function searchPosition(state) {
     const focus = Math.max(0, state.searchFocus ?? 0);
     return `(${Math.min(focus + 1, matches.length)}/${matches.length})`;
 }
-/** Render the full-screen ledger without touching the ordinary transcript viewport. */
+/** Lane ink, matching how the ledger paints the same kinds. */
+const LANE_TONE = {
+    llm: 'accent',
+    tools: 'success',
+    other: 'dim',
+};
+/**
+ * The overview rows, or `undefined` when no record recorded a duration.
+ *
+ * A session that has only just started has nothing to show, and an empty
+ * three-lane bar would read as "all lanes are zero" rather than "not yet".
+ */
+function timelineRows(state, theme, width) {
+    const overview = trajectoryTimeline(state.ledger.records, { width });
+    if (overview === undefined || width < 24)
+        return undefined;
+    return renderTimelineOverview(overview, {
+        width,
+        // The same precision the ledger rows use: a lane that took 0.4 s must not
+        // read `0s` beside a row that says `0.4s`.
+        formatDuration,
+        paint: (lane, text) => theme.fg(LANE_TONE[lane], text),
+        paintEmpty: text => theme.fg('borderMuted', text),
+    }).map(row => truncateToWidth(' ' + row, width));
+}
 export function renderTrajectory(state, theme, width, height) {
     const safeWidth = Math.max(1, width);
     const safeHeight = Math.max(1, height);
-    const records = state.ledger.records;
-    const errors = records.filter(record => record.status === 'error').length;
-    const warnings = records.filter(record => record.status === 'warning').length;
-    const requests = records.filter(record => record.kind === 'assistant').length;
-    const tools = records.filter(record => record.kind === 'tool' || record.kind === 'subtool').length;
-    const header = truncateToWidth(theme.bold(' Trajectory ') + theme.fg('dim', `${records.length} records · ${requests} requests · ${tools} calls · ${warnings} warnings · ${errors} errors`), safeWidth);
+    /*
+     * Human nouns, not internal ones. `12 records · 6 requests · 9 calls` counted
+     * events the reader never named; a turn and a step are what the ledger is made
+     * of, and the span is the question. Counts of problems appear only when there
+     * are problems.
+     */
+    const stats = [...trajectoryIndex(state.ledger).stats.values()];
+    const turns = stats.filter(entry => entry.turn !== null).length;
+    const steps = stats.reduce((sum, entry) => sum + entry.steps, 0);
+    const spanMs = stats.reduce((sum, entry) => sum + (entry.spanMs ?? 0), 0);
+    const errors = stats.reduce((sum, entry) => sum + entry.errors, 0);
+    const warnings = stats.reduce((sum, entry) => sum + entry.warnings, 0);
+    const summary = [
+        turns === 0 ? '' : `${turns} ${turns === 1 ? 'turn' : 'turns'}`,
+        steps === 0 ? '' : `${steps} ${steps === 1 ? 'step' : 'steps'}`,
+        spanMs === 0 ? '' : formatDuration(spanMs),
+        errors === 0 ? '' : `${errors} ${errors === 1 ? 'error' : 'errors'}`,
+        warnings === 0 ? '' : `${warnings} ${warnings === 1 ? 'warning' : 'warnings'}`,
+    ].filter(part => part !== '').join(' · ');
+    const header = truncateToWidth(theme.bold(' Trajectory ') + theme.fg('dim', summary), safeWidth);
     const searchInfo = state.query === '' ? '' : ` · ${searchPosition(state)}`;
     const followInfo = state.following ? '' : state.followNotice > 0 ? ` · End: follow · +${state.followNotice} new` : '';
     const toolbar = truncateToWidth(theme.fg('dim', state.details
         ? `${searchInfo.slice(2)}${followInfo} · ${formatOverlayHint([HOTKEY_NAVIGATE, HOTKEY_PAGE, HOTKEY_SECTION, HOTKEY_CLOSE])}`
-        : `${searchInfo.slice(2)}${followInfo} · ${formatOverlayHint([HOTKEY_NAVIGATE, HOTKEY_DETAILS, HOTKEY_SEARCH, HOTKEY_MATCH, HOTKEY_TURN, HOTKEY_CALLS, HOTKEY_EDGE])}${state.following ? ' ●' : ''}`), safeWidth);
+        : `${searchInfo.slice(2)}${followInfo} · ${formatOverlayHint([HOTKEY_NAVIGATE, HOTKEY_DETAILS, HOTKEY_SEARCH, HOTKEY_TURN, HOTKEY_CALLS])}${state.following ? ' ●' : ''}`), safeWidth);
     const divider = theme.fg('border', '─'.repeat(safeWidth));
-    const bodyHeight = Math.max(0, safeHeight - 4);
+    /*
+     * The overview answers "where did the time go" before the reader has to open a
+     * single record. It sits between the toolbar and the ledger, only in the list
+     * view: the detail panel is already about one record's timing, and repeating
+     * the project-wide bars beside it would split attention for no gain.
+     *
+     * It is also gated on there being more than one step. A single request drawn as
+     * `LLM 80% / Tools 20%` restates what the one row below it already says, and two
+     * rows of restatement on a six-row body is the kind of chrome this view was
+     * meant to replace. Searching hides it for the same reason: the reader is
+     * looking for text, not for time.
+     */
+    const overview = trajectoryOverviewHeight(state, safeWidth) === 0 ? undefined : timelineRows(state, theme, safeWidth);
+    const bodyHeight = Math.max(0, safeHeight - 4 - (overview?.length ?? 0));
     const wideDetails = state.details && safeWidth >= 96;
     let body;
     if (wideDetails) {
@@ -942,7 +1376,7 @@ export function renderTrajectory(state, theme, width, height) {
             ? ' ' + formatOverlayHint([HOTKEY_PAGE, HOTKEY_SECTION, HOTKEY_CLOSE])
             : ' ' + formatOverlayHint([HOTKEY_CLOSE]);
     const footer = truncateToWidth(theme.fg(state.searching ? 'accent' : 'dim', footerText), safeWidth);
-    const lines = [header, toolbar, divider, ...body.slice(0, bodyHeight), footer].slice(0, safeHeight);
+    const lines = [header, toolbar, divider, ...(overview ?? []), ...body.slice(0, bodyHeight), footer].slice(0, safeHeight);
     while (lines.length < safeHeight)
         lines.push('');
     return {