@songtonyli/dsh-cli 0.1.11 → 0.1.12

package/node_modules/@deepseek-ai/dsh-tui-app/lib/index.js

@@ -416,6 +416,20 @@ function toolResultLines(view, content) {
 	}
 }
 /**
+* Cut rows to a maximum, naming what was left out on one trailing row. Every
+* surface that shows part of something longer folds it this way - the collapsed
+* tool card, an approval's call detail, the focused-section inspector - and each
+* names the key that shows the rest.
+* @param lines - the full rows.
+* @param keep - rows kept ahead of the marker.
+* @param marker - builds the trailing row from the number of rows left out.
+* @returns the rows to draw; a copy of `lines` when they all fit.
+*/
+function foldRows(lines, keep, marker) {
+	if (lines.length <= keep) return [...lines];
+	return [...lines.slice(0, keep), marker(lines.length - keep)];
+}
+/**
 * Cut a card body to its collapsed preview.
 * @param lines - the full body rows.
 * @param previewLines - rows kept when collapsed.
@@ -423,9 +437,8 @@ function toolResultLines(view, content) {
 * @returns the rows to draw, with a trailing count of hidden rows when cut.
 */
 function previewLines(lines, previewLines, expanded) {
-	if (expanded || lines.length <= previewLines) return [...lines];
-	const hidden = lines.length - previewLines;
-	return [...lines.slice(0, previewLines), `… ${String(hidden)} more line${hidden === 1 ? "" : "s"} (Ctrl+O expands)`];
+	if (expanded) return [...lines];
+	return foldRows(lines, previewLines, (hidden) => `… ${String(hidden)} more line${hidden === 1 ? "" : "s"} (Ctrl+O expands)`);
 }
 //#endregion
 //#region lib/types/catalog.js
@@ -814,6 +827,16 @@ const LUMINANCE = {
 };
 /** Largest value one color channel encodes. */
 const CHANNEL_MAX = 255;
+/** Encoded sRGB value below which the transfer function is the linear segment. */
+const SRGB_LINEAR_CUT = .04045;
+/** Linear intensity below which the sRGB transfer function is the linear segment. */
+const LINEAR_SRGB_CUT = .0031308;
+/** Slope of the sRGB transfer function's linear segment. */
+const SRGB_LINEAR_SLOPE = 12.92;
+/** Offset of the sRGB transfer function's power segment. */
+const SRGB_OFFSET = .055;
+/** Exponent of the sRGB transfer function's power segment. */
+const SRGB_GAMMA = 2.4;
 /**
 * Grapheme segmenter for the reverse column walk. pi-tui keeps its own
 * segmenter private, so this module holds one; grapheme segmentation does not
@@ -842,44 +865,68 @@ function resolveFadeCapability(input) {
 	return term.includes("256color") ? "ansi256" : "dim";
 }
 /**
-* Build the brightness ramp a chunk climbs, `ramp[k] = lerp(bg, fg, (k + 1) /
-* steps)` in sRGB with each channel rounded to a byte. The last level is a
-* copy of `fg` rather than a computed value, so settled text and the last
-* faded frame carry identical color.
+* Build the brightness ramp a chunk climbs: level `k` sits at
+* `t = (k + 1) / steps` of the way from `bg` to `fg`, eased by the smoothstep
+* `t * t * (3 - 2 * t)` and interpolated with each channel in linear light.
+* Both shape the ramp against what the eye reads rather than what the byte
+* says: sRGB bytes are gamma-encoded, so mixing them directly bunches the
+* visible change into the dark end, and an even ramp of levels arrives with a
+* hard start and stop. The last level is a copy of `fg` rather than a computed
+* value, so settled text and the last faded frame carry identical color.
 * @param bg - the terminal background color.
 * @param fg - the normal foreground color.
 * @param steps - brightness levels; defaults to {@link FADE_STEPS}.
 * @returns `steps` levels, darkest first.
 */
-function buildFadeRamp(bg, fg, steps = 5) {
+function buildFadeRamp(bg, fg, steps = 8) {
 	return Array.from({ length: steps }, (_unused, level) => {
 		if (level === steps - 1) return {
 			r: fg.r,
 			g: fg.g,
 			b: fg.b
 		};
-		const ratio = (level + 1) / steps;
+		const position = (level + 1) / steps;
+		const eased = position * position * (3 - 2 * position);
 		return {
-			r: mix(bg.r, fg.r, ratio),
-			g: mix(bg.g, fg.g, ratio),
-			b: mix(bg.b, fg.b, ratio)
+			r: mix(bg.r, fg.r, eased),
+			g: mix(bg.g, fg.g, eased),
+			b: mix(bg.b, fg.b, eased)
 		};
 	});
 }
 /**
-* Interpolate one channel.
-* @param from - the background channel.
-* @param to - the foreground channel.
+* Interpolate one channel in linear light.
+* @param from - the background channel, sRGB-encoded.
+* @param to - the foreground channel, sRGB-encoded.
 * @param ratio - position between them, 0 at `from` and 1 at `to`.
-* @returns the channel value rounded to a byte.
+* @returns the sRGB-encoded channel value rounded to a byte.
 */
 function mix(from, to, ratio) {
-	return Math.round(from + (to - from) * ratio);
+	const linear = toLinear(from);
+	return toSrgb(linear + (toLinear(to) - linear) * ratio);
+}
+/**
+* Decode one sRGB channel to linear light, by the sRGB transfer function.
+* @param value - the channel byte.
+* @returns the linear intensity in 0..1.
+*/
+function toLinear(value) {
+	const encoded = value / CHANNEL_MAX;
+	return encoded <= SRGB_LINEAR_CUT ? encoded / SRGB_LINEAR_SLOPE : ((encoded + SRGB_OFFSET) / 1.055) ** SRGB_GAMMA;
+}
+/**
+* Encode linear light back to an sRGB channel byte.
+* @param value - the linear intensity in 0..1.
+* @returns the channel byte.
+*/
+function toSrgb(value) {
+	const encoded = value <= LINEAR_SRGB_CUT ? SRGB_LINEAR_SLOPE * value : 1.055 * value ** (1 / SRGB_GAMMA) - SRGB_OFFSET;
+	return Math.round(encoded * CHANNEL_MAX);
 }
 /**
 * The SGR sequence one age draws under.
 * @param style - the capability and the ramp.
-* @param age - ticks since the chunk arrived; ages past the ramp draw its last level.
+* @param age - the brightness level; levels past the ramp draw its last one.
 * @returns the sequence to open the run with, or the empty string when the
 * chunk draws as the component rendered it, which is also what an empty ramp
 * yields under a color capability.
@@ -926,32 +973,66 @@ function channel(value) {
 function restoreFor(capability) {
 	return capability === "dim" ? RESET_INTENSITY : RESET_FOREGROUND;
 }
+/** Every SGR sequence, the sequences a block's own palette styling writes. */
+const SGR_SEQUENCE = /\u001b\[[0-9;]*m/g;
 /**
-* The tail of one streaming assistant message: the chunks young enough to be
-* recolored, advanced one tick at a time.
+* Draw whole rendered lines at one brightness level, for a block that fades in
+* as a unit rather than word by word.
+*
+* The level is opened at the start of the line and reasserted after every SGR
+* the line already carries, so the palette colors inside a card - the status
+* glyph, the dim body rule, the bold tool name - are overridden while the card
+* fades and come back on their own once it settles. Each line ends with the
+* sequence that undoes what the level set - the terminal's own foreground, or
+* its normal intensity in the two-level mode - so the level never leaks past
+* the line it was applied to. Empty lines come back byte-identical, so
+* the renderer leaves the blank rows around a card alone.
+* @param lines - the rendered lines of the block.
+* @param age - the brightness level to draw them at.
+* @param style - the capability and the ramp.
+* @param from - first line the level is applied to; the lines before it come
+* back byte-identical, which is how a caller keeps rows the renderer can no
+* longer repaint out of the fade.
+* @returns the lines at that level; copies when the style writes no sequence
+* for this age, which is what the `none` capability and a settled age yield.
+*/
+function recolorLines(lines, age, style, from = 0) {
+	const sgr = fadeSgr(style, age);
+	if (sgr === "") return [...lines];
+	const restore = restoreFor(style.capability);
+	return lines.map((line, index) => index < from || line === "" ? line : `${sgr}${line.replace(SGR_SEQUENCE, (match) => match + sgr)}${restore}`);
+}
+/**
+* The tail of one streaming region - the visible text or the reasoning of one
+* message: the chunks young enough to be recolored, each ageing on the wall
+* clock from the moment it became visible.
 *
 * Deltas are split at word boundaries, which reads more smoothly than raw
 * token edges. A delta that ends mid-word leaves that word open, and the next
 * delta extends it rather than starting a second chunk, so the word keeps the
-* tick it first became visible on.
+* moment it first became visible.
 *
-* Fast streams. While each of the last {@link FADE_FAST_WINDOW_TICKS}
-* completed ticks received at least one chunk, the stream outruns the ramp and
-* the effect turns off: the arriving chunk is not tracked and the whole tail is
-* flushed, so nothing already on screen darkens. The decision is recoverable:
-* one tick without an arrival ends it, and chunks appended afterwards fade
-* again. Recovery only affects new chunks, so it never re-darkens settled text.
+* Ages are read, never counted. A chunk's age is the elapsed time since it
+* became visible divided by `stepMs`, computed at the moment a render asks for
+* it, so a render triggered by a delta between two fade periods draws every
+* word at its own level and words do not move in lockstep. That is what makes
+* the trailing edge continuous rather than banded.
+*
+* Arrival rate changes the tail's length, never its depth: whatever the rate,
+* a chunk is at the foreground `steps * stepMs` after it appeared, so a fast
+* stream leaves a longer trail of brightening words and never a darker or a
+* lasting one. The tail is bounded in time, so it stays on at any rate.
 */
 var FadeTracker = class {
 	steps;
-	fastWindowTicks;
-	now = 0;
+	stepMs;
+	now;
 	chunks = [];
 	openChunk = void 0;
-	arrivals = /* @__PURE__ */ new Set();
 	constructor(options) {
-		this.steps = options?.steps ?? 5;
-		this.fastWindowTicks = options?.fastWindowTicks ?? 10;
+		this.steps = options.steps ?? 8;
+		this.stepMs = options.stepMs ?? 33;
+		this.now = options.now;
 	}
 	/**
 	* Take one stream event.
@@ -959,42 +1040,39 @@ var FadeTracker = class {
 	*/
 	append(delta) {
 		if (delta === "") return;
-		this.arrivals.add(this.now);
-		if (this.isFastStream()) {
-			this.flush();
-			return;
-		}
+		const at = this.now();
 		const open = this.openChunk;
 		const text = open === void 0 ? delta : open.text + delta;
-		const born = open === void 0 ? this.now : open.born;
+		const bornAt = open === void 0 ? at : open.bornAt;
 		if (open !== void 0) this.chunks.pop();
 		this.openChunk = void 0;
 		const words = text.match(/\s*\S+\s*/g);
 		if (words === null) {
 			this.openChunk = {
 				text,
-				born
+				bornAt
 			};
 			this.chunks.push(this.openChunk);
 			return;
 		}
 		for (const [index, word] of words.entries()) this.chunks.push({
 			text: word,
-			born: index === 0 ? born : this.now
+			bornAt: index === 0 ? bornAt : at
 		});
 		if (!/\s$/.test(text)) this.openChunk = this.chunks.at(-1);
 	}
 	/**
-	* Advance one tick and drop the chunks that reached `steps`.
-	* @returns whether this tick changed a chunk's color, and so needs a repaint.
+	* Drop the chunks that reached the step count, which the application runs
+	* once per fade period so a settled chunk stops being matched against the
+	* rendered lines.
+	* @returns whether a chunk still draws below the last brightness level, and
+	* so whether the tail keeps moving after this period.
 	*/
 	tick() {
-		const changing = this.needsRepaint();
-		this.now += 1;
-		this.chunks = this.chunks.filter((chunk) => this.now - chunk.born < this.steps);
+		const moving = this.needsRepaint();
+		this.chunks = this.chunks.filter((chunk) => this.ageOf(chunk) < this.steps);
 		if (this.openChunk !== void 0 && !this.chunks.includes(this.openChunk)) this.openChunk = void 0;
-		for (const arrival of this.arrivals) if (arrival < this.now - this.fastWindowTicks) this.arrivals.delete(arrival);
-		return changing;
+		return moving;
 	}
 	/**
 	* Whether the current frame still differs from the settled rendering.
@@ -1002,36 +1080,98 @@ var FadeTracker = class {
 	* is the only reason to keep ticking.
 	*/
 	needsRepaint() {
-		return this.chunks.some((chunk) => this.now - chunk.born < this.steps - 1);
+		return this.chunks.some((chunk) => this.ageOf(chunk) < this.steps - 1);
 	}
 	/**
 	* The tail {@link recolorTail} recolors.
-	* @returns one span per tracked chunk, oldest first, each with its current age.
+	* @returns one span per tracked chunk, oldest first, each with the age it
+	* carries at this instant.
 	*/
 	spans() {
 		return this.chunks.map((chunk) => ({
 			text: chunk.text,
-			age: this.now - chunk.born
+			age: this.ageOf(chunk)
 		}));
 	}
 	/**
 	* Drop the whole tail so every chunk drawn so far renders at the foreground,
 	* and start tracking again from the next delta. The application calls this on
-	* a terminal width change and at stream end. The fast-stream window is kept:
-	* a resize says nothing about the arrival rate.
+	* a terminal width change and at stream end.
 	*/
 	flush() {
 		this.chunks = [];
 		this.openChunk = void 0;
 	}
 	/**
-	* The fast-stream test.
-	* @returns true while every completed tick of the window received at least one chunk.
+	* The brightness level one chunk draws at right now.
+	* @param chunk - the tracked chunk.
+	* @returns levels elapsed since it became visible, 0 for a chunk younger than one level.
+	*/
+	ageOf(chunk) {
+		return Math.floor((this.now() - chunk.bornAt) / this.stepMs);
+	}
+};
+/**
+* The age of one whole block that fades in as a unit - a tool card's rows,
+* which arrive complete rather than word by word.
+*
+* The last level is withheld the way the word tail withholds it: that level is
+* an assumed foreground, so a block one level below the end is handed back to
+* the terminal's own colors instead, and nothing jumps color as it settles.
+*/
+var BlockFadeClock = class {
+	options;
+	constructor(options) {
+		this.options = options;
+	}
+	/**
+	* The brightness level the block draws at right now.
+	* @returns the level, or undefined once the block reached the last drawn
+	* level and renders in the colors the component itself produced.
+	*/
+	age() {
+		const { bornAt, stepMs, steps, now } = this.options;
+		const age = Math.floor((now() - bornAt) / stepMs);
+		return age < steps - 1 ? age : void 0;
+	}
+	/**
+	* Whether this block still draws below the last brightness level.
+	* @returns true while {@link BlockFadeClock.age} yields a level.
 	*/
-	isFastStream() {
-		let covered = 0;
-		for (let tick = this.now - this.fastWindowTicks; tick < this.now; tick += 1) if (this.arrivals.has(tick)) covered += 1;
-		return covered >= this.fastWindowTicks;
+	needsRepaint() {
+		return this.age() !== void 0;
+	}
+};
+/**
+* The block fades running right now. The application arms its repaint while
+* any member still moves, so the registry holds only members that have not
+* settled: {@link FadeRegistry.tick} drops the settled ones once per period,
+* and a session change clears the whole set.
+*/
+var FadeRegistry = class {
+	members = /* @__PURE__ */ new Set();
+	/**
+	* Track one fade until it settles.
+	* @param fade - the fade to follow.
+	*/
+	add(fade) {
+		this.members.add(fade);
+	}
+	/**
+	* Whether any tracked fade still moves.
+	* @returns true while one of them needs another repaint.
+	*/
+	needsRepaint() {
+		for (const member of this.members) if (member.needsRepaint()) return true;
+		return false;
+	}
+	/** Forget the fades that settled, so a long session accumulates none of them. */
+	tick() {
+		for (const member of this.members) if (!member.needsRepaint()) this.members.delete(member);
+	}
+	/** Forget every tracked fade, which the application does when it draws another session. */
+	clear() {
+		this.members.clear();
 	}
 };
 /**
@@ -1056,10 +1196,13 @@ var FadeTracker = class {
 * @param lines - the rendered lines of the streaming block, newest text last.
 * @param spans - the tail from {@link FadeTracker.spans}, oldest first.
 * @param style - the capability and the ramp.
+* @param from - first line the tail may recolor; the lines before it come back
+* byte-identical, which is how a caller keeps rows the renderer can no longer
+* repaint out of the fade.
 * @returns the lines with the tail recolored; lines the tail does not cover
 * are returned byte-identical, so the renderer leaves them alone.
 */
-function recolorTail(lines, spans, style) {
+function recolorTail(lines, spans, style, from = 0) {
 	if (style.capability === "none" || spans.length === 0 || lines.length === 0) return [...lines];
 	const cells = cellsFromEnd(lines);
 	const runs = [];
@@ -1077,7 +1220,7 @@ function recolorTail(lines, spans, style) {
 	}
 	const restore = restoreFor(style.capability);
 	return lines.map((text, index) => {
-		const lineRuns = byLine.get(index);
+		const lineRuns = index < from ? void 0 : byLine.get(index);
 		return lineRuns === void 0 ? text : paintLine(text, lineRuns, restore);
 	});
 }
@@ -1281,20 +1424,74 @@ function editorTheme(palette) {
 * Transcript components: one pi-tui component per rendered fact (a user
 * prompt, an assistant reply, a tool card, a notice). Each owns its display
 * state and re-renders from it at any width.
+*
+* The prompt, the reply, and the tool card are also the navigable blocks the
+* keyboard walks (`./navigation.ts`): each reports its sections as plain source
+* rows and draws a two-column gutter beside them while it holds the focus -
+* accented on the focused section's own lines and dim on the rest of the
+* block. The gutter narrows the width the block's content wraps at and is
+* prepended after any fade recoloring, so the fade keeps matching the block's
+* own text and the gutter's styling never enters that match.
 * @module @deepseek-ai/dsh-tui-app/blocks
 */
+/** Columns the focus gutter takes from the width a block's content wraps at. */
+const GUTTER_WIDTH = 2;
+/** The gutter beside the lines of a focused block that are not the focused section. */
+const BLOCK_GUTTER = "│ ";
+/** The gutter beside the lines of the focused section itself. */
+const PART_GUTTER = "┃ ";
+/** What the call section reports for a tool the model called with no arguments. */
+const NO_ARGUMENTS = "(no arguments)";
+/** What the result section reports for a tool that answered with nothing. */
+const NO_OUTPUT = "(no output)";
+/**
+* Prepend the focus gutter to every line of a block that holds the focus.
+* @param palette - the palette the gutter marks are styled with.
+* @param lines - the block's final rendered lines, fades already applied.
+* @param focused - whether the line at one index belongs to the focused section.
+* @returns the lines behind their gutter.
+*/
+function withGutter(palette, lines, focused) {
+	return lines.map((line, index) => `${focused(index) ? palette.accent(PART_GUTTER) : palette.dim(BLOCK_GUTTER)}${line}`);
+}
 /** A prompt the user submitted, drawn with a leading `›`. */
 var UserBlock = class {
 	theme;
 	text;
-	constructor(theme, text) {
+	turn;
+	navigable = true;
+	blockKind = "user";
+	/** The section drawn as focused; absent while the keyboard is elsewhere. */
+	highlight;
+	constructor(theme, text, turn) {
 		this.theme = theme;
 		this.text = text;
+		this.turn = turn;
+	}
+	/**
+	* The prompt as one navigable section.
+	* @returns the single `user` part, carrying the submitted text.
+	*/
+	parts() {
+		return [{
+			kind: "user",
+			rows: this.text.split("\n")
+		}];
+	}
+	/**
+	* Draw this prompt with the focus gutter, or without it.
+	* @param part - the focused section, or undefined to clear the mark.
+	*/
+	setHighlight(part) {
+		this.highlight = part;
 	}
 	invalidate() {}
 	render(width) {
 		const palette = this.theme.palette;
-		return ["", ...wrapTextWithAnsi(this.text, Math.max(1, width - 2)).map((line, index) => `${palette.accent(index === 0 ? "›" : " ")} ${palette.bold(line)}`)];
+		const marked = this.highlight !== void 0;
+		const inner = marked ? Math.max(1, width - GUTTER_WIDTH) : width;
+		const lines = ["", ...wrapTextWithAnsi(this.text, Math.max(1, inner - 2)).map((line, index) => `${palette.accent(index === 0 ? "›" : " ")} ${palette.bold(line)}`)];
+		return marked ? withGutter(palette, lines, () => true) : lines;
 	}
 };
 /** A dim one-line notice about the session (a stopped turn, a command result, a model switch). */
@@ -1315,28 +1512,66 @@ var NoticeBlock = class {
 * An assistant reply: streamed reasoning above streamed Markdown text. The
 * durable `assistant/message` replaces both with the committed content.
 *
-* A block that is streaming right now can carry a {@link FadeRender}, which
-* draws its newest text dimmed and brightening. A block rebuilt from history
-* carries none, and {@link AssistantBlock.commit} drops the one a streaming
-* block had, so settled text is never recolored.
+* A block that is streaming right now can carry a {@link FadeRender} for its
+* text and another for its reasoning, each drawing that region's newest words
+* dimmed and brightening. A block rebuilt from history carries neither, and
+* {@link AssistantBlock.commit} drops the ones a streaming block had, so
+* settled text is never recolored.
 */
 var AssistantBlock = class {
 	theme;
+	turn;
+	navigable = true;
+	blockKind = "assistant";
 	reasoning = "";
 	text = "";
 	interrupted = false;
 	markdown;
 	reasoningText;
 	fade;
-	/** Width of the last render that drew a tail; absent before the first one. */
+	/** Width of the last render that drew a text tail; absent before the first one. */
 	fadeWidth;
-	constructor(theme) {
+	reasoningFade;
+	/** Width of the last render that drew a reasoning tail; absent before the first one. */
+	reasoningFadeWidth;
+	/** First line of this block either tail may still recolor. */
+	repaintFloor = 0;
+	/** The section drawn as focused; absent while the keyboard is elsewhere. */
+	highlight;
+	constructor(theme, turn) {
 		this.theme = theme;
+		this.turn = turn;
 		const palette = theme.palette;
 		this.markdown = new Markdown("", 0, 0, markdownTheme(palette));
 		this.reasoningText = new Text("", 0, 0);
 	}
 	/**
+	* The message as navigable sections, carrying the model's own text: the
+	* reasoning as it was streamed or committed, and the reply as Markdown
+	* source rather than the rendering the transcript draws.
+	* @returns the reasoning part while the message has reasoning, then the
+	* reply, which is present from the start and empty until text arrives.
+	*/
+	parts() {
+		const parts = [];
+		if (this.reasoning.trim() !== "") parts.push({
+			kind: "reasoning",
+			rows: this.reasoning.split("\n")
+		});
+		parts.push({
+			kind: "reply",
+			rows: this.text.split("\n")
+		});
+		return parts;
+	}
+	/**
+	* Draw this message with the focus gutter, or without it.
+	* @param part - the focused section, or undefined to clear the mark.
+	*/
+	setHighlight(part) {
+		this.highlight = part;
+	}
+	/**
 	* Draw this block's newest text through `fade` until it commits.
 	* @param fade - the tail and drawing settings of the running stream.
 	*/
@@ -1344,6 +1579,26 @@ var AssistantBlock = class {
 		this.fade = fade;
 	}
 	/**
+	* Draw this block's newest reasoning through `fade` until it commits.
+	* @param fade - the tail and drawing settings of the running stream.
+	*/
+	setReasoningFade(fade) {
+		this.reasoningFade = fade;
+	}
+	/**
+	* Hand the rows the renderer can no longer repaint back to the colors this
+	* block drew them in, so a tail that is still moving never rewrites them.
+	* @param floor - this block's own first repaintable line; the application
+	* raises it as the frame grows and never lowers it.
+	* @returns whether the floor took rows away from a tail that is drawing
+	* right now, and so whether the frame differs from the one just built.
+	*/
+	setRepaintFloor(floor) {
+		if (floor <= this.repaintFloor) return false;
+		this.repaintFloor = floor;
+		return drawnSpans(this.fade).length > 0 || drawnSpans(this.reasoningFade).length > 0;
+	}
+	/**
 	* Append streamed visible text.
 	* @param delta - the text delta.
 	*/
@@ -1370,6 +1625,7 @@ var AssistantBlock = class {
 		this.reasoning = reasoning;
 		this.interrupted = interrupted;
 		this.fade = void 0;
+		this.reasoningFade = void 0;
 		this.markdown.setText(text);
 		this.reasoningText.setText(this.theme.palette.dim(this.theme.palette.italic(reasoning.trimEnd())));
 	}
@@ -1378,11 +1634,52 @@ var AssistantBlock = class {
 		this.reasoningText.invalidate();
 	}
 	render(width) {
+		const marked = this.highlight !== void 0;
+		const inner = marked ? Math.max(1, width - GUTTER_WIDTH) : width;
 		const lines = [""];
-		if (this.reasoning.trim() !== "") lines.push(...this.reasoningText.render(width), "");
-		if (this.text !== "") lines.push(...this.renderText(width));
+		const reasoning = {
+			from: 0,
+			to: 0
+		};
+		const reply = {
+			from: 0,
+			to: 0
+		};
+		if (this.reasoning.trim() !== "") {
+			reasoning.from = lines.length;
+			lines.push(...this.renderReasoning(inner, lines.length));
+			reasoning.to = lines.length;
+			lines.push("");
+		}
+		if (this.text !== "") {
+			reply.from = lines.length;
+			lines.push(...this.renderText(inner, lines.length));
+			reply.to = lines.length;
+		}
 		if (this.interrupted) lines.push(this.theme.palette.dim("[interrupted]"));
-		return lines;
+		if (!marked) return lines;
+		const section = this.highlight === "reasoning" ? reasoning : reply;
+		return withGutter(this.theme.palette, lines, (index) => index >= section.from && index < section.to);
+	}
+	/**
+	* The reasoning lines, with the streaming tail recolored.
+	*
+	* The ramp climbs towards the assumed terminal foreground, but the reasoning
+	* draws inside the faint and italic sequences `appendReasoning` wrapped it
+	* in, and a recolored run reasserts the styling in force at its start. The
+	* tail therefore arrives at the dim foreground the settled reasoning carries,
+	* not at the plain one.
+	* @param width - the width the reasoning lays out in.
+	* @param at - index of the region's first line in this block's render.
+	* @returns the lines to draw.
+	*/
+	renderReasoning(width, at) {
+		const fade = this.reasoningFade;
+		const lines = this.reasoningText.render(width);
+		if (fade === void 0) return lines;
+		if (this.reasoningFadeWidth !== void 0 && this.reasoningFadeWidth !== width) fade.flush();
+		this.reasoningFadeWidth = width;
+		return recolorTail(lines, drawnSpans(fade), fade.style(), this.repaintFloor - at);
 	}
 	/**
 	* The Markdown lines, with the streaming tail recolored.
@@ -1391,36 +1688,102 @@ var AssistantBlock = class {
 	* given, so it gets the Markdown lines alone: the reasoning above them and
 	* any marker below them would put the newest chunk somewhere other than the
 	* end and drop the whole tail to the plain foreground.
-	*
-	* Only chunks younger than `steps - 1` are handed over. The last ramp level
-	* is an assumed foreground - pi-tui reports the terminal background but not
-	* its foreground - so the oldest visible level is left to draw in the
-	* terminal's own foreground, which is also what the chunk draws in once it
-	* settles. No chunk can therefore jump color as it leaves the tail.
 	* @param width - the width the Markdown lays out in.
+	* @param at - index of the region's first line in this block's render.
 	* @returns the lines to draw.
 	*/
-	renderText(width) {
+	renderText(width, at) {
 		const fade = this.fade;
 		const lines = this.markdown.render(width);
 		if (fade === void 0) return lines;
 		if (this.fadeWidth !== void 0 && this.fadeWidth !== width) fade.flush();
 		this.fadeWidth = width;
-		return recolorTail(lines, fade.spans().filter((span) => span.age < fade.steps - 1), fade.style());
+		return recolorTail(lines, drawnSpans(fade), fade.style(), this.repaintFloor - at);
 	}
 };
-/** A tool call card: status glyph, tool name, headline, then a foldable body. */
+/**
+* A tool call card: status glyph, tool name, headline, then a foldable body.
+*
+* The card arrives in two pieces, and each fades in on its own: the header and
+* the call rows when the call is logged, the result rows when the tool
+* answers. A card rebuilt from history carries neither fade.
+*/
 var ToolBlock = class {
 	theme;
 	name;
 	call;
+	turn;
+	navigable = true;
+	blockKind = "tool";
 	status = "running";
 	resultLines = [];
 	expanded = false;
-	constructor(theme, name, call) {
+	fade;
+	resultFade;
+	/** First line of this card either fade may still recolor. */
+	repaintFloor = 0;
+	/** The section drawn as focused; absent while the keyboard is elsewhere. */
+	highlight;
+	constructor(theme, name, call, turn) {
 		this.theme = theme;
 		this.name = name;
 		this.call = call;
+		this.turn = turn;
+	}
+	/** The card headline, as the section heading names this call. */
+	get title() {
+		return this.call.title;
+	}
+	/**
+	* The card as navigable sections, carrying its untruncated rows whatever the
+	* collapsed body shows.
+	* @returns the call section, then the result section once the tool answered.
+	*/
+	parts() {
+		const call = [...this.call.title === "" ? [] : [this.call.title], ...this.call.lines];
+		const parts = [{
+			kind: "call",
+			rows: call.length === 0 ? [NO_ARGUMENTS] : call
+		}];
+		if (this.status !== "running") parts.push({
+			kind: "result",
+			rows: this.resultLines.length === 0 ? [NO_OUTPUT] : this.resultLines
+		});
+		return parts;
+	}
+	/**
+	* Draw this card with the focus gutter, or without it.
+	* @param part - the focused section, or undefined to clear the mark.
+	*/
+	setHighlight(part) {
+		this.highlight = part;
+	}
+	/**
+	* Draw the header and the call rows through `fade` until it settles.
+	* @param fade - the level and drawing settings of this card's own fade.
+	*/
+	setFade(fade) {
+		this.fade = fade;
+	}
+	/**
+	* Draw the result rows through `fade` until it settles.
+	* @param fade - the level and drawing settings of the result's own fade.
+	*/
+	setResultFade(fade) {
+		this.resultFade = fade;
+	}
+	/**
+	* Hand the rows the renderer can no longer repaint back to the colors this
+	* card drew them in, so a fade that is still climbing never rewrites them.
+	* @param floor - this card's own first repaintable line; the application
+	* raises it as the frame grows and never lowers it.
+	* @returns whether the floor took rows away from a fade that is drawing
+	* right now, and so whether the frame differs from the one just built.
+	*/
+	setRepaintFloor(floor) {
+		if (floor <= this.repaintFloor) return false;
+		this.repaintFloor = floor;
+		return this.fade?.age() !== void 0 || this.resultFade?.age() !== void 0;
 	}
 	/**
 	* Attach the result rows and settle the status.
@@ -1441,17 +1804,63 @@ var ToolBlock = class {
 	invalidate() {}
 	render(width) {
 		const palette = this.theme.palette;
+		const marked = this.highlight !== void 0;
+		const outer = marked ? Math.max(1, width - GUTTER_WIDTH) : width;
 		const header = `${this.status === "running" ? palette.warning("●") : this.status === "done" ? palette.success("●") : palette.error("●")} ${palette.bold(this.name)}${this.call.title === "" ? "" : ` ${palette.dim(this.call.title)}`}`;
-		const shown = previewLines([...this.call.lines, ...this.resultLines], this.theme.toolPreviewLines, this.expanded);
-		const inner = Math.max(1, width - 4);
-		const rows = shown.flatMap((line) => wrapTextWithAnsi(line, inner).map((part) => `  ${palette.dim("│")} ${part}`));
-		return [
+		const body = [...this.call.lines, ...this.resultLines];
+		const shown = previewLines(body, this.theme.toolPreviewLines, this.expanded);
+		const callCount = Math.min(this.call.lines.length, shown.length);
+		const inner = Math.max(1, outer - 4);
+		const rows = (lines) => lines.flatMap((line) => wrapTextWithAnsi(line, inner).map((part) => `  ${palette.dim("│")} ${part}`));
+		const callLines = [...wrapTextWithAnsi(header, outer), ...rows(shown.slice(0, callCount))];
+		const resultLines = rows(shown.slice(callCount));
+		const call = faded(callLines, this.fade, this.repaintFloor - 1);
+		const result = faded(resultLines, this.resultFade, this.repaintFloor - 1 - callLines.length);
+		const lines = [
 			"",
-			...wrapTextWithAnsi(header, width),
-			...rows
+			...call,
+			...result
 		];
+		if (!marked) return lines;
+		const cut = !this.expanded && body.length > this.theme.toolPreviewLines;
+		const sections = lines.length - (cut ? rows(shown.slice(-1)).length : 0);
+		const section = this.highlight === "result" ? {
+			from: 1 + callLines.length,
+			to: lines.length
+		} : {
+			from: 1,
+			to: 1 + callLines.length
+		};
+		return withGutter(palette, lines, (index) => index >= section.from && index < section.to && index < sections);
 	}
 };
+/**
+* Draw one group of a card's rows at the level its fade reports.
+* @param lines - the group's final rendered lines.
+* @param fade - the group's fade; absent for a card that never faded.
+* @param from - first line of the group the fade may recolor.
+* @returns the lines at that level, or the lines themselves once the fade
+* settled or was never attached.
+*/
+function faded(lines, fade, from) {
+	if (fade === void 0) return lines;
+	const age = fade.age();
+	return age === void 0 ? lines : recolorLines(lines, age, fade.style(), from);
+}
+/**
+* The tail chunks one streaming region still draws below the terminal's own
+* foreground.
+*
+* The last ramp level is an assumed foreground - pi-tui reports the terminal
+* background but not its foreground - so a chunk that reached it is left to
+* draw in the terminal's own foreground, which is also what it draws in once it
+* leaves the tail. No chunk can therefore jump color as it settles.
+* @param fade - the region's fade; absent for a region that never faded.
+* @returns the spans to recolor, oldest first.
+*/
+function drawnSpans(fade) {
+	return fade === void 0 ? [] : fade.spans().filter((span) => span.age < fade.steps - 1);
+}
 //#endregion
 //#region lib/types/completion.js
 /**
@@ -1685,6 +2094,267 @@ async function exportSessionZip(ctx, sessionId, directory, signal) {
 	return path;
 }
 //#endregion
+//#region lib/types/inspector.js
+/**
+* The docked inspector above the editor: while the keyboard walks the
+* transcript it shows the focused section in full - what it is, which part of
+* its block is held, and the start of that part's own rows.
+*
+* It is the focus indicator that is always on screen. A block is also marked
+* in place, but only while the renderer can still repaint its first line
+* (`./navigation.ts`), so the heading says when the marked block itself has
+* scrolled out of reach. Rows arrive as the block's source text with no fade
+* and no palette styling of their own, so a section that is still streaming
+* grows here as it arrives.
+* @module @deepseek-ai/dsh-tui-app/inspector
+*/
+/** What separates two labels of the parts strip. */
+const SEPARATOR$3 = " · ";
+/** Brackets the parts strip, so the strip reads as one row of choices. */
+const STRIP_ENDS = ["‹ ", " ›"];
+/** What the heading appends while the focused block lies outside the repaint window. */
+const OFF_SCREEN = " · off screen";
+/** The keys the inspector answers, drawn dim under its rows. */
+const HINT = "↑ ↓ blocks · ← → parts · Enter page · Esc back";
+/**
+* Draw the focused section.
+* @param view - the section to show.
+* @param render - the palette, the row budget, and the width.
+* @returns the inspector's lines: a blank separator, the heading, the parts
+* strip when the block has more than one part, the folded rows, and the hints.
+*/
+function renderInspector(view, render) {
+	const { palette, width } = render;
+	const suffix = view.highlighted ? "" : palette.dim(OFF_SCREEN);
+	const lines = ["", `${palette.bold(palette.accent(view.heading))}${suffix}`];
+	if (view.parts.length > 1) lines.push(partsStrip(view.parts, palette));
+	const wrapped = view.rows.flatMap((row) => wrapTextWithAnsi(row, Math.max(1, width)));
+	lines.push(...foldRows(wrapped, render.previewLines, (hidden) => palette.dim(`… ${String(hidden)} more row${hidden === 1 ? "" : "s"} · Enter opens the page`)));
+	lines.push(palette.dim(HINT));
+	return lines;
+}
+/**
+* Draw the parts of the focused block as one row of choices.
+* @param parts - the labels in reading order, the held one marked.
+* @param palette - the palette the labels are styled with.
+* @returns the strip line.
+*/
+function partsStrip(parts, palette) {
+	const labels = parts.map((part) => part.focused ? palette.accent(part.label) : palette.dim(part.label)).join(palette.dim(SEPARATOR$3));
+	return `${palette.dim(STRIP_ENDS[0])}${labels}${palette.dim(STRIP_ENDS[1])}`;
+}
+/**
+* The inspector as a mounted component.
+*
+* The view is read once per render rather than pushed in, so a section that is
+* still streaming and a tool result that has just landed reach the screen with
+* the frame that draws them, without the application refreshing the pane.
+*/
+var InspectorPane = class {
+	view;
+	settings;
+	/**
+	* @param view - reads the section to draw; undefined draws nothing at all,
+	* which is what an unmounted moment and a transcript with no cursor yield.
+	* @param settings - the palette and the row budget; the width arrives per render.
+	*/
+	constructor(view, settings) {
+		this.view = view;
+		this.settings = settings;
+	}
+	invalidate() {}
+	/**
+	* Draw the focused section at `width`.
+	* @param width - the total width the pane lays out in.
+	* @returns the inspector's lines, or none when no section is focused.
+	*/
+	render(width) {
+		const view = this.view();
+		return view === void 0 ? [] : renderInspector(view, {
+			...this.settings,
+			width
+		});
+	}
+};
+//#endregion
+//#region lib/types/navigation.js
+/**
+* The transcript as a list of navigable sections.
+*
+* A conversation is drawn as one component per fact, and the keyboard walks it
+* in two directions: between blocks and, inside a block, between its parts -
+* the reasoning and the reply of a message, the call and the result of a tool.
+* This module turns the transcript container's children into that list and
+* moves one cursor over it. Everything here is plain data: no pi-tui, no
+* palette, no clock. The rows a part carries are the block's own source text,
+* so the page `Enter` opens shows what the model wrote rather than a rendering
+* of it.
+* @module @deepseek-ai/dsh-tui-app/navigation
+*/
+/** What separates two facts inside one heading. */
+const SEPARATOR$2 = " · ";
+/**
+* Whether one transcript child is navigable.
+* @param child - a child of the transcript container.
+* @returns true when the child carries the navigable marker.
+*/
+function isSectionSource(child) {
+	return typeof child === "object" && child !== null && child.navigable === true;
+}
+/**
+* The navigable blocks of a transcript, in drawing order.
+* @param children - the transcript container's children.
+* @returns the children that expose sections; notices and printed rows are left out.
+*/
+function navigableBlocks(children) {
+	return children.filter(isSectionSource);
+}
+/**
+* Hold one index inside a list.
+* @param index - the wanted index.
+* @param length - the list length; at least 1.
+* @returns the index, moved to the nearest end when it falls outside.
+*/
+function clampIndex(index, length) {
+	return Math.max(0, Math.min(index, length - 1));
+}
+/**
+* How many parts one block carries.
+* @param blocks - the navigable blocks.
+* @param index - the block to count.
+* @returns the count, and 0 for an index past the list.
+*/
+function partCount(blocks, index) {
+	return blocks[index]?.parts().length ?? 0;
+}
+/**
+* Where the keyboard enters the transcript: the newest block, on its last
+* part, which is the most recent thing the session produced.
+* @param blocks - the navigable blocks.
+* @returns the cursor, or undefined when the transcript has nothing to inspect.
+*/
+function enterNewest(blocks) {
+	const block = blocks.length - 1;
+	const parts = partCount(blocks, block);
+	if (parts === 0) return void 0;
+	return {
+		block,
+		part: parts - 1
+	};
+}
+/**
+* Move to another block, landing on its last part.
+* @param cursor - where the focus sits.
+* @param step - 1 for the next block, -1 for the previous one.
+* @param blocks - the navigable blocks.
+* @returns the new cursor; the cursor itself at either end of the list.
+*/
+function moveBlock(cursor, step, blocks) {
+	const block = clampIndex(cursor.block + step, blocks.length);
+	if (block === cursor.block) return cursor;
+	return {
+		block,
+		part: Math.max(0, partCount(blocks, block) - 1)
+	};
+}
+/**
+* Move between the parts of the held block.
+* @param cursor - where the focus sits.
+* @param step - 1 for the next part, -1 for the previous one.
+* @param blocks - the navigable blocks.
+* @returns the new cursor; the cursor itself at either end of the block.
+*/
+function movePart(cursor, step, blocks) {
+	const parts = partCount(blocks, cursor.block);
+	if (parts === 0) return cursor;
+	return {
+		block: cursor.block,
+		part: clampIndex(cursor.part + step, parts)
+	};
+}
+/**
+* Put a remembered cursor back on the current transcript, which grew a block,
+* grew a part, or was replaced by another session since it was taken.
+* @param cursor - the remembered cursor.
+* @param blocks - the navigable blocks as they are now.
+* @returns the cursor inside the current list, or undefined when the
+* transcript has nothing to hold it.
+*/
+function clampCursor(cursor, blocks) {
+	if (blocks.length === 0) return void 0;
+	const block = clampIndex(cursor.block, blocks.length);
+	const parts = partCount(blocks, block);
+	if (parts === 0) return void 0;
+	return {
+		block,
+		part: clampIndex(cursor.part, parts)
+	};
+}
+/**
+* The part the cursor holds.
+* @param cursor - where the focus sits.
+* @param blocks - the navigable blocks.
+* @returns the part, or undefined when the cursor points past the list.
+*/
+function partAt(cursor, blocks) {
+	return blocks[cursor.block]?.parts()[cursor.part];
+}
+/**
+* What the inspector and the parts strip call one section.
+* @param kind - the section.
+* @returns the label; the user's own prompt reads as `you`.
+*/
+function partLabel(kind) {
+	return kind === "user" ? "you" : kind;
+}
+/**
+* How a block names the held section after its position and turn.
+* @param block - the held block.
+* @param part - the held part.
+* @returns the naming facts, in heading order.
+*/
+function subjectOf(block, part) {
+	switch (block.blockKind) {
+		case "user":
+		case "assistant": return [partLabel(part.kind)];
+		case "tool": return [block.title === "" ? block.name : `${block.name} ${block.title}`, block.parts().some((candidate) => candidate.kind === "result") ? partLabel(part.kind) : "running"];
+		/* v8 ignore next -- closed-union exhaustiveness guard */
+		default: return assertNever(block, "tui transcript block kind");
+	}
+}
+/**
+* The inspector heading of the held section: its position in the transcript,
+* the turn it belongs to, and what the section is.
+* @param cursor - where the focus sits.
+* @param blocks - the navigable blocks.
+* @returns the heading, or an empty string when the cursor points past the list.
+*/
+function sectionHeading(cursor, blocks) {
+	const block = blocks[cursor.block];
+	const part = partAt(cursor, blocks);
+	if (block === void 0 || part === void 0) return "";
+	return [
+		`${String(cursor.block + 1)}/${String(blocks.length)}`,
+		`turn ${String(block.turn)}`,
+		...subjectOf(block, part)
+	].join(SEPARATOR$2);
+}
+/**
+* The parts strip of the held block.
+* @param cursor - where the focus sits.
+* @param blocks - the navigable blocks.
+* @returns one label per part in reading order, the held one marked; empty
+* when the cursor points past the list.
+*/
+function partLabels(cursor, blocks) {
+	const block = blocks[cursor.block];
+	if (block === void 0) return [];
+	return block.parts().map((part, index) => ({
+		label: partLabel(part.kind),
+		focused: index === cursor.part
+	}));
+}
+//#endregion
 //#region lib/types/todos.js
 /**
 * The agent's todo list as terminal rows: the status glyphs every todo surface
@@ -2088,9 +2758,9 @@ const WORKSPACE_LABEL_WIDTH = 24;
 /** The last two segments of a path, with the separators that precede them. */
 const PATH_TAIL = /[/\\][^/\\]+[/\\][^/\\]+$/u;
 /** The keys the focused bar answers, replacing the usual hints. */
-const FOCUS_HINTS$1 = `← → select${SEPARATOR$1}Enter details${SEPARATOR$1}Esc back`;
-/** What the unfocused hints advertise as the way into the bar. */
-const ENTRY_HINT = "Shift+↑ status bar";
+const FOCUS_HINTS$1 = `← → select${SEPARATOR$1}↑ ↓ regions${SEPARATOR$1}Enter details${SEPARATOR$1}Esc back`;
+/** What the unfocused hints advertise as the two ways out of the editor. */
+const ENTRY_HINT = `Shift+↑ transcript${SEPARATOR$1}Shift+↓ status bar`;
 /** The command that prints every projection section at once. */
 const STATUS_COMMAND_ROW = "/status prints all of these sections";
 /**
@@ -2251,15 +2921,12 @@ const SELECT_MAX_VISIBLE = 8;
 /** Call-detail rows an approval shows before folding the rest into a count. */
 const APPROVAL_DETAIL_MAX_ROWS = 12;
 /**
-* Cut detail rows to `max`, replacing the rest with a count.
-* @param lines - the full rows.
-* @param max - rows kept.
-* @returns the rows to draw, with a trailing count of hidden rows when cut.
+* The trailing row an approval's folded call detail carries.
+* @param hidden - rows left out.
+* @returns the marker row.
 */
-function foldRows(lines, max) {
-	if (lines.length <= max) return [...lines];
-	const hidden = lines.length - max;
-	return [...lines.slice(0, max), `… ${String(hidden)} more line${hidden === 1 ? "" : "s"}`];
+function approvalFoldMarker(hidden) {
+	return `… ${String(hidden)} more line${hidden === 1 ? "" : "s"}`;
 }
 /** One settlement slot: the first value wins, later values are ignored. */
 var Settlement = class {
@@ -2378,7 +3045,7 @@ var ListPrompt = class {
 var ApprovalPrompt = class extends ListPrompt {
 	constructor(palette, toolName, reason, detail = []) {
 		const title = `${palette.warning("?")} ${palette.bold(`Allow ${toolName}?`)}`;
-		super(palette, reason === void 0 ? title : `${title}\n${palette.dim(reason)}`, foldRows(detail, APPROVAL_DETAIL_MAX_ROWS), [{
+		super(palette, reason === void 0 ? title : `${title}\n${palette.dim(reason)}`, foldRows(detail, APPROVAL_DETAIL_MAX_ROWS, approvalFoldMarker), [{
 			value: "allowed-once",
 			label: "Allow once",
 			description: "run this call"
@@ -2773,6 +3440,89 @@ var ModalQueue = class {
 	}
 };
 //#endregion
+//#region lib/types/screen.js
+/**
+* The main screen this application renders through, and the repaint rule the
+* renderer imposes on everything drawn above the terminal's viewport.
+*
+* pi-tui's `TuiMainScreen` draws into the terminal's own scrollback. It
+* repaints differentially only the lines whose index is at or after
+* `previousViewportTop`, the top of the last written frame's viewport, and
+* falls back to a full redraw that writes `ESC[2J ESC[H ESC[3J` - which
+* discards the terminal's scrollback - as soon as a line above it changed.
+* `previousViewportTop` is a high-water mark: every frame raises it towards
+* `frameLines - terminal.rows` and a shorter frame never lowers it again, so a
+* line that once left the window stays out of reach until the renderer redraws
+* in full and resets it.
+*
+* Anything that redraws lines a component already produced - the streaming
+* fade, a card fade, the focus gutter - therefore asks {@link repaintFloor} how
+* far into a block the renderer can still follow it, and
+* {@link GuardedMainScreen} gives the application the one moment where that
+* question can be answered: after a frame was built and before it is written.
+* @module @deepseek-ai/dsh-tui-app/screen
+*/
+/**
+* How many times one frame is offered to the guard before it is written. Two
+* passes let the guard answer for the geometry its own first pass produced -
+* a gutter rewraps the block it marks - and end on a frame the application's
+* own record of what is marked describes.
+*/
+const SETTLE_PASSES = 2;
+/**
+* The first line of one block the renderer can still repaint.
+* @param start - index of the block's first line in the frame.
+* @param viewportTop - the frame's first repaintable line, as
+* {@link GuardedMainScreen} hands it to its guard.
+* @returns the block's own first repaintable line index, 0 while the whole
+* block lies inside the window.
+*/
+function repaintFloor(start, viewportTop) {
+	return Math.max(0, viewportTop - start);
+}
+/**
+* The main screen that settles each frame between building it and writing it.
+*
+* The guard is handed the frame's first repaintable line: the higher of the
+* renderer's own `previousViewportTop` and the boundary the frame just built
+* imposes once it is written. The first term is what the renderer judges this
+* write against. The second keeps every decision one frame ahead of that
+* judgement, so what the guard changes today it can still change back
+* tomorrow. Settling before the write also means a fade reaches the terminal
+* already settled instead of changing in the next frame, by which time its
+* lines may sit above the window.
+*/
+var GuardedMainScreen = class extends TuiMainScreen {
+	guard;
+	/**
+	* @param terminal - the terminal the tree renders into.
+	* @param showHardwareCursor - whether the terminal's own cursor is the caret.
+	* @param guard - given the frame's first repaintable line and the width it
+	* was built at, applies what that geometry decides and reports whether it
+	* changed any line; run at most {@link SETTLE_PASSES} times per frame, each
+	* `true` on a frame that is built again.
+	*/
+	constructor(terminal, showHardwareCursor, guard) {
+		super(terminal, showHardwareCursor);
+		this.guard = guard;
+	}
+	/**
+	* Build the frame, let the guard settle what its geometry decides, and build
+	* it again for every pass that changed a line.
+	* @param width - the total width the tree lays out in.
+	* @returns the frame to write, settled against its own geometry.
+	*/
+	render(width) {
+		const previousTop = this.captureRenderState().previousViewportTop;
+		let lines = super.render(width);
+		for (let pass = 0; pass < SETTLE_PASSES; pass += 1) {
+			if (!this.guard(Math.max(previousTop, lines.length - this.terminal.rows), width)) break;
+			lines = super.render(width);
+		}
+		return lines;
+	}
+};
+//#endregion
 //#region lib/types/sessions.js
 /**
 * Session facts the terminal shows and switches between: the persisted
@@ -2908,7 +3658,10 @@ function renderSubagentPanel(view, render) {
 * the editor it keeps two docked regions the keyboard can take over — the
 * subagent panel and the status bar — and one repeating tick advances their
 * elapsed counters and re-reads a stale subagent listing. A second tick, at
-* its own period, brightens the text of the message streaming right now.
+* its own period, brightens the text of the message streaming right now and
+* the tool cards that just landed, each only as far up the frame as the
+* renderer repaints without discarding the terminal's scrollback
+* (`./screen.ts`).
 * @module @deepseek-ai/dsh-tui-app/app
 */
 /** A second Ctrl+C inside this window quits. */
@@ -3086,6 +3839,8 @@ var TuiApp = class {
 	statusSlot = new Container();
 	loader;
 	modalSlot = new Container();
+	/** Draws the focused transcript section, and nothing at all while the keyboard is elsewhere. */
+	inspector;
 	editor;
 	/** Holds {@link panel} exactly while the bound session has subagent rows. */
 	panelSlot = new Container();
@@ -3108,8 +3863,16 @@ var TuiApp = class {
 	home = homedir();
 	/** The segments of the last footer draw, in bar order. */
 	segments = [];
-	/** Which docked region owns the keyboard. */
+	/** Which region owns the keyboard. */
 	focus = "editor";
+	/**
+	* Where the transcript focus sits, kept across a page and a return to the
+	* editor. A cursor the current transcript cannot place names nothing, which
+	* is what a session change leaves behind.
+	*/
+	cursor;
+	/** The section drawn with the focus gutter right now; set only by {@link TuiApp.settleFrame}. */
+	highlighted;
 	/** The segment the status bar holds; read only while the bar has focus. */
 	barSelection = FIRST_FOOTER_SEGMENT;
 	/** The descendant listing the last reconcile produced, in pre-order. */
@@ -3128,8 +3891,14 @@ var TuiApp = class {
 	ticker;
 	/** Disposer of the fade tick while it is armed. */
 	fadeTicker;
-	/** The tail of the message streaming right now; absent between messages. */
-	fadeTail;
+	/** The visible-text tail of the message streaming right now; absent between messages. */
+	textTail;
+	/** The reasoning tail of the message streaming right now; absent between messages. */
+	reasoningTail;
+	/** The card fades running right now; each drops itself once it settles. */
+	blockFades = new FadeRegistry();
+	/** Set while {@link TuiApp.bind} replays a session's history, which draws its cards settled. */
+	replaying = false;
 	/** Whether this terminal draws a ramp at all, decided once at start. */
 	fading = false;
 	/** How streamed text is drawn; `none` until the background query settles. */
@@ -3154,8 +3923,12 @@ var TuiApp = class {
 			palette,
 			toolPreviewLines: deps.toolPreviewLines
 		};
-		this.tui = new TuiMainScreen(deps.terminal, true);
+		this.tui = new GuardedMainScreen(deps.terminal, true, (viewportTop, width) => this.settleFrame(viewportTop, width));
 		this.header = new Text("", 0, 0);
+		this.inspector = new InspectorPane(() => this.inspectorView(), {
+			palette,
+			previewLines: deps.focusPreviewLines
+		});
 		this.loader = new Loader(this.tui, palette.accent, palette.dim, "thinking");
 		this.loader.stop();
 		this.editor = new BarCursorEditor(this.tui, editorTheme(palette), { paddingX: 1 });
@@ -3173,15 +3946,17 @@ var TuiApp = class {
 			slot: this.modalSlot,
 			focusAfter: this.editor
 		});
-		for (const child of [
+		const tree = [
 			this.header,
 			this.chat,
 			this.statusSlot,
 			this.modalSlot,
+			this.inspector,
 			this.editor,
 			this.panelSlot,
 			this.footer
-		]) this.tui.addChild(child);
+		];
+		for (const child of tree) this.tui.addChild(child);
 	}
 	get agent() {
 		return this.bound.agent;
@@ -3229,10 +4004,11 @@ var TuiApp = class {
 		if (initialPrompt !== void 0) this.submit(initialPrompt);
 	}
 	/**
-	* Decide whether streamed text fades at all, once per run, from the
-	* palette, the environment, and the reduced-motion preference. A terminal
-	* that draws no ramp tracks no tail and arms no fade tick, so streaming
-	* costs there exactly what it did before the effect existed.
+	* Decide whether streamed text and tool cards fade at all, once per run,
+	* from the palette, the environment, and the reduced-motion preference. A
+	* terminal that draws no ramp tracks no tail, attaches no card fade, and
+	* arms no fade tick, so streaming costs there exactly what it does with the
+	* effect switched off.
 	*/
 	startFade() {
 		const capability = resolveFadeCapability({
@@ -3280,6 +4056,8 @@ var TuiApp = class {
 	/** Draw `next` as the terminal's session: clear the transcript and replay its history. */
 	bind(next) {
 		this.bound = next;
+		this.focusEditor();
+		this.highlighted = void 0;
 		this.chat.clear();
 		this.toolBlocks.clear();
 		this.toolArguments.clear();
@@ -3289,6 +4067,7 @@ var TuiApp = class {
 		this.turnStartedAt = void 0;
 		this.streaming = void 0;
 		this.endFade();
+		this.blockFades.clear();
 		this.usage = EMPTY_USAGE;
 		this.pending = [];
 		this.subagentEntries = [];
@@ -3296,7 +4075,9 @@ var TuiApp = class {
 		this.listingFailure = void 0;
 		this.subagentsStale = false;
 		this.setWorking(next.agent.status === "running");
+		this.replaying = true;
 		for (const event of next.history) this.onSessionEvent(next.agent.session, event);
+		this.replaying = false;
 		this.refreshHeader();
 		this.refreshFooter();
 		this.refreshSubagentPanel();
@@ -3778,12 +4559,13 @@ var TuiApp = class {
 		}
 		if (this.focus === "bar") return this.onStatusBarKey(data);
 		if (this.focus === "panel") return this.onPanelKey(data);
+		if (this.focus === "transcript") return this.onTranscriptKey(data);
 		if (matchesKey(data, "shift+up")) {
-			this.focusBar();
+			this.focusTranscript();
 			return { consume: true };
 		}
-		if (matchesKey(data, "shift+down") && this.panelView.rows.length > 0) {
-			this.focusRegion("panel");
+		if (matchesKey(data, "shift+down")) {
+			this.focusBelowEditor();
 			return { consume: true };
 		}
 		if (matchesKey(data, "escape") && !this.editor.isShowingAutocomplete()) {
@@ -3812,18 +4594,38 @@ var TuiApp = class {
 		}
 	}
 	/**
-	* Answer one key while the status bar holds focus. Every key is consumed
-	* here, so nothing typed at the bar reaches the editor.
+	* Answer the keys every non-editor region answers the same way: `Escape`
+	* hands the keyboard back to the editor, `Shift+Up` names the conversation,
+	* and `Shift+Down` the status bar.
 	* @param data - the raw key bytes.
-	* @returns the consume marker the input listener returns.
+	* @returns the consume marker when the key named a region, `undefined` when the focused region owns the key.
 	*/
-	onStatusBarKey(data) {
-		if (matchesKey(data, "escape") || matchesKey(data, "shift+down")) {
+	onRegionKey(data) {
+		if (matchesKey(data, "escape")) {
 			this.focusEditor();
 			return { consume: true };
 		}
 		if (matchesKey(data, "shift+up")) {
-			this.focusRegion(this.panelView.rows.length > 0 ? "panel" : "editor");
+			this.focusTranscript();
+			return { consume: true };
+		}
+		if (matchesKey(data, "shift+down")) {
+			this.focusBar();
+			return { consume: true };
+		}
+	}
+	/**
+	* Answer one key while the status bar holds focus. Every key is consumed
+	* here, so nothing typed at the bar reaches the editor.
+	* @param data - the raw key bytes.
+	* @returns the consume marker the input listener returns.
+	*/
+	onStatusBarKey(data) {
+		const region = this.onRegionKey(data);
+		if (region !== void 0) return region;
+		if (matchesKey(data, "up")) {
+			if (this.panelView.rows.length > 0) this.focusPanel(this.panelView.rows.length - 1);
+			else this.focusTranscript();
 			return { consume: true };
 		}
 		if (matchesKey(data, "left") || matchesKey(data, "shift+tab")) {
@@ -3838,27 +4640,60 @@ var TuiApp = class {
 		return { consume: true };
 	}
 	/**
-	* Answer one key while the subagent panel holds focus. Every key is
-	* consumed here; `Ctrl+C` and `Ctrl+D` never reach this far, keeping their
-	* global meaning.
+	* Answer one key while the transcript holds focus. Every key is consumed
+	* here, so nothing typed while reading the conversation reaches the editor;
+	* `Ctrl+C` and `Ctrl+D` never reach this far and keep their global meaning.
 	* @param data - the raw key bytes.
 	* @returns the consume marker the input listener returns.
 	*/
-	onPanelKey(data) {
-		if (matchesKey(data, "escape") || matchesKey(data, "shift+up")) {
+	onTranscriptKey(data) {
+		const region = this.onRegionKey(data);
+		if (region !== void 0) return region;
+		const section = this.focusedSection();
+		/* v8 ignore next 5 -- only a session change empties the transcript, and it hands the keyboard back first */
+		if (section === void 0) {
 			this.focusEditor();
 			return { consume: true };
 		}
-		if (matchesKey(data, "shift+down")) {
-			this.focusBar();
+		const { cursor, blocks } = section;
+		if (matchesKey(data, "up")) {
+			this.moveCursor(moveBlock(cursor, -1, blocks));
+			return { consume: true };
+		}
+		if (matchesKey(data, "down")) {
+			if (cursor.block === blocks.length - 1) this.focusBelowEditor();
+			else this.moveCursor(moveBlock(cursor, 1, blocks));
 			return { consume: true };
 		}
+		if (matchesKey(data, "left")) {
+			this.moveCursor(movePart(cursor, -1, blocks));
+			return { consume: true };
+		}
+		if (matchesKey(data, "right")) {
+			this.moveCursor(movePart(cursor, 1, blocks));
+			return { consume: true };
+		}
+		if (matchesKey(data, "enter")) this.openSection(section);
+		return { consume: true };
+	}
+	/**
+	* Answer one key while the subagent panel holds focus. Every key is
+	* consumed here; `Ctrl+C` and `Ctrl+D` never reach this far, keeping their
+	* global meaning.
+	* @param data - the raw key bytes.
+	* @returns the consume marker the input listener returns.
+	*/
+	onPanelKey(data) {
+		const region = this.onRegionKey(data);
+		if (region !== void 0) return region;
 		if (matchesKey(data, "up")) {
-			this.movePanel(-1);
+			if (this.panelSelectionIndex(this.panelView.rows) === 0) this.focusTranscript();
+			else this.movePanel(-1);
 			return { consume: true };
 		}
 		if (matchesKey(data, "down")) {
-			this.movePanel(1);
+			if (this.panelSelectionIndex(this.panelView.rows) === this.panelView.rows.length - 1) this.focusBar();
+			else this.movePanel(1);
 			return { consume: true };
 		}
 		if (matchesKey(data, "enter")) this.navigate("subagent details", () => this.openPanelRow());
@@ -3903,16 +4738,15 @@ var TuiApp = class {
 		this.refreshFooter();
 	}
 	/**
-	* Move the panel's selection, wrapping at both ends of the drawn rows. The
+	* Move the panel's selection, stopping at both ends of the drawn rows. The
 	* rows behind a `+<n> more` row are not selectable; `/subagents` walks the
 	* complete tree.
 	* @param step - 1 for the next row, -1 for the previous one.
 	*/
 	movePanel(step) {
 		const rows = this.panelView.rows;
-		const count = rows.length;
-		const next = rows[(this.panelSelectionIndex(rows) + step + count) % count];
-		/* v8 ignore next -- the wrapped index stays inside the panel's own rows */
+		const next = rows[Math.max(0, Math.min(this.panelSelectionIndex(rows) + step, rows.length - 1))];
+		/* v8 ignore next -- the clamped index stays inside the panel's own rows */
 		if (next !== void 0) this.panelSelection = next.id;
 		this.refreshSubagentPanel();
 	}
@@ -3921,13 +4755,103 @@ var TuiApp = class {
 		this.barSelection = FIRST_FOOTER_SEGMENT;
 		this.focusRegion("bar");
 	}
+	/**
+	* Give the keyboard to the subagent panel on one of its rows.
+	* @param index - the row the selection lands on.
+	*/
+	focusPanel(index) {
+		this.panelSelection = this.panelView.rows[index]?.id;
+		this.focusRegion("panel");
+	}
+	/**
+	* Give the keyboard to the region under the editor: the subagent panel's
+	* first row while the panel is drawn, and the status bar otherwise.
+	*/
+	focusBelowEditor() {
+		if (this.panelView.rows.length > 0) this.focusPanel(0);
+		else this.focusBar();
+	}
+	/**
+	* Give the keyboard to the transcript on its newest block. A session with
+	* nothing to inspect yet says so and leaves the keyboard where it was.
+	*/
+	focusTranscript() {
+		const cursor = enterNewest(navigableBlocks(this.chat.children));
+		if (cursor === void 0) {
+			this.notice("nothing in the transcript to inspect yet");
+			return;
+		}
+		this.cursor = cursor;
+		this.focusRegion("transcript");
+		this.tui.requestRender();
+	}
+	/**
+	* Put the transcript focus on another section.
+	* @param cursor - where the focus moves to.
+	*/
+	moveCursor(cursor) {
+		this.cursor = cursor;
+		this.tui.requestRender();
+	}
+	/**
+	* Read the remembered cursor against the transcript as it is drawn right
+	* now: it grew parts and blocks since the cursor was taken, and a session
+	* change replaced the blocks it named altogether. The cursor itself is left
+	* alone, so a page and a trip through the editor come back to the same
+	* section; {@link TuiApp.focusTranscript} replaces it.
+	* @returns the section the cursor names, or undefined when the transcript
+	* has nothing to hold it.
+	*/
+	focusedSection() {
+		const blocks = navigableBlocks(this.chat.children);
+		const cursor = this.cursor === void 0 ? void 0 : clampCursor(this.cursor, blocks);
+		if (cursor === void 0) return void 0;
+		const block = blocks[cursor.block];
+		const part = block?.parts()[cursor.part];
+		/* v8 ignore next -- clampCursor settles on a block that carries the part it names */
+		if (block === void 0 || part === void 0) return void 0;
+		return {
+			cursor,
+			blocks,
+			block,
+			part
+		};
+	}
+	/**
+	* Open the focused section as a read-only page and come back to it.
+	* @param section - the focused section.
+	*/
+	openSection(section) {
+		const { cursor, blocks } = section;
+		const prompt = new DetailPrompt(this.deps.palette, sectionHeading(cursor, blocks), section.part.rows);
+		this.navigate("section", async () => {
+			await this.showModal(prompt);
+			this.focusRegion("transcript");
+		});
+	}
+	/**
+	* The focused section as the docked inspector draws it.
+	* @returns the view, or undefined while the keyboard is not in the
+	* transcript, which draws no inspector at all.
+	*/
+	inspectorView() {
+		const section = this.focusedSection();
+		if (section === void 0 || this.focus !== "transcript") return void 0;
+		const { cursor, blocks } = section;
+		return {
+			heading: sectionHeading(cursor, blocks),
+			parts: partLabels(cursor, blocks),
+			rows: section.part.rows,
+			highlighted: this.highlighted !== void 0
+		};
+	}
 	/** Hand the keyboard back to the editor; a no-op while the editor already has it. */
 	focusEditor() {
 		this.focusRegion("editor");
 	}
 	/**
-	* Move the keyboard between the docked regions and redraw both of them, so
-	* the region losing focus stops drawing its selection.
+	* Move the keyboard between the regions and redraw the docked ones, so the
+	* region losing focus stops drawing its selection.
 	* @param region - the region that takes the keyboard.
 	*/
 	focusRegion(region) {
@@ -3986,7 +4910,7 @@ var TuiApp = class {
 		});
 		this.submittedIds.add(message.id);
 		const shown = attachments.length === 0 ? text : `${text}\n${attachments.map((attachment) => `[${attachment.block.type}: ${attachment.name}]`).join(" ")}`;
-		this.chat.addChild(new UserBlock(this.theme, shown));
+		this.chat.addChild(new UserBlock(this.theme, shown, this.turn));
 		if (agent.status !== "running") agent.followup(message);
 		else if (mode === "steer") {
 			agent.steer(message);
@@ -4093,8 +5017,9 @@ var TuiApp = class {
 			"@ completes paths and sessions (workspace, ../, ~/, absolute) · / completes commands",
 			"Esc stops the running turn · Ctrl+O expands or collapses tool output",
 			"Shift+Tab cycles the current model's reasoning effort for the next request",
-			"Shift+Up focuses the status bar: ← → select a fact, Enter shows its details, Esc returns to the input",
-			"Shift+Up again focuses the subagent panel while it is drawn: ↑ ↓ select a child, Enter shows its session",
+			"Shift+Up focuses the transcript, Shift+Down the subagent panel or the status bar",
+			"Then ↑ ↓ move between blocks, panel rows, and the bar; ← → move between a block's parts or the bar's segments",
+			"Enter opens the focused section or segment, Esc returns to the input",
 			"Ctrl+C clears the input (twice quits) · Ctrl+D on an empty input quits"
 		];
 		this.chat.addChild(new Text([
@@ -4535,7 +5460,7 @@ var TuiApp = class {
 	}
 	streamingBlock() {
 		if (this.streaming === void 0) {
-			this.streaming = new AssistantBlock(this.theme);
+			this.streaming = new AssistantBlock(this.theme, this.turn);
 			this.chat.addChild(this.streaming);
 		}
 		return this.streaming;
@@ -4550,48 +5475,109 @@ var TuiApp = class {
 		const block = this.streamingBlock();
 		block.appendText(delta);
 		if (!this.fading) return;
-		if (this.fadeTail === void 0) {
-			this.fadeTail = new FadeTracker({ steps: this.deps.fadeSteps });
-			block.setFade({
-				spans: () => this.fadeTail?.spans() ?? [],
-				style: () => this.fadeStyle,
-				steps: this.deps.fadeSteps,
-				flush: () => {
-					this.flushFade();
-				}
-			});
+		if (this.textTail === void 0) {
+			this.textTail = this.createTail();
+			block.setFade(this.tailRender(() => this.textTail));
+		}
+		this.textTail.append(delta);
+		this.updateFadeTicker();
+	}
+	/**
+	* Take one reasoning delta, which fades in on its own tail: the reasoning
+	* and the visible text of one message stream at different times and each
+	* brightens from the moment its own words appeared.
+	* @param delta - the streamed reasoning delta.
+	*/
+	appendStreamedReasoning(delta) {
+		const block = this.streamingBlock();
+		block.appendReasoning(delta);
+		if (!this.fading) return;
+		if (this.reasoningTail === void 0) {
+			this.reasoningTail = this.createTail();
+			block.setReasoningFade(this.tailRender(() => this.reasoningTail));
 		}
-		this.fadeTail.append(delta);
+		this.reasoningTail.append(delta);
 		this.updateFadeTicker();
 	}
 	/**
-	* Settle what the current block has drawn and stop tracking it: the tail
-	* goes, so its text renders at the terminal's foreground from the next
-	* render on, and no fade tick stays armed between messages.
+	* Start tracking one streaming region against the application's clock.
+	* @returns the tail deltas are appended to.
+	*/
+	createTail() {
+		return new FadeTracker({
+			steps: this.deps.fadeSteps,
+			stepMs: this.deps.fadeStepMs,
+			now: () => this.deps.now()
+		});
+	}
+	/**
+	* The live view of one tail the streaming block reads per render.
+	* @param tail - reads the field the tail is held in, so a render after the
+	* message settled sees the empty tail rather than the one it was given.
+	* @returns the spans, the drawing settings, and the width-change flush.
+	*/
+	tailRender(tail) {
+		return {
+			spans: () => tail()?.spans() ?? [],
+			style: () => this.fadeStyle,
+			steps: this.deps.fadeSteps,
+			flush: () => {
+				this.flushFade();
+			}
+		};
+	}
+	/**
+	* Fade one group of a card's rows in from the terminal background, from the
+	* instant the log carried them. A terminal that draws no ramp and a session
+	* being replayed fade nothing.
+	* @param attach - hands the fade to the block that draws those rows.
+	*/
+	fadeBlock(attach) {
+		if (!this.fading || this.replaying) return;
+		const clock = new BlockFadeClock({
+			bornAt: this.deps.now(),
+			stepMs: this.deps.fadeStepMs,
+			steps: this.deps.fadeSteps,
+			now: () => this.deps.now()
+		});
+		this.blockFades.add(clock);
+		attach({
+			age: () => clock.age(),
+			style: () => this.fadeStyle
+		});
+		this.updateFadeTicker();
+	}
+	/**
+	* Settle what the current message has drawn and stop tracking it: both
+	* tails go, so their text renders at the terminal's foreground from the next
+	* render on. Card fades are left to expire on their own clock, because a
+	* card that landed at the end of a turn keeps brightening after it.
 	*/
 	endFade() {
-		this.fadeTail = void 0;
+		this.textTail = void 0;
+		this.reasoningTail = void 0;
 		this.updateFadeTicker();
 	}
 	/**
-	* Settle what is drawn while the message keeps streaming, which the block
-	* asks for after a width change. The tracker stays, so what it knows about
-	* the arrival rate survives a resize and only the tail is dropped.
+	* Settle what is drawn while the message keeps streaming, which a block asks
+	* for after a width change: the columns either tail was matched against no
+	* longer describe the rewrapped lines.
 	*/
 	flushFade() {
-		this.fadeTail?.flush();
+		this.textTail?.flush();
+		this.reasoningTail?.flush();
 		this.updateFadeTicker();
 	}
 	/**
-	* Arm the fade tick while a chunk is still below the last brightness level
-	* and disarm it otherwise, so a session that is not streaming runs no fade
-	* timer. Exactly one runs at a time, and a stopped app runs none.
+	* Arm the fade tick while streamed text or a card still draws below the last
+	* brightness level and disarm it otherwise, so a session that is not
+	* streaming runs no fade timer. Exactly one runs at a time, and a stopped
+	* app runs none.
 	*/
 	updateFadeTicker() {
-		const tail = this.fadeTail;
-		if (!this.stopped && tail !== void 0 && tail.needsRepaint()) {
+		if (!this.stopped && this.fadesMoving()) {
 			this.fadeTicker ??= this.deps.tick(() => {
-				this.onFadeTick(tail);
+				this.onFadeTick();
 			}, this.deps.fadeStepMs);
 			return;
 		}
@@ -4601,14 +5587,64 @@ var TuiApp = class {
 		ticker();
 	}
 	/**
-	* One fade period over the tail the tick was armed for. Every change to the
-	* tail runs {@link TuiApp.updateFadeTicker} again, so an armed period always
-	* holds that same tail and always moves a chunk's color; the render request
-	* redraws the lines it moved, and the disarm check follows the ageing.
-	* @param tail - the tail this tick was armed for.
+	* Whether anything the application fades still draws below the last
+	* brightness level.
+	* @returns true while a tail or a card fade keeps changing what is drawn.
+	*/
+	fadesMoving() {
+		return this.textTail?.needsRepaint() === true || this.reasoningTail?.needsRepaint() === true || this.blockFades.needsRepaint();
+	}
+	/**
+	* Apply everything the frame's geometry decides, on the frame that was just
+	* built and before it is written.
+	*
+	* Two effects redraw lines a component already produced and are therefore
+	* held to the renderer's repaint window ({@link GuardedMainScreen}): a
+	* running fade, which is told each block's own first repaintable line, and
+	* the focus gutter, which a block gains or loses only while its first line
+	* lies inside the window. A focused block above the window simply stays
+	* unmarked, and the inspector reports that instead.
+	* @param viewportTop - the frame's first repaintable line.
+	* @param width - the width it was built at.
+	* @returns whether anything changed a line, so the frame is built again
+	* before it is written.
+	*/
+	settleFrame(viewportTop, width) {
+		const section = this.focusedSection();
+		const wanted = section !== void 0 && this.focus === "transcript" ? {
+			block: section.block,
+			part: section.part.kind
+		} : void 0;
+		const fades = this.fadesMoving();
+		if (!fades && wanted === void 0 && this.highlighted === void 0) return false;
+		let start = this.header.render(width).length;
+		let wantedStart;
+		let changed = false;
+		for (const child of this.chat.children) {
+			if (isSectionSource(child) && child === wanted?.block) wantedStart = start;
+			if (fades && (child instanceof AssistantBlock || child instanceof ToolBlock)) {
+				if (child.setRepaintFloor(repaintFloor(start, viewportTop))) changed = true;
+			}
+			start += child.render(width).length;
+		}
+		const target = wantedStart !== void 0 && repaintFloor(wantedStart, viewportTop) === 0 ? wanted : void 0;
+		const current = this.highlighted;
+		if (current?.block === target?.block && current?.part === target?.part) return changed;
+		current?.block.setHighlight(void 0);
+		target?.block.setHighlight(target.part);
+		this.highlighted = target;
+		return true;
+	}
+	/**
+	* One fade period: every tracked fade drops what settled since the last one,
+	* the render request redraws the levels the clock moved, and the disarm
+	* check follows. Ages come from the clock, so this period repaints the
+	* levels the elapsed time asks for however long the period itself ran.
 	*/
-	onFadeTick(tail) {
-		tail.tick();
+	onFadeTick() {
+		this.textTail?.tick();
+		this.reasoningTail?.tick();
+		this.blockFades.tick();
 		this.tui.requestRender();
 		this.updateFadeTicker();
 	}
@@ -4625,7 +5661,7 @@ var TuiApp = class {
 						if (chunk.text !== "") this.appendStreamedText(chunk.text);
 						break;
 					case "reasoning-delta":
-						if (chunk.text !== "") this.streamingBlock().appendReasoning(chunk.text);
+						if (chunk.text !== "") this.appendStreamedReasoning(chunk.text);
 						break;
 					case "tool-call-delta":
 						if (chunk.name !== void 0) this.loader.setMessage(`calling ${chunk.name}`);
@@ -4684,10 +5720,13 @@ var TuiApp = class {
 				const { callId, name, arguments: argumentsJson } = event.data;
 				const args = parseArguments(argumentsJson);
 				this.toolArguments.set(callId, args);
-				const block = new ToolBlock(this.theme, name, toolCallText(argumentsJson, this.presentCall(name, args)));
+				const block = new ToolBlock(this.theme, name, toolCallText(argumentsJson, this.presentCall(name, args)), this.turn);
 				block.setExpanded(this.toolsExpanded);
 				this.toolBlocks.set(callId, block);
 				this.chat.addChild(block);
+				this.fadeBlock((fade) => {
+					block.setFade(fade);
+				});
 				break;
 			}
 			case "tool/result": {
@@ -4697,6 +5736,9 @@ var TuiApp = class {
 				const isError = result.isError === true;
 				const view = this.presentResult(block.name, this.toolArguments.get(result.toolCallId), result.content, isError, event.data.meta);
 				block.setResult(toolResultLines(view, result.content), isError);
+				this.fadeBlock((fade) => {
+					block.setResultFade(fade);
+				});
 				this.loader.setMessage("thinking");
 				break;
 			}
@@ -4755,7 +5797,7 @@ var TuiApp = class {
 		if (source.kind === "user") {
 			if (this.submittedIds.has(message.id)) return;
 			const attachments = message.content.filter((block) => block.type !== "text").map((block) => `[${block.type}]`);
-			this.chat.addChild(new UserBlock(this.theme, [contentText(message.content), ...attachments].filter((part) => part !== "").join("\n")));
+			this.chat.addChild(new UserBlock(this.theme, [contentText(message.content), ...attachments].filter((part) => part !== "").join("\n"), this.turn));
 			return;
 		}
 		if (source.kind === "plugin" && source.form === "notice") this.chat.addChild(new NoticeBlock(this.theme, source.summary));
@@ -4864,9 +5906,10 @@ const Config = z.object({
 	prompt: z.string(),
 	resume: z.string(),
 	toolPreviewLines: z.natural().min(1).default(8),
+	focusPreviewLines: z.natural().min(1).default(12),
 	liveRefreshMs: z.natural().min(100).default(1e3),
-	streamFadeSteps: z.natural().min(2).default(5),
-	streamFadeStepMs: z.natural().min(16).default(40),
+	streamFadeSteps: z.natural().min(2).default(8),
+	streamFadeStepMs: z.natural().min(16).default(33),
 	reducedMotion: z.boolean().default(false),
 	openBrowser: z.boolean().default(true)
 });
@@ -5039,6 +6082,7 @@ async function run(ctx, config, host) {
 		terminal: host.createTerminal(),
 		palette: createPalette(host.color),
 		toolPreviewLines: config.toolPreviewLines,
+		focusPreviewLines: config.focusPreviewLines,
 		liveRefreshMs: config.liveRefreshMs,
 		fadeSteps: config.streamFadeSteps,
 		fadeStepMs: config.streamFadeStepMs,