@workerdeck/ui 0.22.0 → 0.23.0

package/build/{SessionPanel-13l25ubU.d.mts → SessionPanel-BobynUo4.d.mts}

@@ -2,6 +2,7 @@ import * as _$react from "react";
 import { ReactNode } from "react";
 import { LucideIcon } from "lucide-react";
 import { ModelOption, PermissionMode } from "@workerdeck/protocol";
+import * as _$_workerdeck_react0 from "@workerdeck/react";
 import { ConnectionState, TranscriptState, UseToolCallHostOptions } from "@workerdeck/react";
 import { WorkerDeckClient } from "@workerdeck/client";
 
@@ -511,6 +512,62 @@ interface SessionPanelProps {
    * "`>_` Tell the agent what to do." placeholder.
    */
   emptyState?: ReactNode;
+  /**
+   * Called when a link in the transcript is clicked. The embedder decides what
+   * happens: navigate in-app, open a browser tab, show a confirmation, or
+   * suppress.
+   *
+   * Return `true` (or a truthy value) to indicate the click was handled — the
+   * default action (`window.open(href, '_blank')`) is suppressed. Return
+   * `false` / `undefined` / nothing to let the browser open the link normally.
+   *
+   * Absent means "browser default" — links open in a new tab as Streamdown's
+   * `target="_blank"` intends. VS Code's webview overrides this through its own
+   * native handler (the "allow once / add to allowlist" dialog) and does not
+   * need this prop.
+   *
+   * **Typical embedder patterns:**
+   * - Relative URLs → in-app navigation, no confirmation
+   * - External URLs → confirmation dialog, or open unconditionally
+   * - Suppress all links → `() => true`
+   */
+  onLinkClick?: (href: string) => boolean | void;
+  /**
+   * Client-side tool handlers. Each key is a tool name the model can call; the
+   * handler receives the model's input and returns a result. The tool's
+   * **schema** must be registered server-side (via `tools` on
+   * `ProviderRunnerOptions`), but the handler runs here — right where the data
+   * the tool needs lives.
+   *
+   * Shorthand for `toolHost.clientTools`; when both are set, this wins for
+   * overlapping names.
+   *
+   * ```tsx
+   * <SessionPanel
+   *   clientTools={{
+   *     app_navigate: async (input) => {
+   *       router.push((input as { path: string }).path)
+   *       return { value: 'navigated' }
+   *     },
+   *   }}
+   * />
+   * ```
+   */
+  clientTools?: Record<string, _$_workerdeck_react0.ClientToolHandler>;
+  /**
+   * Base font size in **whole pixels**. Drives the overall scale of everything
+   * the panel draws — prompt, output, markdown, status bar — in both variants.
+   *
+   * Under the terminal theme it sets `--term-font-size` and derives
+   * `--term-line` at the CLI's own 13 : 18 ratio (unless {@link terminalMetrics}
+   * overrides those individually). Under cards it sets the panel root's
+   * `font-size`, which scales every `rem`/`em`-based token the type scale uses.
+   *
+   * Absent means "platform default": 13 px for the terminal theme, the
+   * inherited body size for cards. That is the right choice for a host that has
+   * no preference — the panel reads at the size the rest of the app does.
+   */
+  fontSize?: number;
   className?: string;
 }
 /** What an embedder needs to *change* a session it doesn't own the attach for. */
@@ -600,10 +657,13 @@ declare function SessionPanel({
   unseen,
   readOnly,
   toolHost,
+  clientTools,
   cacheTranscript,
   emptyState,
+  onLinkClick,
+  fontSize,
   className
 }: SessionPanelProps): _$react.JSX.Element;
 //#endregion
 export { permissionModeChoices as C, PermissionModeSelectProps as S, useAffordances as _, SessionVitals as a, PermissionModeMeta as b, TranscriptDensityProvider as c, TranscriptVariantProvider as d, useTranscriptDensity as f, WithActions as g, TerminalAffordances as h, SessionSurfacePanel as i, TranscriptFont as l, CopyAction as m, SessionPanel as n, TerminalMetrics as o, useTranscriptVariant as p, SessionPanelProps as r, TranscriptDensity as s, SessionControls as t, TranscriptVariant as u, PERMISSION_MODES as v, permissionModeMeta as w, PermissionModeSelect as x, PermissionModeChoice as y };
-//# sourceMappingURL=SessionPanel-13l25ubU.d.mts.map
+//# sourceMappingURL=SessionPanel-BobynUo4.d.mts.map

package/build/{SessionPanel-DgwjH4Ve.mjs → SessionPanel-DUt2VzXG.mjs}

@@ -8652,13 +8652,19 @@ function StatusBar({ state, rateLimits, connected, connection, onOpenStatus, onO
 					}) : null]
 				})
 			}) : null,
-			controls,
+			controls ? /* @__PURE__ */ jsx("span", {
+				className: "self-center",
+				children: controls
+			}) : null,
 			/* @__PURE__ */ jsx("span", { className: "flex-1" }),
 			/* @__PURE__ */ jsx("span", {
 				className: "font-mono text-label text-fg-3",
 				children: formatCost(state.totalCostUsd)
 			}),
-			actions
+			actions ? /* @__PURE__ */ jsx("span", {
+				className: "self-center",
+				children: actions
+			}) : null
 		]
 	});
 }
@@ -8839,6 +8845,7 @@ const Response = memo(function Response({ children, streaming, className }) {
 		mode: streaming ? "streaming" : "static",
 		parseIncompleteMarkdown: streaming,
 		shikiTheme: ["github-light", "github-dark"],
+		linkSafety: { enabled: false },
 		className: cn("size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className),
 		children
 	});
@@ -12020,7 +12027,9 @@ 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", transcriptFont = "sans", affordances, terminalMetrics, scrubber = false, scrubberMarks, reveal, openSubagent, onSubagentChange, stickyPrompt = false, controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, readOnly = false, toolHost, cacheTranscript, emptyState, className }) {
+function SessionPanel({ client, sessionId, header, panelSurface = "internal", statusSurface = "internal", statusPlacement = "top", onOpenPanel, onVitals, transcriptVariant = "cards", transcriptDensity = "comfortable", transcriptFont = "sans", affordances, terminalMetrics, scrubber = false, scrubberMarks, reveal, openSubagent, onSubagentChange, stickyPrompt = false, controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, readOnly = false, toolHost, clientTools, cacheTranscript, emptyState, onLinkClick, fontSize, className }) {
+	const effectiveTermFontSize = terminalMetrics?.fontSize ?? fontSize;
+	const effectiveTermLineHeight = terminalMetrics?.lineHeight ?? (fontSize !== void 0 ? Math.round(fontSize * (18 / 13)) : void 0);
 	const external = panelSurface === "external";
 	const statusExternal = statusSurface === "external";
 	const controlsInStatus = controlsSurface === "status" && !statusExternal;
@@ -12111,7 +12120,13 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 		document.addEventListener("visibilitychange", onVisible);
 		return () => document.removeEventListener("visibilitychange", onVisible);
 	}, [reconnectNow]);
-	useToolCallHost(handle, toolHost === false ? { enabled: false } : toolHost);
+	useToolCallHost(handle, toolHost === false ? { enabled: false } : clientTools ? {
+		...toolHost,
+		clientTools: {
+			...toolHost?.clientTools,
+			...clientTools
+		}
+	} : toolHost);
 	const terminal = transcriptVariant === "terminal";
 	const subagentFrameItems = useMemo(() => subagentId === void 0 ? [] : subagentItems(state.items, subagentId), [state.items, subagentId]);
 	const subagentTask = useMemo(() => subagentId === void 0 ? void 0 : state.items.find((item) => item.kind === "tool_call" && item.id === subagentId), [state.items, subagentId]);
@@ -12288,6 +12303,24 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 		onOpenUsage: external && !onOpenPanel ? void 0 : () => openPanel("usage"),
 		actions: headerTakesActions ? void 0 : menu
 	});
+	const panelRef = useRef(null);
+	useEffect(() => {
+		if (!onLinkClick) return;
+		const el = panelRef.current;
+		if (!el) return;
+		const handler = (e) => {
+			const anchor = e.target?.closest?.("a[href]");
+			if (!anchor) return;
+			const href = anchor.getAttribute("href");
+			if (!href) return;
+			if (onLinkClick(href)) {
+				e.preventDefault();
+				e.stopPropagation();
+			}
+		};
+		el.addEventListener("click", handler, true);
+		return () => el.removeEventListener("click", handler, true);
+	}, [onLinkClick]);
 	const handleClick = (event) => {
 		if (!focusComposerOnClick || readOnly) return;
 		if (event.target?.closest(INTERACTIVE)) return;
@@ -12303,10 +12336,12 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 				children: /* @__PURE__ */ jsx(ToolResultImageProvider, {
 					value: resultImages,
 					children: /* @__PURE__ */ jsxs("div", {
+						ref: panelRef,
 						"data-slot": "session-panel",
 						"data-agent-font": transcriptFont,
 						onClick: handleClick,
 						className: cn("flex h-full min-h-0 flex-col overflow-hidden bg-bg", className),
+						style: fontSize !== void 0 ? { "--wd-font-size": `${Math.round(fontSize)}px` } : void 0,
 						children: [
 							headerTakesActions ? header({ actions: menu }) : header,
 							statusPlacement === "top" ? statusBar : null,
@@ -12331,8 +12366,8 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 								label: subagentFallbackLabel,
 								onBack: leaveSubagent,
 								terminal,
-								fontSize: terminalMetrics?.fontSize,
-								lineHeight: terminalMetrics?.lineHeight
+								fontSize: effectiveTermFontSize,
+								lineHeight: effectiveTermLineHeight
 							}) : null,
 							/* @__PURE__ */ jsx(Transcript, {
 								state,
@@ -12342,8 +12377,8 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 								hostImage,
 								variant: transcriptVariant,
 								density: transcriptDensity,
-								fontSize: terminalMetrics?.fontSize,
-								lineHeight: terminalMetrics?.lineHeight,
+								fontSize: effectiveTermFontSize,
+								lineHeight: effectiveTermLineHeight,
 								affordances,
 								stickyPrompt,
 								scrubber,
@@ -12399,7 +12434,10 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 								className: cn(terminal ? "pb-2" : "px-3 pb-2"),
 								children: /* @__PURE__ */ jsx(PromptSurface, {
 									terminal,
-									metrics: terminalMetrics,
+									metrics: {
+										fontSize: effectiveTermFontSize,
+										lineHeight: effectiveTermLineHeight
+									},
 									affordances,
 									children: state.pendingApprovals.map((request) => {
 										const isQuestion = request.toolName === "AskUserQuestion" && parseUserQuestions(request.input).length > 0;
@@ -12439,8 +12477,8 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 								}) : void 0,
 								layout: controlsExternal ? "inline" : "stacked",
 								toolbar: controlsExternal ? void 0 : sessionControls,
-								fontSize: terminalMetrics?.fontSize,
-								lineHeight: terminalMetrics?.lineHeight,
+								fontSize: effectiveTermFontSize,
+								lineHeight: effectiveTermLineHeight,
 								affordances
 							}),
 							statusPlacement === "bottom" ? statusBar : null,
@@ -12583,4 +12621,4 @@ function Notice({ level, onDismiss, children }) {
 //#endregion
 export { toolIcon as $, PERMISSION_MODES as A, MenuSeparator as At, skillPrompt as B, Badge as Bt, TerminalQuestionPrompt as C, DialogContent as Ct, parseUserQuestions as D, Menu$1 as Dt, QuestionPrompt as E, DialogTrigger as Et, SkillsDialog as F, SelectItemText as Ft, Band as G, TerminalMarkdown as H, Button as Ht, McpDialog as I, SelectTrigger as It, Row as J, Blank as K, HostFilesDialog as L, SelectValue as Lt, permissionModeChoices as M, Select$1 as Mt, permissionModeMeta as N, SelectContent as Nt, SubagentStrip as O, MenuContent as Ot, ModelSelect as P, SelectItem as Pt, isMutatingTool as Q, ContextDialog as R, PortalScope as Rt, SessionInfoDialog as S, DialogClose as St, QUESTION_BEHAVIORS as T, DialogRow as Tt, TerminalDiff as U, buttonVariants as Ut, TerminalSurface as V, badgeVariants as Vt, previewPatch as W, cn as Wt, WithActions as X, CopyAction as Y, useAffordances as Z, Conversation as _, Tip as _t, Transcript as a, hashtagTrigger as at, StatusBar as b, Dialog$1 as bt, ToolCallCard as c, PromptArea as ct, Response as d, ProgressRing as dt, TranscriptDensityProvider as et, PromptTokenText as f, Splitter as ft, FileCard as g, copyText as gt, Loader as h, CopyButton as ht, useMinuteClock as i, commandTrigger as it, PermissionModeSelect as j, MenuTrigger as jt, PermissionPrompt as k, MenuItem as kt, SessionEmptyState as l, plainTextToSegments as lt, MessageContent as m, Spinner as mt, UsageDialog as n, useTranscriptDensity as nt, TerminalItemView as o, mentionTrigger as ot, Message as p, CodeBlock as pt, Ink as q, UsageMeters as r, useTranscriptVariant as rt, TerminalTranscript as s, usePromptAreaState as st, SessionPanel as t, TranscriptVariantProvider as tt, Reasoning as u, segmentsToPlainText as ut, ConversationContent as v, TooltipContent as vt, TerminalPermissionPrompt as w, DialogHeader as wt, STATUS_META as x, DialogBody as xt, ConversationScrollButton as y, TooltipProvider as yt, Composer as z, Input as zt };
 
-//# sourceMappingURL=SessionPanel-DgwjH4Ve.mjs.map
+//# sourceMappingURL=SessionPanel-DUt2VzXG.mjs.map