@workerdeck/ui 0.13.0 → 0.15.0

package/README.md

@@ -150,3 +150,22 @@ lose by forgetting a second mount isn't one.
   `2h 10m`) with no React in the graph — for a host that renders session readings outside
   React, like an extension host drawing them into a window status bar, and wants them spelled
   exactly as the panel spells them.
+
+## Rules you cannot infer from the types
+
+- **Remount `SessionPanel` by key when the session id changes**, and never let its position in the
+  tree change otherwise: a remount drops the WebSocket attach and the whole transcript. That is why
+  the workspace keeps the panel's child index across the editor appearing and disappearing.
+- **The panel owns the session's one attach.** External chrome reads live values through
+  `onVitals` and changes them through `onControls`; opening a second attach to render a status bar
+  means the tool bridge may ask the wrong client.
+- **`transcriptVariant` and `transcriptDensity` ride context, not props.** A row component composed
+  by hand still gets the right treatment; restyling `data-slot`s from outside is not the seam.
+- **`statusSurface: 'external'` takes the `⋯` menu's only home with it.** Combining it with
+  `panelSurface: 'internal'` needs a *function* `header` to receive the menu, or those panels
+  become unreachable.
+- **Keep `monaco-editor` unreachable from `src/index.ts`.** Tree-shaking does not cover it: Vite
+  resolves Monaco's worker `new URL(...)`s while *transforming* the module, before shaking, and
+  emits megabytes of worker assets it never retracts. That is what the `/workspace` entry point is
+  for, and why Vite hosts need `optimizeDeps: { exclude: ['monaco-editor'] }`.
+

package/build/{SessionPanel-CKQa4i0Y.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]
 	});
 }
@@ -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", {
@@ -4530,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(),
@@ -4544,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,
@@ -4565,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 border border-border bg-bg", "transition-colors", lines ? "rounded-sm focus-within:border-accent" : cn("rounded-lg shadow-(--shadow-xs)", "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30"), dragging && (lines ? "border-accent" : "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: [
@@ -4619,23 +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" })
-				})
-			]
-		}) : null]
+		}), errorRow]
 	});
 }
 /**
@@ -6680,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
 			]
 		})
@@ -6701,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, placement = "top", 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;
@@ -6713,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-border bg-surface px-3 py-1.5", placement === "bottom" ? "border-t" : "border-b", 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,
@@ -6721,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, {
@@ -6737,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,
@@ -6749,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",
@@ -7017,7 +7068,7 @@ function Message({ from, className, children, ...props }) {
 		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-fg-2" : "text-fg-3",
+			className: from === "user" ? "text-accent" : "text-fg-3",
 			children: from === "user" ? "❯" : "●"
 		}), /* @__PURE__ */ jsx("div", {
 			className: "flex min-w-0 flex-1 flex-col gap-1",
@@ -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", statusPlacement = "top", onOpenPanel, onVitals, transcriptVariant = "cards", transcriptDensity = "comfortable", controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, readOnly = false, 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,10 +8256,25 @@ 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"),
@@ -8225,6 +8292,7 @@ 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: [
@@ -8323,18 +8391,7 @@ 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: [
@@ -8474,4 +8531,4 @@ function Notice({ level, onDismiss, children }) {
 //#endregion
 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-CKQa4i0Y.mjs.map
+//# sourceMappingURL=SessionPanel-DI1NO4l8.mjs.map