@agi-fans/dsh-tui 0.22.0 → 0.23.1

package/lib/views/trajectory.js

@@ -1,10 +1,12 @@
 /** Keyboard-first Trajectory ledger projected directly from durable session events. */
-import { padToWidth, truncateToWidth, visibleWidth, wrapText } from "../chrome/width.js";
+import { expandTabs, padToWidth, truncateToWidth, visibleWidth, wrapCode, wrapText } from "../chrome/width.js";
 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 { highlightCodeLines } from "../chrome/code-highlight.js";
+import { toolArgSubject } from "../chrome/tool-renderers.js";
+import { toolArgsObject } from "../chrome/tool-args.js";
+import { paintSurface } from "../chrome/theme.js";
 import { renderMarkdown } from "../chrome/markdown.js";
 import { renderTimelineOverview, trajectoryTimeline } from "./trajectory-timeline.js";
 import { formatDuration, formatTokens } from "../chrome/status-line.js";
@@ -72,6 +74,120 @@ function tokenValue(source, ...keys) {
     }
     return null;
 }
+const TAB_LABELS = {
+    summary: 'Overview', input: 'Input', result: 'Result', payload: 'Raw', schema: 'Schema',
+};
+function rawPayload(record) {
+    return [record.payload, record.rawResult].filter(value => value !== undefined && value !== '').join('\n\n');
+}
+/** Decode only the outer argument object; strings keep their whitespace and newlines. */
+function argumentRows(record, theme, width) {
+    const raw = record.input ?? '';
+    const args = toolArgsObject(raw);
+    if (args === undefined)
+        return codeRows(raw, undefined, theme, width);
+    const rows = [];
+    for (const [key, value] of Object.entries(args)) {
+        if (rows.length > 0)
+            rows.push('');
+        rows.push(theme.fg('dim', key));
+        rows.push(...codeRows(typeof value === 'string' ? value : json(value), typeof value === 'string' ? undefined : 'json', theme, width));
+    }
+    return rows.length === 0 ? [theme.fg('dim', 'No arguments.')] : rows;
+}
+/** The same split geometry drives drawing, pointer hit tests and wheel routing. */
+export function trajectoryLeftWidth(width) {
+    return Math.max(32, Math.min(64, Math.floor(width * 0.38)));
+}
+const groupCache = new WeakMap();
+function recordGroups(ledger) {
+    const cached = groupCache.get(ledger);
+    if (cached?.version === ledger.version)
+        return cached.groups;
+    const contexts = new Map();
+    const owner = new Map();
+    const children = new Map();
+    let previous, contextHead;
+    for (const record of ledger.records) {
+        if (record.kind === 'context') {
+            if (previous?.kind !== 'context' || previous.turn !== record.turn || previous.step !== record.step)
+                contextHead = record.id;
+            const head = contextHead;
+            const group = contexts.get(head) ?? [];
+            group.push(record);
+            contexts.set(head, group);
+            owner.set(record.id, head);
+        }
+        if (record.parentCallId !== null) {
+            const parent = `tool:${record.parentCallId}`;
+            const group = children.get(parent) ?? [];
+            group.push(record);
+            children.set(parent, group);
+        }
+        previous = record;
+    }
+    const groups = { contexts, owner, children };
+    groupCache.set(ledger, { version: ledger.version, groups });
+    return groups;
+}
+function toggleGroup(state) {
+    const record = selectedRecord(state);
+    if (record === undefined)
+        return state;
+    const groups = recordGroups(state.ledger);
+    const id = groups.owner.get(record.id) ?? record.id;
+    if (!groups.contexts.has(id) && !groups.children.has(id))
+        return state;
+    const expanded = new Set(state.expandedGroups);
+    if (expanded.has(id))
+        expanded.delete(id);
+    else
+        expanded.add(id);
+    return { ...state, expandedGroups: expanded, selectedId: id, following: false };
+}
+/** Clicks are committed on release by the terminal owner, after excluding drags. */
+export function trajectoryClick(state, width, height, row, column) {
+    if (row < 3 || row >= height - 1 || column < 0 || column >= width)
+        return state;
+    const split = state.details && !state.fullDetail && width >= 96;
+    const inDetail = state.details && (!split || column > trajectoryLeftWidth(width));
+    if (inDetail) {
+        const next = { ...state, focus: 'detail', following: false };
+        if (row === 4) {
+            const tabs = detailTabsFor(selectedRecord(state));
+            let at = (split ? trajectoryLeftWidth(width) + 1 : 0) + 1;
+            for (const tab of tabs) {
+                const cells = visibleWidth(TAB_LABELS[tab]) + 4;
+                if (column >= at && column < at + cells)
+                    return { ...next, detailTab: tab, detailScroll: 0 };
+                at += cells;
+            }
+        }
+        return next;
+    }
+    const overview = trajectoryOverviewHeight(state, width);
+    const body = Math.max(0, height - 4 - overview);
+    const offset = row - 3 - overview;
+    if (offset < 0 || offset >= body)
+        return state;
+    const rows = trajectoryRows(state);
+    const index = Math.max(0, rows.findIndex(item => item.kind === 'record' && item.id === state.selectedId));
+    const start = Math.max(0, Math.min(Math.max(0, rows.length - body), index - Math.floor(body / 2)));
+    const target = rows[start + offset];
+    if (target?.kind === 'turn' && target.stats.turn !== null) {
+        const collapsed = new Set(state.collapsedTurns);
+        if (collapsed.has(target.stats.turn))
+            collapsed.delete(target.stats.turn);
+        else
+            collapsed.add(target.stats.turn);
+        const first = state.ledger.records.find(record => record.turn === target.stats.turn);
+        return retainVisibleSelection({ ...state, collapsedTurns: collapsed, selectedId: first?.id ?? state.selectedId, focus: 'list', following: false });
+    }
+    if (target?.kind !== 'record')
+        return state;
+    const next = { ...state, selectedId: target.id, details: true, focus: 'list', following: false, detailScroll: 0, notice: '' };
+    return column < 4 ? toggleGroup({ ...next, details: state.details }) : next;
+}
 /** Incremental projection. Opening a long session is O(events); live updates are O(1). */
 export class TrajectoryLedger {
     records = [];
@@ -85,7 +201,7 @@ export class TrajectoryLedger {
     #assistantByStep = new Map();
     #toolByCallId = new Map();
     #compactionById = new Map();
-    #requestByStep = new Map();
+    #requestHeader = '';
     #schemas = new Map();
     #version = 0;
     constructor(events = []) {
@@ -97,7 +213,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, record.thinking]
+        const fields = SEARCH_FIELDS.map(field => record[field] ?? '')
             .map(field => field.toLocaleLowerCase());
         this.#fieldCache.set(record, fields);
         return fields;
@@ -176,8 +292,9 @@ export class TrajectoryLedger {
             return;
         }
         if (eventType === 'request/header') {
-            this.#requestByStep.set(key, json(event.data));
-            const prompt = object(data['prompt']);
+            this.#requestHeader = json(event.data);
+            this.#schemas.clear();
+            const prompt = object(data['header']) ?? object(data['prompt']);
             const tools = prompt?.['tools'];
             if (Array.isArray(tools)) {
                 for (const tool of tools) {
@@ -189,11 +306,15 @@ export class TrajectoryLedger {
             }
             return;
         }
-        if (eventType === 'user/message') {
-            const source = object(data['source']);
-            const isUser = source?.['kind'] === 'user';
-            const text = contentText(data['content']);
-            this.#push(this.#base(event, isUser ? 'user' : 'context', isUser ? 'USER' : 'CONTEXT', compact(text, 'Injected context'), data));
+        if (eventType === 'user/message' || eventType === 'developer/message' || eventType === 'system/message') {
+            const message = object(data['message']) ?? data;
+            const source = object(message['source']);
+            const isUser = source?.['kind'] === 'user' || source?.['kind'] === 'user-question-reply';
+            const text = contentText(message['content']);
+            const system = eventType === 'system/message';
+            const record = this.#base(event, isUser ? 'user' : system ? 'system' : 'context', isUser ? 'USER' : system ? 'SYSTEM' : 'CONTEXT', compact(text, system ? 'System prompt' : 'Injected context'), data);
+            record.result = text;
+            this.#push(record);
             return;
         }
         if (eventType === 'assistant/message') {
@@ -201,7 +322,7 @@ export class TrajectoryLedger {
             const text = contentText(message?.['content'] ?? data['content'], 'text');
             const reasoning = contentText(message?.['content'] ?? data['content'], 'reasoning');
             const usage = object(message?.['usage'] ?? data['usage']);
-            const startedAt = this.#stepStarted.get(key) ?? event.time;
+            const startedAt = this.#stepStarted.get(key) ?? null;
             const existing = this.#assistantByStep.get(key);
             // Format-v2 messages embed the exact timed stream; derive the first
             // visible token time from it instead of live chunk events.
@@ -214,15 +335,16 @@ export class TrajectoryLedger {
                     this.#stepFirstToken.set(key, firstTime);
             }
             if (existing === undefined) {
-                const record = this.#base(event, 'assistant', 'ASSISTANT', compact(text, 'Assistant response'), data);
+                const record = this.#base(event, 'assistant', 'ASSISTANT', compact(text || reasoning, 'Model response'), data);
                 record.id = `assistant:${key}`;
-                record.payload = this.#requestByStep.get(key) ?? record.payload;
+                record.payload = this.#requestHeader || record.payload;
                 record.result = text;
                 record.thinking = reasoning;
+                record.status = data['interrupted'] === true ? 'error' : 'ok';
                 record.startedAt = startedAt;
-                record.durationMs = Math.max(0, event.time - startedAt);
+                record.durationMs = startedAt === null ? null : Math.max(0, event.time - startedAt);
                 const first = this.#stepFirstToken.get(key);
-                record.ttftMs = first === undefined ? null : Math.max(0, first - startedAt);
+                record.ttftMs = first === undefined || startedAt === null ? null : Math.max(0, first - startedAt);
                 record.inputTokens = tokenValue(usage, 'inputTokens', 'input_tokens', 'promptTokens', 'prompt_tokens');
                 record.outputTokens = tokenValue(usage, 'outputTokens', 'output_tokens', 'completionTokens', 'completion_tokens');
                 this.#assistantByStep.set(key, this.#push(record));
@@ -232,11 +354,11 @@ export class TrajectoryLedger {
                 if (record !== undefined) {
                     this.#invalidateText(record);
                     record.seq = event.seq;
-                    record.summary = compact(text, record.summary);
+                    record.summary = compact(text || reasoning, record.summary);
                     record.result = text;
                     record.thinking = reasoning;
                     record.status = data['interrupted'] === true ? 'error' : 'ok';
-                    record.durationMs = Math.max(0, event.time - startedAt);
+                    record.durationMs = startedAt === null ? null : Math.max(0, event.time - startedAt);
                     record.inputTokens = tokenValue(usage, 'inputTokens', 'input_tokens', 'promptTokens', 'prompt_tokens');
                     record.outputTokens = tokenValue(usage, 'outputTokens', 'output_tokens', 'completionTokens', 'completion_tokens');
                 }
@@ -244,11 +366,15 @@ export class TrajectoryLedger {
             return;
         }
         if (eventType === 'tool/call' || eventType === 'tool/ptc-dispatch-start') {
-            const callId = string(data['callId']) ?? string(data['id']) ?? `${event.seq}`;
+            const callId = string(data['subCallId']) ?? string(data['callId']) ?? string(data['id']) ?? `${event.seq}`;
             const parentCallId = string(data['parentCallId']) ?? string(data['parentId']) ?? null;
             const name = string(data['name']) ?? string(data['toolName']) ?? 'tool';
             const args = data['arguments'] ?? data['input'] ?? data;
-            const record = this.#base(event, parentCallId === null ? 'tool' : 'subtool', name, `${name} ${compact(json(args), '')}`.trim(), data);
+            const input = typeof args === 'string' ? args : json(args);
+            const decoded = toolArgsObject(input);
+            const subject = string(decoded?.['description']) ?? toolArgSubject(input, false);
+            const record = this.#base(event, parentCallId === null ? 'tool' : 'subtool', name, compact(subject, name), data);
+            record.input = input;
             record.id = `tool:${callId}`;
             record.label = parentCallId === null ? 'TOOL' : 'SUBTOOL';
             record.name = name;
@@ -260,18 +386,39 @@ export class TrajectoryLedger {
         }
         if (eventType === 'tool/result' || eventType === 'tool/ptc-dispatch') {
             const message = object(data['message']);
-            const callId = string(message?.['callId']) ?? string(data['callId']) ?? string(data['id']);
+            const source = object(message?.['source']);
+            const callId = string(data['subCallId']) ?? string(message?.['toolCallId']) ?? string(source?.['callId'])
+                ?? string(message?.['callId']) ?? string(data['callId']) ?? string(data['id']);
             if (callId === undefined)
                 return;
-            const index = this.#toolByCallId.get(callId);
-            if (index === undefined)
-                return;
+            let index = this.#toolByCallId.get(callId);
+            if (index === undefined) {
+                // Partial history can contain a result without its call. Keep the result
+                // inspectable, without inferring its input, start time or duration.
+                const parent = string(data['parentCallId']) ?? null;
+                const name = string(data['name']) ?? 'tool';
+                const orphan = this.#base(event, parent === null ? 'tool' : 'subtool', parent === null ? 'TOOL' : 'SUBTOOL', 'Call not loaded', data);
+                orphan.id = `tool:${callId}`;
+                orphan.name = name;
+                orphan.parentCallId = parent;
+                orphan.startedAt = null;
+                orphan.payload = '';
+                index = this.#push(orphan);
+                this.#toolByCallId.set(callId, index);
+            }
             const record = this.records[index];
             if (record === undefined)
                 return;
             this.#invalidateText(record);
-            record.result = contentText(message?.['content'] ?? data['result'] ?? data['output']) || json(message ?? data);
-            record.status = data['error'] === true || object(data['error']) !== undefined ? 'error' : 'ok';
+            const content = message?.['content'] ?? data['content'] ?? data['result'] ?? data['output'];
+            const error = object(data['error']);
+            record.result = contentText(content);
+            record.rawResult = json(event.data);
+            record.resultRecorded = true;
+            record.status = message?.['isError'] === true || data['isError'] === true || data['error'] === true || error !== undefined ? 'error' : 'ok';
+            if (record.result === '' && record.status === 'error') {
+                record.result = [string(error?.['name']), string(error?.['code']), string(error?.['reason'])].filter(Boolean).join(' · ') || 'Tool failed';
+            }
             record.durationMs = record.startedAt === null ? null : Math.max(0, event.time - record.startedAt);
             return;
         }
@@ -331,8 +478,10 @@ export class TrajectoryLedger {
             const record = index === undefined ? undefined : this.records[index];
             const reason = object(data['reason']);
             if (record !== undefined) {
-                if (reason?.['kind'] === 'error' || data['error'] !== undefined)
+                if (reason?.['kind'] === 'error' || data['error'] !== undefined) {
+                    this.#invalidateText(record);
                     record.status = 'error';
+                }
                 if (record.durationMs === null && record.startedAt !== null)
                     record.durationMs = Math.max(0, event.time - record.startedAt);
             }
@@ -343,6 +492,12 @@ export class TrajectoryLedger {
             const reasonKind = string(reason?.['kind']);
             if (reasonKind === undefined || reasonKind === 'completed')
                 return;
+            for (const call of this.records) {
+                if (isCall(call) && call.turn === place.turn && call.status === 'running') {
+                    this.#invalidateText(call);
+                    call.status = 'warning';
+                }
+            }
             const isError = reasonKind === 'error' || reasonKind === 'aborted';
             const summary = reasonKind === 'max-tokens'
                 ? 'Output token limit reached'
@@ -359,23 +514,26 @@ export class TrajectoryLedger {
         }
     }
 }
-const SEARCH_FIELDS = ['type', 'label', 'summary', 'payload', 'result', 'schema', 'thinking'];
+const SEARCH_FIELDS = ['type', 'label', 'summary', 'payload', 'result', 'schema', 'thinking', 'input', 'rawResult'];
 export function createTrajectory(events) {
     const ledger = new TrajectoryLedger(events);
-    return {
+    const state = {
         ledger,
-        selectedId: ledger.records.at(-1)?.id ?? null,
+        selectedId: null,
         query: '',
         searching: false,
         details: false,
         detailTab: 'summary',
         detailScroll: 0,
+        focus: 'list',
+        expandedGroups: new Set(),
         collapsedTurns: new Set(),
         callsCollapsed: false,
         following: true,
         searchFocus: null,
         followNotice: 0,
     };
+    return { ...state, selectedId: trajectoryVisibleRecords(state).at(-1)?.id ?? null };
 }
 export function appendTrajectoryEvent(state, event) {
     const beforeCount = state.ledger.records.length;
@@ -449,7 +607,13 @@ function isCall(record) {
 export function trajectoryVisibleRecords(state) {
     const query = state.query.trim().toLocaleLowerCase();
     const firstInCollapsed = new Set();
+    const groups = recordGroups(state.ledger);
+    const byId = new Map(state.ledger.records.map(record => [record.id, record]));
     return state.ledger.records.filter((record) => {
+        if (query !== '')
+            return state.ledger.recordMatches(record, query);
+        if (state.errorsOnly)
+            return ['error', 'warning', 'retry'].includes(record.status);
         if (state.callsCollapsed && isCall(record))
             return false;
         if (record.turn !== null && state.collapsedTurns.has(record.turn)) {
@@ -457,9 +621,19 @@ export function trajectoryVisibleRecords(state) {
                 return false;
             firstInCollapsed.add(record.turn);
         }
-        if (query === '')
-            return true;
-        return state.ledger.recordMatches(record, query);
+        const head = groups.owner.get(record.id);
+        if (head !== undefined && head !== record.id && !state.expandedGroups?.has(head))
+            return false;
+        let parent = record.parentCallId === null ? undefined : `tool:${record.parentCallId}`;
+        const seen = new Set();
+        while (parent !== undefined && byId.has(parent) && !seen.has(parent)) {
+            if (!state.expandedGroups?.has(parent))
+                return false;
+            seen.add(parent);
+            const next = byId.get(parent)?.parentCallId;
+            parent = next == null ? undefined : `tool:${next}`;
+        }
+        return true;
     });
 }
 /**
@@ -502,7 +676,7 @@ function trajectoryIndex(ledger) {
             continue;
         const callKey = `${key}:${record.step ?? 'none'}`;
         const counts = calls.get(callKey) ?? new Map();
-        const name = record.summary.split(/\s/u)[0] ?? record.label;
+        const name = record.name || record.label;
         counts.set(name, (counts.get(name) ?? 0) + 1);
         calls.set(callKey, counts);
     }
@@ -524,16 +698,7 @@ function trajectoryIndex(ledger) {
     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.
- */
+/** Turn and step boundaries remain visible; folded-call counts come from the full ledger. */
 function trajectoryRows(state) {
     const index = trajectoryIndex(state.ledger);
     const rows = [];
@@ -611,7 +776,7 @@ export function trajectorySearch(state) {
             const lower = lowerFields[fieldIndex] ?? '';
             if (lower === '')
                 continue;
-            const original = record[field];
+            const original = record[field] ?? '';
             // Case folding can expand code points (e.g. U+0130); only then are the
             // lowercase offsets valid against the original text.
             const offsetsExact = Array.from(lower).length === Array.from(original).length;
@@ -639,27 +804,42 @@ export function trajectorySearch(state) {
     searchCache.set(state.ledger, { version: state.ledger.version, query, result });
     return result;
 }
+/** Reveal the selected record without discarding unrelated folds. */
+function revealRecord(state, record) {
+    const expanded = new Set(state.expandedGroups);
+    const groups = recordGroups(state.ledger);
+    const head = groups.owner.get(record.id);
+    if (head !== undefined)
+        expanded.add(head);
+    const byId = new Map(state.ledger.records.map(row => [row.id, row]));
+    let parent = record.parentCallId;
+    const seen = new Set();
+    while (parent !== null && !seen.has(parent)) {
+        seen.add(parent);
+        expanded.add(`tool:${parent}`);
+        parent = byId.get(`tool:${parent}`)?.parentCallId ?? null;
+    }
+    const turns = new Set(state.collapsedTurns);
+    if (record.turn !== null)
+        turns.delete(record.turn);
+    return { ...state, expandedGroups: expanded, collapsedTurns: turns, errorsOnly: false,
+        callsCollapsed: isCall(record) ? false : state.callsCollapsed, selectedId: record.id, following: false, detailScroll: 0 };
+}
+function retainVisibleSelection(state) {
+    const visible = trajectoryVisibleRecords(state);
+    if (visible.some(record => record.id === state.selectedId))
+        return state;
+    const selected = selectedRecord(state);
+    const nearest = visible.findLast(record => record.index <= (selected?.index ?? 0)) ?? visible[0];
+    return { ...state, selectedId: nearest?.id ?? null, detailScroll: 0 };
+}
 /** Locate one match: expand its turn/subtool and select the carrying record. */
 function locateMatch(state, index) {
     const match = trajectorySearch(state).matches[index];
     if (match === undefined)
         return state;
     const record = match.record;
-    let collapsedTurns = state.collapsedTurns;
-    if (record.turn !== null && collapsedTurns.has(record.turn)) {
-        const next = new Set(collapsedTurns);
-        next.delete(record.turn);
-        collapsedTurns = next;
-    }
-    return {
-        ...state,
-        searchFocus: index,
-        selectedId: record.id,
-        collapsedTurns,
-        callsCollapsed: state.callsCollapsed && !isCall(record),
-        detailScroll: 0,
-        following: false,
-    };
+    return { ...revealRecord(state, record), searchFocus: index };
 }
 function moveMatch(state, delta) {
     const matches = trajectorySearch(state).matches;
@@ -682,7 +862,8 @@ function move(state, delta) {
         ...state,
         selectedId: visible[index]?.id ?? null,
         detailScroll: 0,
-        following,
+        following: state.details ? false : following,
+        notice: '',
         ...(following ? { followNotice: 0 } : {}),
     };
 }
@@ -691,24 +872,17 @@ function graphemes(text) {
     trajectorySegmenter ??= new Intl.Segmenter(undefined, { granularity: 'grapheme' });
     return trajectorySegmenter.segment(text);
 }
-/**
- * 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.
- */
+/** Offer only sections with recorded content; completed empty results still have a Result section. */
 function detailTabsFor(record) {
     if (record === undefined)
         return ['summary'];
     const tabs = ['summary'];
-    if (record.payload !== '')
-        tabs.push('payload');
-    if (record.result !== '')
+    if (record.input !== undefined && record.input !== '')
+        tabs.push('input');
+    if (record.resultRecorded || record.result !== '' || record.thinking !== '')
         tabs.push('result');
+    if (record.payload !== '' || record.rawResult !== undefined)
+        tabs.push('payload');
     if (record.schema !== '')
         tabs.push('schema');
     return tabs;
@@ -733,6 +907,10 @@ function moveTab(state, delta) {
 const DEFAULT_PAGE_SIZE = 10;
 const DEFAULT_DETAIL_PAGE_LINES = 10;
 export function applyTrajectoryEvent(state, event, options = {}) {
+    const detailFocused = state.details && (state.focus !== 'list' || state.fullDetail === true || (options.width !== undefined && options.width < 96));
+    const maxScroll = options.maxDetailScroll ?? Number.MAX_SAFE_INTEGER;
+    const scroll = (offset) => ({ ...state, detailScroll: Math.max(0, Math.min(maxScroll, offset)), following: false });
+    const currentScroll = Math.min(state.detailScroll, maxScroll);
     const pageSize = options.pageSize ?? DEFAULT_PAGE_SIZE;
     const detailPageLines = options.detailPageLines ?? DEFAULT_DETAIL_PAGE_LINES;
     if (state.searching) {
@@ -759,6 +937,34 @@ export function applyTrajectoryEvent(state, event, options = {}) {
             return { state: { ...state, searching: false } };
         return { state };
     }
+    if (event.type === 'text' && state.query === '') {
+        if (event.value === ' ')
+            return { state: toggleGroup(state) };
+        if (event.value === 'f' && state.details)
+            return { state: { ...state, fullDetail: !state.fullDetail, focus: 'detail', following: false } };
+        if (event.value === 'e') {
+            const next = { ...state, errorsOnly: !state.errorsOnly, following: false };
+            return { state: { ...next, selectedId: trajectoryVisibleRecords(next)[0]?.id ?? null } };
+        }
+        if (event.value === 's') {
+            const slow = state.ledger.records.filter(record => isCall(record) && record.durationMs !== null)
+                .sort((a, b) => b.durationMs - a.durationMs || a.index - b.index);
+            const at = slow.findIndex(record => record.id === state.selectedId);
+            const record = slow[(at + 1) % slow.length];
+            if (record !== undefined) {
+                return { state: { ...revealRecord(state, record), notice: 'Calls by duration · s next' } };
+            }
+        }
+        if (event.value === 'y') {
+            const record = selectedRecord(state);
+            if (record !== undefined) {
+                const tab = state.details ? activeTab(state) : 'summary';
+                const text = tab === 'input' ? record.input ?? '' : tab === 'payload' ? rawPayload(record) : tab === 'schema' ? record.schema
+                    : tab === 'result' ? [record.thinking, record.result].filter(Boolean).join('\n\n') : [record.summary, record.input === undefined ? '' : `Input\n${record.input}`, record.thinking === '' ? '' : `Thinking\n${record.thinking}`, record.result === '' ? '' : `Result\n${record.result}`].filter(Boolean).join('\n\n');
+                return { copy: text, label: TAB_LABELS[tab] };
+            }
+        }
+    }
     if (event.type === 'text') {
         const lower = event.value.toLowerCase();
         if (event.value === '/' && state.query === '') {
@@ -771,7 +977,7 @@ export function applyTrajectoryEvent(state, event, options = {}) {
         if (lower === 'n' && state.query !== '')
             return { state: moveMatch(state, event.value === 'N' ? -1 : 1) };
         if (lower === 'c')
-            return { state: { ...state, callsCollapsed: !state.callsCollapsed } };
+            return { state: retainVisibleSelection({ ...state, callsCollapsed: !state.callsCollapsed, following: false }) };
         if (lower === 't') {
             const selected = state.ledger.records.find(record => record.id === state.selectedId);
             if (selected?.turn === null || selected?.turn === undefined)
@@ -782,7 +988,7 @@ export function applyTrajectoryEvent(state, event, options = {}) {
             else
                 collapsed.add(selected.turn);
             const first = state.ledger.records.find(record => record.turn === selected.turn);
-            return { state: { ...state, collapsedTurns: collapsed, selectedId: first?.id ?? state.selectedId } };
+            return { state: retainVisibleSelection({ ...state, collapsedTurns: collapsed, selectedId: first?.id ?? state.selectedId, following: false }) };
         }
         if (state.query !== '') {
             // Any other printable character in the result state starts a new query.
@@ -790,70 +996,60 @@ 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.
-     */
+    // Wheel routing follows the pointer, independently of keyboard focus.
     if (event.type === 'wheel') {
         const step = Math.max(1, Math.round(detailPageLines / 2));
-        if (state.details) {
+        const overDetail = event.column === undefined ? detailFocused
+            : state.fullDetail || (options.width ?? 0) < 96 || event.column > trajectoryLeftWidth(options.width);
+        if (state.details && overDetail) {
             const delta = event.direction === 'up' ? -step : step;
-            return { state: { ...state, detailScroll: Math.max(0, state.detailScroll + delta) } };
+            return { state: scroll(currentScroll + delta) };
         }
         return { state: move(state, (event.direction === 'up' ? -1 : 1) * 3) };
     }
     if (event.type !== 'key')
         return { state };
-    // 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')) {
+    if (event.id === 'tab' || event.id === 'shift+tab') {
+        if (!state.details)
+            return { state };
+        const detailOnly = state.fullDetail || (options.width !== undefined && options.width < 96);
+        return { state: { ...state, focus: detailOnly ? 'detail' : state.focus === 'list' ? 'detail' : 'list' } };
+    }
+    if (event.id === 'right')
+        return { state: { ...moveTab(state, 1), details: true, focus: 'detail', following: false } };
+    if (event.id === 'left')
+        return { state: { ...moveTab(state, -1), details: true, focus: 'detail', following: false } };
+    if (event.id === 'ctrl+n' || event.id === 'ctrl+p')
+        return { state: move(state, event.id === 'ctrl+n' ? 1 : -1) };
+    if (detailFocused && (event.id === 'up' || event.id === 'down')) {
         const delta = event.id === 'up' ? -1 : 1;
-        return { state: { ...state, detailScroll: Math.max(0, state.detailScroll + delta) } };
+        return { state: scroll(currentScroll + 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 { state: { ...state, details: false, fullDetail: false, focus: 'list', detailScroll: 0 } };
         return { close: true };
     }
     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) } };
+        if (detailFocused)
+            return { state: scroll(currentScroll - detailPageLines) };
         if (pageSize === 0)
             return { state };
         return { state: move(state, -pageSize) };
     }
     if (event.id === 'pageDown') {
-        if (state.details)
-            return { state: { ...state, detailScroll: state.detailScroll + detailPageLines } };
+        if (detailFocused)
+            return { state: scroll(currentScroll + detailPageLines) };
         if (pageSize === 0)
             return { state };
         return { state: move(state, pageSize) };
     }
+    if (detailFocused && (event.id === 'home' || event.id === 'end'))
+        return { state: scroll(event.id === 'home' ? 0 : maxScroll) };
     if (event.id === 'home') {
         const first = trajectoryVisibleRecords(state)[0];
         return { state: { ...state, selectedId: first?.id ?? null, following: false } };
@@ -863,16 +1059,16 @@ export function applyTrajectoryEvent(state, event, options = {}) {
         return { state: { ...state, selectedId: last?.id ?? null, following: true, followNotice: 0 } };
     }
     if (event.id === 'enter')
-        return { state: { ...state, details: !state.details, detailScroll: 0 } };
+        return { state: { ...state, details: true, focus: 'detail', following: false, detailScroll: 0 } };
     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, or scroll an open detail' };
-const HOTKEY_EDGE = { keys: 'Home / End', action: 'Jump to the first record, or follow the newest' };
+const HOTKEY_EDGE = { keys: 'Home / End', action: 'First / newest record; top / bottom in details' };
 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_DETAILS = { keys: 'Enter', action: 'Details — open and focus the detail panel' };
+const HOTKEY_SECTION = { keys: '←→', action: 'Section — switch the detail tab' };
 const HOTKEY_SEARCH = { keys: '/', action: 'Search the ledger' };
 const HOTKEY_MATCH = { keys: 'n/N', action: 'Match — step to the next or previous hit' };
 const HOTKEY_MATCH_EDIT = { keys: 'Ctrl+N / Ctrl+P', action: 'Match while typing — step to the next or previous hit' };
@@ -888,6 +1084,13 @@ export const TRAJECTORY_HOTKEYS = [
     HOTKEY_PAGE,
     HOTKEY_DETAILS,
     HOTKEY_SECTION,
+    { keys: 'Tab', action: 'Focus — switch between records and details' },
+    { keys: 'Ctrl+N / Ctrl+P', action: 'Record — inspect the next or previous record' },
+    { keys: 'Space', action: 'Group — expand context entries or subcalls' },
+    { keys: 'f', action: 'Full screen — enlarge the detail pane' },
+    { keys: 'e', action: 'Problems — filter failed, interrupted and retry records' },
+    { keys: 's', action: 'Slow calls — visit calls in descending duration order' },
+    { keys: 'y', action: 'Copy — copy the current section without display formatting' },
     HOTKEY_SEARCH,
     HOTKEY_MATCH,
     HOTKEY_MATCH_EDIT,
@@ -905,7 +1108,7 @@ export const TRAJECTORY_HOTKEYS = [
  * frame can show.
  */
 export function trajectoryOverviewHeight(state, width = Number.POSITIVE_INFINITY) {
-    if (state.details || state.query !== '')
+    if (state.details || state.query !== '' || state.errorsOnly)
         return 0;
     if (width < 24)
         return 0;
@@ -926,7 +1129,7 @@ export function trajectoryListMetrics(state, height, width = Number.POSITIVE_INF
     if (rows.length === 0)
         return { pageSize: 1 };
     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)));
+    const start = Math.max(0, Math.min(Math.max(0, rows.length - body), 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 < rows.length && index - start < body; index += 1) {
@@ -990,7 +1193,7 @@ function highlightSummary(summary, spans, theme) {
     }
     return out + summary.slice(cursor);
 }
-function recordLine(record, selected, theme, width, highlightSpans, matchCount, summaryOverride) {
+function recordLine(record, selected, theme, width, highlightSpans, matchCount, summaryOverride, disclosure) {
     const marker = selected ? theme.fg('accent', '›') : ' ';
     /*
      * No location column: the turn rule and the step header above already say
@@ -998,7 +1201,10 @@ function recordLine(record, selected, theme, width, highlightSpans, matchCount,
      * 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 status = record.status === 'error' ? '✗' : record.status === 'warning' ? '!' : record.status === 'running' ? '◌' : isCall(record) ? '✓' : ' ';
+    const label = isCall(record) && record.name !== '' ? record.name : record.kind === 'assistant' ? 'Model' : record.kind === 'context' ? 'Context' : record.label;
+    const tone = record.status === 'error' ? 'error' : record.status === 'warning' ? 'warning' : kindColor(record.kind);
+    const prefix = `${marker} ${disclosure === undefined ? '' : theme.fg('dim', disclosure) + ' '}${theme.fg(tone, status)} ${record.parentCallId === null ? '' : '  ↳ '}${theme.fg(isCall(record) ? 'text' : tone, truncateToWidth(label, 12))}  `;
     const badge = matchCount === undefined ? '' : ` ${theme.fg('dim', `×${matchCount}`)}`;
     // 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
@@ -1014,11 +1220,12 @@ function recordLine(record, selected, theme, width, highlightSpans, matchCount,
     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;
+    const row = truncateToWidth(prefix + text + ' '.repeat(Math.max(0, gap)) + columns + badge, width);
+    return selected ? paintSurface(theme, 'userMessageBg', 'userMessageText', padToWidth(row, width)) : row;
 }
 /** Snippet of one record field around its first hit (non-summary fields). */
 function fieldSnippet(record, field, highlightSpans, width, theme, focused) {
-    const text = record[field];
+    const text = record[field] ?? '';
     if (text === '')
         return highlightSummary(record.summary, highlightSpans, theme);
     const span = focused ?? highlightSpans.find(match => match.field === field);
@@ -1051,16 +1258,12 @@ function clockTime(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.
- */
+/** Recorded timing and usage, with exceptional status shown explicitly. */
 function summaryFields(record) {
     const rows = [];
     rows.push({ label: 'Event', value: `${record.type} · #${record.seq}` });
+    if (record.durationMs !== null)
+        rows.push({ label: 'Duration', value: formatDuration(record.durationMs) });
     if (record.startedAt !== null)
         rows.push({ label: 'Started', value: clockTime(record.startedAt) });
     if (record.ttftMs !== null)
@@ -1072,14 +1275,14 @@ function summaryFields(record) {
     // `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 });
+        rows.push({ label: 'Status', value: record.status === 'warning' && isCall(record) ? 'Interrupted · no result recorded' : 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));
+        out.push(theme.fg('dim', 'Thinking'), ...renderMarkdown(record.thinking, theme, width, { color: 'thinkingText', italic: true }));
         if (record.result !== '')
             out.push('', theme.fg('dim', 'Answer'));
     }
@@ -1093,7 +1296,9 @@ function detailSection(tab, record) {
     if (tab === 'summary')
         return { kind: 'fields', rows: summaryFields(record) };
     if (tab === 'payload')
-        return { kind: 'code', text: record.payload, language: 'json' };
+        return { kind: 'code', text: rawPayload(record), language: 'json' };
+    if (tab === 'input')
+        return { kind: 'code', text: record.input ?? '', 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.
@@ -1102,14 +1307,14 @@ function detailSection(tab, record) {
         return { kind: 'prose', text: record.result };
     return {
         kind: 'code',
-        text: record.result,
-        language: toolPayloadLanguage(record.type === 'tool/call' ? record.label.toLowerCase() : ''),
+        text: record.result || (record.resultRecorded ? 'No text output. Non-text fields are available in Raw.' : 'No result recorded.'),
+        language: undefined,
     };
 }
 function ledgerRows(state, theme, width, height) {
     const rows = trajectoryRows(state);
     if (!rows.some(row => row.kind === 'record')) {
-        return [theme.fg('dim', state.query === '' ? '  No trajectory records.' : '  No matching trajectory records.')];
+        return [theme.fg('dim', state.query === '' ? state.errorsOnly ? '  No problems recorded.' : '  No trajectory records.' : '  No matching trajectory records.')];
     }
     const { matches, counts } = trajectorySearch(state);
     const focused = state.searchFocus === null ? undefined : matches[state.searchFocus];
@@ -1119,7 +1324,10 @@ function ledgerRows(state, theme, width, height) {
         list.push(match);
         highlighted.set(match.record.id, list);
     }
-    const lines = rows.map((row) => {
+    const groups = recordGroups(state.ledger);
+    const selectedIndex = Math.max(0, rows.findIndex(row => row.kind === 'record' && row.id === state.selectedId));
+    const start = Math.max(0, Math.min(Math.max(0, rows.length - height), selectedIndex - Math.floor(height / 2)));
+    const lines = rows.slice(start, start + height).map((row) => {
         if (row.kind === 'turn')
             return turnLine(row.stats, row.collapsed, theme, width);
         if (row.kind === 'step')
@@ -1129,42 +1337,60 @@ function ledgerRows(state, theme, width, height) {
         const focusedForRecord = focused?.record === record ? focused : undefined;
         const headField = focusedForRecord !== undefined ? focusedForRecord.field : recordMatches[0]?.field;
         const headSpans = recordMatches.filter(match => match.field === headField);
-        const summary = headField === undefined || headField === 'summary'
+        let summary = headField === undefined || headField === 'summary'
             ? highlightSummary(record.summary, headSpans, theme)
             : fieldSnippet(record, headField, headSpans, Math.max(0, width - 24), theme, focusedForRecord);
-        return recordLine(record, record.id === state.selectedId, theme, width, headField === 'summary' ? headSpans : [], state.query === '' ? undefined : counts.get(record.id), summary);
+        let disclosure;
+        if (state.query === '' && !state.errorsOnly) {
+            const contexts = groups.contexts.get(record.id);
+            const children = groups.children.get(record.id);
+            if ((contexts?.length ?? 0) > 1 || children !== undefined)
+                disclosure = state.expandedGroups?.has(record.id) ? '▾' : '▸';
+            if (contexts !== undefined && contexts.length > 1 && !state.expandedGroups?.has(record.id))
+                summary = `${contexts.length} injected entries · Space to expand`;
+            else if (children !== undefined)
+                summary += ` · ${children.length} subcalls`;
+        }
+        return recordLine(record, record.id === state.selectedId, theme, width, headField === 'summary' ? headSpans : [], state.query === '' ? undefined : counts.get(record.id), summary, disclosure);
     });
-    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));
+    return lines.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 detailBodyCache = new WeakMap();
+/** Wrapped source is reused while scrolling the same section. */
+function detailBody(state, theme, width) {
     const record = selectedRecord(state);
     const tab = activeTab(state);
-    const tabs = detailTabsFor(record);
+    const cached = detailBodyCache.get(state.ledger);
+    if (cached?.version === state.ledger.version && cached.record === record && cached.tab === tab && cached.width === width && cached.theme === theme.key)
+        return cached.rows;
     const section = detailSection(tab, record);
     const inner = Math.max(1, width - 2);
-    const body = section.kind === 'fields'
+    const rows = tab === 'input' && record !== undefined ? argumentRows(record, theme, inner) : 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);
+    detailBodyCache.set(state.ledger, { version: state.ledger.version, record, tab, width, theme: theme.key, rows });
+    return rows;
+}
+export function trajectoryDetailScrollLimit(state, theme, width, height) {
+    if (!state.details)
+        return 0;
+    const paneWidth = !state.fullDetail && width >= 96 ? width - trajectoryLeftWidth(width) - 1 : width;
+    return Math.max(0, detailBody(state, theme, Math.max(1, paneWidth)).length - Math.max(0, height - 7));
+}
+function detailRows(state, theme, width, height) {
+    const record = selectedRecord(state);
+    const tab = activeTab(state);
+    const tabs = detailTabsFor(record);
+    const body = detailBody(state, theme, width);
     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 + viewport);
-    const first = truncateToWidth(titleLine(record, theme, width), width);
+    const first = truncateToWidth(' ' + titleLine(record, theme, Math.max(1, width - 2)), 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
@@ -1172,11 +1398,11 @@ function detailRows(state, theme, width, height) {
      * 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('  ');
+        ? theme.bold(theme.fg('accent', `› ${TAB_LABELS[candidate]}`))
+        : theme.fg('dim', `  ${TAB_LABELS[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);
+    const second = truncateToWidth(' ' + tabsText + ' '.repeat(Math.max(1, gap - 2)) + 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. */
@@ -1191,19 +1417,18 @@ function titleLine(record, theme, width) {
     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.
- */
+/** Overview combines recorded facts with readable input, reasoning and output. */
 function summaryBlock(rows, record, theme, width) {
     const facts = fieldRows(rows, theme, width);
-    if (record === undefined || record.result !== '' || record.summary === '')
+    if (record === undefined)
         return facts;
-    return [...facts, '', ...renderMarkdown(record.summary, theme, width)];
+    if (isCall(record) && record.input !== undefined) {
+        return [...facts, '', theme.bold('Input'), ...argumentRows(record, theme, width), '', theme.bold('Result'),
+            ...codeRows(record.resultRecorded ? record.result || 'No text output. Non-text fields are available in Raw.' : record.status === 'running' ? 'Running…' : 'No result recorded.', undefined, theme, width)];
+    }
+    if (record.kind === 'assistant')
+        return [...facts, '', ...assistantWriting(record, theme, width)];
+    return [...facts, '', ...renderMarkdown(record.result || record.summary, theme, width)];
 }
 /** Label/value rows with the label column as wide as the widest label needs. */
 function fieldRows(rows, theme, width) {
@@ -1219,29 +1444,22 @@ function fieldRows(rows, theme, width) {
     }
     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.
- */
+/** Preserve source indentation; only wrapped structured data receives a line-number gutter. */
 function codeRows(text, language, theme, width) {
     if (text === '')
         return [theme.fg('dim', 'Nothing recorded.')];
-    const source = text.split('\n');
+    const source = text.split('\n').map(line => expandTabs(line, 8, 0));
     const digits = String(source.length).length;
     const gutter = digits + 1;
-    const unwrapped = source.every(line => visibleWidth(line) <= width);
+    // Tool output may already contain source line numbers; only number structured raw data.
+    const unwrapped = language === undefined || 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);
+        const rows = wrapCode(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);
@@ -1336,8 +1554,8 @@ export function renderTrajectory(state, theme, width, height) {
     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_TURN, HOTKEY_CALLS])}${state.following ? ' ●' : ''}`), safeWidth);
+        ? ` ${state.focus === 'list' && !state.fullDetail && safeWidth >= 96 ? 'Records' : 'Details'} · Tab focus · ←→ section · Ctrl+N/P record · f ${state.fullDetail ? 'split' : 'full screen'}`
+        : ` / Search · Space group · t Turn · c Calls · e ${state.errorsOnly ? 'All records' : 'Problems'} · s Slow calls${state.following ? ' · Following' : ''}${searchInfo}${followInfo}`), safeWidth);
     const divider = theme.fg('border', '─'.repeat(safeWidth));
     /*
      * The overview answers "where did the time go" before the reader has to open a
@@ -1353,10 +1571,10 @@ export function renderTrajectory(state, theme, width, height) {
      */
     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;
+    const wideDetails = state.details && !state.fullDetail && safeWidth >= 96;
     let body;
     if (wideDetails) {
-        const leftWidth = Math.max(40, Math.floor(safeWidth * 0.58));
+        const leftWidth = trajectoryLeftWidth(safeWidth);
         const rightWidth = Math.max(1, safeWidth - leftWidth - 1);
         const left = ledgerRows(state, theme, leftWidth, bodyHeight);
         const right = detailRows(state, theme, rightWidth, bodyHeight);
@@ -1373,8 +1591,8 @@ export function renderTrajectory(state, theme, width, height) {
     const footerText = state.searching
         ? ` Search: ${state.query}`
         : state.details
-            ? ' ' + formatOverlayHint([HOTKEY_PAGE, HOTKEY_SECTION, HOTKEY_CLOSE])
-            : ' ' + formatOverlayHint([HOTKEY_CLOSE]);
+            ? ` ↑↓ / PgUp PgDn scroll · y Copy section · Esc Back${state.notice ? ' · ' + state.notice : ''}`
+            : ` ↑↓ Select · Enter Inspect · End Follow · Esc Close${state.notice ? ' · ' + state.notice : ''}`;
     const footer = truncateToWidth(theme.fg(state.searching ? 'accent' : 'dim', footerText), safeWidth);
     const lines = [header, toolbar, divider, ...(overview ?? []), ...body.slice(0, bodyHeight), footer].slice(0, safeHeight);
     while (lines.length < safeHeight)