@workerdeck/ui 2.8.0 → 2.10.0

package/build/{SessionPanel-Dg4xf-ql.mjs → use-path-links-CvcxdUXL.mjs}

@@ -5,11 +5,11 @@ 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, ArrowLeft, ArrowRight, ArrowUp, AtSign, Brain, ChartPie, Check, CheckSquare, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, Circle, CircleAlert, 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, ArrowRight, ArrowUp, AtSign, Brain, ChartPie, Check, CheckSquare, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, Circle, CircleAlert, 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, SlidersHorizontal, 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, parseTodoWriteInput, parseUserQuestions, sessionTasks, subagentLabel, taskCountLabel, taskSummary, toolTitle, usageInfos, visibleTasks } from "@workerdeck/protocol";
+import { PRICING_NOTE, PROTOCOL_VERSION, UNPRICED_WARN_SHARE, canonicalModel, costOf, costOfByModel, mergeUsage, orderUsageWindows, parseTodoWriteInput, parseUserQuestions, rateFor, sessionTasks, subagentLabel, taskCountLabel, taskSummary, toolTitle, totalTokens, usageInfos, usageIsStale, visibleTasks } from "@workerdeck/protocol";
 import { recapLine, scanPromptTokens, summarizeSince, useAttachments, useClaudeSession, useDraft, useHostFileSearch, useProfileUsage, useToolCallHost } from "@workerdeck/react";
 import { Streamdown } from "streamdown";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
@@ -464,13 +464,19 @@ function ProgressRing({ value, size = 13, strokeWidth = 2, className }) {
 //#endregion
 //#region src/components/prompt-area/prompt-area-engine.ts
 /**
+* A chip's plain-text form: `{sigil ?? trigger}{displayText}` (e.g., "@Alice").
+*/
+function chipPlainText(seg) {
+	return `${seg.sigil ?? seg.trigger}${seg.displayText}`;
+}
+/**
 * Converts an array of segments to a plain text string.
-* Chips are represented as `{trigger}{displayText}` (e.g., "@Alice").
+* Chips are represented by {@link chipPlainText}.
 */
 function segmentsToPlainText(segments) {
 	return segments.map((seg) => {
 		if (seg.type === "text") return seg.text;
-		return `${seg.trigger}${seg.displayText}`;
+		return chipPlainText(seg);
 	}).join("");
 }
 /**
@@ -495,7 +501,7 @@ function truncateSegmentsToLength(segments, maxLength) {
 	const result = [];
 	let length = 0;
 	for (const seg of segments) {
-		const segLength = seg.type === "text" ? seg.text.length : seg.trigger.length + seg.displayText.length;
+		const segLength = seg.type === "text" ? seg.text.length : chipPlainText(seg).length;
 		if (length + segLength <= maxLength) {
 			result.push(seg);
 			length += segLength;
@@ -597,13 +603,13 @@ function detectActiveTrigger(text, cursorPos, triggers) {
 * @param chip - The chip data (value, displayText, optional data)
 * @returns New segments array with the chip inserted, and the new cursor position
 */
-function resolveChip(segments, activeTrigger, chip) {
+function resolveChip(segments, activeTrigger, chip, trailingText = " ") {
 	const triggerStart = activeTrigger.startOffset;
 	const triggerEnd = triggerStart + 1 + activeTrigger.query.length;
 	const newSegments = [];
 	let offset = 0;
 	for (const seg of segments) if (seg.type === "chip") {
-		const chipText = `${seg.trigger}${seg.displayText}`;
+		const chipText = chipPlainText(seg);
 		const chipStart = offset;
 		const chipEnd = offset + chipText.length;
 		if (chipEnd <= triggerStart || chipStart >= triggerEnd) newSegments.push(seg);
@@ -625,17 +631,18 @@ function resolveChip(segments, activeTrigger, chip) {
 				trigger: activeTrigger.config.char,
 				value: chip.value,
 				displayText: chip.displayText,
+				...chip.sigil !== void 0 ? { sigil: chip.sigil } : {},
 				...chip.data !== void 0 ? { data: chip.data } : {},
 				...chip.autoResolved ? { autoResolved: true } : {}
 			};
 			newSegments.push(newChip);
 			if (afterText) newSegments.push({
 				type: "text",
-				text: " " + afterText.replace(/^\s/, "")
+				text: trailingText + afterText.replace(/^\s/, "")
 			});
 			else newSegments.push({
 				type: "text",
-				text: " "
+				text: trailingText
 			});
 		}
 		offset = textEnd;
@@ -645,12 +652,12 @@ function resolveChip(segments, activeTrigger, chip) {
 	let runningOffset = 0;
 	for (const seg of merged) if (seg.type === "text") runningOffset += seg.text.length;
 	else {
-		runningOffset += seg.trigger.length + seg.displayText.length;
+		runningOffset += chipPlainText(seg).length;
 		if (seg.value === chip.value && seg.displayText === chip.displayText && seg.trigger === activeTrigger.config.char) lastChipEndOffset = runningOffset;
 	}
 	return {
 		segments: merged,
-		cursorOffset: lastChipEndOffset === -1 ? runningOffset : lastChipEndOffset + 1
+		cursorOffset: lastChipEndOffset === -1 ? runningOffset : lastChipEndOffset + trailingText.length
 	};
 }
 /**
@@ -671,7 +678,7 @@ function resolveText(segments, activeTrigger, text) {
 	let cursorOffset = triggerStart + text.length;
 	for (const seg of segments) {
 		if (seg.type === "chip") {
-			const chipEnd = offset + `${seg.trigger}${seg.displayText}`.length;
+			const chipEnd = offset + chipPlainText(seg).length;
 			if (chipEnd <= triggerStart || offset >= triggerEnd) newSegments.push(seg);
 			offset = chipEnd;
 			continue;
@@ -729,7 +736,7 @@ function revertChipAtIndex(segments, index) {
 	if (index < 0 || index >= segments.length) return null;
 	const seg = segments[index];
 	if (seg.type !== "chip" || !seg.autoResolved) return null;
-	const revertedText = `${seg.trigger}${seg.displayText}`;
+	const revertedText = chipPlainText(seg);
 	return {
 		segments: mergeAdjacentTextSegments([
 			...segments.slice(0, index),
@@ -826,7 +833,7 @@ function replaceTextRange(segments, start, end, replacement) {
 	let offset = 0;
 	let inserted = false;
 	for (const seg of segments) if (seg.type === "chip") {
-		const chipText = `${seg.trigger}${seg.displayText}`;
+		const chipText = chipPlainText(seg);
 		const chipStart = offset;
 		const chipEnd = offset + chipText.length;
 		if (!inserted && start === end && chipStart === start) {
@@ -1388,6 +1395,10 @@ function getChipData(node) {
 	if (!raw) return;
 	return safeJsonParse(raw);
 }
+function getChipSigil(node) {
+	if (!isChipElement(node)) return;
+	return node.dataset.chipSigil;
+}
 /**
 * Length of a chip's plain-text representation (`trigger + displayText`).
 *
@@ -1397,7 +1408,7 @@ function getChipData(node) {
 * `textContent` for resilience against externally-mutated nodes.
 */
 function chipNodeTextLength(node) {
-	const trigger = node.dataset.chipTrigger ?? "";
+	const trigger = node.dataset.chipSigil ?? node.dataset.chipTrigger ?? "";
 	const display = node.dataset.chipDisplay ?? node.textContent ?? "";
 	return trigger.length + display.length;
 }
@@ -1416,6 +1427,7 @@ function chipNodeToSegment(node) {
 	const value = getChipValue(node);
 	const displayText = getChipDisplay(node);
 	if (!trigger || value === void 0 || !displayText) return null;
+	const sigil = getChipSigil(node);
 	const data = getChipData(node);
 	const autoResolved = getChipAutoResolved(node);
 	return {
@@ -1423,6 +1435,7 @@ function chipNodeToSegment(node) {
 		trigger,
 		value,
 		displayText,
+		...sigil !== void 0 ? { sigil } : {},
 		...data !== void 0 ? { data } : {},
 		...autoResolved ? { autoResolved: true } : {}
 	};
@@ -2052,7 +2065,7 @@ function serializeFragmentToPlainText(fragment) {
 			text += value;
 		},
 		onChip: (node) => {
-			text += (getChipTrigger(node) ?? "") + (getChipDisplay(node) ?? "");
+			text += (getChipSigil(node) ?? getChipTrigger(node) ?? "") + (getChipDisplay(node) ?? "");
 		},
 		onBreak: () => {
 			text += "\n";
@@ -2106,6 +2119,7 @@ function parseSegmentsFromClipboard(json) {
 					trigger: item.trigger,
 					value: item.value,
 					displayText: item.displayText,
+					...typeof item.sigil === "string" ? { sigil: item.sigil } : {},
 					...item.data !== void 0 ? { data: item.data } : {},
 					...item.autoResolved ? { autoResolved: true } : {}
 				};
@@ -2140,7 +2154,7 @@ function insertSegmentsAtCursor(currentSegments, pastedSegments, editor) {
 	};
 	for (const seg of currentSegments) {
 		if (seg.type === "chip") {
-			const chipLen = seg.trigger.length + seg.displayText.length;
+			const chipLen = chipPlainText(seg).length;
 			if (offset >= cursorOffset) insertOnce();
 			result.push(seg);
 			offset += chipLen;
@@ -2618,7 +2632,7 @@ function usePromptAreaKeydown({ editorRef, triggers, markdownEnabled, submitOnEn
 		for (let i = 0; i < segIdx; i++) {
 			const s = segments[i];
 			if (s.type === "text") targetOffset += s.text.length;
-			else targetOffset += s.trigger.length + s.displayText.length;
+			else targetOffset += chipPlainText(s).length;
 		}
 		targetOffset += result.revertedText.length;
 		onChange(result.segments);
@@ -3229,6 +3243,7 @@ function usePromptArea({ value, onChange, triggers = NO_TRIGGERS, disabled = fal
 			chip.dataset.chipTrigger = seg.trigger;
 			chip.dataset.chipValue = seg.value;
 			chip.dataset.chipDisplay = seg.displayText;
+			if (seg.sigil !== void 0) chip.dataset.chipSigil = seg.sigil;
 			if (seg.data !== void 0) {
 				const json = safeJsonStringify(seg.data);
 				if (json) chip.dataset.chipData = json;
@@ -3238,7 +3253,7 @@ function usePromptArea({ value, onChange, triggers = NO_TRIGGERS, disabled = fal
 			const chipStyle = triggerConfig?.chipStyle ?? "pill";
 			chip.dataset.chipStyle = chipStyle;
 			chip.className = cn("prompt-area-chip", chipStyle === "inline" && "prompt-area-chip--inline", triggerConfig?.chipClassName);
-			chip.textContent = `${seg.trigger}${seg.displayText}`;
+			chip.textContent = chipPlainText(seg);
 			chip.setAttribute("role", "button");
 			chip.setAttribute("tabindex", "-1");
 			editor.appendChild(chip);
@@ -3483,9 +3498,11 @@ function usePromptArea({ value, onChange, triggers = NO_TRIGGERS, disabled = fal
 			return;
 		}
 		const displayText = activeTrigger.config.onSelect?.(suggestion) ?? suggestion.label;
+		const options = activeTrigger.config.chipOptions?.(suggestion);
 		const chipData = {
 			value: suggestion.value,
 			displayText: displayText || suggestion.label,
+			...options?.sigil !== void 0 ? { sigil: options.sigil } : {},
 			data: suggestion.data
 		};
 		if (chipEditing.trySelectEditingChip(segments, chipData, activeTrigger.config.char, events.pushUndo)) {
@@ -3495,7 +3512,7 @@ function usePromptArea({ value, onChange, triggers = NO_TRIGGERS, disabled = fal
 			}, 0);
 			return;
 		}
-		const result = resolveChip(segments, activeTrigger, chipData);
+		const result = resolveChip(segments, activeTrigger, chipData, options?.trailingText);
 		onChange(result.segments);
 		renderSegmentsToDOM(result.segments);
 		onChipAdd?.({
@@ -4411,6 +4428,123 @@ function launchTrigger(opts) {
 	};
 }
 //#endregion
+//#region src/components/agent/composer-commands.ts
+const KIND_ORDER = {
+	command: 0,
+	client: 1,
+	skill: 2
+};
+function cleanCommandName(name) {
+	return name.replace(/\s*\(MCP\)$/i, "");
+}
+function skillToken(skill) {
+	return `$${skill.name}`;
+}
+function skillTrailingText(skill) {
+	const token = skillToken(skill);
+	const rest = (skill.defaultPrompt ?? "").split(token).join(" ").replace(/\s+/g, " ").trim();
+	return rest ? ` ${rest} ` : " ";
+}
+function skillPrompt(skill) {
+	return skillToken(skill) + skillTrailingText(skill);
+}
+function mergeComposerRows(sources) {
+	const rows = [];
+	const engineNames = /* @__PURE__ */ new Set();
+	for (const command of sources.commands ?? []) {
+		const name = cleanCommandName(command.name);
+		if (engineNames.has(name)) continue;
+		engineNames.add(name);
+		for (const alias of command.aliases ?? []) engineNames.add(cleanCommandName(alias));
+		rows.push({
+			kind: "command",
+			name,
+			description: command.description,
+			argumentHint: command.argumentHint,
+			aliases: command.aliases
+		});
+	}
+	for (const command of sources.clientCommands ?? []) {
+		if (engineNames.has(command.name)) continue;
+		rows.push({
+			kind: "client",
+			name: command.name,
+			description: command.description,
+			argumentHint: command.argumentHint,
+			command
+		});
+	}
+	for (const skill of sources.skills ?? []) rows.push({
+		kind: "skill",
+		name: skill.name,
+		label: skill.displayName ?? skill.name,
+		description: skill.shortDescription ?? skill.description,
+		enabled: skill.enabled,
+		scope: skill.scope,
+		skill
+	});
+	return rows;
+}
+function haystacks(row) {
+	if (row.kind === "skill") return [
+		row.name,
+		row.label,
+		...row.name.split(/[-:_]/)
+	];
+	return [
+		row.name,
+		...row.kind === "command" ? row.aliases ?? [] : [],
+		...row.name.split(":")
+	];
+}
+function matchScore(query, candidates) {
+	const needle = query.toLowerCase();
+	const lowered = candidates.map((s) => s.toLowerCase());
+	if (lowered.some((h) => h.startsWith(needle))) return 2;
+	return lowered.some((h) => h.includes(needle)) ? 1 : 0;
+}
+function rankComposerRows(query, rows) {
+	const scored = [];
+	rows.forEach((row, index) => {
+		if (row.kind === "skill" && !row.enabled) return;
+		const score = matchScore(query, haystacks(row));
+		if (score > 0) scored.push({
+			score,
+			index,
+			row
+		});
+	});
+	scored.sort((a, b) => b.score - a.score || KIND_ORDER[a.row.kind] - KIND_ORDER[b.row.kind] || a.index - b.index);
+	return scored.map(({ row }) => row);
+}
+function matchClientCommand(text, commands) {
+	const match = /^\/([\w:-]+)[ \t]*([\s\S]*)$/.exec(text.trim());
+	if (!match) return;
+	const command = commands.find((c) => c.name === match[1]);
+	return command ? {
+		command,
+		args: match[2].trim()
+	} : void 0;
+}
+function composerCommandRows(rows) {
+	return rows.map((row) => row.kind === "skill" ? {
+		kind: row.kind,
+		name: row.name,
+		label: row.label,
+		description: row.description,
+		scope: row.scope,
+		enabled: row.enabled,
+		insertText: skillPrompt(row.skill)
+	} : {
+		kind: row.kind,
+		name: row.name,
+		label: `/${row.name}`,
+		description: row.description,
+		enabled: true,
+		insertText: `/${row.name} `
+	});
+}
+//#endregion
 //#region src/components/agent/transcript-variant.tsx
 const VariantContext = createContext("cards");
 function TranscriptVariantProvider({ value, children }) {
@@ -4531,6 +4665,38 @@ function usePulse(animated) {
 	return PULSE_FRAMES[frame % PULSE_FRAMES.length];
 }
 //#endregion
+//#region src/components/agent/PromptTokenText.tsx
+const SkillNamesContext = createContext(void 0);
+function SkillNamesProvider({ names, children }) {
+	return /* @__PURE__ */ jsx(SkillNamesContext.Provider, {
+		value: names,
+		children
+	});
+}
+function PromptTokenText({ text, className }) {
+	const skills = useContext(SkillNamesContext);
+	const tokens = scanPromptTokens(text, { skills });
+	if (tokens.length === 0) return /* @__PURE__ */ jsx("span", {
+		className,
+		children: text
+	});
+	const parts = [];
+	let cursor = 0;
+	for (const [index, token] of tokens.entries()) {
+		if (token.start > cursor) parts.push(text.slice(cursor, token.start));
+		parts.push(/* @__PURE__ */ jsx("span", {
+			className: cn("font-mono", token.kind === "file" ? "text-accent" : "text-info"),
+			children: token.text
+		}, `${token.start}-${index}`));
+		cursor = token.end;
+	}
+	if (cursor < text.length) parts.push(text.slice(cursor));
+	return /* @__PURE__ */ jsx("span", {
+		className,
+		children: parts.map((part, index) => /* @__PURE__ */ jsx(Fragment, { children: part }, index))
+	});
+}
+//#endregion
 //#region src/components/terminal/affordances.tsx
 const DEFAULTS = {
 	hover: true,
@@ -4749,6 +4915,69 @@ function TerminalDiff({ patch }) {
 	});
 }
 //#endregion
+//#region src/lib/file-link.ts
+const SCHEME = /^[a-zA-Z][a-zA-Z0-9+.-]*:/;
+const TRAILING_LINE = /^(.*?):(\d+)(?::\d+)?$/;
+const FRAGMENT_LINE = /^L(\d+)/;
+function parseFileLink(href, cwd) {
+	const raw = href?.trim();
+	if (!raw || raw.startsWith("#") || raw.startsWith("//")) return;
+	let target = raw;
+	if (SCHEME.test(target)) {
+		if (!target.startsWith("file:")) return;
+		try {
+			target = decodeURIComponent(new URL(target).pathname);
+		} catch {
+			return;
+		}
+	}
+	let line;
+	const hash = target.indexOf("#");
+	if (hash !== -1) {
+		line = readLine(FRAGMENT_LINE.exec(target.slice(hash + 1))?.[1]);
+		target = target.slice(0, hash);
+	}
+	const suffix = TRAILING_LINE.exec(target);
+	if (suffix) {
+		target = suffix[1];
+		line ??= readLine(suffix[2]);
+	}
+	if (!target) return;
+	const path = target.startsWith("/") ? normalize(target) : cwd ? normalize(`${cwd}/${target}`) : void 0;
+	return path ? {
+		path,
+		...line === void 0 ? {} : { line }
+	} : void 0;
+}
+function readLine(value) {
+	const parsed = value === void 0 ? NaN : Number(value);
+	return Number.isInteger(parsed) && parsed > 0 ? parsed : void 0;
+}
+function normalize(path) {
+	const out = [];
+	for (const part of path.split("/")) {
+		if (part === "" || part === ".") continue;
+		if (part === "..") {
+			out.pop();
+			continue;
+		}
+		out.push(part);
+	}
+	return `/${out.join("/")}`;
+}
+//#endregion
+//#region src/components/terminal/file-link.tsx
+const FileLinkContext = createContext(void 0);
+function FileLinkProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(FileLinkContext.Provider, {
+		value,
+		children
+	});
+}
+function useFileLinks() {
+	return useContext(FileLinkContext);
+}
+//#endregion
 //#region src/components/terminal/markdown.tsx
 function codeText(node) {
 	if (node === null || node === void 0 || typeof node === "boolean") return "";
@@ -4788,6 +5017,29 @@ function heading(tone) {
 		});
 	};
 }
+function Link({ href, children }) {
+	const links = useFileLinks();
+	const file = links ? parseFileLink(href, links.cwd) : void 0;
+	if (file) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "term-link",
+		"data-tone": "blue",
+		title: file.line === void 0 ? file.path : `${file.path}:${file.line}`,
+		onClick: (event) => {
+			event.stopPropagation();
+			links?.open(file.path, file.line);
+		},
+		children
+	});
+	return /* @__PURE__ */ jsx("a", {
+		className: "term-link",
+		"data-tone": "blue",
+		href,
+		target: "_blank",
+		rel: "noreferrer",
+		children
+	});
+}
 const TERMINAL_COMPONENTS = {
 	p: ({ children }) => /* @__PURE__ */ jsx("div", {
 		className: "term-block",
@@ -4844,12 +5096,8 @@ const TERMINAL_COMPONENTS = {
 		className: "term-em",
 		children
 	}),
-	a: ({ children, href }) => /* @__PURE__ */ jsx("a", {
-		className: "term-link",
-		"data-tone": "blue",
+	a: ({ children, href }) => /* @__PURE__ */ jsx(Link, {
 		href,
-		target: "_blank",
-		rel: "noreferrer",
 		children
 	}),
 	table: ({ children }) => /* @__PURE__ */ jsx("div", {
@@ -5221,7 +5469,7 @@ function UserRow({ item }) {
 				glyph: index === 0 ? "❯" : void 0,
 				glyphTone: "dim",
 				tone: "fg",
-				children: line || "\xA0"
+				children: line ? /* @__PURE__ */ jsx(PromptTokenText, { text: line }) : "\xA0"
 			}, index)) : null]
 		})
 	});
@@ -5453,7 +5701,7 @@ function TurnResultRow$1({ item }) {
 			" · ",
 			formatDuration(item.durationMs),
 			" · ",
-			formatCost(item.totalCostUsd)
+			formatCost(item.costUsd ?? item.totalCostUsd)
 		]
 	}), item.errors?.map((message, index) => /* @__PURE__ */ jsx(Row, {
 		tone: "red",
@@ -5557,20 +5805,7 @@ function TerminalSurface({ fontSize, lineHeight, bleed, affordances, className,
 //#region src/components/agent/Composer.tsx
 const SHELL_PLACEHOLDER = "Run a command on the host…";
 const SHELL_HINT = "! shell mode · esc to exit";
-function cleanName(name) {
-	return name.replace(/\s*\(MCP\)$/i, "");
-}
-function skillPrompt(skill) {
-	const base = skill.defaultPrompt?.trim() || `$${skill.name}`;
-	return /\s$/.test(base) ? base : base + " ";
-}
-function matchScore(query, haystacks) {
-	const needle = query.toLowerCase();
-	const lowered = haystacks.map((s) => s.toLowerCase());
-	if (lowered.some((h) => h.startsWith(needle))) return 2;
-	return lowered.some((h) => h.includes(needle)) ? 1 : 0;
-}
-function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message the agent…", commands, skills, onSearchFiles, onShellCommand, attachments, toolbar, layout = "stacked", fontSize, lineHeight, affordances, draft, className, ref }) {
+function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message the agent…", commands, skills, clientCommands, onSearchFiles, onShellCommand, attachments, toolbar, layout = "stacked", fontSize, lineHeight, affordances, draft, className, ref }) {
 	const inline = layout === "inline";
 	const terminal = useTranscriptVariant() === "terminal";
 	const [initialDraft] = useState(() => draft?.initialText ?? "");
@@ -5578,6 +5813,7 @@ function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message
 	const fileInput = useRef(null);
 	const [dragging, setDragging] = useState(false);
 	const [shellMode, setShellMode] = useState(false);
+	const [helpOpen, setHelpOpen] = useState(false);
 	useImperativeHandle(ref, () => ({
 		insertText: (text) => {
 			const prefix = plainText.length > 0 && !/\s$/.test(plainText) ? " " : "";
@@ -5592,71 +5828,42 @@ function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message
 	]);
 	const triggers = useMemo(() => {
 		const configured = [];
-		const usableSkills = (skills ?? []).filter((s) => s.enabled);
-		if (commands && commands.length > 0) {
-			const seen = /* @__PURE__ */ new Set();
-			const unique = commands.flatMap((c) => {
-				const name = cleanName(c.name);
-				if (seen.has(name)) return [];
-				seen.add(name);
-				return [{
-					...c,
-					name
-				}];
-			});
+		const rows = mergeComposerRows({
+			commands,
+			clientCommands,
+			skills
+		});
+		if (rows.length > 0) {
+			const byTag = new Map(rows.map((row) => [`${row.kind}:${row.name}`, row]));
 			configured.push(commandTrigger({
-				onSearch: (query) => {
-					const scored = [];
-					for (const c of unique) {
-						const score = matchScore(query, [
-							c.name,
-							...c.aliases ?? [],
-							...c.name.split(":")
-						]);
-						if (score === 0) continue;
-						scored.push({
-							score,
-							suggestion: {
-								value: c.name,
-								label: `/${c.name}${c.argumentHint ? ` ${c.argumentHint}` : ""}`,
-								description: c.description
-							}
-						});
-					}
-					scored.sort((a, b) => b.score - a.score);
-					return scored.map(({ suggestion }) => suggestion);
+				onSearch: (query) => rankComposerRows(query, rows).map((row) => row.kind === "skill" ? {
+					value: row.name,
+					label: row.label,
+					description: row.description ? `Skill · ${row.description}` : "Skill · inserts a message you can edit",
+					icon: /* @__PURE__ */ jsx(Sparkles, { className: "size-3.5 text-fg-3" }),
+					data: `${row.kind}:${row.name}`
+				} : {
+					value: row.name,
+					label: `/${row.name}${row.argumentHint ? ` ${row.argumentHint}` : ""}`,
+					description: row.description,
+					icon: row.kind === "client" ? /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-3.5 text-fg-3" }) : void 0,
+					data: `${row.kind}:${row.name}`
+				}),
+				insertAsText: (suggestion) => {
+					const row = byTag.get(String(suggestion.data));
+					return row?.kind === "client" && row.command.requiresArgs ? `/${row.name} ` : void 0;
+				},
+				chipOptions: (suggestion) => {
+					const row = byTag.get(String(suggestion.data));
+					return row?.kind === "skill" ? {
+						sigil: "$",
+						trailingText: skillTrailingText(row.skill)
+					} : void 0;
 				},
 				onSelect: (suggestion) => suggestion.value,
 				chipClassName: "font-mono"
 			}));
 		}
-		if (usableSkills.length > 0) configured.push(commandTrigger({
-			char: "$",
-			accessibilityLabel: "skill",
-			onSearch: (query) => {
-				const scored = [];
-				for (const skill of usableSkills) {
-					const score = matchScore(query, [skill.name, ...skill.name.split(/[-:_]/)]);
-					if (score === 0) continue;
-					const summary = skill.shortDescription ?? skill.description;
-					scored.push({
-						score,
-						suggestion: {
-							value: skill.name,
-							label: skill.displayName ?? skill.name,
-							description: summary ? `Skill · ${summary}` : "Skill · inserts a message you can edit",
-							icon: /* @__PURE__ */ jsx(Sparkles, { className: "size-3.5 text-fg-3" })
-						}
-					});
-				}
-				scored.sort((a, b) => b.score - a.score);
-				return scored.map(({ suggestion }) => suggestion);
-			},
-			insertAsText: (suggestion) => {
-				const skill = usableSkills.find((s) => s.name === suggestion.value);
-				return skill ? skillPrompt(skill) : `$${suggestion.value} `;
-			}
-		}));
 		if (onSearchFiles) configured.push(mentionTrigger({
 			searchDebounceMs: 150,
 			onSearch: async (query, options) => {
@@ -5680,6 +5887,7 @@ function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message
 	}, [
 		commands,
 		skills,
+		clientCommands,
 		onSearchFiles,
 		onShellCommand
 	]);
@@ -5711,6 +5919,24 @@ function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message
 		setShellMode(false);
 		focus();
 	};
+	const hints = [
+		triggers?.some((t) => t.char === "/") ? {
+			key: "/",
+			what: "commands and skills"
+		} : void 0,
+		onSearchFiles ? {
+			key: "@",
+			what: "mention a file"
+		} : void 0,
+		onShellCommand ? {
+			key: "!",
+			what: "run a shell command"
+		} : void 0,
+		{
+			key: "?",
+			what: "this list, on an empty composer"
+		}
+	].filter((h) => h !== void 0);
 	const shellKeys = shellMode ? {
 		onEscape: leaveShellMode,
 		onKeyDown: (e) => {
@@ -5719,7 +5945,30 @@ function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message
 				leaveShellMode();
 			}
 		}
-	} : {};
+	} : {
+		onEscape: helpOpen ? () => setHelpOpen(false) : void 0,
+		onKeyDown: (e) => {
+			if (e.key === "?" && isEmpty && !e.metaKey && !e.ctrlKey) {
+				e.preventDefault();
+				setHelpOpen(true);
+				return;
+			}
+			if (helpOpen) setHelpOpen(false);
+		}
+	};
+	const helpHints = helpOpen ? /* @__PURE__ */ jsx(Fragment$1, { children: hints.map((hint) => /* @__PURE__ */ jsxs("span", {
+		className: "flex items-center gap-1",
+		children: [/* @__PURE__ */ jsx("kbd", {
+			className: "font-mono text-text",
+			children: hint.key
+		}), hint.what]
+	}, hint.key)) }) : null;
+	const helpRow = helpOpen ? /* @__PURE__ */ jsx("div", {
+		role: "note",
+		"aria-label": "Composer shortcuts",
+		className: "mx-auto mb-1 flex w-full max-w-[var(--wd-transcript-max-width)] flex-wrap items-center gap-x-3 gap-y-1 text-label text-fg-3",
+		children: helpHints
+	}) : null;
 	const pick = (files) => {
 		if (files && files.length > 0) attachments?.add(files);
 	};
@@ -5862,6 +6111,18 @@ function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message
 								})
 							]
 						}),
+						helpOpen ? /* @__PURE__ */ jsxs("div", {
+							role: "note",
+							"aria-label": "Composer shortcuts",
+							className: "term-row",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "term-gutter"
+							}), /* @__PURE__ */ jsx("div", {
+								className: "flex min-w-0 flex-wrap items-center gap-x-[2ch] text-fg-3",
+								children: helpHints
+							})]
+						}) : null,
 						shellMode ? /* @__PURE__ */ jsxs("div", {
 							className: "term-row",
 							children: [/* @__PURE__ */ jsx("span", {
@@ -5889,55 +6150,59 @@ function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "composer",
 		className: cn("px-[var(--wd-composer-padding)] pb-[var(--wd-composer-padding)]", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			...dropHandlers,
-			className: cn("mx-auto w-full max-w-[var(--wd-transcript-max-width)] overflow-hidden border border-border bg-bg", "transition-colors rounded-lg shadow-(--shadow-xs)", "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30", dragging && "border-ring ring-2 ring-ring/30", shellMode && "border-[var(--wd-shell-accent)] focus-within:border-[var(--wd-shell-accent)] focus-within:ring-[var(--wd-shell-accent)]/30", disabled && "opacity-60"),
-			children: [staged.length > 0 && attachments ? /* @__PURE__ */ jsx(AttachmentStrip, { attachments }) : null, inline ? /* @__PURE__ */ jsxs("div", {
-				className: "flex items-end gap-1 p-1",
-				children: [
-					shellMode ? /* @__PURE__ */ jsx(ShellBadge, { onLeave: leaveShellMode }) : attach,
-					/* @__PURE__ */ jsx(PromptArea, {
-						...bind,
-						triggers,
-						markdown: false,
-						normalizeBullets: false,
-						onSubmit: submit,
-						disabled,
-						placeholder: disabled ? "Session ended" : shellMode ? SHELL_PLACEHOLDER : placeholder,
-						minHeight: 20,
-						maxHeight: 192,
-						"aria-label": shellMode ? "Run a shell command" : "Message the agent",
-						className: "min-w-0 flex-1 py-1 text-body-sm text-text",
-						onImagePaste: (file) => attachments?.add([file]),
-						...shellKeys
-					}),
-					submitButton
-				]
-			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PromptArea, {
-				...bind,
-				triggers,
-				markdown: false,
-				normalizeBullets: false,
-				onSubmit: submit,
-				disabled,
-				placeholder: disabled ? "Session ended" : shellMode ? SHELL_PLACEHOLDER : placeholder,
-				minHeight: 28,
-				maxHeight: 192,
-				"aria-label": shellMode ? "Run a shell command" : "Message the agent",
-				className: "px-3 pt-2.5 pb-0 text-body-sm text-text",
-				onImagePaste: (file) => attachments?.add([file]),
-				...shellKeys
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between gap-2 px-2 pb-2",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex min-w-0 items-center gap-1",
-					children: [shellMode ? /* @__PURE__ */ jsx(ShellBadge, { onLeave: leaveShellMode }) : attach, shellMode ? /* @__PURE__ */ jsx("span", {
-						className: "text-label text-text-muted",
-						children: SHELL_HINT
-					}) : toolbar]
-				}), submitButton]
-			})] })]
-		}), errorRow]
+		children: [
+			helpRow,
+			/* @__PURE__ */ jsxs("div", {
+				...dropHandlers,
+				className: cn("mx-auto w-full max-w-[var(--wd-transcript-max-width)] overflow-hidden border border-border bg-bg", "transition-colors rounded-lg shadow-(--shadow-xs)", "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30", dragging && "border-ring ring-2 ring-ring/30", shellMode && "border-[var(--wd-shell-accent)] focus-within:border-[var(--wd-shell-accent)] focus-within:ring-[var(--wd-shell-accent)]/30", disabled && "opacity-60"),
+				children: [staged.length > 0 && attachments ? /* @__PURE__ */ jsx(AttachmentStrip, { attachments }) : null, inline ? /* @__PURE__ */ jsxs("div", {
+					className: "flex items-end gap-1 p-1",
+					children: [
+						shellMode ? /* @__PURE__ */ jsx(ShellBadge, { onLeave: leaveShellMode }) : attach,
+						/* @__PURE__ */ jsx(PromptArea, {
+							...bind,
+							triggers,
+							markdown: false,
+							normalizeBullets: false,
+							onSubmit: submit,
+							disabled,
+							placeholder: disabled ? "Session ended" : shellMode ? SHELL_PLACEHOLDER : placeholder,
+							minHeight: 20,
+							maxHeight: 192,
+							"aria-label": shellMode ? "Run a shell command" : "Message the agent",
+							className: "min-w-0 flex-1 py-1 text-body-sm text-text",
+							onImagePaste: (file) => attachments?.add([file]),
+							...shellKeys
+						}),
+						submitButton
+					]
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PromptArea, {
+					...bind,
+					triggers,
+					markdown: false,
+					normalizeBullets: false,
+					onSubmit: submit,
+					disabled,
+					placeholder: disabled ? "Session ended" : shellMode ? SHELL_PLACEHOLDER : placeholder,
+					minHeight: 28,
+					maxHeight: 192,
+					"aria-label": shellMode ? "Run a shell command" : "Message the agent",
+					className: "px-3 pt-2.5 pb-0 text-body-sm text-text",
+					onImagePaste: (file) => attachments?.add([file]),
+					...shellKeys
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-2 px-2 pb-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 items-center gap-1",
+						children: [shellMode ? /* @__PURE__ */ jsx(ShellBadge, { onLeave: leaveShellMode }) : attach, shellMode ? /* @__PURE__ */ jsx("span", {
+							className: "text-label text-text-muted",
+							children: SHELL_HINT
+						}) : toolbar]
+					}), submitButton]
+				})] })]
+			}),
+			errorRow
+		]
 	});
 }
 function GlyphButton({ tone, label, disabled, onClick, gutter, className, children }) {
@@ -8015,7 +8280,7 @@ function SessionInfoDialog({ state, client, sessionId, open, onOpenChange }) {
 						/* @__PURE__ */ jsx(DialogRow, {
 							label: "Cost",
 							mono: true,
-							children: formatCost(state.totalCostUsd)
+							children: formatCost(state.costUsd ?? (state.totalCostUsd || void 0))
 						})
 					]
 				}),
@@ -8325,7 +8590,7 @@ function StatusBar({ state, rateLimits, connected, connection, onOpenStatus, onO
 			/* @__PURE__ */ jsx("span", { className: "flex-1" }),
 			/* @__PURE__ */ jsx("span", {
 				className: "font-mono text-label text-fg-3",
-				children: formatCost(state.totalCostUsd)
+				children: formatCost(state.costUsd ?? (state.totalCostUsd || void 0))
 			}),
 			actions ? /* @__PURE__ */ jsx("span", {
 				className: "self-center",
@@ -10101,30 +10366,6 @@ function MessageContent({ className, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/agent/PromptTokenText.tsx
-function PromptTokenText({ text, className }) {
-	const tokens = scanPromptTokens(text);
-	if (tokens.length === 0) return /* @__PURE__ */ jsx("span", {
-		className,
-		children: text
-	});
-	const parts = [];
-	let cursor = 0;
-	for (const [index, token] of tokens.entries()) {
-		if (token.start > cursor) parts.push(text.slice(cursor, token.start));
-		parts.push(/* @__PURE__ */ jsx("span", {
-			className: cn("font-mono", token.kind === "file" ? "text-accent" : "text-info"),
-			children: token.text
-		}, `${token.start}-${index}`));
-		cursor = token.end;
-	}
-	if (cursor < text.length) parts.push(text.slice(cursor));
-	return /* @__PURE__ */ jsx("span", {
-		className,
-		children: parts.map((part, index) => /* @__PURE__ */ jsx(Fragment, { children: part }, index))
-	});
-}
-//#endregion
 //#region src/components/agent/Reasoning.tsx
 function Reasoning({ children, isStreaming = false, defaultOpen, className }) {
 	const [open, setOpen] = useState(defaultOpen ?? isStreaming);
@@ -10432,7 +10673,7 @@ function TurnResultRow({ item }) {
 						" · ",
 						formatDuration(item.durationMs),
 						" · ",
-						formatCost(item.totalCostUsd)
+						formatCost(item.costUsd ?? item.totalCostUsd)
 					]
 				}),
 				/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
@@ -10905,85 +11146,116 @@ function Transcript({ state, fileUrl, attachmentUrl, canBrowseFiles, hostImage,
 		terminal,
 		brief
 	]);
+	const skillNames = useMemo(() => state.skills?.map((skill) => skill.name), [state.skills]);
 	return /* @__PURE__ */ jsx(TranscriptVariantProvider, {
 		value: variant,
-		children: /* @__PURE__ */ jsxs(Conversation, {
-			className: cn(replaying && "invisible", className),
-			children: [
-				/* @__PURE__ */ jsx(ConversationContent, {
-					className: cn(terminal && "gap-0 p-0"),
-					children: /* @__PURE__ */ jsxs(TerminalShell, {
-						active: terminal,
-						fontSize,
-						lineHeight,
-						affordances,
-						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" ? emptyState !== void 0 ? emptyState : /* @__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,
-								bookmarks: frame ? void 0 : bookmarks,
-								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 }) : null
-						]
-					})
-				}),
-				/* @__PURE__ */ jsx(ConversationScrollButton, {}),
-				replaying ? /* @__PURE__ */ jsx("div", {
-					"data-slot": "transcript-hold",
-					"aria-hidden": true,
-					className: "wd-hold-appear visible pointer-events-none absolute inset-0 overflow-hidden",
-					children: /* @__PURE__ */ jsx("div", {
-						className: cn("mx-auto w-full max-w-[var(--wd-transcript-max-width)]", !terminal && "px-4 py-4"),
-						children: terminal ? /* @__PURE__ */ jsx(TerminalSurface, {
+		children: /* @__PURE__ */ jsx(SkillNamesProvider, {
+			names: skillNames,
+			children: /* @__PURE__ */ jsxs(Conversation, {
+				className: cn(replaying && "invisible", className),
+				children: [
+					/* @__PURE__ */ jsx(ConversationContent, {
+						className: cn(terminal && "gap-0 p-0"),
+						children: /* @__PURE__ */ jsxs(TerminalShell, {
+							active: terminal,
 							fontSize,
 							lineHeight,
-							affordances: false,
-							bleed: "1ch",
-							className: "term-transcript",
-							children: /* @__PURE__ */ jsx(WorkingRow, { label: "Loading…" })
-						}) : /* @__PURE__ */ jsx(Loader, { label: "Loading session…" })
-					})
-				}) : null
-			]
+							affordances,
+							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" ? emptyState !== void 0 ? emptyState : /* @__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,
+									bookmarks: frame ? void 0 : bookmarks,
+									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 }) : null
+							]
+						})
+					}),
+					/* @__PURE__ */ jsx(ConversationScrollButton, {}),
+					replaying ? /* @__PURE__ */ jsx("div", {
+						"data-slot": "transcript-hold",
+						"aria-hidden": true,
+						className: "wd-hold-appear visible pointer-events-none absolute inset-0 overflow-hidden",
+						children: /* @__PURE__ */ jsx("div", {
+							className: cn("mx-auto w-full max-w-[var(--wd-transcript-max-width)]", !terminal && "px-4 py-4"),
+							children: terminal ? /* @__PURE__ */ jsx(TerminalSurface, {
+								fontSize,
+								lineHeight,
+								affordances: false,
+								bleed: "1ch",
+								className: "term-transcript",
+								children: /* @__PURE__ */ jsx(WorkingRow, { label: "Loading…" })
+							}) : /* @__PURE__ */ jsx(Loader, { label: "Loading session…" })
+						})
+					}) : null
+				]
+			})
 		})
 	});
 }
 //#endregion
+//#region src/lib/session-cost.ts
+const GAP_SHARE = .02;
+function sessionCost(input) {
+	const byModel = input.usageByModel ?? {};
+	const breakdown = costOfByModel(byModel);
+	const computedUsd = input.costUsd ?? (breakdown.unpriced || Object.keys(byModel).length === 0 ? void 0 : breakdown.total);
+	const reportedUsd = input.totalCostUsd;
+	const rows = Object.entries(byModel).map(([model, usage]) => ({
+		model: canonicalModel(model),
+		usage,
+		tokens: totalTokens(usage),
+		costUsd: rateFor(model) ? costOf(usage, model).total : void 0
+	})).sort((a, b) => b.tokens - a.tokens);
+	const gap = computedUsd !== void 0 && reportedUsd !== void 0 ? reportedUsd - computedUsd : void 0;
+	const worthShowing = gap !== void 0 && Math.abs(gap) > Math.max(.01, GAP_SHARE * Math.max(computedUsd ?? 0, reportedUsd ?? 0));
+	return {
+		displayUsd: computedUsd ?? reportedUsd,
+		computedUsd,
+		reportedUsd,
+		breakdown,
+		rows,
+		unpricedShare: breakdown.unpricedShare,
+		showUnpricedWarning: breakdown.unpricedShare > UNPRICED_WARN_SHARE,
+		gapUsd: worthShowing ? gap : void 0
+	};
+}
+//#endregion
 //#region src/components/agent/UsageMeters.tsx
 function useMinuteClock(active = true) {
 	const [now, setNow] = useState(() => Date.now());
@@ -11009,6 +11281,7 @@ function UsageMeters({ windows, now, className }) {
 function UsageMeter({ window, now }) {
 	const { key: windowKey, info, updatedAt, inferredReset } = window;
 	const utilization = info.utilization ?? 0;
+	const stale = usageIsStale(window, now);
 	const resetsAtMs = info.resetsAt !== void 0 ? info.resetsAt * 1e3 : void 0;
 	const duration = rateLimitWindowSeconds(windowKey);
 	const remaining = resetsAtMs !== void 0 ? (resetsAtMs - now) / 1e3 : void 0;
@@ -11020,14 +11293,14 @@ function UsageMeter({ window, now }) {
 				className: "truncate text-body-sm text-fg-1",
 				children: formatRateLimitWindowLong(windowKey)
 			}), /* @__PURE__ */ jsxs("span", {
-				className: cn("shrink-0 font-mono text-body-sm font-medium", info.status === "rejected" ? "text-danger" : "text-fg-1"),
+				className: cn("shrink-0 font-mono text-body-sm font-medium", info.status === "rejected" ? "text-danger" : stale ? "text-fg-4" : "text-fg-1"),
 				children: [utilization.toFixed(0), "% used"]
 			})]
 		}),
 		/* @__PURE__ */ jsxs("div", {
 			className: "relative mt-2 h-2 rounded-full bg-border",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: cn("h-full rounded-full", meterTintClass(utilization)),
+				className: cn("h-full rounded-full", meterTintClass(utilization), stale && "opacity-40"),
 				style: { width: `${Math.min(100, Math.max(2, utilization))}%` }
 			}), pace !== void 0 ? /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
@@ -11056,15 +11329,144 @@ function UsageMeter({ window, now }) {
 					children: "limit reached"
 				}) : null,
 				inferredReset ? /* @__PURE__ */ jsx("span", { children: "window reset · nothing reported since" }) : null,
-				updatedAt && !inferredReset ? /* @__PURE__ */ jsx("span", { children: formatAgoPrecise(updatedAt, now) }) : null
+				updatedAt && !inferredReset ? /* @__PURE__ */ jsxs("span", {
+					className: cn(stale && "text-warning"),
+					children: [stale ? "last reported " : "", formatAgoPrecise(updatedAt, now)]
+				}) : null
 			]
 		})
 	] });
 }
 //#endregion
 //#region src/components/agent/UsageDialog.tsx
-function UsageDialog({ rateLimits, subscriptionType, engine, totalCostUsd, updatedAt, open, onOpenChange, className }) {
+function Line({ label, value, tone }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-baseline justify-between gap-4",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: tone === "muted" ? "text-label text-fg-4" : "text-label text-fg-3",
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			className: `font-mono text-body-sm ${tone === "muted" ? "text-fg-4" : "text-fg-1"}`,
+			children: value
+		})]
+	});
+}
+function CostEvidence({ cost, engine }) {
+	const { breakdown, rows } = cost;
+	if (rows.length === 0) return /* @__PURE__ */ jsx(Line, {
+		label: "This session has cost",
+		value: formatCost(cost.displayUsd)
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline justify-between gap-4",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-label text-fg-3",
+					children: "This session has cost"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-mono text-body text-fg-1",
+					children: formatCost(cost.displayUsd)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1 border-t border-border pt-2",
+				children: [
+					/* @__PURE__ */ jsx(Line, {
+						label: "input",
+						value: formatCost(breakdown.input),
+						tone: "muted"
+					}),
+					/* @__PURE__ */ jsx(Line, {
+						label: "output",
+						value: formatCost(breakdown.output),
+						tone: "muted"
+					}),
+					/* @__PURE__ */ jsx(Line, {
+						label: "cache write",
+						value: formatCost(breakdown.cacheWrite),
+						tone: "muted"
+					}),
+					/* @__PURE__ */ jsx(Line, {
+						label: "cache read",
+						value: formatCost(breakdown.cacheRead),
+						tone: "muted"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "space-y-1 border-t border-border pt-2",
+				children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-baseline justify-between gap-4",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate text-label text-fg-4",
+						children: row.model
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "shrink-0 font-mono text-label text-fg-4",
+						children: [
+							formatTokens(row.tokens),
+							" · ",
+							row.costUsd === void 0 ? "no rate" : formatCost(row.costUsd)
+						]
+					})]
+				}, row.model))
+			}),
+			cost.showUnpricedWarning ? /* @__PURE__ */ jsxs("p", {
+				className: "text-label text-warning",
+				children: [Math.round(cost.unpricedShare * 100), "% of these tokens ran on a model with no bundled rate, so the total is an understatement rather than an estimate."]
+			}) : null,
+			cost.gapUsd !== void 0 ? /* @__PURE__ */ jsxs("p", {
+				className: "text-label text-fg-4",
+				children: [
+					engine === "claude" ? "Claude Code" : engine,
+					" reports ",
+					formatCost(cost.reportedUsd),
+					" for the same tokens."
+				]
+			}) : null
+		]
+	});
+}
+function ProfileSpendSection({ spend }) {
+	const { subscription } = spend;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-4 space-y-1 border-t border-border pt-3",
+		children: [
+			/* @__PURE__ */ jsx(Line, {
+				label: "This profile, last 7 days",
+				value: formatCost(spend.weekUsd)
+			}),
+			/* @__PURE__ */ jsx(Line, {
+				label: "Last 30 days",
+				value: formatCost(spend.monthUsd),
+				tone: "muted"
+			}),
+			subscription ? /* @__PURE__ */ jsxs("p", {
+				className: "pt-1 text-label text-fg-4",
+				children: [
+					formatMultiple(subscription.ratio),
+					" the ",
+					formatCost(subscription.weeklyShareUsd),
+					" weekly share of your",
+					" ",
+					formatCost(subscription.monthlyUsd),
+					" a month. A subscription is a flat fee, so this is leverage, not a bill."
+				]
+			}) : null
+		]
+	});
+}
+function formatMultiple(ratio) {
+	return ratio >= 10 ? `${Math.round(ratio)}x` : `${ratio.toFixed(1)}x`;
+}
+function UsageDialog({ rateLimits, subscriptionType, engine, totalCostUsd, costUsd, usageByModel, spend, updatedAt, open, onOpenChange, className }) {
 	const now = useMinuteClock(open);
+	const cost = sessionCost({
+		costUsd,
+		totalCostUsd,
+		usageByModel
+	});
 	return /* @__PURE__ */ jsx(Dialog$1, {
 		open,
 		onOpenChange,
@@ -11086,15 +11488,17 @@ function UsageDialog({ rateLimits, subscriptionType, engine, totalCostUsd, updat
 					windows: rateLimits,
 					now
 				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "mt-5 flex items-baseline justify-between gap-4 border-t border-border pt-3",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-label text-fg-3",
-						children: "This session has cost"
-					}), /* @__PURE__ */ jsx("span", {
-						className: "font-mono text-body-sm text-fg-1",
-						children: formatCost(totalCostUsd)
-					})]
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-5 border-t border-border pt-3",
+					children: /* @__PURE__ */ jsx(CostEvidence, {
+						cost,
+						engine
+					})
+				}),
+				spend ? /* @__PURE__ */ jsx(ProfileSpendSection, { spend }) : null,
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-3 text-label text-fg-4",
+					children: PRICING_NOTE
 				}),
 				updatedAt ? /* @__PURE__ */ jsxs("p", {
 					className: "mt-2 text-label text-fg-4",
@@ -11135,7 +11539,7 @@ const INTERACTIVE = [
 	"[role=\"radio\"]",
 	"[role=\"tab\"]"
 ].join(",");
-function SessionPanel({ client, sessionId, header, panelSurface = "internal", statusSurface = "internal", statusPlacement = "top", onOpenPanel, onVitals, transcriptVariant = "cards", transcriptDensity = "comfortable", transcriptFont = "sans", affordances, terminalMetrics, scrubber = false, bookmarks, onToggleBookmark, reveal, subagents, openSubagent, onSubagentChange, stickyPrompt = false, controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, readOnly = false, approvalPrompts, toolHost, clientTools, cacheTranscript, emptyState, onLinkClick, fontSize, className }) {
+function SessionPanel({ client, sessionId, header, panelSurface = "internal", statusSurface = "internal", statusPlacement = "top", onOpenPanel, onVitals, transcriptVariant = "cards", transcriptDensity = "comfortable", transcriptFont = "sans", affordances, terminalMetrics, scrubber = false, bookmarks, onToggleBookmark, reveal, subagents, openSubagent, onSubagentChange, stickyPrompt = false, controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, readOnly = false, approvalPrompts, toolHost, clientTools, cacheTranscript, emptyState, onLinkClick, onOpenFile, fontSize, className }) {
 	const effectiveTermFontSize = terminalMetrics?.fontSize ?? fontSize;
 	const effectiveTermLineHeight = terminalMetrics?.lineHeight ?? (fontSize !== void 0 ? Math.round(fontSize * (18 / 13)) : void 0);
 	const external = panelSurface === "external";
@@ -11146,7 +11550,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 	const [panel, setPanel] = useState();
 	const [showCompletedTasks, setShowCompletedTasks] = useState(false);
 	const [taskReveal, setTaskReveal] = useState();
-	const { state, connection, replaying, protocolMismatch, shell, models, effectiveModel, handle, send, runShell, approve, deny, interrupt, setModel, setPermissionMode, reconnectNow, loadFullResult } = useClaudeSession(client, sessionId, {
+	const { state, connection, replaying, protocolMismatch, shell, models, effectiveModel, handle, send, runShell, approve, deny, interrupt, clearContext, setModel, setPermissionMode, reconnectNow, loadFullResult } = useClaudeSession(client, sessionId, {
 		onProtocolError: setProtocolError,
 		cacheTranscript
 	});
@@ -11186,7 +11590,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 	} : toolHost);
 	const terminal = transcriptVariant === "terminal";
 	const capabilities = state.capabilities;
-	const { usage: profileUsage } = useProfileUsage(client, state.session?.profile, { enabled: capabilities.rateLimits });
+	const { usage: profileUsage, spend: profileSpend } = useProfileUsage(client, state.session?.profile, { enabled: capabilities.rateLimits });
 	const usage = useMemo(() => mergeUsage({
 		rateLimits: state.rateLimits,
 		updatedAt: state.rateLimitsUpdatedAt
@@ -11208,6 +11612,86 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 		subagents,
 		state.session?.subagents
 	]);
+	const clientCommands = useMemo(() => {
+		const modes = capabilities.permissionModes;
+		const built = [];
+		if (models.length > 0) built.push({
+			name: "model",
+			description: "Switch the model for this session",
+			argumentHint: "<model>",
+			requiresArgs: true,
+			run: (args) => {
+				const wanted = args.split(/\s+/)[0];
+				if (!wanted) return false;
+				setModel(wanted);
+				return true;
+			}
+		});
+		if (modes.length > 1) built.push({
+			name: "permissions",
+			description: `Set the permission mode (${modes.join(", ")})`,
+			argumentHint: "<mode>",
+			requiresArgs: true,
+			run: (args) => {
+				const wanted = args.split(/\s+/)[0];
+				if (!modes.includes(wanted)) return false;
+				setPermissionMode(wanted);
+				return true;
+			}
+		});
+		if (capabilities.clearContext) built.push({
+			name: "clear",
+			description: "Clear the conversation - the session keeps running and the old one stays resumable",
+			run: () => {
+				clearContext();
+				return true;
+			}
+		});
+		if (capabilities.mcpStatus) built.push({
+			name: "mcp",
+			description: "MCP servers and their status",
+			run: () => (openPanel("mcp"), true)
+		});
+		if (capabilities.contextUsage) built.push({
+			name: "context",
+			description: "Context window usage",
+			run: () => (openPanel("context"), true)
+		});
+		built.push({
+			name: "status",
+			description: "Session details",
+			run: () => (openPanel("info"), true)
+		});
+		if (capabilities.rateLimits) built.push({
+			name: "usage",
+			description: "Rate limits and spend",
+			run: () => (openPanel("usage"), true)
+		});
+		if (capabilities.skillsList) built.push({
+			name: "skills",
+			description: "Browse the skills this session can use",
+			run: () => (openPanel("skills"), true)
+		});
+		return built;
+	}, [
+		capabilities,
+		models.length,
+		openPanel,
+		clearContext,
+		setModel,
+		setPermissionMode
+	]);
+	const composerCommands = useMemo(() => composerCommandRows(mergeComposerRows({
+		commands: capabilities.slashCommands ? state.commands : void 0,
+		clientCommands,
+		skills: capabilities.skillsList ? state.skills : void 0
+	})), [
+		capabilities.slashCommands,
+		capabilities.skillsList,
+		state.commands,
+		state.skills,
+		clientCommands
+	]);
 	const onVitalsRef = useRef(onVitals);
 	onVitalsRef.current = onVitals;
 	const vitalsModel = effectiveModel ?? state.model;
@@ -11223,6 +11707,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 			permissionMode: state.permissionMode,
 			permissionModes,
 			skills: state.skills,
+			composerCommands,
 			cwd: state.cwd,
 			contextUsage: state.contextUsage,
 			tasks,
@@ -11241,6 +11726,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 		state.permissionMode,
 		permissionModes,
 		state.skills,
+		composerCommands,
 		state.cwd,
 		state.contextUsage,
 		tasks,
@@ -11296,26 +11782,10 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 	const composerRef = useRef(null);
 	const jumpToRecap = useRef(null);
 	const repinTranscript = useRef(null);
-	const commands = useMemo(() => {
-		if (!state.commands) return;
-		if (state.commands.some((c) => c.name === "model")) return state.commands;
-		return [{
-			name: "model",
-			description: "Switch the model for this session",
-			argumentHint: "<model>"
-		}, ...state.commands];
-	}, [state.commands]);
 	const handleSend = (text, attachmentIds) => {
 		if (attachmentIds.length === 0) {
-			const modelCommand = /^\/model\s+(\S+)$/.exec(text);
-			if (modelCommand) {
-				setModel(modelCommand[1]);
-				return;
-			}
-			if (capabilities.mcpStatus && text.trim() === "/mcp") {
-				openPanel("mcp");
-				return;
-			}
+			const local = matchClientCommand(text, clientCommands);
+			if (local && local.command.run(local.args)) return;
 		}
 		setCaughtUp(true);
 		repinTranscript.current?.();
@@ -11381,6 +11851,10 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 		onOpenTasks: external && !onOpenPanel ? void 0 : () => openPanel("tasks"),
 		actions: headerTakesActions ? void 0 : menu
 	});
+	const fileLinks = useMemo(() => onOpenFile ? {
+		cwd: state.cwd,
+		open: onOpenFile
+	} : void 0, [onOpenFile, state.cwd]);
 	const panelRef = useRef(null);
 	useEffect(() => {
 		if (!onLinkClick) return;
@@ -11409,224 +11883,231 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 		value: transcriptVariant,
 		children: /* @__PURE__ */ jsx(TranscriptDensityProvider, {
 			value: transcriptDensity,
-			children: /* @__PURE__ */ jsx(ToolResultFetchProvider, {
-				value: loadFullResult,
-				children: /* @__PURE__ */ jsx(ToolTitleProvider, {
-					value: state.toolTitles,
-					children: /* @__PURE__ */ jsx(ToolResultImageProvider, {
-						value: resultImages,
-						children: /* @__PURE__ */ jsxs("div", {
-							ref: panelRef,
-							"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),
-							style: fontSize !== void 0 ? { "--wd-font-size": `${Math.round(fontSize)}px` } : void 0,
-							children: [
-								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: effectiveTermFontSize,
-									lineHeight: effectiveTermLineHeight
-								}) : null,
-								/* @__PURE__ */ jsx(BookmarkProvider, {
-									value: bookmarkHandle,
-									children: /* @__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: effectiveTermFontSize,
-										lineHeight: effectiveTermLineHeight,
-										affordances,
-										stickyPrompt,
-										scrubber,
-										bookmarks,
-										replaying,
-										catchUp: catchUp && newCount > 0 ? {
-											from: catchUp.itemCount,
-											since: catchUp.since
-										} : void 0,
-										reveal: taskReveal ?? returnReveal ?? reveal,
-										frame: subagentId === void 0 ? void 0 : { parentToolUseId: subagentId },
-										onOpenSubagent: enterSubagent,
-										emptyState,
-										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-transcript-max-width)] items-center gap-2 text-label text-fg-3",
+			children: /* @__PURE__ */ jsx(FileLinkProvider, {
+				value: fileLinks,
+				children: /* @__PURE__ */ jsx(ToolResultFetchProvider, {
+					value: loadFullResult,
+					children: /* @__PURE__ */ jsx(ToolTitleProvider, {
+						value: state.toolTitles,
+						children: /* @__PURE__ */ jsx(ToolResultImageProvider, {
+							value: resultImages,
+							children: /* @__PURE__ */ jsxs("div", {
+								ref: panelRef,
+								"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),
+								style: fontSize !== void 0 ? { "--wd-font-size": `${Math.round(fontSize)}px` } : void 0,
+								children: [
+									headerTakesActions ? header({ actions: menu }) : header,
+									statusPlacement === "top" ? statusBar : null,
+									protocolMismatch !== void 0 ? /* @__PURE__ */ jsxs(Notice, {
+										level: "warning",
 										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",
-												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"
-											})
+											"Server speaks protocol v",
+											protocolMismatch,
+											", this build renders v",
+											PROTOCOL_VERSION,
+											". Some events may not render."
 										]
-									})
-								}) : null,
-								!readOnly && capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? /* @__PURE__ */ jsx("div", {
-									className: cn(terminal ? "pb-2" : "px-3 pb-2"),
-									children: /* @__PURE__ */ jsx(PromptSurface, {
+									}) : 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,
-										metrics: {
+										fontSize: effectiveTermFontSize,
+										lineHeight: effectiveTermLineHeight
+									}) : null,
+									/* @__PURE__ */ jsx(BookmarkProvider, {
+										value: bookmarkHandle,
+										children: /* @__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: effectiveTermFontSize,
-											lineHeight: effectiveTermLineHeight
-										},
-										affordances,
-										children: state.pendingApprovals.map((request) => {
-											const HostPrompt = approvalPrompts?.[request.toolName];
-											if (HostPrompt) return /* @__PURE__ */ jsx(HostPrompt, {
-												request,
-												onApprove: approve,
-												onDeny: deny
-											}, request.id);
-											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(Fragment$1, { children: /* @__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,
-									draft,
-									onSearchFiles: hostFiles.available ? searchComposerFiles : void 0,
-									onShellCommand: shell ? runShell : void 0,
-									layout: controlsExternal ? "inline" : "stacked",
-									toolbar: controlsExternal ? void 0 : sessionControls,
-									fontSize: effectiveTermFontSize,
-									lineHeight: effectiveTermLineHeight,
-									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,
-										engine: state.engine ?? "claude",
-										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)
+											lineHeight: effectiveTermLineHeight,
+											affordances,
+											stickyPrompt,
+											scrubber,
+											bookmarks,
+											replaying,
+											catchUp: catchUp && newCount > 0 ? {
+												from: catchUp.itemCount,
+												since: catchUp.since
+											} : void 0,
+											reveal: taskReveal ?? returnReveal ?? reveal,
+											frame: subagentId === void 0 ? void 0 : { parentToolUseId: subagentId },
+											onOpenSubagent: enterSubagent,
+											emptyState,
+											jumpToRecapRef: jumpToRecap,
+											repinRef: repinTranscript
+										}, subagentId ?? "session")
 									}),
-									/* @__PURE__ */ jsx(McpDialog, {
-										client,
-										sessionId,
-										canManageServers: capabilities.mcpServerActions,
-										open: panel === "mcp",
-										onOpenChange: (next) => setPanel(next ? "mcp" : void 0)
-									}),
-									/* @__PURE__ */ jsx(TasksDialog, {
-										tasks,
-										showCompleted: showCompletedTasks,
-										onShowCompletedChange: setShowCompletedTasks,
-										onSelectTask: (task) => {
-											if (task.toolUseId) setTaskReveal({
-												toolUseId: task.toolUseId,
-												nonce: Date.now()
-											});
-										},
-										open: panel === "tasks",
-										onOpenChange: (next) => setPanel(next ? "tasks" : 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
-							]
+									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-transcript-max-width)] 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",
+													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: {
+												fontSize: effectiveTermFontSize,
+												lineHeight: effectiveTermLineHeight
+											},
+											affordances,
+											children: state.pendingApprovals.map((request) => {
+												const HostPrompt = approvalPrompts?.[request.toolName];
+												if (HostPrompt) return /* @__PURE__ */ jsx(HostPrompt, {
+													request,
+													onApprove: approve,
+													onDeny: deny
+												}, request.id);
+												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(Fragment$1, { children: /* @__PURE__ */ jsx(Composer, {
+										ref: composerRef,
+										onSend: handleSend,
+										onInterrupt: interrupt,
+										busy,
+										disabled: ended || !sessionId,
+										commands: capabilities.slashCommands ? state.commands : void 0,
+										skills: capabilities.skillsList ? state.skills : void 0,
+										clientCommands,
+										attachments,
+										draft,
+										onSearchFiles: hostFiles.available ? searchComposerFiles : void 0,
+										onShellCommand: shell ? runShell : void 0,
+										layout: controlsExternal ? "inline" : "stacked",
+										toolbar: controlsExternal ? void 0 : sessionControls,
+										fontSize: effectiveTermFontSize,
+										lineHeight: effectiveTermLineHeight,
+										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,
+											engine: state.engine ?? "claude",
+											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,
+											costUsd: state.costUsd,
+											usageByModel: state.usageByModel,
+											spend: profileSpend,
+											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(TasksDialog, {
+											tasks,
+											showCompleted: showCompletedTasks,
+											onShowCompletedChange: setShowCompletedTasks,
+											onSelectTask: (task) => {
+												if (task.toolUseId) setTaskReveal({
+													toolUseId: task.toolUseId,
+													nonce: Date.now()
+												});
+											},
+											open: panel === "tasks",
+											onOpenChange: (next) => setPanel(next ? "tasks" : 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
+								]
+							})
 						})
 					})
 				})
@@ -11696,6 +12177,108 @@ function Notice({ level, onDismiss, children }) {
 	});
 }
 //#endregion
-export { Ink as $, PERMISSION_MODES as A, DialogContent as At, TaskList as B, SelectContent as Bt, TerminalPermissionPrompt as C, copyText as Ct, SubagentStrip as D, Dialog$1 as Dt, parseUserQuestions as E, TooltipProvider as Et, SkillsDialog as F, MenuContent as Ft, TerminalSurface as G, PortalScope as Gt, contextNote as H, SelectItemText as Ht, McpDialog as I, MenuItem as It, TerminalMarkdown as J, Badge as Jt, ToolTitleProvider as K, Textarea as Kt, HostFilesDialog as L, MenuSeparator as Lt, permissionModeChoices as M, DialogRow as Mt, permissionModeMeta as N, DialogTrigger as Nt, PermissionPrompt as O, DialogBody as Ot, ModelSelect as P, Menu$1 as Pt, Blank as Q, cn as Qt, EntryIcon as R, MenuTrigger as Rt, TerminalQuestionPrompt as S, CopyButton as St, QuestionPrompt as T, TooltipContent as Tt, Composer as U, SelectTrigger as Ut, ContextDialog as V, SelectItem as Vt, skillPrompt as W, SelectValue as Wt, previewPatch as X, Button as Xt, TerminalDiff as Y, badgeVariants as Yt, Band as Z, buttonVariants as Zt, ConversationContent as _, segmentsToPlainText as _t, Transcript as a, toolIcon as at, STATUS_META as b, CodeBlock as bt, PromptTokenText as c, useTranscriptDensity as ct, FileCard as d, hashtagTrigger as dt, Row as et, TerminalItemView as f, launchTrigger as ft, Conversation as g, plainTextToSegments as gt, Loader as h, PromptArea as ht, useMinuteClock as i, isMutatingTool as it, PermissionModeSelect as j, DialogHeader as jt, Response as k, DialogClose as kt, Message as l, useTranscriptVariant as lt, SessionEmptyState as m, usePromptAreaState as mt, UsageDialog as n, WithActions as nt, ToolCallCard as o, TranscriptDensityProvider as ot, TerminalTranscript as p, mentionTrigger as pt, useToolTitle as q, Input as qt, UsageMeters as r, useAffordances as rt, Reasoning as s, TranscriptVariantProvider as st, SessionPanel as t, CopyAction as tt, MessageContent as u, commandTrigger as ut, ConversationScrollButton as v, ProgressRing as vt, QUESTION_BEHAVIORS as w, Tip as wt, SessionInfoDialog as x, Spinner as xt, StatusBar as y, Splitter as yt, TasksDialog as z, Select$1 as zt };
+//#region src/lib/path-match.ts
+const SEG = "[^\\s:'\"`()\\[\\]{}<>|]+";
+const PATH_PATTERN = new RegExp(`(?:^|[\\s'"\`([{<@,])((?:\\.\\.?)?(?:/${SEG})+|[^\\s:'"\`()\\[\\]{}<>|@,]+(?:/${SEG})+)(?::(\\d+))?`);
+const FILE_PATTERN = /^([\w.@-]+\.[A-Za-z0-9]{1,10})(?::(\d+))?$/;
+const TRAILING = /[.,;:!?)\]}'"`]+$/;
+const FILENAME = /\.[A-Za-z0-9]{1,10}$/;
+function matchPath(text, inCode = false) {
+	const source = text ?? "";
+	const match = PATH_PATTERN.exec(source);
+	if (!match) return inCode ? matchFilename(source) : void 0;
+	const path = match[1].replace(TRAILING, "");
+	if (!path.includes("/") || path.endsWith("/")) return;
+	if (!(path.startsWith("/") || path.startsWith("./") || path.startsWith("../")) && !FILENAME.test(path)) return;
+	return {
+		path,
+		line: match[2] ? Number(match[2]) : void 0,
+		length: path.length + (match[2] ? match[2].length + 1 : 0)
+	};
+}
+function matchFilename(text) {
+	const hit = FILE_PATTERN.exec(text.trim());
+	if (!hit) return;
+	const line = hit[2] ? Number(hit[2]) : void 0;
+	return {
+		path: hit[1],
+		line,
+		length: hit[0].length
+	};
+}
+//#endregion
+//#region src/components/agent/use-path-links.ts
+const LINKISH = "wd-path-link";
+const COVERAGE = .6;
+function hitFor(element) {
+	if (!element) return;
+	const inCode = element.closest("code") !== null;
+	const text = element.textContent?.trim() ?? "";
+	const hit = matchPath(text, inCode);
+	if (!hit) return;
+	if (!inCode && hit.length < text.length * COVERAGE) return;
+	return {
+		path: hit.path,
+		line: hit.line
+	};
+}
+function usePathLinks({ container, onOpen, enabled = true, ignore }) {
+	useEffect(() => {
+		const root = container.current;
+		if (!root || !enabled) return;
+		const excluded = (element) => ignore !== void 0 && element?.closest(ignore) !== null && element !== void 0;
+		let marked;
+		const unmark = () => {
+			marked?.classList.remove(LINKISH);
+			marked = void 0;
+		};
+		const onClick = (event) => {
+			if (!event.metaKey && !event.ctrlKey) return;
+			const target = event.target instanceof HTMLElement ? event.target : void 0;
+			if (excluded(target)) return;
+			const hit = hitFor(target);
+			if (!hit) return;
+			event.preventDefault();
+			event.stopPropagation();
+			unmark();
+			onOpen(hit);
+		};
+		const onMove = (event) => {
+			if (!event.metaKey && !event.ctrlKey) return unmark();
+			const element = event.target instanceof HTMLElement ? event.target : void 0;
+			if (element === marked) return;
+			unmark();
+			if (!element || excluded(element) || !hitFor(element)) return;
+			marked = element;
+			element.classList.add(LINKISH);
+		};
+		const onKey = (event) => {
+			if (!event.metaKey && !event.ctrlKey) unmark();
+		};
+		root.addEventListener("click", onClick, true);
+		root.addEventListener("mousemove", onMove);
+		document.addEventListener("keydown", onKey);
+		document.addEventListener("keyup", onKey);
+		window.addEventListener("blur", unmark);
+		return () => {
+			unmark();
+			root.removeEventListener("click", onClick, true);
+			root.removeEventListener("mousemove", onMove);
+			document.removeEventListener("keydown", onKey);
+			document.removeEventListener("keyup", onKey);
+			window.removeEventListener("blur", unmark);
+		};
+	}, [
+		container,
+		onOpen,
+		enabled,
+		ignore
+	]);
+}
+function resolveAgainstCwd(path, cwd) {
+	return parseFileLink(path, cwd)?.path ?? path;
+}
+//#endregion
+export { TerminalDiff as $, SelectValue as $t, PermissionPrompt as A, Spinner as At, EntryIcon as B, DialogHeader as Bt, SessionInfoDialog as C, usePromptAreaState as Ct, QuestionPrompt as D, ProgressRing as Dt, QUESTION_BEHAVIORS as E, segmentsToPlainText as Et, permissionModeMeta as F, TooltipProvider as Ft, Composer as G, MenuItem as Gt, TaskList as H, DialogTrigger as Ht, ModelSelect as I, Dialog$1 as It, useToolTitle as J, Select$1 as Jt, TerminalSurface as K, MenuSeparator as Kt, SkillsDialog as L, DialogBody as Lt, PERMISSION_MODES as M, copyText as Mt, PermissionModeSelect as N, Tip as Nt, parseUserQuestions as O, Splitter as Ot, permissionModeChoices as P, TooltipContent as Pt, parseFileLink as Q, SelectTrigger as Qt, McpDialog as R, DialogClose as Rt, STATUS_META as S, mentionTrigger as St, TerminalPermissionPrompt as T, plainTextToSegments as Tt, ContextDialog as U, Menu$1 as Ut, TasksDialog as V, DialogRow as Vt, contextNote as W, MenuContent as Wt, FileLinkProvider as X, SelectItem as Xt, TerminalMarkdown as Y, SelectContent as Yt, useFileLinks as Z, SelectItemText as Zt, Loader as _, rankComposerRows as _t, UsageDialog as a, Button as an, CopyAction as at, ConversationScrollButton as b, hashtagTrigger as bt, Transcript as c, PromptTokenText as ct, Message as d, TranscriptDensityProvider as dt, PortalScope as en, previewPatch as et, MessageContent as f, TranscriptVariantProvider as ft, SessionEmptyState as g, mergeComposerRows as gt, TerminalTranscript as h, matchClientCommand as ht, SessionPanel as i, badgeVariants as in, Row as it, Response as j, CopyButton as jt, SubagentStrip as k, CodeBlock as kt, ToolCallCard as l, isMutatingTool as lt, TerminalItemView as m, useTranscriptVariant as mt, usePathLinks as n, Input as nn, Blank as nt, UsageMeters as o, buttonVariants as on, WithActions as ot, FileCard as p, useTranscriptDensity as pt, ToolTitleProvider as q, MenuTrigger as qt, matchPath as r, Badge as rn, Ink as rt, useMinuteClock as s, cn as sn, useAffordances as st, resolveAgainstCwd as t, Textarea as tn, Band as tt, Reasoning as u, toolIcon as ut, Conversation as v, skillPrompt as vt, TerminalQuestionPrompt as w, PromptArea as wt, StatusBar as x, launchTrigger as xt, ConversationContent as y, commandTrigger as yt, HostFilesDialog as z, DialogContent as zt };
 
-//# sourceMappingURL=SessionPanel-Dg4xf-ql.mjs.map
+//# sourceMappingURL=use-path-links-CvcxdUXL.mjs.map