@workerdeck/ui 0.17.0 → 0.19.0

package/build/{SessionPanel-DMPhsNlW.mjs → SessionPanel-CHktI2CF.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", {
@@ -5343,11 +5367,54 @@ const trimmed = (value) => typeof value === "string" && value.trim() !== "" ? va
 * 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);
-	const inner = agent && description ? `${agent} · ${clip(description)}` : agent ?? (description ? clip(description) : toolInputPreview(task.input));
-	return `${task.name}(${inner})`;
+	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
@@ -5451,6 +5518,30 @@ function taskSummary(task, children) {
 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) {
@@ -7166,7 +7257,7 @@ const PERMISSION_MODES = [
 		value: "auto",
 		label: "Auto",
 		shortLabel: "Auto",
-		description: "Claude handles permission decisions",
+		description: "The agent handles permission decisions",
 		icon: Zap
 	},
 	{
@@ -7377,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 = [
@@ -8273,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;
@@ -9015,6 +9203,19 @@ function estimateBlockPx(block, 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
@@ -9744,7 +9945,7 @@ function excerpt(item) {
 * rows at all — came back with an empty right lane.
 */
 function buildClusters(props, railH) {
-	const { items, bookmarks, recapRow, pendingApprovals, rowIndexFor, offsetOfRow, sizeOfRow, positionInRow, 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) {
@@ -9753,7 +9954,7 @@ function buildClusters(props, railH) {
 	}
 	const rowOutcome = /* @__PURE__ */ new Map();
 	items.forEach((item, index) => {
-		if (item.kind !== "tool_call" || parentOf(item) !== void 0) return;
+		if (item.kind !== "tool_call" || parentOf(item) !== frameParentId) return;
 		rowOutcome.set(rowIndexFor(index), index);
 	});
 	let segment = {};
@@ -9773,7 +9974,7 @@ function buildClusters(props, railH) {
 			itemIndex: index,
 			rowIndex: rowIndexFor(index)
 		});
-		if (item.kind === "user" && parentOf(item) === void 0) {
+		if (item.kind === "user" && parentOf(item) === frameParentId) {
 			closeSegment();
 			marks.push({
 				kind: "user",
@@ -9794,7 +9995,17 @@ function buildClusters(props, railH) {
 			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({
@@ -10416,14 +10627,58 @@ function TerminalItemView({ item, fileUrl }) {
 * 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.
 */
-function TaskRow({ block, fileUrl }) {
+/**
+* **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);
-	return /* @__PURE__ */ jsxs("div", {
+	const row = /* @__PURE__ */ jsxs("div", {
 		ref: reveal,
 		className: open ? "term-open" : void 0,
 		children: [/* @__PURE__ */ jsx(Pressable, {
@@ -10432,17 +10687,24 @@ function TaskRow({ block, fileUrl }) {
 			children: /* @__PURE__ */ jsx(Row, {
 				glyph: busy ? pulse : "●",
 				glyphTone: failed ? "red" : busy ? "mark" : "dim",
-				tone: failed ? "red" : "fg",
+				tone: failed ? "red" : "green",
 				children: taskSummary(block.task, children)
 			})
-		}), open ? /* @__PURE__ */ jsx("div", {
+		}), open ? /* @__PURE__ */ jsxs("div", {
 			className: "term-nested",
-			children: 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, {
+			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))
+			})] }, 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
@@ -10690,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
@@ -10792,7 +11060,7 @@ 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, reveal }) {
+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" && parentOf(row.item) === void 0 ? [index] : []), [rows]);
@@ -10844,6 +11112,7 @@ 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 && "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;
 			}
@@ -10973,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,
@@ -10981,6 +11250,9 @@ function TranscriptRows({ rows, boundary, since, terminal, replaying, stickyProm
 					hostImage,
 					terminal
 				})
+			}) : "text" in row && row.key === "brief" ? /* @__PURE__ */ jsx(BriefRow, {
+				text: row.text,
+				terminal
 			}) : "line" in row ? /* @__PURE__ */ jsx(RecapRow, {
 				line: row.line,
 				since,
@@ -10989,7 +11261,8 @@ function TranscriptRows({ rows, boundary, since, terminal, replaying, stickyProm
 				className: cn(read(boundary, row.index) && "opacity-45"),
 				children: /* @__PURE__ */ jsx(TaskRow, {
 					block: row,
-					fileUrl
+					fileUrl,
+					onOpenSubagent
 				})
 			});
 			if (terminal && stickyPrompt && "item" in row && row.item.kind === "user" && parentOf(row.item) === void 0) {
@@ -11017,6 +11290,7 @@ 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,
@@ -11031,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, reveal, 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,
@@ -11066,44 +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,
-							reveal
-						}), 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, {}),
@@ -11325,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, reveal, 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();
+	/**
+	* 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);
@@ -11357,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({
@@ -11561,6 +11915,15 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 								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,
@@ -11580,11 +11943,13 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 									from: catchUp.itemCount,
 									since: catchUp.since
 								} : void 0,
-								reveal,
+								reveal: returnReveal ?? reveal,
+								frame: subagentId === void 0 ? void 0 : { parentToolUseId: subagentId },
+								onOpenSubagent: setSubagentId,
 								jumpToRecapRef: jumpToRecap,
 								repinRef: repinTranscript
-							}),
-							catchUp && newCount > 0 && !replaying ? /* @__PURE__ */ jsx("div", {
+							}, 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",
@@ -11648,7 +12013,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 									})
 								})
 							}) : null,
-							readOnly ? null : /* @__PURE__ */ jsx(Composer, {
+							readOnly || subagentId !== void 0 ? null : /* @__PURE__ */ jsx(Composer, {
 								ref: composerRef,
 								onSend: handleSend,
 								onInterrupt: interrupt,
@@ -11805,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-DMPhsNlW.mjs.map
+//# sourceMappingURL=SessionPanel-CHktI2CF.mjs.map