@workerdeck/ui 0.11.0 → 0.12.0

package/build/{SessionPanel-_U8tjX29.mjs → SessionPanel-NQ8ksCfj.mjs}

@@ -5572,6 +5572,48 @@ function useTranscriptVariant() {
 function useLines() {
 	return useTranscriptVariant() === "lines";
 }
+const DensityContext = createContext("comfortable");
+function TranscriptDensityProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(DensityContext.Provider, {
+		value,
+		children
+	});
+}
+function useTranscriptDensity() {
+	return useContext(DensityContext);
+}
+/**
+* The gap between two rows, per variant and density — the whole of the density
+* feature, since it is the only vertical spacing between rows that exists.
+*
+* `className` goes on the **measured** wrapper (see `Transcript`), so the gap is
+* part of each row's measured height and no pixel constant is load-bearing.
+* `px` is fed to `estimateSize` alone, where being approximate is the contract:
+* it sets the scrollbar's length before rows mount and is replaced by a real
+* measurement the moment one does.
+*
+* `lines` + `compact` is the only combination with no gap at all: there the
+* row's own `py-0.5` is the entire separation, which is what makes it compact.
+*/
+const ROW_GAP = {
+	cards: {
+		comfortable: {
+			className: "pt-4",
+			px: 16
+		},
+		compact: {
+			className: "pt-2",
+			px: 8
+		}
+	},
+	lines: {
+		comfortable: {
+			className: "pt-4",
+			px: 16
+		},
+		compact: { px: 0 }
+	}
+};
 /**
 * The left gutter of a line item: one glyph, fixed width, so every row's text
 * starts on the same column no matter which kind of event it is. Decorative —
@@ -6818,27 +6860,68 @@ function FileCard({ item, href, className }) {
 	});
 }
 //#endregion
-//#region src/components/agent/Loader.tsx
+//#region src/components/agent/pulse.tsx
 /**
-* The frames of the working marker, and the rate they turn over.
+* The brand mark's pulse, as characters — the working marker every surface in the
+* transcript animates.
 *
-* A four-pointed star growing and shrinking — it reads as *activity* at a glance
-* without any of the pixel-fitting a braille or block spinner needs, and it is
-* the same shape a terminal agent uses because a terminal is where this
-* vocabulary comes from. ~8fps: fast enough to be alive, slow enough not to
-* strobe next to streaming text.
+* These are the mark's own four states (`docs/assets/BRAND.md`, "The loading
+* state"): a dot, an outline, a semi and a full diamond, built in the SVG from
+* two shapes rather than four drawings. 150ms each, so one cycle is the 0.6s
+* clock the marker pulses on in `icon-loading.svg` — the same rhythm, in the
+* medium a transcript row actually has.
+*
+* BRAND.md's caveat applies and is satisfied here: `U+25C6/7/8` are East-Asian
+* *ambiguous width*, so they can render double-width in a terminal under an
+* East-Asian locale and shift every line with them. They are safe wherever the
+* glyph is centred in a fixed-width box, which is what `LineGlyph` is. Anything
+* writing to a real terminal must use the ASCII set instead.
 */
-const FRAMES = [
-	"✢",
-	"✳",
-	"✶",
-	"✻",
-	"✽",
-	"✻",
-	"✶",
-	"✳"
+const PULSE_FRAMES = [
+	"⋄",
+	"◇",
+	"◈",
+	"◆"
 ];
-const FRAME_MS = 120;
+/**
+* The resting state. Stopping the animation lands on the complete mark rather
+* than on a half-drawn frame — the same property that makes the SVG's
+* `prefers-reduced-motion` free (see BRAND.md: `translateY(0)` *is* the mark).
+*/
+const PULSE_REST = PULSE_FRAMES[PULSE_FRAMES.length - 1];
+/** The OS-level "stop moving things" setting. A spinner is decoration — the word
+* beside it carries the meaning — so honouring this costs nothing. */
+function usePrefersReducedMotion() {
+	const [reduced, setReduced] = useState(false);
+	useEffect(() => {
+		const query = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+		if (!query) return;
+		setReduced(query.matches);
+		const onChange = () => setReduced(query.matches);
+		query.addEventListener("change", onChange);
+		return () => query.removeEventListener("change", onChange);
+	}, []);
+	return reduced;
+}
+/**
+* The current pulse frame, ticking while `animated`. Callers mount this only
+* while something is actually in flight, so nothing here runs on an idle
+* session; with reduced motion, or when not animating, it holds at rest.
+*/
+function usePulse(animated) {
+	const reduced = usePrefersReducedMotion();
+	const running = animated && !reduced;
+	const [frame, setFrame] = useState(0);
+	useEffect(() => {
+		if (!running) return;
+		const timer = setInterval(() => setFrame((f) => f + 1), 150);
+		return () => clearInterval(timer);
+	}, [running]);
+	if (!running) return PULSE_REST;
+	return PULSE_FRAMES[frame % PULSE_FRAMES.length];
+}
+//#endregion
+//#region src/components/agent/Loader.tsx
 /**
 * What it says it is doing while it hasn't said anything yet. Cycled on a slow
 * clock so a long turn doesn't sit under one frozen word — a still label reads
@@ -6859,42 +6942,17 @@ const VERBS = [
 	"Noodling"
 ];
 const VERB_MS = 4e3;
-/** Ticks while mounted, at the spinner's rate. Mounted only while a turn is in
-* flight, so nothing here runs on an idle session. */
-function useFrames(animated) {
-	const [frame, setFrame] = useState(0);
-	useEffect(() => {
-		if (!animated) return;
-		const timer = setInterval(() => setFrame((f) => f + 1), FRAME_MS);
-		return () => clearInterval(timer);
-	}, [animated]);
-	return frame;
-}
-/** The OS-level "stop moving things" setting. A spinner is decoration; the word
-* beside it carries the meaning, so honouring this costs nothing. */
-function usePrefersReducedMotion() {
-	const [reduced, setReduced] = useState(false);
-	useEffect(() => {
-		const query = window.matchMedia?.("(prefers-reduced-motion: reduce)");
-		if (!query) return;
-		setReduced(query.matches);
-		const onChange = () => setReduced(query.matches);
-		query.addEventListener("change", onChange);
-		return () => query.removeEventListener("change", onChange);
-	}, []);
-	return reduced;
-}
 /**
 * "The agent is working and hasn't produced output yet."
 *
-* `lines`: a terminal working line — animated glyph in the gutter, a verb, and
-* the readings that answer "should I still be waiting?" in one parenthesis.
-* `cards`: the three-dot pulse, unchanged.
+* `lines`: a terminal working line — the mark's own pulse in the gutter (see
+* `pulse.tsx`), a verb, and the readings that answer "should I still be
+* waiting?" in one parenthesis. `cards`: the three-dot pulse, unchanged — the
+* dashboard's loader is not a gutter glyph and has no column to pulse in.
 */
 function Loader({ label, startedAt, tokens, className }) {
 	const lines = useLines();
-	const reducedMotion = usePrefersReducedMotion();
-	const frame = useFrames(lines && !reducedMotion);
+	const pulse = usePulse(lines);
 	if (!lines) return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "loader",
 		className: cn("flex items-center gap-2 py-1 text-body-sm text-fg-4", className),
@@ -6918,7 +6976,7 @@ function Loader({ label, startedAt, tokens, className }) {
 		className: cn("flex items-baseline gap-2", className),
 		children: [/* @__PURE__ */ jsx(LineGlyph, {
 			className: "text-accent",
-			children: FRAMES[frame % FRAMES.length]
+			children: pulse
 		}), /* @__PURE__ */ jsxs("span", {
 			className: "min-w-0 flex-1 text-body-sm leading-5 text-fg-3",
 			children: [
@@ -7229,6 +7287,7 @@ function ToolCallCard({ item, hostImage, className }) {
 	const status = item.status ?? (item.result === void 0 ? "running" : "settled");
 	const badge = STATE_BADGE[status];
 	const isError = status === "failed" || item.result?.isError === true;
+	const pulse = usePulse(lines && badge.busy);
 	const Icon = toolIcon(item.name);
 	const resultText = item.result?.text ?? "";
 	const truncated = !fullResult && resultText.length > RESULT_PREVIEW_CHARS;
@@ -7284,7 +7343,7 @@ function ToolCallCard({ item, hostImage, className }) {
 				children: [
 					/* @__PURE__ */ jsx(LineGlyph, {
 						className: status === "settled" && !isError && isMutatingTool(item.name) ? "text-success" : STATE_GLYPH[status],
-						children: badge.busy ? "◐" : "●"
+						children: badge.busy ? pulse : "●"
 					}),
 					/* @__PURE__ */ jsxs("span", {
 						className: "min-w-0 flex-1 truncate text-body-sm leading-5 text-fg-3",
@@ -7304,7 +7363,6 @@ function ToolCallCard({ item, hostImage, className }) {
 						className: "shrink-0 text-label text-fg-4",
 						children: item.backend
 					}) : null,
-					badge.busy ? /* @__PURE__ */ jsx(Spinner, { className: "size-3 shrink-0 self-center text-fg-4" }) : null,
 					status === "deferred" ? /* @__PURE__ */ jsx(Clock, { className: "size-3 shrink-0 self-center text-fg-4" }) : null,
 					isError && !badge.busy ? /* @__PURE__ */ jsx("span", {
 						className: "shrink-0 text-label text-danger",
@@ -7707,7 +7765,7 @@ function nestedClass(item, lines) {
 * transient UI state (an expanded tool card, an opened reasoning block) resets
 * once the row scrolls far enough away to unmount.
 */
-function TranscriptRows({ rows, boundary, since, lines, fileUrl, attachmentUrl, hostImage, jumpToRecapRef }) {
+function TranscriptRows({ rows, boundary, since, lines, gap, fileUrl, attachmentUrl, hostImage, jumpToRecapRef }) {
 	const stick = useStickToBottomContext();
 	const [scrollElement, setScrollElement] = useState(null);
 	useEffect(() => {
@@ -7719,7 +7777,7 @@ function TranscriptRows({ rows, boundary, since, lines, fileUrl, attachmentUrl,
 			if (scrollElement && virtualizer.scrollElement !== scrollElement) virtualizer.scrollOffset = scrollElement.scrollTop;
 			return scrollElement;
 		},
-		estimateSize: () => lines ? 32 : 100,
+		estimateSize: () => (lines ? 32 : 100) + gap.px,
 		overscan: 8,
 		getItemKey: (index) => rows[index].key,
 		useFlushSync: true
@@ -7769,7 +7827,7 @@ function TranscriptRows({ rows, boundary, since, lines, fileUrl, attachmentUrl,
 			return /* @__PURE__ */ jsx("div", {
 				ref: virtualizer.measureElement,
 				"data-index": virtualRow.index,
-				className: cn("absolute inset-x-0 top-0", !lines && virtualRow.index > 0 && "pt-4"),
+				className: cn("absolute inset-x-0 top-0", virtualRow.index > 0 && gap.className),
 				style: { transform: `translateY(${virtualRow.start}px)` },
 				children: "item" in row ? /* @__PURE__ */ jsx("div", {
 					className: cn(lines && "-mx-1 rounded-sm px-1 py-0.5 transition-colors hover:bg-surface-hover", boundary !== void 0 && row.index < boundary && "opacity-45", nestedClass(row.item, lines)),
@@ -7787,8 +7845,9 @@ function TranscriptRows({ rows, boundary, since, lines, fileUrl, attachmentUrl,
 		})
 	});
 }
-function Transcript({ state, fileUrl, attachmentUrl, canBrowseFiles, hostImage, variant = "cards", catchUp, jumpToRecapRef, className }) {
+function Transcript({ state, fileUrl, attachmentUrl, canBrowseFiles, hostImage, variant = "cards", density = "comfortable", catchUp, jumpToRecapRef, className }) {
 	const lines = variant === "lines";
+	const gap = ROW_GAP[variant][density];
 	const runStartedAt = useRunStart(state.status);
 	const following = useSettled(state.items.length, state.status);
 	const boundary = catchUp && catchUp.from > 0 && catchUp.from < state.items.length ? catchUp.from : void 0;
@@ -7829,6 +7888,7 @@ function Transcript({ state, fileUrl, attachmentUrl, canBrowseFiles, hostImage,
 					boundary,
 					since: catchUp?.since,
 					lines,
+					gap,
 					fileUrl,
 					attachmentUrl,
 					hostImage,
@@ -7992,7 +8052,7 @@ const INTERACTIVE = [
 * the engine name — an absent capability hides the control instead of offering
 * one that can only fail.
 */
-function SessionPanel({ client, sessionId, header, panelSurface = "internal", statusSurface = "internal", onOpenPanel, onVitals, transcriptVariant = "cards", controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, className }) {
+function SessionPanel({ client, sessionId, header, panelSurface = "internal", statusSurface = "internal", onOpenPanel, onVitals, transcriptVariant = "cards", transcriptDensity = "comfortable", controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, className }) {
 	const external = panelSurface === "external";
 	const statusExternal = statusSurface === "external";
 	const controlsExternal = controlsSurface === "external";
@@ -8068,7 +8128,8 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 	const controls = useRef({
 		setModel: (model) => setters.current.setModel(model),
 		setPermissionMode: (mode) => setters.current.setPermissionMode(mode),
-		interrupt: () => setters.current.interrupt()
+		interrupt: () => setters.current.interrupt(),
+		focusComposer: () => composerRef.current?.focus()
 	});
 	useEffect(() => {
 		const handler = onControlsRef.current;
@@ -8151,168 +8212,172 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 	};
 	return /* @__PURE__ */ jsx(TranscriptVariantProvider, {
 		value: transcriptVariant,
-		children: /* @__PURE__ */ jsxs("div", {
-			"data-slot": "session-panel",
-			onClick: handleClick,
-			className: cn("flex h-full min-h-0 flex-col overflow-hidden bg-bg", className),
-			children: [
-				headerTakesActions ? header({ actions: menu }) : header,
-				statusExternal ? null : /* @__PURE__ */ jsx(StatusBar, {
-					state,
-					connection,
-					onOpenStatus: external && !onOpenPanel ? void 0 : () => openPanel("info"),
-					onOpenContext: external && !onOpenPanel ? void 0 : () => openPanel("context"),
-					onOpenUsage: external && !onOpenPanel ? void 0 : () => openPanel("usage"),
-					actions: headerTakesActions ? void 0 : menu
-				}),
-				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,
-					attachmentUrl: sessionId ? (id) => client.attachmentUrl(sessionId, id) : void 0,
-					canBrowseFiles: hostFiles.available,
-					hostImage,
-					variant: transcriptVariant,
-					catchUp: catchUp && newCount > 0 ? {
-						from: catchUp.itemCount,
-						since: catchUp.since
-					} : void 0,
-					jumpToRecapRef: jumpToRecap
-				}),
-				catchUp && newCount > 0 ? /* @__PURE__ */ jsx("div", {
-					className: "px-3 pb-1",
-					children: /* @__PURE__ */ jsxs("div", {
-						"data-slot": "catch-up",
-						className: "mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] items-center gap-2 text-label text-fg-3",
+		children: /* @__PURE__ */ jsx(TranscriptDensityProvider, {
+			value: transcriptDensity,
+			children: /* @__PURE__ */ jsxs("div", {
+				"data-slot": "session-panel",
+				onClick: handleClick,
+				className: cn("flex h-full min-h-0 flex-col overflow-hidden bg-bg", className),
+				children: [
+					headerTakesActions ? header({ actions: menu }) : header,
+					statusExternal ? null : /* @__PURE__ */ jsx(StatusBar, {
+						state,
+						connection,
+						onOpenStatus: external && !onOpenPanel ? void 0 : () => openPanel("info"),
+						onOpenContext: external && !onOpenPanel ? void 0 : () => openPanel("context"),
+						onOpenUsage: external && !onOpenPanel ? void 0 : () => openPanel("usage"),
+						actions: headerTakesActions ? void 0 : menu
+					}),
+					protocolMismatch !== void 0 ? /* @__PURE__ */ jsxs(Notice, {
+						level: "warning",
 						children: [
-							/* @__PURE__ */ jsx("span", {
-								"aria-hidden": true,
-								className: "select-none text-accent",
-								children: "※"
-							}),
-							/* @__PURE__ */ jsxs("span", {
-								className: "min-w-0 flex-1 truncate",
-								children: [
-									newCount,
-									" new ",
-									newCount === 1 ? "row" : "rows",
-									catchUp.since !== void 0 ? ` since you were last here` : ""
-								]
-							}),
-							/* @__PURE__ */ jsx("button", {
-								type: "button",
-								onClick: () => jumpToRecap.current?.(),
-								className: "shrink-0 underline-offset-2 hover:text-fg-1 hover:underline",
-								children: "jump"
-							}),
-							/* @__PURE__ */ jsx("button", {
-								type: "button",
-								onClick: () => setCaughtUp(true),
-								className: "shrink-0 underline-offset-2 hover:text-fg-1 hover:underline",
-								children: "dismiss"
-							})
+							"Server speaks protocol v",
+							protocolMismatch,
+							", this build renders v",
+							PROTOCOL_VERSION,
+							". Some events may not render."
 						]
-					})
-				}) : null,
-				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-[var(--wd-content-max-w,48rem)] flex-col gap-2",
-						children: state.pendingApprovals.map((request) => request.toolName === "AskUserQuestion" && parseUserQuestions(request.input).length > 0 ? /* @__PURE__ */ jsx(QuestionPrompt, {
-							request,
-							onAnswer: approve,
-							onDismiss: (id) => deny(id, "Question dismissed by user")
-						}, request.id) : /* @__PURE__ */ jsx(PermissionPrompt, {
-							request,
-							onApprove: approve,
-							onDeny: deny
-						}, request.id))
-					})
-				}) : null,
-				/* @__PURE__ */ jsx(Composer, {
-					ref: composerRef,
-					onSend: handleSend,
-					onInterrupt: interrupt,
-					busy,
-					disabled: ended || !sessionId,
-					commands: capabilities.slashCommands ? commands : void 0,
-					skills: capabilities.skillsList ? state.skills : void 0,
-					attachments,
-					onSearchFiles: hostFiles.available ? (query, options) => hostFiles.search(query, {
-						...options,
-						limit: 8
-					}) : void 0,
-					layout: controlsExternal ? "inline" : "stacked",
-					toolbar: controlsExternal ? void 0 : /* @__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: capabilities.permissionModes,
-						canBypass: state.session?.canBypassPermissions,
-						disabled: ended
-					}) : null] })
-				}),
-				!external ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx(SessionInfoDialog, {
+					}) : null,
+					protocolError ? /* @__PURE__ */ jsx(Notice, {
+						level: "error",
+						onDismiss: () => setProtocolError(void 0),
+						children: protocolError
+					}) : null,
+					/* @__PURE__ */ jsx(Transcript, {
 						state,
-						client,
-						sessionId,
-						open: panel === "info",
-						onOpenChange: (next) => setPanel(next ? "info" : void 0)
+						fileUrl: sessionId ? (path) => client.sessionFileUrl(sessionId, path) : void 0,
+						attachmentUrl: sessionId ? (id) => client.attachmentUrl(sessionId, id) : void 0,
+						canBrowseFiles: hostFiles.available,
+						hostImage,
+						variant: transcriptVariant,
+						density: transcriptDensity,
+						catchUp: catchUp && newCount > 0 ? {
+							from: catchUp.itemCount,
+							since: catchUp.since
+						} : void 0,
+						jumpToRecapRef: jumpToRecap
 					}),
-					/* @__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))
+					catchUp && newCount > 0 ? /* @__PURE__ */ jsx("div", {
+						className: "px-3 pb-1",
+						children: /* @__PURE__ */ jsxs("div", {
+							"data-slot": "catch-up",
+							className: "mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] items-center gap-2 text-label text-fg-3",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									"aria-hidden": true,
+									className: "select-none text-accent",
+									children: "※"
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "min-w-0 flex-1 truncate",
+									children: [
+										newCount,
+										" new ",
+										newCount === 1 ? "row" : "rows",
+										catchUp.since !== void 0 ? ` since you were last here` : ""
+									]
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => jumpToRecap.current?.(),
+									className: "shrink-0 underline-offset-2 hover:text-fg-1 hover:underline",
+									children: "jump"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => setCaughtUp(true),
+									className: "shrink-0 underline-offset-2 hover:text-fg-1 hover:underline",
+									children: "dismiss"
+								})
+							]
+						})
+					}) : null,
+					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-[var(--wd-content-max-w,48rem)] flex-col gap-2",
+							children: state.pendingApprovals.map((request) => request.toolName === "AskUserQuestion" && parseUserQuestions(request.input).length > 0 ? /* @__PURE__ */ jsx(QuestionPrompt, {
+								request,
+								onAnswer: approve,
+								onDismiss: (id) => deny(id, "Question dismissed by user")
+							}, request.id) : /* @__PURE__ */ jsx(PermissionPrompt, {
+								request,
+								onApprove: approve,
+								onDeny: deny
+							}, request.id))
+						})
+					}) : null,
+					/* @__PURE__ */ jsx(Composer, {
+						ref: composerRef,
+						onSend: handleSend,
+						onInterrupt: interrupt,
+						busy,
+						disabled: ended || !sessionId,
+						commands: capabilities.slashCommands ? commands : void 0,
+						skills: capabilities.skillsList ? state.skills : void 0,
+						attachments,
+						onSearchFiles: hostFiles.available ? (query, options) => hostFiles.search(query, {
+							...options,
+							limit: 8
+						}) : void 0,
+						layout: controlsExternal ? "inline" : "stacked",
+						toolbar: controlsExternal ? void 0 : /* @__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: capabilities.permissionModes,
+							canBypass: state.session?.canBypassPermissions,
+							disabled: ended
+						}) : null] })
 					}),
-					/* @__PURE__ */ jsx(HostFilesDialog, {
-						client,
-						cwd: state.cwd,
-						open: panel === "files",
-						onOpenChange: (next) => setPanel(next ? "files" : void 0)
-					})
-				] }) : null
-			]
+					!external ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx(SessionInfoDialog, {
+							state,
+							client,
+							sessionId,
+							open: panel === "info",
+							onOpenChange: (next) => setPanel(next ? "info" : void 0)
+						}),
+						/* @__PURE__ */ jsx(ContextDialog, {
+							usage: state.contextUsage,
+							open: panel === "context",
+							onOpenChange: (next) => setPanel(next ? "context" : void 0)
+						}),
+						/* @__PURE__ */ jsx(UsageDialog, {
+							rateLimits: windows,
+							subscriptionType: state.subscriptionType,
+							engine: state.engine ?? "claude",
+							totalCostUsd: state.totalCostUsd,
+							updatedAt: 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)
+						})
+					] }) : null
+				]
+			})
 		})
 	});
 }
@@ -8404,6 +8469,6 @@ function Notice({ level, onDismiss, children }) {
 	});
 }
 //#endregion
-export { TooltipProvider as $, permissionModeMeta as A, mentionTrigger as B, TranscriptVariantProvider as C, cn as Ct, PERMISSION_MODES as D, toolIcon as E, ContextDialog as F, ProgressRing as G, PromptArea as H, Composer as I, Spinner as J, Splitter as K, skillPrompt as L, SkillsDialog as M, McpDialog as N, PermissionModeSelect as O, HostFilesDialog as P, TooltipContent as Q, commandTrigger as R, Response as S, buttonVariants as St, isMutatingTool as T, plainTextToSegments as U, usePromptAreaState as V, segmentsToPlainText as W, copyText as X, CopyButton as Y, Tip as Z, SessionInfoDialog as _, SelectValue as _t, SessionEmptyState as a, DialogRow as at, parseUserQuestions as b, badgeVariants as bt, Message as c, MenuContent as ct, FileCard as d, MenuTrigger as dt, Dialog$1 as et, Conversation as f, Select$1 as ft, STATUS_META as g, SelectTrigger as gt, StatusBar as h, SelectItemText as ht, ToolCallCard as i, DialogHeader as it, ModelSelect as j, permissionModeChoices as k, MessageContent as l, MenuItem as lt, ConversationScrollButton as m, SelectItem as mt, UsageDialog as n, DialogClose as nt, Reasoning as o, DialogTrigger as ot, ConversationContent as p, SelectContent as pt, CodeBlock as q, Transcript as r, DialogContent as rt, PromptTokenText as s, Menu$1 as st, SessionPanel as t, DialogBody as tt, Loader as u, MenuSeparator as ut, QUESTION_BEHAVIORS as v, Input as vt, useTranscriptVariant as w, PermissionPrompt as x, Button as xt, QuestionPrompt as y, Badge as yt, hashtagTrigger as z };
+export { Tip as $, PermissionModeSelect as A, commandTrigger as B, TranscriptDensityProvider as C, Button as Ct, isMutatingTool as D, useTranscriptVariant as E, McpDialog as F, plainTextToSegments as G, mentionTrigger as H, HostFilesDialog as I, Splitter as J, segmentsToPlainText as K, ContextDialog as L, permissionModeMeta as M, ModelSelect as N, toolIcon as O, SkillsDialog as P, copyText as Q, Composer as R, Response as S, badgeVariants as St, useTranscriptDensity as T, cn as Tt, usePromptAreaState as U, hashtagTrigger as V, PromptArea as W, Spinner as X, CodeBlock as Y, CopyButton as Z, SessionInfoDialog as _, SelectItemText as _t, SessionEmptyState as a, DialogContent as at, parseUserQuestions as b, Input as bt, Message as c, DialogTrigger as ct, FileCard as d, MenuItem as dt, TooltipContent as et, Conversation as f, MenuSeparator as ft, STATUS_META as g, SelectItem as gt, StatusBar as h, SelectContent as ht, ToolCallCard as i, DialogClose as it, permissionModeChoices as j, PERMISSION_MODES as k, MessageContent as l, Menu$1 as lt, ConversationScrollButton as m, Select$1 as mt, UsageDialog as n, Dialog$1 as nt, Reasoning as o, DialogHeader as ot, ConversationContent as p, MenuTrigger as pt, ProgressRing as q, Transcript as r, DialogBody as rt, PromptTokenText as s, DialogRow as st, SessionPanel as t, TooltipProvider as tt, Loader as u, MenuContent as ut, QUESTION_BEHAVIORS as v, SelectTrigger as vt, TranscriptVariantProvider as w, buttonVariants as wt, PermissionPrompt as x, Badge as xt, QuestionPrompt as y, SelectValue as yt, skillPrompt as z };
 
-//# sourceMappingURL=SessionPanel-_U8tjX29.mjs.map
+//# sourceMappingURL=SessionPanel-NQ8ksCfj.mjs.map