@workerdeck/ui 0.12.0 → 0.15.0

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

@@ -102,7 +102,7 @@ function Badge({ className, variant = "neutral", mono, dot, children, ...props }
 		...props,
 		children: [dot ? /* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
-			className: "size-1.5 rounded-full bg-current"
+			className: "size-1.5 shrink-0 self-center rounded-full bg-current"
 		}) : null, children]
 	});
 }
@@ -134,7 +134,7 @@ const SelectContent = ({ className, align = "start", alignItemWithTrigger = fals
 	alignItemWithTrigger,
 	side,
 	sideOffset,
-	className: "isolate z-60 outline-none",
+	className: "isolate z-80 outline-none",
 	children: /* @__PURE__ */ jsx(Select.Popup, {
 		"data-slot": "select-content",
 		className: cn("max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto", "rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none", className),
@@ -161,7 +161,7 @@ const MenuContent = ({ className, align = "end", side = "bottom", sideOffset = 6
 	align,
 	side,
 	sideOffset,
-	className: "isolate z-60 outline-none",
+	className: "isolate z-80 outline-none",
 	children: /* @__PURE__ */ jsx(Menu.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),
@@ -239,7 +239,7 @@ const TooltipProvider = Tooltip.Provider;
 const TooltipContent = ({ className, side = "top", sideOffset = 6, ...props }) => /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
 	side,
 	sideOffset,
-	className: "isolate z-60",
+	className: "isolate z-90",
 	children: /* @__PURE__ */ jsx(Tooltip.Popup, {
 		"data-slot": "tooltip-content",
 		className: cn("rounded-md border border-border bg-surface px-2 py-1 text-label text-fg-2 shadow-(--shadow-md) outline-none", className),
@@ -401,7 +401,7 @@ function CodeBlock({ code, label, copyable = true, variant = "panel", className
 * 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 }) {
+function Splitter({ orientation, value, onValueChange, min, max, step = 16, defaultValue, 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]);
@@ -425,6 +425,9 @@ function Splitter({ orientation, value, onValueChange, min, max, step = 16, inve
 		drag.current = null;
 		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
 	};
+	const onDoubleClick = () => {
+		if (defaultValue !== void 0) onValueChange(clamp(defaultValue));
+	};
 	const onKeyDown = (event) => {
 		const grow = vertical ? "ArrowRight" : "ArrowDown";
 		const shrink = vertical ? "ArrowLeft" : "ArrowUp";
@@ -449,6 +452,7 @@ function Splitter({ orientation, value, onValueChange, min, max, step = 16, inve
 		onPointerMove,
 		onPointerUp: endDrag,
 		onPointerCancel: endDrag,
+		onDoubleClick,
 		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", {
@@ -4280,6 +4284,78 @@ function hashtagTrigger(opts = {}) {
 	};
 }
 //#endregion
+//#region src/components/agent/transcript-variant.tsx
+const VariantContext = createContext("cards");
+function TranscriptVariantProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(VariantContext.Provider, {
+		value,
+		children
+	});
+}
+function useTranscriptVariant() {
+	return useContext(VariantContext);
+}
+/** True in `lines`, for the many `cond ? a : b` reads in the row components. */
+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 —
+* the row's own text says what it is.
+*/
+function LineGlyph({ children, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: cn("w-3.5 shrink-0 select-none text-center font-mono text-label leading-5 text-fg-4", className),
+		children
+	});
+}
+/** Body text metrics for a line item — tighter than the card variant's. */
+const LINE_TEXT = "text-body-sm leading-5";
+//#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, "");
@@ -4332,6 +4408,7 @@ function matchScore(query, haystacks) {
 */
 function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message the agent…", commands, skills, onSearchFiles, attachments, toolbar, layout = "stacked", className, ref }) {
 	const inline = layout === "inline";
+	const lines = useLines();
 	const { bind, plainText, isEmpty, clear, focus } = usePromptAreaState();
 	const fileInput = useRef(null);
 	const [dragging, setDragging] = useState(false);
@@ -4457,7 +4534,7 @@ function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message
 			e.target.value = "";
 		}
 	}) : null;
-	const attach = !!attachments && !attachments.disabled ? /* @__PURE__ */ jsxs(Fragment$1, { children: [fileField, inline ? /* @__PURE__ */ jsx(GlyphButton, {
+	const attach = !!attachments && !attachments.disabled ? /* @__PURE__ */ jsxs(Fragment$1, { children: [fileField, lines ? /* @__PURE__ */ jsx(GlyphButton, {
 		label: "Attach files",
 		disabled,
 		onClick: () => fileInput.current?.click(),
@@ -4471,7 +4548,7 @@ function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message
 		children: /* @__PURE__ */ jsx(Paperclip, { className: "size-4" })
 	})] }) : null;
 	const interrupting = busy && !canSend;
-	const submitButton = inline ? /* @__PURE__ */ jsx(GlyphButton, {
+	const submitButton = lines ? /* @__PURE__ */ jsx(GlyphButton, {
 		label: interrupting ? "Interrupt" : "Send",
 		disabled: !interrupting && !canSend,
 		onClick: interrupting ? onInterrupt : submit,
@@ -4492,24 +4569,81 @@ function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message
 		onClick: submit,
 		children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" })
 	});
+	const dropHandlers = {
+		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);
+		}
+	};
+	const errorRow = attachments?.error ? /* @__PURE__ */ jsxs("div", {
+		className: cn("mx-auto mt-1 flex w-full max-w-[var(--wd-content-max-w,48rem)] items-center gap-2 text-label text-danger", lines && "px-2"),
+		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" })
+			})
+		]
+	}) : null;
+	if (lines) return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "composer",
+		className: cn("shrink-0", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			...dropHandlers,
+			className: cn("flex min-h-[38px] flex-col justify-center", "border-t border-border bg-bg transition-colors", "focus-within:border-t-accent", dragging && "border-t-accent", disabled && "opacity-60"),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "mx-auto w-full max-w-[var(--wd-content-max-w,48rem)] px-2 py-1",
+				children: [
+					staged.length > 0 && attachments ? /* @__PURE__ */ jsx(AttachmentStrip, { attachments }) : null,
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-end gap-1",
+						children: [
+							attach,
+							/* @__PURE__ */ jsx(PromptArea, {
+								...bind,
+								triggers,
+								onSubmit: submit,
+								disabled,
+								placeholder: disabled ? "Session ended" : placeholder,
+								minHeight: 20,
+								maxHeight: 192,
+								"aria-label": "Message the agent",
+								className: "min-w-0 flex-1 py-0.5 text-body-sm text-text",
+								onImagePaste: (file) => attachments?.add([file])
+							}),
+							submitButton
+						]
+					}),
+					toolbar ? /* @__PURE__ */ jsx("div", {
+						className: "flex min-w-0 items-center gap-1 pt-1",
+						children: toolbar
+					}) : null
+				]
+			})
+		}), errorRow]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "composer",
 		className: cn("px-3 pb-3", className),
 		children: [/* @__PURE__ */ jsxs("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-[var(--wd-content-max-w,48rem)] 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"),
+			...dropHandlers,
+			className: cn("mx-auto w-full max-w-[var(--wd-content-max-w,48rem)] overflow-hidden border border-border bg-bg", "transition-colors rounded-lg shadow-(--shadow-xs)", "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30", dragging && "border-ring ring-2 ring-ring/30", disabled && "opacity-60"),
 			children: [staged.length > 0 && attachments ? /* @__PURE__ */ jsx(AttachmentStrip, { attachments }) : null, inline ? /* @__PURE__ */ jsxs("div", {
 				className: "flex items-end gap-1 p-1",
 				children: [
@@ -4546,27 +4680,7 @@ function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message
 					children: [attach, toolbar]
 				}), submitButton]
 			})] })]
-		}), attachments?.error ? /* @__PURE__ */ jsxs("div", {
-			className: "mx-auto mt-1 flex w-full max-w-[var(--wd-content-max-w,48rem)] 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", {
-			"data-slot": "composer-hint",
-			className: "mx-auto mt-1 w-full max-w-[var(--wd-content-max-w,48rem)] text-center text-label text-fg-4",
-			children: "Enter to send · Shift+Enter for a new line"
-		})]
+		}), errorRow]
 	});
 }
 /**
@@ -5557,78 +5671,6 @@ function isMutatingTool(toolName) {
 	}
 }
 //#endregion
-//#region src/components/agent/transcript-variant.tsx
-const VariantContext = createContext("cards");
-function TranscriptVariantProvider({ value, children }) {
-	return /* @__PURE__ */ jsx(VariantContext.Provider, {
-		value,
-		children
-	});
-}
-function useTranscriptVariant() {
-	return useContext(VariantContext);
-}
-/** True in `lines`, for the many `cond ? a : b` reads in the row components. */
-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 —
-* the row's own text says what it is.
-*/
-function LineGlyph({ children, className }) {
-	return /* @__PURE__ */ jsx("span", {
-		"aria-hidden": true,
-		className: cn("w-3.5 shrink-0 select-none text-center font-mono text-label leading-5 text-fg-4", className),
-		children
-	});
-}
-/** Body text metrics for a line item — tighter than the card variant's. */
-const LINE_TEXT = "text-body-sm leading-5";
-//#endregion
 //#region src/components/agent/Response.tsx
 /**
 * Markdown on a terminal's grid.
@@ -5801,7 +5843,7 @@ function LineOptionList({ options, focused, onFocus, onChoose, active = true, la
 					className: cn("flex w-full items-baseline gap-2 text-left outline-none", isFocused ? "bg-surface-hover" : "hover:bg-surface-hover/60"),
 					children: [
 						/* @__PURE__ */ jsx(LineGlyph, {
-							className: isFocused ? "text-accent" : void 0,
+							className: isFocused ? "text-fg-1" : void 0,
 							children: isFocused ? "❯" : " "
 						}),
 						/* @__PURE__ */ jsx("span", {
@@ -5841,7 +5883,7 @@ function LineInput({ value, onChange, onSubmit, onCancel, placeholder }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-baseline gap-2",
 		children: [/* @__PURE__ */ jsx(LineGlyph, {
-			className: "text-accent",
+			className: "text-fg-3",
 			children: "›"
 		}), /* @__PURE__ */ jsx("input", {
 			autoFocus: true,
@@ -6259,7 +6301,7 @@ function QuestionPrompt({ request, onAnswer, onDismiss, className }) {
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "flex items-baseline gap-2",
 							children: [/* @__PURE__ */ jsx(LineGlyph, {
-								className: "text-info",
+								className: "text-fg-3",
 								children: "?"
 							}), /* @__PURE__ */ jsxs("span", {
 								className: "min-w-0 flex-1 text-body-sm leading-5 text-fg-1",
@@ -6683,14 +6725,17 @@ function RateLimitMeter({ label, info, now }) {
 			]
 		}),
 		children: /* @__PURE__ */ jsxs("span", {
-			className: cn("inline-flex cursor-default items-center gap-1 font-mono text-label", info.status === "rejected" ? "text-danger" : utilizationColor(pct ?? 0)),
+			className: cn("cursor-default font-mono text-label whitespace-nowrap", info.status === "rejected" ? "text-danger" : utilizationColor(pct ?? 0)),
 			children: [
-				/* @__PURE__ */ jsx(ProgressRing, { value: pct ?? 0 }),
+				/* @__PURE__ */ jsx(ProgressRing, {
+					value: pct ?? 0,
+					className: "mr-1 inline-block align-middle"
+				}),
 				label,
 				pct !== void 0 ? ` ${pct.toFixed(0)}%` : "",
 				resetsAtMs !== void 0 ? /* @__PURE__ */ jsxs("span", {
 					className: "text-fg-4",
-					children: ["· ", formatCountdown(resetsAtMs, now)]
+					children: [" · ", formatCountdown(resetsAtMs, now)]
 				}) : null
 			]
 		})
@@ -6704,11 +6749,11 @@ function Slot({ onClick, hint, children }) {
 		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",
+		className: "rounded-md py-0.5 leading-4 transition-colors outline-none hover:bg-surface-hover focus-visible:bg-surface-hover",
 		children
 	});
 }
-function StatusBar({ state, connected, connection, onOpenStatus, onOpenContext, onOpenUsage, actions, className }) {
+function StatusBar({ state, connected, connection, onOpenStatus, onOpenContext, onOpenUsage, controls, actions, placement = "top", className }) {
 	const meta = STATUS_META[state.status];
 	const now = useNow();
 	const session = state.rateLimits?.five_hour;
@@ -6716,7 +6761,7 @@ function StatusBar({ state, connected, connection, onOpenStatus, onOpenContext,
 	const link = connection ?? (connected === false ? "reconnecting" : "live");
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "status-bar",
-		className: cn("flex items-center gap-2 border-b border-border bg-surface px-3 py-1.5", className),
+		className: cn("flex h-[38px] items-baseline gap-2 border-border bg-surface p-1.5", placement === "bottom" ? "border-t" : "border-b", className),
 		children: [
 			/* @__PURE__ */ jsx(Slot, {
 				onClick: onOpenStatus,
@@ -6724,11 +6769,13 @@ function StatusBar({ state, connected, connection, onOpenStatus, onOpenContext,
 				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]
+					className: "items-baseline",
+					children: [meta.busy ? /* @__PURE__ */ jsx(Spinner, { className: "size-3 self-center 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…"]
+					className: "items-baseline",
+					children: [link === "offline" ? /* @__PURE__ */ jsx(WifiOff, { className: "size-3 self-center text-current" }) : /* @__PURE__ */ jsx(RefreshCw, { className: "size-3 animate-spin self-center text-current" }), link === "offline" ? "Offline" : "Reconnecting…"]
 				})
 			}),
 			state.capabilities.contextUsage && state.contextUsage ? /* @__PURE__ */ jsx(Slot, {
@@ -6740,7 +6787,7 @@ function StatusBar({ state, connected, connection, onOpenStatus, onOpenContext,
 				onClick: onOpenUsage,
 				hint: "Plan usage",
 				children: /* @__PURE__ */ jsxs("span", {
-					className: "inline-flex items-center gap-2",
+					className: "inline-flex items-baseline gap-2",
 					children: [session ? /* @__PURE__ */ jsx(RateLimitMeter, {
 						label: "Session",
 						info: session,
@@ -6752,6 +6799,7 @@ function StatusBar({ state, connected, connection, onOpenStatus, onOpenContext,
 					}) : null]
 				})
 			}) : null,
+			controls,
 			/* @__PURE__ */ jsx("span", { className: "flex-1" }),
 			/* @__PURE__ */ jsx("span", {
 				className: "font-mono text-label text-fg-3",
@@ -6975,7 +7023,7 @@ function Loader({ label, startedAt, tokens, className }) {
 		"data-slot": "loader",
 		className: cn("flex items-baseline gap-2", className),
 		children: [/* @__PURE__ */ jsx(LineGlyph, {
-			className: "text-accent",
+			className: lines ? "text-fg-3" : "text-accent",
 			children: pulse
 		}), /* @__PURE__ */ jsxs("span", {
 			className: "min-w-0 flex-1 text-body-sm leading-5 text-fg-3",
@@ -7000,9 +7048,12 @@ function Loader({ label, startedAt, tokens, className }) {
 /**
 * One chat turn row.
 *
-* `cards`: user messages sit right in a bubble; assistant content is flat,
-* full-width (the AI-chat convention — assistant output is the page, user input
-* is quoted).
+* `cards`: user messages sit in a bubble, assistant content is flat and
+* full-width. Both are **left-aligned**: the transcript is a log read top to
+* bottom, and an editor-shaped host (a full-width session view beside a sessions
+* rail) has no right edge to anchor to — a bubble drifting right in a 1600px
+* column separates a prompt from the reply it produced. The bubble alone is
+* enough to say who spoke.
 *
 * `lines`: both are left-aligned full-width line items behind a gutter glyph —
 * `❯` for what was typed, `●` for what the model said. No bubble: a prompt is
@@ -7014,7 +7065,7 @@ function Message({ from, className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "message",
 		"data-from": from,
-		className: cn("flex w-full", lines ? cn("flex-row gap-2", from === "user" && "-mx-1 rounded-sm bg-surface px-1") : cn("flex-col gap-1", from === "user" ? "items-end" : "items-start"), className),
+		className: cn("flex w-full", lines ? cn("flex-row gap-2", from === "user" && "-mx-1 rounded-sm bg-surface px-1") : "flex-col items-start gap-1", className),
 		...props,
 		children: lines ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LineGlyph, {
 			className: from === "user" ? "text-accent" : "text-fg-3",
@@ -7028,7 +7079,7 @@ function Message({ from, className, children, ...props }) {
 function MessageContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "message-content",
-		className: cn("min-w-0", useLines() ? cn("w-full text-fg-1", LINE_TEXT, "in-data-[from=user]:whitespace-pre-wrap") : cn("text-body-sm leading-6 text-fg-1", "in-data-[from=user]:max-w-[85%] in-data-[from=user]:rounded-lg in-data-[from=user]:rounded-br-sm", "in-data-[from=user]:bg-accent-bg in-data-[from=user]:px-3 in-data-[from=user]:py-2", "in-data-[from=user]:whitespace-pre-wrap", "in-data-[from=assistant]:w-full"), className),
+		className: cn("min-w-0", useLines() ? cn("w-full text-fg-1", LINE_TEXT, "in-data-[from=user]:whitespace-pre-wrap") : cn("text-body-sm leading-6 text-fg-1", "in-data-[from=user]:max-w-[85%] in-data-[from=user]:rounded-lg in-data-[from=user]:rounded-bl-sm", "in-data-[from=user]:bg-accent-bg in-data-[from=user]:px-3 in-data-[from=user]:py-2", "in-data-[from=user]:whitespace-pre-wrap", "in-data-[from=assistant]:w-full"), className),
 		...props
 	});
 }
@@ -7614,7 +7665,7 @@ function RecapRow({ line, since }) {
 		"data-slot": "recap",
 		className: "flex items-baseline gap-2 py-0.5",
 		children: [/* @__PURE__ */ jsx(LineGlyph, {
-			className: "text-accent",
+			className: "text-fg-3",
 			children: "※"
 		}), /* @__PURE__ */ jsxs("span", {
 			className: "min-w-0 flex-1 text-label leading-5 text-fg-3",
@@ -7710,7 +7761,7 @@ function showLoader(state) {
 * References only — the bytes are fetched from the gateway. */
 function SentAttachments({ attachments, attachmentUrl }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("mb-1 flex flex-wrap gap-1.5", useLines() ? "justify-start" : "justify-end"),
+		className: "mb-1 flex flex-wrap justify-start gap-1.5",
 		children: attachments.map((attachment) => {
 			const href = attachmentUrl?.(attachment.id);
 			return attachment.mediaType.startsWith("image/") && href ? /* @__PURE__ */ jsx("img", {
@@ -8052,10 +8103,11 @@ 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", transcriptDensity = "comfortable", controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, className }) {
+function SessionPanel({ client, sessionId, header, panelSurface = "internal", statusSurface = "internal", statusPlacement = "top", onOpenPanel, onVitals, transcriptVariant = "cards", transcriptDensity = "comfortable", transcriptFont = "sans", controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, readOnly = false, toolHost, className }) {
 	const external = panelSurface === "external";
 	const statusExternal = statusSurface === "external";
-	const controlsExternal = controlsSurface === "external";
+	const controlsInStatus = controlsSurface === "status" && !statusExternal;
+	const controlsExternal = controlsSurface === "external" || controlsInStatus;
 	const [protocolError, setProtocolError] = useState(void 0);
 	const [panel, setPanel] = useState();
 	const { state, connection, protocolMismatch, models, effectiveModel, handle, send, approve, deny, interrupt, setModel, setPermissionMode, reconnectNow } = useClaudeSession(client, sessionId, { onProtocolError: setProtocolError });
@@ -8078,7 +8130,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 		document.addEventListener("visibilitychange", onVisible);
 		return () => document.removeEventListener("visibilitychange", onVisible);
 	}, [reconnectNow]);
-	useToolCallHost(handle);
+	useToolCallHost(handle, toolHost === false ? { enabled: false } : toolHost);
 	const capabilities = state.capabilities;
 	const onVitalsRef = useRef(onVitals);
 	onVitalsRef.current = onVitals;
@@ -8204,8 +8256,32 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 	] })] });
 	const menu = external ? null : actionsMenu;
 	const headerTakesActions = typeof header === "function";
+	const sessionControls = /* @__PURE__ */ jsxs(Fragment$1, { children: [models.length ? /* @__PURE__ */ jsx(ModelSelect, {
+		models,
+		model: effectiveModel,
+		onModelChange: setModel,
+		disabled: ended,
+		className: controlsInStatus ? "h-5" : void 0
+	}) : null, state.permissionMode ? /* @__PURE__ */ jsx(PermissionModeSelect, {
+		mode: state.permissionMode,
+		onModeChange: setPermissionMode,
+		modes: capabilities.permissionModes,
+		canBypass: state.session?.canBypassPermissions,
+		disabled: ended,
+		className: controlsInStatus ? "h-5" : void 0
+	}) : null] });
+	const statusBar = statusExternal ? null : /* @__PURE__ */ jsx(StatusBar, {
+		state,
+		connection,
+		placement: statusPlacement,
+		controls: controlsInStatus && !readOnly ? sessionControls : void 0,
+		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
+	});
 	const handleClick = (event) => {
-		if (!focusComposerOnClick) return;
+		if (!focusComposerOnClick || readOnly) return;
 		if (event.target?.closest(INTERACTIVE)) return;
 		if (window.getSelection()?.isCollapsed === false) return;
 		composerRef.current?.focus();
@@ -8216,18 +8292,12 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 			value: transcriptDensity,
 			children: /* @__PURE__ */ jsxs("div", {
 				"data-slot": "session-panel",
+				"data-agent-font": transcriptFont,
 				onClick: handleClick,
 				className: cn("flex h-full min-h-0 flex-col overflow-hidden bg-bg", className),
 				children: [
 					headerTakesActions ? header({ actions: menu }) : header,
-					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
-					}),
+					statusPlacement === "top" ? statusBar : null,
 					protocolMismatch !== void 0 ? /* @__PURE__ */ jsxs(Notice, {
 						level: "warning",
 						children: [
@@ -8265,7 +8335,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 							children: [
 								/* @__PURE__ */ jsx("span", {
 									"aria-hidden": true,
-									className: "select-none text-accent",
+									className: cn("select-none", transcriptVariant === "lines" ? "text-fg-3" : "text-accent"),
 									children: "※"
 								}),
 								/* @__PURE__ */ jsxs("span", {
@@ -8292,7 +8362,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 							]
 						})
 					}) : null,
-					capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? /* @__PURE__ */ jsx("div", {
+					!readOnly && 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",
@@ -8307,7 +8377,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 							}, request.id))
 						})
 					}) : null,
-					/* @__PURE__ */ jsx(Composer, {
+					readOnly ? null : /* @__PURE__ */ jsx(Composer, {
 						ref: composerRef,
 						onSend: handleSend,
 						onInterrupt: interrupt,
@@ -8321,19 +8391,9 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 							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] })
+						toolbar: controlsExternal ? void 0 : sessionControls
 					}),
+					statusPlacement === "bottom" ? statusBar : null,
 					!external ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 						/* @__PURE__ */ jsx(SessionInfoDialog, {
 							state,
@@ -8469,6 +8529,6 @@ function Notice({ level, onDismiss, children }) {
 	});
 }
 //#endregion
-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 };
+export { Tip as $, SkillsDialog as A, commandTrigger as B, isMutatingTool as C, Button as Ct, permissionModeChoices as D, PermissionModeSelect as E, skillPrompt as F, plainTextToSegments as G, mentionTrigger as H, TranscriptDensityProvider as I, Splitter as J, segmentsToPlainText as K, TranscriptVariantProvider as L, HostFilesDialog as M, ContextDialog as N, permissionModeMeta as O, Composer as P, copyText as Q, useTranscriptDensity as R, Response as S, badgeVariants as St, PERMISSION_MODES 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, McpDialog as j, ModelSelect 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, toolIcon as w, buttonVariants as wt, PermissionPrompt as x, Badge as xt, QuestionPrompt as y, SelectValue as yt, useTranscriptVariant as z };
 
-//# sourceMappingURL=SessionPanel-NQ8ksCfj.mjs.map
+//# sourceMappingURL=SessionPanel-DI1NO4l8.mjs.map