@workerdeck/ui 0.16.0 → 0.18.0

package/build/{SessionPanel-DII9MmQ8.mjs → SessionPanel-DPx8Iz8a.mjs}

@@ -1,15 +1,15 @@
-import { a as formatDuration, c as formatRelativeTime, d as rateLimitWindowSeconds, f as toolInputPreview, i as formatCountdown, l as formatTokens, n as formatBytes, r as formatCost, s as formatRateLimitWindowLong, t as formatAgoPrecise } from "./format-DqR56Y8l.mjs";
+import { _ as formatRelativeTime, b as rateLimitWindowSeconds, d as formatBytes, f as formatCost, g as formatRateLimitWindowLong, m as formatDuration, p as formatCountdown, r as meterColorClass, u as formatAgoPrecise, v as formatTokens, x as toolInputPreview } from "./status-BE-zg88x.mjs";
 import { Fragment, createContext, forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cva } from "class-variance-authority";
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
-import { ArrowDown, ArrowDownCircle, ArrowUp, AtSign, Brain, ChartPie, Check, CheckSquare, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, ClipboardList, Clock, Code, Copy, Download, File, FileDiff, FileText, Folder, FolderSearch, FolderTree, Gauge, Globe, Hand, Image, Info, Link2, LoaderCircle, MessageCircleQuestion, MessageSquareText, MoreHorizontal, Paperclip, PencilLine, Plug, Power, PowerOff, Puzzle, RefreshCw, RotateCcw, RotateCw, Search, ShieldCheck, SlashSquare, Sparkles, Square, SquarePen, Terminal, TriangleAlert, UsersRound, WifiOff, Wrench, X, Zap } from "lucide-react";
+import { ArrowDown, ArrowDownCircle, ArrowLeft, ArrowUp, AtSign, Brain, ChartPie, Check, CheckSquare, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, ClipboardList, Clock, Code, Copy, Download, File, FileDiff, FileText, Folder, FolderSearch, FolderTree, Gauge, Globe, Hand, Image, Info, Link2, LoaderCircle, MessageCircleQuestion, MessageSquareText, MoreHorizontal, Paperclip, PencilLine, Plug, Power, PowerOff, Puzzle, RefreshCw, RotateCcw, RotateCw, Search, ShieldCheck, SlashSquare, Sparkles, Square, SquarePen, Terminal, TriangleAlert, UsersRound, WifiOff, Wrench, X, Zap } from "lucide-react";
 import { Menu } from "@base-ui/react/menu";
 import { Dialog } from "@base-ui/react/dialog";
 import { Tooltip } from "@base-ui/react/tooltip";
-import { PROTOCOL_VERSION, mergeUsage, orderUsageWindows, usageInfos } from "@workerdeck/protocol";
+import { PROTOCOL_VERSION, mergeUsage, orderUsageWindows, subagentLabel, usageInfos } from "@workerdeck/protocol";
 import { recapLine, scanPromptTokens, summarizeSince, useAttachments, useClaudeSession, useHostFileSearch, useProfileUsage, useToolCallHost } from "@workerdeck/react";
 import { Streamdown } from "streamdown";
 import { createPortal } from "react-dom";
@@ -4579,6 +4579,30 @@ function WithActions({ actions, children, className }) {
 * else is on, and reads as a button borrowed from another application. The tick
 * replaces the glyph in place, so the confirmation costs no width either.
 */
+/**
+* Open a sub-agent's own surface, as a character.
+*
+* A row **action** and not the row's press, because the press already means
+* expand/collapse and that is the cheaper, more common intent — a reader
+* glancing at what an agent did wants the four rows inline, not a new screen.
+* Taking over the panel is the deliberate move, so it gets the deliberate
+* target. Same zero-layout contract as `CopyAction`: it lives in the hover
+* actions overlay, so a collapsed Task row is exactly as tall with it as
+* without, which is what keeps the height book honest.
+*/
+function OpenSubagentAction({ onOpen, label = "Open sub-agent" }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "term-action",
+		title: label,
+		"aria-label": label,
+		onClick: (event) => {
+			event.stopPropagation();
+			onOpen();
+		},
+		children: "⤢"
+	});
+}
 function CopyAction({ text, label = "Copy" }) {
 	const [copied, setCopied] = useState(false);
 	return /* @__PURE__ */ jsx("button", {
@@ -5021,6 +5045,32 @@ function scrollParent(from) {
 	return null;
 }
 //#endregion
+//#region src/components/terminal/image-box.ts
+/**
+* What the box says before the fetch lands.
+*
+* `bytes` is the decoded size the gateway stamped on the reference — the client
+* holds no bytes at all until it asks for them, so this is a number it cannot
+* compute, the same reason `total_chars` rides beside a truncated head.
+* `formatBytes` rather than a spelling of its own: the panel says "336.0 KB"
+* everywhere else, and a second byte formatter is a second thing to keep in
+* step.
+*/
+function imagePlaceholder(image) {
+	return `image · ${formatBytes(image.bytes)}`;
+}
+/**
+* What it says when the fetch failed — a stale address after a dormant wake
+* (the route 404s rather than serving another call's pixels), a gateway too old
+* to know the route, a dropped connection.
+*
+* It occupies the same box, because the alternative is the row changing height
+* on a network failure. Silence is not an option here the way it is for
+* `HostImage`: that card names the host path in its result text, so a reader can
+* still find the picture; a replayed image part has no path to name.
+*/
+const IMAGE_UNAVAILABLE = "image unavailable";
+//#endregion
 //#region src/components/terminal/result-preview.ts
 /**
 * How much of a tool result a collapsed row shows, and what it says it hid.
@@ -5056,7 +5106,16 @@ const PREVIEW_CHARS = 400;
 * lines otherwise — a one-line JSON blob has no hidden lines to count, and
 * "+0 lines" under a visibly cut-off row is worse than saying nothing.
 */
-function collapsedResult(lines) {
+/**
+* `totalChars` is the **untruncated** length when the replay delivered only a
+* head (protocol's `ToolResultBlock.total_chars`). Passing it is not cosmetic:
+* computed from the head this row would say "… +7,600 chars" where the truth is
+* 641,003, and the wrong string is a *different pixel height* — which is exactly
+* the drift this module exists to prevent, since `height.ts` sizes the row by
+* wrapping this same text. Omitted for a whole result, where the lines are the
+* whole truth.
+*/
+function collapsedResult(lines, totalChars) {
 	const shown = [];
 	let chars = 0;
 	let cut = false;
@@ -5071,9 +5130,15 @@ function collapsedResult(lines) {
 		shown.push(line);
 		chars += line.length + 1;
 	}
+	const held = lines.join("\n").length;
+	const total = totalChars ?? held;
 	if (cut) return {
 		shown,
-		more: `… +${(lines.join("\n").length - chars).toLocaleString()} chars`
+		more: `… +${(total - chars).toLocaleString()} chars`
+	};
+	if (totalChars !== void 0 && total > held) return {
+		shown,
+		more: `… +${(total - chars).toLocaleString()} chars`
 	};
 	const hidden = lines.length - shown.length;
 	return {
@@ -5082,6 +5147,157 @@ function collapsedResult(lines) {
 	};
 }
 //#endregion
+//#region src/components/agent/tool-result-fetch.tsx
+const FetchContext = createContext(async () => false);
+function ToolResultFetchProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(FetchContext.Provider, {
+		value: value ?? noop$1,
+		children
+	});
+}
+const noop$1 = async () => false;
+function useToolResultFetcher() {
+	return useContext(FetchContext);
+}
+//#endregion
+//#region src/components/agent/tool-result-image.tsx
+const noop = async () => void 0;
+const ImageContext = createContext(noop);
+function ToolResultImageProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(ImageContext.Provider, {
+		value: value ?? noop,
+		children
+	});
+}
+function useToolResultImageLoader() {
+	return useContext(ImageContext);
+}
+/**
+* Long enough that a fast scrub through an image-heavy session fetches nothing
+* it flew past, short enough to be invisible to a reader who stopped.
+*
+* There is no second visibility system here on purpose: the transcript is
+* virtualized, so a *mounted* row is by definition within an overscan of the
+* viewport — the virtualizer already is the IntersectionObserver, and a second
+* answer to a question that has one is how the two disagree.
+*/
+const MOUNT_SETTLE_MS = 150;
+/**
+* One box's load, for either theme.
+*
+* Fires once the row has been mounted for {@link MOUNT_SETTLE_MS}, and then
+* **runs to completion** — an aborted fetch re-pays the whole image on the
+* return visit, and the gateway is HTTP/1.1, so the browser's per-origin
+* connection cap is the concurrency throttle for free.
+*
+* The effect keys on the address's *primitives*, never on the ref object: the
+* reducer replaces items on every streamed delta, so an object-identity dep
+* would re-run this on every token of the turn after it.
+*/
+function useToolResultImageSrc(ref) {
+	const load = useToolResultImageLoader();
+	const [state, setState] = useState({ failed: false });
+	const { toolUseId, sourceSeq, partIndex, mediaType, bytes } = ref;
+	useEffect(() => {
+		let live = true;
+		setState({ failed: false });
+		const timer = setTimeout(() => {
+			load({
+				toolUseId,
+				sourceSeq,
+				partIndex,
+				mediaType,
+				bytes
+			}).then((src) => {
+				if (live) setState({
+					src,
+					failed: src === void 0
+				});
+			}).catch(() => {
+				if (live) setState({ failed: true });
+			});
+		}, MOUNT_SETTLE_MS);
+		return () => {
+			live = false;
+			clearTimeout(timer);
+		};
+	}, [
+		load,
+		toolUseId,
+		sourceSeq,
+		partIndex,
+		mediaType,
+		bytes
+	]);
+	return state;
+}
+/** ~64 MB of decoded pictures held at once. At the corpus's 335 KB median that
+* is ~190 images, which no viewport holds; the budget exists so a session
+* scrolled end to end does not pin every screenshot it passed. */
+const CACHE_BUDGET_BYTES = 64 * 1024 * 1024;
+/**
+* `useHostImage`'s shape, generalized to the replay route — and **bounded**,
+* which `useHostImage` is not.
+*
+* The promise-per-key cache is what makes this callable from a transcript row at
+* all: rows re-render on every streamed delta, and an uncached resolver would
+* re-fetch each time. The LRU is the part that is new. Object URLs pin their
+* blob until revoked, so a fully-scrolled hundred-image session would otherwise
+* hold ~50 MB until the panel unmounted — and evicting means revoking, or the
+* eviction frees a `Map` entry and nothing else.
+*
+* Re-fetching on a return scroll is fine, and is the whole design: the bytes are
+* one authenticated request away, which is precisely what makes it cheap not to
+* have shipped them in the attach.
+*/
+function useToolResultImages(client, sessionId) {
+	const cache = useRef(/* @__PURE__ */ new Map());
+	useEffect(() => () => {
+		for (const entry of cache.current.values()) if (entry.url) URL.revokeObjectURL(entry.url);
+		cache.current.clear();
+	}, []);
+	return useCallback((ref) => {
+		if (!sessionId) return Promise.resolve(void 0);
+		const key = `${sessionId}:${ref.sourceSeq}:${ref.toolUseId}:${ref.partIndex}`;
+		const hit = cache.current.get(key);
+		if (hit) {
+			cache.current.delete(key);
+			cache.current.set(key, hit);
+			return hit.pending;
+		}
+		const pending = client.toolResultImage(sessionId, ref.sourceSeq, ref.toolUseId, ref.partIndex).then((blob) => {
+			if (blob.size === 0) return void 0;
+			const url = URL.createObjectURL(blob);
+			const entry = cache.current.get(key);
+			if (entry) {
+				entry.url = url;
+				entry.bytes = blob.size;
+				evict(cache.current, key);
+			} else URL.revokeObjectURL(url);
+			return url;
+		}).catch(() => void 0);
+		cache.current.set(key, {
+			pending,
+			bytes: ref.bytes
+		});
+		return pending;
+	}, [client, sessionId]);
+}
+/** Drop oldest-first until the held bytes fit the budget, revoking as it goes.
+* `keep` is the entry just resolved — evicting the picture a row is about to
+* draw would be a fetch spent on nothing. */
+function evict(cache, keep) {
+	let held = 0;
+	for (const entry of cache.values()) held += entry.bytes;
+	for (const [key, entry] of cache) {
+		if (held <= CACHE_BUDGET_BYTES) return;
+		if (key === keep) continue;
+		if (entry.url) URL.revokeObjectURL(entry.url);
+		cache.delete(key);
+		held -= entry.bytes;
+	}
+}
+//#endregion
 //#region src/components/terminal/tool-run.ts
 /**
 * What breaks a run.
@@ -5138,8 +5354,305 @@ function runSummary(items, busy) {
 	const breakdown = [...counts.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([family, count]) => `${count} ${family}`).join(", ");
 	return `${verb}${n} tool${n === 1 ? "" : "s"} · ${breakdown}${tail}`;
 }
+const clip = (text, max = 80) => text.length > max ? text.slice(0, max - 1) + "…" : text;
+const trimmed = (value) => typeof value === "string" && value.trim() !== "" ? value.trim() : void 0;
+/**
+* The row's identity half: which task this is.
+*
+* The Claude SDK's `Task` input carries `subagent_type` (e.g. "Explore") and a
+* 3–5 word `description`, and both are worth the line: parallel tasks are the
+* whole reason the block exists, and two rows both reading `Task(…)` answer
+* nothing. `Task(Explore · find the auth check)` — falling back to the
+* ordinary input preview when an engine sends neither, so the header is never
+* emptier than a plain tool row's.
+*/
+function taskLabel(task) {
+	return `${task.name}(${taskIdentity(task)})`;
+}
+/**
+* The inner half of {@link taskLabel} — `Explore · find the auth check` — without
+* the `Task(…)` wrapper.
+*
+* Split out for the sub-agent takeover's header, which names the agent it is
+* showing and has no room (or reason) to repeat the tool's own name: the whole
+* surface *is* that Task. Extracted rather than re-spelled so the header and the
+* row it was opened from cannot drift, and so both keep matching protocol's
+* `subagentLabel`, which reads the same two input fields for the sessions list.
+*/
+function taskIdentity(task) {
+	const input = task.input;
+	const description = trimmed(input?.description);
+	const agent = trimmed(input?.subagent_type);
+	return agent && description ? `${agent} · ${clip(description)}` : agent ?? (description ? clip(description) : toolInputPreview(task.input));
+}
+/**
+* **What this agent was actually asked** — the sub-agent's brief, or undefined
+* when the engine did not give us one.
+*
+* Measured against a live session rather than assumed: the Agent SDK's call
+* carries `{description, subagent_type, run_in_background, prompt}`, and
+* `prompt` is the instruction.
+*
+* **Whether it also arrives in the stream depends on the agent.** A foreground
+* `Task` forwards its brief as a real nested `user_message` (that is what
+* `forwardSubagentText` buys and what the reducer stamps a `parentToolUseId`
+* on), so `subagentItems` picks it up and the frame already has it. A
+* **background** agent does not: measured on a session with eight of them,
+* zero items carried a `parentToolUseId` on a `user` kind. Those runs are
+* exactly the ones you open a takeover on — an agent working while you read
+* something else — and their brief was nowhere at all.
+*
+* So this is the *fallback*, not the source: the callers splice it in only when
+* the frame carries no brief of its own, or the same instruction would be drawn
+* twice.
+*
+* `description` is deliberately not a fallback: it is the 3–5 word label the
+* header already prints, and repeating it as a brief would claim we know the
+* instruction when we do not. **Codex genuinely has none** — its `spawn_agent`
+* message is an encrypted blob on the wire — so on that engine this is
+* undefined and the row is not drawn, rather than drawn empty.
+*/
+function taskBrief(task) {
+	const input = task.input;
+	return trimmed(input?.prompt);
+}
+const callBusy = (call) => call.status === "running" || call.status === "pending";
+/** Did this one call fail? Both spellings are needed: an out-of-loop execution
+* failure sets `status` with no `is_error` block to read, and an engine can flag
+* `is_error` on a call the reducer has not settled yet. */
+const callFailed = (call) => call.status === "failed" || call.result?.isError === true;
+/**
+* Does a folded run colour red? **Only when its last call failed.**
+*
+* It used to be `some`, on the argument that a failure should colour the block
+* rather than fragment it. The argument was right about not fragmenting and
+* wrong about `some`: a run is a sequence the model worked through, and a
+* failure it recovered from two calls later is how work goes — a grep that
+* matched nothing, a build fixed on the second go. Reddening the whole run for
+* it means a normal working session is painted red, which spends the colour
+* that should have been left for the one thing still broken.
+*
+* The last call is the run's *outcome*, and an outcome is what a collapsed row
+* can honestly claim. The failures inside it are not hidden — they are one
+* press away, each red on its own row, and the recap counts every one. The
+* **scrubber agrees with this rule** rather than overriding it: it marks a
+* failed call only when the call is its row's outcome, which for a run is
+* exactly this one. It used to mark every member on the argument that the
+* rail asks a different question; against a real session that was nine alarms
+* on the rail for a transcript reddening one row.
+*/
+function runFailed(items) {
+	const last = items[items.length - 1];
+	return last !== void 0 && callFailed(last);
+}
+/** Is anything inside still going? The call itself, normally — the Task
+* settles only when its subagent finishes — but a bridged or deferred child
+* can outlive it, and a pulse that stopped while a child still worked would
+* read as a hang. */
+function taskBusy(task, children) {
+	return callBusy(task) || children.some((child) => child.kind === "tool_call" && callBusy(child));
+}
+/**
+* Does the row colour red? **The task's own outcome, and nothing else.**
+*
+* It used to be "or any child call's", which does not survive contact with a
+* real subagent: an agent that ran a hundred calls, one of them a grep that
+* matched nothing, came back with a red line saying it had failed. It had not —
+* it had done exactly what it was asked, and the transcript said otherwise in
+* the one colour reserved for things that need a human.
+*
+* This is the call `SubagentInfo.status` already makes, and it made it for this
+* reason (see `packages/protocol`): the sub-agent's **own** `tool_result`
+* `is_error`, deliberately not `taskFailed`. The argument there was that a
+* nothing-matched grep must not read as a failed run *beside a session name*;
+* what a hundred-call agent shows is that it must not read that way beside the
+* `Task` row either. Two surfaces, one rule, one spelling.
+*
+* Nothing is concealed by this. A failed child is red on its own row, one press
+* away, and the recap counts it. The **scrubber follows this rule too** and no
+* longer marks such a child: a red tick on the rail says precisely what this
+* row is forbidden from saying. The sub-agent band still says an agent ran
+* here, and the task's own red tick still says it came back broken — which is
+* what the two channels are for.
+*/
+function taskFailed(task) {
+	return callFailed(task);
+}
+/**
+* The collapsed task row's one line: identity, then scale.
+*
+* `Task(Explore · find the auth check) · 7 tools…` while the subagent works —
+* the count grows as it does, which is the row's progress reading, and the
+* trailing ellipsis is the same in-flight signal `runSummary` uses (the pulse
+* in the gutter carries the beat). Settled, the ellipsis drops:
+* `… · 7 tools`. "Tools" and not "tool calls" because `runSummary` already
+* chose that word for the same count one row over.
+*
+* The counts are counted from the absorbed children, never read from the
+* engine's structured Task output — WorkerDeck does not plumb structured tool
+* results to clients, so a transcript replayed tomorrow must spell the same
+* line from the same items it holds today.
+*
+* With no tool calls yet — the subagent thinking, or only its brief arrived —
+* the line says `working…`, because `0 tools…` reads as a stall; settled with
+* none it says `done`.
+*/
+function taskSummary(task, children) {
+	const busy = taskBusy(task, children);
+	const calls = children.reduce((n, child) => n + (child.kind === "tool_call" ? 1 : 0), 0);
+	const label = taskLabel(task);
+	if (calls === 0) return busy ? `${label} · working…` : `${label} · done`;
+	return `${label} · ${calls} tool${calls === 1 ? "" : "s"}${busy ? "…" : ""}`;
+}
+//#endregion
+//#region src/components/terminal/blocks.ts
+/**
+* The id of the tool call this item was produced inside, or `undefined` at the
+* top level. One spelling for both shapes the reducer emits: `assistant_text`
+* / `thinking` / `tool_call` carry `parentToolUseId: string | null` on every
+* instance, while `user` carries it **optionally** (a human prompt has no
+* parent at all — the key exists only on a subagent's brief). Callers must go
+* through this rather than reading the field, or the absent-key case silently
+* types as a compile error on one kind and a miss on another.
+*/
+function parentOf(item) {
+	return ("parentToolUseId" in item ? item.parentToolUseId : void 0) ?? void 0;
+}
+/**
+* **The frame membership rule**: the items a sub-agent produced, and nothing
+* else — what the takeover renders instead of the whole conversation.
+*
+* One exported function rather than a `filter` at each call site, because this
+* is a rule two renderers have to agree on: iOS mirrors the terminal model out
+* of this module, and a phone that framed a sub-agent slightly differently would
+* be a second answer to "what is this agent doing".
+*
+* It picks up the brief (a `user` item *with* a parent), the thinking, the
+* streamed text (deltas are namespaced per sidechain, so `streaming:<parentId>`
+* carries the parent like any other item), every tool call with its result, and
+* the final report. It excludes the spawning `Task` call itself — that is the
+* frame, not a row in it — and every other agent's work.
+*
+* The slice is safe to hand straight to {@link terminalBlocks} at offset 0:
+* nothing in it is top-level, so nothing absorbs, and consecutive calls still
+* fold into runs because {@link foldsTogether} keys on an *equal* parent rather
+* than on absence of one. Row indices are internally consistent because the rows
+* and the `items` they came from are the same array.
+*/
+function subagentItems(items, parentToolUseId) {
+	return items.filter((item) => parentOf(item) === parentToolUseId);
+}
+/** Is this a row the transcript folds into a run? Any tool call is — see
+* `tool-run.ts` for why this is no longer shell-only. */
+function isRunCall(item) {
+	return item.kind === "tool_call";
+}
+/** The absorbed items, flat and in stream order — what `taskSummary` counts
+* and the collapsed row's one line is built from. */
+function taskChildItems(block) {
+	return block.children.flatMap((child) => "run" in child ? child.run : [child.item]);
+}
+/** Append one item to a leaf-block list, folding it into the previous run when
+* the membership rule allows — the one fold implementation, used for the
+* top-level stream and for each task's children alike. */
+function pushLeaf(out, item, index) {
+	const previous = out.at(-1);
+	if (isRunCall(item)) {
+		if (previous && "run" in previous && foldsTogether(previous.run[0], item)) {
+			previous.run.push(item);
+			previous.indices.push(index);
+		} else out.push({
+			key: `run:${item.id}`,
+			run: [item],
+			indices: [index],
+			index
+		});
+		return;
+	}
+	out.push({
+		key: `${item.kind}:${item.id}`,
+		item,
+		index
+	});
+}
+/**
+* @param offset  What `items[0]`'s index is in the whole transcript — the
+*   virtualized shell folds each side of the recap boundary separately, and the
+*   rows still have to say where they sit for the catch-up dimming.
+* @param fold    Whether to group at all. `false` gives one block per item —
+*   no runs *and no task absorption* — which is what the cards variant
+*   renders: this is the terminal theme's rule and must not silently reshape
+*   another renderer's row list.
+*/
+function terminalBlocks(items, offset = 0, fold = true) {
+	if (!fold) return items.map((item, position) => ({
+		key: `${item.kind}:${item.id}`,
+		item,
+		index: offset + position
+	}));
+	const topLevelCalls = /* @__PURE__ */ new Set();
+	for (const item of items) if (item.kind === "tool_call" && parentOf(item) === void 0) topLevelCalls.add(item.id);
+	const childrenOf = /* @__PURE__ */ new Map();
+	items.forEach((item, position) => {
+		const parent = parentOf(item);
+		if (parent !== void 0 && topLevelCalls.has(parent)) {
+			const list = childrenOf.get(parent);
+			if (list) list.push({
+				item,
+				index: offset + position
+			});
+			else childrenOf.set(parent, [{
+				item,
+				index: offset + position
+			}]);
+		}
+	});
+	const out = [];
+	for (const [position, item] of items.entries()) {
+		const index = offset + position;
+		const parent = parentOf(item);
+		if (parent !== void 0 && childrenOf.has(parent)) continue;
+		if (item.kind === "tool_call") {
+			const children = childrenOf.get(item.id);
+			if (children) {
+				const folded = [];
+				for (const child of children) pushLeaf(folded, child.item, child.index);
+				out.push({
+					key: `task:${item.id}`,
+					task: item,
+					children: folded,
+					childIndices: children.map((child) => child.index),
+					index
+				});
+				continue;
+			}
+		}
+		pushLeaf(out, item, index);
+	}
+	return out;
+}
+/** Spacing between two items: a blank line, unless the pair belongs together.
+* Tool output already sits under its call, and a run of tool calls reads as one
+* block — the CLI leaves no blank line inside either. */
+function needsBlank(previous, next) {
+	if (previous.kind === "tool_call" && next.kind === "tool_call") return false;
+	return true;
+}
+/** The same rule over blocks: a run counts as the tool calls it folded, and a
+* task block counts as the `Task` call it stands for — a collapsed task row
+* sits flush with the tool rows of the same turn, exactly as the call itself
+* did before it grew children. */
+function blockNeedsBlank(previous, next) {
+	const kind = (block) => "item" in block ? block.item.kind : "tool_call";
+	return !(kind(previous) === "tool_call" && kind(next) === "tool_call");
+}
 /** How much the expanded row shows before offering the rest. The collapsed
-* budget is `collapsedResult`'s, shared with the height calculator. */
+* budget is `collapsedResult`'s, shared with the height calculator.
+*
+* Exported for one test and not from the package: protocol's
+* `TOOL_RESULT_HEAD_CHARS` is chosen to exceed it, so that a truncated result's
+* open state is byte-identical to an untruncated one and only the uncapped
+* `full` press ever fetches. That relationship is asserted, not assumed. */
 const RESULT_PREVIEW_CHARS$1 = 2e3;
 /** Whole lines up to a character budget — never zero, because a single line
 * longer than the budget still has to be shown or the row would open onto
@@ -5209,6 +5722,8 @@ const TOOL_TONE = {
 function ToolRow({ item }) {
 	const [open, setOpen] = useState(false);
 	const [full, setFull] = useState(false);
+	const [fetching, setFetching] = useState(false);
+	const fetchResult = useToolResultFetcher();
 	const reveal = useRevealOnOpen(open);
 	const status = item.status ?? (item.result === void 0 ? "running" : "settled");
 	const busy = status === "running" || status === "pending";
@@ -5216,10 +5731,12 @@ function ToolRow({ item }) {
 	const pulse = usePulse(busy);
 	const text = item.result?.text ?? "";
 	const lines = text.trimEnd().split("\n");
-	const collapsed = collapsedResult(lines);
+	const collapsed = collapsedResult(lines, item.result?.totalChars);
 	const preview = open ? full ? lines : clipToChars(lines, RESULT_PREVIEW_CHARS$1) : collapsed.shown;
 	const hidden = lines.length - preview.length;
 	const clipped = open && !full && hidden > 0;
+	const truncated = item.result?.truncated === true;
+	const missing = truncated ? (item.result?.totalChars ?? 0) - text.length : 0;
 	const tone = isError ? "red" : status === "settled" && isMutatingTool(item.name) ? "green" : TOOL_TONE[status] ?? "dim";
 	const command = item.input?.command;
 	const copyable = typeof command === "string" ? command : text;
@@ -5231,76 +5748,123 @@ function ToolRow({ item }) {
 				text: copyable,
 				label: "Copy"
 			}) : null,
-			children: [/* @__PURE__ */ jsx(Pressable, {
-				onPress: () => setOpen((v) => !v),
-				expanded: open,
-				children: /* @__PURE__ */ jsxs(Row, {
-					glyph: busy ? pulse : "●",
-					glyphTone: tone,
-					tone: "fg",
-					children: [
-						/* @__PURE__ */ jsx(Ink, {
-							bold: true,
-							tone: "bright",
-							children: item.name
-						}),
-						/* @__PURE__ */ jsxs(Ink, {
-							tone: "dim",
-							children: [
-								"(",
-								toolInputPreview(item.input),
-								")"
-							]
-						}),
-						item.backend && item.backend !== "server" ? /* @__PURE__ */ jsxs(Ink, {
-							tone: "faint",
-							children: [" · ", item.backend]
-						}) : null
-					]
-				})
-			}), item.patch && !open ? /* @__PURE__ */ jsx(TerminalDiff, { patch: item.patch }) : text ? /* @__PURE__ */ jsxs(Fragment$1, { children: [preview.map((line, index) => /* @__PURE__ */ jsx(Row, {
-				indent: 1,
-				columns: 3,
-				glyph: index === 0 ? "⎿" : void 0,
-				tone: isError ? "red" : "dim",
-				children: line || "\xA0"
-			}, index)), !open ? collapsed.more ? /* @__PURE__ */ jsx(Row, {
-				indent: 1,
-				columns: 3,
-				tone: "faint",
-				children: collapsed.more
-			}) : null : hidden > 0 ? /* @__PURE__ */ jsx(Row, {
-				indent: 1,
-				columns: 3,
-				tone: "faint",
-				children: clipped ? /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					className: "term-press term-link",
-					onClick: () => setFull(true),
+			children: [
+				/* @__PURE__ */ jsx(Pressable, {
+					onPress: () => setOpen((v) => !v),
+					expanded: open,
+					children: /* @__PURE__ */ jsxs(Row, {
+						glyph: busy ? pulse : "●",
+						glyphTone: tone,
+						tone: "fg",
+						children: [
+							/* @__PURE__ */ jsx(Ink, {
+								bold: true,
+								tone: "bright",
+								children: item.name
+							}),
+							/* @__PURE__ */ jsxs(Ink, {
+								tone: "dim",
+								children: [
+									"(",
+									toolInputPreview(item.input),
+									")"
+								]
+							}),
+							item.backend && item.backend !== "server" ? /* @__PURE__ */ jsxs(Ink, {
+								tone: "faint",
+								children: [" · ", item.backend]
+							}) : null
+						]
+					})
+				}),
+				item.result?.images?.map((image) => /* @__PURE__ */ jsx(TerminalImage, {
+					toolUseId: item.id,
+					image
+				}, image.partIndex)),
+				item.patch && !open ? /* @__PURE__ */ jsx(TerminalDiff, { patch: item.patch }) : text ? /* @__PURE__ */ jsxs(Fragment$1, { children: [preview.map((line, index) => /* @__PURE__ */ jsx(Row, {
+					indent: 1,
+					columns: 3,
+					glyph: index === 0 ? "⎿" : void 0,
+					tone: isError ? "red" : "dim",
+					children: line || "\xA0"
+				}, index)), !open ? collapsed.more ? /* @__PURE__ */ jsx(Row, {
+					indent: 1,
+					columns: 3,
+					tone: "faint",
+					children: collapsed.more
+				}) : null : clipped || truncated ? /* @__PURE__ */ jsx(Row, {
+					indent: 1,
+					columns: 3,
+					tone: "faint",
+					children: fetching ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						"… fetching ",
+						(item.result?.totalChars ?? 0).toLocaleString(),
+						" chars"
+					] }) : clipped || truncated ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "term-press term-link",
+						onClick: () => {
+							setFull(true);
+							if (!truncated) return;
+							setFetching(true);
+							fetchResult(item.id).finally(() => setFetching(false));
+						},
+						children: truncated ? `… +${missing.toLocaleString()} chars — fetch the rest` : `… +${hidden} line${hidden === 1 ? "" : "s"} — show all ${text.length.toLocaleString()} chars`
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						"… +",
+						hidden,
+						" line",
+						hidden === 1 ? "" : "s"
+					] })
+				}) : hidden > 0 ? /* @__PURE__ */ jsxs(Row, {
+					indent: 1,
+					columns: 3,
+					tone: "faint",
 					children: [
 						"… +",
 						hidden,
 						" line",
-						hidden === 1 ? "" : "s",
-						" — show all",
-						" ",
-						text.length.toLocaleString(),
-						" chars"
+						hidden === 1 ? "" : "s"
 					]
-				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					"… +",
-					hidden,
-					" line",
-					hidden === 1 ? "" : "s"
-				] })
-			}) : null] }) : null]
+				}) : null] }) : null
+			]
 		})
 	});
 }
-/** Is this a row the transcript folds into a run? Any tool call is — see
-* `tool-run.ts` for why this is no longer shell-only. */
-function isRunCall(item) {
-	return item.kind === "tool_call";
+/**
+* A picture a tool returned, in a box of {@link IMAGE_BOX_LINES} whole lines.
+*
+* **Three states, one height.** Before the fetch lands the box is a wash and the
+* size the gateway declared; after it, the picture, letterboxed inside the same
+* box; on a refusal, `image unavailable` in it. Nothing here may ever collapse
+* to nothing — that is `HostImage`'s return-null-then-pop, which in a
+* *virtualized* list is not a flicker but a reflow of every row below it, and
+* the height calculator would have been lying about the row from plan time.
+*
+* The box is why the calculator can stay exact: it is a constant, not a function
+* of pixels nobody has downloaded yet.
+*/
+function TerminalImage({ toolUseId, image }) {
+	const { src, failed } = useToolResultImageSrc({
+		toolUseId,
+		...image
+	});
+	return /* @__PURE__ */ jsx(Row, {
+		indent: 1,
+		columns: 3,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "term-image",
+			"data-state": src ? "loaded" : failed ? "failed" : "pending",
+			style: { height: `calc(var(--term-line) * 12)` },
+			children: src ? /* @__PURE__ */ jsx("img", {
+				src,
+				alt: imagePlaceholder(image)
+			}) : /* @__PURE__ */ jsx(Ink, {
+				tone: "faint",
+				children: failed ? IMAGE_UNAVAILABLE : imagePlaceholder(image)
+			})
+		})
+	});
 }
 /**
 * A run of tool calls, as one line.
@@ -5312,10 +5876,11 @@ function isRunCall(item) {
 * collapses to its count and gets out of the way — and opens, in full, the
 * moment it is the thing you actually want.
 *
-* The membership and wording rules live in `tool-run.ts`, shared with the height
-* calculator. A failed member does not break the run — it *colours* it, which is
-* the same call the scrubber makes: a failure is worth seeing, and fragmenting
-* the run around it would hide it in a longer list rather than surface it.
+* The membership, wording and failure rules live in `tool-run.ts`, shared with
+* the height calculator. A failure never breaks the run — fragmenting it around
+* one would hide the failure in a longer list rather than surface it — but only
+* the run's **last** call colours it, because that is the run's outcome and an
+* outcome is what a collapsed row can honestly claim (see `runFailed`).
 */
 function ToolRunRow({ items }) {
 	const [open, setOpen] = useState(false);
@@ -5324,7 +5889,7 @@ function ToolRunRow({ items }) {
 		const status = item.status ?? (item.result === void 0 ? "running" : "settled");
 		return status === "running" || status === "pending";
 	});
-	const failed = items.some((item) => item.status === "failed" || item.result?.isError === true);
+	const failed = runFailed(items);
 	const pulse = usePulse(busy);
 	return /* @__PURE__ */ jsxs("div", {
 		ref: reveal,
@@ -5341,36 +5906,6 @@ function ToolRunRow({ items }) {
 		}), open ? /* @__PURE__ */ jsx("div", { children: items.map((item) => /* @__PURE__ */ jsx(ToolRow, { item }, item.id)) }) : null]
 	});
 }
-/**
-* @param offset  What `items[0]`'s index is in the whole transcript — the
-*   virtualized shell folds each side of the recap boundary separately, and the
-*   rows still have to say where they sit for the catch-up dimming.
-* @param fold    Whether to group at all. `false` gives one block per item,
-*   which is what the cards variant renders: this is the terminal theme's rule
-*   and must not silently reshape another renderer's row list.
-*/
-function terminalBlocks(items, offset = 0, fold = true) {
-	const out = [];
-	for (const [position, item] of items.entries()) {
-		const index = offset + position;
-		const previous = out.at(-1);
-		if (fold && isRunCall(item)) {
-			if (previous && "run" in previous && foldsTogether(previous.run[0], item)) previous.run.push(item);
-			else out.push({
-				key: `run:${item.id}`,
-				run: [item],
-				index
-			});
-			continue;
-		}
-		out.push({
-			key: `${item.kind}:${item.id}`,
-			item,
-			index
-		});
-	}
-	return out;
-}
 function TurnResultRow$1({ item }) {
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(Row, {
 		tone: item.isError ? "red" : "faint",
@@ -5456,19 +5991,6 @@ function WorkingRow({ label, startedAt, tokens }) {
 		}) : null]
 	});
 }
-/** Spacing between two items: a blank line, unless the pair belongs together.
-* Tool output already sits under its call, and a run of tool calls reads as one
-* block — the CLI leaves no blank line inside either. */
-function needsBlank(previous, next) {
-	if (previous.kind === "tool_call" && next.kind === "tool_call") return false;
-	return true;
-}
-/** The same rule over blocks: a shell run counts as the tool calls it folded. */
-function blockNeedsBlank(previous, next) {
-	const before = "run" in previous ? "tool_call" : previous.item.kind;
-	const after = "run" in next ? "tool_call" : next.item.kind;
-	return !(before === "tool_call" && after === "tool_call");
-}
 //#endregion
 //#region src/components/terminal/surface.tsx
 function TerminalSurface({ fontSize, lineHeight, bleed, affordances, className, style, children, ...props }) {
@@ -6946,6 +7468,101 @@ function PermissionPrompt({ request, onApprove, onDeny, className }) {
 	});
 }
 //#endregion
+//#region src/components/agent/SubagentStrip.tsx
+/**
+* The one line above a sub-agent takeover: who this is, how it is doing, and the
+* way back.
+*
+* **It claims exactly what the `TaskRow` it was opened from claims** — the same
+* `taskBusy` / `taskFailed` / tool count over the same items — and deliberately
+* *not* `SubagentInfo.status`. Protocol documents those two as divergent on
+* purpose (`index.ts:1476-1487`), but that divergence is transcript-versus-*list*
+* and this surface **is** the transcript. The disagreement that must not exist
+* here is between a header and the rows directly beneath it.
+*
+* The rollup is still allowed one job — naming an agent whose `Task` call is not
+* in the transcript — because a label is not content, and `SessionInfo.subagents`
+* keeps only eight settled records (`SUBAGENT_HISTORY`), so it can never be the
+* source of what a frame *shows*.
+*
+* Both variants, because the panel has two and a strip that only existed in one
+* would make the takeover a terminal-theme feature rather than a session feature.
+*/
+function SubagentStrip({ task, items, label, onBack, terminal, fontSize, lineHeight }) {
+	const busy = task ? taskBusy(task, items) : false;
+	const failed = task ? taskFailed(task) : false;
+	const pulse = usePulse(busy);
+	const tools = items.reduce((n, item) => n + (item.kind === "tool_call" ? 1 : 0), 0);
+	const startedAt = busy ? task?.ts : void 0;
+	const now = useTicker(startedAt !== void 0);
+	const elapsed = startedAt === void 0 ? void 0 : formatDuration(now - startedAt);
+	const name = task ? taskIdentity(task) : label;
+	/**
+	* Running or finished, in the theme's own words rather than new ones:
+	* `taskSummary` already says `working…` and `done` for exactly this state one
+	* row over, and a header that said "running"/"completed" about the same agent
+	* would be a second vocabulary for one fact. The trailing ellipsis is the
+	* theme's in-flight signal; the pulse beside it is the beat.
+	*
+	* Unknown when the transcript has no `Task` call to read — better silent than
+	* confidently wrong about an agent we cannot see.
+	*/
+	const status = !task ? void 0 : failed ? "failed" : busy ? `${pulse} working…` : "done";
+	const detail = [tools > 0 ? `${tools} tool${tools === 1 ? "" : "s"}` : void 0, elapsed].filter(Boolean).join(" · ");
+	if (terminal) return /* @__PURE__ */ jsx(TerminalSurface, {
+		fontSize,
+		lineHeight,
+		className: "shrink-0",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onBack,
+			"aria-label": "Back to the session",
+			className: "block w-full cursor-pointer text-left",
+			children: /* @__PURE__ */ jsxs(Row, {
+				glyph: "←",
+				glyphTone: "dim",
+				indent: 1,
+				tone: failed ? "red" : "green",
+				children: [
+					name,
+					status ? /* @__PURE__ */ jsxs(Ink, {
+						tone: failed ? "red" : busy ? "mark" : "dim",
+						children: [" · ", status]
+					}) : null,
+					detail ? /* @__PURE__ */ jsxs(Ink, {
+						tone: "faint",
+						children: [" · ", detail]
+					}) : null
+				]
+			})
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex shrink-0 items-center gap-2 border-b border-border px-3 py-1.5",
+		children: [
+			/* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "sm",
+				onClick: onBack,
+				className: "h-6 gap-1 px-1.5",
+				children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "size-3.5" }), "Back"]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("min-w-0 flex-1 truncate text-body-sm", failed ? "text-danger" : "text-fg-2"),
+				children: name
+			}),
+			status ? /* @__PURE__ */ jsx("span", {
+				className: cn("shrink-0 text-label", failed ? "text-danger" : busy ? "text-accent" : "text-fg-3"),
+				children: status
+			}) : null,
+			detail ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-label text-fg-4",
+				children: detail
+			}) : null
+		]
+	});
+}
+//#endregion
 //#region src/components/agent/QuestionPrompt.tsx
 /** The AskUserQuestion policies surfaced on job/session creation forms. */
 const QUESTION_BEHAVIORS = [
@@ -7145,7 +7762,7 @@ function Hint({ children }) {
 * background gradients rather than a border, so it costs no layout: a 1px border
 * would push its contents a pixel off the column every other row sits on.
 */
-function Box({ children, className }) {
+function Box$1({ children, className }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("term-box", className),
 		children
@@ -7522,7 +8139,7 @@ function QuestionStep({ question, selection, cursor, onCursor, onToggle, onOther
 				checked: multiSelect ? selected : void 0,
 				marker: "check",
 				selected: !multiSelect && selected,
-				detail: option.preview && cursor === index ? /* @__PURE__ */ jsx(Box, { children: option.preview.split("\n").map((line, row) => /* @__PURE__ */ jsx(Row, {
+				detail: option.preview && cursor === index ? /* @__PURE__ */ jsx(Box$1, { children: option.preview.split("\n").map((line, row) => /* @__PURE__ */ jsx(Row, {
 					columns: 0,
 					tone: "dim",
 					children: line || " "
@@ -7842,7 +8459,9 @@ function useNow(intervalMs = 3e4) {
 	}, [intervalMs]);
 	return now;
 }
-const utilizationColor = (pct) => pct >= 95 ? "text-danger" : pct >= 80 ? "text-warning" : "text-fg-3";
+/** The shared ramp, aliased for the two call sites below — the thresholds live
+* in `lib/status.ts` beside the severity they mirror. */
+const utilizationColor = (pct) => meterColorClass(pct);
 /** The CLI reports category colors as its own theme token names ('inactive',
 * 'promptBorder', ...), not CSS colors — only pass through what CSS can render. */
 const cssColor = (color) => typeof CSS !== "undefined" && CSS.supports("color", color) ? color : void 0;
@@ -8387,14 +9006,18 @@ function resultLanguage(item) {
 function ToolCallCard({ item, hostImage, className }) {
 	const [open, setOpen] = useState(false);
 	const [fullResult, setFullResult] = useState(false);
+	const [fetching, setFetching] = useState(false);
+	const fetchResult = useToolResultFetcher();
 	const imagePath = imagePathOf(item);
 	const status = item.status ?? (item.result === void 0 ? "running" : "settled");
 	const badge = STATE_BADGE[status];
 	const isError = status === "failed" || item.result?.isError === true;
 	const Icon = toolIcon(item.name);
 	const resultText = item.result?.text ?? "";
-	const truncated = !fullResult && resultText.length > RESULT_PREVIEW_CHARS;
-	const shownResult = truncated ? resultText.slice(0, RESULT_PREVIEW_CHARS) : resultText;
+	const clipped = !fullResult && resultText.length > RESULT_PREVIEW_CHARS;
+	const shownResult = clipped ? resultText.slice(0, RESULT_PREVIEW_CHARS) : resultText;
+	const headOnly = item.result?.truncated === true;
+	const totalChars = item.result?.totalChars ?? resultText.length;
 	const details = open ? /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-2 border-t border-border p-2.5",
 		children: [
@@ -8412,13 +9035,25 @@ function ToolCallCard({ item, hostImage, className }) {
 				language: resultLanguage(item),
 				label: isError ? "Error" : "Result",
 				className: cn(isError && "border-danger/40 [&_pre]:text-danger")
-			}), truncated ? /* @__PURE__ */ jsxs("button", {
+			}), fetching ? /* @__PURE__ */ jsxs("p", {
+				className: "mt-1 text-label text-fg-3",
+				children: [
+					"Fetching ",
+					totalChars.toLocaleString(),
+					" chars…"
+				]
+			}) : clipped || headOnly ? /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				className: "mt-1 text-label text-fg-3 underline-offset-2 hover:underline",
-				onClick: () => setFullResult(true),
+				onClick: () => {
+					setFullResult(true);
+					if (!headOnly) return;
+					setFetching(true);
+					fetchResult(item.id).finally(() => setFetching(false));
+				},
 				children: [
 					"Show all ",
-					resultText.length.toLocaleString(),
+					totalChars.toLocaleString(),
 					" chars"
 				]
 			}) : null] }) : null
@@ -8428,6 +9063,13 @@ function ToolCallCard({ item, hostImage, className }) {
 		path: imagePath,
 		load: hostImage
 	}) : null;
+	const resultImages = item.result?.images?.length ? /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-2 border-t border-border p-2.5",
+		children: item.result.images.map((ref) => /* @__PURE__ */ jsx(ResultImage, {
+			toolUseId: item.id,
+			image: ref
+		}, ref.partIndex))
+	}) : null;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "tool-call",
 		"data-state": status,
@@ -8466,6 +9108,7 @@ function ToolCallCard({ item, hostImage, className }) {
 				]
 			}),
 			image,
+			resultImages,
 			details
 		]
 	});
@@ -8481,6 +9124,34 @@ function PlainPayload({ code, label, className }) {
 	});
 }
 /**
+* An image part of the result, fetched by reference.
+*
+* The frame is a **fixed height in all three states** — placeholder, picture,
+* failure — which is the one rule this shares with the terminal theme and the
+* only reason it is worth a component: the transcript is virtualized in both,
+* and a box that appears when the bytes land shoves every row below it down
+* while the reader is mid-sentence. Unlike `HostImage`, a failure here is *said*
+* rather than swallowed: there is no host path in the result text to fall back
+* on, so silence would be a blank frame with no account of itself.
+*/
+function ResultImage({ toolUseId, image }) {
+	const { src, failed } = useToolResultImageSrc({
+		toolUseId,
+		...image
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-60 items-start overflow-hidden rounded-md border border-border bg-surface-hover",
+		children: src ? /* @__PURE__ */ jsx("img", {
+			src,
+			alt: imagePlaceholder(image),
+			className: "h-full max-w-full object-contain"
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "p-2 text-label text-fg-4",
+			children: failed ? IMAGE_UNAVAILABLE : imagePlaceholder(image)
+		})
+	});
+}
+/**
 * A picture that lives on the host, fetched through the gateway's host-file
 * route and shown inline.
 *
@@ -8525,13 +9196,26 @@ function createHeightEpoch(width, ch, line) {
 * The inter-row gap is the *pair's* business (`gapBefore`), not the row's, so
 * it is added by the caller. */
 function estimateBlockPx(block, epoch) {
-	if ("run" in block) return blockHeight(block, epoch).px;
+	if (!("item" in block)) return blockHeight(block, epoch).px;
 	const hit = epoch.cache.get(block.item);
 	if (hit) return hit.px;
 	const computed = itemHeight(block.item, epoch);
 	epoch.cache.set(block.item, computed);
 	return computed.px;
 }
+/**
+* The collapsed brief row's height — the frame's first row, which is synthetic
+* and so cannot go through {@link estimateBlockPx}.
+*
+* Clipped, so it is `min(wrapped, BRIEF_LINES)` lines plus the row the header
+* occupies. Expanding is local state on a *mounted* row, which the virtualizer
+* re-measures; what has to be right before it mounts is the collapsed height,
+* exactly as a task row is always collapsed when unmounted for the same reason.
+*/
+function briefPx(text, m) {
+	const cols = Math.max(1, Math.floor(m.width / m.ch + EPS));
+	return (Math.min(textLines(text, cols).lines, 4) + 1) * m.line;
+}
 /** Measure the advance of `0` on the live surface. A DOM read — call it from
 * the epoch's measurement pass (an effect / ResizeObserver callback), never
 * from render. The probe is absolutely positioned, so it contributes no layout
@@ -9089,10 +9773,15 @@ function toolRowHeight(item, m, extraPx) {
 		gutterCells: 2,
 		extraPx
 	});
+	const images = item.result?.images;
+	if (images?.length) acc = add(acc, {
+		px: images.length * 12 * m.line,
+		exact: true
+	});
 	if (item.patch) return add(acc, diffHeight(item.patch, m, extraPx));
 	const text = item.result?.text ?? "";
 	if (!text) return acc;
-	const { shown, more } = collapsedResult(text.trimEnd().split("\n"));
+	const { shown, more } = collapsedResult(text.trimEnd().split("\n"), item.result?.totalChars);
 	for (const line of shown) acc = add(acc, rowH(line || " ", m, {
 		indentCells: 3,
 		gutterCells: 3,
@@ -9138,9 +9827,14 @@ function itemHeight(item, m) {
 		};
 	}
 }
-/** A virtual row's height: an item, or a folded tool run (collapsed = its one
-* summary line, built by the same function the row draws). */
+/** A virtual row's height: an item, a folded tool run, or a task block —
+* either fold collapsed is its one summary line, built by the same function
+* the row draws (`runSummary` / `taskSummary`), rendered as one standard
+* 2-cell-gutter `Row`. No expanded branch for the task block either: it is
+* always collapsed by default, which is the invariant that keeps every
+* unmounted row's estimate exact. */
 function blockHeight(block, m) {
+	if ("task" in block) return rowH(taskSummary(block.task, taskChildItems(block)), m);
 	if ("run" in block) {
 		const busy = block.run.some((item) => item.status === "running" || item.status === "pending");
 		return rowH(runSummary(block.run, busy), m);
@@ -9157,22 +9851,27 @@ function nearestMember(cluster, y) {
 	return best?.mark;
 }
 /**
-* Two lanes and a full-width annotation, which is a claim about what a rail is
-* *for*: the two things you navigate by are what you asked and what came back,
-* so they get a lane each and split the rail evenly. Everything else — an error,
-* a waiting approval, a bookmark, the catch-up seam — is an **annotation on the
-* run** rather than a step through it, so it spans the full width and reads as
-* a different class of thing rather than as a third column of steps.
+* The two lanes are **channels, not classes**: left is what went *in* — your
+* prompts, and the sub-agents you dispatched — and right is what came *out* —
+* each turn's answer, and everything that went wrong producing one. That is the
+* question a reader actually asks of a rail ("where did I say something", "where
+* did it go wrong"), and it puts every failure in one column instead of
+* scattering some down the middle.
+*
+* Full width is reserved for what is not a channel at all: a waiting approval
+* (which is the session asking *you*, pinned at the foot), a bookmark (the
+* reader's own annotation) and the catch-up seam (a boundary across both).
 *
 * It also buys the marks their width back: three lanes in a 16px rail is 5px a
 * lane, which is a hard target to hit and a hard colour to see.
 */
 const LANE = {
 	user: "l",
+	subagent: "l",
 	turn: "r",
 	turnFailed: "r",
-	toolFailed: "f",
-	error: "f",
+	toolFailed: "r",
+	error: "r",
 	approval: "f",
 	recap: "f",
 	bookmark: "f"
@@ -9186,10 +9885,12 @@ const LOUDNESS = {
 	user: 3,
 	turn: 2,
 	bookmark: 1,
+	subagent: 1,
 	recap: 0
 };
 const KIND_NAME = {
 	user: "you",
+	subagent: "sub-agent",
 	turn: "response · turn end",
 	turnFailed: "turn failed",
 	toolFailed: "tool failed",
@@ -9235,9 +9936,27 @@ function excerpt(item) {
 		default: return "";
 	}
 }
+/**
+* Exported for `test/scrubber.test.ts` and nothing else — it is not part of the
+* package's surface (`index.ts` does not re-export it). Both of the bugs this
+* function has shipped were pure-logic ones a unit test catches: a live answer
+* with no `turn_result` yet went unmarked for the whole two minutes it was the
+* only thing worth navigating to, and a replayed history — which carries no turn
+* rows at all — came back with an empty right lane.
+*/
 function buildClusters(props, railH) {
-	const { items, bookmarks, recapRow, pendingApprovals, rowIndexFor, offsetOfRow, sizeOfRow, totalSize, viewportH } = props;
+	const { items, bookmarks, frameParentId, recapRow, pendingApprovals, rowIndexFor, offsetOfRow, sizeOfRow, positionInRow, totalSize, viewportH } = props;
 	const marks = [];
+	const subagentParents = /* @__PURE__ */ new Set();
+	for (const item of items) {
+		const parent = parentOf(item);
+		if (parent !== void 0) subagentParents.add(parent);
+	}
+	const rowOutcome = /* @__PURE__ */ new Map();
+	items.forEach((item, index) => {
+		if (item.kind !== "tool_call" || parentOf(item) !== frameParentId) return;
+		rowOutcome.set(rowIndexFor(index), index);
+	});
 	let segment = {};
 	const closeSegment = () => {
 		const anchor = segment.response ?? segment.turn;
@@ -9250,7 +9969,12 @@ function buildClusters(props, railH) {
 		segment = {};
 	};
 	items.forEach((item, index) => {
-		if (item.kind === "user") {
+		if (item.kind === "tool_call" && subagentParents.has(item.id)) marks.push({
+			kind: "subagent",
+			itemIndex: index,
+			rowIndex: rowIndexFor(index)
+		});
+		if (item.kind === "user" && parentOf(item) === frameParentId) {
 			closeSegment();
 			marks.push({
 				kind: "user",
@@ -9266,12 +9990,22 @@ function buildClusters(props, railH) {
 			itemIndex: index,
 			rowIndex: rowIndexFor(index)
 		});
-		else if (item.kind === "tool_call" && (item.status === "failed" || item.result?.isError === true)) marks.push({
+		else if (item.kind === "tool_call" && (item.status === "failed" || item.result?.isError === true) && rowOutcome.get(rowIndexFor(index)) === index) marks.push({
 			kind: "toolFailed",
 			itemIndex: index,
 			rowIndex: rowIndexFor(index)
 		});
-		else if (item.kind === "assistant_text" && item.parentToolUseId == null) segment.response = index;
+		else if (item.kind === "assistant_text" && parentOf(item) === frameParentId) {
+			if (frameParentId !== void 0) {
+				marks.push({
+					kind: "turn",
+					itemIndex: index,
+					rowIndex: rowIndexFor(index)
+				});
+				return;
+			}
+			segment.response = index;
+		}
 	});
 	closeSegment();
 	for (const index of bookmarks) if (index >= 0 && index < items.length) marks.push({
@@ -9287,8 +10021,10 @@ function buildClusters(props, railH) {
 	const scale = railScale(railH, totalSize, viewportH);
 	const lanes = /* @__PURE__ */ new Map();
 	for (const mark of marks) {
-		const h = Math.max(MIN_MARK, Math.round(sizeOfRow(mark.rowIndex) * scale));
-		const y = Math.min(Math.max(0, railH - h), Math.round(offsetOfRow(mark.rowIndex) * scale));
+		const within = mark.itemIndex >= 0 ? positionInRow?.(mark.itemIndex) : void 0;
+		const rowH = sizeOfRow(mark.rowIndex);
+		const h = within ? MIN_MARK : Math.max(MIN_MARK, Math.round(rowH * scale));
+		const y = Math.min(Math.max(0, railH - h), Math.round((offsetOfRow(mark.rowIndex) + (within ? within.ordinal / within.count * rowH : 0)) * scale));
 		const lane = LANE[mark.kind];
 		const list = lanes.get(lane) ?? [];
 		list.push({
@@ -9560,12 +10296,14 @@ function TerminalScrubber(props) {
 }
 //#endregion
 //#region src/components/agent/transcript-rows.ts
-/** The item a row is spaced *as*. A run stands for the calls it folded, so a
-* run and a lone tool call below it still read as one block. */
+/** The item a row is spaced *as*. A run stands for the calls it folded, and a
+* task block for the `Task` call it absorbed into — all tool calls, so a run,
+* a task and a lone tool call below them still read as one block. */
 function rowItem(row) {
 	if (!row) return void 0;
 	if ("item" in row) return row.item;
 	if ("run" in row) return row.run[0];
+	if ("task" in row) return row.task;
 }
 /**
 * Does a blank line go above this row, in the terminal theme?
@@ -9581,26 +10319,63 @@ function gapBefore(rows, index) {
 	return needsBlank(before, after);
 }
 /**
+* Which items each task block absorbed, as itemIndex → rowIndex — the one
+* lookup {@link rowIndexForItem} cannot answer from ordering (see its comment).
+* Memoized per rows array identity: the shell builds `rows` in a `useMemo`, so
+* within one row list this is built once, and a WeakMap means a discarded list
+* takes its map with it. Memoization only — the answer is a pure function of
+* the array.
+*/
+const absorbedCache = /* @__PURE__ */ new WeakMap();
+function absorbedRows(rows) {
+	const hit = absorbedCache.get(rows);
+	if (hit) return hit;
+	const map = /* @__PURE__ */ new Map();
+	rows.forEach((row, rowIndex) => {
+		if ("task" in row) for (const itemIndex of row.childIndices) map.set(itemIndex, rowIndex);
+	});
+	absorbedCache.set(rows, map);
+	return map;
+}
+/**
 * Transcript-item index → virtual-row index — **the off-by-a-fold trap.**
 *
 * The virtualizer's rows are {@link TerminalBlock}s, not items: a folded tool
-* run occupies ONE row for `run.length` consecutive items, and the recap
-* boundary is a row with *no* item index at all, shifting every row after it
-* by one. `virtualizer.scrollToIndex(itemIndex)` is therefore wrong by
-* construction on any folded or spliced transcript — every jump that starts
-* from an item (the scrubber's marks, a future bookmark) must come through
-* here first.
-*
-* The rule: the **last non-recap row whose first item index is ≤ the target**.
-* Rows are ordered by `index` (a run's row covers
-* `[index, index + run.length)`), so this is a binary search; the recap row
-* is skipped by giving it its successor's start for navigation (both qualify
-* at the boundary, and "last wins" lands on the real row) while never letting
-* it be the answer. Exhaustively checked against a linear reference — every
-* fixture × every item index × several splice positions — by
-* `__wdCheckMapping` in `dev/App.tsx`.
+* run occupies ONE row for `run.length` consecutive items, a task block
+* occupies ONE row for its `Task` call *plus every item its subagent produced*,
+* and the recap boundary is a row with *no* item index at all, shifting every
+* row after it by one. `virtualizer.scrollToIndex(itemIndex)` is therefore
+* wrong by construction on any folded or spliced transcript — every jump that
+* starts from an item (the scrubber's marks, a future bookmark) must come
+* through here first.
+*
+* The contract, in two halves:
+*
+* - An index a task block **absorbed** maps to that block's row, wherever the
+*   child fell in the stream. Subagents run in parallel, so absorbed indices
+*   interleave arbitrarily with later rows' starts — no ordering argument can
+*   find their row, which is why they are answered first, from a per-row-list
+*   map ({@link absorbedRows}) built once per rows array. A row's coverage is
+*   its `childIndices`, never `[index, index + N)` arithmetic.
+* - Every other index maps to the **last non-recap row whose start (`index`)
+*   is ≤ the target** — the original rule, still a binary search. Rows stay
+*   ordered by `index`, and the ordering argument is now: between one row's
+*   start and the next row's, every index is either absorbed (answered above)
+*   or a member of the earlier row — note that is *weaker* than the old
+*   contiguity claim, because a run can fold across an absorbed gap (two
+*   top-level calls separated only by a subagent's step are adjacent on
+*   screen), so `[index, index + run.length)` arithmetic no longer describes
+*   a run's coverage; membership does. The recap row is skipped by giving it
+*   its successor's start for navigation (both qualify at the boundary, and
+*   "last wins" lands on the real row) while never letting it be the answer.
+*
+* Exhaustively checked against a linear reference — every fixture × every item
+* index × several splice positions — by `__wdCheckMapping` in `dev/App.tsx`,
+* and against constructed interleavings in `test/transcript-rows.test.ts`.
 */
 function rowIndexForItem(rows, itemIndex) {
+	const absorbed = absorbedRows(rows).get(itemIndex);
+	if (absorbed !== void 0) return absorbed;
 	let lo = 0;
 	let hi = rows.length - 1;
 	let best = 0;
@@ -9620,6 +10395,49 @@ function rowIndexForItem(rows, itemIndex) {
 	}
 	return best;
 }
+const positionCache = /* @__PURE__ */ new WeakMap();
+function rowPositions(rows) {
+	const hit = positionCache.get(rows);
+	if (hit) return hit;
+	const map = /* @__PURE__ */ new Map();
+	for (const row of rows) if ("task" in row) {
+		const count = row.childIndices.length;
+		row.childIndices.forEach((itemIndex, ordinal) => map.set(itemIndex, {
+			ordinal,
+			count
+		}));
+	} else if ("run" in row && row.run.length > 1) {
+		const count = row.run.length;
+		row.indices.forEach((itemIndex, ordinal) => map.set(itemIndex, {
+			ordinal,
+			count
+		}));
+	}
+	positionCache.set(rows, map);
+	return map;
+}
+/**
+* Where an item sits inside a row that holds MORE than itself — a task block's
+* absorbed child, or a member of a folded run of two or more. `undefined` for
+* everything else, including a row's own head item (the `Task` call, a run's
+* first member is *not* exempt) and a **singleton run**: there the row's extent
+* IS the item's, and a mark spanning it is honest.
+*
+* That carve-out is load-bearing rather than tidy: `pushLeaf` makes *every*
+* top-level tool call a `RunBlock`, usually of length 1, so without it every
+* ordinary failed call's scrubber mark would shrink from its row's extent to a
+* tick and the rail would stop reading as a map — a regression traded for a fix.
+*
+* The scrubber is the consumer: a mark for a shared-row item anchors at
+* `ordinal / count` of the row's *measured* height instead of inheriting an
+* extent that is mostly other items' work (one failed child of a hundred-call
+* task painted the whole expanded block red). Memoized per rows array identity
+* exactly like {@link absorbedRows}, and pure — the answer is a function of the
+* array alone, and a discarded array takes its map with it.
+*/
+function positionInRow(rows, itemIndex) {
+	return rowPositions(rows).get(itemIndex);
+}
 //#endregion
 //#region src/components/agent/use-height-epoch.ts
 /**
@@ -9788,6 +10606,106 @@ function TerminalItemView({ item, fileUrl }) {
 		default: return null;
 	}
 }
+/**
+* A `Task` and everything the subagent it spawned produced, as one row.
+*
+* The same claim the tool-run fold makes, and a stronger one: a subagent is
+* *sixty* rows of somebody else's working — a brief, a dozen greps, its own
+* thinking — and none of it is what you came back to read. What you came back
+* to read is the report, and the report is the model's next sentence. So the
+* whole frame collapses to one line saying what was asked and how big the
+* answer was, and opens in full the moment it is the thing you want.
+*
+* **Always collapsed when unmounted**, and that is load-bearing rather than
+* tidy: `height.ts` predicts this row as exactly one wrapped `taskSummary`, and
+* expansion is component-local state that dies with the row. A row auto-opening
+* because its subagent happens to be running would make its own height
+* unpredictable — which is why the live signal is *in* the collapsed line (the
+* pulse, and a count that climbs) rather than in an open block.
+*
+* The children are the theme's ordinary rows, stepped in behind a rule, and
+* they fold among themselves: a subagent's consecutive tool calls are as much
+* an aside inside its frame as they are in the main thread.
+*/
+/**
+* **What the agent was asked** — the sub-agent's brief, clipped to
+* {@link BRIEF_LINES} and pressable for the whole of it.
+*
+* It leads the takeover's frame and the inline task expansion alike, because
+* both are answering the same question and an answer without its question is
+* half a transcript. This is the one row here built from something other than
+* the stream, and it exists for the case the stream does not cover: a
+* **background** agent forwards no brief, where a foreground `Task` forwards a
+* real nested user item that renders as an ordinary prompt row. The callers
+* splice this in only when that row is absent. Codex draws nothing either way —
+* its spawn message is encrypted on the wire, so there is no brief to give.
+*
+* `>` and blue, the prompt's own marker and colour, because that is what this
+* is: somebody's instruction, one level in. The clip is `line-clamp`, which
+* cuts on the same wrapped lines `briefPx` counts — one rule, so the reserved
+* height and the drawn height cannot disagree.
+*/
+function BriefRow({ text, terminal }) {
+	const [open, setOpen] = useState(false);
+	if (!terminal) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "brief",
+		className: "px-4 py-2 text-body-sm whitespace-pre-wrap text-fg-2",
+		children: text
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "brief",
+		children: /* @__PURE__ */ jsx(Pressable, {
+			onPress: () => setOpen((v) => !v),
+			expanded: open,
+			children: /* @__PURE__ */ jsx(Row, {
+				glyph: ">",
+				glyphTone: "blue",
+				tone: "dim",
+				children: /* @__PURE__ */ jsx("span", {
+					className: cn("whitespace-pre-wrap", !open && "term-brief-clip"),
+					style: open ? void 0 : { WebkitLineClamp: 4 },
+					children: text
+				})
+			})
+		})
+	});
+}
+function TaskRow({ block, fileUrl, onOpenSubagent }) {
+	const [open, setOpen] = useState(false);
+	const reveal = useRevealOnOpen(open);
+	const children = useMemo(() => taskChildItems(block), [block]);
+	const brief = children.some((item) => item.kind === "user") ? void 0 : taskBrief(block.task);
+	const busy = taskBusy(block.task, children);
+	const failed = taskFailed(block.task);
+	const pulse = usePulse(busy);
+	const row = /* @__PURE__ */ jsxs("div", {
+		ref: reveal,
+		className: open ? "term-open" : void 0,
+		children: [/* @__PURE__ */ jsx(Pressable, {
+			onPress: () => setOpen((v) => !v),
+			expanded: open,
+			children: /* @__PURE__ */ jsx(Row, {
+				glyph: busy ? pulse : "●",
+				glyphTone: failed ? "red" : busy ? "mark" : "dim",
+				tone: failed ? "red" : "green",
+				children: taskSummary(block.task, children)
+			})
+		}), open ? /* @__PURE__ */ jsxs("div", {
+			className: "term-nested",
+			children: [brief ? /* @__PURE__ */ jsx(BriefRow, {
+				text: brief,
+				terminal: true
+			}) : null, block.children.map((leaf, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && blockNeedsBlank(block.children[index - 1], leaf) ? /* @__PURE__ */ jsx(Blank, {}) : null, "run" in leaf ? /* @__PURE__ */ jsx(ToolRunRow, { items: leaf.run }) : /* @__PURE__ */ jsx(TerminalItemView, {
+				item: leaf.item,
+				fileUrl
+			})] }, leaf.key))]
+		}) : null]
+	});
+	return onOpenSubagent === void 0 ? row : /* @__PURE__ */ jsx(WithActions, {
+		actions: /* @__PURE__ */ jsx(OpenSubagentAction, { onOpen: () => onOpenSubagent(block.task.id) }),
+		children: row
+	});
+}
 /** When the current run began — the clock the working line counts from. Held
 * here, not in the row, because the row comes and goes within a single turn (it
 * hides the moment text streams) and a clock restarting at every tool call
@@ -9819,9 +10737,12 @@ function TerminalTranscript({ state, fileUrl, fontSize, lineHeight, affordances,
 		affordances,
 		bleed: "1ch",
 		className: cn("term-transcript", className),
-		children: [blocks.map((block, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && blockNeedsBlank(blocks[index - 1], block) ? /* @__PURE__ */ jsx(Blank, {}) : null, "run" in block ? /* @__PURE__ */ jsx(ToolRunRow, { items: block.run }) : /* @__PURE__ */ jsx(TerminalItemView, {
+		children: [blocks.map((block, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && blockNeedsBlank(blocks[index - 1], block) ? /* @__PURE__ */ jsx(Blank, {}) : null, "run" in block ? /* @__PURE__ */ jsx(ToolRunRow, { items: block.run }) : "item" in block ? /* @__PURE__ */ jsx(TerminalItemView, {
 			item: block.item,
 			fileUrl
+		}) : /* @__PURE__ */ jsx(TaskRow, {
+			block,
+			fileUrl
 		})] }, block.key)), working(state) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [state.items.length > 0 ? /* @__PURE__ */ jsx(Blank, {}) : null, /* @__PURE__ */ jsx(WorkingRow, {
 			label: state.status === "starting" ? "Starting…" : "Working…",
 			startedAt: runStartedAt,
@@ -10031,9 +10952,15 @@ function read(boundary, index) {
 }
 /** Rows produced inside a subagent (`parentToolUseId != null`) are stepped in
 * behind a rule, so a Task's own output reads as belonging to the tool call
-* above it rather than as the main thread carrying on. */
-function nestedClass(item) {
-	return "parentToolUseId" in item && item.parentToolUseId != null ? "border-l-2 border-border pl-3" : void 0;
+* above it rather than as the main thread carrying on.
+*
+* **Except inside that sub-agent's own frame**, where those same items are the
+* top level and there is no main thread to be an aside from — stepping every row
+* in would draw a rule down the whole surface saying "this happened somewhere
+* else" about the only thing on screen. */
+function nestedClass(item, frameParentId) {
+	const parent = "parentToolUseId" in item ? item.parentToolUseId : void 0;
+	return parent != null && parent !== frameParentId ? "border-l-2 border-border pl-3" : void 0;
 }
 /**
 * A prompt row's sticky lane — the strip spanning its turn, leading with the
@@ -10133,10 +11060,10 @@ function StickyPromptLane({ top, height, gapClass, scrollRoot, index, measureRef
 * transient UI state (an expanded tool card, an opened reasoning block) resets
 * once the row scrolls far enough away to unmount.
 */
-function TranscriptRows({ rows, boundary, since, terminal, replaying, stickyPrompt, gap, fontSize, lineHeight, items, pendingApprovals, scrubber, scrubberMarks, affordances, fileUrl, attachmentUrl, hostImage, jumpToRecapRef, repinRef }) {
+function TranscriptRows({ rows, boundary, since, terminal, replaying, stickyPrompt, frameParentId, onOpenSubagent, gap, fontSize, lineHeight, items, pendingApprovals, scrubber, scrubberMarks, affordances, fileUrl, attachmentUrl, hostImage, jumpToRecapRef, repinRef, reveal }) {
 	const stick = useStickToBottomContext();
 	const [scrollElement, setScrollElement] = useState(null);
-	const promptRows = useMemo(() => rows.flatMap((row, index) => "item" in row && row.item.kind === "user" ? [index] : []), [rows]);
+	const promptRows = useMemo(() => rows.flatMap((row, index) => "item" in row && row.item.kind === "user" && parentOf(row.item) === void 0 ? [index] : []), [rows]);
 	const pinRef = useRef({
 		enabled: false,
 		promptRows: []
@@ -10185,7 +11112,8 @@ function TranscriptRows({ rows, boundary, since, terminal, replaying, stickyProm
 			if (terminal && epoch) {
 				const row = rows[index];
 				const gapPx = index > 0 && gapBefore(rows, index) ? epoch.line : 0;
-				if (row && ("item" in row || "run" in row)) return estimateBlockPx(row, epoch) + gapPx;
+				if (row && "text" in row && row.key === "brief") return briefPx(row.text, epoch) + gapPx;
+				if (row && !("line" in row)) return estimateBlockPx(row, epoch) + gapPx;
 				return epoch.line + gapPx;
 			}
 			return (terminal ? 36 : 100) + gap.px;
@@ -10239,6 +11167,14 @@ function TranscriptRows({ rows, boundary, since, terminal, replaying, stickyProm
 		jumpToRecapRef,
 		repinRef
 	});
+	const revealNonce = reveal?.nonce;
+	const revealId = reveal?.toolUseId;
+	useEffect(() => {
+		if (revealId === void 0) return;
+		const itemIndex = items.findIndex((item) => item.kind === "tool_call" && item.id === revealId);
+		if (itemIndex < 0) return;
+		jumpToRow(rowIndexForItem(rows, itemIndex), "start");
+	}, [revealNonce]);
 	const scrubInteractive = resolveAffordances(affordances).hover;
 	const recapIndex = rows.findIndex((row) => row.key === "recap");
 	const recapRow = recapIndex >= 0 ? {
@@ -10306,7 +11242,7 @@ function TranscriptRows({ rows, boundary, since, terminal, replaying, stickyProm
 				className: cn(read(boundary, row.index) && "opacity-45"),
 				children: /* @__PURE__ */ jsx(ToolRunRow, { items: row.run })
 			}) : "item" in row ? /* @__PURE__ */ jsx("div", {
-				className: cn(read(boundary, row.index) && "opacity-45", nestedClass(row.item)),
+				className: cn(read(boundary, row.index) && "opacity-45", nestedClass(row.item, frameParentId)),
 				children: /* @__PURE__ */ jsx(TranscriptItemView, {
 					item: row.item,
 					fileUrl,
@@ -10314,12 +11250,22 @@ function TranscriptRows({ rows, boundary, since, terminal, replaying, stickyProm
 					hostImage,
 					terminal
 				})
-			}) : /* @__PURE__ */ jsx(RecapRow, {
+			}) : "text" in row && row.key === "brief" ? /* @__PURE__ */ jsx(BriefRow, {
+				text: row.text,
+				terminal
+			}) : "line" in row ? /* @__PURE__ */ jsx(RecapRow, {
 				line: row.line,
 				since,
 				terminal
+			}) : /* @__PURE__ */ jsx("div", {
+				className: cn(read(boundary, row.index) && "opacity-45"),
+				children: /* @__PURE__ */ jsx(TaskRow, {
+					block: row,
+					fileUrl,
+					onOpenSubagent
+				})
 			});
-			if (terminal && stickyPrompt && "item" in row && row.item.kind === "user") {
+			if (terminal && stickyPrompt && "item" in row && row.item.kind === "user" && parentOf(row.item) === void 0) {
 				const next = promptRows.find((index) => index > virtualRow.index);
 				const laneEnd = next === void 0 ? virtualizer.getTotalSize() : measurements[next]?.start ?? virtualRow.start;
 				return /* @__PURE__ */ jsx(StickyPromptLane, {
@@ -10344,7 +11290,9 @@ function TranscriptRows({ rows, boundary, since, terminal, replaying, stickyProm
 			pendingApprovals,
 			recapRow,
 			bookmarks: scrubberMarks ?? [],
+			frameParentId,
 			rowIndexFor: (itemIndex) => rowIndexForItem(rows, itemIndex),
+			positionInRow: (itemIndex) => positionInRow(rows, itemIndex),
 			offsetOfRow: (rowIndex) => virtualizer.measurementsCache[rowIndex]?.start ?? 0,
 			sizeOfRow: (rowIndex) => virtualizer.measurementsCache[rowIndex]?.size ?? 0,
 			totalSize: virtualizer.getTotalSize(),
@@ -10357,28 +11305,40 @@ function TranscriptRows({ rows, boundary, since, terminal, replaying, stickyProm
 		}), scrollElement.parentElement) : null]
 	});
 }
-function Transcript({ state, fileUrl, attachmentUrl, canBrowseFiles, hostImage, variant = "cards", density = "comfortable", fontSize, lineHeight, affordances, stickyPrompt = false, scrubber, scrubberMarks, replaying = false, catchUp, jumpToRecapRef, repinRef, className }) {
+function Transcript({ state, fileUrl, attachmentUrl, canBrowseFiles, hostImage, variant = "cards", density = "comfortable", fontSize, lineHeight, affordances, stickyPrompt = false, scrubber, scrubberMarks, replaying = false, catchUp, jumpToRecapRef, repinRef, reveal, frame, onOpenSubagent, className }) {
 	const terminal = variant === "terminal";
+	const items = useMemo(() => frame ? subagentItems(state.items, frame.parentToolUseId) : state.items, [state.items, frame]);
+	const frameTask = useMemo(() => frame ? state.items.find((item) => item.kind === "tool_call" && item.id === frame.parentToolUseId) : void 0, [state.items, frame]);
 	const gap = ROW_GAP[variant][density];
 	const runStartedAt = useRunStart(state.status);
-	const boundary = catchUp && catchUp.from > 0 && catchUp.from < state.items.length ? catchUp.from : void 0;
+	const boundary = !frame && catchUp && catchUp.from > 0 && catchUp.from < state.items.length ? catchUp.from : void 0;
 	const recap = useMemo(() => boundary === void 0 ? void 0 : recapLine(summarizeSince(state, boundary)), [state, boundary]);
+	const brief = useMemo(() => frame && frameTask && !items.some((item) => item.kind === "user") ? taskBrief(frameTask) : void 0, [
+		frame,
+		frameTask,
+		items
+	]);
 	const rows = useMemo(() => {
-		const fold = (from, to) => terminalBlocks(state.items.slice(from, to), from, terminal);
-		if (boundary === void 0 || !recap) return fold(0, state.items.length);
+		const fold = (from, to) => terminalBlocks(items.slice(from, to), from, terminal);
+		const lead = brief ? [{
+			key: "brief",
+			text: brief
+		}] : [];
+		if (boundary === void 0 || !recap) return [...lead, ...fold(0, items.length)];
 		return [
 			...fold(0, boundary),
 			{
 				key: "recap",
 				line: recap
 			},
-			...fold(boundary, state.items.length)
+			...fold(boundary, items.length)
 		];
 	}, [
-		state.items,
+		items,
 		boundary,
 		recap,
-		terminal
+		terminal,
+		brief
 	]);
 	return /* @__PURE__ */ jsx(TranscriptVariantProvider, {
 		value: variant,
@@ -10392,43 +11352,53 @@ function Transcript({ state, fileUrl, attachmentUrl, canBrowseFiles, hostImage,
 						fontSize,
 						lineHeight,
 						affordances,
-						children: [state.items.length === 0 && state.status !== "starting" ? /* @__PURE__ */ jsx(SessionEmptyState, {
-							cwd: state.cwd,
-							hasCommands: !!state.commands?.length,
-							hasSkills: !!state.skills?.some((s) => s.enabled),
-							canBrowseFiles
-						}) : /* @__PURE__ */ jsx(TranscriptRows, {
-							rows,
-							boundary,
-							since: catchUp?.since,
-							terminal,
-							replaying,
-							stickyPrompt,
-							gap,
-							fontSize,
-							lineHeight,
-							items: state.items,
-							pendingApprovals: state.pendingApprovals,
-							scrubber,
-							scrubberMarks,
-							affordances,
-							fileUrl,
-							attachmentUrl,
-							hostImage,
-							jumpToRecapRef,
-							repinRef
-						}), showLoader(state) ? terminal ? /* @__PURE__ */ jsxs(Fragment$1, { children: [state.items.length > 0 ? /* @__PURE__ */ jsx("div", {
-							className: "term-blank",
-							"aria-hidden": true
-						}) : null, /* @__PURE__ */ jsx(WorkingRow, {
-							label: state.status === "starting" ? "Starting…" : "Working…",
-							startedAt: runStartedAt,
-							tokens: state.contextUsage?.totalTokens
-						})] }) : /* @__PURE__ */ jsx(Loader, {
-							label: state.status === "starting" ? "Starting session…" : void 0,
-							startedAt: runStartedAt,
-							tokens: state.contextUsage?.totalTokens
-						}) : null]
+						children: [
+							frame ? frameTask === void 0 && !replaying ? /* @__PURE__ */ jsx("div", {
+								className: cn(terminal ? "term-row text-fg-4" : "p-4 text-body-sm text-fg-4"),
+								children: "This sub-agent's work is not in this transcript."
+							}) : null : items.length === 0 && state.status !== "starting" ? /* @__PURE__ */ jsx(SessionEmptyState, {
+								cwd: state.cwd,
+								hasCommands: !!state.commands?.length,
+								hasSkills: !!state.skills?.some((s) => s.enabled),
+								canBrowseFiles
+							}) : null,
+							frame && frameTask === void 0 && !replaying ? null : /* @__PURE__ */ jsx(TranscriptRows, {
+								rows,
+								boundary,
+								since: catchUp?.since,
+								terminal,
+								replaying,
+								stickyPrompt: !frame && stickyPrompt,
+								gap,
+								fontSize,
+								lineHeight,
+								items,
+								pendingApprovals: state.pendingApprovals,
+								scrubber,
+								scrubberMarks: frame ? void 0 : scrubberMarks,
+								affordances,
+								fileUrl,
+								attachmentUrl,
+								hostImage,
+								jumpToRecapRef,
+								repinRef,
+								reveal: frame ? void 0 : reveal,
+								frameParentId: frame?.parentToolUseId,
+								onOpenSubagent: frame ? void 0 : onOpenSubagent
+							}),
+							(frame ? frameTask !== void 0 && taskBusy(frameTask, items) : showLoader(state)) ? terminal ? /* @__PURE__ */ jsxs(Fragment$1, { children: [state.items.length > 0 ? /* @__PURE__ */ jsx("div", {
+								className: "term-blank",
+								"aria-hidden": true
+							}) : null, /* @__PURE__ */ jsx(WorkingRow, {
+								label: state.status === "starting" ? "Starting…" : "Working…",
+								startedAt: runStartedAt,
+								tokens: state.contextUsage?.totalTokens
+							})] }) : /* @__PURE__ */ jsx(Loader, {
+								label: state.status === "starting" ? "Starting session…" : void 0,
+								startedAt: runStartedAt,
+								tokens: state.contextUsage?.totalTokens
+							}) : null
+						]
 					})
 				}),
 				/* @__PURE__ */ jsx(ConversationScrollButton, {}),
@@ -10650,18 +11620,71 @@ const INTERACTIVE = [
 * the engine name — an absent capability hides the control instead of offering
 * one that can only fail.
 */
-function SessionPanel({ client, sessionId, header, panelSurface = "internal", statusSurface = "internal", statusPlacement = "top", onOpenPanel, onVitals, transcriptVariant = "cards", transcriptDensity = "comfortable", transcriptFont = "sans", affordances, terminalMetrics, scrubber = false, scrubberMarks, stickyPrompt = false, controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, readOnly = false, toolHost, cacheTranscript, className }) {
+function SessionPanel({ client, sessionId, header, panelSurface = "internal", statusSurface = "internal", statusPlacement = "top", onOpenPanel, onVitals, transcriptVariant = "cards", transcriptDensity = "comfortable", transcriptFont = "sans", affordances, terminalMetrics, scrubber = false, scrubberMarks, reveal, openSubagent, stickyPrompt = false, controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, readOnly = false, toolHost, cacheTranscript, className }) {
 	const external = panelSurface === "external";
 	const statusExternal = statusSurface === "external";
 	const controlsInStatus = controlsSurface === "status" && !statusExternal;
 	const controlsExternal = controlsSurface === "external" || controlsInStatus;
 	const [protocolError, setProtocolError] = useState(void 0);
 	const [panel, setPanel] = useState();
-	const { state, connection, replaying, protocolMismatch, models, effectiveModel, handle, send, approve, deny, interrupt, setModel, setPermissionMode, reconnectNow } = useClaudeSession(client, sessionId, {
+	/**
+	* The sub-agent takeover: which `Task` call the body is currently showing, or
+	* undefined for the conversation.
+	*
+	* Deliberately **not** a `Panel` member. Those route outward under
+	* `panelSurface: 'external'` so a host can draw them natively — and a host
+	* cannot draw this one: it is a transcript, and the transcript is in here. It
+	* is a mode of the conversation surface, not a screen over it.
+	*/
+	const [subagentId, setSubagentId] = useState(void 0);
+	/**
+	* Where to land on the way back — the row of the Task you entered from,
+	* asked for through the ordinary reveal seam.
+	*
+	* The alternative was keeping the main transcript mounted-but-hidden to
+	* preserve its scroll offset, which costs two live virtualizers and an
+	* absolute-position layout on a panel whose height just changed (the composer
+	* came back). Re-revealing is both cheaper and more honest: you return to the
+	* row you left from rather than to wherever you happened to be scrolled.
+	*/
+	const [returnReveal, setReturnReveal] = useState(void 0);
+	const { state, connection, replaying, protocolMismatch, models, effectiveModel, handle, send, approve, deny, interrupt, setModel, setPermissionMode, reconnectNow, loadFullResult } = useClaudeSession(client, sessionId, {
 		onProtocolError: setProtocolError,
 		cacheTranscript
 	});
 	useEffect(() => setProtocolError(void 0), [sessionId]);
+	useEffect(() => {
+		setSubagentId(void 0);
+		setReturnReveal(void 0);
+	}, [sessionId]);
+	const openSubagentNonce = openSubagent?.nonce;
+	const openSubagentId = openSubagent?.toolUseId;
+	useEffect(() => {
+		if (openSubagentId === void 0) return;
+		setSubagentId(openSubagentId);
+	}, [openSubagentNonce]);
+	const revealNonce = reveal?.nonce;
+	useEffect(() => {
+		if (revealNonce === void 0) return;
+		setSubagentId(void 0);
+	}, [revealNonce]);
+	const leaveSubagent = useCallback(() => {
+		setSubagentId((current) => {
+			if (current !== void 0) setReturnReveal({
+				toolUseId: current,
+				nonce: Date.now()
+			});
+		});
+	}, []);
+	useEffect(() => {
+		if (subagentId === void 0) return;
+		const onKey = (event) => {
+			if (event.key !== "Escape" || event.defaultPrevented) return;
+			leaveSubagent();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [subagentId, leaveSubagent]);
 	const [caughtUp, setCaughtUp] = useState(false);
 	useEffect(() => {
 		setCaughtUp(false);
@@ -10682,6 +11705,12 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 	}, [reconnectNow]);
 	useToolCallHost(handle, toolHost === false ? { enabled: false } : toolHost);
 	const terminal = transcriptVariant === "terminal";
+	const subagentFrameItems = useMemo(() => subagentId === void 0 ? [] : subagentItems(state.items, subagentId), [state.items, subagentId]);
+	const subagentTask = useMemo(() => subagentId === void 0 ? void 0 : state.items.find((item) => item.kind === "tool_call" && item.id === subagentId), [state.items, subagentId]);
+	const subagentFallbackLabel = useMemo(() => {
+		const record = state.session?.subagents?.find((sub) => sub.toolUseId === subagentId);
+		return record ? subagentLabel(record) : "Sub-agent";
+	}, [state.session, subagentId]);
 	const capabilities = state.capabilities;
 	const { usage: profileUsage } = useProfileUsage(client, state.session?.profile, { enabled: capabilities.rateLimits });
 	const usage = useMemo(() => mergeUsage({
@@ -10762,6 +11791,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 	const hostFiles = useHostFileSearch(client, state.cwd);
 	const windows = useMemo(() => orderUsageWindows(usage), [usage]);
 	const hostImage = useHostImage(client, sessionId, state.producedFiles);
+	const resultImages = useToolResultImages(client, sessionId);
 	const composerRef = useRef(null);
 	const jumpToRecap = useRef(null);
 	const repinTranscript = useRef(null);
@@ -10858,178 +11888,196 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 		value: transcriptVariant,
 		children: /* @__PURE__ */ jsx(TranscriptDensityProvider, {
 			value: transcriptDensity,
-			children: /* @__PURE__ */ jsxs("div", {
-				"data-slot": "session-panel",
-				"data-agent-font": transcriptFont,
-				onClick: handleClick,
-				className: cn("flex h-full min-h-0 flex-col overflow-hidden bg-bg", className),
-				children: [
-					headerTakesActions ? header({ actions: menu }) : header,
-					statusPlacement === "top" ? statusBar : null,
-					protocolMismatch !== void 0 ? /* @__PURE__ */ jsxs(Notice, {
-						level: "warning",
+			children: /* @__PURE__ */ jsx(ToolResultFetchProvider, {
+				value: loadFullResult,
+				children: /* @__PURE__ */ jsx(ToolResultImageProvider, {
+					value: resultImages,
+					children: /* @__PURE__ */ jsxs("div", {
+						"data-slot": "session-panel",
+						"data-agent-font": transcriptFont,
+						onClick: handleClick,
+						className: cn("flex h-full min-h-0 flex-col overflow-hidden bg-bg", className),
 						children: [
-							"Server speaks protocol v",
-							protocolMismatch,
-							", this build renders v",
-							PROTOCOL_VERSION,
-							". Some events may not render."
-						]
-					}) : null,
-					protocolError ? /* @__PURE__ */ jsx(Notice, {
-						level: "error",
-						onDismiss: () => setProtocolError(void 0),
-						children: protocolError
-					}) : null,
-					/* @__PURE__ */ jsx(Transcript, {
-						state,
-						fileUrl: sessionId ? (path) => client.sessionFileUrl(sessionId, path) : void 0,
-						attachmentUrl: sessionId ? (id) => client.attachmentUrl(sessionId, id) : void 0,
-						canBrowseFiles: hostFiles.available,
-						hostImage,
-						variant: transcriptVariant,
-						density: transcriptDensity,
-						fontSize: terminalMetrics?.fontSize,
-						lineHeight: terminalMetrics?.lineHeight,
-						affordances,
-						stickyPrompt,
-						scrubber,
-						scrubberMarks,
-						replaying,
-						catchUp: catchUp && newCount > 0 ? {
-							from: catchUp.itemCount,
-							since: catchUp.since
-						} : void 0,
-						jumpToRecapRef: jumpToRecap,
-						repinRef: repinTranscript
-					}),
-					catchUp && newCount > 0 && !replaying ? /* @__PURE__ */ jsx("div", {
-						className: "px-3 pb-1",
-						children: /* @__PURE__ */ jsxs("div", {
-							"data-slot": "catch-up",
-							className: "mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] items-center gap-2 text-label text-fg-3",
-							children: [
-								/* @__PURE__ */ jsx("span", {
-									"aria-hidden": true,
-									className: cn("select-none", terminal ? "text-fg-3" : "text-accent"),
-									children: "※"
-								}),
-								/* @__PURE__ */ jsxs("span", {
-									className: "min-w-0 flex-1 truncate",
+							headerTakesActions ? header({ actions: menu }) : header,
+							statusPlacement === "top" ? statusBar : null,
+							protocolMismatch !== void 0 ? /* @__PURE__ */ jsxs(Notice, {
+								level: "warning",
+								children: [
+									"Server speaks protocol v",
+									protocolMismatch,
+									", this build renders v",
+									PROTOCOL_VERSION,
+									". Some events may not render."
+								]
+							}) : null,
+							protocolError ? /* @__PURE__ */ jsx(Notice, {
+								level: "error",
+								onDismiss: () => setProtocolError(void 0),
+								children: protocolError
+							}) : null,
+							subagentId !== void 0 ? /* @__PURE__ */ jsx(SubagentStrip, {
+								task: subagentTask,
+								items: subagentFrameItems,
+								label: subagentFallbackLabel,
+								onBack: leaveSubagent,
+								terminal,
+								fontSize: terminalMetrics?.fontSize,
+								lineHeight: terminalMetrics?.lineHeight
+							}) : null,
+							/* @__PURE__ */ jsx(Transcript, {
+								state,
+								fileUrl: sessionId ? (path) => client.sessionFileUrl(sessionId, path) : void 0,
+								attachmentUrl: sessionId ? (id) => client.attachmentUrl(sessionId, id) : void 0,
+								canBrowseFiles: hostFiles.available,
+								hostImage,
+								variant: transcriptVariant,
+								density: transcriptDensity,
+								fontSize: terminalMetrics?.fontSize,
+								lineHeight: terminalMetrics?.lineHeight,
+								affordances,
+								stickyPrompt,
+								scrubber,
+								scrubberMarks,
+								replaying,
+								catchUp: catchUp && newCount > 0 ? {
+									from: catchUp.itemCount,
+									since: catchUp.since
+								} : void 0,
+								reveal: returnReveal ?? reveal,
+								frame: subagentId === void 0 ? void 0 : { parentToolUseId: subagentId },
+								onOpenSubagent: setSubagentId,
+								jumpToRecapRef: jumpToRecap,
+								repinRef: repinTranscript
+							}, subagentId ?? "session"),
+							catchUp && newCount > 0 && !replaying && subagentId === void 0 ? /* @__PURE__ */ jsx("div", {
+								className: "px-3 pb-1",
+								children: /* @__PURE__ */ jsxs("div", {
+									"data-slot": "catch-up",
+									className: "mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] items-center gap-2 text-label text-fg-3",
 									children: [
-										newCount,
-										" new ",
-										newCount === 1 ? "row" : "rows",
-										catchUp.since !== void 0 ? ` since you were last here` : ""
+										/* @__PURE__ */ jsx("span", {
+											"aria-hidden": true,
+											className: cn("select-none", terminal ? "text-fg-3" : "text-accent"),
+											children: "※"
+										}),
+										/* @__PURE__ */ jsxs("span", {
+											className: "min-w-0 flex-1 truncate",
+											children: [
+												newCount,
+												" new ",
+												newCount === 1 ? "row" : "rows",
+												catchUp.since !== void 0 ? ` since you were last here` : ""
+											]
+										}),
+										/* @__PURE__ */ jsx("button", {
+											type: "button",
+											onClick: () => jumpToRecap.current?.(),
+											className: "shrink-0 underline-offset-2 hover:text-fg-1 hover:underline",
+											children: "jump"
+										}),
+										/* @__PURE__ */ jsx("button", {
+											type: "button",
+											onClick: () => setCaughtUp(true),
+											className: "shrink-0 underline-offset-2 hover:text-fg-1 hover:underline",
+											children: "dismiss"
+										})
 									]
+								})
+							}) : null,
+							!readOnly && capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? /* @__PURE__ */ jsx("div", {
+								className: cn(terminal ? "pb-2" : "px-3 pb-2"),
+								children: /* @__PURE__ */ jsx(PromptSurface, {
+									terminal,
+									metrics: terminalMetrics,
+									affordances,
+									children: state.pendingApprovals.map((request) => {
+										const isQuestion = request.toolName === "AskUserQuestion" && parseUserQuestions(request.input).length > 0;
+										if (terminal) return isQuestion ? /* @__PURE__ */ jsx(TerminalQuestionPrompt, {
+											request,
+											onAnswer: approve,
+											onDismiss: (id) => deny(id, "Question dismissed by user")
+										}, request.id) : /* @__PURE__ */ jsx(TerminalPermissionPrompt, {
+											request,
+											onApprove: approve,
+											onDeny: deny
+										}, request.id);
+										return isQuestion ? /* @__PURE__ */ jsx(QuestionPrompt, {
+											request,
+											onAnswer: approve,
+											onDismiss: (id) => deny(id, "Question dismissed by user")
+										}, request.id) : /* @__PURE__ */ jsx(PermissionPrompt, {
+											request,
+											onApprove: approve,
+											onDeny: deny
+										}, request.id);
+									})
+								})
+							}) : null,
+							readOnly || subagentId !== void 0 ? null : /* @__PURE__ */ jsx(Composer, {
+								ref: composerRef,
+								onSend: handleSend,
+								onInterrupt: interrupt,
+								busy,
+								disabled: ended || !sessionId,
+								commands: capabilities.slashCommands ? commands : void 0,
+								skills: capabilities.skillsList ? state.skills : void 0,
+								attachments,
+								onSearchFiles: hostFiles.available ? (query, options) => hostFiles.search(query, {
+									...options,
+									limit: 8
+								}) : void 0,
+								layout: controlsExternal ? "inline" : "stacked",
+								toolbar: controlsExternal ? void 0 : sessionControls,
+								fontSize: terminalMetrics?.fontSize,
+								lineHeight: terminalMetrics?.lineHeight,
+								affordances
+							}),
+							statusPlacement === "bottom" ? statusBar : null,
+							!external ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+								/* @__PURE__ */ jsx(SessionInfoDialog, {
+									state,
+									client,
+									sessionId,
+									open: panel === "info",
+									onOpenChange: (next) => setPanel(next ? "info" : void 0)
+								}),
+								/* @__PURE__ */ jsx(ContextDialog, {
+									usage: state.contextUsage,
+									open: panel === "context",
+									onOpenChange: (next) => setPanel(next ? "context" : void 0)
+								}),
+								/* @__PURE__ */ jsx(UsageDialog, {
+									rateLimits: windows,
+									subscriptionType: state.subscriptionType,
+									engine: state.engine ?? "claude",
+									totalCostUsd: state.totalCostUsd,
+									updatedAt: usageUpdatedAt,
+									open: panel === "usage",
+									onOpenChange: (next) => setPanel(next ? "usage" : void 0)
+								}),
+								/* @__PURE__ */ jsx(McpDialog, {
+									client,
+									sessionId,
+									canManageServers: capabilities.mcpServerActions,
+									open: panel === "mcp",
+									onOpenChange: (next) => setPanel(next ? "mcp" : void 0)
 								}),
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
-									onClick: () => jumpToRecap.current?.(),
-									className: "shrink-0 underline-offset-2 hover:text-fg-1 hover:underline",
-									children: "jump"
+								/* @__PURE__ */ jsx(SkillsDialog, {
+									skills: state.skills,
+									open: panel === "skills",
+									onOpenChange: (next) => setPanel(next ? "skills" : void 0),
+									onUse: (skill) => composerRef.current?.insertText(skillPrompt(skill))
 								}),
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
-									onClick: () => setCaughtUp(true),
-									className: "shrink-0 underline-offset-2 hover:text-fg-1 hover:underline",
-									children: "dismiss"
+								/* @__PURE__ */ jsx(HostFilesDialog, {
+									client,
+									cwd: state.cwd,
+									open: panel === "files",
+									onOpenChange: (next) => setPanel(next ? "files" : void 0)
 								})
-							]
-						})
-					}) : null,
-					!readOnly && capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? /* @__PURE__ */ jsx("div", {
-						className: cn(terminal ? "pb-2" : "px-3 pb-2"),
-						children: /* @__PURE__ */ jsx(PromptSurface, {
-							terminal,
-							metrics: terminalMetrics,
-							affordances,
-							children: state.pendingApprovals.map((request) => {
-								const isQuestion = request.toolName === "AskUserQuestion" && parseUserQuestions(request.input).length > 0;
-								if (terminal) return isQuestion ? /* @__PURE__ */ jsx(TerminalQuestionPrompt, {
-									request,
-									onAnswer: approve,
-									onDismiss: (id) => deny(id, "Question dismissed by user")
-								}, request.id) : /* @__PURE__ */ jsx(TerminalPermissionPrompt, {
-									request,
-									onApprove: approve,
-									onDeny: deny
-								}, request.id);
-								return isQuestion ? /* @__PURE__ */ jsx(QuestionPrompt, {
-									request,
-									onAnswer: approve,
-									onDismiss: (id) => deny(id, "Question dismissed by user")
-								}, request.id) : /* @__PURE__ */ jsx(PermissionPrompt, {
-									request,
-									onApprove: approve,
-									onDeny: deny
-								}, request.id);
-							})
-						})
-					}) : null,
-					readOnly ? null : /* @__PURE__ */ jsx(Composer, {
-						ref: composerRef,
-						onSend: handleSend,
-						onInterrupt: interrupt,
-						busy,
-						disabled: ended || !sessionId,
-						commands: capabilities.slashCommands ? commands : void 0,
-						skills: capabilities.skillsList ? state.skills : void 0,
-						attachments,
-						onSearchFiles: hostFiles.available ? (query, options) => hostFiles.search(query, {
-							...options,
-							limit: 8
-						}) : void 0,
-						layout: controlsExternal ? "inline" : "stacked",
-						toolbar: controlsExternal ? void 0 : sessionControls,
-						fontSize: terminalMetrics?.fontSize,
-						lineHeight: terminalMetrics?.lineHeight,
-						affordances
-					}),
-					statusPlacement === "bottom" ? statusBar : null,
-					!external ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-						/* @__PURE__ */ jsx(SessionInfoDialog, {
-							state,
-							client,
-							sessionId,
-							open: panel === "info",
-							onOpenChange: (next) => setPanel(next ? "info" : void 0)
-						}),
-						/* @__PURE__ */ jsx(ContextDialog, {
-							usage: state.contextUsage,
-							open: panel === "context",
-							onOpenChange: (next) => setPanel(next ? "context" : void 0)
-						}),
-						/* @__PURE__ */ jsx(UsageDialog, {
-							rateLimits: windows,
-							subscriptionType: state.subscriptionType,
-							engine: state.engine ?? "claude",
-							totalCostUsd: state.totalCostUsd,
-							updatedAt: usageUpdatedAt,
-							open: panel === "usage",
-							onOpenChange: (next) => setPanel(next ? "usage" : void 0)
-						}),
-						/* @__PURE__ */ jsx(McpDialog, {
-							client,
-							sessionId,
-							canManageServers: capabilities.mcpServerActions,
-							open: panel === "mcp",
-							onOpenChange: (next) => setPanel(next ? "mcp" : void 0)
-						}),
-						/* @__PURE__ */ jsx(SkillsDialog, {
-							skills: state.skills,
-							open: panel === "skills",
-							onOpenChange: (next) => setPanel(next ? "skills" : void 0),
-							onUse: (skill) => composerRef.current?.insertText(skillPrompt(skill))
-						}),
-						/* @__PURE__ */ jsx(HostFilesDialog, {
-							client,
-							cwd: state.cwd,
-							open: panel === "files",
-							onOpenChange: (next) => setPanel(next ? "files" : void 0)
-						})
-					] }) : null
-				]
+							] }) : null
+						]
+					})
+				})
 			})
 		})
 	});
@@ -11122,6 +12170,6 @@ function Notice({ level, onDismiss, children }) {
 	});
 }
 //#endregion
-export { TranscriptDensityProvider as $, PermissionModeSelect as A, MenuTrigger as At, TerminalSurface as B, Button as Bt, TerminalQuestionPrompt as C, DialogHeader as Ct, parseUserQuestions as D, MenuContent as Dt, QuestionPrompt as E, Menu$1 as Et, McpDialog as F, SelectTrigger as Ft, Blank as G, TerminalDiff as H, cn as Ht, HostFilesDialog as I, SelectValue as It, CopyAction as J, Ink as K, ContextDialog as L, Input as Lt, permissionModeMeta as M, SelectContent as Mt, ModelSelect as N, SelectItem as Nt, PermissionPrompt as O, MenuItem as Ot, SkillsDialog as P, SelectItemText as Pt, toolIcon as Q, Composer as R, Badge as Rt, SessionInfoDialog as S, DialogContent as St, QUESTION_BEHAVIORS as T, DialogTrigger as Tt, previewPatch as U, TerminalMarkdown as V, buttonVariants as Vt, Band as W, useAffordances as X, WithActions as Y, isMutatingTool as Z, Conversation as _, TooltipContent as _t, Transcript as a, mentionTrigger as at, StatusBar as b, DialogBody as bt, ToolCallCard as c, plainTextToSegments as ct, Response as d, Splitter as dt, TranscriptVariantProvider as et, PromptTokenText as f, CodeBlock as ft, FileCard as g, Tip as gt, Loader as h, copyText as ht, useMinuteClock as i, hashtagTrigger as it, permissionModeChoices as j, Select$1 as jt, PERMISSION_MODES as k, MenuSeparator as kt, SessionEmptyState as l, segmentsToPlainText as lt, MessageContent as m, CopyButton as mt, UsageDialog as n, useTranscriptVariant as nt, TerminalItemView as o, usePromptAreaState as ot, Message as p, Spinner as pt, Row as q, UsageMeters as r, commandTrigger as rt, TerminalTranscript as s, PromptArea as st, SessionPanel as t, useTranscriptDensity as tt, Reasoning as u, ProgressRing as ut, ConversationContent as v, TooltipProvider as vt, TerminalPermissionPrompt as w, DialogRow as wt, STATUS_META as x, DialogClose as xt, ConversationScrollButton as y, Dialog$1 as yt, skillPrompt as z, badgeVariants as zt };
+export { toolIcon as $, PERMISSION_MODES as A, MenuSeparator as At, skillPrompt as B, badgeVariants as Bt, TerminalQuestionPrompt as C, DialogContent as Ct, parseUserQuestions as D, Menu$1 as Dt, QuestionPrompt as E, DialogTrigger as Et, SkillsDialog as F, SelectItemText as Ft, Band as G, TerminalMarkdown as H, buttonVariants as Ht, McpDialog as I, SelectTrigger as It, Row as J, Blank as K, HostFilesDialog as L, SelectValue as Lt, permissionModeChoices as M, Select$1 as Mt, permissionModeMeta as N, SelectContent as Nt, SubagentStrip as O, MenuContent as Ot, ModelSelect as P, SelectItem as Pt, isMutatingTool as Q, ContextDialog as R, Input as Rt, SessionInfoDialog as S, DialogClose as St, QUESTION_BEHAVIORS as T, DialogRow as Tt, TerminalDiff as U, cn as Ut, TerminalSurface as V, Button as Vt, previewPatch as W, WithActions as X, CopyAction as Y, useAffordances as Z, Conversation as _, Tip as _t, Transcript as a, hashtagTrigger as at, StatusBar as b, Dialog$1 as bt, ToolCallCard as c, PromptArea as ct, Response as d, ProgressRing as dt, TranscriptDensityProvider as et, PromptTokenText as f, Splitter as ft, FileCard as g, copyText as gt, Loader as h, CopyButton as ht, useMinuteClock as i, commandTrigger as it, PermissionModeSelect as j, MenuTrigger as jt, PermissionPrompt as k, MenuItem as kt, SessionEmptyState as l, plainTextToSegments as lt, MessageContent as m, Spinner as mt, UsageDialog as n, useTranscriptDensity as nt, TerminalItemView as o, mentionTrigger as ot, Message as p, CodeBlock as pt, Ink as q, UsageMeters as r, useTranscriptVariant as rt, TerminalTranscript as s, usePromptAreaState as st, SessionPanel as t, TranscriptVariantProvider as tt, Reasoning as u, segmentsToPlainText as ut, ConversationContent as v, TooltipContent as vt, TerminalPermissionPrompt as w, DialogHeader as wt, STATUS_META as x, DialogBody as xt, ConversationScrollButton as y, TooltipProvider as yt, Composer as z, Badge as zt };
 
-//# sourceMappingURL=SessionPanel-DII9MmQ8.mjs.map
+//# sourceMappingURL=SessionPanel-DPx8Iz8a.mjs.map