@mcp-b/react-components 0.41.0 → 0.42.0

package/dist/{ThinkChatActivity-DyGHj01E.d.ts → ThinkChatActivity-CsDql-ER.d.ts}

@@ -40,6 +40,8 @@ interface ThinkChatActivityProps {
   isStreaming?: boolean;
   /** Per-tool action/panel overrides, keyed by tool name. */
   toolRenderers?: ThinkChatToolRenderers;
+  /** Replaces the summary action after the activity settles. */
+  settledAction?: string;
   /**
    * Uniquely identifies this run across the whole transcript for persisted
    * disclosure state (the activity renderer passes `${message.id}:${runStart}`).
@@ -54,6 +56,7 @@ declare function ThinkChatActivity({
   defaultOpen,
   isStreaming,
   toolRenderers,
+  settledAction,
   stateKey
 }: ThinkChatActivityProps): React.JSX.Element | null;
 /**

package/dist/{WorkspaceFileView-D0yFwoDr.js → WorkspaceFileView-DwdXiKku.js}

@@ -70,32 +70,27 @@ function useWorkspaceAssetUrl(asset, mimeType) {
 			});
 			return;
 		}
-		let url = null;
-		let downloadUrl = null;
-		try {
-			const previewBlob = new Blob([toBlobPart(asset.data)], { type: mimeType });
-			url = URL.createObjectURL(previewBlob);
-			downloadUrl = mimeType === SVG_MIME_TYPE ? URL.createObjectURL(new Blob([previewBlob], { type: "application/octet-stream" })) : url;
+		const previewBlob = new Blob([toBlobPart(asset.data)], { type: mimeType });
+		const previewUrl = URL.createObjectURL(previewBlob);
+		if (mimeType !== SVG_MIME_TYPE) {
 			setObjectUrl({
 				asset,
-				url,
-				downloadUrl,
+				url: previewUrl,
+				downloadUrl: previewUrl,
 				error: null
 			});
-		} catch {
-			if (url) URL.revokeObjectURL(url);
-			if (downloadUrl && downloadUrl !== url) URL.revokeObjectURL(downloadUrl);
-			setObjectUrl({
-				asset,
-				url: null,
-				downloadUrl: null,
-				error: "This file could not be prepared for preview."
-			});
-			return;
+			return () => URL.revokeObjectURL(previewUrl);
 		}
+		const svgDownloadUrl = URL.createObjectURL(new Blob([previewBlob], { type: "application/octet-stream" }));
+		setObjectUrl({
+			asset,
+			url: previewUrl,
+			downloadUrl: svgDownloadUrl,
+			error: null
+		});
 		return () => {
-			if (url) URL.revokeObjectURL(url);
-			if (downloadUrl && downloadUrl !== url) URL.revokeObjectURL(downloadUrl);
+			URL.revokeObjectURL(previewUrl);
+			URL.revokeObjectURL(svgDownloadUrl);
 		};
 	}, [asset, mimeType]);
 	if (!asset) return {

package/dist/components/agents-sdk/AgentActivity.js

@@ -1,4 +1,4 @@
-import { inferFaviconUrl } from "../../utils/favicon.js";
+import { canRequestFavicon, inferFaviconUrl } from "../../utils/favicon.js";
 import { $ as WarningIcon, D as LinkIcon, N as MonitorIcon, R as PencilIcon, S as FileIcon, T as InfoIcon, U as SearchIcon, Z as TerminalIcon, et as WrenchIcon } from "../../icons-CVFSeTJn.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -21,7 +21,8 @@ function AgentActivityIcon({ kind }) {
 function AgentActivityFavicon({ fallbackKind = "web", url }) {
 	const src = inferFaviconUrl(url);
 	const [failedSrc, setFailedSrc] = React.useState(null);
-	if (!src || failedSrc === src) return /* @__PURE__ */ jsx(AgentActivityIcon, { kind: fallbackKind });
+	const failed = failedSrc === src;
+	if (!src || !canRequestFavicon(src) || failed) return /* @__PURE__ */ jsx(AgentActivityIcon, { kind: fallbackKind });
 	return /* @__PURE__ */ jsx("img", {
 		className: "activity__favicon",
 		src,

package/dist/components/agents-sdk/AgentChat.js

@@ -681,6 +681,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 		ref,
 		variant: "fade",
 		className: cx("agent-chat", className),
+		"data-recipe": "fill-host",
 		"data-composer-hidden": showComposer ? void 0 : "",
 		children: [
 			/* @__PURE__ */ jsx("span", {

package/dist/components/agents-sdk/BrowserRunPanel.js

@@ -45,7 +45,8 @@ function BrowserRunPanelFrame({ body, bodyBusy, bodyTabValue, className, error,
 			...onOpenUrl ? { onUrlChange: onOpenUrl } : {},
 			role: "region",
 			"aria-label": typeof label === "string" ? label : "Browser",
-			...props
+			...props,
+			"data-recipe": "fill-host"
 		}),
 		children: [
 			tabs.length > 1 ? /* @__PURE__ */ jsx(WebPreviewNavigation, { children: /* @__PURE__ */ jsx(Tabs.List, {

package/dist/components/agents-sdk/ManagerOffice.d.ts

@@ -102,39 +102,51 @@ interface ManagerOfficeDisconnectedEmployee extends ManagerOfficeEmployeeBase {
 }
 type ManagerOfficeEmployee = ManagerOfficeConnectedEmployee | ManagerOfficeDisconnectedEmployee;
 type ManagerOfficeEmployeeStatus = ManagerOfficeEmployee["status"];
-interface ManagerOfficeNavigation {
-  /** App-owned route element for the aggregate handoff view. */
-  renderAttentionLink(): React.ReactElement;
-  /** App-owned route element for one employee. */
-  renderEmployeeLink(employee: ManagerOfficeEmployee): React.ReactElement;
-  /** App-owned route element for a handoff's exact work. */
-  renderHandoffLink(employee: ManagerOfficeConnectedEmployee, handoff: ManagerOfficeHandoff): React.ReactElement;
-  /** App-owned route element for one work item. */
-  renderWorkLink(employee: ManagerOfficeConnectedEmployee, work: ManagerOfficeWork): React.ReactElement;
-  /** App-owned route element for one recurring responsibility. */
-  renderRoutineLink(employee: ManagerOfficeConnectedEmployee, routine: ManagerOfficeRoutine): React.ReactElement;
-  /** App-owned route element for starting new work with one employee. */
-  renderNewWorkLink(employee: ManagerOfficeConnectedEmployee): React.ReactElement;
-  /** App-owned route element for browsing one employee's workspace. */
-  renderWorkspaceLink(employee: ManagerOfficeConnectedEmployee): React.ReactElement;
-}
+/**
+ * Every place the office can send a manager, as one discriminated union — the
+ * same shape `WorkspaceNavigationAdapter.renderLink` uses. Consumers map it
+ * with one `switch` instead of implementing seven factories.
+ */
+type ManagerOfficeDestination = {
+  kind: "attention";
+} | {
+  kind: "employee";
+  employee: ManagerOfficeEmployee;
+} | {
+  kind: "handoff";
+  employee: ManagerOfficeConnectedEmployee;
+  handoff: ManagerOfficeHandoff;
+} | {
+  kind: "work";
+  employee: ManagerOfficeConnectedEmployee;
+  work: ManagerOfficeWork;
+} | {
+  kind: "routine";
+  employee: ManagerOfficeConnectedEmployee;
+  routine: ManagerOfficeRoutine;
+} | {
+  kind: "new-work";
+  employee: ManagerOfficeConnectedEmployee;
+} | {
+  kind: "workspace";
+  employee: ManagerOfficeConnectedEmployee;
+};
 interface ManagerOfficeProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Current disposable navigation projection; durable selection remains app-owned. */
   view: ManagerOfficeView;
   /** Employees projected from their owning runtimes. */
   employees: readonly ManagerOfficeEmployee[];
-  /** Router elements supplied by the consuming app. */
-  navigation: ManagerOfficeNavigation;
-  /** Add/sign-out controls rendered in the office rail. Pass `null` for none. */
-  officeActions: React.ReactNode;
+  /** Returns an app-owned route element for every office destination. */
+  renderLink: (destination: ManagerOfficeDestination) => React.ReactElement;
+  /** Add/sign-out controls rendered in the office rail. */
+  officeActions?: React.ReactNode;
   /**
    * Actions rendered for the selected connected employee. Compose interactive
-   * controls through `AppTopBar.Control` so they join the toolbar; pass `null`
-   * for none.
+   * controls through `AppTopBar.Control` so they join the toolbar.
    */
-  renderEmployeeActions: (employee: ManagerOfficeConnectedEmployee) => React.ReactNode;
-  /** Action shown in the empty office. Pass `null` for none. */
-  emptyOfficeAction: React.ReactNode;
+  renderEmployeeActions?: (employee: ManagerOfficeConnectedEmployee) => React.ReactNode;
+  /** Action shown in the empty office. */
+  emptyOfficeAction?: React.ReactNode;
 }
 /**
  * Multi-employee manager office: aggregate handoffs, employee roster, and one
@@ -145,7 +157,7 @@ declare function ManagerOffice({
   className,
   emptyOfficeAction,
   employees,
-  navigation,
+  renderLink,
   officeActions,
   renderEmployeeActions,
   style,
@@ -153,4 +165,4 @@ declare function ManagerOffice({
   ...props
 }: ManagerOfficeProps): React.JSX.Element;
 //#endregion
-export { ManagerOffice, ManagerOfficeChannel, ManagerOfficeChannelDirection, ManagerOfficeChannelStatus, ManagerOfficeConnectedEmployee, ManagerOfficeDisconnectedEmployee, ManagerOfficeEmployee, ManagerOfficeEmployeeStatus, ManagerOfficeHandoff, ManagerOfficeNavigation, ManagerOfficeProps, ManagerOfficeRoutine, ManagerOfficeView, ManagerOfficeWork, ManagerOfficeWorkStatus };
+export { ManagerOffice, ManagerOfficeChannel, ManagerOfficeChannelDirection, ManagerOfficeChannelStatus, ManagerOfficeConnectedEmployee, ManagerOfficeDestination, ManagerOfficeDisconnectedEmployee, ManagerOfficeEmployee, ManagerOfficeEmployeeStatus, ManagerOfficeHandoff, ManagerOfficeProps, ManagerOfficeRoutine, ManagerOfficeView, ManagerOfficeWork, ManagerOfficeWorkStatus };

package/dist/components/agents-sdk/ManagerOffice.js

@@ -4,9 +4,9 @@ import { $ as WarningIcon, A as MessageSquareIcon, B as PlusIcon, C as FolderIco
 import { Button } from "../foundations/Button.js";
 import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
 import { Tooltip } from "../foundations/Tooltip.js";
-import { EmptyState } from "../foundations/EmptyState.js";
 import { Avatar } from "../foundations/Avatar.js";
 import { AppIcon } from "../foundations/AppIcon.js";
+import { EmptyState } from "../foundations/EmptyState.js";
 import { LinkButton } from "../foundations/LinkButton.js";
 import "../foundations/icons.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
@@ -304,10 +304,10 @@ function ChannelRow({ channel }) {
 * The action is a link into the owning work, because that is where the single
 * approval surface lives; nothing is approved or dismissed from the roster.
 */
-function HandoffCard({ employee, handoff, navigation, now, showEmployee }) {
+function HandoffCard({ employee, handoff, renderLink, now, showEmployee }) {
 	return /* @__PURE__ */ jsxs(AgentAttention, {
 		tone: "attention",
-		className: "manager-office__handoff",
+		className: cx("manager-office__handoff", !handoff.request && "manager-office__handoff--bare"),
 		children: [
 			/* @__PURE__ */ jsx(AgentAttentionHeader, {
 				icon: /* @__PURE__ */ jsx(InfoIcon, {}),
@@ -322,9 +322,16 @@ function HandoffCard({ employee, handoff, navigation, now, showEmployee }) {
 					})
 				] })
 			}),
-			handoff.request ? /* @__PURE__ */ jsx(AgentAttentionBody, { children: handoff.request }) : null,
+			handoff.request ? /* @__PURE__ */ jsx(AgentAttentionBody, {
+				className: "manager-office__handoff-ask",
+				children: handoff.request
+			}) : null,
 			/* @__PURE__ */ jsx(AgentAttentionActions, { children: /* @__PURE__ */ jsxs(LinkButton, {
-				render: navigation.renderHandoffLink(employee, handoff),
+				render: renderLink({
+					kind: "handoff",
+					employee,
+					handoff
+				}),
 				size: "sm",
 				"aria-label": `Open ${handoff.workTitle} to ${handoff.reason.toLowerCase()}`,
 				children: [/* @__PURE__ */ jsx(MonitorIcon, {}), "Open browser"]
@@ -332,7 +339,7 @@ function HandoffCard({ employee, handoff, navigation, now, showEmployee }) {
 		]
 	});
 }
-function EmployeeSidebar({ closeSidebarOnCompact, employees, navigation, officeActions, profileColors, view }) {
+function EmployeeSidebar({ closeSidebarOnCompact, employees, renderLink, officeActions, profileColors, view }) {
 	const rosterLabelId = React.useId();
 	const attentionCount = employees.reduce((total, employee) => total + employeeAttentionCount(employee), 0);
 	const selectedEmployeeId = view.kind === "employee" ? view.employeeId : null;
@@ -348,7 +355,7 @@ function EmployeeSidebar({ closeSidebarOnCompact, employees, navigation, officeA
 				})]
 			}),
 			/* @__PURE__ */ jsxs(LinkButton, {
-				render: navigation.renderAttentionLink(),
+				render: renderLink({ kind: "attention" }),
 				onClick: closeSidebarOnCompact,
 				variant: "ghost",
 				color: "neutral",
@@ -366,7 +373,10 @@ function EmployeeSidebar({ closeSidebarOnCompact, employees, navigation, officeA
 				className: "manager-office__employee-nav sigvelo-stack-list",
 				"aria-labelledby": rosterLabelId,
 				children: employees.map((employee) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(LinkButton, {
-					render: navigation.renderEmployeeLink(employee),
+					render: renderLink({
+						kind: "employee",
+						employee
+					}),
 					onClick: closeSidebarOnCompact,
 					variant: "ghost",
 					color: "neutral",
@@ -400,39 +410,49 @@ function EmployeeSidebar({ closeSidebarOnCompact, employees, navigation, officeA
 		]
 	});
 }
-function AttentionView({ employees, navigation, now }) {
+function AttentionView({ employees, renderLink, now }) {
 	const rows = employees.flatMap((employee) => isConnected(employee) ? employee.handoffs.map((handoff) => ({
 		employee,
 		handoff
 	})) : []);
-	if (!rows.length) return /* @__PURE__ */ jsx(EmptyState, {
-		icon: /* @__PURE__ */ jsx(CheckIcon, {}),
-		title: "No active handoffs",
-		description: "Employee connection state remains visible in the roster."
+	if (!rows.length) return /* @__PURE__ */ jsx("section", {
+		className: "manager-office__attention",
+		"data-recipe": "page",
+		"aria-label": "Needs you",
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			icon: /* @__PURE__ */ jsx(CheckIcon, {}),
+			title: "No active handoffs",
+			description: "Employee connection state remains visible in the roster."
+		})
 	});
 	return /* @__PURE__ */ jsx("section", {
 		className: "manager-office__attention",
+		"data-recipe": "page",
 		"aria-label": "Needs you",
 		children: /* @__PURE__ */ jsx("ul", {
 			className: "manager-office__attention-list sigvelo-stack-list",
 			children: rows.map(({ employee, handoff }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(HandoffCard, {
 				employee,
 				handoff,
-				navigation,
+				renderLink,
 				now,
 				showEmployee: true
 			}) }, `${employee.id}:${handoff.id}`))
 		})
 	});
 }
-function EmployeeDetail({ employee, navigation, now, profileColor }) {
-	if (!isConnected(employee)) return /* @__PURE__ */ jsx(EmptyState, {
-		icon: employee.status === "connecting" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(MonitorIcon, {}),
-		title: `${employee.name} is ${statusLabels[employee.status].toLowerCase()}`,
-		description: employee.statusDescription
+function EmployeeDetail({ employee, renderLink, now, profileColor }) {
+	if (!isConnected(employee)) return /* @__PURE__ */ jsx("div", {
+		"data-recipe": "page",
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			icon: employee.status === "connecting" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(MonitorIcon, {}),
+			title: `${employee.name} is ${statusLabels[employee.status].toLowerCase()}`,
+			description: employee.statusDescription
+		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "manager-office__employee-detail",
+		"data-recipe": "page",
 		children: [
 			/* @__PURE__ */ jsxs("header", {
 				className: "manager-office__employee-header",
@@ -466,7 +486,7 @@ function EmployeeDetail({ employee, navigation, now, profileColor }) {
 				children: employee.handoffs.map((handoff) => /* @__PURE__ */ jsx(HandoffCard, {
 					employee,
 					handoff,
-					navigation,
+					renderLink,
 					now,
 					showEmployee: false
 				}, handoff.id))
@@ -486,7 +506,11 @@ function EmployeeDetail({ employee, navigation, now, profileColor }) {
 						children: employee.work.length ? /* @__PURE__ */ jsx("ul", {
 							className: "manager-office__work-list sigvelo-stack-list",
 							children: employee.work.map((work) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(LinkButton, {
-								render: navigation.renderWorkLink(employee, work),
+								render: renderLink({
+									kind: "work",
+									employee,
+									work
+								}),
 								variant: "ghost",
 								color: "neutral",
 								size: "sm",
@@ -542,7 +566,11 @@ function EmployeeDetail({ employee, navigation, now, profileColor }) {
 								children: employee.routines.length ? /* @__PURE__ */ jsx("ul", {
 									className: "manager-office__routine-list sigvelo-stack-list",
 									children: employee.routines.map((routine) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(LinkButton, {
-										render: navigation.renderRoutineLink(employee, routine),
+										render: renderLink({
+											kind: "routine",
+											employee,
+											routine
+										}),
 										variant: "ghost",
 										color: "neutral",
 										size: "sm",
@@ -591,7 +619,7 @@ function EmployeeDetail({ employee, navigation, now, profileColor }) {
 * employee dossier. The consuming app owns authentication, Agent connections,
 * routing, and the selected employee's full work surface.
 */
-function ManagerOffice({ className, emptyOfficeAction, employees, navigation, officeActions, renderEmployeeActions, style, view, ...props }) {
+function ManagerOffice({ className, emptyOfficeAction, employees, renderLink, officeActions, renderEmployeeActions, style, view, ...props }) {
 	const titleId = React.useId();
 	const [now, setNow] = React.useState(Date.now);
 	React.useEffect(() => {
@@ -609,29 +637,37 @@ function ManagerOffice({ className, emptyOfficeAction, employees, navigation, of
 		sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(EmployeeSidebar, {
 			closeSidebarOnCompact,
 			employees,
-			navigation,
+			renderLink,
 			officeActions,
 			profileColors,
 			view
 		}),
-		topBarProps: { "aria-label": "Manager office controls" },
-		topBarTitleRender: /* @__PURE__ */ jsx("h1", { id: titleId }),
-		topBarTitle: title,
-		topBarTrailing: selectedEmployee && isConnected(selectedEmployee) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsx(AppTopBar.Link, {
-				label: `Start new work with ${selectedEmployee.name}`,
-				tooltip: "New work",
-				render: navigation.renderNewWorkLink(selectedEmployee),
-				children: /* @__PURE__ */ jsx(PencilIcon, {})
-			}),
-			/* @__PURE__ */ jsx(AppTopBar.Link, {
-				label: `Open ${selectedEmployee.name} workspace`,
-				tooltip: "Workspace",
-				render: navigation.renderWorkspaceLink(selectedEmployee),
-				children: /* @__PURE__ */ jsx(FolderIcon, {})
-			}),
-			renderEmployeeActions(selectedEmployee)
-		] }) : void 0,
+		bar: {
+			label: "Manager office controls",
+			titleRender: /* @__PURE__ */ jsx("h1", { id: titleId }),
+			title,
+			actions: selectedEmployee && isConnected(selectedEmployee) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(AppTopBar.Link, {
+					label: `Start new work with ${selectedEmployee.name}`,
+					tooltip: "New work",
+					render: renderLink({
+						kind: "new-work",
+						employee: selectedEmployee
+					}),
+					children: /* @__PURE__ */ jsx(PencilIcon, {})
+				}),
+				/* @__PURE__ */ jsx(AppTopBar.Link, {
+					label: `Open ${selectedEmployee.name} workspace`,
+					tooltip: "Workspace",
+					render: renderLink({
+						kind: "workspace",
+						employee: selectedEmployee
+					}),
+					children: /* @__PURE__ */ jsx(FolderIcon, {})
+				}),
+				renderEmployeeActions?.(selectedEmployee)
+			] }) : void 0
+		},
 		...props,
 		children: /* @__PURE__ */ jsx("main", {
 			className: "manager-office__main",
@@ -643,11 +679,11 @@ function ManagerOffice({ className, emptyOfficeAction, employees, navigation, of
 				children: emptyOfficeAction
 			}) : view.kind === "attention" ? /* @__PURE__ */ jsx(AttentionView, {
 				employees,
-				navigation,
+				renderLink,
 				now
 			}) : selectedEmployee ? /* @__PURE__ */ jsx(EmployeeDetail, {
 				employee: selectedEmployee,
-				navigation,
+				renderLink,
 				now,
 				profileColor: profileColors.get(selectedEmployee.id)
 			}) : /* @__PURE__ */ jsx(EmptyState, {

package/dist/components/agents-sdk/McpPluginCatalog.js

@@ -8,8 +8,8 @@ import { Dialog } from "../foundations/Dialog.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { Separator } from "../foundations/Separator.js";
 import { AppIcon } from "../foundations/AppIcon.js";
-import { n as getMcpServerProjection, t as McpServerIcon } from "../../mcp-server-SD_S-IpB.js";
 import { SearchField } from "../foundations/SearchField.js";
+import { n as getMcpServerProjection, t as McpServerIcon } from "../../mcp-server-SD_S-IpB.js";
 import { McpServerSetupDialog } from "./McpServerPicker.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -129,7 +129,9 @@ function McpPluginCatalog({ servers, mcp, detailsByServerId, featuredServerIds =
 /** Reference-derived plugin detail surface without a parallel install state. */
 function McpPluginDetailsDialog({ server, details, mcp, brandName = "your AI", brandLogo = /* @__PURE__ */ jsx("img", {
 	alt: "",
-	src: new URL("../../assets/think-browser-host.png", import.meta.url).href
+	src: new URL("../../assets/think-browser-host.png", import.meta.url).href,
+	width: 128,
+	height: 128
 }), disclosure = /* @__PURE__ */ jsxs(Fragment, { children: [
 	/* @__PURE__ */ jsxs("p", { children: [/* @__PURE__ */ jsx("strong", { children: "You're in control." }), " This plugin is limited to the account and permissions you approve, and you can disconnect it at any time."] }),
 	/* @__PURE__ */ jsxs("p", { children: [/* @__PURE__ */ jsx("strong", { children: "Plugins may introduce elevated risk." }), " Only connect tools you trust. A compromised plugin could use its access to read or change data in the connected service."] }),

package/dist/components/agents-sdk/ModelSelector.js

@@ -6,8 +6,8 @@ import { Dialog } from "../foundations/Dialog.js";
 import { o as titleCase } from "../../format-DB2mX9DA.js";
 import { Separator } from "../foundations/Separator.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
-import { EmptyState } from "../foundations/EmptyState.js";
 import { t as ProviderLogo } from "../../provider-logos-zjZycgV6.js";
+import { EmptyState } from "../foundations/EmptyState.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";

package/dist/components/agents-sdk/SubagentRunSelector.js

@@ -2,8 +2,8 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { buttonVariants } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
 import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
-import { SubagentRunIndicator, getSubagentRunName, getSubagentRunTooltip } from "./SubagentRunIndicator.js";
 import { NaniteMark } from "../nanites/NaniteScene.js";
+import { SubagentRunIndicator, getSubagentRunName, getSubagentRunTooltip } from "./SubagentRunIndicator.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/SubagentRunSelector.tsx

package/dist/components/agents-sdk/ThinkChat.d.ts

@@ -3,7 +3,7 @@ import { K as PromptInputMessage } from "../../PromptInput-BRX7FhjH.js";
 import { r as AgentChatProps } from "../../AgentChat-DVr2giwD.js";
 import { n as AgentToolEventsValue } from "../../AgentToolRunsContext-daY67hFM.js";
 import { o as UseSessionCompactionResult } from "../../SessionCompaction-CmTJFpzj.js";
-import { o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, t as ThinkChatActivity } from "../../ThinkChatActivity-DyGHj01E.js";
+import { o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, t as ThinkChatActivity } from "../../ThinkChatActivity-CsDql-ER.js";
 import { i as ThinkChatValue } from "../../ThinkChatContext-COIgzkYp.js";
 import { t as ThinkRecoveryNotice } from "../../ThinkRecoveryNotice-DGWr94rk.js";
 import { n as WorkspaceHtmlArtifactRenderer } from "../../WorkspaceMessageResponse-D66ty4FO.js";

package/dist/components/agents-sdk/ThinkChat.js

@@ -1,2 +1,2 @@
-import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-BES_3Mb-.js";
+import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-DkA4Wr71.js";
 export { ThinkChat, ThinkChatMessages, ThinkChatProvider, ThinkChatRoot, thinkPendingExecutionApprovalsQueryOptions, useThinkChat, useThinkPendingExecutionApprovals };

package/dist/components/agents-sdk/ThinkChatActivity.d.ts

@@ -1,2 +1,2 @@
-import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../../ThinkChatActivity-DyGHj01E.js";
+import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../../ThinkChatActivity-CsDql-ER.js";
 export { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, renderThinkChatActivityPart };

package/dist/components/agents-sdk/ThinkChatActivity.js

@@ -2,9 +2,9 @@ import { useExpansionState } from "../ai-sdk/ExpansionState.js";
 import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityText, ActivityTrigger } from "../ai-sdk/Activity.js";
 import { Button } from "../foundations/Button.js";
 import { MessageResponse } from "../ai-sdk/Message.js";
-import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
 import { useOptionalAgentToolRuns } from "./AgentToolRunsContext.js";
 import { SubagentRunList } from "./SubagentRunList.js";
+import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
 import { useOptionalThinkChatLive } from "./ThinkChatContext.js";
 import { isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartWorking, isSessionContextToolPart, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart } from "./ThinkChatToolParts.js";
 import { ThinkChatBrowserPanel, ThinkChatExecutePanel, ThinkChatFetchPanel, ThinkChatSessionContextPanel, ThinkChatSkillPanel, ThinkChatWorkspacePanel } from "./ThinkChatToolPanels.js";
@@ -32,7 +32,7 @@ function activityPartIcon(part) {
 * thousands-of-tools run expandable.
 */
 const VISIBLE_STEP_LIMIT = 100;
-function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers, stateKey }) {
+function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers, settledAction, stateKey }) {
 	const steps = parts.flatMap((part, index) => {
 		const description = describeThinkChatActivityPart(part, toolRenderers);
 		if (!description) return [];
@@ -59,8 +59,8 @@ function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers, sta
 		stateKey: scope,
 		children: [/* @__PURE__ */ jsx(ActivityTrigger, {
 			icon: header.url ? /* @__PURE__ */ jsx(AgentActivityFavicon, { url: header.url }) : /* @__PURE__ */ jsx(AgentActivityIcon, { kind: header.iconKind }),
-			action: header.action,
-			detail: header.detail
+			action: !streaming && settledAction ? settledAction : header.action,
+			detail: !streaming && settledAction ? void 0 : header.detail
 		}), /* @__PURE__ */ jsxs(ActivityContent, { children: [hiddenStepCount > 0 ? /* @__PURE__ */ jsxs(Button, {
 			size: "sm",
 			variant: "ghost",
@@ -153,7 +153,18 @@ function ThinkChatActivityStep({ description, part, stateKey, toolRenderers }) {
 		children: text
 	});
 }
-function ThinkChatActivityGroup({ message, parts, renderAgentToolRunLink, isTrailing, toolRenderers, stateKey }) {
+function terminalActivityAction(message) {
+	const metadata = message.metadata;
+	if (typeof metadata !== "object" || metadata === null || !("durationMs" in metadata) || typeof metadata.durationMs !== "number" || !Number.isFinite(metadata.durationMs) || metadata.durationMs < 0) return;
+	const totalSeconds = Math.max(1, Math.round(metadata.durationMs / 1e3));
+	const minutes = Math.floor(totalSeconds / 60);
+	const seconds = totalSeconds % 60;
+	const duration = minutes ? seconds ? `${minutes}m ${seconds}s` : `${minutes}m` : `${totalSeconds}s`;
+	const status = "status" in metadata ? metadata.status : void 0;
+	if (status === "completed") return `Worked for ${duration}`;
+	if (status === "aborted") return `You stopped after ${duration}`;
+}
+function ThinkChatActivityGroup({ message, parts, renderAgentToolRunLink, isTrailing, settledAction, toolRenderers, stateKey }) {
 	const live = useOptionalThinkChatLive();
 	const streaming = isTrailing && (live ? live.isStreaming && live.lastMessageId === message.id : parts.some(isPartWorking));
 	const agentTools = useOptionalAgentToolRuns();
@@ -168,6 +179,7 @@ function ThinkChatActivityGroup({ message, parts, renderAgentToolRunLink, isTrai
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ThinkChatActivity, {
 		parts,
 		isStreaming: streaming,
+		settledAction,
 		toolRenderers,
 		stateKey
 	}), runs.length && renderAgentToolRunLink ? /* @__PURE__ */ jsx(SubagentRunList, {
@@ -212,11 +224,13 @@ function createThinkChatActivityRenderer({ excludeTools, renderAgentToolRunLink,
 		if (partIndex !== start) return null;
 		let end = partIndex;
 		while (end + 1 < message.parts.length && runStarts[end + 1] === start) end++;
+		const isLastActivityRun = runStarts.findLast((runStart) => runStart !== -1) === start;
 		return /* @__PURE__ */ jsx(ThinkChatActivityGroup, {
 			message,
 			parts: message.parts.slice(start, end + 1),
 			stateKey: `${message.id}:${start}`,
 			isTrailing: end === message.parts.length - 1,
+			settledAction: isLastActivityRun ? terminalActivityAction(message) : void 0,
 			toolRenderers,
 			renderAgentToolRunLink
 		});

package/dist/components/agents-sdk/ThinkChatToolPanels.js

@@ -386,12 +386,16 @@ function ThinkChatBrowserPanel({ part }) {
 			receivedAt: seenAt,
 			fallback: media.screenshot ? /* @__PURE__ */ jsx("img", {
 				src: media.screenshot,
-				alt: "Last browser state"
+				alt: "Last browser state",
+				width: 16,
+				height: 10
 			}) : void 0
 		}) : media.screenshot ? /* @__PURE__ */ jsx("img", {
 			className: "activity__browser-screenshot",
 			src: media.screenshot,
-			alt: "Browser screenshot"
+			alt: "Browser screenshot",
+			width: 16,
+			height: 10
 		}) : null;
 		const codeView = /* @__PURE__ */ jsx(ExecuteCodeView, {
 			code,

package/dist/components/agents-sdk/ThinkExecutionDetail.js

@@ -2,8 +2,8 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { S as FileIcon, T as InfoIcon } from "../../icons-CVFSeTJn.js";
 import { Activity, ActivityContent, ActivityItemGroup, ActivityOutput, ActivityTrigger } from "../ai-sdk/Activity.js";
 import { a as formatUnknownValue } from "../../format-DB2mX9DA.js";
-import { EmptyState } from "../foundations/EmptyState.js";
 import { DescriptionList } from "../foundations/DescriptionList.js";
+import { EmptyState } from "../foundations/EmptyState.js";
 import { formatThinkExecutionTimestamp, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunKindLabel, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunTitle, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
 import { ThinkExecutionStatus } from "./ThinkExecutionStatus.js";
 import "react";
@@ -17,6 +17,7 @@ function ThinkExecutionDetail({ className, emptyState = "Select a run to view it
 	if (!run) return /* @__PURE__ */ jsx("section", {
 		ref,
 		className: cx("think-execution-detail", "think-execution-detail--empty", className),
+		"data-recipe": "page",
 		role: "status",
 		...props,
 		children: /* @__PURE__ */ jsx(EmptyState, { description: emptyState })
@@ -27,6 +28,7 @@ function ThinkExecutionDetail({ className, emptyState = "Select a run to view it
 	return /* @__PURE__ */ jsxs("section", {
 		ref,
 		className: cx("think-execution-detail", className),
+		"data-recipe": "page",
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("header", {

package/dist/components/agents-sdk/ThinkExecutionWorkbench.js

@@ -142,6 +142,7 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("think-execution-workbench", className),
+		"data-recipe": "fill-host",
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs(AppTopBar.Root, {