dsh-code 0.2.0 → 0.4.0

package/lib/index.mjs

@@ -1,13 +1,16 @@
 import { randomUUID } from "node:crypto";
 import { readFileSync } from "node:fs";
+import { readdir, writeFile } from "node:fs/promises";
 import { basename, join } from "node:path";
-import { createElement, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { createElement, memo, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import z from "@deepseek-ai/schemastery";
 import { installModelSelection } from "@deepseek-ai/dsh-agent";
 import { assertNever, boundContextSummary, createUserMessage } from "@deepseek-ai/dsh-llm";
 import { SessionId } from "@deepseek-ai/dsh-session";
-import { Box, Text, render, useInput } from "ink";
+import { Box, Static, Text, render, useInput, useStdout } from "ink";
 import chalk from "chalk";
+import { formatSessionReferenceMention, parseSessionReferenceText } from "@deepseek-ai/dsh-session-reference";
+import { UserQuestionError } from "@deepseek-ai/dsh-user-questions";
 import { isUserInvocable } from "@deepseek-ai/dsh-skill";
 //#region src/theme.ts
 /**
@@ -64,37 +67,909 @@ const TUI_RGB = {
 		245,
 		158,
 		11
+	],
+	/** Default foreground text — `--dsw-static-neutral-50`. */
+	text: [
+		236,
+		240,
+		246
+	],
+	/** Inline/fenced code — soft sky blue, distinct from brand accents. */
+	code: [
+		125,
+		211,
+		252
 	]
 };
 /** Paint with the primary brand blue: whale, wordmark, tool names, accents. */
 function brand(text) {
 	return chalk.rgb(...TUI_RGB.brand)(text);
 }
-/** Paint muted captions, hints, and meta lines. */
-function dim(text) {
-	return chalk.rgb(...TUI_RGB.dim)(text);
+/** Paint muted captions, hints, and meta lines. */
+function dim(text) {
+	return chalk.rgb(...TUI_RGB.dim)(text);
+}
+/** Paint failures and error entries. */
+function error(text) {
+	return chalk.rgb(...TUI_RGB.error)(text);
+}
+//#endregion
+//#region src/whale-glyph.ts
+/** Half-block whale glyph rows; render with the brand color. */
+const WHALE_GLYPH = [
+	"    ▄▄▄▄▄▄▄▄█    ▄█▄     ▄",
+	" ▄▄██████████▄▄  ▀███▄████",
+	"▄███████████████▄  ███▀▀▀ ",
+	"██     ▀▀█████▄▀██████    ",
+	"██▄       ▀████▄▄████     ",
+	" ██▄        ▀██████▀      ",
+	"  ▀██▄▄  ██▄  ▀███▄▄      ",
+	"     ▀▀███████▀▀ ▀▀▀      "
+];
+//#endregion
+//#region src/render/tool-preview.ts
+/**
+* Bounded preview line for a tool invocation's raw JSON arguments: the first
+* human-meaningful string among the well-known keys (command, path, query, …)
+* with a fallback to the bounded raw JSON. Shared by the tool card in the
+* transcript and the approval bar's command preview.
+*
+* @module @deepseek-ai/dsh-code/render/tool-preview
+*/
+/** Keys searched in declaration order when building a preview. */
+const PREVIEW_KEYS = [
+	"command",
+	"cmd",
+	"description",
+	"path",
+	"pattern",
+	"query"
+];
+/**
+* Resolve one bounded preview for raw tool arguments.
+* @param args - raw JSON arguments string as the model produced it.
+* @param toolName - the tool the arguments belong to (fallback label).
+* @returns the preview line; empty when nothing useful resolves.
+*/
+function toolArgumentsPreview(args, toolName) {
+	if (args === "") return toolName;
+	try {
+		const parsed = JSON.parse(args);
+		if (parsed !== null && typeof parsed === "object") {
+			const record = parsed;
+			for (const key of PREVIEW_KEYS) {
+				const value = record[key];
+				if (typeof value === "string" && value !== "") return value;
+			}
+		}
+	} catch {}
+	return args.length > 80 ? `${args.slice(0, 77)}...` : args;
+}
+//#endregion
+//#region src/render/tool-detail.ts
+/**
+* Expansion payloads for tool cards (the Ctrl+O verbose transcript): the
+* TUI-side consumption of the harness presentation contract. Mutation and
+* read tools persist a structured `tool/result.meta` (`diffs`, read
+* windows, web sources) exactly so a capable UI can replay richer cards than
+* the model-facing text; this module narrows that opaque JSON defensively —
+* mirroring the upstream validators — and pre-formats bounded, render-ready
+* rows. Malformed or absent metadata always degrades to the bounded raw
+* result text, never throws during replay.
+*
+* @module @deepseek-ai/dsh-code/render/tool-detail
+*/
+/** Budgets keeping one expanded card bounded on a terminal. */
+const MAX_DIFF_LINES = 200;
+const MAX_READ_LINES = 120;
+const MAX_SOURCES = 10;
+const MAX_RAW_CHARS = 6e3;
+const MAX_LINE_COLUMNS = 240;
+/** Truncate one line to the visible-column budget with an ellipsis marker. */
+function clipLine(text) {
+	return text.length > MAX_LINE_COLUMNS ? `${text.slice(0, 239)}…` : text;
+}
+/** Split text into lines, dropping the trailing empty element of a final newline. */
+function toLines(text) {
+	const split = text.split("\n");
+	return split.length > 0 && split[split.length - 1] === "" ? split.slice(0, -1) : split;
+}
+/**
+* Render one change as removed-then-added rows, hunked by common prefix and
+* suffix. A null before-image (file create) renders as pure additions. The
+* budget caps emitted rows and reports the cut, so a whole-file overwrite
+* never floods the transcript.
+* @param oldText - prior content, or null for a create.
+* @param newText - content after the change.
+* @param budget - maximum rows to emit.
+* @returns the bounded rows and whether they were cut.
+*/
+function diffRows(oldText, newText, budget) {
+	const oldLines = oldText === null ? [] : toLines(oldText);
+	const newLines = toLines(newText);
+	let prefix = 0;
+	while (prefix < oldLines.length && prefix < newLines.length && oldLines[prefix] === newLines[prefix]) prefix += 1;
+	let suffix = 0;
+	while (suffix < oldLines.length - prefix && suffix < newLines.length - prefix && oldLines[oldLines.length - 1 - suffix] === newLines[newLines.length - 1 - suffix]) suffix += 1;
+	const removed = oldLines.slice(prefix, oldLines.length - suffix);
+	const added = newLines.slice(prefix, newLines.length - suffix);
+	const rows = [...removed.map((text) => ({
+		mark: "-",
+		text: clipLine(text)
+	})), ...added.map((text) => ({
+		mark: "+",
+		text: clipLine(text)
+	}))];
+	if (rows.length <= budget) return {
+		lines: rows,
+		truncated: false
+	};
+	return {
+		lines: rows.slice(0, budget),
+		truncated: true
+	};
+}
+/** Whether `value` is a valid upstream FileDiff (defensive narrowing). */
+function isFileDiff(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+	const { path, oldText, newText } = value;
+	return typeof path === "string" && (oldText === null || typeof oldText === "string") && typeof newText === "string";
+}
+/** Whether `value` is a valid read-window line (defensive narrowing). */
+function isReadLine(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+	const { number, text } = value;
+	return typeof number === "number" && Number.isInteger(number) && number >= 1 && typeof text === "string";
+}
+/** Whether `value` is a valid web source (defensive narrowing). */
+function isWebSource(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+	const { url, title, snippet } = value;
+	return typeof url === "string" && (title === void 0 || typeof title === "string") && (snippet === void 0 || typeof snippet === "string");
+}
+/**
+* Narrow the opaque `tool/result.meta` into one bounded expansion payload,
+* mirroring the upstream presenters' degradation ladder: diffs (write/edit),
+* read windows (read), sources (web_search), fetch summaries (web_fetch), and
+* the bounded raw result text as the universal fallback.
+* @param meta - the persisted presentation metadata, when the tool attached one.
+* @param rawText - the joined text blocks of the result message.
+* @returns the expansion payload, or undefined when nothing renderable exists.
+*/
+function toolResultDetail(meta, rawText) {
+	if (typeof meta === "object" && meta !== null && !Array.isArray(meta)) {
+		const record = meta;
+		const diffs = record["diffs"];
+		if (Array.isArray(diffs) && diffs.length > 0 && diffs.every(isFileDiff)) {
+			const budget = Math.max(8, Math.floor(MAX_DIFF_LINES / diffs.length));
+			return {
+				kind: "diff",
+				diffs: diffs.map((diff) => ({
+					path: diff.path,
+					...diffRows(diff.oldText, diff.newText, budget)
+				}))
+			};
+		}
+		const { path, offset, lines, totalLines } = record;
+		if (typeof path === "string" && Number.isInteger(offset) && offset >= 1 && Number.isInteger(totalLines) && totalLines >= 0 && Array.isArray(lines) && lines.every(isReadLine)) {
+			const window = lines;
+			const truncated = window.length > MAX_READ_LINES;
+			return {
+				kind: "read",
+				path,
+				offset,
+				lines: (truncated ? window.slice(0, MAX_READ_LINES) : window).map((line) => ({
+					number: line.number,
+					text: clipLine(line.text)
+				})),
+				totalLines,
+				truncated
+			};
+		}
+		const sources = record["sources"];
+		if (Array.isArray(sources) && sources.every(isWebSource)) {
+			const truncated = sources.length > MAX_SOURCES;
+			return {
+				kind: "web-search",
+				sources: (truncated ? sources.slice(0, MAX_SOURCES) : sources).map((source) => ({
+					url: source.url,
+					title: typeof source.title === "string" ? source.title : void 0,
+					snippet: typeof source.snippet === "string" ? clipLine(source.snippet) : ""
+				})),
+				truncated
+			};
+		}
+		const { url, statusCode } = record;
+		if (typeof url === "string" && typeof statusCode === "number") return {
+			kind: "web-fetch",
+			url,
+			statusCode: Math.trunc(statusCode)
+		};
+	}
+	if (rawText === "") return void 0;
+	const truncated = rawText.length > MAX_RAW_CHARS;
+	return {
+		kind: "raw",
+		text: truncated ? rawText.slice(0, MAX_RAW_CHARS) : rawText,
+		truncated
+	};
+}
+//#endregion
+//#region src/render/projection.ts
+/**
+* Pure session-event-to-view projection for the TUI transcript: one reducer
+* over {@link SessionEvent}s producing the ordered entries the renderer draws.
+* Rendering never reads the session directly — this module owns the view
+* model, so tests drive it with plain event arrays.
+*
+* @module @deepseek-ai/dsh-tui/render/projection
+*/
+/** In-flight UI buffers are tails; the assembled assistant message is authoritative. */
+const MAX_STREAMING_CHARS = 65536;
+/** Append one delta without retaining an unbounded duplicate of the live reply. */
+function appendStreamingTail(current, delta) {
+	const next = current + delta;
+	return next.length <= MAX_STREAMING_CHARS ? next : next.slice(-65536);
+}
+/** Join the text blocks of a content list; non-text blocks contribute nothing. */
+function textOf(content) {
+	return content.filter((block) => block.type === "text").map((block) => block.text).join("");
+}
+/** Join the reasoning blocks of a content list; non-reasoning blocks contribute nothing. */
+function reasoningOf(content) {
+	return content.filter((block) => block.type === "reasoning").map((block) => block.text).join("");
+}
+/** A fresh, empty transcript view. */
+function createTranscriptView() {
+	return {
+		entries: [],
+		streaming: "",
+		streamingReasoning: "",
+		todos: [],
+		busy: false,
+		busySince: 0,
+		model: "",
+		plan: false,
+		permission: "",
+		title: "",
+		sandbox: "",
+		goal: void 0,
+		stats: {
+			turns: 0,
+			steps: 0,
+			llmMs: 0,
+			toolMs: 0,
+			usage: {
+				inputTokens: 0,
+				outputTokens: 0,
+				cacheReadTokens: 0
+			},
+			lastPromptTokens: 0,
+			contextWindow: 0,
+			ttftMs: 0,
+			ttftSteps: 0,
+			decodeMs: 0,
+			decodeTokens: 0
+		},
+		anchors: {
+			stepStart: /* @__PURE__ */ new Map(),
+			toolStart: /* @__PURE__ */ new Map(),
+			firstChunkAt: /* @__PURE__ */ new Map(),
+			compactionTokens: /* @__PURE__ */ new Map(),
+			lastPruneTokens: 0,
+			turnFiles: /* @__PURE__ */ new Map()
+		}
+	};
+}
+/**
+* Fold one session event into an updated view (copy-on-write).
+* @param view - the view before the event.
+* @param event - one durable session event from `session/event` or the log.
+* @returns the view after the event; the input view is never mutated.
+*/
+function projectEvent(view, event) {
+	switch (event.type) {
+		case "user/message": {
+			const message = event.data;
+			if (message.source.kind === "user") return {
+				...view,
+				entries: [...view.entries, {
+					kind: "user",
+					text: textOf(message.content),
+					notice: false
+				}]
+			};
+			const notice = message.source.kind === "plugin" && message.source.form === "notice" ? message.source.summary : message.source.kind;
+			return {
+				...view,
+				entries: [...view.entries, {
+					kind: "user",
+					text: boundContextSummary(notice),
+					notice: true
+				}]
+			};
+		}
+		case "assistant/chunk": {
+			const chunk = event.data.chunk;
+			const key = `${event.data.turn}:${event.data.step}`;
+			const delta = chunk.type === "text-delta" || chunk.type === "reasoning-delta" ? chunk.text : "";
+			let stats = view.stats;
+			if (delta !== "" && !view.anchors.firstChunkAt.has(key)) {
+				view.anchors.firstChunkAt.set(key, event.time);
+				const started = view.anchors.stepStart.get(key);
+				if (started !== void 0) stats = {
+					...stats,
+					ttftMs: stats.ttftMs + Math.max(0, event.time - started),
+					ttftSteps: stats.ttftSteps + 1
+				};
+			}
+			if (chunk.type === "text-delta") return {
+				...view,
+				streaming: appendStreamingTail(view.streaming, chunk.text),
+				stats
+			};
+			if (chunk.type === "reasoning-delta") return {
+				...view,
+				streamingReasoning: appendStreamingTail(view.streamingReasoning, chunk.text),
+				stats
+			};
+			return view;
+		}
+		case "assistant/message": {
+			const key = `${event.data.turn}:${event.data.step}`;
+			const started = view.anchors.stepStart.get(key);
+			view.anchors.stepStart.delete(key);
+			const firstChunk = view.anchors.firstChunkAt.get(key);
+			view.anchors.firstChunkAt.delete(key);
+			const usage = event.data.usage;
+			const totals = view.stats.usage;
+			return {
+				...view,
+				streaming: "",
+				streamingReasoning: "",
+				entries: [...view.entries, {
+					kind: "assistant",
+					text: textOf(event.data.message.content),
+					reasoning: reasoningOf(event.data.message.content)
+				}],
+				stats: {
+					...view.stats,
+					llmMs: view.stats.llmMs + (started === void 0 ? 0 : Math.max(0, event.time - started)),
+					usage: usage === void 0 ? totals : {
+						inputTokens: totals.inputTokens + usage.inputTokens + (usage.cacheReadTokens ?? 0) + (usage.cacheWriteTokens ?? 0),
+						outputTokens: totals.outputTokens + usage.outputTokens,
+						cacheReadTokens: totals.cacheReadTokens + (usage.cacheReadTokens ?? 0)
+					},
+					lastPromptTokens: usage === void 0 ? view.stats.lastPromptTokens : usage.inputTokens + (usage.cacheReadTokens ?? 0) + (usage.cacheWriteTokens ?? 0),
+					decodeMs: view.stats.decodeMs + (firstChunk === void 0 ? 0 : Math.max(0, event.time - firstChunk)),
+					decodeTokens: view.stats.decodeTokens + (firstChunk === void 0 || usage === void 0 ? 0 : usage.outputTokens)
+				}
+			};
+		}
+		case "tool/call": {
+			const data = event.data;
+			view.anchors.toolStart.set(data.callId, event.time);
+			return {
+				...view,
+				entries: [...view.entries, {
+					kind: "tool",
+					callId: data.callId,
+					name: data.name,
+					arguments: data.arguments,
+					preview: toolArgumentsPreview(data.arguments, data.name),
+					state: "running",
+					summary: "",
+					detail: void 0
+				}]
+			};
+		}
+		case "tool/result": {
+			const block = event.data.message.content[0];
+			const started = view.anchors.toolStart.get(block.toolCallId);
+			view.anchors.toolStart.delete(block.toolCallId);
+			const rawText = textOf(block.content);
+			const summary = boundContextSummary(rawText);
+			const detail = toolResultDetail(event.data.meta, rawText);
+			if (detail?.kind === "diff") {
+				const set = view.anchors.turnFiles.get(event.data.turn) ?? /* @__PURE__ */ new Set();
+				for (const diff of detail.diffs) set.add(diff.path);
+				view.anchors.turnFiles.set(event.data.turn, set);
+			}
+			const entries = view.entries.map((entry) => {
+				if (entry.kind !== "tool" || entry.callId !== block.toolCallId) return entry;
+				return {
+					...entry,
+					state: block.isError === true ? "error" : "done",
+					summary,
+					detail
+				};
+			});
+			return {
+				...view,
+				entries,
+				stats: {
+					...view.stats,
+					toolMs: view.stats.toolMs + (started === void 0 ? 0 : Math.max(0, event.time - started))
+				}
+			};
+		}
+		case "todo/write": return {
+			...view,
+			todos: event.data.todos
+		};
+		case "turn/start": return {
+			...view,
+			busy: true,
+			busySince: view.busy ? view.busySince : event.time,
+			todos: [],
+			stats: {
+				...view.stats,
+				turns: view.stats.turns + 1
+			}
+		};
+		case "step/start":
+			view.anchors.stepStart.set(`${event.data.turn}:${event.data.step}`, event.time);
+			return {
+				...view,
+				stats: {
+					...view.stats,
+					steps: view.stats.steps + 1
+				}
+			};
+		case "turn/end": {
+			const reason = event.data.reason;
+			const appended = [];
+			if (reason.kind === "error") appended.push({
+				kind: "error",
+				text: `${reason.error.code}: ${reason.error.message}`
+			});
+			else {
+				const marker = reason.kind === "aborted" ? reason.reason.kind === "user" ? "turn cancelled by the user" : `turn cancelled (${reason.reason.kind})` : reason.kind === "max-tokens" ? "turn hit the output-token ceiling (max-tokens)" : reason.kind === "blocked" ? "turn ended blocked" : reason.kind === "interrupted" ? "turn was interrupted by a restart" : void 0;
+				if (marker !== void 0) appended.push({
+					kind: "turn-marker",
+					text: marker
+				});
+			}
+			const files = view.anchors.turnFiles.get(event.data.turn);
+			view.anchors.turnFiles.delete(event.data.turn);
+			if (files !== void 0 && files.size > 0) appended.push({
+				kind: "files",
+				paths: [...files].slice(0, 12)
+			});
+			if (appended.length === 0) return {
+				...view,
+				busy: false,
+				busySince: 0
+			};
+			return {
+				...view,
+				busy: false,
+				busySince: 0,
+				entries: [...view.entries, ...appended]
+			};
+		}
+		case "llm/retry": {
+			const data = event.data;
+			return {
+				...view,
+				entries: [...view.entries, {
+					kind: "retry",
+					retryId: data.retryId,
+					attempt: data.retry,
+					max: "maxRetries" in data ? data.maxRetries : data.retry,
+					code: data.failure.code,
+					delayMs: data.delayMs,
+					state: "running"
+				}]
+			};
+		}
+		case "llm/retry-started": {
+			const data = event.data;
+			const entries = view.entries.map((entry) => {
+				if (entry.kind !== "retry" || entry.retryId !== data.retryId) return entry;
+				return {
+					...entry,
+					state: "done"
+				};
+			});
+			return {
+				...view,
+				entries
+			};
+		}
+		case "sandbox/mode": return {
+			...view,
+			sandbox: event.data.mode
+		};
+		case "goal/change": {
+			const data = event.data;
+			const clip = (text) => text.length > 60 ? `${text.slice(0, 59)}…` : text;
+			if (data.operation === "clear") return {
+				...view,
+				goal: void 0,
+				entries: [...view.entries, {
+					kind: "turn-marker",
+					text: "◎ goal cleared"
+				}]
+			};
+			const goal = {
+				objective: data.goal.objective,
+				phase: data.goal.phase,
+				rounds: data.roundsStarted,
+				max: data.goal.maxGoalRounds,
+				blocked: data.goal.blockedReason?.message ?? ""
+			};
+			const line = data.operation === "create" ? `◎ goal: ${clip(data.goal.objective)}` : data.operation === "complete" ? "◎ goal complete" : data.operation === "pause" ? "◎ goal paused" : data.operation === "resume" ? "◎ goal resumed" : data.operation === "block" ? `◎ goal blocked: ${clip(goal.blocked)}` : void 0;
+			return {
+				...view,
+				goal,
+				entries: line === void 0 ? view.entries : [...view.entries, {
+					kind: "turn-marker",
+					text: line
+				}]
+			};
+		}
+		case "session/title": return {
+			...view,
+			title: event.data.title
+		};
+		case "compaction/summary":
+			view.anchors.compactionTokens.set(event.data.compactionId, event.data.shadowedTokenCount);
+			return view;
+		case "compaction/prune": return {
+			...view,
+			anchors: {
+				...view.anchors,
+				lastPruneTokens: event.data.shadowedTokenCount
+			}
+		};
+		case "compaction/end": {
+			const ok = event.data.error === void 0;
+			const tokens = view.anchors.compactionTokens.get(event.data.compactionId) ?? view.anchors.lastPruneTokens;
+			view.anchors.compactionTokens.delete(event.data.compactionId);
+			return {
+				...view,
+				entries: [...view.entries, {
+					kind: "compaction",
+					ok,
+					tokens,
+					error: event.data.error ?? ""
+				}]
+			};
+		}
+		case "request/context": return {
+			...view,
+			stats: {
+				...view.stats,
+				contextWindow: event.data.contextWindow ?? view.stats.contextWindow
+			}
+		};
+		case "request/header": {
+			const config = event.data.header.config;
+			return {
+				...view,
+				model: `${config.provider}/${config.model}`
+			};
+		}
+		case "plan/mode": return {
+			...view,
+			plan: event.data.active
+		};
+		case "permission/preset": return {
+			...view,
+			permission: event.data.preset
+		};
+		case "command/run": {
+			const data = event.data;
+			return {
+				...view,
+				entries: [...view.entries, {
+					kind: "command",
+					commandId: data.commandId,
+					name: data.name,
+					args: data.args ?? "",
+					state: "running",
+					summary: ""
+				}]
+			};
+		}
+		case "command/done": {
+			const data = event.data;
+			const entries = view.entries.map((entry) => {
+				if (entry.kind !== "command" || entry.commandId !== data.commandId) return entry;
+				return {
+					...entry,
+					state: data.kind === "success" ? "done" : "error",
+					summary: boundContextSummary(data.text ?? "")
+				};
+			});
+			return {
+				...view,
+				entries
+			};
+		}
+		default: return view;
+	}
+}
+/**
+* Fold a replayed event history into one view.
+* @param events - events in `seq` order.
+* @returns the folded view.
+*/
+function projectEvents(events) {
+	return events.reduce(projectEvent, createTranscriptView());
+}
+/**
+* How many leading transcript entries can never change again: only a
+* `running` tool or retry can still mutate in place — everything before the
+* first one (including a completed tail: later events only APPEND new rows)
+* is final. The renderer currently draws the whole transcript dynamically
+* (a `<Static>` flush proved unstable with CJK wrapping on real terminals);
+* this boundary stays as the append-only contract for when flushing is
+* reintroduced.
+* @param entries - the view's transcript entries in order.
+* @returns the count of entries safe to flush (0 for an empty transcript).
+*/
+function settledEntryCount(entries) {
+	for (let index = 0; index < entries.length; index++) {
+		const entry = entries[index];
+		if (entry.kind === "tool" && entry.state === "running") return index;
+		if (entry.kind === "retry" && entry.state === "running") return index;
+	}
+	return entries.length;
 }
-/** Paint failures and error entries. */
-function error(text) {
-	return chalk.rgb(...TUI_RGB.error)(text);
+//#endregion
+//#region src/render/markdown.ts
+/** Plain segment helper. */
+function seg(text, style = "plain") {
+	return {
+		text,
+		style
+	};
+}
+/** Visible width of a run in columns (CJK counts double). */
+function visibleColumns(text) {
+	let columns = 0;
+	for (const char of text) {
+		const code = char.codePointAt(0) ?? 0;
+		columns += code > 11903 ? 2 : 1;
+	}
+	return columns;
+}
+/** Walk a segment list, breaking it into lines that fit `width` columns. */
+function wrapSegments(segments, width) {
+	const lines = [];
+	let current = [];
+	let used = 0;
+	for (const segment of segments) {
+		const words = segment.text.split(/( )/u);
+		for (const word of words) {
+			if (word === "") continue;
+			const columns = visibleColumns(word);
+			if (used + columns > width && used > 0) {
+				lines.push(current);
+				current = [];
+				used = 0;
+			}
+			current.push({
+				text: word,
+				style: segment.style
+			});
+			used += columns;
+		}
+	}
+	if (current.length > 0) lines.push(current);
+	return lines.map((line) => {
+		const last = line[line.length - 1];
+		if (last !== void 0 && last.text === " " && line.length > 1) return line.slice(0, -1);
+		return line;
+	});
+}
+/** Join adjacent same-style runs so the app renders fewer elements. */
+function merge(segments) {
+	const merged = [];
+	for (const segment of segments) {
+		const last = merged[merged.length - 1];
+		if (last !== void 0 && last.style === segment.style) merged[merged.length - 1] = {
+			text: last.text + segment.text,
+			style: last.style
+		};
+		else merged.push({ ...segment });
+	}
+	return merged;
+}
+/**
+* Parse inline markdown in one line of text. Link destinations render as a
+* dim `(url)` suffix — the visible text keeps the accent.
+*/
+function parseInline(text) {
+	const runs = [];
+	let rest = text;
+	while (rest !== "") {
+		const code = /^`([^`]+)`/u.exec(rest);
+		if (code !== null) {
+			runs.push({
+				text: code[1] ?? "",
+				style: "code"
+			});
+			rest = rest.slice(code[0].length);
+			continue;
+		}
+		const boldItalic = /^\*\*\*([^*]+)\*\*\*/u.exec(rest);
+		if (boldItalic !== null) {
+			runs.push({
+				text: boldItalic[1] ?? "",
+				style: "boldItalic"
+			});
+			rest = rest.slice(boldItalic[0].length);
+			continue;
+		}
+		const bold = /^\*\*([^*]+)\*\*/u.exec(rest);
+		if (bold !== null) {
+			runs.push({
+				text: bold[1] ?? "",
+				style: "bold"
+			});
+			rest = rest.slice(bold[0].length);
+			continue;
+		}
+		const italic = /^\*([^*]+)\*/u.exec(rest) ?? /^_([^_]+)_/u.exec(rest);
+		if (italic !== null) {
+			runs.push({
+				text: italic[1] ?? "",
+				style: "italic"
+			});
+			rest = rest.slice(italic[0].length);
+			continue;
+		}
+		const strike = /^~~([^~]+)~~/u.exec(rest);
+		if (strike !== null) {
+			runs.push({
+				text: strike[1] ?? "",
+				style: "strike"
+			});
+			rest = rest.slice(strike[0].length);
+			continue;
+		}
+		const link = /^\[([^\]]+)\]\(([^)\s]+)\)/u.exec(rest);
+		if (link !== null) {
+			const label = link[1] ?? "";
+			const url = link[2] ?? "";
+			runs.push({
+				text: label,
+				style: "accent"
+			});
+			runs.push({
+				text: ` (${url})`,
+				style: "dim"
+			});
+			rest = rest.slice(link[0].length);
+			continue;
+		}
+		const next = rest.search(/[*_`~[]/u);
+		if (next === -1) {
+			runs.push({
+				text: rest,
+				style: "plain"
+			});
+			break;
+		}
+		if (next > 0) {
+			runs.push({
+				text: rest.slice(0, next),
+				style: "plain"
+			});
+			rest = rest.slice(next);
+			continue;
+		}
+		runs.push({
+			text: rest.slice(0, 1),
+			style: "plain"
+		});
+		rest = rest.slice(1);
+	}
+	return runs;
 }
-/** Paint warnings. */
-function warn(text) {
-	return chalk.rgb(...TUI_RGB.warn)(text);
+const HEADING = /^(#{1,6})\s+(.*)$/u;
+const FENCE = /^```([^\s`]*)\s*$/u;
+const RULE = /^(?:---|\*\*\*|___)\s*$/u;
+const QUOTE = /^>\s?(.*)$/u;
+const UNORDERED = /^\s*[-*+]\s+(.*)$/u;
+const ORDERED = /^\s*(\d+)[.)]\s+(.*)$/u;
+/** Render markdown text into styled lines of at most `width` columns. */
+function renderMarkdown(text, width) {
+	const lines = [];
+	const push = (segments) => {
+		for (const wrapped of wrapSegments(segments, Math.max(10, width))) lines.push({ segments: merge(wrapped) });
+	};
+	const source = text.replaceAll("\r", "").split("\n");
+	let index = 0;
+	while (index < source.length) {
+		const line = source[index] ?? "";
+		index += 1;
+		const fence = FENCE.exec(line);
+		if (fence !== null) {
+			const language = fence[1] ?? "";
+			if (language !== "") push([seg(`  ${language}`, "dim")]);
+			while (index < source.length && !FENCE.test(source[index] ?? "")) {
+				push([seg(`  ${source[index] ?? ""}`, "code")]);
+				index += 1;
+			}
+			index += 1;
+			continue;
+		}
+		if (line.trim() === "") continue;
+		if (RULE.test(line.trim())) {
+			push([seg(`  ${"─".repeat(Math.max(1, Math.floor(width / 4)))}`, "dim")]);
+			continue;
+		}
+		const heading = HEADING.exec(line);
+		if (heading !== null) {
+			push([seg(heading[2] ?? "", "accent")]);
+			continue;
+		}
+		const quote = QUOTE.exec(line);
+		if (quote !== null) {
+			push([seg("  │ ", "accent"), ...parseInline(quote[1] ?? "").map((run) => seg(run.text, run.style === "plain" ? "dim" : run.style))]);
+			continue;
+		}
+		const ordered = ORDERED.exec(line);
+		if (ordered !== null) {
+			push([seg(`  ${ordered[1] ?? ""}. `, "accent"), ...parseInline(ordered[2] ?? "").map((run) => seg(run.text, run.style))]);
+			continue;
+		}
+		const unordered = UNORDERED.exec(line);
+		if (unordered !== null) {
+			push([seg("  • ", "accent"), ...parseInline(unordered[1] ?? "").map((run) => seg(run.text, run.style))]);
+			continue;
+		}
+		const paragraph = [line];
+		while (index < source.length && (source[index] ?? "").trim() !== "") {
+			paragraph.push(source[index] ?? "");
+			index += 1;
+		}
+		const runs = [];
+		for (let at = 0; at < paragraph.length; at += 1) {
+			if (at > 0) runs.push({
+				text: " ",
+				style: "plain"
+			});
+			runs.push(...parseInline(paragraph[at] ?? ""));
+		}
+		push(runs.map((run) => seg(run.text, run.style)));
+	}
+	return lines;
 }
 //#endregion
-//#region src/whale-glyph.ts
-/** Half-block whale glyph rows; render with the brand color. */
-const WHALE_GLYPH = [
-	"    ▄▄▄▄▄▄▄▄█    ▄█▄     ▄",
-	" ▄▄██████████▄▄  ▀███▄████",
-	"▄███████████████▄  ███▀▀▀ ",
-	"██     ▀▀█████▄▀██████    ",
-	"██▄       ▀████▄▄████     ",
-	" ██▄        ▀██████▀      ",
-	"  ▀██▄▄  ██▄  ▀███▄▄      ",
-	"     ▀▀███████▀▀ ▀▀▀      "
+//#region src/render/animations.ts
+/**
+* Terminal animation frame tables derived from the web design language:
+* the StateDot "ongoing" pixel chase (3×3 ring, 125ms flat-hold brightness
+* steps, 1s cycle) becomes the single-cell stepped pulse below, and the
+* streaming caret blink is the Claude-Code convention. Pure functions only —
+* the Ink layer owns timers and colors.
+*
+* @module @deepseek-ai/dsh-code/render/animations
+*/
+/** Single-cell stepped pulse: flat holds mirroring the web's 125ms keyframes. */
+const PULSE_FRAMES = [
+	"█",
+	"█",
+	"▆",
+	"▃",
+	"▁",
+	"▃",
+	"▆",
+	"█"
 ];
+/** Pulse frame for a monotonic tick. */
+function pulseFrame(tick) {
+	return PULSE_FRAMES[tick % PULSE_FRAMES.length] ?? PULSE_FRAMES[0];
+}
+/** Caret visibility: half the ticks on, half off (530ms blink). */
+function caretVisible(tick) {
+	return tick % 2 === 0;
+}
 //#endregion
 //#region src/render/status.ts
 /**
@@ -121,6 +996,17 @@ function formatDuration(ms) {
 	return `${Math.floor(whole / 60)}m${whole % 60}s`;
 }
 /**
+* Compact decode rate: one decimal under a hundred, whole below a thousand,
+* then thousands (15.3 / 124 / 1.2K).
+* @param n - tokens per second.
+* @returns display string.
+*/
+function formatRate(n) {
+	if (n < 100) return String(Math.round(n * 10) / 10);
+	if (n < 1e3) return String(Math.round(n));
+	return `${Math.round(n / 100) / 10}K`;
+}
+/**
 * Cache-hit share of billed prompt-side input.
 * @param usage - cumulative token totals.
 * @returns rounded integer percent, or null when no input was billed.
@@ -139,22 +1025,31 @@ function buildStatusGroups(facts, stats) {
 	const identity = [
 		facts.model,
 		facts.cwd,
-		facts.branch === "" ? void 0 : `⑂ ${facts.branch}`
+		facts.branch === "" ? void 0 : `⑂ ${facts.branch}`,
+		facts.plan ? "⧉ plan" : void 0
 	].filter((part) => part !== void 0 && part !== "");
 	if (identity.length > 0) groups.push(identity.join(" · "));
 	if (stats.turns > 0 || stats.steps > 0) {
 		groups.push(`T${stats.turns} · S${stats.steps}`);
 		const durations = [];
 		if (stats.llmMs > 0) durations.push(`llm ${formatDuration(stats.llmMs)}`);
+		if (stats.ttftSteps > 0) durations.push(`ttft ${formatDuration(stats.ttftMs / stats.ttftSteps)}`);
+		if (stats.decodeMs > 0 && stats.decodeTokens > 0) durations.push(`${formatRate(stats.decodeTokens / (stats.decodeMs / 1e3))} tok/s`);
 		if (stats.toolMs > 0) durations.push(`tool ${formatDuration(stats.toolMs)}`);
 		if (durations.length > 0) groups.push(durations.join(" · "));
 	}
 	const cacheHit = cacheHitPercent(stats.usage);
 	if (stats.usage.inputTokens > 0 || stats.usage.outputTokens > 0) {
 		if (cacheHit !== null) groups.push(`cache ${cacheHit}%`);
+		if (stats.contextWindow > 0 && stats.lastPromptTokens > 0) groups.push(`ctx ${Math.min(999, Math.round(stats.lastPromptTokens / stats.contextWindow * 100))}%`);
 		groups.push(`↑${formatTokens(stats.usage.inputTokens)} ↓${formatTokens(stats.usage.outputTokens)}`);
 	}
-	if (facts.sessionId !== "") groups.push(facts.sessionId);
+	const label = facts.title !== void 0 && facts.title !== "" ? facts.title.length > 48 ? `${facts.title.slice(0, 47)}…` : facts.title : facts.sessionId;
+	if (label !== "") groups.push(label);
+	if (facts.permission !== void 0 && facts.permission !== "") groups.push(facts.permission);
+	const sandbox = facts.sandbox ?? "";
+	if (sandbox !== "" && sandbox.toLowerCase() !== facts.permission.toLowerCase()) groups.push(`sandbox ${sandbox}`);
+	if (facts.goal !== void 0) groups.push(facts.goal.phase === "active" ? `◎ r${facts.goal.rounds}/${facts.goal.max}` : `◎ ${facts.goal.phase}`);
 	return groups;
 }
 //#endregion
@@ -181,6 +1076,244 @@ const CONTROL_ESCAPE = /[\u0000-\u0008\u000b-\u001f\u007f-\u009f]/gu;
 function displayText(text) {
 	return text.replace(CONTROL_ESCAPE, (char) => `\\x${char.charCodeAt(0).toString(16).padStart(2, "0")}`);
 }
+/** Terminal-cell width matching the TUI's existing CJK-aware wrapping rule. */
+function cellWidth(text) {
+	let columns = 0;
+	for (const char of text) columns += (char.codePointAt(0) ?? 0) > 11903 ? 2 : 1;
+	return columns;
+}
+/** Read one Unicode character immediately before `end`. */
+function previousCharacter(text, end) {
+	const last = text.charCodeAt(end - 1);
+	if (last >= 56320 && last <= 57343 && end >= 2) {
+		const first = text.charCodeAt(end - 2);
+		if (first >= 55296 && first <= 56319) return {
+			char: text.slice(end - 2, end),
+			start: end - 2
+		};
+	}
+	return {
+		char: text.slice(end - 1, end),
+		start: end - 1
+	};
+}
+/**
+* Keep only the newest display-safe text that fits a terminal rectangle.
+* The scan walks backward and stops as soon as the suffix is full, so a long
+* reasoning stream does not rescan its entire accumulated prefix per chunk.
+* Explicit newlines and terminal wrapping both consume rows.
+* @param text - raw externally sourced text.
+* @param columns - available terminal columns.
+* @param rows - available terminal rows.
+* @returns a sanitized bounded suffix and whether an earlier prefix was cut.
+*/
+function displayTail(text, columns, rows) {
+	const columnLimit = Math.max(1, Math.floor(columns));
+	const rowLimit = Math.max(1, Math.floor(rows));
+	const reversed = [];
+	let row = 1;
+	let used = 0;
+	let end = text.length;
+	while (end > 0) {
+		const previous = previousCharacter(text, end);
+		if (previous.char === "\n") {
+			if (row >= rowLimit) break;
+			reversed.push("\n");
+			row += 1;
+			used = 0;
+			end = previous.start;
+			continue;
+		}
+		const safe = displayText(previous.char);
+		const width = cellWidth(safe);
+		if (used > 0 && used + width > columnLimit) {
+			if (row >= rowLimit) break;
+			reversed.push("\n");
+			row += 1;
+			used = 0;
+		}
+		const extraRows = Math.floor(Math.max(0, width - 1) / columnLimit);
+		if (row + extraRows > rowLimit) break;
+		row += extraRows;
+		reversed.push(safe);
+		used = extraRows === 0 ? used + width : width - extraRows * columnLimit;
+		end = previous.start;
+	}
+	return {
+		text: reversed.reverse().join(""),
+		truncated: end > 0
+	};
+}
+//#endregion
+//#region src/render/inspector.ts
+/** The three-row read-only composer frame plus its one-row status footer. */
+const INSPECTOR_CHROME_ROWS = 4;
+/**
+* Keep the inspector plus its persistent status/composer chrome below
+* `stdout.rows`: at equality Ink clears the terminal and rewrites all
+* accumulated `<Static>` output on every frame.
+*/
+function panelViewport(columns, rows) {
+	const safeColumns = Math.max(1, Math.floor(columns));
+	const safeRows = Math.max(1, Math.floor(rows));
+	const maxHeight = Math.max(0, Math.min(safeRows - 2 - INSPECTOR_CHROME_ROWS, Math.floor(safeRows / 2)));
+	const compact = maxHeight < 5 || safeColumns < 8;
+	return {
+		maxHeight,
+		bodyRows: compact ? 0 : maxHeight - 4,
+		contentColumns: compact ? Math.max(1, safeColumns - 1) : Math.max(1, safeColumns - 4),
+		compact
+	};
+}
+/** Backward-compatible name for the Ctrl+O-specific caller and tests. */
+function inspectorViewport(columns, rows) {
+	return panelViewport(columns, rows);
+}
+/** Clamp a first-visible row to the range representable by one viewport. */
+function clampScroll(offset, totalRows, visibleRows) {
+	const last = Math.max(0, Math.max(0, Math.floor(totalRows)) - Math.max(0, Math.floor(visibleRows)));
+	return Math.max(0, Math.min(Math.floor(offset), last));
+}
+/** Move a viewport by a signed row delta without escaping its content. */
+function moveScroll(offset, delta, totalRows, visibleRows) {
+	return clampScroll(offset + delta, totalRows, visibleRows);
+}
+/** Keep one focused row visible while preserving the current window when possible. */
+function revealRow(offset, row, totalRows, visibleRows) {
+	const size = Math.max(1, Math.floor(visibleRows));
+	const target = Math.max(0, Math.min(Math.floor(row), Math.max(0, totalRows - 1)));
+	if (target < offset) return clampScroll(target, totalRows, size);
+	if (target >= offset + size) return clampScroll(target - size + 1, totalRows, size);
+	return clampScroll(offset, totalRows, size);
+}
+/** Center a selected list row where possible, clamped at both ends. */
+function selectionWindow(cursor, totalRows, visibleRows) {
+	return clampScroll(cursor - Math.floor(Math.max(1, visibleRows) / 2), totalRows, visibleRows);
+}
+/** Follow appended history only while the inspector cursor was at the tail. */
+function followInspectorCursor(cursor, previousLength, nextLength) {
+	const nextLast = Math.max(0, nextLength - 1);
+	if (cursor >= Math.max(0, previousLength - 1)) return nextLast;
+	return Math.min(cursor, nextLast);
+}
+//#endregion
+//#region src/render/lines.ts
+/** Construct one segment without leaking mutable objects into cached rows. */
+function lineSegment(text, style = "plain") {
+	return {
+		text,
+		style
+	};
+}
+/** Append a character while merging adjacent runs with the same style. */
+function appendSegment(target, text, style) {
+	const previous = target[target.length - 1];
+	if (previous?.style === style) {
+		target[target.length - 1] = {
+			text: previous.text + text,
+			style
+		};
+		return;
+	}
+	target.push({
+		text,
+		style
+	});
+}
+/**
+* Sanitize and hard-wrap styled content into exact physical rows.
+* Tabs become two visible spaces because terminal tab stops are contextual
+* and therefore cannot participate in a deterministic row budget.
+*/
+function styledLines(segments, columns) {
+	const width = Math.max(1, Math.floor(columns));
+	const lines = [];
+	let current = [];
+	let used = 0;
+	const flush = () => {
+		lines.push({ segments: current });
+		current = [];
+		used = 0;
+	};
+	for (const segment of segments) {
+		const safe = displayText(segment.text).replaceAll("	", "  ").replaceAll("\r", "");
+		for (const char of safe) {
+			if (char === "\n") {
+				flush();
+				continue;
+			}
+			const cells = visibleColumns(char);
+			if (used > 0 && used + cells > width) flush();
+			appendSegment(current, char, segment.style);
+			used += cells;
+		}
+	}
+	if (current.length > 0 || lines.length === 0) flush();
+	return lines;
+}
+/** Plain/dim text convenience over {@link styledLines}. */
+function textLines(text, columns, style = "plain") {
+	return styledLines([lineSegment(text, style)], columns);
+}
+/** Markdown rows re-hardened so a single long word cannot escape the budget. */
+function markdownLines(text, columns) {
+	const width = Math.max(1, Math.floor(columns));
+	return renderMarkdown(displayText(text), Math.max(10, width)).flatMap((line) => styledLines(line.segments.map((segment) => lineSegment(segment.text, segment.style)), width));
+}
+/** Expanded structured tool detail as scrollable, width-safe rows. */
+function toolDetailLines(detail, columns) {
+	switch (detail.kind) {
+		case "diff": return detail.diffs.flatMap((diff) => [...styledLines([
+			lineSegment("  ── ", "dim"),
+			lineSegment(diff.path, "dim"),
+			lineSegment(diff.truncated ? " (diff truncated)" : "", "dim")
+		], columns), ...diff.lines.flatMap((line) => styledLines([lineSegment(`  ${line.mark}${line.text}`, line.mark === "+" ? "success" : line.mark === "-" ? "error" : "dim")], columns))]);
+		case "read": return [...textLines(`  ── ${detail.path} · lines ${detail.offset}-${detail.lines.length > 0 ? detail.lines[detail.lines.length - 1].number : detail.offset - 1} of ${detail.totalLines}${detail.truncated ? " (window truncated)" : ""}`, columns, "dim"), ...detail.lines.flatMap((line) => textLines(`  ${String(line.number).padStart(5, " ")} | ${line.text}`, columns, "dim"))];
+		case "web-search": return [...detail.sources.flatMap((source) => [...styledLines([lineSegment(`  ? ${source.title ?? source.url}`, "brand"), lineSegment(` - ${source.url}`, "dim")], columns), ...source.snippet === "" ? [] : textLines(`    ${source.snippet}`, columns, "dim")]), ...textLines(`  ${detail.sources.length} sources${detail.truncated ? " (capped)" : ""}`, columns, "dim")];
+		case "web-fetch": return textLines(`  ${detail.url} · HTTP ${detail.statusCode}`, columns, "dim");
+		case "raw": return [...textLines(`  ${detail.text}`, columns, "dim"), ...textLines(detail.truncated ? "  … (output truncated)" : "  (end of output)", columns, "dim")];
+		default: return detail;
+	}
+}
+/**
+* Convert one durable transcript entry to its complete scrollable row model.
+* The source entry stays intact; only the caller's visible slice is rendered.
+*/
+function transcriptEntryLines(entry, columns) {
+	const width = Math.max(1, Math.floor(columns));
+	switch (entry.kind) {
+		case "user": return styledLines([lineSegment(entry.notice ? "⤷ " : "❯ ", entry.notice ? "dim" : "brand"), lineSegment(entry.text, entry.notice ? "dim" : "plain")], width);
+		case "assistant": return [...entry.reasoning === "" ? [] : styledLines([lineSegment("  ✻ ", "dimItalic"), lineSegment(entry.reasoning, "dimItalic")], width), ...markdownLines(entry.text, width)];
+		case "tool": {
+			const mark = entry.state === "running" ? "●" : entry.state === "error" ? "⨯" : "⏺";
+			const markStyle = entry.state === "running" ? "brand" : entry.state === "error" ? "error" : "success";
+			return [
+				...styledLines([
+					lineSegment(`${mark} `, markStyle),
+					lineSegment(entry.name, "brand"),
+					lineSegment(entry.preview === "" ? "" : ` ${entry.preview}`, "dim")
+				], width),
+				...entry.summary === "" ? [] : textLines(`  ⎿ ${entry.summary}`, width, entry.state === "error" ? "error" : "dim"),
+				...entry.detail === void 0 ? [] : toolDetailLines(entry.detail, width)
+			];
+		}
+		case "command": {
+			const mark = entry.state === "running" ? "●" : entry.state === "error" ? "⨯" : "⏺";
+			const markStyle = entry.state === "running" ? "brand" : entry.state === "error" ? "error" : "success";
+			return [...styledLines([
+				lineSegment(`${mark} `, markStyle),
+				lineSegment(`/${entry.name}`, "brand"),
+				lineSegment(entry.args === "" ? "" : ` ${entry.args}`, "dim")
+			], width), ...entry.summary === "" ? [] : textLines(`  ⎿ ${entry.summary}`, width, entry.state === "error" ? "error" : "dim")];
+		}
+		case "turn-marker": return textLines(`  ⏹ ${entry.text}`, width, "dim");
+		case "compaction": return textLines(entry.ok ? `  ⧉ compacted ~${formatTokens(entry.tokens)} tokens` : `  ⧉ compaction failed: ${entry.error}`, width, "dim");
+		case "retry": return textLines(`  ↻ retry ${entry.attempt}/${entry.max} · ${entry.code} · ${Math.round(entry.delayMs / 100) / 10}s`, width, entry.state === "running" ? "warn" : "dim");
+		case "files": return entry.paths.length === 0 ? textLines("  ⎄ no changed files", width, "dim") : [...textLines(`  ⎄ ${entry.paths.length} changed file${entry.paths.length === 1 ? "" : "s"}`, width, "dim"), ...entry.paths.flatMap((path) => textLines(`    ${path}`, width, "dim"))];
+		case "error": return textLines(entry.text, width, "error");
+		default: return entry;
+	}
+}
 //#endregion
 //#region src/app.ts
 /**
@@ -198,29 +1331,315 @@ function displayText(text) {
 *
 * @module @deepseek-ai/dsh-code/app
 */
+/** Match Codex's settled-resize window before rebuilding terminal scrollback. */
+const RESIZE_REFLOW_DELAY_MS = 75;
+/** Reset region/style, clear the visible screen and scrollback, then home. */
+const RESIZE_REFLOW_CLEAR = "\x1B[r\x1B[0m\x1B[H\x1B[2J\x1B[3J\x1B[H";
 /** Ink `color` string for one palette triple. */
 function inkColor(triple) {
 	return `rgb(${triple[0]}, ${triple[1]}, ${triple[2]})`;
 }
+/** Truncate text to a visible-column budget, appending … when cut. */
+function truncateColumns(text, max) {
+	let columns = 0;
+	let out = "";
+	for (const char of text) {
+		const width = (char.codePointAt(0) ?? 0) > 11903 ? 2 : 1;
+		if (columns + width > max) return `${out}…`;
+		out += char;
+		columns += width;
+	}
+	return out;
+}
+/** Pad text with spaces to a visible-column target (menu name column). */
+function padColumns(text, width) {
+	return text + " ".repeat(Math.max(0, width - visibleColumns(text)));
+}
+/** Interval-driven frame counter for one self-contained animated leaf. */
+function useFrames(intervalMs) {
+	const [tick, setTick] = useState(0);
+	useEffect(() => {
+		const id = setInterval(() => setTick((current) => current + 1), intervalMs);
+		return () => {
+			clearInterval(id);
+		};
+	}, [intervalMs]);
+	return tick;
+}
+/** Single-cell stepped pulse: the web's 125ms flat-hold brightness steps over 1s. */
+function Pulse() {
+	const tick = useFrames(125);
+	return createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, pulseFrame(tick));
+}
+/** Blinking block caret appended to streaming text. */
+function Caret() {
+	const tick = useFrames(530);
+	return createElement(Text, null, caretVisible(tick) ? "▍" : " ");
+}
+/** Blinking input cursor: inverse block while the caret phase is on. */
+function CursorBlock({ char }) {
+	const tick = useFrames(530);
+	return createElement(Text, { inverse: caretVisible(tick) || void 0 }, char);
+}
+/** Web TurnStatus elapsed format: `45s` under a minute, `2m03s` beyond. */
+function runClock(ms) {
+	const total = Math.max(0, Math.floor(ms / 1e3));
+	const minutes = Math.floor(total / 60);
+	const seconds = total % 60;
+	return minutes > 0 ? `${minutes}m${String(seconds).padStart(2, "0")}s` : `${seconds}s`;
+}
+/**
+* The busy line, web TurnStatus contract: the plain `Deep diving...` label,
+* with the elapsed clock appended only once the turn has clearly been running
+* (15s) — anchored to `turn/start` so a resumed mid-turn keeps the real time.
+*/
+function DeepDivingLine({ since }) {
+	useFrames(1e3);
+	const elapsed = since === 0 ? 0 : Date.now() - since;
+	return createElement(Text, { dimColor: true }, elapsed >= 15e3 ? `Deep diving... ${runClock(elapsed)}` : "Deep diving...");
+}
+/**
+* The streaming buffer rendered with a hard size cap: the live region must
+* ALWAYS fit the terminal, or Ink's erase/rewrite of a dynamic tree taller
+* than the screen freezes (cursor-up past the top, garbage, no scroll). The
+* cap counts explicit newlines and terminal wrapping, slicing from the END so
+* the freshest tokens stay visible while a long reply streams; the complete
+* text lands in the flushed scrollback once the turn assembles it.
+*/
+function StreamTail({ text, dim, maxRows, prefix, children }) {
+	const columns = useStdout().stdout?.columns ?? 80;
+	const safeRows = Math.max(1, maxRows);
+	const contentColumns = Math.max(10, columns - 3 - visibleColumns(prefix ?? ""));
+	const initial = displayTail(text, contentColumns, safeRows);
+	const tail = initial.truncated && safeRows > 1 ? displayTail(text, contentColumns, safeRows - 1) : initial;
+	return createElement(Box, { flexDirection: "column" }, tail.truncated && safeRows > 1 ? createElement(Text, { dimColor: true }, "  …") : void 0, createElement(Text, { dimColor: dim || void 0 }, prefix, tail.text, children));
+}
+/** Ink props for one markdown style class. */
+function segmentProps(style) {
+	switch (style) {
+		case "accent": return {
+			color: inkColor(TUI_RGB.brandBright),
+			bold: void 0,
+			italic: void 0,
+			strikethrough: void 0
+		};
+		case "code": return {
+			color: inkColor(TUI_RGB.code),
+			bold: void 0,
+			italic: void 0,
+			strikethrough: void 0
+		};
+		case "dim": return {
+			color: inkColor(TUI_RGB.dim),
+			bold: void 0,
+			italic: void 0,
+			strikethrough: void 0
+		};
+		case "bold": return {
+			color: void 0,
+			bold: true,
+			italic: void 0,
+			strikethrough: void 0
+		};
+		case "italic": return {
+			color: void 0,
+			bold: void 0,
+			italic: true,
+			strikethrough: void 0
+		};
+		case "boldItalic": return {
+			color: void 0,
+			bold: true,
+			italic: true,
+			strikethrough: void 0
+		};
+		case "strike": return {
+			color: inkColor(TUI_RGB.dim),
+			bold: void 0,
+			italic: void 0,
+			strikethrough: true
+		};
+		default: return {
+			color: void 0,
+			bold: void 0,
+			italic: void 0,
+			strikethrough: void 0
+		};
+	}
+}
+/** Ink props for the richer line model used by bounded scrolling panels. */
+function lineStyleProps(style) {
+	switch (style) {
+		case "brand": return {
+			color: inkColor(TUI_RGB.brandBright),
+			bold: void 0,
+			italic: void 0,
+			strikethrough: void 0,
+			dimColor: void 0
+		};
+		case "success": return {
+			color: inkColor(TUI_RGB.success),
+			bold: void 0,
+			italic: void 0,
+			strikethrough: void 0,
+			dimColor: void 0
+		};
+		case "error": return {
+			color: inkColor(TUI_RGB.error),
+			bold: void 0,
+			italic: void 0,
+			strikethrough: void 0,
+			dimColor: void 0
+		};
+		case "warn": return {
+			color: inkColor(TUI_RGB.warn),
+			bold: void 0,
+			italic: void 0,
+			strikethrough: void 0,
+			dimColor: void 0
+		};
+		case "dimItalic": return {
+			color: void 0,
+			bold: void 0,
+			italic: true,
+			strikethrough: void 0,
+			dimColor: true
+		};
+		default: return {
+			...segmentProps(style),
+			dimColor: void 0
+		};
+	}
+}
+/** Render width-safe rows; every child is exactly one terminal row. */
+function StyledRows({ lines }) {
+	return createElement(Box, { flexDirection: "column" }, ...lines.map((line, index) => createElement(Text, {
+		key: index,
+		wrap: "truncate-end"
+	}, line.segments.length === 0 ? " " : line.segments.map((segment, at) => createElement(Text, {
+		key: at,
+		...lineStyleProps(segment.style)
+	}, segment.text)))));
+}
+/** One settled markdown document rendered as styled lines at the terminal width. */
+function MarkdownBody({ text }) {
+	const columns = useStdout().stdout?.columns ?? 80;
+	const lines = useMemo(() => renderMarkdown(displayText(text), Math.max(20, columns - 2)), [text, columns]);
+	return createElement(Box, { flexDirection: "column" }, ...lines.map((line, index) => createElement(Text, { key: index }, ...line.segments.map((segment, at) => createElement(Text, {
+		key: at,
+		...segmentProps(segment.style)
+	}, segment.text)))));
+}
+/**
+* One expanded tool-card body for the verbose transcript (Ctrl+O): the
+* presentation contract's structured cards — inline diffs, read windows,
+* web sources — rendered as plain terminal rows, degradation-safe against
+* replayed metadata.
+*/
+function ToolDetailBody({ detail }) {
+	switch (detail.kind) {
+		case "diff": return createElement(Box, { flexDirection: "column" }, ...detail.diffs.map((diff, index) => createElement(Box, {
+			key: index,
+			flexDirection: "column"
+		}, createElement(Text, {
+			dimColor: true,
+			wrap: "truncate-end"
+		}, `  ── ${displayText(diff.path)}${diff.truncated ? " (diff truncated)" : ""}`), ...diff.lines.map((line, at) => createElement(Text, {
+			key: at,
+			color: line.mark === "+" ? inkColor(TUI_RGB.success) : line.mark === "-" ? inkColor(TUI_RGB.error) : inkColor(TUI_RGB.dim),
+			wrap: "truncate-end"
+		}, `  ${line.mark}${displayText(line.text)}`)))));
+		case "read": return createElement(Box, { flexDirection: "column" }, createElement(Text, {
+			dimColor: true,
+			wrap: "truncate-end"
+		}, `  ── ${displayText(detail.path)} · lines ${detail.offset}-${detail.lines.length > 0 ? detail.lines[detail.lines.length - 1].number : detail.offset - 1} of ${detail.totalLines}${detail.truncated ? " (window truncated)" : ""}`), ...detail.lines.map((line, at) => createElement(Text, {
+			key: at,
+			dimColor: true,
+			wrap: "truncate-end"
+		}, `  ${String(line.number).padStart(5, " ")} | ${displayText(line.text)}`)));
+		case "web-search": return createElement(Box, { flexDirection: "column" }, ...detail.sources.map((source, at) => createElement(Text, {
+			key: at,
+			wrap: "truncate-end"
+		}, brand(`  ? ${displayText(source.title === void 0 ? source.url : source.title)}`), createElement(Text, { dimColor: true }, dim(` - ${displayText(source.url)}`)))), createElement(Text, { dimColor: true }, dim(`  ${detail.sources.length} sources${detail.truncated ? " (capped)" : ""}`)));
+		case "web-fetch": return createElement(Text, {
+			dimColor: true,
+			wrap: "truncate-end"
+		}, dim(`  ${displayText(detail.url)} · HTTP ${detail.statusCode}`));
+		case "raw": return createElement(Box, { flexDirection: "column" }, ...displayText(detail.text).split("\n").slice(0, 40).map((line, at) => createElement(Text, {
+			key: at,
+			dimColor: true,
+			wrap: "truncate-end"
+		}, `  ${line}`)), createElement(Text, { dimColor: true }, detail.truncated ? "  … (output truncated)" : "  (end of output)"));
+		default: return assertNever(detail, "tool detail kind");
+	}
+}
 /** One settled transcript row. */
-function EntryLine({ entry }) {
+function EntryLine({ entry, showReasoning, verbose }) {
 	switch (entry.kind) {
-		case "user": return createElement(Text, null, brand("❯ "), displayText(entry.text));
-		case "assistant": return createElement(Text, null, displayText(entry.text));
+		case "user": return entry.notice ? createElement(Text, { dimColor: true }, `⤷ ${displayText(entry.text)}`) : createElement(Text, null, brand("❯ "), displayText(entry.text));
+		case "assistant": return createElement(Box, { flexDirection: "column" }, entry.reasoning === "" ? void 0 : showReasoning ? createElement(Text, {
+			dimColor: true,
+			italic: true
+		}, `  ✻ ${displayText(entry.reasoning)}`) : createElement(Text, { dimColor: true }, `  ✻ Thinking (${entry.reasoning.length} chars, Ctrl+R to expand)`), createElement(MarkdownBody, { text: entry.text }));
 		case "tool": {
-			const mark = entry.state === "running" ? createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, "◐") : entry.state === "error" ? createElement(Text, { color: inkColor(TUI_RGB.error) }, "⨯") : createElement(Text, { color: inkColor(TUI_RGB.success) }, "⏺");
-			return createElement(Text, null, mark, " ", brand(entry.name), entry.summary === "" ? "" : ` ${dim(displayText(entry.summary))}`);
+			const mark = entry.state === "running" ? createElement(Pulse) : entry.state === "error" ? createElement(Text, { color: inkColor(TUI_RGB.error) }, "⨯") : createElement(Text, { color: inkColor(TUI_RGB.success) }, "⏺");
+			return createElement(Box, { flexDirection: "column" }, createElement(Text, { wrap: verbose ? "truncate-end" : void 0 }, mark, " ", brand(entry.name), entry.preview === "" ? "" : ` ${dim(displayText(entry.preview))}`), entry.summary === "" ? void 0 : createElement(Text, {
+				color: entry.state === "error" ? inkColor(TUI_RGB.error) : inkColor(TUI_RGB.dim),
+				wrap: verbose ? "truncate-end" : void 0
+			}, `  ⎿ ${displayText(entry.summary)}`), verbose && entry.detail !== void 0 ? createElement(ToolDetailBody, { detail: entry.detail }) : void 0);
 		}
 		case "command": {
-			const mark = entry.state === "running" ? createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, "◐") : entry.state === "error" ? createElement(Text, { color: inkColor(TUI_RGB.error) }, "⨯") : createElement(Text, { color: inkColor(TUI_RGB.success) }, "⏺");
-			return createElement(Text, null, mark, " ", brand(`/${entry.name}`), entry.args === "" ? "" : ` ${dim(displayText(entry.args))}`, entry.summary === "" ? "" : ` ${dim(displayText(entry.summary))}`);
+			const mark = entry.state === "running" ? createElement(Pulse) : entry.state === "error" ? createElement(Text, { color: inkColor(TUI_RGB.error) }, "⨯") : createElement(Text, { color: inkColor(TUI_RGB.success) }, "⏺");
+			return createElement(Box, { flexDirection: "column" }, createElement(Text, { wrap: verbose ? "truncate-end" : void 0 }, mark, " ", brand(`/${entry.name}`), entry.args === "" ? "" : ` ${dim(displayText(entry.args))}`), entry.summary === "" ? void 0 : createElement(Text, {
+				color: inkColor(TUI_RGB.dim),
+				wrap: verbose ? "truncate-end" : void 0
+			}, `  ⎿ ${displayText(entry.summary)}`));
+		}
+		case "turn-marker": return createElement(Text, {
+			dimColor: true,
+			wrap: verbose ? "truncate-end" : void 0
+		}, `  ⏹ ${displayText(entry.text)}`);
+		case "compaction": return createElement(Text, {
+			dimColor: true,
+			wrap: verbose ? "truncate-end" : void 0
+		}, entry.ok ? `  ⧉ compacted ~${formatTokens(entry.tokens)} tokens` : `  ⧉ compaction failed: ${displayText(entry.error)}`);
+		case "retry": return createElement(Text, {
+			color: entry.state === "running" ? inkColor(TUI_RGB.warn) : inkColor(TUI_RGB.dim),
+			wrap: verbose ? "truncate-end" : void 0
+		}, `  ↻ retry ${entry.attempt}/${entry.max} · ${displayText(entry.code)} · ${Math.round(entry.delayMs / 100) / 10}s`);
+		case "files": {
+			const shown = entry.paths.slice(0, 3).map((path) => displayText(path)).join(" · ");
+			const more = entry.paths.length > 3 ? ` (+${entry.paths.length - 3} more)` : "";
+			return createElement(Text, {
+				dimColor: true,
+				wrap: verbose ? "truncate-end" : void 0
+			}, `  ⎄ ${shown}${more}`);
 		}
-		case "error": return createElement(Text, null, error(displayText(entry.text)));
+		case "error": return createElement(Text, { wrap: verbose ? "truncate-end" : void 0 }, error(displayText(entry.text)));
 		default: return assertNever(entry, "transcript entry kind");
 	}
 }
-/** The whale wordmark header in DeepSeek blue, hugging its content width. */
+/**
+* The whale wordmark header in DeepSeek blue, hugging its content width.
+* The 8-row half-block glyph pairs adjacent lines, so on a terminal too
+* short to show it whole (or mid-resize) the clipped pairs garble the
+* screen — below the height floor the header collapses to a single-line
+* wordmark that stays correct at any size.
+*/
 function Header({ resumed }) {
+	const rows = useStdout().stdout?.rows ?? 40;
+	const hint = resumed ? "resumed session · /help commands · Esc interrupt" : "/help commands · Esc interrupt · Ctrl+C quit";
+	if (rows < 20) return createElement(Box, {
+		flexDirection: "row",
+		gap: 1,
+		borderStyle: "round",
+		borderColor: inkColor(TUI_RGB.brand),
+		paddingX: 1,
+		alignSelf: "flex-start"
+	}, createElement(Text, {
+		color: inkColor(TUI_RGB.brand),
+		bold: true
+	}, "DeepSeek Harness"), createElement(Text, { dimColor: true }, hint));
 	return createElement(Box, {
 		flexDirection: "row",
 		gap: 1,
@@ -240,32 +1659,24 @@ function Header({ resumed }) {
 	}, createElement(Text, {
 		color: inkColor(TUI_RGB.brand),
 		bold: true
-	}, "DeepSeek Harness"), createElement(Text, { dimColor: true }, resumed ? "resumed session · /help commands · Esc interrupt" : "/help commands · Esc interrupt · Ctrl+C quit")));
+	}, "DeepSeek Harness"), createElement(Text, { dimColor: true }, hint)));
 }
 /** Todo status glyph: web TodoPanel's three-state marker. */
 function todoMark(status) {
 	return status === "completed" ? "✓" : status === "in_progress" ? "●" : "○";
 }
-/** Inline todo list (web TodoPanel's compact terminal form). */
+/** One-row todo summary: task count cannot grow the live Ink tree. */
 function TodoPanel({ todos }) {
 	if (todos.length === 0) return void 0;
 	const completed = todos.filter((todo) => todo.status === "completed").length;
 	const inProgress = todos.filter((todo) => todo.status === "in_progress").length;
 	const pending = todos.length - completed - inProgress;
-	return createElement(Box, {
-		flexDirection: "column",
-		paddingX: 1,
-		borderStyle: "round",
-		borderColor: inkColor(TUI_RGB.brandDeep),
-		alignSelf: "flex-start",
-		marginLeft: 1
-	}, createElement(Text, {
+	const current = todos.find((todo) => todo.status === "in_progress");
+	return createElement(Box, { paddingX: 1 }, createElement(Text, {
 		color: inkColor(TUI_RGB.brand),
-		bold: true
-	}, `todos ${completed}/${todos.length}`, createElement(Text, { dimColor: true }, ` · ${inProgress} active · ${pending} pending`)), ...todos.map((todo, index) => createElement(Text, {
-		key: index,
-		color: todo.status === "completed" ? inkColor(TUI_RGB.success) : todo.status === "in_progress" ? inkColor(TUI_RGB.brandBright) : inkColor(TUI_RGB.dim)
-	}, `${todoMark(todo.status)} ${displayText(todo.content)}`)));
+		bold: true,
+		wrap: "truncate-end"
+	}, `todos ${completed}/${todos.length}`, createElement(Text, { dimColor: true }, ` · ${inProgress} active · ${pending} pending`), current === void 0 ? "" : createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, ` · ${todoMark(current.status)} ${displayText(current.content)}`)));
 }
 /**
 * The footer status line: Claude-Code-style identity facts (model, working
@@ -275,39 +1686,304 @@ function TodoPanel({ todos }) {
 */
 function StatusLine({ facts, stats, busy }) {
 	const groups = buildStatusGroups(facts, stats);
-	const children = [busy ? createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, "● ") : createElement(Text, { color: inkColor(TUI_RGB.brand) }, "○ ")];
-	groups.forEach((group, index) => {
-		if (index > 0) children.push(createElement(Text, { dimColor: true }, dim(" | ")));
-		children.push(createElement(Text, { dimColor: true }, group));
-	});
-	return createElement(Box, { paddingX: 1 }, ...children);
+	return createElement(Box, { paddingLeft: 2 }, createElement(Text, {
+		dimColor: true,
+		wrap: "truncate-end"
+	}, busy ? "● " : "○ ", groups.join(" | ")));
 }
 /** The y/n approval bar rendered while an approval ask is pending. */
-function ApprovalBar({ approval }) {
+function ApprovalBar({ approval, locked }) {
 	const snapshot = useSyncExternalStore(approval.subscribe, approval.getSnapshot);
+	const stdout = useStdout().stdout;
+	const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30);
+	const [scroll, setScroll] = useState(0);
+	const pending = snapshot.pending;
+	const active = !locked && snapshot.pending !== void 0 && !snapshot.answered;
+	const content = useMemo(() => pending === void 0 ? [] : [...styledLines([lineSegment(pending.headline, "warn")], viewport.contentColumns), ...pending.command === "" ? [] : textLines(`  ${pending.command}`, viewport.contentColumns, "dim")], [pending, viewport.contentColumns]);
+	const visibleScroll = clampScroll(scroll, content.length, viewport.bodyRows);
+	useEffect(() => {
+		setScroll(0);
+	}, [pending]);
+	useEffect(() => {
+		if (visibleScroll !== scroll) setScroll(visibleScroll);
+	}, [visibleScroll, scroll]);
+	useInput((input, key) => {
+		if (snapshot.pending === void 0) return;
+		if (key.upArrow) {
+			setScroll((current) => moveScroll(current, -1, content.length, viewport.bodyRows));
+			return;
+		}
+		if (key.downArrow) {
+			setScroll((current) => moveScroll(current, 1, content.length, viewport.bodyRows));
+			return;
+		}
+		if (key.pageUp) {
+			setScroll((current) => moveScroll(current, -Math.max(1, viewport.bodyRows - 1), content.length, viewport.bodyRows));
+			return;
+		}
+		if (key.pageDown) {
+			setScroll((current) => moveScroll(current, Math.max(1, viewport.bodyRows - 1), content.length, viewport.bodyRows));
+			return;
+		}
+		if (snapshot.answered) return;
+		if (input === "y" || input === "Y") {
+			snapshot.pending.answer("allowed-once");
+			return;
+		}
+		if (input === "n" || input === "N") snapshot.pending.answer("rejected");
+	}, { isActive: active });
 	if (snapshot.pending === void 0) return void 0;
-	const { pending, answered } = snapshot;
+	if (viewport.maxHeight === 0) return createElement(Box, { display: "none" });
+	if (viewport.compact) return createElement(Text, { wrap: "truncate-end" }, truncateColumns("approval · y allow · n reject", viewport.contentColumns));
+	const { answered } = snapshot;
+	return createElement(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		borderStyle: "round",
+		borderColor: inkColor(TUI_RGB.warn)
+	}, createElement(Text, {
+		color: inkColor(TUI_RGB.warn),
+		bold: true,
+		wrap: "truncate-end"
+	}, truncateColumns(`⏸ waiting for approval · lines ${content.length === 0 ? 0 : visibleScroll + 1}-${Math.min(content.length, visibleScroll + viewport.bodyRows)}/${content.length}`, viewport.contentColumns)), createElement(StyledRows, { lines: content.slice(visibleScroll, visibleScroll + viewport.bodyRows) }), createElement(Text, {
+		dimColor: true,
+		wrap: "truncate-end"
+	}, dim(truncateColumns(answered ? "submitted…" : "↑↓/pgup/pgdn scroll · y allow once · n reject", viewport.contentColumns))));
+}
+/**
+* The ask_user_question bar: walks one request question by question,
+* renders the option menu (Claude-Code style: arrows move, space toggles a
+* multi-select, enter submits, `c` opens the custom-answer box, Esc
+* interrupts the question as aborted). Plan reviews arrive through the same
+* service with a `plan-review` intent — the approve option gets a ✓ mark,
+* the answer encoding stays identical.
+*/
+function QuestionBar({ store, locked }) {
+	const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot);
+	const stdout = useStdout().stdout;
+	const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30);
+	const pending = snapshot.pending;
+	const [index, setIndex] = useState(0);
+	const [cursor, setCursor] = useState(0);
+	const [selected, setSelected] = useState([]);
+	const [mode, setMode] = useState("options");
+	const [custom, setCustom] = useState("");
+	const [answers, setAnswers] = useState([]);
+	const [submitted, setSubmitted] = useState(false);
+	const [scroll, setScroll] = useState(0);
+	useEffect(() => {
+		const question = pending?.request.questions[0];
+		setIndex(0);
+		setCursor(0);
+		setSelected([]);
+		setMode(question?.options === void 0 || question.options.length === 0 ? "custom" : "options");
+		setCustom("");
+		setAnswers([]);
+		setSubmitted(false);
+		setScroll(0);
+	}, [pending]);
+	const question = pending?.request.questions[index];
+	const options = question?.options ?? [];
+	const isPlan = question?.intent?.kind === "plan-review";
+	const isMulti = question?.multiSelect === true;
+	const active = !locked && pending !== void 0 && question !== void 0 && !submitted;
+	const rendered = useMemo(() => {
+		if (question === void 0) return {
+			lines: [],
+			optionRows: []
+		};
+		const lines = [];
+		const optionRows = [];
+		if (question.header !== void 0) lines.push(...styledLines([lineSegment(question.header, "bold")], viewport.contentColumns));
+		lines.push(...textLines(question.question, viewport.contentColumns));
+		if (question.detail !== void 0) lines.push(...isPlan ? markdownLines(question.detail, viewport.contentColumns) : textLines(question.detail, viewport.contentColumns, "dim"));
+		if (submitted) lines.push(...textLines("  submitted…", viewport.contentColumns, "dim"));
+		else if (mode === "custom" || options.length === 0) lines.push(...styledLines([
+			lineSegment("  custom: ", "brand"),
+			lineSegment(custom, "plain"),
+			lineSegment("▌", "brand")
+		], viewport.contentColumns));
+		else options.forEach((option, at) => {
+			optionRows.push(lines.length);
+			const chosen = isMulti && selected.includes(at);
+			const approve = isPlan && question.intent?.approve === option.label;
+			const mark = approve ? "✓ " : chosen ? "◉ " : at === cursor ? "❯ " : "  ";
+			const style = at === cursor ? "brand" : chosen || approve ? "success" : "plain";
+			lines.push(...styledLines([
+				lineSegment(mark, style),
+				lineSegment(option.label, style),
+				lineSegment(option.description === void 0 ? "" : ` — ${option.description}`, "dim")
+			], viewport.contentColumns));
+		});
+		return {
+			lines,
+			optionRows
+		};
+	}, [
+		question,
+		isPlan,
+		submitted,
+		mode,
+		options,
+		custom,
+		isMulti,
+		selected,
+		cursor,
+		viewport.contentColumns
+	]);
+	const visibleScroll = clampScroll(scroll, rendered.lines.length, viewport.bodyRows);
+	useEffect(() => {
+		if (visibleScroll !== scroll) setScroll(visibleScroll);
+	}, [visibleScroll, scroll]);
+	useEffect(() => {
+		if (mode === "options" && options.length > 0) {
+			const focused = rendered.optionRows[cursor] ?? 0;
+			setScroll((current) => revealRow(current, focused, rendered.lines.length, viewport.bodyRows));
+			return;
+		}
+		setScroll(Math.max(0, rendered.lines.length - viewport.bodyRows));
+	}, [
+		cursor,
+		mode,
+		custom.length,
+		rendered.lines.length,
+		viewport.bodyRows
+	]);
+	const commit = (answer) => {
+		if (pending === void 0) return;
+		const next = [...answers, answer];
+		const total = pending.request.questions.length;
+		if (index + 1 >= total) {
+			setSubmitted(true);
+			store.submit(pending, { answers: next });
+			return;
+		}
+		setAnswers(next);
+		const nextIndex = index + 1;
+		const nextQuestion = pending.request.questions[nextIndex];
+		setIndex(nextIndex);
+		setCursor(0);
+		setSelected([]);
+		setMode(nextQuestion?.options === void 0 || nextQuestion.options.length === 0 ? "custom" : "options");
+		setCustom("");
+		setScroll(0);
+	};
+	const commitOption = () => {
+		if (pending === void 0 || question === void 0) return;
+		if (isMulti) {
+			const labels = selected.map((at) => options[at]?.label).filter((label) => label !== void 0);
+			const customText = custom.trim();
+			commit({
+				id: question.id,
+				selected: labels,
+				...customText === "" ? {} : { custom: customText }
+			});
+			return;
+		}
+		const option = options[cursor];
+		if (option === void 0) return;
+		commit({
+			id: question.id,
+			selected: [option.label]
+		});
+	};
+	useInput((input, key) => {
+		if (pending === void 0 || question === void 0 || submitted) return;
+		if (key.escape) {
+			store.cancel(pending);
+			return;
+		}
+		if (key.pageUp) {
+			setScroll((current) => moveScroll(current, -Math.max(1, viewport.bodyRows - 1), rendered.lines.length, viewport.bodyRows));
+			return;
+		}
+		if (key.pageDown) {
+			setScroll((current) => moveScroll(current, Math.max(1, viewport.bodyRows - 1), rendered.lines.length, viewport.bodyRows));
+			return;
+		}
+		if (mode === "custom" || options.length === 0) {
+			if (key.upArrow) {
+				setScroll((current) => moveScroll(current, -1, rendered.lines.length, viewport.bodyRows));
+				return;
+			}
+			if (key.downArrow) {
+				setScroll((current) => moveScroll(current, 1, rendered.lines.length, viewport.bodyRows));
+				return;
+			}
+			if (key.return) {
+				if (custom.trim() === "" && options.length > 0) {
+					commitOption();
+					return;
+				}
+				commit({
+					id: question.id,
+					selected: isMulti ? selected.map((at) => options[at]?.label).filter((label) => label !== void 0) : [],
+					...custom.trim() === "" ? {} : { custom: custom.trim() }
+				});
+				return;
+			}
+			if (key.backspace) {
+				setCustom((current) => current.slice(0, -1));
+				return;
+			}
+			if (input !== "" && !key.ctrl && !key.meta) setCustom((current) => current + input);
+			return;
+		}
+		if (key.upArrow) {
+			setCursor((current) => (current + options.length - 1) % options.length);
+			return;
+		}
+		if (key.downArrow) {
+			setCursor((current) => (current + 1) % options.length);
+			return;
+		}
+		if (key.return) {
+			commitOption();
+			return;
+		}
+		if (key.tab || input === "c" || input === "C") {
+			setMode("custom");
+			return;
+		}
+		if (input === " " && isMulti) setSelected((current) => current.includes(cursor) ? current.filter((at) => at !== cursor) : [...current, cursor]);
+	}, { isActive: active });
+	if (pending === void 0 || question === void 0) return void 0;
+	if (viewport.maxHeight === 0) return createElement(Box, { display: "none" });
+	if (viewport.compact) return createElement(Text, { wrap: "truncate-end" }, truncateColumns(isPlan ? "plan review · esc cancel" : "question · esc cancel", viewport.contentColumns));
+	const footer = submitted ? "submitted…" : mode === "custom" || options.length === 0 ? "↑↓/pgup/pgdn scroll · type answer · enter submit · esc interrupt" : isMulti ? "↑↓ choose · pgup/pgdn scroll · space toggle · enter submit · c custom · esc interrupt" : "↑↓ choose · pgup/pgdn scroll · enter submit · c custom · esc interrupt";
 	return createElement(Box, {
 		flexDirection: "column",
 		paddingX: 1,
 		borderStyle: "round",
-		borderColor: inkColor(TUI_RGB.warn),
-		alignSelf: "flex-start",
-		marginLeft: 1
+		borderColor: inkColor(isPlan ? TUI_RGB.brand : TUI_RGB.brandDeep)
 	}, createElement(Text, {
-		color: inkColor(TUI_RGB.warn),
-		bold: true
-	}, "⏸ waiting for approval"), createElement(Text, null, warn(displayText(pending.headline))), pending.command === "" ? void 0 : createElement(Text, { dimColor: true }, dim(`  ${displayText(pending.command)}`)), answered ? createElement(Text, { dimColor: true }, "  submitted…") : createElement(Text, { dimColor: true }, dim("  y allow once · n reject")));
+		color: inkColor(isPlan ? TUI_RGB.brand : TUI_RGB.brandDeep),
+		bold: true,
+		wrap: "truncate-end"
+	}, truncateColumns(`${isPlan ? "📋 plan review" : "❓ question"} ${index + 1}/${pending.request.questions.length} · lines ${rendered.lines.length === 0 ? 0 : visibleScroll + 1}-${Math.min(rendered.lines.length, visibleScroll + viewport.bodyRows)}/${rendered.lines.length}`, viewport.contentColumns)), createElement(StyledRows, { lines: rendered.lines.slice(visibleScroll, visibleScroll + viewport.bodyRows) }), createElement(Text, {
+		dimColor: true,
+		wrap: "truncate-end"
+	}, dim(truncateColumns(footer, viewport.contentColumns))));
 }
 /** The /model panel: a scrolling list over the advisory model directory. */
 function ModelPanel({ directory, error, onSelect, onClose }) {
 	const [cursor, setCursor] = useState(0);
+	const stdout = useStdout().stdout;
+	const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30);
+	const rows = directory?.rows ?? [];
+	useEffect(() => {
+		if (rows.length === 0) {
+			if (cursor !== 0) setCursor(0);
+			return;
+		}
+		if (cursor >= rows.length) setCursor(rows.length - 1);
+	}, [rows.length, cursor]);
 	useInput((input, key) => {
 		if (key.escape || input === "q") {
 			onClose();
 			return;
 		}
-		const rows = directory?.rows ?? [];
+		if (rows.length === 0) return;
 		if (key.upArrow) {
 			setCursor(cursor > 0 ? cursor - 1 : rows.length - 1);
 			return;
@@ -316,31 +1992,301 @@ function ModelPanel({ directory, error, onSelect, onClose }) {
 			setCursor(cursor < rows.length - 1 ? cursor + 1 : 0);
 			return;
 		}
+		if (key.pageUp) {
+			setCursor((current) => Math.max(0, current - Math.max(1, viewport.bodyRows - 1)));
+			return;
+		}
+		if (key.pageDown) {
+			setCursor((current) => Math.min(rows.length - 1, current + Math.max(1, viewport.bodyRows - 1)));
+			return;
+		}
+		if (input === "g") {
+			setCursor(0);
+			return;
+		}
+		if (input === "G") {
+			setCursor(rows.length - 1);
+			return;
+		}
 		if (key.return && rows[cursor] !== void 0) onSelect(rows[cursor]);
 	});
-	const rows = directory?.rows ?? [];
-	const window = 8;
-	const first = Math.max(0, Math.min(cursor - Math.floor(window / 2), rows.length - window));
-	const visible = rows.slice(Math.max(0, first), Math.max(0, first) + window);
+	if (viewport.maxHeight === 0) return createElement(Box, { display: "none" });
+	if (viewport.compact) return createElement(Text, { wrap: "truncate-end" }, truncateColumns("/model · esc/q close", viewport.contentColumns));
+	const first = selectionWindow(cursor, rows.length, viewport.bodyRows);
+	const visible = rows.slice(first, first + viewport.bodyRows);
 	return createElement(Box, {
 		flexDirection: "column",
 		paddingX: 1,
 		borderStyle: "round",
-		borderColor: inkColor(TUI_RGB.brand),
-		alignSelf: "flex-start",
-		marginLeft: 1
+		borderColor: inkColor(TUI_RGB.brand)
 	}, createElement(Text, {
 		color: inkColor(TUI_RGB.brand),
-		bold: true
-	}, "/model — select the model for the next step"), directory === void 0 && error === void 0 ? createElement(Text, { dimColor: true }, "  loading models…") : void 0, error !== void 0 ? createElement(Text, { color: inkColor(TUI_RGB.error) }, `  ${error}`) : void 0, ...visible.map((row) => {
+		bold: true,
+		wrap: "truncate-end"
+	}, truncateColumns(`/model — select model${rows.length === 0 ? "" : ` · ${cursor + 1}/${rows.length}`}`, viewport.contentColumns)), directory === void 0 && error === void 0 ? createElement(Text, {
+		dimColor: true,
+		wrap: "truncate-end"
+	}, "  loading models…") : void 0, error !== void 0 ? createElement(Text, {
+		color: inkColor(TUI_RGB.error),
+		wrap: "truncate-end"
+	}, truncateColumns(`  ${displayText(error)}`, viewport.contentColumns)) : void 0, ...visible.map((row) => {
 		const index = rows.indexOf(row);
 		const label = displayText(`${row.providerName} · ${row.modelName}`);
 		return createElement(Text, {
 			key: `${row.provider}/${row.model}`,
-			color: index === cursor ? inkColor(TUI_RGB.brandBright) : inkColor(TUI_RGB.dim)
-		}, `${index === cursor ? "❯ " : "  "}${label}`);
-	}), createElement(Text, { dimColor: true }, dim("  ↑↓ move · enter select · esc close")));
+			color: index === cursor ? inkColor(TUI_RGB.brandBright) : inkColor(TUI_RGB.dim),
+			wrap: "truncate-end"
+		}, truncateColumns(`${index === cursor ? "❯ " : "  "}${label}`, viewport.contentColumns));
+	}), createElement(Text, {
+		dimColor: true,
+		wrap: "truncate-end"
+	}, dim(truncateColumns("↑↓ move · pgup/pgdn page · g/G ends · enter select · esc/q close", viewport.contentColumns))));
+}
+/**
+* The /help overlay: one scrolling card with the keyboard map, the TUI-local
+* commands, the live registry commands, and the user-invocable skills — the
+* real command surface, replacing the one-line notice.
+*/
+function HelpPanel({ descriptors, skills, onClose }) {
+	const stdout = useStdout().stdout;
+	const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30);
+	const [scroll, setScroll] = useState(0);
+	const nameWidth = 18;
+	const descBudget = Math.max(1, viewport.contentColumns - nameWidth - 2);
+	const row = (label, description) => createElement(Text, {
+		dimColor: true,
+		wrap: "truncate-end"
+	}, `  ${padColumns(label, nameWidth)}${dim(truncateColumns(displayText(description), descBudget))}`);
+	const content = [
+		createElement(Text, {
+			key: "keys-title",
+			bold: true,
+			wrap: "truncate-end"
+		}, " keys"),
+		createElement(Text, {
+			key: "key-submit",
+			dimColor: true,
+			wrap: "truncate-end"
+		}, "  enter submit · alt+enter / ctrl+j newline · up/down history · tab complete"),
+		createElement(Text, {
+			key: "key-mentions",
+			dimColor: true,
+			wrap: "truncate-end"
+		}, "  tab also completes bare workspace paths · @ mentions files and sessions"),
+		createElement(Text, {
+			key: "key-inspector",
+			dimColor: true,
+			wrap: "truncate-end"
+		}, "  ctrl+o history details · ctrl+r thinking · shift+tab permission preset"),
+		createElement(Text, {
+			key: "key-cancel",
+			dimColor: true,
+			wrap: "truncate-end"
+		}, "  esc interrupt the running turn · ctrl+c cancel / clear / quit · ctrl+d exit"),
+		createElement(Text, {
+			key: "key-edit",
+			dimColor: true,
+			wrap: "truncate-end"
+		}, "  ctrl+k cut to end of line · ctrl+u clear line · ctrl+a / ctrl+e line ends"),
+		createElement(Text, {
+			key: "commands-title",
+			bold: true,
+			wrap: "truncate-end"
+		}, " commands"),
+		createElement(Box, { key: "local-help" }, row("/help", "show this overlay")),
+		createElement(Box, { key: "local-model" }, row("/model", "switch the model")),
+		createElement(Box, { key: "local-clear" }, row("/clear", "clear the screen")),
+		createElement(Box, { key: "local-export" }, row("/export", "export the transcript to markdown (/export [path])")),
+		createElement(Box, { key: "local-title" }, row("/title", "rename this session (/title <text>)")),
+		createElement(Box, { key: "local-quit" }, row("/quit", "exit")),
+		...descriptors.map((descriptor) => createElement(Text, {
+			key: `command-${descriptor.name}`,
+			dimColor: true,
+			wrap: "truncate-end"
+		}, `  ${padColumns(`/${descriptor.name}`, nameWidth)}${dim(truncateColumns(displayText(descriptor.description), descBudget))}`)),
+		...skills.length === 0 ? [] : [createElement(Text, {
+			key: "skills-title",
+			bold: true,
+			wrap: "truncate-end"
+		}, " skills")],
+		...skills.map((skill) => createElement(Text, {
+			key: `skill-${skill.name}`,
+			dimColor: true,
+			wrap: "truncate-end"
+		}, `  ${padColumns(`/${skill.name}`, nameWidth)}${dim(truncateColumns(displayText(skill.description), descBudget))}`))
+	];
+	const visibleScroll = clampScroll(scroll, content.length, viewport.bodyRows);
+	const scrollBy = (delta) => {
+		setScroll((current) => moveScroll(current, delta, content.length, viewport.bodyRows));
+	};
+	useEffect(() => {
+		if (visibleScroll !== scroll) setScroll(visibleScroll);
+	}, [visibleScroll, scroll]);
+	useInput((input, key) => {
+		if (key.escape || input === "q") {
+			onClose();
+			return;
+		}
+		if (key.upArrow) scrollBy(-1);
+		else if (key.downArrow) scrollBy(1);
+		else if (key.pageUp) scrollBy(-Math.max(1, viewport.bodyRows - 1));
+		else if (key.pageDown) scrollBy(Math.max(1, viewport.bodyRows - 1));
+		else if (input === "g") setScroll(0);
+		else if (input === "G") setScroll(Math.max(0, content.length - viewport.bodyRows));
+	});
+	if (viewport.maxHeight === 0) return createElement(Box, { display: "none" });
+	if (viewport.compact) return createElement(Text, { wrap: "truncate-end" }, truncateColumns("/help · esc/q close", viewport.contentColumns));
+	return createElement(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		borderStyle: "round",
+		borderColor: inkColor(TUI_RGB.brand)
+	}, createElement(Text, {
+		color: inkColor(TUI_RGB.brand),
+		bold: true,
+		wrap: "truncate-end"
+	}, truncateColumns(`/help — keys and commands · rows ${content.length === 0 ? 0 : visibleScroll + 1}-${Math.min(content.length, visibleScroll + viewport.bodyRows)}/${content.length}`, viewport.contentColumns)), ...content.slice(visibleScroll, visibleScroll + viewport.bodyRows), createElement(Text, {
+		dimColor: true,
+		wrap: "truncate-end"
+	}, dim(truncateColumns("↑↓ scroll · pgup/pgdn page · g/G ends · esc/q close", viewport.contentColumns))));
+}
+/** Collapse arbitrary metadata to one terminal row before verbose rendering. */
+function verboseLine(text, columns) {
+	return truncateColumns(displayText(text).replace(/\n/gu, " ↵ ").replace(/\t/gu, "  "), Math.max(1, columns));
+}
+/** One-row editor window keeping the logical cursor visible in long drafts. */
+function editorWindow(value, cursor, columns) {
+	const width = Math.max(1, columns);
+	const normalize = (text) => displayText(text).replace(/\n/gu, "↵").replace(/\t/gu, "  ");
+	const caretSource = value.slice(cursor, cursor + 1);
+	const caret = caretSource === "" ? " " : normalize(caretSource);
+	const remaining = Math.max(0, width - visibleColumns(caret));
+	const afterBudget = Math.min(Math.floor(remaining / 3), visibleColumns(normalize(value.slice(cursor + 1))));
+	const beforeBudget = Math.max(0, remaining - afterBudget);
+	return {
+		before: beforeBudget === 0 ? "" : displayTail(normalize(value.slice(0, cursor)), beforeBudget, 1).text,
+		caret,
+		after: afterBudget === 0 ? "" : truncateColumns(normalize(value.slice(cursor + 1)), afterBudget)
+	};
+}
+/**
+* The Ctrl+O transcript inspector: one selected durable entry at a time,
+* with independent history selection and content scrolling. The complete
+* retained entry is converted to physical rows, but only one viewport slice
+* reaches Ink, so even a huge reasoning block cannot grow the dynamic tree.
+*/
+function VerbosePanel({ entries, onClose }) {
+	const stdout = useStdout().stdout;
+	const viewport = inspectorViewport(stdout?.columns ?? 80, stdout?.rows ?? 30);
+	const [cursor, setCursor] = useState(() => Math.max(0, entries.length - 1));
+	const [scroll, setScroll] = useState(0);
+	const savedScroll = useRef(/* @__PURE__ */ new Map());
+	const cursorRef = useRef(cursor);
+	const previousLength = useRef(entries.length);
+	const entry = entries[cursor];
+	const allLines = useMemo(() => entry === void 0 ? [] : transcriptEntryLines(entry, viewport.contentColumns), [entry, viewport.contentColumns]);
+	const visibleScroll = clampScroll(scroll, allLines.length, viewport.bodyRows);
+	useEffect(() => {
+		cursorRef.current = cursor;
+	}, [cursor]);
+	useEffect(() => {
+		const current = cursorRef.current;
+		const next = followInspectorCursor(current, previousLength.current, entries.length);
+		if (next !== current) {
+			savedScroll.current.set(current, visibleScroll);
+			setCursor(next);
+			setScroll(savedScroll.current.get(next) ?? 0);
+		}
+		previousLength.current = entries.length;
+	}, [entries.length]);
+	useEffect(() => {
+		const clamped = clampScroll(scroll, allLines.length, viewport.bodyRows);
+		if (clamped !== scroll) setScroll(clamped);
+		savedScroll.current.set(cursor, clamped);
+	}, [
+		cursor,
+		scroll,
+		allLines.length,
+		viewport.bodyRows
+	]);
+	const selectEntry = (next) => {
+		if (entries.length === 0) return;
+		const selected = Math.max(0, Math.min(entries.length - 1, next));
+		if (selected === cursor) return;
+		savedScroll.current.set(cursor, visibleScroll);
+		setCursor(selected);
+		setScroll(savedScroll.current.get(selected) ?? 0);
+	};
+	const scrollBy = (delta) => {
+		setScroll((current) => moveScroll(current, delta, allLines.length, viewport.bodyRows));
+	};
+	useInput((input, key) => {
+		if (key.escape || input === "q" || key.ctrl && input === "o") {
+			onClose();
+			return;
+		}
+		if (entries.length === 0) return;
+		if (key.leftArrow) {
+			selectEntry(cursor - 1);
+			return;
+		}
+		if (key.rightArrow) {
+			selectEntry(cursor + 1);
+			return;
+		}
+		if (key.upArrow) {
+			scrollBy(-1);
+			return;
+		}
+		if (key.downArrow) {
+			scrollBy(1);
+			return;
+		}
+		if (key.pageUp) {
+			scrollBy(-Math.max(1, viewport.bodyRows - 1));
+			return;
+		}
+		if (key.pageDown) {
+			scrollBy(Math.max(1, viewport.bodyRows - 1));
+			return;
+		}
+		if (input === "g") {
+			setScroll(0);
+			return;
+		}
+		if (input === "G") setScroll(Math.max(0, allLines.length - viewport.bodyRows));
+	});
+	if (viewport.maxHeight === 0) return createElement(Box, { display: "none" });
+	if (viewport.compact) return createElement(Text, { wrap: "truncate-end" }, truncateColumns("history details · ctrl+o / esc / q close", viewport.contentColumns));
+	const title = entries.length === 0 ? "history details · empty" : `history details · entry ${cursor + 1}/${entries.length} · lines ${allLines.length === 0 ? 0 : visibleScroll + 1}-${Math.min(allLines.length, visibleScroll + viewport.bodyRows)}/${allLines.length}`;
+	const visible = allLines.slice(visibleScroll, visibleScroll + viewport.bodyRows);
+	return createElement(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		borderStyle: "round",
+		borderColor: inkColor(TUI_RGB.brand)
+	}, createElement(Text, {
+		color: inkColor(TUI_RGB.brand),
+		bold: true,
+		wrap: "truncate-end"
+	}, truncateColumns(title, viewport.contentColumns)), createElement(Box, { flexDirection: "column" }, entry === void 0 ? createElement(Text, { dimColor: true }, "  no durable entries yet") : createElement(StyledRows, { lines: visible })), createElement(Text, {
+		dimColor: true,
+		wrap: "truncate-end"
+	}, dim(truncateColumns("←→ entry · ↑↓ scroll · pgup/pgdn page · g/G ends · ctrl+o/esc/q close", viewport.contentColumns))));
 }
+/** Streaming chunks preserve `entries` identity, so the open inspector stays inert. */
+const MemoVerbosePanel = memo(VerbosePanel);
+/** Stable append-only boundary: modal updates must never revisit Static rows. */
+function staticRow(item) {
+	return item;
+}
+function StaticTranscript({ items }) {
+	return createElement(Static, {
+		items,
+		children: staticRow
+	});
+}
+const MemoStaticTranscript = memo(StaticTranscript);
 /**
 * Resolve completion candidates for the current input: TUI-local commands,
 * the live registry descriptors, and user-invocable skills, filtered by the
@@ -366,13 +2312,24 @@ function completionCandidates(value, descriptors, skills) {
 			description: "clear the screen",
 			origin: "command"
 		},
+		{
+			label: "/export",
+			description: "export the transcript to markdown",
+			origin: "command"
+		},
+		{
+			label: "/title",
+			description: "rename this session",
+			origin: "command"
+		},
 		{
 			label: "/quit",
 			description: "exit",
 			origin: "command"
 		}
 	];
-	const registry = descriptors.map((descriptor) => ({
+	const localNames = new Set(local.map((candidate) => candidate.label.slice(1)));
+	const registry = descriptors.filter((descriptor) => !localNames.has(descriptor.name)).map((descriptor) => ({
 		label: `/${descriptor.name}`,
 		description: descriptor.description,
 		origin: "command"
@@ -392,10 +2349,52 @@ function completionCandidates(value, descriptors, skills) {
 	return all.filter((candidate) => candidate.label.slice(1).startsWith(prefix)).slice(0, 10);
 }
 /**
+* The completion menu, rendered inside the composer's subtree directly above
+* the framed box — attached the way Claude-Code anchors its dropdown. Opening
+* it grows the stack downward: the composer stays the last element on screen
+* and everything above (the flushed static transcript, the status line) never
+* moves. Props-only (no lifted state): the menu is a pure view of the input
+* editor's live completion state, so no cross-component effect ever resyncs
+* it (a state lift here previously deadlocked the menu after a resize).
+*/
+function CompletionMenu({ active, mention, index, rows }) {
+	const stdout = useStdout().stdout;
+	const columns = stdout?.columns ?? 80;
+	const terminalRows = stdout?.rows ?? 30;
+	if (!active) return void 0;
+	const nameWidth = Math.min(18, Math.max(0, ...rows.map((row) => visibleColumns(row.label))) + 2);
+	const descBudget = Math.max(24, columns - nameWidth - 8);
+	const showFooter = terminalRows >= 12;
+	const limit = Math.max(1, Math.min(6, terminalRows - (showFooter ? 11 : 10)));
+	const selected = rows.length === 0 ? 0 : index % rows.length;
+	const first = selectionWindow(selected, rows.length, limit);
+	const visible = rows.slice(first, first + limit);
+	return createElement(Box, {
+		flexDirection: "column",
+		marginLeft: 2
+	}, ...rows.length === 0 ? [createElement(Text, {
+		key: "loading",
+		dimColor: true
+	}, "searching…")] : visible.map((candidate, at) => {
+		const absolute = first + at;
+		return createElement(Text, {
+			key: candidate.label,
+			color: absolute === selected ? inkColor(TUI_RGB.brandBright) : inkColor(TUI_RGB.dim),
+			wrap: "truncate-end"
+		}, `${absolute === selected ? "❯ " : "  "}${padColumns(candidate.label, nameWidth)}${dim(truncateColumns(displayText(candidate.description), descBudget))}`);
+	}), showFooter ? createElement(Text, {
+		dimColor: true,
+		wrap: "truncate-end"
+	}, dim(mention ? "↑↓ choose · tab insert" : "↑↓ choose · tab complete")) : void 0);
+}
+/**
 * The prompt box: TUI-local slash commands handled locally, other lines
 * dispatched; input editing keeps a cursor with history and completion.
+* While a modal (approval / question / model panel) owns the keys, the
+* box passes every key through untouched.
 */
-function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, notify }) {
+function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, openHelp, notify, toggleReasoning, openVerbose, clearView, refresh, loadMentions, cyclePermission, exportTranscript, renameTitle }) {
+	const columns = useStdout().stdout?.columns ?? 80;
 	const [value, setValue] = useState("");
 	const [cursor, setCursor] = useState(0);
 	const history = useRef([]);
@@ -403,8 +2402,78 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
 	const draft = useRef("");
 	const [completionIndex, setCompletionIndex] = useState(0);
 	const candidates = completionCandidates(value, descriptors, skills);
-	const completionActive = candidates.length > 0 && value.startsWith("/") && !value.includes(" ") && !value.includes("\n");
+	const slashActive = candidates.length > 0 && value.startsWith("/") && !value.includes(" ") && !value.includes("\n");
+	const beforeCursor = value.slice(0, cursor);
+	const lastLine = beforeCursor.split("\n").at(-1) ?? "";
+	const tokenMatch = /(^|\s)@([^\s]*)$/u.exec(lastLine);
+	const mentionToken = tokenMatch === null ? void 0 : {
+		start: beforeCursor.length - lastLine.length + (tokenMatch.index ?? 0) + (tokenMatch[1]?.length ?? 0),
+		query: tokenMatch[2] ?? ""
+	};
+	const mentionActive = mentionToken !== void 0;
+	const [mentionRows, setMentionRows] = useState([]);
+	const bareTokenMatch = /([^\s]+)$/u.exec(lastLine);
+	const bareToken = bareTokenMatch === null ? "" : bareTokenMatch[1] ?? "";
+	const pathActive = !mentionActive && !bareToken.startsWith("/") && (bareToken.includes("/") || bareToken === "." || bareToken === "..");
+	const pathTokenStart = beforeCursor.length - bareToken.length;
+	const [pathRows, setPathRows] = useState([]);
+	useEffect(() => {
+		if (!active || !pathActive) {
+			setPathRows([]);
+			return;
+		}
+		const controller = new AbortController();
+		setPathRows([]);
+		loadMentions(bareToken, controller.signal).then((rows) => setPathRows(rows.filter((row) => row.kind !== "session")), () => {});
+		return () => {
+			controller.abort();
+		};
+	}, [
+		active,
+		pathActive,
+		bareToken
+	]);
+	useEffect(() => {
+		if (!active || !mentionActive) {
+			setMentionRows([]);
+			return;
+		}
+		const controller = new AbortController();
+		setMentionRows([]);
+		loadMentions(mentionToken.query, controller.signal).then((rows) => setMentionRows(rows), () => {});
+		return () => {
+			controller.abort();
+		};
+	}, [
+		active,
+		mentionActive,
+		mentionToken?.query
+	]);
+	const menuActive = (slashActive || mentionActive || pathActive) && !busy;
+	const menuRows = mentionActive ? mentionRows.map((row) => ({
+		label: row.label.startsWith("@") ? row.label : `@${row.label}${row.kind === "directory" ? "/" : ""}`,
+		description: row.description,
+		origin: "mention"
+	})) : pathActive ? pathRows.map((row) => ({
+		label: row.label,
+		description: row.description,
+		origin: "path"
+	})) : candidates;
 	useInput((input, key) => {
+		if (!active) return;
+		if (key.tab && key.shift) {
+			const next = cyclePermission();
+			if (next !== "") notify(`permission → ${next}`);
+			return;
+		}
+		if (key.ctrl && input === "r") {
+			toggleReasoning();
+			return;
+		}
+		if (key.ctrl && input === "o") {
+			openVerbose();
+			return;
+		}
 		if (key.ctrl && input === "c") {
 			if (busy) interrupt();
 			else if (value !== "") {
@@ -441,11 +2510,20 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
 				return;
 			}
 			if (text === "/help") {
-				notify("/model switch · /clear clear the screen · /quit exit · other /commands reach the registry · Esc or Ctrl+C interrupts the running turn");
+				openHelp();
 				return;
 			}
 			if (text === "/clear") {
-				console.clear();
+				refresh();
+				clearView();
+				return;
+			}
+			if (text === "/export" || text.startsWith("/export ")) {
+				exportTranscript(text.slice(8));
+				return;
+			}
+			if (text === "/title" || text.startsWith("/title ")) {
+				notify(renameTitle(text.slice(7)));
 				return;
 			}
 			if (text === "/model" || text.startsWith("/model ")) {
@@ -459,12 +2537,12 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
 			dispatch(text);
 			return;
 		}
-		if (completionActive && key.upArrow) {
-			setCompletionIndex((index) => (index + candidates.length - 1) % candidates.length);
+		if (menuActive && key.upArrow) {
+			setCompletionIndex((index) => (index + menuRows.length - 1) % menuRows.length);
 			return;
 		}
-		if (completionActive && key.downArrow) {
-			setCompletionIndex((index) => (index + 1) % candidates.length);
+		if (menuActive && key.downArrow) {
+			setCompletionIndex((index) => (index + 1) % menuRows.length);
 			return;
 		}
 		if (key.upArrow) {
@@ -492,13 +2570,29 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
 			setCursor((entries[next] ?? "").length);
 			return;
 		}
-		if (key.tab && completionActive) {
-			const candidate = candidates[completionIndex % candidates.length];
-			if (candidate !== void 0) {
-				setValue(`${candidate.label} `);
-				setCursor(candidate.label.length + 1);
-				setCompletionIndex(0);
+		if (key.tab && menuActive) {
+			if (mentionActive && mentionToken !== void 0) {
+				const row = mentionRows[completionIndex % mentionRows.length];
+				if (row !== void 0) {
+					const insertion = row.label.startsWith("@") ? row.label : `@${row.label}${row.kind === "directory" ? "/" : ""}`;
+					setValue(value.slice(0, mentionToken.start) + insertion + value.slice(cursor));
+					setCursor(mentionToken.start + insertion.length);
+				}
+			} else if (pathActive) {
+				const row = pathRows[completionIndex % Math.max(1, pathRows.length)];
+				if (row !== void 0) {
+					const insertion = row.kind === "directory" ? `${row.label}/` : row.label;
+					setValue(value.slice(0, pathTokenStart) + insertion + value.slice(cursor));
+					setCursor(pathTokenStart + insertion.length);
+				}
+			} else {
+				const candidate = candidates[completionIndex % candidates.length];
+				if (candidate !== void 0) {
+					setValue(`${candidate.label} `);
+					setCursor(candidate.label.length + 1);
+				}
 			}
+			setCompletionIndex(0);
 			return;
 		}
 		if (key.backspace || key.delete) {
@@ -522,6 +2616,14 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
 			setCursor(0);
 			return;
 		}
+		if (key.ctrl && input === "k") {
+			setValue(value.slice(0, cursor));
+			return;
+		}
+		if (key.ctrl && input === "l") {
+			refresh();
+			return;
+		}
 		if (key.ctrl && input === "a") {
 			setCursor(0);
 			return;
@@ -536,13 +2638,25 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
 			setCompletionIndex(0);
 		}
 	});
-	return createElement(Box, { flexDirection: "column" }, completionActive && !busy ? createElement(Box, {
-		flexDirection: "column",
-		marginLeft: 1
-	}, ...candidates.map((candidate, index) => createElement(Text, {
-		key: candidate.label,
-		color: index === completionIndex % candidates.length ? inkColor(TUI_RGB.brandBright) : inkColor(TUI_RGB.dim)
-	}, `${index === completionIndex % candidates.length ? "❯ " : "  "}${candidate.label} ${dim(displayText(candidate.description))}`)), createElement(Text, { dimColor: true }, dim("  ↑↓ choose · tab complete"))) : void 0, busy && value === "" ? createElement(Text, { dimColor: true }, dim("  enter steers the running turn · esc or ctrl+c cancels")) : void 0, createElement(Box, null, createElement(Text, { color: inkColor(TUI_RGB.brand) }, busy ? "… " : "❯ "), createElement(Text, null, value.slice(0, cursor)), createElement(Text, { inverse: true }, value.slice(cursor, cursor + 1) === "" ? " " : value.slice(cursor, cursor + 1)), createElement(Text, null, value.slice(cursor + 1))));
+	if (frozen) {
+		const frozen = value === "" ? "type a message" : verboseLine(value, Math.max(1, columns - 6));
+		return createElement(Box, {
+			borderStyle: "round",
+			borderColor: inkColor(TUI_RGB.dim),
+			paddingX: 1
+		}, createElement(Text, { wrap: "truncate-end" }, createElement(Text, { color: inkColor(TUI_RGB.brand) }, busy ? "… " : "❯ "), frozen));
+	}
+	const editor = editorWindow(value, cursor, Math.max(1, columns - 6));
+	return createElement(Box, { flexDirection: "column" }, createElement(CompletionMenu, {
+		active: menuActive,
+		mention: mentionActive,
+		index: completionIndex,
+		rows: menuRows
+	}), createElement(Box, {
+		borderStyle: "round",
+		borderColor: inkColor(TUI_RGB.dim),
+		paddingX: 1
+	}, createElement(Text, { wrap: "truncate-end" }, createElement(Text, { color: inkColor(TUI_RGB.brand) }, busy ? "… " : "❯ "), value === "" ? void 0 : editor.before, createElement(CursorBlock, { char: editor.caret }), value === "" && !busy ? createElement(Text, { dimColor: true }, "type a message · / commands · @ mentions") : editor.after)));
 }
 /** The whole terminal app; state arrives via the store, output via Ink. */
 function App(props) {
@@ -574,13 +2688,124 @@ function App(props) {
 		};
 	}, [modelOpen]);
 	const busy = view.busy;
-	return createElement(Box, { flexDirection: "column" }, createElement(Header, { resumed: props.resumed }), createElement(Box, {
+	const [showReasoning, setShowReasoning] = useState(false);
+	const [verboseOpen, setVerboseOpen] = useState(false);
+	const [helpOpen, setHelpOpen] = useState(false);
+	const [refreshEpoch, setRefreshEpoch] = useState(0);
+	const approvalSnapshot = useSyncExternalStore(props.approval.subscribe, props.approval.getSnapshot);
+	const questionSnapshot = useSyncExternalStore(props.questions.subscribe, props.questions.getSnapshot);
+	const approvalPending = approvalSnapshot.pending !== void 0;
+	const questionPending = questionSnapshot.pending !== void 0;
+	const inputActive = !modelOpen && !helpOpen && !verboseOpen && !approvalPending && !questionPending;
+	useEffect(() => {
+		if (!approvalPending && !questionPending) return;
+		setModelOpen(false);
+		setHelpOpen(false);
+		setVerboseOpen(false);
+	}, [approvalPending, questionPending]);
+	const settled = useMemo(() => settledEntryCount(view.entries), [view.entries]);
+	const settledRows = useMemo(() => {
+		const rows = [createElement(Header, {
+			key: "header",
+			resumed: props.resumed
+		})];
+		view.entries.slice(0, settled).forEach((entry, index) => {
+			const row = createElement(EntryLine, {
+				entry,
+				showReasoning,
+				verbose: false
+			});
+			if (entry.kind === "user" && index > 0) rows.push(createElement(Box, {
+				key: `gap-${index}`,
+				paddingX: 1
+			}, createElement(Text, null, " ")));
+			rows.push(createElement(Box, {
+				key: index,
+				paddingX: 1
+			}, row));
+		});
+		return rows;
+	}, [
+		view.entries,
+		settled,
+		showReasoning,
+		props.resumed
+	]);
+	const appStdout = useStdout().stdout;
+	const [terminalSize, setTerminalSize] = useState(() => ({
+		columns: appStdout?.columns ?? 80,
+		rows: appStdout?.rows ?? 30
+	}));
+	const terminalSizeRef = useRef(terminalSize);
+	useEffect(() => {
+		if (appStdout === void 0) return;
+		let replayTimer;
+		const handleResize = () => {
+			const next = {
+				columns: appStdout.columns ?? 80,
+				rows: appStdout.rows ?? 30
+			};
+			if (next.columns === terminalSizeRef.current.columns && next.rows === terminalSizeRef.current.rows) return;
+			terminalSizeRef.current = next;
+			setTerminalSize(next);
+			if (replayTimer !== void 0) clearTimeout(replayTimer);
+			replayTimer = setTimeout(() => {
+				appStdout.write(RESIZE_REFLOW_CLEAR);
+				setRefreshEpoch((epoch) => epoch + 1);
+			}, RESIZE_REFLOW_DELAY_MS);
+		};
+		appStdout.on("resize", handleResize);
+		return () => {
+			appStdout.off("resize", handleResize);
+			if (replayTimer !== void 0) clearTimeout(replayTimer);
+		};
+	}, [appStdout]);
+	const terminalRows = terminalSize.rows;
+	const terminalColumns = terminalSize.columns;
+	const dynamicRows = Math.max(1, terminalRows - 12);
+	const streamingActive = view.streaming !== "" || view.streamingReasoning !== "";
+	const deepDivingVisible = busy && !streamingActive;
+	const allLiveLines = useMemo(() => view.entries.slice(settled).flatMap((entry) => transcriptEntryLines(entry, Math.max(1, terminalColumns - 2))), [
+		view.entries,
+		settled,
+		terminalColumns
+	]);
+	const liveBudget = streamingActive ? Math.max(1, Math.floor(dynamicRows / 3)) : Math.max(0, dynamicRows - (deepDivingVisible ? 1 : 0));
+	const visibleLiveLines = liveBudget === 0 ? [] : allLiveLines.slice(-liveBudget);
+	const streamRows = Math.max(1, dynamicRows - visibleLiveLines.length);
+	const reasoningRows = view.streamingReasoning === "" ? 0 : view.streaming === "" ? streamRows : streamRows <= 1 ? 0 : showReasoning ? Math.max(1, Math.floor(streamRows / 3)) : 1;
+	const answerRows = view.streaming === "" ? 0 : Math.max(1, streamRows - reasoningRows);
+	const transcriptVisible = !modelOpen && !helpOpen && !verboseOpen && !approvalPending && !questionPending;
+	const modalVisible = modelOpen || helpOpen || verboseOpen && !approvalPending && !questionPending || approvalPending || questionPending;
+	const closeInspector = useCallback(() => {
+		setVerboseOpen(false);
+	}, []);
+	const refreshScreen = () => {
+		if (appStdout !== void 0) appStdout.write("\x1B[2J\x1B[3J\x1B[H");
+		setRefreshEpoch((epoch) => epoch + 1);
+	};
+	return createElement(Box, { flexDirection: "column" }, createElement(MemoStaticTranscript, {
+		key: refreshEpoch,
+		items: settledRows
+	}), transcriptVisible ? createElement(Box, {
 		flexDirection: "column",
 		paddingX: 1
-	}, ...view.entries.map((entry, index) => createElement(EntryLine, {
-		key: index,
-		entry
-	})), view.streaming !== "" ? createElement(Text, null, displayText(view.streaming)) : void 0, busy && view.streaming === "" ? createElement(Text, { dimColor: true }, "thinking…") : void 0), createElement(TodoPanel, { todos: view.todos }), createElement(ApprovalBar, { approval: props.approval }), modelOpen ? createElement(ModelPanel, {
+	}, visibleLiveLines.length === 0 ? void 0 : createElement(StyledRows, { lines: visibleLiveLines }), view.streamingReasoning !== "" && reasoningRows > 0 ? createElement(StreamTail, {
+		text: showReasoning ? view.streamingReasoning : "Thinking…",
+		prefix: "  ✻ ",
+		dim: true,
+		maxRows: reasoningRows
+	}) : void 0, view.streaming !== "" && answerRows > 0 ? createElement(StreamTail, {
+		text: view.streaming,
+		dim: false,
+		maxRows: answerRows
+	}, busy ? createElement(Caret) : void 0) : void 0, deepDivingVisible ? createElement(DeepDivingLine, { since: view.busySince }) : void 0) : void 0, transcriptVisible ? createElement(TodoPanel, { todos: view.todos }) : void 0, createElement(QuestionBar, {
+		store: props.questions,
+		locked: false
+	}), createElement(ApprovalBar, {
+		approval: props.approval,
+		locked: questionPending
+	}), modelOpen && !approvalPending && !questionPending ? createElement(ModelPanel, {
 		directory,
 		error: modelError,
 		onSelect: (row) => {
@@ -591,10 +2816,22 @@ function App(props) {
 		onClose: () => {
 			setModelOpen(false);
 		}
-	}) : void 0, createElement(Box, { flexDirection: "column" }, ...notices.slice(-3).map((notice, index) => createElement(Text, {
+	}) : void 0, helpOpen && !approvalPending && !questionPending ? createElement(HelpPanel, {
+		descriptors,
+		skills,
+		onClose: () => {
+			setHelpOpen(false);
+		}
+	}) : void 0, verboseOpen && !approvalPending && !questionPending ? createElement(MemoVerbosePanel, {
+		entries: view.entries,
+		onClose: closeInspector
+	}) : void 0, transcriptVisible ? createElement(Box, { flexDirection: "column" }, ...notices.slice(-1).map((notice, index) => createElement(Text, {
 		key: index,
-		dimColor: true
-	}, notice))), createElement(Input, {
+		dimColor: true,
+		wrap: "truncate-end"
+	}, displayText(notice)))) : void 0, createElement(Box, { flexDirection: "column" }, createElement(Input, {
+		active: inputActive,
+		frozen: modalVisible,
 		busy,
 		descriptors,
 		skills,
@@ -605,17 +2842,43 @@ function App(props) {
 		openModel: () => {
 			setModelOpen(true);
 		},
-		notify
+		openHelp: () => {
+			setHelpOpen(true);
+		},
+		notify,
+		openVerbose: () => {
+			setVerboseOpen(true);
+		},
+		clearView: () => {
+			props.store.reset();
+		},
+		refresh: refreshScreen,
+		toggleReasoning: () => {
+			setShowReasoning((current) => !current);
+		},
+		loadMentions: props.loadMentions,
+		cyclePermission: props.cyclePermission,
+		exportTranscript: props.exportTranscript,
+		renameTitle: props.renameTitle
 	}), createElement(StatusLine, {
 		facts: {
 			model: modelLabel,
 			cwd: props.cwd,
 			branch: props.branch,
-			sessionId: props.sessionId
+			sessionId: props.sessionId,
+			title: view.title,
+			plan: view.plan,
+			permission: view.permission,
+			sandbox: view.sandbox,
+			goal: view.goal === void 0 ? void 0 : {
+				phase: view.goal.phase,
+				rounds: view.goal.rounds,
+				max: view.goal.max
+			}
 		},
 		stats: view.stats,
 		busy
-	}));
+	})));
 }
 //#endregion
 //#region src/approval.ts
@@ -776,253 +3039,254 @@ async function loadModelDirectory(ctx) {
 	const llm = ctx.get("llm");
 	if (llm === void 0) return {
 		rows: [],
-		failures: []
-	};
-	const providers = llm.listProviders();
-	const listed = await Promise.all(providers.map(async (provider) => {
-		try {
-			const models = await llm.listModels(provider.id);
-			return {
-				provider: provider.id,
-				providerName: provider.name,
-				models: models.map((model) => ({
-					provider: provider.id,
-					providerName: provider.name,
-					model: model.id,
-					modelName: model.name
-				}))
-			};
-		} catch {
-			return {
-				provider: provider.id,
-				providerName: provider.name,
-				models: [],
-				failed: true
-			};
-		}
-	}));
-	return {
-		rows: listed.flatMap((entry) => entry.models),
-		failures: listed.filter((entry) => "failed" in entry && entry.failed === true).map((entry) => entry.provider)
-	};
-}
-//#endregion
-//#region src/render/projection.ts
-/**
-* Pure session-event-to-view projection for the TUI transcript: one reducer
-* over {@link SessionEvent}s producing the ordered entries the renderer draws.
-* Rendering never reads the session directly — this module owns the view
-* model, so tests drive it with plain event arrays.
-*
-* @module @deepseek-ai/dsh-tui/render/projection
-*/
-/** Join the text blocks of a content list; non-text blocks contribute nothing. */
-function textOf(content) {
-	return content.filter((block) => block.type === "text").map((block) => block.text).join("");
-}
-/** A fresh, empty transcript view. */
-function createTranscriptView() {
-	return {
-		entries: [],
-		streaming: "",
-		todos: [],
-		busy: false,
-		model: "",
-		stats: {
-			turns: 0,
-			steps: 0,
-			llmMs: 0,
-			toolMs: 0,
-			usage: {
-				inputTokens: 0,
-				outputTokens: 0,
-				cacheReadTokens: 0
-			}
-		},
-		anchors: {
-			stepStart: /* @__PURE__ */ new Map(),
-			toolStart: /* @__PURE__ */ new Map()
-		}
-	};
-}
-/**
-* Fold one session event into an updated view (copy-on-write).
-* @param view - the view before the event.
-* @param event - one durable session event from `session/event` or the log.
-* @returns the view after the event; the input view is never mutated.
-*/
-function projectEvent(view, event) {
-	switch (event.type) {
-		case "user/message": {
-			const message = event.data;
-			if (message.source.kind === "user") return {
-				...view,
-				entries: [...view.entries, {
-					kind: "user",
-					text: textOf(message.content)
-				}]
-			};
-			const notice = message.source.kind === "plugin" && message.source.form === "notice" ? message.source.summary : message.source.kind;
-			return {
-				...view,
-				entries: [...view.entries, {
-					kind: "user",
-					text: boundContextSummary(notice)
-				}]
-			};
-		}
-		case "assistant/chunk": {
-			const chunk = event.data.chunk;
-			if (chunk.type !== "text-delta") return view;
+		failures: []
+	};
+	const providers = llm.listProviders();
+	const listed = await Promise.all(providers.map(async (provider) => {
+		try {
+			const models = await llm.listModels(provider.id);
 			return {
-				...view,
-				streaming: view.streaming + chunk.text
+				provider: provider.id,
+				providerName: provider.name,
+				models: models.map((model) => ({
+					provider: provider.id,
+					providerName: provider.name,
+					model: model.id,
+					modelName: model.name
+				}))
 			};
-		}
-		case "assistant/message": {
-			const key = `${event.data.turn}:${event.data.step}`;
-			const started = view.anchors.stepStart.get(key);
-			view.anchors.stepStart.delete(key);
-			const usage = event.data.usage;
-			const totals = view.stats.usage;
+		} catch {
 			return {
-				...view,
-				streaming: "",
-				entries: [...view.entries, {
-					kind: "assistant",
-					text: textOf(event.data.message.content)
-				}],
-				stats: {
-					...view.stats,
-					llmMs: view.stats.llmMs + (started === void 0 ? 0 : Math.max(0, event.time - started)),
-					usage: usage === void 0 ? totals : {
-						inputTokens: totals.inputTokens + usage.inputTokens + (usage.cacheReadTokens ?? 0) + (usage.cacheWriteTokens ?? 0),
-						outputTokens: totals.outputTokens + usage.outputTokens,
-						cacheReadTokens: totals.cacheReadTokens + (usage.cacheReadTokens ?? 0)
-					}
-				}
+				provider: provider.id,
+				providerName: provider.name,
+				models: [],
+				failed: true
 			};
 		}
-		case "tool/call": {
-			const data = event.data;
-			view.anchors.toolStart.set(data.callId, event.time);
-			return {
-				...view,
-				entries: [...view.entries, {
-					kind: "tool",
-					callId: data.callId,
-					name: data.name,
-					arguments: data.arguments,
-					state: "running",
-					summary: ""
-				}]
-			};
+	}));
+	return {
+		rows: listed.flatMap((entry) => entry.models),
+		failures: listed.filter((entry) => "failed" in entry && entry.failed === true).map((entry) => entry.provider)
+	};
+}
+//#endregion
+//#region src/mentions.ts
+/**
+* Workspace @mention support: file candidates from a bounded async scan of
+* the session cwd, session candidates from the opt-in `sessionReferenceResolver`
+* service, and submission preparation through its `prepare()` API. Picked
+* session mentions land as canonical `@[label](dsh-session:…)` tokens; on
+* submit the text is parsed back into readable `@label` text plus structured
+* references, snapshots are injected via `agent.inject()` before the readable
+* message wakes the driver (`followup` idle, `steer` running) — exactly the
+* upstream README's wiring.
+*
+* @module @deepseek-ai/dsh-code/mentions
+*/
+/** Directories never entered and files never listed during the scan. */
+const SKIP_DIRS = /* @__PURE__ */ new Set([
+	".git",
+	"node_modules",
+	"lib",
+	"dist",
+	"out",
+	".omc",
+	"coverage"
+]);
+const MAX_FILES = 4e3;
+const MAX_DEPTH = 12;
+/** Bounded async BFS scan of a workspace; unreadable entries are skipped. */
+async function scanWorkspaceFiles(root, signal) {
+	const found = [];
+	const pending = [{
+		absolute: root,
+		relative: "",
+		depth: 0
+	}];
+	const aborted = () => signal?.aborted === true;
+	while (pending.length > 0 && found.length < MAX_FILES && !aborted()) {
+		const current = pending.shift();
+		if (current === void 0) break;
+		let entries;
+		try {
+			entries = await readdir(current.absolute, { withFileTypes: true });
+		} catch {
+			continue;
 		}
-		case "tool/result": {
-			const block = event.data.message.content[0];
-			const started = view.anchors.toolStart.get(block.toolCallId);
-			view.anchors.toolStart.delete(block.toolCallId);
-			const summary = boundContextSummary(textOf(block.content));
-			const entries = view.entries.map((entry) => {
-				if (entry.kind !== "tool" || entry.callId !== block.toolCallId) return entry;
-				return {
-					...entry,
-					state: block.isError === true ? "error" : "done",
-					summary
-				};
+		for (const entry of entries) {
+			if (found.length >= MAX_FILES || aborted()) return found;
+			if (entry.name.startsWith(".")) continue;
+			const relative = current.relative === "" ? entry.name : `${current.relative}/${entry.name}`;
+			if (entry.isDirectory()) {
+				if (SKIP_DIRS.has(entry.name) || current.depth + 1 > MAX_DEPTH) continue;
+				pending.push({
+					absolute: join(current.absolute, entry.name),
+					relative,
+					depth: current.depth + 1
+				});
+			} else if (entry.isFile()) found.push({
+				path: relative,
+				kind: "file"
 			});
-			return {
-				...view,
-				entries,
-				stats: {
-					...view.stats,
-					toolMs: view.stats.toolMs + (started === void 0 ? 0 : Math.max(0, event.time - started))
-				}
-			};
-		}
-		case "todo/write": return {
-			...view,
-			todos: event.data.todos
-		};
-		case "turn/start": return {
-			...view,
-			busy: true,
-			todos: [],
-			stats: {
-				...view.stats,
-				turns: view.stats.turns + 1
-			}
-		};
-		case "step/start":
-			view.anchors.stepStart.set(`${event.data.turn}:${event.data.step}`, event.time);
-			return {
-				...view,
-				stats: {
-					...view.stats,
-					steps: view.stats.steps + 1
-				}
-			};
-		case "turn/end": {
-			const reason = event.data.reason;
-			if (reason.kind !== "error") return {
-				...view,
-				busy: false
-			};
-			return {
-				...view,
-				busy: false,
-				entries: [...view.entries, {
-					kind: "error",
-					text: `${reason.error.code}: ${reason.error.message}`
-				}]
-			};
 		}
-		case "request/header": {
-			const config = event.data.header.config;
-			return {
-				...view,
-				model: `${config.provider}/${config.model}`
+	}
+	return found.sort((left, right) => left.path < right.path ? -1 : 1);
+}
+/** True when every query character appears in order in the haystack. */
+function isSubsequence(query, haystack) {
+	let at = 0;
+	for (const char of haystack) {
+		if (char === query[at]) at += 1;
+		if (at >= query.length) return true;
+	}
+	return at >= query.length;
+}
+/** Rank one file path against the typed query (community-TUI scoring shape). */
+function scoreFile(path, query) {
+	const name = path.slice(path.lastIndexOf("/") + 1);
+	if (query === "") return 0;
+	if (name === query) return 1e3;
+	if (name.startsWith(query)) return 900;
+	if (name.includes(query)) return 700;
+	if (path.includes(query)) return 500;
+	if (isSubsequence(query, name)) return 300;
+	return 0;
+}
+/**
+* Create the mention API for one agent's workspace. A missing
+* session-reference service degrades to file mentions only (the scan still
+* works); `prepare` then passes text through untouched.
+* @param ctx - context carrying the optional `sessionReferenceResolver`.
+* @param agent - the session owner; excluded from its own candidates.
+* @param cwd - workspace root to scan.
+*/
+function createMentions(ctx, agent, cwd) {
+	const resolver = ctx.get("sessionReferenceResolver");
+	let filesPromise;
+	return {
+		files() {
+			filesPromise ??= scanWorkspaceFiles(cwd);
+			return filesPromise;
+		},
+		async candidates(query, signal) {
+			const needle = query.trim();
+			const [files, sessions] = await Promise.all([this.files(), resolver === void 0 ? Promise.resolve([]) : resolver.listCandidates(agent, needle, 10, signal).catch(() => [])]);
+			const fileRows = files.filter((candidate) => scoreFile(candidate.path, needle) > 0).sort((left, right) => scoreFile(right.path, needle) - scoreFile(left.path, needle)).slice(0, 20).map((candidate) => ({
+				label: candidate.path,
+				description: candidate.kind === "directory" ? "Folder" : "File",
+				kind: candidate.kind
+			}));
+			return [...sessions.map((candidate) => ({
+				label: formatSessionReferenceMention(candidate),
+				description: `Session · ${candidate.cwd ?? "(no cwd)"}`,
+				kind: "session"
+			})), ...fileRows];
+		},
+		parse(text) {
+			return parseSessionReferenceText(text);
+		},
+		async prepare(parsed, signal) {
+			if (parsed.references.length === 0 || resolver === void 0) return {
+				text: parsed.text,
+				references: parsed.references
 			};
-		}
-		case "command/run": {
-			const data = event.data;
+			const prepared = await resolver.prepare(agent, [{
+				type: "text",
+				text: parsed.text
+			}], parsed.references, signal);
 			return {
-				...view,
-				entries: [...view.entries, {
-					kind: "command",
-					commandId: data.commandId,
-					name: data.name,
-					args: data.args ?? "",
-					state: "running",
-					summary: ""
-				}]
+				text: prepared.content.filter((block) => block.type === "text").map((block) => block.text).join(""),
+				references: parsed.references,
+				additionalContext: prepared.additionalContext
 			};
-		}
-		case "command/done": {
-			const data = event.data;
-			const entries = view.entries.map((entry) => {
-				if (entry.kind !== "command" || entry.commandId !== data.commandId) return entry;
-				return {
-					...entry,
-					state: data.kind === "success" ? "done" : "error",
-					summary: boundContextSummary(data.text ?? "")
-				};
+		},
+		sessionMention(candidate) {
+			return formatSessionReferenceMention({
+				sessionId: candidate.sessionId,
+				label: candidate.label
 			});
-			return {
-				...view,
-				entries
-			};
 		}
-		default: return view;
-	}
+	};
 }
+//#endregion
+//#region src/questions.ts
+const ABORT_ERROR = new UserQuestionError("ask_user_question was interrupted before the user answered", "ASK_ABORTED");
 /**
-* Fold a replayed event history into one view.
-* @param events - events in `seq` order.
-* @returns the folded view.
+* Mount the single `ctx.userQuestions` UI provider over a FIFO queue.
+* @param ctx - context carrying the `userQuestions` service (dsh-base).
+* @returns the store the renderer subscribes to; a context without the
+* service yields a permanently empty store.
 */
-function projectEvents(events) {
-	return events.reduce(projectEvent, createTranscriptView());
+function mountQuestionProvider(ctx) {
+	const service = ctx.get("userQuestions");
+	let snapshot = { pending: void 0 };
+	let active;
+	const queue = [];
+	const listeners = /* @__PURE__ */ new Set();
+	const set = (next) => {
+		snapshot = next;
+		for (const listener of listeners) listener();
+	};
+	/** Settle the active request and show the next queued one, if any. */
+	const advance = () => {
+		const next = queue.shift();
+		active = next;
+		set({ pending: next });
+	};
+	if (service !== void 0) service.registerProvider({ ask(request) {
+		return new Promise((resolve, reject) => {
+			const pending = {
+				request,
+				resolve,
+				reject
+			};
+			const onAbort = () => {
+				if (active === pending) {
+					active = void 0;
+					set({ pending: void 0 });
+					advance();
+				} else {
+					const at = queue.indexOf(pending);
+					if (at >= 0) queue.splice(at, 1);
+				}
+				reject(ABORT_ERROR);
+			};
+			if (request.signal?.aborted === true) {
+				reject(ABORT_ERROR);
+				return;
+			}
+			request.signal?.addEventListener("abort", onAbort, { once: true });
+			if (active === void 0) {
+				active = pending;
+				set({ pending });
+			} else queue.push(pending);
+		});
+	} });
+	return {
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		getSnapshot() {
+			return snapshot;
+		},
+		submit(pending, answers) {
+			if (active !== pending) return;
+			active = void 0;
+			set({ pending: void 0 });
+			pending.resolve(answers);
+			advance();
+		},
+		cancel(pending) {
+			if (active !== pending) return;
+			active = void 0;
+			set({ pending: void 0 });
+			pending.reject(ABORT_ERROR);
+			advance();
+		}
+	};
 }
 //#endregion
 //#region src/store.ts
@@ -1052,6 +3316,10 @@ function createTranscriptStore(replay) {
 			if (next === view) return;
 			view = next;
 			for (const listener of listeners) listener();
+		},
+		reset() {
+			view = createTranscriptView();
+			for (const listener of listeners) listener();
 		}
 	};
 }
@@ -1108,6 +3376,73 @@ function watchSkills(ctx) {
 	};
 }
 //#endregion
+//#region src/render/export.ts
+/**
+* Markdown export of one transcript view: the /export command's pure
+* formatter. Deterministic and side-effect free — the runner owns the file
+* write, so tests drive the builder with folded views directly.
+*
+* @module @deepseek-ai/dsh-code/render/export
+*/
+/**
+* Render the transcript as a standalone markdown document.
+* @param view - the folded transcript view to export.
+* @param sessionId - the full session identity for the header.
+* @returns the complete markdown text.
+*/
+function buildExportMarkdown(view, sessionId) {
+	const out = [
+		view.title === "" ? `# dsh session ${sessionId}` : `# ${view.title}`,
+		`> session ${sessionId}`,
+		""
+	];
+	for (const entry of view.entries) switch (entry.kind) {
+		case "user":
+			if (entry.notice) out.push(`> ⤷ context: ${entry.text}`, "");
+			else out.push("## user", "", entry.text, "");
+			break;
+		case "assistant":
+			if (entry.reasoning !== "") out.push("<details><summary>thinking</summary>", "", entry.reasoning, "", "</details>", "");
+			out.push("## assistant", "", entry.text, "");
+			break;
+		case "tool":
+			out.push(`### tool \`${entry.name}\``, "");
+			if (entry.preview !== "") out.push(`- args: ${entry.preview}`);
+			if (entry.summary !== "") out.push(`- ${entry.state === "error" ? "error" : "result"}: ${entry.summary}`);
+			out.push("");
+			break;
+		case "command":
+			out.push(`### /${entry.name}${entry.args === "" ? "" : ` ${entry.args}`}`, "");
+			if (entry.summary !== "") out.push(`- ${entry.state === "error" ? "error" : "result"}: ${entry.summary}`);
+			out.push("");
+			break;
+		case "error":
+			out.push(`> ⨯ ${entry.text}`, "");
+			break;
+		case "turn-marker":
+			out.push(`> ${entry.text}`, "");
+			break;
+		case "compaction":
+			out.push(entry.ok ? `> compacted ~${entry.tokens} tokens` : `> compaction failed: ${entry.error}`, "");
+			break;
+		case "retry":
+			out.push(`> retry ${entry.attempt}/${entry.max} (${entry.code})`, "");
+			break;
+		case "files":
+			out.push(`> files changed: ${entry.paths.join(", ")}`, "");
+			break;
+		default: assertNever(entry, "transcript entry kind");
+	}
+	if (view.streaming !== "") out.push("## assistant (streaming)", "", view.streaming, "");
+	const { stats } = view;
+	out.push("---", "");
+	out.push(`- model: ${view.model === "" ? "(none yet)" : view.model}`);
+	out.push(`- turns: ${stats.turns} · steps: ${stats.steps}`);
+	out.push(`- tokens: ↑${stats.usage.inputTokens} ↓${stats.usage.outputTokens} · cache read ${stats.usage.cacheReadTokens}`);
+	out.push(`- todos: ${view.todos.length}`);
+	return out.join("\n");
+}
+//#endregion
 //#region src/index.ts
 /**
 * @deepseek-ai/dsh-code — the interactive terminal driver. The bundle patch
@@ -1199,25 +3534,7 @@ function approvalCommandPreview(events, callId, toolName) {
 	if (callId === void 0) return "";
 	const entry = events.find((candidate) => candidate.kind === "tool" && candidate.callId === callId);
 	if (entry === void 0) return "";
-	const args = entry.arguments ?? "";
-	try {
-		const parsed = JSON.parse(args);
-		if (parsed !== null && typeof parsed === "object") {
-			const record = parsed;
-			for (const key of [
-				"command",
-				"cmd",
-				"description",
-				"path",
-				"pattern",
-				"query"
-			]) {
-				const value = record[key];
-				if (typeof value === "string" && value !== "") return value;
-			}
-		}
-	} catch {}
-	return args.length > 80 ? `${args.slice(0, 77)}...` : args === "" ? toolName : args;
+	return toolArgumentsPreview(entry.arguments ?? "", toolName);
 }
 /**
 * Run the interactive terminal session: resolve the target session, create or
@@ -1298,6 +3615,8 @@ async function run(ctx, startup, io) {
 	const skills = watchSkills(ctx);
 	skills.setAgent(agent);
 	const approval = mountApprovalAnswerer(ctx, (candidate) => candidate.id === agent.id, (request) => approvalCommandPreview(store.getView().entries, request.callId, request.toolName));
+	const questions = mountQuestionProvider(ctx);
+	const mentions = createMentions(ctx, agent, session.header.cwd ?? cwd);
 	const bridge = { notify: () => {} };
 	const mountRef = {};
 	let quitting = false;
@@ -1312,37 +3631,70 @@ async function run(ctx, startup, io) {
 			io.exit(0);
 		});
 	};
-	/** Dispatch one submitted line: slash commands to the registry, other text to the agent. */
-	const dispatch = (text) => {
+	/** Run one slash line through the command registry (closed namespace). */
+	const runSlash = (line) => {
+		const registry = ctx.get("commands");
+		if (registry === void 0) {
+			bridge.notify("no command registry is mounted in this composition");
+			return;
+		}
+		const controller = new AbortController();
+		registry.execute(agent, line, controller.signal).then((execution) => {
+			if (execution === void 0) agent.followup(createUserMessage({
+				content: [{
+					type: "text",
+					text: line
+				}],
+				source: { kind: "user" }
+			}));
+		}, (error) => {
+			bridge.notify(`command failed: ${error instanceof Error ? error.message : String(error)}`);
+		});
+	};
+	/** Deliver one readable line to the agent, expanding session mentions first. */
+	const send = (text, mode) => {
 		const line = text.trim();
 		if (line === "") return;
-		if (isSlashLine(line)) {
-			const registry = ctx.get("commands");
-			if (registry === void 0) {
-				bridge.notify("no command registry is mounted in this composition");
-				return;
-			}
-			const controller = new AbortController();
-			registry.execute(agent, line, controller.signal).then((execution) => {
-				if (execution === void 0) agent.followup(createUserMessage({
-					content: [{
-						type: "text",
-						text: line
-					}],
-					source: { kind: "user" }
-				}));
-			}, (error) => {
-				bridge.notify(`command failed: ${error instanceof Error ? error.message : String(error)}`);
+		if (isSlashLine(line) && mode === "followup") {
+			runSlash(line);
+			return;
+		}
+		let parsed;
+		try {
+			parsed = mentions.parse(line);
+		} catch (error) {
+			bridge.notify(`invalid session reference: ${error instanceof Error ? error.message : String(error)}`);
+			return;
+		}
+		const deliver = (readable, context) => {
+			if (context !== void 0) agent.inject(context);
+			const message = createUserMessage({
+				content: [{
+					type: "text",
+					text: readable
+				}],
+				source: { kind: "user" }
 			});
+			if (mode === "steer") {
+				agent.steer(message);
+				bridge.notify("steering queued — the next step sees it");
+			} else agent.followup(message);
+		};
+		if (parsed.references.length === 0) {
+			deliver(parsed.text);
 			return;
 		}
-		agent.followup(createUserMessage({
-			content: [{
-				type: "text",
-				text: line
-			}],
-			source: { kind: "user" }
-		}));
+		const controller = new AbortController();
+		mentions.prepare(parsed, controller.signal).then((prepared) => {
+			deliver(prepared.text, prepared.additionalContext);
+		}, (error) => {
+			if (controller.signal.aborted) return;
+			bridge.notify(`session reference failed: ${error instanceof Error ? error.message : String(error)}`);
+		});
+	};
+	/** Dispatch one submitted line: slash commands to the registry, other text to the agent. */
+	const dispatch = (text) => {
+		send(text, "followup");
 	};
 	/**
 	* Submit steering: a running driver consumes the text at its next step
@@ -1350,16 +3702,7 @@ async function run(ctx, startup, io) {
 	* a turn, so this doubles as the busy-state submit path.
 	*/
 	const steer = (text) => {
-		const line = text.trim();
-		if (line === "") return;
-		agent.steer(createUserMessage({
-			content: [{
-				type: "text",
-				text: line
-			}],
-			source: { kind: "user" }
-		}));
-		bridge.notify("steering queued — the next step sees it");
+		send(text, "steer");
 	};
 	/** Interrupt the running turn (Esc); true when a turn was actually cancelled. */
 	const interrupt = () => {
@@ -1368,6 +3711,23 @@ async function run(ctx, startup, io) {
 		bridge.notify("turn cancelled — Ctrl+C or /quit to exit");
 		return true;
 	};
+	/**
+	* Cycle to the next permission preset (Shift+Tab, the Claude-Code
+	* permission-mode convention mapped onto dsh presets). A session in a
+	* custom knob state wraps to the first declared preset.
+	*/
+	const cyclePermission = () => {
+		const service = ctx.get("permissionPresets");
+		if (service === void 0 || service.names.length === 0) {
+			bridge.notify("permission presets are not mounted in this composition");
+			return "";
+		}
+		const at = service.names.indexOf(service.current(session.events));
+		const next = service.names[(at + 1) % service.names.length] ?? "";
+		if (next === "") return "";
+		service.set(session, next);
+		return next;
+	};
 	/** Apply one /model selection: takes effect from the next assembled step. */
 	const selectModel = (row) => {
 		picked = {
@@ -1376,10 +3736,45 @@ async function run(ctx, startup, io) {
 		};
 		return `${row.provider}/${row.model}`;
 	};
+	/**
+	* Export the folded transcript to a markdown file (/export). The default
+	* target sits beside the session's cwd so the file lands in the user's
+	* workspace; an absolute or cwd-relative argument overrides it.
+	*/
+	const exportTranscript = async (argument) => {
+		const wanted = argument.trim();
+		const defaultName = `dsh-session-${session.id.slice(-8)}.md`;
+		const target = wanted === "" ? join(cwd, defaultName) : /^[a-zA-Z]:[\\/]/u.test(wanted) || wanted.startsWith("/") ? wanted : join(cwd, wanted);
+		const markdown = buildExportMarkdown(store.getView(), session.id);
+		try {
+			await writeFile(target, `${markdown}\n`, "utf8");
+			bridge.notify(`exported to ${target}`);
+		} catch (error) {
+			bridge.notify(`export failed: ${error instanceof Error ? error.message : String(error)}`);
+		}
+	};
+	/**
+	* Rename the session (/title): a user title pins the session and stops
+	* automatic generation (the service's own contract). The appended
+	* `session/title` event flows back through the store into the status line.
+	*/
+	const renameTitle = (argument) => {
+		const title = argument.trim();
+		if (title === "") return "usage: /title <text>";
+		const service = ctx.get("sessionTitle");
+		if (service === void 0) return "session titles are unavailable in this profile";
+		try {
+			service.rename(session, title);
+			return `title → ${title}`;
+		} catch (error) {
+			return `rename failed: ${error instanceof Error ? error.message : String(error)}`;
+		}
+	};
 	const initialModel = store.getView().model !== "" ? store.getView().model : `${defaults.provider}/${defaults.model}`;
 	mountRef.current = io.mount(createElement(App, {
 		store,
 		approval,
+		questions,
 		commands,
 		skills,
 		model: initialModel,
@@ -1392,7 +3787,11 @@ async function run(ctx, startup, io) {
 		interrupt,
 		quit,
 		loadModels: () => loadModelDirectory(ctx),
+		loadMentions: mentions.candidates,
+		cyclePermission,
 		selectModel,
+		exportTranscript,
+		renameTitle,
 		onBridgeReady: (instance) => {
 			bridge.notify = instance.notify;
 		}