@mcp-b/react-components 0.41.0 → 0.43.0

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,8 +4,8 @@ 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 { EmptyState } from "../foundations/EmptyState.js";
 import { AppIcon } from "../foundations/AppIcon.js";
 import { LinkButton } from "../foundations/LinkButton.js";
 import "../foundations/icons.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.d.ts

@@ -1,92 +1,2 @@
-import { o as McpServerCard } from "../../mcp-server-catalog-CCj2ItkV.js";
-import { r as McpConnectorFormValues } from "../../McpConnectorForm-MRm1r59e.js";
-import { l as DialogProps } from "../../Dialog-B_FhRWaz.js";
-import * as React from "react";
-import { MCPServersState } from "agents";
-
-//#region src/components/agents-sdk/McpPluginCatalog.d.ts
-/** Optional plugin-specific copy layered over the canonical MCP server card. */
-interface McpPluginDetails {
-  developerName?: string;
-  marketplaceName?: string;
-  longDescription?: string;
-  capabilities?: readonly string[];
-  skills?: readonly string[];
-}
-interface McpPluginCatalogProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> {
-  /** Canonical connector cards. The directory does not create a second plugin registry. */
-  servers: readonly McpServerCard[];
-  /** Upstream Agents MCP state used to project connected and recovery states. */
-  mcp?: MCPServersState;
-  /** Optional plugin metadata keyed by the canonical server ID. */
-  detailsByServerId?: Readonly<Record<string, McpPluginDetails | undefined>>;
-  /** Server IDs promoted into the Featured section, in display order. */
-  featuredServerIds?: readonly string[];
-  /** Host product name paired with the plugin in the connection dialog. */
-  brandName?: string;
-  /** Host product mark paired with the plugin in the connection dialog. */
-  brandLogo?: React.ReactNode;
-  /** Product-authored trust and data-sharing copy. Pass null to omit it. */
-  disclosure?: React.ReactNode;
-  /** Starts or recovers the existing MCP connection path. */
-  onConnect?: (server: McpServerCard) => void | Promise<void>;
-  /** Removes the exact upstream MCP entry. */
-  onDisconnect?: (serverId: string) => void | Promise<void>;
-  /**
-   * Connects a user-supplied MCP server. Providing it puts the "Custom
-   * plugin" action in the bar, opening the shared connector setup dialog.
-   */
-  onAddCustom?: (values: McpConnectorFormValues) => void | Promise<void>;
-  /** Accessible name only — the hosting tab or icon is the visible title. */
-  heading?: React.ReactNode;
-  searchLabel?: string;
-  emptyMessage?: React.ReactNode;
-}
-interface McpPluginDetailsDialogProps {
-  /** Selected canonical server card. Passing null closes the dialog. */
-  server: McpServerCard | null;
-  details?: McpPluginDetails;
-  mcp?: MCPServersState;
-  brandName?: string;
-  brandLogo?: React.ReactNode;
-  disclosure?: React.ReactNode;
-  onConnect?: (server: McpServerCard) => void | Promise<void>;
-  onDisconnect?: (serverId: string) => void | Promise<void>;
-  onOpenChange: NonNullable<DialogProps["onOpenChange"]>;
-}
-/**
- * Searchable plugin directory backed by the same MCP cards and live Agents
- * state as {@link McpServerPicker}. Selecting a row opens the shared details
- * dialog; connecting still delegates to the host's existing MCP/OAuth path.
- */
-declare function McpPluginCatalog({
-  servers,
-  mcp,
-  detailsByServerId,
-  featuredServerIds,
-  brandName,
-  brandLogo,
-  disclosure,
-  onConnect,
-  onDisconnect,
-  onAddCustom,
-  heading,
-  searchLabel,
-  emptyMessage,
-  className,
-  ...props
-}: McpPluginCatalogProps): React.JSX.Element;
-/** Reference-derived plugin detail surface without a parallel install state. */
-declare function McpPluginDetailsDialog({
-  server,
-  details,
-  mcp,
-  brandName,
-  brandLogo,
-  disclosure,
-  onConnect,
-  onDisconnect,
-  onOpenChange
-}: McpPluginDetailsDialogProps): React.JSX.Element;
-//#endregion
+import { a as McpPluginDetailsDialogProps, i as McpPluginDetailsDialog, n as McpPluginCatalogProps, r as McpPluginDetails, t as McpPluginCatalog } from "../../McpPluginCatalog-mbGw8FTu.js";
 export { McpPluginCatalog, McpPluginCatalogProps, McpPluginDetails, McpPluginDetailsDialog, McpPluginDetailsDialogProps };

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

@@ -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/ThinkChat.d.ts

@@ -1,9 +1,9 @@
 import { i as AgentMessageRenderPartContext } from "../../AgentMessageParts-C7L-Mv9U.js";
 import { K as PromptInputMessage } from "../../PromptInput-BRX7FhjH.js";
-import { r as AgentChatProps } from "../../AgentChat-DVr2giwD.js";
+import { r as AgentChatProps } from "../../AgentChat-Bibfj7u1.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-CgvmTXXB.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/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-CgvmTXXB.js";
 export { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, renderThinkChatActivityPart };

package/dist/components/agents-sdk/ThinkChatActivity.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

@@ -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, {