@workerdeck/ui 0.7.0 → 0.10.0

package/build/index.mjs

@@ -1,17 +1,20 @@
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Fragment, forwardRef, memo, useCallback, 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, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";
-import { ArrowDown, ArrowUp, Brain, Check, ChevronDown, ChevronsUpDown, Clock, Copy, Download, FileText, LoaderCircle, MessageCircleQuestion, ShieldAlert, Square, Trash2, WifiOff, Wrench, X } from "lucide-react";
+import { ArrowDown, ArrowDownCircle, ArrowUp, AtSign, Brain, ChartPie, Check, CheckSquare, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, ClipboardList, Clock, Code, Copy, Download, File, FileDiff, FileText, FileWarning, Folder, FolderOpen, FolderSearch, FolderTree, Gauge, Globe, Hand, Image, Info, Link2, LoaderCircle, MessageCircleQuestion, MessageSquareText, MoreHorizontal, PanelLeftClose, PanelLeftOpen, Paperclip, PencilLine, Plug, Power, PowerOff, Puzzle, RefreshCw, RotateCcw, RotateCw, Search, ShieldCheck, SlashSquare, Sparkles, Square, SquarePen, Terminal, Trash2, TriangleAlert, UsersRound, WifiOff, Wrench, X, Zap } from "lucide-react";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+import { Menu as Menu$1 } from "@base-ui/react/menu";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { Tooltip } from "@base-ui/react/tooltip";
 import { Toaster as Toaster$1, toast } from "sonner";
-import { PROVIDER_PERMISSION_MODES } from "@workerdeck/protocol";
-import { useClaudeSession, useToolCallHost } from "@workerdeck/react";
+import { PROTOCOL_VERSION } from "@workerdeck/protocol";
+import { currentText, isDirty, rateLimitWindows, scanPromptTokens, useAttachments, useClaudeSession, useHostFileRoots, useHostFileSearch, useHostFileTree, useOpenFiles, useSessionInfo, useToolCallHost } from "@workerdeck/react";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 import { Streamdown } from "streamdown";
+import { createPortal } from "react-dom";
 //#region src/lib/utils.ts
 const twMerge = extendTailwindMerge({ extend: { classGroups: { "font-size": [{ text: [
 	"display-xl",
@@ -207,6 +210,86 @@ const AlertDialogDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(
 	...props
 });
 //#endregion
+//#region src/components/ui/Menu.tsx
+const Menu = Menu$1.Root;
+const MenuTrigger = Menu$1.Trigger;
+const MenuContent = ({ className, align = "end", side = "bottom", sideOffset = 6, ...props }) => /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
+	align,
+	side,
+	sideOffset,
+	className: "isolate z-60 outline-none",
+	children: /* @__PURE__ */ jsx(Menu$1.Popup, {
+		"data-slot": "menu-content",
+		className: cn("min-w-48 rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none", "transition-[opacity,transform] duration-(--motion-base)", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
+		...props
+	})
+}) });
+const MenuItem = ({ className, destructive, ...props }) => /* @__PURE__ */ jsx(Menu$1.Item, {
+	"data-slot": "menu-item",
+	className: cn("flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-body-sm outline-none select-none", "data-highlighted:bg-surface-hover", destructive ? "text-danger" : "text-text", className),
+	...props
+});
+const MenuSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Menu$1.Separator, {
+	className: cn("my-1 h-px bg-border", className),
+	...props
+});
+//#endregion
+//#region src/components/ui/Dialog.tsx
+const Dialog = Dialog$1.Root;
+const DialogTrigger = Dialog$1.Trigger;
+const DialogClose = Dialog$1.Close;
+/**
+* A dismissible panel, sized for reading rather than confirming — the web
+* counterpart of the iOS app's detail sheets (context, usage, session info, MCP).
+*
+* Taller than {@link AlertDialogContent} and scrollable inside, because these
+* carry lists whose length is the engine's business, not the layout's.
+*/
+const DialogContent = ({ className, children, size = "md", ...props }) => /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: cn("fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]", "transition-opacity duration-(--motion-base)", "data-starting-style:opacity-0 data-ending-style:opacity-0") }), /* @__PURE__ */ jsx(Dialog$1.Popup, {
+	"data-slot": "dialog-content",
+	className: cn("fixed top-1/2 left-1/2 z-70 flex max-h-[min(42rem,calc(100dvh-3rem))] -translate-x-1/2 -translate-y-1/2 flex-col", size === "sm" && "w-[min(24rem,calc(100vw-2rem))]", size === "md" && "w-[min(32rem,calc(100vw-2rem))]", size === "lg" && "w-[min(46rem,calc(100vw-2rem))]", "rounded-lg border border-border bg-surface shadow-(--shadow-lg) outline-none", "transition-[opacity,transform] duration-(--motion-base)", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
+	...props,
+	children
+})] });
+/** Title row with the close button, pinned above the scrolling body. */
+const DialogHeader = ({ title, description, actions }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex items-start gap-2 border-b border-border px-4 py-3",
+	children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx(Dialog$1.Title, {
+				className: "truncate text-body-sm font-semibold text-text",
+				children: title
+			}), description ? /* @__PURE__ */ jsx(Dialog$1.Description, {
+				className: "mt-0.5 text-label text-fg-4",
+				children: description
+			}) : null]
+		}),
+		actions,
+		/* @__PURE__ */ jsx(Dialog$1.Close, {
+			"aria-label": "Close",
+			className: "-mr-1 flex size-6 shrink-0 items-center justify-center rounded-md text-fg-3 transition-colors outline-none hover:bg-surface-hover hover:text-fg-1",
+			children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+		})
+	]
+});
+/** The scrolling region under the header. */
+const DialogBody = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("min-h-0 flex-1 overflow-y-auto p-4", className),
+	...props
+});
+/** A label/value row — the shape every one of these panels is mostly made of. */
+const DialogRow = ({ label, children, mono }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex items-baseline justify-between gap-4 py-1.5",
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "shrink-0 text-label text-fg-3",
+		children: label
+	}), /* @__PURE__ */ jsx("span", {
+		className: cn("min-w-0 truncate text-right text-body-sm text-fg-1", mono && "font-mono text-label"),
+		children
+	})]
+});
+//#endregion
 //#region src/components/ui/Tooltip.tsx
 const TooltipProvider = Tooltip.Provider;
 const TooltipContent = ({ className, side = "top", sideOffset = 6, ...props }) => /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
@@ -219,12 +302,22 @@ const TooltipContent = ({ className, side = "top", sideOffset = 6, ...props }) =
 		...props
 	})
 }) });
-/** Convenience wrapper: <Tip content="..."><Button/></Tip> */
-function Tip({ content, children }) {
+/**
+* Convenience wrapper: `<Tip content="..."><Button/></Tip>`.
+*
+* Pass `render` when the trigger must *be* an element you already have — a tab, a
+* row — rather than something wrapped in a span. The default span is fine beside
+* a button but would break any layout that styles its own children (a flex tab
+* strip gets an extra box between the container and its items).
+*/
+function Tip({ content, render, side, children }) {
 	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
-		render: /* @__PURE__ */ jsx("span", { className: "inline-flex" }),
+		render: render ?? /* @__PURE__ */ jsx("span", { className: "inline-flex" }),
 		children
-	}), /* @__PURE__ */ jsx(TooltipContent, { children: content })] });
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side,
+		children: content
+	})] });
 }
 //#endregion
 //#region src/components/ui/Sonner.tsx
@@ -243,6 +336,53 @@ function Toaster() {
 	});
 }
 //#endregion
+//#region src/lib/clipboard.ts
+/**
+* Copy text to the clipboard, on origins where the modern API does not exist.
+*
+* `navigator.clipboard` is gated on a **secure context**: HTTPS, or localhost.
+* A WorkerDeck dashboard reached the way it is meant to be reached — plain HTTP
+* on a LAN address, from a laptop or a phone — is neither, so `navigator.clipboard`
+* is `undefined` there and touching `.writeText` throws outright. That is the
+* normal deployment, not an edge case, which is why this falls back rather than
+* feature-detecting into a disabled button.
+*
+* The fallback is `document.execCommand('copy')` over an off-screen textarea.
+* It is deprecated and it is also the only thing that works here; every browser
+* still implements it. Returns whether the text actually landed, so a caller can
+* avoid claiming success it did not have.
+*/
+async function copyText(value) {
+	try {
+		if (navigator.clipboard?.writeText) {
+			await navigator.clipboard.writeText(value);
+			return true;
+		}
+	} catch {}
+	return legacyCopy(value);
+}
+function legacyCopy(value) {
+	if (typeof document === "undefined") return false;
+	const textarea = document.createElement("textarea");
+	textarea.value = value;
+	textarea.setAttribute("readonly", "");
+	textarea.style.position = "fixed";
+	textarea.style.top = "-9999px";
+	textarea.style.opacity = "0";
+	document.body.appendChild(textarea);
+	const previous = document.activeElement;
+	try {
+		textarea.select();
+		textarea.setSelectionRange(0, value.length);
+		return document.execCommand("copy");
+	} catch {
+		return false;
+	} finally {
+		document.body.removeChild(textarea);
+		if (previous instanceof HTMLElement) previous.focus();
+	}
+}
+//#endregion
 //#region src/components/ui/CopyButton.tsx
 function CopyButton({ value, className, variant = "ghost", size = "icon-sm", ...props }) {
 	const [copied, setCopied] = useState(false);
@@ -252,7 +392,8 @@ function CopyButton({ value, className, variant = "ghost", size = "icon-sm", ...
 		"aria-label": "Copy",
 		className: cn("text-fg-3", className),
 		onClick: () => {
-			navigator.clipboard.writeText(value).then(() => {
+			copyText(value).then((ok) => {
+				if (!ok) return;
 				setCopied(true);
 				setTimeout(() => setCopied(false), 1500);
 			});
@@ -290,6 +431,81 @@ function CodeBlock({ code, label, copyable = true, className }) {
 	});
 }
 //#endregion
+//#region src/components/ui/Splitter.tsx
+/**
+* A draggable pane divider.
+*
+* Hand-rolled rather than depended on: `@base-ui/react` ships no splitter, the
+* behaviour is a hundred lines of pointer events, and this repo's instinct at
+* this layer is to own it (the composer is vendored for the same reason).
+*
+* Pointer capture is what makes it survive a fast drag — without it the pointer
+* leaves the 5px bar within a frame and the moves go to whatever is underneath,
+* which for this layout is an iframe-free but still selection-happy code pane.
+* The drag origin is captured on pointerdown and every move is measured against
+* it, so the pane cannot drift relative to the cursor over a long drag the way
+* per-move deltas do once clamping is involved.
+*
+* Keyboard-operable and announced as a separator, because a pane you can only
+* size by dragging is a pane some people cannot size.
+*/
+function Splitter({ orientation, value, onValueChange, min, max, step = 16, inverted, "aria-label": label, className }) {
+	const drag = useRef(null);
+	const vertical = orientation === "vertical";
+	const clamp = useCallback((next) => Math.min(max, Math.max(min, next)), [min, max]);
+	const onPointerDown = (event) => {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		event.currentTarget.setPointerCapture(event.pointerId);
+		drag.current = {
+			origin: vertical ? event.clientX : event.clientY,
+			start: value
+		};
+	};
+	const onPointerMove = (event) => {
+		const state = drag.current;
+		if (!state) return;
+		const delta = (vertical ? event.clientX : event.clientY) - state.origin;
+		onValueChange(clamp(state.start + (inverted ? -delta : delta)));
+	};
+	const endDrag = (event) => {
+		if (!drag.current) return;
+		drag.current = null;
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+	};
+	const onKeyDown = (event) => {
+		const grow = vertical ? "ArrowRight" : "ArrowDown";
+		const shrink = vertical ? "ArrowLeft" : "ArrowUp";
+		const direction = inverted ? -1 : 1;
+		if (event.key === grow) onValueChange(clamp(value + step * direction));
+		else if (event.key === shrink) onValueChange(clamp(value - step * direction));
+		else if (event.key === "Home") onValueChange(min);
+		else if (event.key === "End") onValueChange(max);
+		else return;
+		event.preventDefault();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "splitter",
+		role: "separator",
+		tabIndex: 0,
+		"aria-label": label,
+		"aria-orientation": orientation,
+		"aria-valuenow": Math.round(value),
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		onPointerDown,
+		onPointerMove,
+		onPointerUp: endDrag,
+		onPointerCancel: endDrag,
+		onKeyDown,
+		className: cn("group relative shrink-0 touch-none bg-border transition-colors", "hover:bg-border-strong focus-visible:bg-accent focus-visible:outline-none", vertical ? "w-px cursor-col-resize" : "h-px cursor-row-resize", className),
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn("absolute", vertical ? "-inset-x-[3px] inset-y-0" : "-inset-y-[3px] inset-x-0")
+		})
+	});
+}
+//#endregion
 //#region src/components/ui/ProgressRing.tsx
 /** Tiny SVG progress circle; stroke color comes from `currentColor` so callers set it
 * via text color classes (e.g. warning/danger past thresholds). */
@@ -519,6 +735,58 @@ function resolveChip(segments, activeTrigger, chip) {
 	};
 }
 /**
+* Replaces the active trigger's range with **plain text** instead of a chip.
+*
+* The sibling of {@link resolveChip}, for suggestions that are a typing aid
+* rather than a token: what lands in the document is ordinary editable text the
+* user is expected to finish and change, and it must not look or behave like a
+* resolved chip — no immutability, no trigger character, nothing for a consumer
+* to parse back out. The caret is left at the end of the inserted text so typing
+* continues from there.
+*/
+function resolveText(segments, activeTrigger, text) {
+	const triggerStart = activeTrigger.startOffset;
+	const triggerEnd = triggerStart + 1 + activeTrigger.query.length;
+	const newSegments = [];
+	let offset = 0;
+	let cursorOffset = triggerStart + text.length;
+	for (const seg of segments) {
+		if (seg.type === "chip") {
+			const chipEnd = offset + `${seg.trigger}${seg.displayText}`.length;
+			if (chipEnd <= triggerStart || offset >= triggerEnd) newSegments.push(seg);
+			offset = chipEnd;
+			continue;
+		}
+		const textStart = offset;
+		const textEnd = offset + seg.text.length;
+		if (textEnd <= triggerStart || textStart >= triggerEnd) newSegments.push(seg);
+		else {
+			const before = seg.text.slice(0, Math.max(0, triggerStart - textStart));
+			const after = seg.text.slice(Math.min(seg.text.length, triggerEnd - textStart));
+			if (before) newSegments.push({
+				type: "text",
+				text: before
+			});
+			newSegments.push({
+				type: "text",
+				text
+			});
+			if (after) newSegments.push({
+				type: "text",
+				text: after
+			});
+		}
+		offset = textEnd;
+	}
+	const merged = mergeAdjacentTextSegments(newSegments);
+	const total = segmentsToPlainText(merged).length;
+	if (cursorOffset > total) cursorOffset = total;
+	return {
+		segments: merged,
+		cursorOffset
+	};
+}
+/**
 * Removes a chip at the given segment index and merges adjacent text segments.
 *
 * @param segments - Current document segments
@@ -2908,6 +3176,20 @@ function usePromptArea({ value, onChange, triggers = [], disabled = false, onSub
 	const selectSuggestionInternal = useCallback((suggestion) => {
 		if (!activeTrigger) return;
 		const segments = readSegmentsFromDOM();
+		const asText = activeTrigger.config.insertAsText?.(suggestion);
+		if (asText !== void 0) {
+			const inserted = resolveText(segments, activeTrigger, asText);
+			events.pushUndo(segments);
+			onChange(inserted.segments);
+			renderSegmentsToDOM(inserted.segments);
+			const editor = editorRef.current;
+			if (editor) setCursorAtOffset(editor, inserted.cursorOffset);
+			dismissTrigger();
+			setTimeout(() => {
+				editorRef.current?.focus();
+			}, 0);
+			return;
+		}
 		const displayText = activeTrigger.config.onSelect?.(suggestion) ?? suggestion.label;
 		const chipData = {
 			value: suggestion.value,
@@ -3522,8 +3804,8 @@ function Svg({ className, children }) {
 		children
 	});
 }
-const FileBody = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }), /* @__PURE__ */ jsx("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" })] });
-const File = ({ className }) => /* @__PURE__ */ jsx(Svg, {
+const FileBody = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }), /* @__PURE__ */ jsx("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" })] });
+const File$1 = ({ className }) => /* @__PURE__ */ jsx(Svg, {
 	className,
 	children: FileBody
 });
@@ -3589,7 +3871,7 @@ const FILE_ICONS = {
 	spreadsheet: FileSpreadsheet,
 	code: FileCode,
 	image: ImageIcon,
-	default: File
+	default: File$1
 };
 /** Format bytes into a human-readable string. */
 function formatFileSize(bytes) {
@@ -4057,134 +4339,1144 @@ function getChipsByTrigger(segments, trigger) {
 	return segments.filter((seg) => seg.type === "chip" && seg.trigger === trigger);
 }
 //#endregion
+//#region src/lib/format.ts
+function formatCost(usd) {
+	if (usd === void 0 || Number.isNaN(usd)) return "—";
+	if (usd === 0) return "$0.00";
+	if (usd < .01) return "<$0.01";
+	return `$${usd.toFixed(2)}`;
+}
+function formatDuration(ms) {
+	if (ms < 1e3) return `${Math.round(ms)}ms`;
+	const s = ms / 1e3;
+	if (s < 60) return `${s.toFixed(1)}s`;
+	return `${Math.floor(s / 60)}m ${Math.round(s % 60)}s`;
+}
+/** Compact token count, Claude Code-style: 850 → "850", 359_000 → "359.0k", 1_200_000 → "1.2M". */
+function formatTokens(tokens) {
+	if (tokens >= 1e6) return `${(tokens / 1e6).toFixed(1)}M`;
+	if (tokens >= 1e3) return `${(tokens / 1e3).toFixed(1)}k`;
+	return String(Math.round(tokens));
+}
+function formatBytes(bytes) {
+	if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${bytes} B`;
+}
+/** Countdown to an epoch-ms deadline: "2h 18m", "12m", "<1m"; "now" once passed. */
+function formatCountdown(untilEpochMs, now = Date.now()) {
+	const remaining = untilEpochMs - now;
+	if (remaining <= 0) return "now";
+	const minutes = Math.ceil(remaining / 6e4);
+	if (minutes < 1) return "<1m";
+	if (minutes < 60) return `${minutes}m`;
+	const days = Math.floor(minutes / 1440);
+	if (days >= 1) return `${days}d ${Math.floor(minutes % 1440 / 60)}h`;
+	return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+}
+function formatRelativeTime(epochMs, now = Date.now()) {
+	if (!epochMs) return "—";
+	const diff = Math.max(0, now - epochMs);
+	const s = Math.floor(diff / 1e3);
+	if (s < 60) return "just now";
+	const m = Math.floor(s / 60);
+	if (m < 60) return `${m}m ago`;
+	const h = Math.floor(m / 60);
+	if (h < 24) return `${h}h ago`;
+	return `${Math.floor(h / 24)}d ago`;
+}
+/**
+* Human label for a rate-limit window key, compact: 'five_hour' → "5h",
+* 'seven_day_opus' → "7d opus". The per-model suffix is an open set — the CLI
+* adds buckets as plans gain them — so it is rewritten rather than enumerated.
+*/
+function formatRateLimitWindow(key) {
+	if (key === "five_hour") return "5h";
+	if (key === "seven_day") return "7d";
+	const spaced = key.replaceAll("_", " ");
+	return key.startsWith("seven_day_") ? `7d ${spaced.slice(10)}` : spaced;
+}
+/** The same key spelled out, where there is room: 'five_hour' → "5-hour
+* session", 'seven_day_fable' → "Weekly · Fable". */
+function formatRateLimitWindowLong(key) {
+	if (key === "five_hour") return "5-hour session";
+	if (key === "seven_day") return "Weekly";
+	if (key === "seven_day_oauth_apps") return "Weekly · apps";
+	const capitalize = (s) => s.replace(/\b\w/g, (c) => c.toUpperCase());
+	if (!key.startsWith("seven_day_")) return capitalize(key.replaceAll("_", " "));
+	return `Weekly · ${capitalize(key.slice(10).replaceAll("_", " "))}`;
+}
+/**
+* How long a rate-limit window is, in seconds — the denominator behind the pace
+* marker. Derived from the key rather than reported: the CLI sends a reset time
+* and a percentage, never a duration. `undefined` for a window whose key doesn't
+* say, and the marker is then simply not drawn rather than guessed.
+*/
+function rateLimitWindowSeconds(key) {
+	if (key === "five_hour") return 5 * 3600;
+	if (key.startsWith("seven_day")) return 7 * 86400;
+}
+/** "8 secs ago" / "3 mins ago" — a freshness line finer-grained than
+* {@link formatRelativeTime}, because a poll that just landed should say so. */
+function formatAgoPrecise(epochMs, now = Date.now()) {
+	const seconds = Math.max(0, Math.floor((now - epochMs) / 1e3));
+	if (seconds < 60) return `${seconds} sec${seconds === 1 ? "" : "s"} ago`;
+	if (seconds < 3600) {
+		const minutes = Math.floor(seconds / 60);
+		return `${minutes} min${minutes === 1 ? "" : "s"} ago`;
+	}
+	const hours = Math.floor(seconds / 3600);
+	return `${hours} hour${hours === 1 ? "" : "s"} ago`;
+}
+/** Compact one-line preview of a tool input for card headers. */
+function toolInputPreview(input, max = 80) {
+	if (input === null || input === void 0) return "";
+	if (typeof input === "object") {
+		const o = input;
+		const primary = o.command ?? o.file_path ?? o.path ?? o.url ?? o.pattern ?? o.query ?? o.description;
+		if (typeof primary === "string") return primary.length > max ? primary.slice(0, max - 1) + "…" : primary;
+	}
+	const text = JSON.stringify(input) ?? "";
+	return text.length > max ? text.slice(0, max - 1) + "…" : text;
+}
+//#endregion
 //#region src/components/agent/Composer.tsx
 /** CLI names may carry display annotations (e.g. "foo (MCP)") the parser rejects. */
 const cleanName = (name) => name.replace(/\s*\(MCP\)$/i, "");
-/** Framed prompt input built on prompt-area's contentEditable: typing "/" — at the
-* start or after whitespace — opens a suggestion dropdown fed by `commands`, and a
-* picked command becomes an inline chip. Submit button flips to stop while a turn
-* is running (messages still queue while busy). */
-function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message Claude…", commands, toolbar, className }) {
+/**
+* What a picked skill types into the composer.
+*
+* The engine's own `defaultPrompt` when it declared one — it knows what its
+* skill wants to be asked — and otherwise `$name`, which is codex's native way
+* of referring to a skill in prompt text: its `skill-creator` documents the form
+* (`Use $skill-x at /path/to/skill-x to solve problem y`) and its own bundled
+* prompts are written that way ("Use $pdf to …"). Spelling it the way the engine
+* spells it beats paraphrasing into "Use the X skill to".
+*
+* Either way it ends in a space so the caret lands ready for the rest of the
+* sentence, and either way it is ordinary text: nothing here is submitted, and
+* nothing is parsed back out.
+*/
+function skillPrompt(skill) {
+	const base = skill.defaultPrompt?.trim() || `$${skill.name}`;
+	return /\s$/.test(base) ? base : base + " ";
+}
+/** Ranks a haystack set against the typed query: 2 for a prefix hit, 1 for a
+* substring, 0 for no match. Shared so commands and skills sort as one list
+* rather than two concatenated ones. */
+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;
+}
+/**
+* Framed prompt input built on prompt-area's contentEditable.
+*
+* Three completions ride the same field and behave nothing alike. `/` is the
+* CLI's command list and `$` is the engine's skill list — both local, so they
+* filter completely and instantly; `@` is a search against the host filesystem,
+* debounced and abortable so a fast typist makes one request rather than eight.
+*
+* `/` and `$` are separate keys rather than one merged menu, and that mirrors
+* the engines themselves: codex completes skills on `$` and reserves `/` for
+* commands. The behaviours differ too — a command resolves to a **chip**,
+* because the CLI really does parse `/name` out of the message, while a skill
+* resolves to plain editable **text**, because no engine parses `$name` as
+* syntax; it is prose the model reads. Rendering them alike would promise
+* something that does not happen.
+*
+* Files can arrive three ways — the paperclip, a drop, or a paste — because on a
+* desktop all three are things people already do, and the upload starts the
+* moment one lands rather than at send time.
+*/
+function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message the agent…", commands, skills, onSearchFiles, attachments, toolbar, className, ref }) {
 	const { bind, plainText, isEmpty, clear, focus } = usePromptAreaState();
+	const fileInput = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	useImperativeHandle(ref, () => ({ insertText: (text) => {
+		const prefix = plainText.length > 0 && !/\s$/.test(plainText) ? " " : "";
+		bind.ref.current?.appendText(prefix + text);
+		focus();
+	} }), [
+		bind.ref,
+		plainText,
+		focus
+	]);
 	const triggers = useMemo(() => {
-		if (!commands || commands.length === 0) return void 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
-			}];
-		});
-		return [commandTrigger({
+		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
+				}];
+			});
+			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);
+				},
+				onSelect: (suggestion) => suggestion.value,
+				chipClassName: "font-mono"
+			}));
+		}
+		if (usableSkills.length > 0) configured.push(commandTrigger({
+			char: "$",
+			accessibilityLabel: "skill",
 			onSearch: (query) => {
-				const needle = query.toLowerCase();
-				const scored = unique.flatMap((c) => {
-					const haystacks = [c.name, ...c.aliases ?? []].map((s) => s.toLowerCase());
-					const score = haystacks.some((h) => h.startsWith(needle)) ? 2 : haystacks.some((h) => h.includes(needle)) ? 1 : 0;
-					return score === 0 ? [] : [{
-						c,
-						score
-					}];
-				});
+				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(({ c }) => ({
-					value: c.name,
-					label: `/${c.name}${c.argumentHint ? ` ${c.argumentHint}` : ""}`,
-					description: c.description
+				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) => {
+				return (await onSearchFiles(query, options)).map((match) => ({
+					value: match.relative,
+					label: match.relative,
+					description: match.path
 				}));
 			},
 			onSelect: (suggestion) => suggestion.value,
-			chipClassName: "font-mono"
-		})];
-	}, [commands]);
+			chipStyle: "inline",
+			chipClassName: "font-mono",
+			emptyMessage: "No matching files"
+		}));
+		return configured.length > 0 ? configured : void 0;
+	}, [
+		commands,
+		skills,
+		onSearchFiles
+	]);
+	const staged = attachments?.items ?? [];
+	const canSend = !disabled && (!isEmpty || staged.length > 0) && !attachments?.uploading && !attachments?.hasFailure;
 	const submit = () => {
-		const trimmed = plainText.trim();
-		if (!trimmed || disabled) return;
-		onSend(trimmed);
+		if (!canSend) return;
+		onSend(plainText.trim(), attachments?.readyIds ?? []);
+		attachments?.clear();
 		clear();
 		focus();
 	};
-	const canSend = !disabled && !isEmpty;
+	const pick = (files) => {
+		if (files && files.length > 0) attachments?.add(files);
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "composer",
 		className: cn("px-3 pb-3", className),
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn("mx-auto w-full max-w-3xl overflow-hidden rounded-lg border border-border bg-bg shadow-(--shadow-xs)", "transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30", disabled && "opacity-60"),
-			children: [/* @__PURE__ */ jsx(PromptArea, {
-				...bind,
-				triggers,
-				onSubmit: submit,
-				disabled,
-				placeholder: disabled ? "Session ended" : placeholder,
-				minHeight: 28,
-				maxHeight: 192,
-				"aria-label": "Message Claude",
-				className: "px-3 pt-2.5 pb-1 text-body-sm text-text"
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between gap-2 px-2 pb-2",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "flex min-w-0 items-center gap-1",
-					children: toolbar
-				}), busy ? /* @__PURE__ */ jsx(Button, {
-					variant: "outline",
-					size: "icon-sm",
-					"aria-label": "Interrupt",
-					className: "rounded-full",
-					onClick: onInterrupt,
-					children: /* @__PURE__ */ jsx(Square, { className: "size-3" })
-				}) : /* @__PURE__ */ jsx(Button, {
-					size: "icon-sm",
-					"aria-label": "Send",
-					className: "rounded-full",
-					disabled: !canSend,
-					onClick: submit,
-					children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" })
-				})]
-			})]
-		}), /* @__PURE__ */ jsx("div", {
+			onDragOver: (e) => {
+				if (attachments && !attachments.disabled) {
+					e.preventDefault();
+					setDragging(true);
+				}
+			},
+			onDragLeave: () => setDragging(false),
+			onDrop: (e) => {
+				if (!attachments || attachments.disabled) return;
+				e.preventDefault();
+				setDragging(false);
+				pick(e.dataTransfer.files);
+			},
+			className: cn("mx-auto w-full max-w-3xl overflow-hidden rounded-lg border border-border bg-bg shadow-(--shadow-xs)", "transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30", dragging && "border-ring ring-2 ring-ring/30", disabled && "opacity-60"),
+			children: [
+				staged.length > 0 && attachments ? /* @__PURE__ */ jsx(AttachmentStrip, { attachments }) : null,
+				/* @__PURE__ */ jsx(PromptArea, {
+					...bind,
+					triggers,
+					onSubmit: submit,
+					disabled,
+					placeholder: disabled ? "Session ended" : placeholder,
+					minHeight: 28,
+					maxHeight: 192,
+					"aria-label": "Message the agent",
+					className: "px-3 pt-2.5 pb-1 text-body-sm text-text",
+					onImagePaste: (file) => attachments?.add([file])
+				}),
+				/* @__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: [attachments && !attachments.disabled ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
+							ref: fileInput,
+							type: "file",
+							multiple: true,
+							accept: attachments.accept || void 0,
+							className: "hidden",
+							onChange: (e) => {
+								pick(e.target.files);
+								e.target.value = "";
+							}
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "icon-sm",
+							"aria-label": "Attach files",
+							disabled,
+							onClick: () => fileInput.current?.click(),
+							children: /* @__PURE__ */ jsx(Paperclip, { className: "size-4" })
+						})] }) : null, toolbar]
+					}), busy && !canSend ? /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "icon-sm",
+						"aria-label": "Interrupt",
+						className: "rounded-full",
+						onClick: onInterrupt,
+						children: /* @__PURE__ */ jsx(Square, { className: "size-3" })
+					}) : /* @__PURE__ */ jsx(Button, {
+						size: "icon-sm",
+						"aria-label": "Send",
+						className: "rounded-full",
+						disabled: !canSend,
+						onClick: submit,
+						children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" })
+					})]
+				})
+			]
+		}), attachments?.error ? /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto mt-1 flex w-full max-w-3xl items-center gap-2 text-label text-danger",
+			children: [
+				/* @__PURE__ */ jsx(TriangleAlert, { className: "size-3 shrink-0" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1",
+					children: attachments.error
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: attachments.dismissError,
+					"aria-label": "Dismiss",
+					className: "shrink-0 opacity-70 hover:opacity-100",
+					children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+				})
+			]
+		}) : /* @__PURE__ */ jsx("div", {
 			className: "mx-auto mt-1 w-full max-w-3xl text-center text-label text-fg-4",
 			children: "Enter to send · Shift+Enter for a new line"
 		})]
 	});
 }
-//#endregion
-//#region src/components/agent/ModelSelect.tsx
-/** The CLI's supportedModels list leads with a "Default (recommended)" row whose value
-* is a sentinel, not a model id — selecting it means "clear the override". */
-const isDefaultOption = (value) => value === "default";
-/** Find the option matching a (possibly decorated/aliased) session model id. */
-function matchModel(models, model) {
-	if (!model) return void 0;
-	const normalized = model.replace(/\[.*\]$/, "");
-	const concrete = models.filter((m) => !isDefaultOption(m.value));
-	return concrete.find((m) => m.value === normalized) ?? concrete.find((m) => normalized.includes(m.value) || m.value.includes(normalized));
+/** Staged files as a scrolling row of chips above the field. The thumbnail is
+* the local blob, so nothing here waits on the network; the upload's state rides
+* on top of it and the ✕ takes it back off. */
+function AttachmentStrip({ attachments }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex gap-2 overflow-x-auto border-b border-border px-2 py-2",
+		children: attachments.items.map((item) => /* @__PURE__ */ jsx(AttachmentChip, {
+			item,
+			onRetry: () => attachments.retry(item.key),
+			onRemove: () => attachments.remove(item.key)
+		}, item.key))
+	});
 }
-/** Compact model switcher for the composer toolbar; fed by the `capabilities` event.
-* Rows render CLI-style: bold display name with the model's description beneath. */
-function ModelSelect({ models, model, onModelChange, variant = "toolbar", disabled, className }) {
-	const selected = matchModel(models, model) ?? (model ? void 0 : models.find((m) => isDefaultOption(m.value)));
-	return /* @__PURE__ */ jsxs(Select, {
-		items: models.map((m) => ({
-			value: m.value,
-			label: m.displayName
-		})),
-		value: selected?.value ?? null,
-		onValueChange: (value) => {
-			if (typeof value !== "string" || value === selected?.value) return;
-			onModelChange(isDefaultOption(value) ? void 0 : value);
-		},
-		disabled,
-		children: [/* @__PURE__ */ jsx(SelectTrigger, {
-			"aria-label": "Model",
-			className: cn(variant === "toolbar" && "h-6 max-w-56 border-transparent bg-transparent text-fg-3 hover:bg-surface-hover", className),
-			children: /* @__PURE__ */ jsx("span", {
-				className: cn("truncate", variant === "toolbar" && "font-mono text-label"),
-				children: /* @__PURE__ */ jsx(SelectValue, { placeholder: model ?? "model" })
-			})
-		}), /* @__PURE__ */ jsx(SelectContent, {
+function AttachmentChip({ item, onRetry, onRemove }) {
+	const failed = item.status === "failed";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group relative shrink-0",
+		title: failed ? `${item.name} — ${item.error}` : `${item.name} · ${formatBytes(item.bytes)}`,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cn("flex size-14 items-center justify-center overflow-hidden rounded-md border border-border bg-surface", failed && "border-danger/50"),
+				children: item.previewUrl ? /* @__PURE__ */ jsx("img", {
+					src: item.previewUrl,
+					alt: item.name,
+					className: "size-full object-cover"
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center gap-0.5 text-fg-3",
+					children: [/* @__PURE__ */ jsx(FileText, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+						className: "max-w-12 truncate text-[9px] font-semibold uppercase",
+						children: extensionOf(item.name)
+					})]
+				})
+			}),
+			item.status === "uploading" ? /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 flex items-center justify-center rounded-md bg-black/35",
+				children: /* @__PURE__ */ jsx(Spinner, { className: "size-4 text-white" })
+			}) : null,
+			failed ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onRetry,
+				"aria-label": `Retry ${item.name}`,
+				className: "absolute inset-0 flex items-center justify-center rounded-md bg-black/45 text-warning",
+				children: /* @__PURE__ */ jsx(RotateCw, { className: "size-4" })
+			}) : null,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onRemove,
+				"aria-label": `Remove ${item.name}`,
+				className: "absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full border border-border bg-surface text-fg-3 shadow-(--shadow-xs) hover:text-fg-1",
+				children: /* @__PURE__ */ jsx(X, { className: "size-2.5" })
+			})
+		]
+	});
+}
+const extensionOf = (name) => {
+	const dot = name.lastIndexOf(".");
+	return dot > 0 ? name.slice(dot + 1).toUpperCase() : "FILE";
+};
+//#endregion
+//#region src/components/agent/ContextDialog.tsx
+/** 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$1 = (color) => typeof CSS !== "undefined" && CSS.supports("color", color) ? color : void 0;
+const usageTint$1 = (pct) => pct >= 90 ? "bg-danger" : pct >= 70 ? "bg-warning" : "bg-accent";
+/**
+* What is in the model's context window right now, category by category.
+*
+* One of the three panels the status bar opens. Context, usage and session info
+* are different questions asked at different moments, so they are different
+* screens rather than one "details" list you scroll past two answers to reach.
+*/
+function ContextDialog({ usage, open, onOpenChange }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsx(DialogHeader, {
+			title: "Context",
+			description: usage?.model
+		}), /* @__PURE__ */ jsx(DialogBody, { children: !usage ? /* @__PURE__ */ jsx("p", {
+			className: "py-6 text-center text-body-sm text-fg-4",
+			children: "No reading yet — the context window is measured after a turn completes."
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline justify-between gap-4",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-label text-fg-3",
+					children: "Used"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "font-mono text-body-sm text-fg-1",
+					children: [
+						formatTokens(usage.totalTokens),
+						" / ",
+						formatTokens(usage.maxTokens),
+						" ·",
+						" ",
+						usage.percentage.toFixed(0),
+						"%"
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "mt-2 h-2 overflow-hidden rounded-full bg-border",
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("h-full rounded-full", usageTint$1(usage.percentage)),
+					style: { width: `${Math.min(100, Math.max(2, usage.percentage))}%` }
+				})
+			}),
+			usage.categories.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "mt-5",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-label font-medium text-fg-3",
+					children: "Breakdown"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "mt-2 flex flex-col gap-3",
+					children: usage.categories.map((category) => {
+						const share = category.tokens / Math.max(usage.maxTokens, 1) * 100;
+						const color = cssColor$1(category.color);
+						return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-baseline justify-between gap-3",
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: "flex min-w-0 items-center gap-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "size-2 shrink-0 rounded-full bg-fg-4",
+									style: color ? { backgroundColor: color } : void 0
+								}), /* @__PURE__ */ jsx("span", {
+									className: "truncate text-body-sm text-fg-1",
+									children: category.name
+								})]
+							}), /* @__PURE__ */ jsx("span", {
+								className: "shrink-0 font-mono text-label text-fg-3",
+								children: formatTokens(category.tokens)
+							})]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "mt-1 h-1 overflow-hidden rounded-full bg-border",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "h-full rounded-full bg-fg-4",
+								style: {
+									width: `${Math.min(100, share)}%`,
+									backgroundColor: color
+								}
+							})
+						})] }, category.name);
+					})
+				})]
+			}) : null
+		] }) })] })
+	});
+}
+//#endregion
+//#region src/components/agent/HostFilesDialog.tsx
+/**
+* Browse the project the session is working in.
+*
+* Deliberately rooted at the session's cwd rather than at the server's
+* `hostFiles.roots`: the roots are the *security* boundary (the server enforces
+* them on every request), but what someone wants while watching an agent is this
+* project's tree. Read-only — writing is a separate server opt-in and not
+* something a session viewer should be doing behind the agent's back.
+*/
+function HostFilesDialog({ client, cwd, open, onOpenChange }) {
+	const [path, setPath] = useState(cwd);
+	const [entries, setEntries] = useState([]);
+	const [truncated, setTruncated] = useState(false);
+	const [query, setQuery] = useState("");
+	const [matches, setMatches] = useState();
+	const [file, setFile] = useState();
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState();
+	const list = useCallback(async (target) => {
+		setLoading(true);
+		setError(void 0);
+		try {
+			const response = await client.listHostDir(target);
+			setPath(response.path);
+			setEntries(response.entries);
+			setTruncated(response.truncated ?? false);
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Could not read that directory");
+		} finally {
+			setLoading(false);
+		}
+	}, [client]);
+	useEffect(() => {
+		if (!open) return;
+		setFile(void 0);
+		setQuery("");
+		setMatches(void 0);
+		setError(void 0);
+		if (cwd) list(cwd);
+	}, [
+		open,
+		cwd,
+		list
+	]);
+	useEffect(() => {
+		if (!open || !cwd) return;
+		const q = query.trim();
+		if (!q) {
+			setMatches(void 0);
+			return;
+		}
+		const timer = setTimeout(() => {
+			client.findHostFiles(cwd, q, 40).then((response) => setMatches(response.matches)).catch(() => setMatches([]));
+		}, 150);
+		return () => clearTimeout(timer);
+	}, [
+		client,
+		cwd,
+		query,
+		open
+	]);
+	const openFile = async (target) => {
+		setLoading(true);
+		setError(void 0);
+		try {
+			const response = await client.readHostFile(target);
+			setFile({
+				path: response.path,
+				bytes: response.bytes,
+				content: response.encoding === "utf8" ? response.content : "(binary file — not shown)"
+			});
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Could not read that file");
+		} finally {
+			setLoading(false);
+		}
+	};
+	const parent = path && cwd && path !== cwd ? path.slice(0, path.lastIndexOf("/")) || "/" : void 0;
+	const shown = matches ?? entries;
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			size: "lg",
+			children: [/* @__PURE__ */ jsx(DialogHeader, {
+				title: file ? file.path.split("/").pop() : "Files",
+				description: file ? file.path : path,
+				actions: file ? /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "xs",
+					onClick: () => setFile(void 0),
+					children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" }), "Back"]
+				}) : parent ? /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "xs",
+					onClick: () => void list(parent),
+					children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" }), "Up"]
+				}) : null
+			}), /* @__PURE__ */ jsxs(DialogBody, {
+				className: "flex flex-col gap-3",
+				children: [error ? /* @__PURE__ */ jsx("div", {
+					className: "rounded-md bg-danger-bg px-3 py-2 text-body-sm text-danger",
+					children: error
+				}) : null, file ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+					className: "text-label text-fg-4",
+					children: formatBytes(file.bytes)
+				}), /* @__PURE__ */ jsx(CodeBlock, {
+					code: file.content,
+					label: file.path.split("/").pop()
+				})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ jsx(Search, { className: "absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-fg-4" }), /* @__PURE__ */ jsx(Input, {
+							value: query,
+							onChange: (e) => setQuery(e.target.value),
+							placeholder: "Search this project…",
+							className: "pl-7",
+							spellCheck: false
+						})]
+					}),
+					loading && shown.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "py-6 text-center",
+						children: /* @__PURE__ */ jsx(Spinner, { className: "size-4 text-fg-4" })
+					}) : shown.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "py-6 text-center text-body-sm text-fg-4",
+						children: matches ? "No matching files." : "This directory is empty."
+					}) : /* @__PURE__ */ jsx("ul", {
+						className: "flex flex-col",
+						children: matches ? matches.map((match) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => void openFile(match.path),
+							className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-surface-hover",
+							children: [/* @__PURE__ */ jsx(File, { className: "size-3.5 shrink-0 text-fg-4" }), /* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1 truncate font-mono text-label text-fg-1",
+								children: match.relative
+							})]
+						}) }, match.path)) : entries.map((entry) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => entry.type === "dir" ? void list(entry.path) : void openFile(entry.path),
+							className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-surface-hover",
+							children: [
+								/* @__PURE__ */ jsx(EntryIcon$1, { type: entry.type }),
+								/* @__PURE__ */ jsxs("span", {
+									className: "min-w-0 flex-1 truncate font-mono text-label text-fg-1",
+									children: [entry.name, entry.type === "dir" ? "/" : ""]
+								}),
+								entry.bytes !== void 0 ? /* @__PURE__ */ jsx("span", {
+									className: "shrink-0 text-label text-fg-4",
+									children: formatBytes(entry.bytes)
+								}) : null
+							]
+						}) }, entry.path))
+					}),
+					truncated && !matches ? /* @__PURE__ */ jsx("p", {
+						className: "text-label text-fg-4",
+						children: "More entries than the server will return — use the search box."
+					}) : null
+				] })]
+			})]
+		})
+	});
+}
+/** A symlink is reported as itself and never silently resolved — following it is
+* the next request's problem, and that request is refused if it escapes the roots. */
+function EntryIcon$1({ type }) {
+	if (type === "dir") return /* @__PURE__ */ jsx(Folder, { className: "size-3.5 shrink-0 text-accent" });
+	if (type === "symlink") return /* @__PURE__ */ jsx(Link2, { className: "size-3.5 shrink-0 text-fg-4" });
+	return /* @__PURE__ */ jsx(File, { className: "size-3.5 shrink-0 text-fg-4" });
+}
+//#endregion
+//#region src/components/agent/McpDialog.tsx
+/** The engine's status vocabulary is open — anything unrecognised renders
+* neutrally rather than being forced into one of these. */
+const STATUS_VARIANT = {
+	connected: "success",
+	failed: "danger",
+	"needs-auth": "warning",
+	pending: "info",
+	disabled: "neutral"
+};
+/**
+* The session's MCP servers, at the CLI's own `/mcp` depth: servers → one server
+* → its tools → one tool, with Reconnect / Enable / Disable where they apply.
+*
+* Two things vary by engine rather than being fixed here. **The actions** exist
+* only where the engine has them (`canManageServers`): codex reports rich status
+* but has no per-server reconnect or toggle, so its panel is read-only. And
+* **tool parameters** appear only where the engine reports a schema — codex
+* returns each tool's full JSON Schema, the Agent SDK returns none at all, so
+* the tool view either renders it or says why it can't, rather than leaving a
+* silent gap or claiming the absence is universal.
+*/
+function McpDialog({ client, sessionId, open, onOpenChange, canManageServers = true }) {
+	const [servers, setServers] = useState();
+	const [error, setError] = useState();
+	const [loading, setLoading] = useState(false);
+	const [busyServer, setBusyServer] = useState();
+	const [selectedServer, setSelectedServer] = useState();
+	const [selectedTool, setSelectedTool] = useState();
+	const load = useCallback(async () => {
+		if (!sessionId) return;
+		setLoading(true);
+		setError(void 0);
+		try {
+			setServers(await client.listMcpServers(sessionId));
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Could not read MCP status");
+		} finally {
+			setLoading(false);
+		}
+	}, [client, sessionId]);
+	useEffect(() => {
+		if (!open) return;
+		setSelectedServer(void 0);
+		setSelectedTool(void 0);
+		load();
+	}, [open, load]);
+	const act = async (name, action) => {
+		if (!sessionId) return;
+		setBusyServer(name);
+		setError(void 0);
+		try {
+			setServers(await client.mcpServerAction(sessionId, name, action));
+		} catch (e) {
+			setError(e instanceof Error ? e.message : `Could not ${action} ${name}`);
+		} finally {
+			setBusyServer(void 0);
+		}
+	};
+	const server = servers?.find((s) => s.name === selectedServer);
+	const tool = server?.tools?.find((t) => t.name === selectedTool);
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsx(DialogHeader, {
+			title: tool?.name ?? server?.name ?? "MCP servers",
+			description: tool ? `${server?.name} tool` : server ? server.serverInfo?.name : void 0,
+			actions: selectedServer ? /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "xs",
+				onClick: () => selectedTool ? setSelectedTool(void 0) : setSelectedServer(void 0),
+				children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" }), "Back"]
+			}) : /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "xs",
+				onClick: () => void load(),
+				disabled: loading,
+				children: [loading ? /* @__PURE__ */ jsx(Spinner, { className: "size-3 text-current" }) : /* @__PURE__ */ jsx(RotateCw, { className: "size-3" }), "Refresh"]
+			})
+		}), /* @__PURE__ */ jsxs(DialogBody, { children: [error ? /* @__PURE__ */ jsx("div", {
+			className: "mb-3 rounded-md bg-danger-bg px-3 py-2 text-body-sm text-danger",
+			children: error
+		}) : null, tool ? /* @__PURE__ */ jsx(ToolView, { tool }) : server ? /* @__PURE__ */ jsx(ServerView, {
+			server,
+			busy: busyServer === server.name,
+			canManage: canManageServers,
+			onAct: (action) => void act(server.name, action),
+			onSelectTool: setSelectedTool
+		}) : error && !servers ? null : /* @__PURE__ */ jsx(ServerList, {
+			servers,
+			loading,
+			onSelect: setSelectedServer
+		})] })] })
+	});
+}
+function ServerList({ servers, loading, onSelect }) {
+	if (loading && !servers) return /* @__PURE__ */ jsx("div", {
+		className: "py-6 text-center",
+		children: /* @__PURE__ */ jsx(Spinner, { className: "size-4 text-fg-4" })
+	});
+	if (!servers?.length) return /* @__PURE__ */ jsx("p", {
+		className: "py-6 text-center text-body-sm text-fg-4",
+		children: "No MCP servers configured for this session."
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-4",
+		children: [...new Set(servers.map((s) => s.scope ?? "other"))].map((scope) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+			className: "text-label font-medium text-fg-3 capitalize",
+			children: scope
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "mt-1 flex flex-col",
+			children: servers.filter((s) => (s.scope ?? "other") === scope).map((s) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => onSelect(s.name),
+				className: "flex w-full items-center gap-2 rounded-md px-2 py-2 text-left transition-colors hover:bg-surface-hover",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate text-body-sm text-fg-1",
+						children: s.name
+					}),
+					s.tools?.length ? /* @__PURE__ */ jsxs("span", {
+						className: "shrink-0 text-label text-fg-4",
+						children: [s.tools.length, " tools"]
+					}) : null,
+					/* @__PURE__ */ jsx(Badge, {
+						variant: STATUS_VARIANT[s.status] ?? "neutral",
+						dot: true,
+						className: "shrink-0",
+						children: s.status
+					}),
+					/* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0 text-fg-4" })
+				]
+			}) }, s.name))
+		})] }, scope))
+	});
+}
+function ServerView({ server, busy, canManage, onAct, onSelectTool }) {
+	const disabled = server.status === "disabled";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx(DialogRow, {
+					label: "Status",
+					children: /* @__PURE__ */ jsx(Badge, {
+						variant: STATUS_VARIANT[server.status] ?? "neutral",
+						dot: true,
+						children: server.status
+					})
+				}),
+				server.transport ? /* @__PURE__ */ jsx(DialogRow, {
+					label: "Transport",
+					children: server.transport
+				}) : null,
+				server.scope ? /* @__PURE__ */ jsx(DialogRow, {
+					label: "Scope",
+					children: server.scope
+				}) : null,
+				server.serverInfo ? /* @__PURE__ */ jsxs(DialogRow, {
+					label: "Server",
+					children: [
+						server.serverInfo.name,
+						" ",
+						server.serverInfo.version
+					]
+				}) : null,
+				server.command ? /* @__PURE__ */ jsx(DialogRow, {
+					label: "Command",
+					mono: true,
+					children: [server.command, ...server.args ?? []].join(" ")
+				}) : null,
+				server.url ? /* @__PURE__ */ jsx(DialogRow, {
+					label: "URL",
+					mono: true,
+					children: server.url
+				}) : null
+			] }),
+			server.error ? /* @__PURE__ */ jsx("div", {
+				className: "rounded-md bg-danger-bg px-3 py-2 text-body-sm break-words text-danger",
+				children: server.error
+			}) : null,
+			canManage ? /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					size: "sm",
+					disabled: busy,
+					onClick: () => onAct("reconnect"),
+					children: [busy ? /* @__PURE__ */ jsx(Spinner, { className: "size-3 text-current" }) : /* @__PURE__ */ jsx(RotateCw, { className: "size-3" }), "Reconnect"]
+				}), /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					size: "sm",
+					disabled: busy,
+					onClick: () => onAct(disabled ? "enable" : "disable"),
+					children: [disabled ? /* @__PURE__ */ jsx(Power, { className: "size-3" }) : /* @__PURE__ */ jsx(PowerOff, { className: "size-3" }), disabled ? "Enable" : "Disable"]
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-label font-medium text-fg-3",
+				children: "Tools"
+			}), !server.tools?.length ? /* @__PURE__ */ jsx("p", {
+				className: "py-2 text-body-sm text-fg-4",
+				children: server.status === "connected" ? "This server exposes no tools." : "Tools are listed once the server connects."
+			}) : /* @__PURE__ */ jsx("ul", {
+				className: "mt-1 flex flex-col",
+				children: server.tools.map((t) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => onSelectTool(t.name),
+					className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-surface-hover",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate font-mono text-label text-fg-1",
+						children: t.name
+					}), /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0 text-fg-4" })]
+				}) }, t.name))
+			})] })
+		]
+	});
+}
+function ToolView({ tool }) {
+	const annotations = tool.annotations;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [
+			tool.description ? /* @__PURE__ */ jsx("p", {
+				className: "text-body-sm whitespace-pre-wrap text-fg-2",
+				children: tool.description
+			}) : /* @__PURE__ */ jsx("p", {
+				className: "text-body-sm text-fg-4",
+				children: "This tool carries no description."
+			}),
+			annotations ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-1.5",
+				children: [
+					annotations.readOnly ? /* @__PURE__ */ jsx(Badge, {
+						variant: "success",
+						children: "read-only"
+					}) : null,
+					annotations.destructive ? /* @__PURE__ */ jsx(Badge, {
+						variant: "danger",
+						children: "destructive"
+					}) : null,
+					annotations.openWorld ? /* @__PURE__ */ jsx(Badge, {
+						variant: "warning",
+						children: "open world"
+					}) : null
+				]
+			}) : null,
+			tool.inputSchema !== void 0 ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-label font-medium text-fg-3",
+				children: "Parameters"
+			}), /* @__PURE__ */ jsx("pre", {
+				className: "mt-1 max-h-64 overflow-auto rounded-md bg-surface px-3 py-2 text-label text-fg-2",
+				children: safeSchema(tool.inputSchema)
+			})] }) : /* @__PURE__ */ jsx("p", {
+				className: cn("text-label text-fg-4"),
+				children: "Parameters aren’t available: this engine names and describes each tool but reports no input schema."
+			})
+		]
+	});
+}
+/** The schema is an opaque JSON document from another process — pretty-print it,
+* and never let an unserializable value take the dialog down with it. */
+function safeSchema(schema) {
+	try {
+		return JSON.stringify(schema, null, 2);
+	} catch {
+		return String(schema);
+	}
+}
+//#endregion
+//#region src/components/agent/SkillsDialog.tsx
+/** Where the skill came from. The engine's set is open, so an unrecognised
+* scope renders as itself rather than being forced into a bucket. */
+const SCOPE_LABEL = {
+	user: "Personal",
+	repo: "This project",
+	system: "System",
+	admin: "Managed"
+};
+/**
+* What this session's engine can do beyond its own tools: the skills it found,
+* grouped by where they came from, with one drilled-down view each.
+*
+* The framing matters more here than in most panels. A skill is **not** a
+* command — the model decides to use one by reading its description, and there
+* is no wire syntax that invokes it. So this screen is a *discovery* surface,
+* and the one action it offers ("Use this skill") is honest about being a
+* drafting aid: it types a message for the operator to edit and send.
+*
+* Fed from the session's `skills` event rather than a REST route, because that
+* is the channel the engine refreshes on its own when a skill changes on disk.
+*/
+function SkillsDialog({ skills, open, onOpenChange, onUse }) {
+	const [selected, setSelected] = useState();
+	const skill = skills?.find((s) => s.name === selected);
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: (next) => {
+			if (!next) setSelected(void 0);
+			onOpenChange(next);
+		},
+		children: /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsx(DialogHeader, {
+			title: skill ? skill.displayName ?? skill.name : "Skills",
+			description: skill ? skill.name !== (skill.displayName ?? skill.name) ? skill.name : void 0 : "Capabilities the agent can choose to use. Not commands — the model picks them from their descriptions.",
+			actions: skill ? /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "xs",
+				onClick: () => setSelected(void 0),
+				children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" }), "Back"]
+			}) : void 0
+		}), /* @__PURE__ */ jsx(DialogBody, { children: skill ? /* @__PURE__ */ jsx(SkillView, {
+			skill,
+			onUse,
+			onUsed: () => onOpenChange(false)
+		}) : /* @__PURE__ */ jsx(SkillList, {
+			skills,
+			onSelect: setSelected
+		}) })] })
+	});
+}
+function SkillList({ skills, onSelect }) {
+	if (!skills) return /* @__PURE__ */ jsx("p", {
+		className: "py-6 text-center text-body-sm text-fg-4",
+		children: "Skills are listed once the session connects — send a message first."
+	});
+	if (skills.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "py-6 text-center text-body-sm text-fg-4",
+		children: "This session found no skills."
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-4",
+		children: [...new Set(skills.map((s) => s.scope ?? "other"))].map((scope) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+			className: "text-label font-medium text-fg-3",
+			children: SCOPE_LABEL[scope] ?? scope
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "mt-1 flex flex-col",
+			children: skills.filter((s) => (s.scope ?? "other") === scope).map((s) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => onSelect(s.name),
+				className: "flex w-full items-start gap-2 rounded-md px-2 py-2 text-left transition-colors hover:bg-surface-hover",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "block truncate text-body-sm text-fg-1",
+							children: s.displayName ?? s.name
+						}), s.shortDescription ?? s.description ? /* @__PURE__ */ jsx("span", {
+							className: "block truncate text-label text-fg-4",
+							children: s.shortDescription ?? s.description
+						}) : null]
+					}),
+					!s.enabled ? /* @__PURE__ */ jsx(Badge, {
+						variant: "neutral",
+						className: "mt-0.5 shrink-0",
+						children: "off"
+					}) : null,
+					/* @__PURE__ */ jsx(ChevronRight, { className: "mt-0.5 size-3.5 shrink-0 text-fg-4" })
+				]
+			}) }, s.name))
+		})] }, scope))
+	});
+}
+function SkillView({ skill, onUse, onUsed }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", { children: [skill.scope ? /* @__PURE__ */ jsx(DialogRow, {
+				label: "Scope",
+				children: SCOPE_LABEL[skill.scope] ?? skill.scope
+			}) : null, /* @__PURE__ */ jsx(DialogRow, {
+				label: "Status",
+				children: /* @__PURE__ */ jsx(Badge, {
+					variant: skill.enabled ? "success" : "neutral",
+					dot: true,
+					children: skill.enabled ? "enabled" : "disabled"
+				})
+			})] }),
+			skill.description ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-label font-medium text-fg-3",
+				children: "Description"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-body-sm whitespace-pre-wrap text-fg-2",
+				children: skill.description
+			})] }) : /* @__PURE__ */ jsx("p", {
+				className: "text-body-sm text-fg-4",
+				children: "This skill carries no description."
+			}),
+			onUse && skill.enabled ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "sm",
+				onClick: () => {
+					onUse(skill);
+					onUsed();
+				},
+				children: "Use this skill"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "mt-1.5 text-label text-fg-4",
+				children: "Writes an opening message into the composer for you to edit — it isn’t sent, and there is no command that runs a skill directly."
+			})] }) : null
+		]
+	});
+}
+//#endregion
+//#region src/components/agent/ModelSelect.tsx
+/** The CLI's supportedModels list leads with a "Default (recommended)" row whose value
+* is a sentinel, not a model id — selecting it means "clear the override". */
+const isDefaultOption = (value) => value === "default";
+/** Everything before a '[1m]'-style context-window suffix. */
+const dropVariant = (id) => id.replace(/\[.*\]$/, "");
+/** 'claude-opus-4-8' → "opus", 'sonnet' → "sonnet". The vendor prefix and the
+* version tail are dropped; what is left is the name a person would say. */
+function family(id) {
+	const parts = id.toLowerCase().split("-");
+	if (parts[0] === "claude") parts.shift();
+	return parts[0] ?? "";
+}
+/**
+* Whether a row is the one naming `model`.
+*
+* Three passes, narrowest first, because the rows and the id a session *reports*
+* are written differently: the rows are aliases ('opus[1m]', 'sonnet',
+* 'claude-fable-5[1m]') and a session reports a resolved wire id
+* ('claude-opus-5[1m]'). `resolvedModel` is the server's own answer to this and
+* wins when present; the family fallback covers a server that doesn't send it,
+* which is the difference between the chip reading "Opus 5" and reading
+* `claude-opus-5[1m]`. Kept identical to the iOS client's `ModelOption.matches`.
+*/
+function optionMatches(option, model) {
+	if (model === option.value || model === option.resolvedModel) return true;
+	const stripped = dropVariant(model);
+	if (option.resolvedModel) return stripped === dropVariant(option.resolvedModel);
+	const token = family(stripped);
+	return token !== "" && token === family(dropVariant(option.value));
+}
+/** Find the option matching a (possibly decorated/aliased) session model id. */
+function matchModel(models, model) {
+	if (!model) return void 0;
+	return models.filter((m) => !isDefaultOption(m.value)).find((m) => optionMatches(m, model));
+}
+/** Compact model switcher for the composer toolbar; fed by the `capabilities` event.
+* Rows render CLI-style: bold display name with the model's description beneath. */
+function ModelSelect({ models, model, onModelChange, variant = "toolbar", disabled, className }) {
+	const selected = matchModel(models, model) ?? (model ? void 0 : models.find((m) => isDefaultOption(m.value)));
+	return /* @__PURE__ */ jsxs(Select, {
+		items: models.map((m) => ({
+			value: m.value,
+			label: m.displayName
+		})),
+		value: selected?.value ?? null,
+		onValueChange: (value) => {
+			if (typeof value !== "string" || value === selected?.value) return;
+			onModelChange(isDefaultOption(value) ? void 0 : value);
+		},
+		disabled,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			"aria-label": "Model",
+			className: cn(variant === "toolbar" && "h-6 max-w-56 border-transparent bg-transparent text-fg-3 hover:bg-surface-hover", className),
+			children: /* @__PURE__ */ jsx("span", {
+				className: cn("truncate", variant === "toolbar" && "font-mono text-label"),
+				children: /* @__PURE__ */ jsx(SelectValue, { placeholder: model ?? "model" })
+			})
+		}), /* @__PURE__ */ jsx(SelectContent, {
 			className: "min-w-72",
 			children: models.map((m) => /* @__PURE__ */ jsxs(SelectItem, {
 				value: m.value,
@@ -4201,44 +5493,67 @@ function ModelSelect({ models, model, onModelChange, variant = "toolbar", disabl
 }
 //#endregion
 //#region src/components/agent/PermissionModeSelect.tsx
-/** The modes surfaced across UI surfaces (session creation, in-session switcher). */
+/**
+* The modes surfaced across UI surfaces (session creation, in-session switcher),
+* ordered by how much of the approval gate they give away.
+*
+* Notably `default` is **"Manual"**: the wire value is `default`, but calling it
+* that in the UI conflates a real mode (ask me every time) with "whatever the
+* server picked", which is the one confusion a mode chip exists to avoid. The
+* naming, the icons and the summaries are shared with the iOS app on purpose —
+* the two surfaces should read as the same list.
+*/
 const PERMISSION_MODES = [
 	{
 		value: "default",
-		label: "default",
-		description: "ask for approval"
+		label: "Manual",
+		shortLabel: "Manual",
+		description: "Always ask before making changes",
+		icon: Hand
 	},
 	{
 		value: "acceptEdits",
-		label: "acceptEdits",
-		description: "auto-approve file edits"
+		label: "Accept edits",
+		shortLabel: "Edits",
+		description: "Automatically accept all file edits",
+		icon: Code
 	},
 	{
 		value: "plan",
-		label: "plan",
-		description: "read-only planning"
+		label: "Plan",
+		shortLabel: "Plan",
+		description: "Create a plan before making changes",
+		icon: ClipboardList
 	},
 	{
 		value: "auto",
-		label: "auto",
-		description: "model decides when to ask"
+		label: "Auto",
+		shortLabel: "Auto",
+		description: "Claude handles permission decisions",
+		icon: Zap
 	},
 	{
 		value: "dontAsk",
-		label: "dontAsk",
-		description: "never ask — deny unapproved"
+		label: "Don't ask",
+		shortLabel: "Don't ask",
+		description: "Never ask — deny anything not pre-approved",
+		icon: ShieldCheck
 	},
 	{
 		value: "bypassPermissions",
-		label: "bypassPermissions",
-		description: "no prompts (danger)",
+		label: "Bypass permissions",
+		shortLabel: "Bypass",
+		description: "Skip every approval — the agent is unsupervised",
+		icon: TriangleAlert,
 		dangerous: true
 	}
 ];
+const permissionModeMeta = (mode) => PERMISSION_MODES.find((m) => m.value === mode);
 /** Permission-mode switcher: compact in the composer toolbar, field-sized in forms. */
-function PermissionModeSelect({ mode, onModeChange, modes, variant = "toolbar", disabled, className }) {
+function PermissionModeSelect({ mode, onModeChange, modes, canBypass, variant = "toolbar", disabled, className }) {
 	const dangerous = mode === "bypassPermissions";
 	const offered = modes ? PERMISSION_MODES.filter((m) => modes.includes(m.value)) : PERMISSION_MODES;
+	const unavailable = (meta) => meta.value === "bypassPermissions" && canBypass === false;
 	return /* @__PURE__ */ jsxs(Select, {
 		items: offered.map((m) => ({
 			value: m.value,
@@ -4253,46 +5568,131 @@ function PermissionModeSelect({ mode, onModeChange, modes, variant = "toolbar",
 			"aria-label": "Permission mode",
 			className: cn(variant === "toolbar" && "h-6 max-w-44 border-transparent bg-transparent hover:bg-surface-hover", dangerous ? "text-danger" : variant === "toolbar" ? "text-fg-3" : void 0, className),
 			children: /* @__PURE__ */ jsx("span", {
-				className: cn("truncate", variant === "toolbar" && "font-mono text-label"),
+				className: cn("truncate", variant === "toolbar" && "text-label"),
 				children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "permissions" })
 			})
 		}), /* @__PURE__ */ jsx(SelectContent, {
-			className: "min-w-56",
-			children: offered.map((m) => /* @__PURE__ */ jsxs(SelectItem, {
-				value: m.value,
-				children: [/* @__PURE__ */ jsx(SelectItemText, { children: /* @__PURE__ */ jsx("span", {
-					className: cn("font-medium", m.dangerous && "text-danger"),
-					children: m.label
-				}) }), /* @__PURE__ */ jsx("span", {
-					className: cn("text-label", m.dangerous ? "text-danger/80" : "text-fg-4"),
-					children: m.description
-				})]
-			}, m.value))
+			className: "min-w-64",
+			children: offered.map((m) => {
+				const blocked = unavailable(m);
+				return /* @__PURE__ */ jsxs(SelectItem, {
+					value: m.value,
+					disabled: blocked,
+					children: [/* @__PURE__ */ jsx(SelectItemText, { children: /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(m.icon, { className: cn("size-3.5 shrink-0", m.dangerous ? "text-danger" : "text-fg-3") }), /* @__PURE__ */ jsx("span", {
+							className: cn("font-medium", m.dangerous && "text-danger"),
+							children: m.label
+						})]
+					}) }), /* @__PURE__ */ jsx("span", {
+						className: cn("pl-5.5 text-label", blocked ? "text-fg-4" : m.dangerous ? "text-danger/80" : "text-fg-4"),
+						children: blocked ? "Only available to a session started in this mode" : m.description
+					})]
+				}, m.value);
+			})
 		})]
 	});
 }
 //#endregion
+//#region src/lib/tool-icon.ts
+/**
+* An icon per tool, so a transcript can be skimmed by shape rather than read.
+*
+* The same mapping the iOS app makes, in lucide's vocabulary rather than SF
+* Symbols — the two clients should be recognisably showing the same thing. An
+* unknown tool falls back to a wrench, and an MCP tool (`mcp__server__name`) to
+* the puzzle piece the MCP screens use, because "which server is this from" is
+* the useful thing to see at a glance.
+*/
+function toolIcon(toolName) {
+	switch (toolName) {
+		case "Bash":
+		case "BashOutput":
+		case "KillShell": return Terminal;
+		case "Read": return FileText;
+		case "Write": return SquarePen;
+		case "Edit":
+		case "MultiEdit":
+		case "NotebookEdit": return PencilLine;
+		case "Glob": return FolderSearch;
+		case "Grep": return Search;
+		case "WebFetch": return ArrowDownCircle;
+		case "WebSearch": return Globe;
+		case "Task":
+		case "Agent": return UsersRound;
+		case "TodoWrite": return CheckSquare;
+		case "Skill": return Sparkles;
+		case "AskUserQuestion": return MessageCircleQuestion;
+		case "CodexCommand": return Terminal;
+		case "CodexFileChange": return FileDiff;
+		case "CodexWebSearch": return Globe;
+		case "CodexImageGeneration":
+		case "CodexImageView": return Image;
+		default: return toolName.startsWith("mcp__") ? Puzzle : Wrench;
+	}
+}
+//#endregion
 //#region src/components/agent/PermissionPrompt.tsx
+/**
+* Generic allow/deny prompt for a pending permission request.
+*
+* Three outcomes, not two: denying usually means "not that, try something else",
+* so plain Deny lets the turn continue (with an optional reason the agent reads)
+* while "Deny & stop" also interrupts.
+*
+* The heading is whatever the engine authored — `title`, else `displayName`.
+* Composing "wants to use {tool}" instead would be wrong for codex, where an
+* approval is usually an *escalation after a sandbox refusal* and the runner has
+* already written the sentence that says so.
+*/
 function PermissionPrompt({ request, onApprove, onDeny, className }) {
 	const [showInput, setShowInput] = useState(false);
-	return /* @__PURE__ */ jsx("div", {
+	const [denying, setDenying] = useState(false);
+	const [reason, setReason] = useState("");
+	const deny = (interrupt) => {
+		const message = reason.trim();
+		onDeny(request.id, message || void 0, interrupt || void 0);
+		setReason("");
+		setDenying(false);
+	};
+	const summary = toolInputPreview(request.input);
+	const ToolIcon = toolIcon(request.toolName);
+	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "permission-prompt",
 		className: cn("rounded-lg border border-warning/40 bg-warning-bg p-3", className),
-		children: /* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-start gap-2.5",
 			children: [
-				/* @__PURE__ */ jsx(ShieldAlert, { className: "mt-0.5 size-4 shrink-0 text-warning" }),
+				/* @__PURE__ */ jsx(Hand, { className: "mt-0.5 size-4 shrink-0 text-warning" }),
 				/* @__PURE__ */ jsxs("div", {
 					className: "min-w-0 flex-1",
 					children: [
 						/* @__PURE__ */ jsx("div", {
 							className: "text-body-sm font-medium text-fg-1",
-							children: request.title ?? `Claude wants to use ${request.toolName}`
+							children: request.title ?? request.displayName ?? "Permission needed"
 						}),
 						request.description ? /* @__PURE__ */ jsx("div", {
 							className: "mt-0.5 text-label text-fg-3",
 							children: request.description
 						}) : null,
+						request.decisionReason ? /* @__PURE__ */ jsx("div", {
+							className: "mt-0.5 text-label text-fg-4",
+							children: request.decisionReason
+						}) : null,
+						/* @__PURE__ */ jsxs("div", {
+							className: "mt-1.5 flex min-w-0 items-center gap-2",
+							children: [
+								/* @__PURE__ */ jsx(ToolIcon, { className: "size-3 shrink-0 text-fg-3" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "shrink-0 font-mono text-label font-medium text-fg-2",
+									children: request.toolName
+								}),
+								summary ? /* @__PURE__ */ jsx("span", {
+									className: "min-w-0 truncate font-mono text-label text-fg-4",
+									children: summary
+								}) : null
+							]
+						}),
 						/* @__PURE__ */ jsxs("button", {
 							type: "button",
 							className: "mt-1 font-mono text-label text-fg-3 underline-offset-2 hover:underline",
@@ -4311,20 +5711,56 @@ function PermissionPrompt({ request, onApprove, onDeny, className }) {
 					]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "flex shrink-0 gap-1.5",
-					children: [/* @__PURE__ */ jsx(Button, {
-						size: "sm",
-						onClick: () => onApprove(request.id),
-						children: "Allow"
-					}), /* @__PURE__ */ jsx(Button, {
-						size: "sm",
-						variant: "outline",
-						onClick: () => onDeny(request.id, "Denied by user"),
-						children: "Deny"
-					})]
+					className: "flex shrink-0 flex-wrap justify-end gap-1.5",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							onClick: () => onApprove(request.id),
+							children: "Allow"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => setDenying((v) => !v),
+							children: "Deny"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => deny(true),
+							children: "Deny & stop"
+						})
+					]
 				})
 			]
-		})
+		}), denying ? /* @__PURE__ */ jsxs("div", {
+			className: "mt-2.5 flex items-center gap-2 border-t border-warning/30 pt-2.5",
+			children: [
+				/* @__PURE__ */ jsx(Input, {
+					autoFocus: true,
+					value: reason,
+					onChange: (e) => setReason(e.target.value),
+					onKeyDown: (e) => {
+						if (e.key === "Enter") deny(false);
+						if (e.key === "Escape") setDenying(false);
+					},
+					placeholder: "Reason (optional) — the agent reads this and can try something else",
+					className: "h-7 flex-1"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "outline",
+					onClick: () => setDenying(false),
+					children: "Cancel"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "destructive",
+					onClick: () => deny(false),
+					children: "Deny"
+				})
+			]
+		}) : null]
 	});
 }
 //#endregion
@@ -4488,62 +5924,170 @@ function QuestionPrompt({ request, onAnswer, onDismiss, className }) {
 	});
 }
 //#endregion
-//#region src/lib/format.ts
-function formatCost(usd) {
-	if (usd === void 0 || Number.isNaN(usd)) return "—";
-	if (usd === 0) return "$0.00";
-	if (usd < .01) return "<$0.01";
-	return `$${usd.toFixed(2)}`;
-}
-function formatDuration(ms) {
-	if (ms < 1e3) return `${Math.round(ms)}ms`;
-	const s = ms / 1e3;
-	if (s < 60) return `${s.toFixed(1)}s`;
-	return `${Math.floor(s / 60)}m ${Math.round(s % 60)}s`;
-}
-/** Compact token count, Claude Code-style: 850 → "850", 359_000 → "359.0k", 1_200_000 → "1.2M". */
-function formatTokens(tokens) {
-	if (tokens >= 1e6) return `${(tokens / 1e6).toFixed(1)}M`;
-	if (tokens >= 1e3) return `${(tokens / 1e3).toFixed(1)}k`;
-	return String(Math.round(tokens));
-}
-function formatBytes(bytes) {
-	if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-	if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-	return `${bytes} B`;
-}
-/** Countdown to an epoch-ms deadline: "2h 18m", "12m", "<1m"; "now" once passed. */
-function formatCountdown(untilEpochMs, now = Date.now()) {
-	const remaining = untilEpochMs - now;
-	if (remaining <= 0) return "now";
-	const minutes = Math.ceil(remaining / 6e4);
-	if (minutes < 1) return "<1m";
-	if (minutes < 60) return `${minutes}m`;
-	const days = Math.floor(minutes / 1440);
-	if (days >= 1) return `${days}d ${Math.floor(minutes % 1440 / 60)}h`;
-	return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+//#region src/components/agent/SessionInfoDialog.tsx
+/**
+* What this session *is*: engine, profile, model, mode, where it runs, which
+* credentials it found, and the files it has handed over.
+*
+* The identity half of the session's facts. Context and usage have their own
+* panels — they change every turn and are consulted mid-run, while everything
+* here is fixed at creation and looked up once.
+*/
+function SessionInfoDialog({ state, client, sessionId, open, onOpenChange }) {
+	const session = state.session;
+	const mode = state.permissionMode ? permissionModeMeta(state.permissionMode) : void 0;
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsx(DialogHeader, {
+			title: "Session info",
+			description: session?.title
+		}), /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col divide-y divide-border",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "pb-2",
+					children: [
+						/* @__PURE__ */ jsx(DialogRow, {
+							label: "Engine",
+							children: state.engine ?? "claude"
+						}),
+						session?.profile ? /* @__PURE__ */ jsx(DialogRow, {
+							label: "Profile",
+							children: session.profile
+						}) : null,
+						state.model ? /* @__PURE__ */ jsx(DialogRow, {
+							label: "Model",
+							mono: true,
+							children: state.model
+						}) : null,
+						mode ? /* @__PURE__ */ jsx(DialogRow, {
+							label: "Permission mode",
+							children: mode.label
+						}) : null,
+						session?.apiKeySource ? /* @__PURE__ */ jsx(DialogRow, {
+							label: "Credentials",
+							children: session.apiKeySource
+						}) : null
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "py-2",
+					children: [
+						state.cwd ? /* @__PURE__ */ jsx(CopyRow, {
+							label: "Working directory",
+							value: state.cwd
+						}) : null,
+						state.sdkSessionId ? /* @__PURE__ */ jsx(CopyRow, {
+							label: "Engine session id",
+							value: state.sdkSessionId
+						}) : null,
+						session ? /* @__PURE__ */ jsx(CopyRow, {
+							label: "Gateway session id",
+							value: session.id
+						}) : null
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "py-2",
+					children: [
+						session?.createdAt ? /* @__PURE__ */ jsx(DialogRow, {
+							label: "Started",
+							children: formatRelativeTime(session.createdAt)
+						}) : null,
+						session?.numTurns !== void 0 ? /* @__PURE__ */ jsx(DialogRow, {
+							label: "Turns",
+							children: session.numTurns
+						}) : null,
+						/* @__PURE__ */ jsx(DialogRow, {
+							label: "Cost",
+							mono: true,
+							children: formatCost(state.totalCostUsd)
+						})
+					]
+				}),
+				state.capabilities.vfs ? /* @__PURE__ */ jsx(SessionFiles, {
+					client,
+					sessionId,
+					open
+				}) : null
+			]
+		}) })] })
+	});
 }
-function formatRelativeTime(epochMs, now = Date.now()) {
-	if (!epochMs) return "—";
-	const diff = Math.max(0, now - epochMs);
-	const s = Math.floor(diff / 1e3);
-	if (s < 60) return "just now";
-	const m = Math.floor(s / 60);
-	if (m < 60) return `${m}m ago`;
-	const h = Math.floor(m / 60);
-	if (h < 24) return `${h}h ago`;
-	return `${Math.floor(h / 24)}d ago`;
+/** Long ids are for pasting elsewhere, so give them a copy target. */
+function CopyRow({ label, value }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start justify-between gap-2 py-1.5",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "text-label text-fg-3",
+				children: label
+			}), /* @__PURE__ */ jsx("div", {
+				className: "mt-0.5 font-mono text-label break-all text-fg-1",
+				children: value
+			})]
+		}), /* @__PURE__ */ jsx(CopyButton, {
+			value,
+			"aria-label": `Copy ${label.toLowerCase()}`
+		})]
+	});
 }
-/** Compact one-line preview of a tool input for card headers. */
-function toolInputPreview(input, max = 80) {
-	if (input === null || input === void 0) return "";
-	if (typeof input === "object") {
-		const o = input;
-		const primary = o.command ?? o.file_path ?? o.path ?? o.url ?? o.pattern ?? o.query ?? o.description;
-		if (typeof primary === "string") return primary.length > max ? primary.slice(0, max - 1) + "…" : primary;
-	}
-	const text = JSON.stringify(input) ?? "";
-	return text.length > max ? text.slice(0, max - 1) + "…" : text;
+/** Files the agent produced inside the session's VFS. Fetched when the panel
+* opens — this is not a live list and nothing pushes changes to it. */
+function SessionFiles({ client, sessionId, open }) {
+	const [files, setFiles] = useState();
+	const [loading, setLoading] = useState(false);
+	useEffect(() => {
+		if (!open || !sessionId) return;
+		let cancelled = false;
+		setLoading(true);
+		client.listSessionFiles(sessionId).then((list) => {
+			if (!cancelled) setFiles(list);
+		}).catch(() => {
+			if (!cancelled) setFiles([]);
+		}).finally(() => {
+			if (!cancelled) setLoading(false);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		client,
+		sessionId,
+		open
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pt-3",
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: "text-label font-medium text-fg-3",
+			children: "Files"
+		}), loading ? /* @__PURE__ */ jsx("div", {
+			className: "py-3 text-center",
+			children: /* @__PURE__ */ jsx(Spinner, { className: "size-4 text-fg-4" })
+		}) : !files?.length ? /* @__PURE__ */ jsx("p", {
+			className: "py-2 text-body-sm text-fg-4",
+			children: "Nothing delivered yet."
+		}) : /* @__PURE__ */ jsx("ul", {
+			className: "mt-1 flex flex-col",
+			children: files.map((file) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
+				href: sessionId ? client.sessionFileUrl(sessionId, file.path) : void 0,
+				className: "flex items-center gap-2 rounded-md px-1 py-1.5 hover:bg-surface-hover",
+				children: [
+					/* @__PURE__ */ jsx(Download, { className: "size-3.5 shrink-0 text-fg-4" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate font-mono text-label text-fg-1",
+						children: file.path
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "shrink-0 text-label text-fg-4",
+						children: formatBytes(file.bytes)
+					})
+				]
+			}) }, file.path))
+		})]
+	});
 }
 //#endregion
 //#region src/components/agent/status.ts
@@ -4685,40 +6229,68 @@ function RateLimitMeter({ label, info, now }) {
 		})
 	});
 }
-function StatusBar({ state, connected, className }) {
+/** A gauge that leads somewhere. `undefined` handler leaves it inert, so an
+* embedder that mounts no panels doesn't get buttons that do nothing. */
+function Slot({ onClick, hint, children }) {
+	if (!onClick) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		"aria-label": hint,
+		className: "rounded-md px-1 py-0.5 transition-colors outline-none hover:bg-surface-hover focus-visible:bg-surface-hover",
+		children
+	});
+}
+function StatusBar({ state, connected, connection, onOpenStatus, onOpenContext, onOpenUsage, actions, className }) {
 	const meta = STATUS_META[state.status];
 	const now = useNow();
 	const session = state.rateLimits?.five_hour;
 	const weekly = state.rateLimits?.seven_day;
+	const link = connection ?? (connected === false ? "reconnecting" : "live");
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "status-bar",
-		className: cn("flex items-center gap-3 border-b border-border bg-surface px-3 py-2", className),
+		className: cn("flex items-center gap-2 border-b border-border bg-surface px-3 py-1.5", className),
 		children: [
-			/* @__PURE__ */ jsxs(Badge, {
-				variant: meta.variant,
-				dot: !meta.busy,
-				children: [meta.busy ? /* @__PURE__ */ jsx(Spinner, { className: "size-3 text-current" }) : null, meta.label]
+			/* @__PURE__ */ jsx(Slot, {
+				onClick: onOpenStatus,
+				hint: "Session info",
+				children: link === "live" ? /* @__PURE__ */ jsxs(Badge, {
+					variant: meta.variant,
+					dot: !meta.busy,
+					children: [meta.busy ? /* @__PURE__ */ jsx(Spinner, { className: "size-3 text-current" }) : null, meta.label]
+				}) : /* @__PURE__ */ jsxs(Badge, {
+					variant: link === "offline" ? "danger" : "warning",
+					dot: false,
+					children: [link === "offline" ? /* @__PURE__ */ jsx(WifiOff, { className: "size-3 text-current" }) : /* @__PURE__ */ jsx(RefreshCw, { className: "size-3 animate-spin text-current" }), link === "offline" ? "Offline" : "Reconnecting…"]
+				})
 			}),
-			state.contextUsage ? /* @__PURE__ */ jsx(ContextMeter, { usage: state.contextUsage }) : null,
-			session ? /* @__PURE__ */ jsx(RateLimitMeter, {
-				label: "Session",
-				info: session,
-				now
+			state.capabilities.contextUsage && state.contextUsage ? /* @__PURE__ */ jsx(Slot, {
+				onClick: onOpenContext,
+				hint: "Context breakdown",
+				children: /* @__PURE__ */ jsx(ContextMeter, { usage: state.contextUsage })
 			}) : null,
-			weekly ? /* @__PURE__ */ jsx(RateLimitMeter, {
-				label: "Weekly",
-				info: weekly,
-				now
+			session || weekly ? /* @__PURE__ */ jsx(Slot, {
+				onClick: onOpenUsage,
+				hint: "Plan usage",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-2",
+					children: [session ? /* @__PURE__ */ jsx(RateLimitMeter, {
+						label: "Session",
+						info: session,
+						now
+					}) : null, weekly ? /* @__PURE__ */ jsx(RateLimitMeter, {
+						label: "Weekly",
+						info: weekly,
+						now
+					}) : null]
+				})
 			}) : null,
 			/* @__PURE__ */ jsx("span", { className: "flex-1" }),
-			!connected ? /* @__PURE__ */ jsxs("span", {
-				className: "inline-flex items-center gap-1 text-label text-warning",
-				children: [/* @__PURE__ */ jsx(WifiOff, { className: "size-3" }), " reconnecting…"]
-			}) : null,
 			/* @__PURE__ */ jsx("span", {
 				className: "font-mono text-label text-fg-3",
 				children: formatCost(state.totalCostUsd)
-			})
+			}),
+			actions
 		]
 	});
 }
@@ -4829,6 +6401,40 @@ function MessageContent({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/agent/PromptTokenText.tsx
+/**
+* A sent message, with its `@file` and `/command` tokens styled the way the CLI
+* writes them: monospace and tinted, no background — the bubble already has one,
+* and a second fill inside it reads as a button.
+*
+* Literal text, never markdown: what was typed is what was sent. The one pass
+* over it is this, so a message reads the same after sending as it did in the
+* composer. Two tokens, two meanings — a file is a reference, a command is an
+* action — so they are told apart by hue rather than by shape alone.
+*/
+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/Response.tsx
 /** Markdown renderer for assistant output — streaming-safe via streamdown, code
 * highlighted with shiki (dual theme follows [data-theme] through the dark: variant). */
@@ -4885,8 +6491,73 @@ function Reasoning({ children, isStreaming = false, defaultOpen, className }) {
 	});
 }
 //#endregion
+//#region src/components/agent/SessionEmptyState.tsx
+/**
+* What a session shows before it has said anything: where the agent is sitting,
+* and what the composer accepts beyond prose.
+*
+* Every hint is conditional on the affordance actually existing — an engine
+* without slash commands, or a gateway without host files, is not told about
+* them. Deliberately no project name (the header already carries it) and no
+* brand mark (its geometry is inlined in several places already and they are
+* meant to stay identical).
+*/
+function SessionEmptyState({ cwd, hasCommands, hasSkills, canBrowseFiles, className }) {
+	const hints = [
+		{
+			icon: MessageSquareText,
+			text: "Tell the agent what to do."
+		},
+		...hasCommands ? [{
+			icon: SlashSquare,
+			text: "Type / for the CLI’s slash commands."
+		}] : [],
+		...hasSkills ? [{
+			icon: Sparkles,
+			text: "Type $ to draft a message for one of the agent’s skills."
+		}] : [],
+		...canBrowseFiles ? [{
+			icon: AtSign,
+			text: "Type @ to search this project’s files."
+		}] : []
+	];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col items-center gap-4 py-10", className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex size-12 items-center justify-center rounded-xl bg-surface text-fg-3",
+				children: /* @__PURE__ */ jsx(Terminal, { className: "size-5" })
+			}),
+			cwd ? /* @__PURE__ */ jsx("p", {
+				className: "max-w-full truncate font-mono text-label text-fg-4",
+				children: cwd
+			}) : null,
+			/* @__PURE__ */ jsx("ul", {
+				className: "w-full max-w-sm divide-y divide-border overflow-hidden rounded-lg bg-surface",
+				children: hints.map((hint) => /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center gap-3 px-3.5 py-2.5",
+					children: [/* @__PURE__ */ jsx(hint.icon, { className: "size-4 shrink-0 text-fg-4" }), /* @__PURE__ */ jsx("span", {
+						className: "text-body-sm text-fg-3",
+						children: hint.text
+					})]
+				}, hint.text))
+			})
+		]
+	});
+}
+//#endregion
 //#region src/components/agent/ToolCallCard.tsx
 const RESULT_PREVIEW_CHARS = 2e3;
+/** Codex's built-in image tools name a host path rather than sending bytes —
+* an event log carries references, never base64. Rendering the picture means
+* reading that path back through the gateway's host-file route. */
+const IMAGE_TOOLS = new Set(["CodexImageGeneration", "CodexImageView"]);
+const imagePathOf = (item) => {
+	if (!IMAGE_TOOLS.has(item.name)) return void 0;
+	const input = item.input;
+	const path = input?.savedPath ?? input?.path;
+	return typeof path === "string" ? path : void 0;
+};
 /** Badge per execution state. `pending`/`deferred` mean the work is happening
 * somewhere else (this tab's sandbox, a queue) — distinct from the model still
 * running the call itself. */
@@ -4917,12 +6588,14 @@ const STATE_BADGE = {
 		busy: false
 	}
 };
-function ToolCallCard({ item, className }) {
+function ToolCallCard({ item, hostImage, className }) {
 	const [open, setOpen] = useState(false);
 	const [fullResult, setFullResult] = useState(false);
+	const imagePath = imagePathOf(item);
 	const status = item.status ?? (item.result === void 0 ? "running" : "settled");
 	const badge = STATE_BADGE[status];
 	const isError = status === "failed" || item.result?.isError === true;
+	const Icon = toolIcon(item.name);
 	const resultText = item.result?.text ?? "";
 	const truncated = !fullResult && resultText.length > RESULT_PREVIEW_CHARS;
 	const shownResult = truncated ? resultText.slice(0, RESULT_PREVIEW_CHARS) : resultText;
@@ -4930,59 +6603,102 @@ function ToolCallCard({ item, className }) {
 		"data-slot": "tool-call",
 		"data-state": status,
 		className: cn("w-full overflow-hidden rounded-lg border border-border bg-surface", className),
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			onClick: () => setOpen((v) => !v),
-			className: cn("flex w-full items-center gap-2 px-3 py-2 text-left transition-colors outline-none", "hover:bg-surface-hover focus-visible:bg-surface-hover"),
-			children: [
-				/* @__PURE__ */ jsx(Wrench, { className: "size-3.5 shrink-0 text-fg-3" }),
-				/* @__PURE__ */ jsx("span", {
-					className: "shrink-0 font-mono text-body-sm font-medium text-fg-1",
-					children: item.name
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "min-w-0 flex-1 truncate font-mono text-label text-fg-4",
-					children: toolInputPreview(item.input)
-				}),
-				/* @__PURE__ */ jsxs(Badge, {
-					variant: badge.variant,
-					dot: !badge.busy,
-					className: "shrink-0 gap-1",
-					children: [
-						badge.busy ? /* @__PURE__ */ jsx(Spinner, { className: "size-3 text-current" }) : null,
-						status === "deferred" ? /* @__PURE__ */ jsx(Clock, { className: "size-3 text-current" }) : null,
-						badge.label
-					]
-				}),
-				/* @__PURE__ */ jsx(ChevronDown, { className: cn("size-3.5 shrink-0 text-fg-4 transition-transform", open && "rotate-180") })
-			]
-		}), open ? /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-2 border-t border-border p-2.5",
-			children: [
-				/* @__PURE__ */ jsx(CodeBlock, {
-					code: JSON.stringify(item.input, null, 2),
-					label: "Parameters"
-				}),
-				item.logs?.length ? /* @__PURE__ */ jsx(CodeBlock, {
-					code: item.logs.join("\n"),
-					label: "Logs"
-				}) : null,
-				item.result !== void 0 ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(CodeBlock, {
-					code: shownResult || "(empty result)",
-					label: isError ? "Error" : "Result",
-					className: cn(isError && "border-danger/40 [&_pre]:text-danger")
-				}), truncated ? /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					className: "mt-1 text-label text-fg-3 underline-offset-2 hover:underline",
-					onClick: () => setFullResult(true),
-					children: [
-						"Show all ",
-						resultText.length.toLocaleString(),
-						" chars"
-					]
-				}) : null] }) : null
-			]
-		}) : null]
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => setOpen((v) => !v),
+				className: cn("flex w-full items-center gap-2 px-3 py-2 text-left transition-colors outline-none", "hover:bg-surface-hover focus-visible:bg-surface-hover"),
+				children: [
+					/* @__PURE__ */ jsx(Icon, { className: "size-3.5 shrink-0 text-fg-3" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "shrink-0 font-mono text-body-sm font-medium text-fg-1",
+						children: item.name
+					}),
+					item.backend && item.backend !== "server" ? /* @__PURE__ */ jsx(Badge, {
+						variant: "neutral",
+						className: "shrink-0",
+						children: item.backend
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate font-mono text-label text-fg-4",
+						children: toolInputPreview(item.input)
+					}),
+					/* @__PURE__ */ jsxs(Badge, {
+						variant: badge.variant,
+						dot: !badge.busy,
+						className: "shrink-0 gap-1",
+						children: [
+							badge.busy ? /* @__PURE__ */ jsx(Spinner, { className: "size-3 text-current" }) : null,
+							status === "deferred" ? /* @__PURE__ */ jsx(Clock, { className: "size-3 text-current" }) : null,
+							badge.label
+						]
+					}),
+					/* @__PURE__ */ jsx(ChevronDown, { className: cn("size-3.5 shrink-0 text-fg-4 transition-transform", open && "rotate-180") })
+				]
+			}),
+			imagePath && hostImage ? /* @__PURE__ */ jsx(HostImage, {
+				path: imagePath,
+				load: hostImage
+			}) : null,
+			open ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2 border-t border-border p-2.5",
+				children: [
+					/* @__PURE__ */ jsx(CodeBlock, {
+						code: JSON.stringify(item.input, null, 2),
+						label: "Parameters"
+					}),
+					item.logs?.length ? /* @__PURE__ */ jsx(CodeBlock, {
+						code: item.logs.join("\n"),
+						label: "Logs"
+					}) : null,
+					item.result !== void 0 ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(CodeBlock, {
+						code: shownResult || "(empty result)",
+						label: isError ? "Error" : "Result",
+						className: cn(isError && "border-danger/40 [&_pre]:text-danger")
+					}), truncated ? /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "mt-1 text-label text-fg-3 underline-offset-2 hover:underline",
+						onClick: () => setFullResult(true),
+						children: [
+							"Show all ",
+							resultText.length.toLocaleString(),
+							" chars"
+						]
+					}) : null] }) : null
+				]
+			}) : null
+		]
+	});
+}
+/**
+* A picture that lives on the host, fetched through the gateway's host-file
+* route and shown inline.
+*
+* Silent on failure by design: a path outside the server's allowed roots is the
+* *expected* case for codex's default save location, and the card's result text
+* already names where the file went. An error banner over that would be noise
+* about a thing the operator can fix in one line of config.
+*/
+function HostImage({ path, load }) {
+	const [src, setSrc] = useState();
+	useEffect(() => {
+		let cancelled = false;
+		setSrc(void 0);
+		load(path).then((url) => {
+			if (!cancelled) setSrc(url);
+		}).catch(() => {});
+		return () => {
+			cancelled = true;
+		};
+	}, [path, load]);
+	if (!src) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "border-t border-border p-2.5",
+		children: /* @__PURE__ */ jsx("img", {
+			src,
+			alt: path.split("/").pop() ?? "Generated image",
+			className: "max-h-96 w-auto max-w-full rounded-md border border-border"
+		})
 	});
 }
 //#endregion
@@ -4990,22 +6706,31 @@ function ToolCallCard({ item, className }) {
 function TurnResultRow({ item }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "turn-result",
-		className: "flex items-center gap-2 py-1",
-		children: [
-			/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" }),
-			/* @__PURE__ */ jsxs("span", {
-				className: cn("font-mono text-label", item.isError ? "text-danger" : "text-fg-4"),
-				children: [
-					item.isError ? item.subtype : "turn done",
-					" · ",
-					formatDuration(item.durationMs),
-					" ·",
-					" ",
-					formatCost(item.totalCostUsd)
-				]
-			}),
-			/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
-		]
+		className: "py-1",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" }),
+				/* @__PURE__ */ jsxs("span", {
+					className: cn("font-mono text-label", item.isError ? "text-danger" : "text-fg-4"),
+					children: [
+						item.isError ? item.subtype : "turn done",
+						" · ",
+						formatDuration(item.durationMs),
+						" ·",
+						" ",
+						formatCost(item.totalCostUsd)
+					]
+				}),
+				/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
+			]
+		}), item.errors?.length ? /* @__PURE__ */ jsx("ul", {
+			className: "mt-1 flex flex-col gap-0.5 text-center",
+			children: item.errors.map((message, index) => /* @__PURE__ */ jsx("li", {
+				className: "text-label break-words text-danger",
+				children: message
+			}, index))
+		}) : null]
 	});
 }
 function NoticeRow({ item }) {
@@ -5015,11 +6740,14 @@ function NoticeRow({ item }) {
 		children: item.text
 	});
 }
-function TranscriptItemView({ item, fileUrl }) {
+function TranscriptItemView({ item, fileUrl, attachmentUrl, hostImage }) {
 	switch (item.kind) {
-		case "user": return /* @__PURE__ */ jsx(Message, {
+		case "user": return /* @__PURE__ */ jsxs(Message, {
 			from: "user",
-			children: /* @__PURE__ */ jsx(MessageContent, { children: item.text })
+			children: [item.attachments?.length ? /* @__PURE__ */ jsx(SentAttachments, {
+				attachments: item.attachments,
+				attachmentUrl
+			}) : null, item.text ? /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(PromptTokenText, { text: item.text }) }) : null]
 		});
 		case "assistant_text": return /* @__PURE__ */ jsx(Message, {
 			from: "assistant",
@@ -5032,7 +6760,10 @@ function TranscriptItemView({ item, fileUrl }) {
 			isStreaming: item.id === "streaming-thinking",
 			children: item.text
 		});
-		case "tool_call": return /* @__PURE__ */ jsx(ToolCallCard, { item });
+		case "tool_call": return /* @__PURE__ */ jsx(ToolCallCard, {
+			item,
+			hostImage
+		});
 		case "turn_result": return /* @__PURE__ */ jsx(TurnResultRow, { item });
 		case "notice": return /* @__PURE__ */ jsx(NoticeRow, { item });
 		case "file_delivered": return /* @__PURE__ */ jsx(FileCard, {
@@ -5052,32 +6783,204 @@ function showLoader(state) {
 	if (last.kind === "thinking" && last.id === "streaming-thinking") return false;
 	return last.kind !== "turn_result" || state.status === "running";
 }
-function Transcript({ state, fileUrl, className }) {
+/** Files sent with a message: thumbnails for images, named chips for the rest.
+* References only — the bytes are fetched from the gateway. */
+function SentAttachments({ attachments, attachmentUrl }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "mb-1 flex flex-wrap justify-end gap-1.5",
+		children: attachments.map((attachment) => {
+			const href = attachmentUrl?.(attachment.id);
+			return attachment.mediaType.startsWith("image/") && href ? /* @__PURE__ */ jsx("img", {
+				src: href,
+				alt: attachment.name,
+				className: "size-20 rounded-md border border-border object-cover"
+			}, attachment.id) : /* @__PURE__ */ jsx("span", {
+				className: "rounded-full border border-border bg-surface px-2.5 py-1 text-body-xs text-fg-3",
+				children: attachment.name
+			}, attachment.id);
+		})
+	});
+}
+/** 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;
+}
+function Transcript({ state, fileUrl, attachmentUrl, canBrowseFiles, hostImage, className }) {
 	return /* @__PURE__ */ jsxs(Conversation, {
 		className,
-		children: [/* @__PURE__ */ jsxs(ConversationContent, { children: [state.items.length === 0 && state.status !== "starting" ? /* @__PURE__ */ jsx("div", {
-			className: "py-12 text-center text-body-sm text-fg-4",
-			children: "No messages yet."
-		}) : state.items.map((item) => /* @__PURE__ */ jsx(TranscriptItemView, {
-			item,
-			fileUrl
+		children: [/* @__PURE__ */ jsxs(ConversationContent, { 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
+		}) : state.items.map((item) => /* @__PURE__ */ jsx("div", {
+			className: nestedClass(item),
+			children: /* @__PURE__ */ jsx(TranscriptItemView, {
+				item,
+				fileUrl,
+				attachmentUrl,
+				hostImage
+			})
 		}, `${item.kind}:${item.id}`)), showLoader(state) ? /* @__PURE__ */ jsx(Loader, { label: state.status === "starting" ? "Starting session…" : void 0 }) : null] }), /* @__PURE__ */ jsx(ConversationScrollButton, {})]
 	});
 }
 //#endregion
+//#region src/components/agent/UsageDialog.tsx
+/** Ticking clock — the countdowns and the pace markers both move with it, and a
+* minute is the finest resolution either of them prints. */
+function useMinuteClock(open) {
+	const [now, setNow] = useState(() => Date.now());
+	useEffect(() => {
+		if (!open) return;
+		setNow(Date.now());
+		const timer = setInterval(() => setNow(Date.now()), 6e4);
+		return () => clearInterval(timer);
+	}, [open]);
+	return now;
+}
+const usageTint = (pct) => pct >= 90 ? "bg-danger" : pct >= 70 ? "bg-warning" : "bg-accent";
+/**
+* The plan's rate-limit windows, spelled out: how much of each is used, how that
+* compares to the pace that would spend the window exactly, and when it resets.
+*
+* The pace marker is the point. A bar alone says "17% used", which is only
+* alarming or reassuring once you know how far into the week you are — so every
+* window draws a tick at the elapsed share of its duration. Left of the tick is
+* under budget, right of it is ahead of it. The duration comes from the window
+* key (5h, 7d) because the CLI reports a reset time and a percentage and never a
+* duration; a window whose key doesn't say gets no marker rather than a guessed one.
+*/
+function UsageDialog({ rateLimits, subscriptionType, engine, totalCostUsd, updatedAt, open, onOpenChange }) {
+	const now = useMinuteClock(open);
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsx(DialogHeader, {
+			title: "Usage",
+			description: engine === "claude" ? "Claude Code" : engine,
+			actions: subscriptionType ? /* @__PURE__ */ jsx(Badge, {
+				variant: "accent",
+				className: "mt-0.5 shrink-0 capitalize",
+				children: subscriptionType
+			}) : null
+		}), /* @__PURE__ */ jsxs(DialogBody, { children: [
+			rateLimits.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "py-6 text-center text-body-sm text-fg-4",
+				children: engine === "claude" ? "This session reports no plan windows — API-key sessions have none, and a subscription session reports them once a turn has run." : `Plan windows are a claude.ai subscription thing; this session runs on the ${engine} engine.`
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-5",
+				children: rateLimits.map(({ key, info }) => /* @__PURE__ */ jsx(UsageWindow, {
+					windowKey: key,
+					info,
+					now
+				}, key))
+			}),
+			/* @__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)
+				})]
+			}),
+			updatedAt ? /* @__PURE__ */ jsxs("p", {
+				className: "mt-2 text-label text-fg-4",
+				children: ["Updated ", formatAgoPrecise(updatedAt, now)]
+			}) : null
+		] })] })
+	});
+}
+function UsageWindow({ windowKey, info, now }) {
+	const utilization = info.utilization ?? 0;
+	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;
+	const pace = duration !== void 0 && remaining !== void 0 && remaining > 0 && remaining < duration ? (duration - remaining) / duration : void 0;
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between gap-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				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"),
+				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", usageTint(utilization)),
+				style: { width: `${Math.min(100, Math.max(2, utilization))}%` }
+			}), pace !== void 0 ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				title: "Spent evenly, usage would be here by now",
+				className: "absolute -top-1 h-4 w-0.5 -translate-x-1/2 rounded-full bg-fg-1",
+				style: { left: `${Math.min(100, Math.max(0, pace * 100))}%` }
+			}) : null]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "mt-1.5 flex items-center gap-3 text-label text-fg-4",
+			children: [
+				resetsAtMs !== void 0 ? /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ jsx(RotateCcw, { className: "size-3" }),
+						" Resets in ",
+						formatCountdown(resetsAtMs, now)
+					]
+				}) : null,
+				info.isUsingOverage ? /* @__PURE__ */ jsx("span", {
+					className: "text-warning",
+					children: "overage"
+				}) : null,
+				info.status === "rejected" ? /* @__PURE__ */ jsx("span", {
+					className: "text-danger",
+					children: "limit reached"
+				}) : null
+			]
+		})
+	] });
+}
+//#endregion
 //#region src/components/agent/SessionPanel.tsx
 /**
 * The all-in-one embeddable session surface: status bar, streaming transcript,
 * permission prompts, composer. Attaches via useClaudeSession; remount (key) to switch
 * sessions.
+*
+* Every affordance is gated on the session's **capability record** rather than on
+* the engine name — an absent capability hides the control instead of offering
+* one that can only fail.
 */
 function SessionPanel({ client, sessionId, header, className }) {
 	const [protocolError, setProtocolError] = useState(void 0);
-	const { state, connected, handle, send, approve, deny, interrupt, setModel, setPermissionMode } = useClaudeSession(client, sessionId, { onProtocolError: setProtocolError });
+	const [panel, setPanel] = useState();
+	const { state, connection, protocolMismatch, models, effectiveModel, handle, send, approve, deny, interrupt, setModel, setPermissionMode, reconnectNow } = useClaudeSession(client, sessionId, { onProtocolError: setProtocolError });
 	useEffect(() => setProtocolError(void 0), [sessionId]);
+	useEffect(() => {
+		const onVisible = () => {
+			if (document.visibilityState === "visible") reconnectNow();
+		};
+		document.addEventListener("visibilitychange", onVisible);
+		return () => document.removeEventListener("visibilitychange", onVisible);
+	}, [reconnectNow]);
 	useToolCallHost(handle);
+	const capabilities = state.capabilities;
 	const busy = state.status === "running" || state.status === "awaiting_approval";
 	const ended = state.status === "failed" || state.status === "closed";
+	const attachments = useAttachments(client, sessionId, {
+		capabilities,
+		engine: state.engine
+	});
+	const hostFiles = useHostFileSearch(client, state.cwd);
+	const windows = useMemo(() => rateLimitWindows(state), [state]);
+	const hostImage = useHostImage(client, sessionId, state.producedFiles);
+	const composerRef = useRef(null);
 	const commands = useMemo(() => {
 		if (!state.commands) return void 0;
 		if (state.commands.some((c) => c.name === "model")) return state.commands;
@@ -5087,52 +6990,95 @@ function SessionPanel({ client, sessionId, header, className }) {
 			argumentHint: "<model>"
 		}, ...state.commands];
 	}, [state.commands]);
-	const handleSend = (text) => {
-		const modelCommand = /^\/model\s+(\S+)$/.exec(text);
-		if (modelCommand) {
-			setModel(modelCommand[1]);
-			return;
+	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") {
+				setPanel("mcp");
+				return;
+			}
 		}
-		send(text);
+		send(text, attachmentIds);
 	};
+	const actionsMenu = /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon-sm",
+		"aria-label": "Session actions",
+		children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
+	}) }), /* @__PURE__ */ jsxs(MenuContent, { children: [
+		capabilities.contextUsage ? /* @__PURE__ */ jsxs(MenuItem, {
+			onClick: () => setPanel("context"),
+			children: [/* @__PURE__ */ jsx(ChartPie, { className: "size-3.5 text-fg-3" }), " Context"]
+		}) : null,
+		capabilities.rateLimits ? /* @__PURE__ */ jsxs(MenuItem, {
+			onClick: () => setPanel("usage"),
+			children: [/* @__PURE__ */ jsx(Gauge, { className: "size-3.5 text-fg-3" }), " Usage"]
+		}) : null,
+		/* @__PURE__ */ jsxs(MenuItem, {
+			onClick: () => setPanel("info"),
+			children: [/* @__PURE__ */ jsx(Info, { className: "size-3.5 text-fg-3" }), " Session info"]
+		}),
+		capabilities.mcpStatus ? /* @__PURE__ */ jsxs(MenuItem, {
+			onClick: () => setPanel("mcp"),
+			children: [/* @__PURE__ */ jsx(Plug, { className: "size-3.5 text-fg-3" }), " MCP servers"]
+		}) : null,
+		capabilities.skillsList ? /* @__PURE__ */ jsxs(MenuItem, {
+			onClick: () => setPanel("skills"),
+			children: [/* @__PURE__ */ jsx(Sparkles, { className: "size-3.5 text-fg-3" }), " Skills"]
+		}) : null,
+		hostFiles.available ? /* @__PURE__ */ jsxs(MenuItem, {
+			onClick: () => setPanel("files"),
+			children: [/* @__PURE__ */ jsx(FolderTree, { className: "size-3.5 text-fg-3" }), " Project files"]
+		}) : null
+	] })] });
+	const headerTakesActions = typeof header === "function";
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "session-panel",
 		className: cn("flex h-full min-h-0 flex-col overflow-hidden bg-bg", className),
 		children: [
-			header,
+			headerTakesActions ? header({ actions: actionsMenu }) : header,
 			/* @__PURE__ */ jsx(StatusBar, {
 				state,
-				connected
+				connection,
+				onOpenStatus: () => setPanel("info"),
+				onOpenContext: () => setPanel("context"),
+				onOpenUsage: () => setPanel("usage"),
+				actions: headerTakesActions ? void 0 : actionsMenu
 			}),
-			protocolError ? /* @__PURE__ */ jsx("div", {
-				className: "px-3 pt-2",
-				children: /* @__PURE__ */ jsxs("div", {
-					role: "alert",
-					className: "mx-auto flex w-full max-w-3xl items-start gap-2 rounded-md border border-danger/40 bg-danger-bg px-3 py-2 text-body-sm text-danger",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "min-w-0 flex-1 break-words",
-						children: protocolError
-					}), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: () => setProtocolError(void 0),
-						"aria-label": "Dismiss error",
-						className: "shrink-0 opacity-70 transition-opacity hover:opacity-100",
-						children: "✕"
-					})]
-				})
+			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,
 			/* @__PURE__ */ jsx(Transcript, {
 				state,
-				fileUrl: sessionId ? (path) => client.sessionFileUrl(sessionId, path) : void 0
+				fileUrl: sessionId ? (path) => client.sessionFileUrl(sessionId, path) : void 0,
+				attachmentUrl: sessionId ? (id) => client.attachmentUrl(sessionId, id) : void 0,
+				canBrowseFiles: hostFiles.available,
+				hostImage
 			}),
-			state.pendingApprovals.length > 0 ? /* @__PURE__ */ jsx("div", {
+			capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? /* @__PURE__ */ jsx("div", {
 				className: "px-3 pb-2",
 				children: /* @__PURE__ */ jsx("div", {
 					className: "mx-auto flex w-full max-w-3xl flex-col gap-2",
 					children: state.pendingApprovals.map((request) => request.toolName === "AskUserQuestion" && parseUserQuestions(request.input).length > 0 ? /* @__PURE__ */ jsx(QuestionPrompt, {
 						request,
 						onAnswer: approve,
-						onDismiss: deny
+						onDismiss: (id) => deny(id, "Question dismissed by user")
 					}, request.id) : /* @__PURE__ */ jsx(PermissionPrompt, {
 						request,
 						onApprove: approve,
@@ -5141,26 +7087,1000 @@ function SessionPanel({ client, sessionId, header, className }) {
 				})
 			}) : null,
 			/* @__PURE__ */ jsx(Composer, {
+				ref: composerRef,
 				onSend: handleSend,
 				onInterrupt: interrupt,
 				busy,
 				disabled: ended || !sessionId,
-				commands,
-				toolbar: /* @__PURE__ */ jsxs(Fragment, { children: [state.models?.length ? /* @__PURE__ */ jsx(ModelSelect, {
-					models: state.models,
-					model: state.model,
+				commands: capabilities.slashCommands ? commands : void 0,
+				skills: capabilities.skillsList ? state.skills : void 0,
+				attachments,
+				onSearchFiles: hostFiles.available ? (query, options) => hostFiles.search(query, {
+					...options,
+					limit: 8
+				}) : void 0,
+				toolbar: /* @__PURE__ */ jsxs(Fragment$1, { children: [models.length ? /* @__PURE__ */ jsx(ModelSelect, {
+					models,
+					model: effectiveModel,
 					onModelChange: setModel,
 					disabled: ended
 				}) : null, state.permissionMode ? /* @__PURE__ */ jsx(PermissionModeSelect, {
 					mode: state.permissionMode,
 					onModeChange: setPermissionMode,
-					modes: state.engine === "provider" ? PROVIDER_PERMISSION_MODES : void 0,
+					modes: capabilities.permissionModes,
+					canBypass: state.session?.canBypassPermissions,
 					disabled: ended
 				}) : null] })
+			}),
+			/* @__PURE__ */ jsx(SessionInfoDialog, {
+				state,
+				client,
+				sessionId,
+				open: panel === "info",
+				onOpenChange: (next) => setPanel(next ? "info" : void 0)
+			}),
+			/* @__PURE__ */ jsx(ContextDialog, {
+				usage: state.contextUsage,
+				open: panel === "context",
+				onOpenChange: (next) => setPanel(next ? "context" : void 0)
+			}),
+			/* @__PURE__ */ jsx(UsageDialog, {
+				rateLimits: windows,
+				subscriptionType: state.subscriptionType,
+				engine: state.engine ?? "claude",
+				totalCostUsd: state.totalCostUsd,
+				updatedAt: state.rateLimitsUpdatedAt,
+				open: panel === "usage",
+				onOpenChange: (next) => setPanel(next ? "usage" : void 0)
+			}),
+			/* @__PURE__ */ jsx(McpDialog, {
+				client,
+				sessionId,
+				canManageServers: capabilities.mcpServerActions,
+				open: panel === "mcp",
+				onOpenChange: (next) => setPanel(next ? "mcp" : void 0)
+			}),
+			/* @__PURE__ */ jsx(SkillsDialog, {
+				skills: state.skills,
+				open: panel === "skills",
+				onOpenChange: (next) => setPanel(next ? "skills" : void 0),
+				onUse: (skill) => composerRef.current?.insertText(skillPrompt(skill))
+			}),
+			/* @__PURE__ */ jsx(HostFilesDialog, {
+				client,
+				cwd: state.cwd,
+				open: panel === "files",
+				onOpenChange: (next) => setPanel(next ? "files" : void 0)
 			})
 		]
 	});
 }
+/**
+* Turns a host path a tool card is holding into something an `<img>` can show.
+*
+* Two sources, tried in that order and for a reason:
+*
+* 1. **The session's produced files.** If this session's own runner announced
+*    writing that path (`file_produced`), the gateway will serve it from
+*    `/sessions/:id/produced/:fileId` — no host-file roots to declare, no byte
+*    cap to raise. This is the path codex's generated images take, and it is
+*    why they now render out of the box.
+* 2. **`/fs/read`.** For a path nothing produced — a picture the model looked
+*    at, an image already in the tree — where the operator's declared roots are
+*    the right gate and the answer is legitimately "no" outside them.
+*
+* The cache is what makes this usable from a transcript row: rows re-render on
+* every streamed delta, and an uncached resolver would re-fetch the picture each
+* time. A refusal is cached too, so it costs one request rather than one per
+* render.
+*
+* Keyed by `fileId`-or-path so that a path which becomes produced *after* a
+* failed `/fs/read` is retried under a different key rather than staying cached
+* as a miss.
+*/
+function useHostImage(client, sessionId, producedFiles) {
+	const cache = useRef(/* @__PURE__ */ new Map());
+	const objectUrls = useRef([]);
+	useEffect(() => () => {
+		for (const url of objectUrls.current) URL.revokeObjectURL(url);
+		objectUrls.current = [];
+	}, []);
+	return useCallback((path) => {
+		const produced = producedFiles?.[path];
+		const key = produced ? `produced:${produced.fileId}` : `fs:${path}`;
+		const hit = cache.current.get(key);
+		if (hit) return hit;
+		const pending = produced && sessionId ? client.readProducedFile(sessionId, produced.fileId).then((blob) => {
+			if (blob.size === 0) return void 0;
+			const url = URL.createObjectURL(blob);
+			objectUrls.current.push(url);
+			return url;
+		}).catch(() => void 0) : client.readHostFile(path).then((file) => {
+			if (file.encoding !== "base64") return void 0;
+			const mediaType = IMAGE_MEDIA_TYPES[path.slice(path.lastIndexOf(".") + 1).toLowerCase()];
+			return mediaType ? `data:${mediaType};base64,${file.content}` : void 0;
+		}).catch(() => void 0);
+		cache.current.set(key, pending);
+		return pending;
+	}, [
+		client,
+		sessionId,
+		producedFiles
+	]);
+}
+/** Extensions worth rendering inline, and what to call them. Anything else is
+* left to the card's path text — guessing a media type is how an HTML file ends
+* up in an `<img>`. */
+const IMAGE_MEDIA_TYPES = {
+	png: "image/png",
+	jpg: "image/jpeg",
+	jpeg: "image/jpeg",
+	gif: "image/gif",
+	webp: "image/webp"
+};
+/** A dismissible advisory strip above the transcript. */
+function Notice({ level, onDismiss, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "px-3 pt-2",
+		children: /* @__PURE__ */ jsxs("div", {
+			role: "alert",
+			className: cn("mx-auto flex w-full max-w-3xl items-start gap-2 rounded-md border px-3 py-2 text-body-sm", level === "error" ? "border-danger/40 bg-danger-bg text-danger" : "border-warning/40 bg-warning-bg text-warning"),
+			children: [
+				/* @__PURE__ */ jsx(TriangleAlert, { className: "mt-0.5 size-3.5 shrink-0" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 break-words",
+					children
+				}),
+				onDismiss ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onDismiss,
+					"aria-label": "Dismiss",
+					className: "shrink-0 opacity-70 transition-opacity hover:opacity-100",
+					children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+				}) : null
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/agent/EditorTabs.tsx
+/**
+* The open-file tab strip.
+*
+* Hand-rolled rather than built on `@base-ui/react`'s `Tabs`: a VS Code tab
+* carries a close button, and a `<button>` inside a `<button>` is invalid HTML —
+* getting the primitive to render something else costs more than the roving
+* tabindex it would have provided. So that part is here, explicitly, along with
+* the two affordances that actually make a tab strip feel right: middle-click to
+* close, and the active tab scrolling itself into view.
+*
+* Deliberately state-free. Which files are open, which is focused and what
+* closing does are all decided by `useOpenFiles`.
+*/
+function EditorTabs({ files, activePath, onActivate, onClose, className }) {
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		delay: 500,
+		closeDelay: 0,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "editor-tabs",
+			role: "tablist",
+			"aria-label": "Open files",
+			className: cn("flex shrink-0 items-stretch overflow-x-auto border-b border-border bg-surface", className),
+			children: files.map((file) => /* @__PURE__ */ jsx(Tab, {
+				file,
+				active: file.path === activePath,
+				onActivate: () => onActivate(file.path),
+				onClose: () => onClose(file.path),
+				onArrow: (direction) => {
+					const next = files[files.findIndex((f) => f.path === file.path) + direction];
+					if (next) onActivate(next.path);
+				}
+			}, file.path))
+		})
+	});
+}
+function Tab({ file, active, onActivate, onClose, onArrow }) {
+	const dirty = isDirty(file);
+	const ref = useRef(null);
+	useEffect(() => {
+		if (active) ref.current?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [active]);
+	const onAuxClick = (event) => {
+		if (event.button !== 1) return;
+		event.preventDefault();
+		onClose();
+	};
+	return /* @__PURE__ */ jsxs(Tip, {
+		side: "bottom",
+		render: /* @__PURE__ */ jsx("div", {
+			ref,
+			role: "tab",
+			tabIndex: active ? 0 : -1,
+			"aria-selected": active,
+			onClick: onActivate,
+			onAuxClick,
+			onKeyDown: (event) => {
+				if (event.key === "ArrowRight") onArrow(1);
+				else if (event.key === "ArrowLeft") onArrow(-1);
+				else if (event.key === "Enter" || event.key === " ") onActivate();
+				else return;
+				event.preventDefault();
+			},
+			className: cn("group flex min-w-0 shrink-0 cursor-pointer items-center gap-1.5 border-r border-border px-3 py-1.5 transition-colors", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent focus-visible:ring-inset", active ? "bg-bg text-fg-1" : "text-fg-3 hover:bg-surface-hover hover:text-fg-2")
+		}),
+		content: /* @__PURE__ */ jsxs("span", {
+			className: "flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-mono break-all",
+				children: file.path
+			}), file.bytes !== void 0 ? /* @__PURE__ */ jsx("span", {
+				className: "text-fg-4",
+				children: formatBytes(file.bytes)
+			}) : null]
+		}),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("max-w-40 truncate font-mono text-label", dirty && "italic"),
+				children: file.name
+			}),
+			file.status === "error" ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-danger",
+				children: "!"
+			}) : null,
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-label": dirty ? `Close ${file.name} (unsaved changes)` : `Close ${file.name}`,
+				onClick: (event) => {
+					event.stopPropagation();
+					onClose();
+				},
+				className: cn("shrink-0 rounded p-0.5 text-fg-4 transition-opacity hover:bg-surface-hover hover:text-fg-1", active || dirty ? "opacity-70" : "opacity-0 group-hover:opacity-70 focus-visible:opacity-100"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("block", dirty && "group-hover:hidden"),
+					children: dirty ? /* @__PURE__ */ jsx("span", { className: "block size-3 rounded-full bg-fg-2" }) : /* @__PURE__ */ jsx(X, { className: "size-3" })
+				}), dirty ? /* @__PURE__ */ jsx("span", {
+					className: "hidden group-hover:block",
+					children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+				}) : null]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/agent/FileTree.tsx
+/** How far one level of nesting indents, in pixels. Inline rather than a Tailwind
+* class because depth is a number at runtime and `pl-${n}` is not a class. */
+const INDENT = 12;
+/**
+* The workspace's left rail: an expandable tree of the session's project,
+* with a search box over the same fuzzy route `@file` completion uses.
+*
+* Presentational by construction — every piece of state it renders comes from
+* the hooks in `@workerdeck/react`, and the only thing it owns is the search
+* query, which is the text in its own input.
+*
+* Searching replaces the tree with matches rather than filtering it: the route
+* answers with paths from all over the project, and threading those back into
+* tree positions would mean expanding a dozen directories to show six results.
+*/
+function FileTree({ tree, search, activePath, onOpenFile, onCollapse, style, className }) {
+	const [query, setQuery] = useState("");
+	const [matches, setMatches] = useState();
+	const searching = query.trim().length > 0;
+	useEffect(() => {
+		if (!search?.available) return;
+		const q = query.trim();
+		if (!q) {
+			setMatches(void 0);
+			return;
+		}
+		const controller = new AbortController();
+		const timer = setTimeout(() => {
+			search.search(q, {
+				limit: 60,
+				signal: controller.signal
+			}).then((found) => {
+				if (!controller.signal.aborted) setMatches(found);
+			});
+		}, 150);
+		return () => {
+			controller.abort();
+			clearTimeout(timer);
+		};
+	}, [search, query]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "file-tree",
+		style,
+		className: cn("flex min-h-0 min-w-0 flex-col bg-surface", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1 px-2 pt-2",
+			children: [
+				search?.available ? /* @__PURE__ */ jsxs("div", {
+					className: "relative min-w-0 flex-1",
+					children: [
+						/* @__PURE__ */ jsx(Search, { className: "absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-fg-4" }),
+						/* @__PURE__ */ jsx(Input, {
+							value: query,
+							onChange: (e) => setQuery(e.target.value),
+							placeholder: "Search files…",
+							className: "h-7 pr-7 pl-7 text-label",
+							spellCheck: false
+						}),
+						searching ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setQuery(""),
+							"aria-label": "Clear search",
+							className: "absolute top-1/2 right-1.5 -translate-y-1/2 text-fg-4 transition-colors hover:text-fg-2",
+							children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+						}) : null
+					]
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate px-1 font-mono text-label text-fg-4",
+					children: tree.root
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon-sm",
+					"aria-label": "Refresh the file tree",
+					onClick: () => tree.refresh(),
+					children: /* @__PURE__ */ jsx(RefreshCw, { className: "size-3.5 text-fg-3" })
+				}),
+				onCollapse ? /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon-sm",
+					"aria-label": "Hide project files",
+					onClick: onCollapse,
+					children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-3.5 text-fg-3" })
+				}) : null
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1 overflow-auto px-1 py-1",
+			children: tree.error ? /* @__PURE__ */ jsx("p", {
+				className: "px-2 py-3 text-body-sm text-danger",
+				children: tree.error
+			}) : searching ? matches === void 0 ? /* @__PURE__ */ jsx("div", {
+				className: "py-6 text-center",
+				children: /* @__PURE__ */ jsx(Spinner, { className: "size-4 text-fg-4" })
+			}) : matches.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "px-2 py-6 text-center text-body-sm text-fg-4",
+				children: "No matching files."
+			}) : /* @__PURE__ */ jsx("ul", { children: matches.map((match) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Row, {
+				label: fileName(match.relative),
+				detail: directoryOf(match.relative),
+				title: match.relative,
+				icon: /* @__PURE__ */ jsx(File, { className: "size-3.5 shrink-0 text-fg-4" }),
+				active: match.path === activePath,
+				onClick: () => onOpenFile(match.path)
+			}) }, match.path)) }) : tree.loading ? /* @__PURE__ */ jsx("div", {
+				className: "py-6 text-center",
+				children: /* @__PURE__ */ jsx(Spinner, { className: "size-4 text-fg-4" })
+			}) : tree.rows.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "px-2 py-6 text-center text-body-sm text-fg-4",
+				children: "This project is empty."
+			}) : /* @__PURE__ */ jsx("ul", {
+				role: "tree",
+				"aria-label": "Project files",
+				children: tree.rows.map((row) => /* @__PURE__ */ jsxs("li", {
+					role: "treeitem",
+					"aria-expanded": row.expanded,
+					"aria-level": row.depth + 1,
+					children: [/* @__PURE__ */ jsx(Row, {
+						label: row.entry.name,
+						indent: row.depth,
+						active: row.entry.path === activePath,
+						icon: row.entry.type === "dir" ? row.loading ? /* @__PURE__ */ jsx(Spinner, { className: "size-3.5 shrink-0 text-fg-4" }) : row.expanded ? /* @__PURE__ */ jsx(FolderOpen, { className: "size-3.5 shrink-0 text-accent" }) : /* @__PURE__ */ jsx(Folder, { className: "size-3.5 shrink-0 text-accent" }) : /* @__PURE__ */ jsx(EntryIcon, { type: row.entry.type }),
+						chevron: row.entry.type === "dir" ? /* @__PURE__ */ jsx(ChevronRight, { className: cn("size-3 shrink-0 text-fg-4 transition-transform", row.expanded && "rotate-90") }) : void 0,
+						onClick: () => row.entry.type === "dir" ? tree.toggle(row.entry.path) : onOpenFile(row.entry.path)
+					}), row.truncated ? /* @__PURE__ */ jsx("p", {
+						className: "truncate py-0.5 text-label text-fg-4",
+						style: { paddingLeft: (row.depth + 1) * INDENT + 22 },
+						children: "More entries than the server will return — use search."
+					}) : null]
+				}, row.entry.path))
+			})
+		})]
+	});
+}
+/** One clickable line. A directory and a file differ only in what the click does
+* and whether there is a chevron — visually they are the same row. */
+function Row({ label, detail, title, icon, chevron, indent = 0, active, onClick }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (active) ref.current?.scrollIntoView({ block: "nearest" });
+	}, [active]);
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: "button",
+		onClick,
+		title: title ?? label,
+		style: { paddingLeft: indent * INDENT + 4 },
+		className: cn("flex w-full items-center gap-1 rounded py-1 pr-2 text-left transition-colors", active ? "bg-surface-hover text-fg-1" : "text-fg-2 hover:bg-surface-hover"),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "flex size-3 shrink-0 items-center justify-center",
+				children: chevron
+			}),
+			icon,
+			/* @__PURE__ */ jsx("span", {
+				className: "shrink-0 truncate font-mono text-label",
+				children: label
+			}),
+			detail ? /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate font-mono text-label text-fg-4",
+				children: detail
+			}) : null
+		]
+	});
+}
+/** Last segment of a relative match. */
+function fileName(relative) {
+	return relative.slice(relative.lastIndexOf("/") + 1);
+}
+/** Everything before it, or `undefined` for a file at the search root. */
+function directoryOf(relative) {
+	const cut = relative.lastIndexOf("/");
+	return cut === -1 ? void 0 : relative.slice(0, cut);
+}
+/** A symlink is reported as itself and never silently resolved — following it is
+* the next request's problem, and that request is refused if it escapes the roots. */
+function EntryIcon({ type }) {
+	if (type === "symlink") return /* @__PURE__ */ jsx(Link2, { className: "size-3.5 shrink-0 text-fg-4" });
+	return /* @__PURE__ */ jsx(File, { className: "size-3.5 shrink-0 text-fg-4" });
+}
+//#endregion
+//#region src/components/agent/CodeEditor.tsx
+/**
+* Monaco — VS Code's own editor — behind a small React surface.
+*
+* Two deliberate choices, both about `@workerdeck/ui` being a **published
+* library** rather than an app:
+*
+* 1. **Loaded on demand.** The `import()` is inside an effect, so Monaco is a
+*    separate chunk that arrives when someone first opens a file. A dashboard
+*    that never opens one never pays for it, and Monaco's ~90 language grammars
+*    are themselves lazy (each `registerLanguage` carries an `import()` loader),
+*    so opening a `.ts` file fetches the TypeScript grammar and nothing else.
+* 2. **No `MonacoEnvironment` is configured here, and none is needed.** Workers
+*    in a library become every embedder's bootstrapping problem, and
+*    `packages/web` ships prebuilt static files at a domain root, which is
+*    exactly where hardcoded worker URLs break. The editor is configured so it
+*    never asks for one: `wordBasedSuggestions` and `quickSuggestions` off,
+*    no diff editor. A host that wants the worker-backed language services
+*    (TypeScript IntelliSense, JSON schema validation) sets `MonacoEnvironment`
+*    itself before the first file is opened — Monaco is a singleton and nothing
+*    here fights that.
+*
+* One model per path, kept across tab switches, so undo history and view state
+* survive clicking away and back — which is most of what makes tabs feel like
+* tabs rather than like re-opening a file.
+*/
+function CodeEditor({ path, value, onChange, onSave, readOnly, className }) {
+	const host = useRef(null);
+	const editor = useRef(null);
+	const monaco = useRef(null);
+	const [ready, setReady] = useState(false);
+	const theme = useDocumentTheme();
+	const handlers = useRef({
+		onChange,
+		onSave
+	});
+	handlers.current = {
+		onChange,
+		onSave
+	};
+	useEffect(() => {
+		let disposed = false;
+		loadMonaco().then((api) => {
+			if (disposed || !host.current) return;
+			monaco.current = api;
+			const instance = api.editor.create(host.current, {
+				value,
+				language: languageOf(path),
+				readOnly,
+				automaticLayout: true,
+				theme: monacoTheme(document.documentElement.getAttribute("data-theme")),
+				minimap: { enabled: false },
+				scrollBeyondLastLine: false,
+				fontSize: 12,
+				lineHeight: 20,
+				fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+				renderLineHighlight: "line",
+				smoothScrolling: true,
+				padding: {
+					top: 8,
+					bottom: 8
+				},
+				scrollbar: {
+					verticalScrollbarSize: 10,
+					horizontalScrollbarSize: 10
+				},
+				wordBasedSuggestions: "off",
+				quickSuggestions: false
+			});
+			editor.current = instance;
+			instance.onDidChangeModelContent(() => {
+				handlers.current.onChange?.(instance.getValue());
+			});
+			instance.addCommand(api.KeyMod.CtrlCmd | api.KeyCode.KeyS, () => {
+				handlers.current.onSave?.();
+			});
+			setReady(true);
+		});
+		return () => {
+			disposed = true;
+			editor.current?.dispose();
+			editor.current = null;
+			setReady(false);
+		};
+	}, []);
+	useEffect(() => {
+		const api = monaco.current;
+		const instance = editor.current;
+		if (!api || !instance || !ready) return;
+		const uri = api.Uri.parse(`workerdeck://host${path}`);
+		const model = api.editor.getModel(uri) ?? api.editor.createModel(value, languageOf(path), uri);
+		if (instance.getModel() !== model) instance.setModel(model);
+	}, [
+		path,
+		ready,
+		value
+	]);
+	useEffect(() => {
+		const instance = editor.current;
+		if (!instance || !ready) return;
+		const model = instance.getModel();
+		if (!model || model.getValue() === value) return;
+		model.pushEditOperations([], [{
+			range: model.getFullModelRange(),
+			text: value
+		}], () => null);
+	}, [value, ready]);
+	useEffect(() => {
+		if (ready) editor.current?.updateOptions({ readOnly });
+	}, [readOnly, ready]);
+	useEffect(() => {
+		if (ready) monaco.current?.editor.setTheme(monacoTheme(theme));
+	}, [theme, ready]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative min-h-0 min-w-0 flex-1", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: host,
+			className: "absolute inset-0"
+		}), !ready ? /* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 flex items-center justify-center bg-bg",
+			children: /* @__PURE__ */ jsx(Spinner, { className: "size-4 text-fg-4" })
+		}) : null]
+	});
+}
+/**
+* Follow the `data-theme` the design tokens already swap on, so the editor is
+* never the one light rectangle in a dark app (or the reverse). An attribute
+* observer rather than a media query: the app has a manual toggle, and the
+* attribute is what that toggle writes.
+*/
+function useDocumentTheme() {
+	const [theme, setTheme] = useState(() => typeof document === "undefined" ? null : document.documentElement.getAttribute("data-theme"));
+	useEffect(() => {
+		const root = document.documentElement;
+		const sync = () => setTheme(root.getAttribute("data-theme"));
+		sync();
+		const observer = new MutationObserver(sync);
+		observer.observe(root, {
+			attributes: true,
+			attributeFilter: ["data-theme"]
+		});
+		return () => observer.disconnect();
+	}, []);
+	return theme;
+}
+/** An unset attribute means the host never opted into the token themes, in which
+* case dark matches this package's default surface. */
+function monacoTheme(theme) {
+	return theme === "light" ? "wd-light" : "wd-dark";
+}
+/**
+* Load Monaco once, register the themes, and hand back the API.
+*
+* Cached as a promise rather than a value so that several editors mounting in
+* the same frame share one load instead of racing three of them.
+*/
+let monacoPromise;
+function loadMonaco() {
+	monacoPromise ??= (async () => {
+		const api = await import("monaco-editor");
+		api.editor.defineTheme("wd-dark", {
+			base: "vs-dark",
+			inherit: true,
+			rules: [],
+			colors: { "editor.background": "#00000000" }
+		});
+		api.editor.defineTheme("wd-light", {
+			base: "vs",
+			inherit: true,
+			rules: [],
+			colors: { "editor.background": "#00000000" }
+		});
+		return api;
+	})();
+	return monacoPromise;
+}
+/**
+* Monaco's language id for a path.
+*
+* By extension, with a short table for the files that have none — Monaco's own
+* registry is keyed on extensions it knows, and an unmatched file falls through
+* to `plaintext`, which is the honest answer rather than a guess.
+*/
+function languageOf(path) {
+	const name = path.slice(path.lastIndexOf("/") + 1);
+	const byName = FILENAME_LANGUAGES[name.toLowerCase()];
+	if (byName) return byName;
+	return EXTENSION_LANGUAGES[name.slice(name.lastIndexOf(".") + 1).toLowerCase()] ?? "plaintext";
+}
+/** Files whose type is their whole name. */
+const FILENAME_LANGUAGES = {
+	dockerfile: "dockerfile",
+	makefile: "plaintext",
+	".gitignore": "plaintext",
+	".env": "shell"
+};
+/** Extension → Monaco language id. Only where the id differs from the extension
+* or the extension is ambiguous; everything else Monaco resolves itself. */
+const EXTENSION_LANGUAGES = {
+	ts: "typescript",
+	tsx: "typescript",
+	mts: "typescript",
+	cts: "typescript",
+	js: "javascript",
+	jsx: "javascript",
+	mjs: "javascript",
+	cjs: "javascript",
+	json: "json",
+	jsonc: "json",
+	md: "markdown",
+	mdx: "markdown",
+	css: "css",
+	scss: "scss",
+	less: "less",
+	html: "html",
+	htm: "html",
+	xml: "xml",
+	svg: "xml",
+	yml: "yaml",
+	yaml: "yaml",
+	toml: "plaintext",
+	sh: "shell",
+	bash: "shell",
+	zsh: "shell",
+	fish: "shell",
+	py: "python",
+	rb: "ruby",
+	rs: "rust",
+	go: "go",
+	swift: "swift",
+	java: "java",
+	kt: "kotlin",
+	c: "c",
+	h: "c",
+	cpp: "cpp",
+	cc: "cpp",
+	hpp: "cpp",
+	cs: "csharp",
+	php: "php",
+	sql: "sql",
+	graphql: "graphql",
+	gql: "graphql",
+	lua: "lua",
+	r: "r",
+	pl: "perl",
+	dart: "dart",
+	scala: "scala",
+	ini: "ini",
+	cfg: "ini",
+	conf: "ini",
+	txt: "plaintext",
+	log: "plaintext"
+};
+//#endregion
+//#region src/components/agent/FileViewer.tsx
+/**
+* The focused file: Monaco, plus the states a file can be in that are not
+* "here is some text".
+*
+* No path row — the tab's tooltip carries the path and the size, and a line of
+* monospace above every file is chrome that never earns its height.
+*/
+function FileViewer({ file, canWrite, onChange, onSave, onRevert, onReload, onOverwrite, onDismissConflict, className }) {
+	if (!file) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "file-viewer",
+		className: cn("flex min-h-0 min-w-0 flex-1 flex-col bg-bg", className),
+		children: [
+			file.conflict ? /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 flex-wrap items-center gap-2 border-b border-warning/40 bg-warning-bg px-3 py-2",
+				children: [
+					/* @__PURE__ */ jsx(TriangleAlert, { className: "size-3.5 shrink-0 text-warning" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 text-body-sm text-warning",
+						children: "This file changed on disk since you opened it."
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "xs",
+						onClick: () => onReload?.(file.path),
+						children: "Use the version on disk"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "xs",
+						onClick: () => onOverwrite?.(file.path),
+						children: "Keep mine"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "xs",
+						onClick: () => onDismissConflict?.(file.path),
+						children: "Dismiss"
+					})
+				]
+			}) : file.saveError ? /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-2 border-b border-danger/40 bg-danger-bg px-3 py-2",
+				children: [
+					/* @__PURE__ */ jsx(TriangleAlert, { className: "size-3.5 shrink-0 text-danger" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 text-body-sm text-danger",
+						children: file.saveError
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "xs",
+						onClick: () => onDismissConflict?.(file.path),
+						children: "Dismiss"
+					})
+				]
+			}) : null,
+			file.status === "loading" ? /* @__PURE__ */ jsx(Centred, { children: /* @__PURE__ */ jsx(Spinner, { className: "size-4 text-fg-4" }) }) : file.status === "error" ? /* @__PURE__ */ jsxs(Centred, { children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "size-4 text-danger" }), /* @__PURE__ */ jsx("p", {
+				className: "text-body-sm text-danger",
+				children: file.error
+			})] }) : file.status === "binary" ? /* @__PURE__ */ jsxs(Centred, { children: [
+				/* @__PURE__ */ jsx(FileWarning, { className: "size-4 text-fg-4" }),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-body-sm text-fg-4",
+					children: "This file isn’t text."
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-label text-fg-4",
+					children: "It can’t be edited here without corrupting it."
+				})
+			] }) : /* @__PURE__ */ jsx(CodeEditor, {
+				path: file.path,
+				value: currentText(file),
+				readOnly: !canWrite,
+				onChange: onChange ? (content) => onChange(file.path, content) : void 0,
+				onSave: onSave ? () => onSave(file.path) : void 0
+			}),
+			file.status === "ready" && (file.saving || isDirty(file) || !canWrite) ? /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-2 border-t border-border px-3 py-1",
+				children: file.saving ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3 text-fg-4" }), /* @__PURE__ */ jsx("span", {
+					className: "text-label text-fg-4",
+					children: "Saving…"
+				})] }) : !canWrite ? /* @__PURE__ */ jsx("span", {
+					className: "text-label text-fg-4",
+					children: "Read-only — this gateway doesn’t allow writes."
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-label text-fg-3",
+						children: "Unsaved changes"
+					}),
+					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "xs",
+						onClick: () => onRevert?.(file.path),
+						children: "Revert"
+					}),
+					/* @__PURE__ */ jsxs(Button, {
+						variant: "outline",
+						size: "xs",
+						onClick: () => onSave?.(file.path),
+						children: ["Save", /* @__PURE__ */ jsx("span", {
+							className: "ml-1 text-fg-4",
+							children: "⌘S"
+						})]
+					})
+				] })
+			}) : null
+		]
+	});
+}
+function Centred({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-0 flex-1 flex-col items-center justify-center gap-2 p-6",
+		children
+	});
+}
+//#endregion
+//#region src/components/agent/SessionWorkspace.tsx
+const RAIL_MIN = 180;
+const RAIL_MAX = 520;
+/** How little of the agent column the editor may leave. Below this the composer
+* and a line of transcript stop fitting together, which is the point at which the
+* agent has stopped being usable rather than merely small. */
+const AGENT_MIN = 220;
+const EDITOR_MIN = 120;
+/**
+* A VS Code-shaped workspace around a live session: file tree on the left, open
+* files above, the agent below.
+*
+* **Strictly additive.** {@link SessionPanel} is untouched and still the whole
+* session surface on its own — an embedder picks one or the other, and one that
+* has its own file tree keeps using the panel.
+*
+* Two things here are load-bearing and easy to break:
+*
+* 1. **The editor region is absent from the layout when nothing is open**, not
+*    collapsed to zero height. A zero-height pane leaves a draggable splitter and
+*    parks the composer at an odd offset; absence is what makes the agent's
+*    "claims the full column" state actually look like the panel alone.
+* 2. **`SessionPanel` keeps its position in the tree across that transition.** It
+*    holds the WebSocket attach and the entire transcript, so moving it between
+*    parents — or wrapping it conditionally — would remount it and drop the
+*    session's rendered history on the floor the first time someone opens a file.
+*    The conditional children before it are `? :` expressions that leave a null in
+*    their slot, which is exactly what keeps its index stable.
+*/
+function SessionWorkspace({ client, sessionId, header, defaultRailWidth = 260, defaultRailCollapsed, className }) {
+	const { info } = useSessionInfo(client, sessionId);
+	const cwd = info?.cwd;
+	const tree = useHostFileTree(client, cwd);
+	const search = useHostFileSearch(client, cwd);
+	const files = useOpenFiles(client);
+	const { canWrite } = useHostFileRoots(client);
+	useEffect(() => {
+		if (!files.hasUnsaved) return;
+		const warn = (event) => event.preventDefault();
+		window.addEventListener("beforeunload", warn);
+		return () => window.removeEventListener("beforeunload", warn);
+	}, [files.hasUnsaved]);
+	const wide = useIsWide();
+	const [railCollapsed, setRailCollapsed] = useState(defaultRailCollapsed ?? false);
+	const [railWidth, setRailWidth] = useState(defaultRailWidth);
+	const [editorHeight, setEditorHeight] = useState(360);
+	const hasFiles = files.files.length > 0;
+	const overlayRail = !wide;
+	const railOpen = tree.available && !railCollapsed;
+	useEffect(() => {
+		if (overlayRail) setRailCollapsed(true);
+	}, [overlayRail]);
+	const closeTab = useCallback((path) => {
+		const file = files.files.find((f) => f.path === path);
+		if (file && isDirty(file)) {
+			const name = file.name;
+			if (!window.confirm(`${name} has unsaved changes. Close it and lose them?`)) return;
+		}
+		files.close(path);
+	}, [files]);
+	const column = useRef(null);
+	const columnHeight = useElementHeight(column);
+	const editorMax = Math.max(EDITOR_MIN, columnHeight - AGENT_MIN);
+	const [topBar, setTopBar] = useState(null);
+	const hoisted = header === void 0 || topBar === null ? void 0 : typeof header === "function" ? (slots) => createPortal(header(slots), topBar) : createPortal(header, topBar);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "session-workspace",
+		className: cn("flex h-full min-h-0 w-full flex-col overflow-hidden bg-bg", className),
+		children: [header !== void 0 ? /* @__PURE__ */ jsx("div", {
+			ref: setTopBar,
+			className: "shrink-0"
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: "relative flex min-h-0 flex-1",
+			children: [
+				railOpen ? /* @__PURE__ */ jsx(FileTree, {
+					tree,
+					search,
+					activePath: files.activePath,
+					onOpenFile: files.open,
+					onCollapse: () => setRailCollapsed(true),
+					style: { width: overlayRail ? Math.min(railWidth, 320) : railWidth },
+					className: cn("shrink-0 border-r border-border", overlayRail && "absolute inset-y-0 left-0 z-20 shadow-lg")
+				}) : tree.available ? /* @__PURE__ */ jsx("div", {
+					className: "flex w-8 shrink-0 flex-col items-center border-r border-border bg-surface pt-1.5",
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": "Show project files",
+						onClick: () => setRailCollapsed(false),
+						children: /* @__PURE__ */ jsx(PanelLeftOpen, { className: "size-4 text-fg-3" })
+					})
+				}) : null,
+				railOpen && !overlayRail ? /* @__PURE__ */ jsx(Splitter, {
+					orientation: "vertical",
+					value: railWidth,
+					onValueChange: setRailWidth,
+					min: RAIL_MIN,
+					max: RAIL_MAX,
+					"aria-label": "Resize the file tree"
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					ref: column,
+					className: "flex min-h-0 min-w-0 flex-1 flex-col",
+					children: [
+						hasFiles ? /* @__PURE__ */ jsxs("div", {
+							className: "flex min-h-0 shrink-0 flex-col overflow-hidden",
+							style: { height: Math.min(editorHeight, editorMax || editorHeight) },
+							children: [/* @__PURE__ */ jsx(EditorTabs, {
+								files: files.files,
+								activePath: files.activePath,
+								onActivate: files.activate,
+								onClose: closeTab
+							}), /* @__PURE__ */ jsx(FileViewer, {
+								file: files.active,
+								canWrite,
+								onChange: files.edit,
+								onSave: (path) => void files.save(path),
+								onRevert: files.revert,
+								onReload: files.reload,
+								onOverwrite: (path) => void files.overwrite(path),
+								onDismissConflict: files.dismissConflict
+							})]
+						}) : null,
+						hasFiles ? /* @__PURE__ */ jsx(Splitter, {
+							orientation: "horizontal",
+							value: Math.min(editorHeight, editorMax || editorHeight),
+							onValueChange: setEditorHeight,
+							min: EDITOR_MIN,
+							max: editorMax,
+							"aria-label": "Resize the open file"
+						}) : null,
+						/* @__PURE__ */ jsx(SessionPanel, {
+							client,
+							sessionId,
+							header: hoisted,
+							className: "min-h-0 flex-1"
+						})
+					]
+				}),
+				overlayRail && railOpen ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Close the file tree",
+					onClick: () => setRailCollapsed(true),
+					className: "absolute inset-0 z-10 bg-black/30"
+				}) : null
+			]
+		})]
+	});
+}
+/** Live height of an element, for a splitter that needs to know how much room it
+* is dividing. Zero until the first observation, which callers treat as
+* "unmeasured" rather than as a real bound. */
+function useElementHeight(ref) {
+	const [height, setHeight] = useState(0);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const observer = new ResizeObserver(([entry]) => {
+			if (entry) setHeight(entry.contentRect.height);
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [ref]);
+	return height;
+}
+/** Whether there is room for a rail beside the content. Presentation only — the
+* workspace's actual state lives in the hooks from `@workerdeck/react`. */
+function useIsWide() {
+	const [wide, setWide] = useState(true);
+	useEffect(() => {
+		const query = window.matchMedia("(min-width: 768px)");
+		const sync = () => setWide(query.matches);
+		sync();
+		query.addEventListener("change", sync);
+		return () => query.removeEventListener("change", sync);
+	}, []);
+	return wide;
+}
 //#endregion
 //#region src/components/agent/SessionList.tsx
 function SessionListItem({ session, active, onSelect, onDelete }) {
@@ -5231,6 +8151,6 @@ function SessionList({ sessions, activeId, onSelect, onDelete, emptyText = "No s
 	});
 }
 //#endregion
-export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, Button, Card, CardContent, CardHeader, CardTitle, CodeBlock, Composer, Conversation, ConversationContent, ConversationScrollButton, CopyButton, FileCard, Input, Loader, Message, MessageContent, ModelSelect, PERMISSION_MODES, PermissionModeSelect, PermissionPrompt, ProgressRing, PromptArea, QUESTION_BEHAVIORS, QuestionPrompt, Reasoning, Response, STATUS_META, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionList, SessionListItem, SessionPanel, Spinner, StatusBar, Textarea, Tip, Toaster, ToolCallCard, TooltipContent, TooltipProvider, Transcript, badgeVariants, buttonVariants, cn, commandTrigger, formatBytes, formatCost, formatCountdown, formatDuration, formatRelativeTime, formatTokens, getChipsByTrigger, hashtagTrigger, isSegmentsEmpty, mentionTrigger, parseUserQuestions, plainTextToSegments, segmentsToPlainText, toast, toolInputPreview, usePromptAreaState };
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, Button, Card, CardContent, CardHeader, CardTitle, CodeBlock, CodeEditor, Composer, ContextDialog, Conversation, ConversationContent, ConversationScrollButton, CopyButton, Dialog, DialogBody, DialogClose, DialogContent, DialogHeader, DialogRow, DialogTrigger, EditorTabs, FileCard, FileTree, FileViewer, HostFilesDialog, Input, Loader, McpDialog, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Message, MessageContent, ModelSelect, PERMISSION_MODES, PermissionModeSelect, PermissionPrompt, ProgressRing, PromptArea, PromptTokenText, QUESTION_BEHAVIORS, QuestionPrompt, Reasoning, Response, STATUS_META, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionEmptyState, SessionInfoDialog, SessionList, SessionListItem, SessionPanel, SessionWorkspace, SkillsDialog, Spinner, Splitter, StatusBar, Textarea, Tip, Toaster, ToolCallCard, TooltipContent, TooltipProvider, Transcript, UsageDialog, badgeVariants, buttonVariants, cn, commandTrigger, copyText, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, getChipsByTrigger, hashtagTrigger, isSegmentsEmpty, mentionTrigger, parseUserQuestions, permissionModeMeta, plainTextToSegments, rateLimitWindowSeconds, segmentsToPlainText, skillPrompt, toast, toolIcon, toolInputPreview, usePromptAreaState };
 
 //# sourceMappingURL=index.mjs.map