@mcp-b/react-components 0.44.1 → 0.45.0

package/dist/{AgentToolRunsContext-daY67hFM.d.ts → AgentToolRunsContext-jtmveaRE.d.ts}

@@ -25,13 +25,14 @@ type AgentToolEventSource = Parameters<typeof useAgentToolEvents>[0]["agent"] &
  * The subscription's listener attaches in a passive effect, after paint. A
  * host whose transport is in-process (the browser extension's port bridge)
  * can complete the connect and deliver the replay before that effect runs —
- * reliably so on a hot return from a drill-in. Upstream owns the fix:
- * `useAgent` buffers `agent-tool-event` frames from socket construction and
- * `useAgentToolEvents` drains them when its listener attaches (agents >
- * 0.20.1; `_bufferAgentToolReplayFrame` is the seam for a non-`useAgent`
- * socket). On older versions such hosts must buffer and re-dispatch
- * themselves — think-browser-host's `useThinkAgentToolEvents` is that
- * interim shim. Network transports are not affected in practice: the round
+ * reliably so on a hot return from a drill-in. The fix lives in the Agents
+ * SDK, not here: `useAgent` buffers `agent-tool-event` frames from socket
+ * construction and `useAgentToolEvents` drains them when its listener
+ * attaches (`_bufferAgentToolReplayFrame` is the seam for a non-`useAgent`
+ * socket). As of agents 0.21.0 that is still the browser host's vendored
+ * edit, not a published release; a host on the published package has to
+ * buffer and re-dispatch the frames around its own socket before this hook
+ * can see them. Network transports are not affected in practice: the round
  * trip loses to the effect flush.
  */
 declare function useSourceScopedAgentToolEvents<Part extends AgentToolRunPart = UIMessage["parts"][number]>(agent: AgentToolEventSource): {

package/dist/{CodeBlock-Dl7a3Wqo.js → CodeBlock-8K1p1BDU.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
-import { t as CopyButton } from "./copy-button-DHhf-J1d.js";
 import { Select } from "./components/foundations/Select.js";
+import { t as CopyButton } from "./copy-button-BpA7wQva.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createHighlighter } from "shiki";

package/dist/{FileTree-Uu3ZnW1u.js → FileTree-QTP57Qz4.js}

@@ -1,5 +1,5 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
-import { C as FolderIcon, S as FileIcon, p as ChevronRightIcon, w as FolderOpenIcon } from "./icons-Dw-im7lg.js";
+import { C as FolderIcon, S as FileIcon, p as ChevronRightIcon, w as FolderOpenIcon } from "./icons-DbrksZyY.js";
 import { t as NavigationLink } from "./navigation-link-kqMa81v5.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{ResponsiveSidebarShell-DOXd5T-d.d.ts → ResponsiveSidebarShell-BTVPxLJK.d.ts}

@@ -72,6 +72,14 @@ interface ResponsiveSidebarShellProps extends Omit<React.HTMLAttributes<HTMLDivE
   children?: React.ReactNode;
   /** Short noun used by the toggle and resize control, such as “threads” or “schedules”. */
   sidebarLabel?: string;
+  /** Whether the sidebar is open. Omit for internal state. */
+  sidebarOpen?: boolean;
+  /** Move the wide-layout toggle into the sidebar while it is open. */
+  sidebarTogglePlacement?: "main" | "sidebar";
+  /** Initial sidebar state when `sidebarOpen` is uncontrolled. */
+  defaultSidebarOpen?: boolean;
+  /** Called when the sidebar is opened or closed. */
+  onSidebarOpenChange?: (open: boolean) => void;
   /** Initial desktop sidebar width in CSS pixels. */
   defaultSidebarWidth?: number;
   /** Shell-owned application bar composed from slots. */
@@ -95,7 +103,11 @@ interface ResponsiveSidebarShellProps extends Omit<React.HTMLAttributes<HTMLDivE
 declare function ResponsiveSidebarShell({
   sidebar,
   sidebarLabel,
+  sidebarOpen,
+  sidebarTogglePlacement,
+  defaultSidebarOpen,
   defaultSidebarWidth,
+  onSidebarOpenChange,
   bar,
   error,
   showMainLabel,

package/dist/{SetupChecklist-DOp-zqjh.js → SetupChecklist-CZeToAbu.js}

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "./class-names-BiMDVpUo.js";
-import { V as PlusIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon } from "./icons-Dw-im7lg.js";
+import { V as PlusIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon } from "./icons-DbrksZyY.js";
 import { Button } from "./components/foundations/Button.js";
 import { Menu } from "./components/foundations/Menu.js";
 import * as React from "react";

package/dist/{ThinkChat-BES_3Mb-.js → ThinkChat-CWMcl79Q.js}

@@ -1,13 +1,12 @@
 import { TransitionSurface } from "./components/foundations/TransitionSurface.js";
+import { AgentToolRunsProvider, useSourceScopedAgentToolEvents } from "./components/agents-sdk/AgentToolRunsContext.js";
 import { AgentChat, compactingNotice } from "./components/agents-sdk/AgentChat.js";
-import { AgentToolRunsProvider, useOptionalAgentToolRuns, useSourceScopedAgentToolEvents } from "./components/agents-sdk/AgentToolRunsContext.js";
-import { SubagentRunList } from "./components/agents-sdk/SubagentRunList.js";
 import { ThinkChatContext, ThinkChatLiveContext, useOptionalThinkChatContext, useThinkChatContext } from "./components/agents-sdk/ThinkChatContext.js";
 import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./components/agents-sdk/ThinkChatActivity.js";
 import { ThinkRecoveryNotice } from "./components/agents-sdk/ThinkRecoveryNotice.js";
 import { t as WorkspaceMessageResponse } from "./WorkspaceMessageResponse-CJCmGvTx.js";
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { isTextUIPart } from "ai";
 import { useAgentChat } from "@cloudflare/think/react";
 import { useAgent } from "agents/react";
@@ -195,9 +194,8 @@ const ThinkChatApprovalsContext = React.createContext(null);
 * inside the log) or `excludeTools` + your own `renderPart` (standalone
 * card) — see README "App-specific tools" and the Custom Tool Panel story.
 */
-function ThinkChatMessages({ composerHeader, draft, loading, renderPart, excludeTools, renderAgentToolRunLink, renderWorkspaceHtmlArtifact, toolRenderers, thinkStub, onExecutionSettled, pendingApprovals, notice, sessionCompaction, ...props }) {
+function ThinkChatMessages({ draft, loading, renderPart, excludeTools, renderAgentToolRunLink, renderWorkspaceHtmlArtifact, toolRenderers, thinkStub, onExecutionSettled, pendingApprovals, notice, sessionCompaction, ...props }) {
 	const chat = useOptionalThinkChatContext();
-	const agentTools = useOptionalAgentToolRuns();
 	const approvals = React.useContext(ThinkChatApprovalsContext);
 	const resolvedApprovals = resolveThinkApprovalProps({
 		thinkStub,
@@ -259,19 +257,6 @@ function ThinkChatMessages({ composerHeader, draft, loading, renderPart, exclude
 		children: [compactionSizeText(landedCompaction), " Context usage updates after your next message."]
 	}) : null;
 	const recoveryActive = chat && (chat.isRecovering || chat.connectionError || chat.error);
-	const backgroundRuns = renderAgentToolRunLink ? agentTools?.unboundRuns : void 0;
-	const resolvedComposerHeader = composerHeader || backgroundRuns?.length ? /* @__PURE__ */ jsxs(Fragment, { children: [composerHeader, backgroundRuns?.length && renderAgentToolRunLink ? /* @__PURE__ */ jsxs("div", {
-		className: "subagent-run__tray",
-		"data-slot": "background-agent-runs",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "subagent-run__tray-label",
-			children: "Background agents"
-		}), /* @__PURE__ */ jsx(SubagentRunList, {
-			"aria-label": "Background agent runs",
-			runs: backgroundRuns,
-			renderRunLink: renderAgentToolRunLink
-		})]
-	}) : null] }) : void 0;
 	const submit = ({ text, files, references }, send) => {
 		setDismissedCompaction(sessionCompaction?.lastCompaction ?? null);
 		const prompt = [...references?.map(({ trigger, value }) => trigger ? `${trigger}${value}` : value) ?? [], text.trim()].filter(Boolean).join(" ");
@@ -288,7 +273,6 @@ function ThinkChatMessages({ composerHeader, draft, loading, renderPart, exclude
 		messages: EMPTY_DRAFT_MESSAGES,
 		status: "ready",
 		notice,
-		composerHeader: resolvedComposerHeader,
 		loading: true
 	});
 	if (!chat) {
@@ -299,7 +283,6 @@ function ThinkChatMessages({ composerHeader, draft, loading, renderPart, exclude
 			messages: draft.messages ?? EMPTY_DRAFT_MESSAGES,
 			status: draft.status ?? "ready",
 			notice: notice ?? sessionCompactionNotice,
-			composerHeader: resolvedComposerHeader,
 			onSubmit: (message) => submit(message, draft.onSubmit)
 		});
 	}
@@ -314,7 +297,6 @@ function ThinkChatMessages({ composerHeader, draft, loading, renderPart, exclude
 		onExecutionSettled: resolvedApprovals.onExecutionSettled,
 		pendingApprovals: resolvedApprovals.pendingApprovals,
 		notice: notice ?? (recoveryActive ? defaultNotice : sessionCompactionNotice),
-		composerHeader: resolvedComposerHeader,
 		onRegenerate: (messageId) => void chat.regenerate({ messageId }),
 		onSubmit: (message) => submit(message, chat.sendMessage)
 	});

package/dist/{WorkspaceFileView-BublZXky.js → WorkspaceFileView-DJ8Oxz57.js}

@@ -1,7 +1,7 @@
-import { b as EyeIcon, d as CheckIcon, et as WarningIcon, k as MaximizeIcon, m as CodeIcon, r as ArrowLeftIcon, v as DownloadIcon } from "./icons-Dw-im7lg.js";
-import { r as formatClock } from "./format-DB2mX9DA.js";
+import { b as EyeIcon, d as CheckIcon, et as WarningIcon, k as MaximizeIcon, m as CodeIcon, r as ArrowLeftIcon, v as DownloadIcon } from "./icons-DbrksZyY.js";
+import { i as formatClock } from "./format-COCyV98Z.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-8K1p1BDU.js";
 import { AppTopBar } from "./components/general-purpose/AppTopBar.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-Dl7a3Wqo.js";
 import { inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceSkillPath, parseWorkspaceSkill } from "./components/agents-sdk/WorkspaceFile.js";
 import { c as useWorkspaceNavigationContext, s as useWorkspaceNavigationRestoration } from "./WorkspaceLink-DtH66bAY.js";
 import { n as createWorkspaceRehypePlugins, t as WorkspaceMessageResponse } from "./WorkspaceMessageResponse-CJCmGvTx.js";

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

@@ -1,5 +1,5 @@
 import { canRequestFavicon, inferFaviconUrl } from "../../utils/favicon.js";
-import { D as LinkIcon, P as MonitorIcon, Q as TerminalIcon, S as FileIcon, T as InfoIcon, W as SearchIcon, et as WarningIcon, tt as WrenchIcon, z as PencilIcon } from "../../icons-Dw-im7lg.js";
+import { D as LinkIcon, P as MonitorIcon, Q as TerminalIcon, S as FileIcon, T as InfoIcon, W as SearchIcon, et as WarningIcon, tt as WrenchIcon, z as PencilIcon } from "../../icons-DbrksZyY.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/AgentActivity.tsx

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

@@ -1,26 +1,27 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { $ as TrashIcon, H as QueueIcon, I as MoveToFrontIcon, U as RefreshIcon, V as PlusIcon, q as SpinnerIcon, t as ArchiveIcon, z as PencilIcon } from "../../icons-Dw-im7lg.js";
+import { ExpansionStateProvider } from "../ai-sdk/ExpansionState.js";
+import { $ as TrashIcon, H as QueueIcon, I as MoveToFrontIcon, U as RefreshIcon, V as PlusIcon, q as SpinnerIcon, t as ArchiveIcon, z as PencilIcon } from "../../icons-DbrksZyY.js";
 import { Button } from "../foundations/Button.js";
+import { AgentChatMessageEditor } from "../ai-sdk/AgentChatMessageEditor.js";
 import { IconButton } from "../foundations/IconButton.js";
+import { Menu } from "../foundations/Menu.js";
+import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputPermissionSelector, PromptInputReferences, PromptInputSubmit, PromptInputTextarea, PromptInputTools, PromptInputTray, usePromptInputAttachments } from "../ai-sdk/PromptInput.js";
+import { AgentChatStartScreen } from "../ai-sdk/AgentChatStartScreen.js";
 import { Message, MessageAction, MessageActions, MessageMeta, MessageTimestamp } from "../ai-sdk/Message.js";
-import { ExpansionStateProvider } from "../ai-sdk/ExpansionState.js";
 import { AgentMessageParts } from "../ai-sdk/AgentMessageParts.js";
+import { Marker, MarkerContent } from "../foundations/Marker.js";
+import { t as CopyButton } from "../../copy-button-BpA7wQva.js";
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "../ai-sdk/Context.js";
-import { EmptyState } from "../foundations/EmptyState.js";
 import { VirtualMessageScroller } from "../ai-sdk/MessageScrollerVirtual.js";
 import { QueueItem, QueueItemActions, QueueItemContent } from "../ai-sdk/Queue.js";
-import { Menu } from "../foundations/Menu.js";
-import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputPermissionSelector, PromptInputReferences, PromptInputSubmit, PromptInputTextarea, PromptInputTools, PromptInputTray, usePromptInputAttachments } from "../ai-sdk/PromptInput.js";
-import { AgentChatStartScreen } from "../ai-sdk/AgentChatStartScreen.js";
-import { AgentChatMessageEditor } from "../ai-sdk/AgentChatMessageEditor.js";
-import { Marker, MarkerContent } from "../foundations/Marker.js";
+import { EmptyState } from "../foundations/EmptyState.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
+import { AgentEventRow, getAgentEvent } from "./AgentEvent.js";
 import { PromptInputApproval, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals } from "./PromptInputApproval.js";
-import { t as CopyButton } from "../../copy-button-DHhf-J1d.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { isCompactionMessage } from "agents/experimental/memory/utils";
 import { isTextUIPart } from "ai";
+import { isCompactionMessage } from "agents/experimental/memory/utils";
 //#region src/components/agents-sdk/AgentChat.tsx
 /**
 * Agents exports this helper from `agents/sessions` after cloudflare/agents#1896;
@@ -175,9 +176,13 @@ function isCompactedPart(message, partIndex) {
 function AgentChatTranscriptRowBodyImpl({ message, messageIndex, status, renderPart, renderMessageAfter, editing, canEdit, editDisabled, onEditAndResend, onStartEdit, onCancelEdit, onFinishEdit, editButtonRef, responseNumber, showAssistantActions, showCopy, showRetry, onRegenerate, onCopyStatus }) {
 	const messageTime = getAgentChatMessageTime(message);
 	const userText = getEditableUserText(message);
+	const agentEvent = getAgentEvent(message);
 	return /* @__PURE__ */ jsx(Fragment, { children: isCompactionMessage(message) ? /* @__PURE__ */ jsx(Marker, {
 		variant: "separator",
 		children: /* @__PURE__ */ jsx(MarkerContent, { children: "Context compacted" })
+	}) : agentEvent ? /* @__PURE__ */ jsx(AgentEventRow, {
+		message,
+		event: agentEvent
 	}) : /* @__PURE__ */ jsx(Message, {
 		from: message.role,
 		children: editing && onEditAndResend ? /* @__PURE__ */ jsx(AgentChatMessageEditor, {
@@ -482,9 +487,9 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 		composerInputRef.current?.focus();
 	}, [pendingApprovalKey]);
 	const contextUsage = contextWindow ? getContextUsage(messages) : void 0;
-	const newestAssistantIndex = messages.findLastIndex((message) => message.role === "assistant" && !isCompactionMessage(message));
+	const newestAssistantIndex = messages.findLastIndex((message) => message.role === "assistant" && !isCompactionMessage(message) && !getAgentEvent(message));
 	const lastAssistantIndex = onRegenerate && status !== "streaming" && status !== "submitted" ? newestAssistantIndex : -1;
-	const lastUserIndex = onEditAndResend ? messages.findLastIndex((message) => message.role === "user") : -1;
+	const lastUserIndex = onEditAndResend ? messages.findLastIndex((message) => message.role === "user" && !getAgentEvent(message)) : -1;
 	const [editingMessageId, setEditingMessageId] = React.useState();
 	const restoreEditFocus = React.useRef(false);
 	const editButtonRef = React.useRef(null);
@@ -502,7 +507,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 	}, []);
 	let assistantResponseCount = 0;
 	const assistantResponseNumbers = messages.map((message) => {
-		if (message.role !== "assistant" || isCompactionMessage(message)) return 0;
+		if (message.role !== "assistant" || isCompactionMessage(message) || getAgentEvent(message)) return 0;
 		assistantResponseCount += 1;
 		return assistantResponseCount;
 	});

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { UIMessage } from "ai";
+
+//#region src/components/agents-sdk/AgentEvent.d.ts
+interface AgentEvent {
+  source: string;
+  runId?: string;
+  /** Terminal status of the run this completion notice reports. */
+  status?: string;
+  /** Milestone name when the turn is a mid-run report, absent for a completion. */
+  milestone?: string;
+}
+/**
+ * Classify a framework-injected background-run message. Think persists a
+ * `submitMessages` turn's metadata under `metadata.turnMetadata` on the
+ * user-role message it appends (a completion notice, a `react` milestone), and
+ * puts a `narrate` milestone's metadata directly on the assistant message it
+ * adds — so both shapes are read. Anything else is an ordinary message.
+ */
+declare function getAgentEvent(message: UIMessage): AgentEvent | null;
+interface AgentEventRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  message: UIMessage;
+  event: AgentEvent;
+}
+/**
+ * One collapsed transcript row for a background run's report or completion
+ * notice: who reported, what happened, and the first line of what it said;
+ * expanding shows the whole text the model received. The run's name comes
+ * from the parent's retained-run projection when the row is inside an
+ * `AgentToolRunsProvider`.
+ */
+declare function AgentEventRow({
+  className,
+  event,
+  message,
+  ref,
+  ...props
+}: AgentEventRowProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { AgentEvent, AgentEventRow, AgentEventRowProps, getAgentEvent };

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

@@ -0,0 +1,96 @@
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { Activity, ActivityContent, ActivityText, ActivityTrigger } from "../ai-sdk/Activity.js";
+import { r as firstLine } from "../../format-COCyV98Z.js";
+import { MessageResponse } from "../ai-sdk/Message.js";
+import { NaniteMark } from "../nanites/NaniteScene.js";
+import { getSubagentRunName } from "./SubagentRunIndicator.js";
+import { useOptionalAgentToolRuns } from "./AgentToolRunsContext.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isTextUIPart } from "ai";
+//#region src/components/agents-sdk/AgentEvent.tsx
+/**
+* `metadata.source` values Think stamps on the turns it injects for a
+* detached (background) agent-tool run: upstream's default and the source the
+* browser host passes for a delegated run's completion and milestone reports.
+* A turn tagged with one of these was written by the runtime, not typed by the
+* person, so the transcript renders it as an agent event rather than a user
+* bubble.
+*/
+const AGENT_EVENT_SOURCES = /* @__PURE__ */ new Set(["delegate-completion", "detached-agent-tool"]);
+function stringField(record, key) {
+	const value = record[key];
+	return typeof value === "string" ? value : void 0;
+}
+/**
+* Classify a framework-injected background-run message. Think persists a
+* `submitMessages` turn's metadata under `metadata.turnMetadata` on the
+* user-role message it appends (a completion notice, a `react` milestone), and
+* puts a `narrate` milestone's metadata directly on the assistant message it
+* adds — so both shapes are read. Anything else is an ordinary message.
+*/
+function getAgentEvent(message) {
+	const metadata = message.metadata;
+	if (!metadata || typeof metadata !== "object") return null;
+	const record = metadata;
+	const turnMetadata = record.turnMetadata;
+	const candidate = turnMetadata && typeof turnMetadata === "object" ? turnMetadata : record;
+	const source = stringField(candidate, "source");
+	if (source === void 0 || !AGENT_EVENT_SOURCES.has(source)) return null;
+	return {
+		source,
+		runId: stringField(candidate, "runId"),
+		status: stringField(candidate, "status"),
+		milestone: stringField(candidate, "milestone")
+	};
+}
+function eventVerb(event) {
+	if (event.milestone) return "reported";
+	switch (event.status) {
+		case "completed": return "finished";
+		case "error": return "failed";
+		case "aborted": return "was cancelled";
+		case "interrupted": return "was interrupted";
+		default: return "ended";
+	}
+}
+/**
+* Both formatters — Think's `formatDetachedCompletion` and the host's
+* milestone override — open with a one-line `Background task "…" (run …)`
+* heading and put the child's own words in the next paragraph. The row's own
+* action line already says that much, so the preview starts after it.
+*/
+const RUNTIME_HEADING = /^Background task .*?\n\n/u;
+/** The first line of the event's own words, without the runtime heading. */
+function agentEventPreview(text) {
+	return firstLine(text.replace(RUNTIME_HEADING, "")) || void 0;
+}
+/**
+* One collapsed transcript row for a background run's report or completion
+* notice: who reported, what happened, and the first line of what it said;
+* expanding shows the whole text the model received. The run's name comes
+* from the parent's retained-run projection when the row is inside an
+* `AgentToolRunsProvider`.
+*/
+function AgentEventRow({ className, event, message, ref, ...props }) {
+	const agentTools = useOptionalAgentToolRuns();
+	const run = event.runId ? agentTools?.runsById[event.runId] : void 0;
+	const name = run ? getSubagentRunName(run) : "Background task";
+	const text = message.parts.filter(isTextUIPart).map((part) => part.text).join("\n").trim();
+	return /* @__PURE__ */ jsxs(Activity, {
+		ref,
+		"data-slot": "agent-event",
+		"data-source": event.source,
+		"data-status": event.status,
+		className: cx("agent-event", className),
+		stateKey: `agent-event:${message.id}`,
+		...props,
+		children: [/* @__PURE__ */ jsx(ActivityTrigger, {
+			icon: /* @__PURE__ */ jsx(NaniteMark, { index: run?.order }),
+			action: `${name} ${eventVerb(event)}`,
+			detail: agentEventPreview(text)
+		}), /* @__PURE__ */ jsx(ActivityContent, { children: /* @__PURE__ */ jsx(ActivityText, { children: /* @__PURE__ */ jsx(MessageResponse, { children: text }) }) })]
+	});
+}
+//#endregion
+export { AgentEventRow, getAgentEvent };

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

@@ -1,2 +1,2 @@
-import { a as useOptionalAgentToolRuns, i as AgentToolRunsProviderProps, n as AgentToolEventsValue, o as useSourceScopedAgentToolEvents, r as AgentToolRunsProvider, t as AgentToolEventSource } from "../../AgentToolRunsContext-daY67hFM.js";
+import { a as useOptionalAgentToolRuns, i as AgentToolRunsProviderProps, n as AgentToolEventsValue, o as useSourceScopedAgentToolEvents, r as AgentToolRunsProvider, t as AgentToolEventSource } from "../../AgentToolRunsContext-jtmveaRE.js";
 export { AgentToolEventSource, AgentToolEventsValue, AgentToolRunsProvider, AgentToolRunsProviderProps, useOptionalAgentToolRuns, useSourceScopedAgentToolEvents };

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

@@ -14,20 +14,24 @@ import { useAgentToolEvents } from "agents/react";
 * The subscription's listener attaches in a passive effect, after paint. A
 * host whose transport is in-process (the browser extension's port bridge)
 * can complete the connect and deliver the replay before that effect runs —
-* reliably so on a hot return from a drill-in. Upstream owns the fix:
-* `useAgent` buffers `agent-tool-event` frames from socket construction and
-* `useAgentToolEvents` drains them when its listener attaches (agents >
-* 0.20.1; `_bufferAgentToolReplayFrame` is the seam for a non-`useAgent`
-* socket). On older versions such hosts must buffer and re-dispatch
-* themselves — think-browser-host's `useThinkAgentToolEvents` is that
-* interim shim. Network transports are not affected in practice: the round
+* reliably so on a hot return from a drill-in. The fix lives in the Agents
+* SDK, not here: `useAgent` buffers `agent-tool-event` frames from socket
+* construction and `useAgentToolEvents` drains them when its listener
+* attaches (`_bufferAgentToolReplayFrame` is the seam for a non-`useAgent`
+* socket). As of agents 0.21.0 that is still the browser host's vendored
+* edit, not a published release; a host on the published package has to
+* buffer and re-dispatch the frames around its own socket before this hook
+* can see them. Network transports are not affected in practice: the round
 * trip loses to the effect flush.
 */
 function useSourceScopedAgentToolEvents(agent) {
 	const agentTools = useAgentToolEvents({ agent });
 	const sourceIdentity = JSON.stringify(agent.path);
 	const resetAgentTools = React.useEffectEvent(() => agentTools.resetLocalState());
+	const seenIdentity = React.useRef(sourceIdentity);
 	React.useEffect(() => {
+		if (seenIdentity.current === sourceIdentity) return;
+		seenIdentity.current = sourceIdentity;
 		resetAgentTools();
 	}, [sourceIdentity]);
 	return agentTools;

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

@@ -1,4 +1,4 @@
-import { E as KeyboardIcon, U as RefreshIcon, r as ArrowLeftIcon } from "../../icons-Dw-im7lg.js";
+import { E as KeyboardIcon, U as RefreshIcon, r as ArrowLeftIcon } from "../../icons-DbrksZyY.js";
 import { Button } from "../foundations/Button.js";
 import { WebPreviewNavigationButton } from "../general-purpose/WebPreview.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { _ as DotIcon, k as MaximizeIcon, q as SpinnerIcon } from "../../icons-Dw-im7lg.js";
+import { _ as DotIcon, k as MaximizeIcon, q as SpinnerIcon } from "../../icons-DbrksZyY.js";
 import { Button } from "../foundations/Button.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";

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

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { B as PlayIcon, R as PauseIcon } from "../../icons-Dw-im7lg.js";
+import { B as PlayIcon, R as PauseIcon } from "../../icons-DbrksZyY.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { r as formatClock } from "../../format-DB2mX9DA.js";
+import { i as formatClock } from "../../format-COCyV98Z.js";
 import { EmptyState } from "../foundations/EmptyState.js";
 import { Slider } from "../foundations/Slider.js";
 import * as React from "react";

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { nt as XIcon, q as SpinnerIcon } from "../../icons-Dw-im7lg.js";
+import { nt as XIcon, q as SpinnerIcon } from "../../icons-DbrksZyY.js";
 import { Tabs } from "../foundations/Tabs.js";
 import { WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl } from "../general-purpose/WebPreview.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";

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

@@ -1,13 +1,12 @@
+import { n as ResponsiveSidebarShell } from "../../ResponsiveSidebarShell-BTVPxLJK.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/ManagerOffice.d.ts
 type ManagerOfficeWorkStatus = "idle" | "running" | "attention" | "error" | "interrupted";
-/**
- * The rail already lists every employee, so there is no separate roster view:
- * the office opens on the one thing that needs a person, and an employee is a
- * selection in the rail rather than a page reached through a second list.
- */
+/** The app-owned projection currently shown by the manager office. */
 type ManagerOfficeView = {
+  kind: "dashboard";
+} | {
   kind: "attention";
 } | {
   kind: "employee";
@@ -40,6 +39,8 @@ interface ManagerOfficeWork {
   title: string;
   /** Canonical thread lifecycle status. */
   status: ManagerOfficeWorkStatus;
+  /** Concise result shown to managers when the work is ready for review. */
+  summary?: string;
   /** Unix timestamp in milliseconds of the latest lifecycle transition. */
   updatedAt: number;
 }
@@ -75,6 +76,30 @@ interface ManagerOfficeChannel {
    */
   icon?: React.ReactNode;
 }
+interface ManagerOfficeBrowserPreview {
+  /** Title of the tab currently visible on the employee's browser. */
+  title: string;
+  /** Display-safe URL supplied by the host. */
+  url: string;
+}
+interface ManagerOfficeAnalyticsPoint {
+  /** Start of the reporting bucket as a Unix timestamp in milliseconds. */
+  timestamp: number;
+  /** Outcomes completed during this bucket. */
+  completed: number;
+  /** Employee runtime consumed during this bucket. */
+  workloadHours: number;
+  /** Host-estimated inference and tool cost during this bucket. */
+  estimatedCost: number;
+}
+interface ManagerOfficeEmployeeAnalytics {
+  employeeId: string;
+  points: readonly ManagerOfficeAnalyticsPoint[];
+}
+interface ManagerOfficeReportSelection {
+  employeeIds: readonly string[];
+  rangeDays: 7 | 30 | 90;
+}
 interface ManagerOfficeEmployeeBase {
   /** Stable employee identity used by routes and list keys. */
   id: string;
@@ -94,6 +119,8 @@ interface ManagerOfficeConnectedEmployee extends ManagerOfficeEmployeeBase {
   routines: readonly ManagerOfficeRoutine[];
   /** Every service the employee reads from or acts on. Empty is meaningful. */
   channels: readonly ManagerOfficeChannel[];
+  /** The live tab the manager can glance at from the office. */
+  browserPreview?: ManagerOfficeBrowserPreview;
 }
 interface ManagerOfficeDisconnectedEmployee extends ManagerOfficeEmployeeBase {
   status: "offline" | "connecting" | "unavailable";
@@ -127,6 +154,9 @@ type ManagerOfficeDestination = {
 } | {
   kind: "new-work";
   employee: ManagerOfficeConnectedEmployee;
+} | {
+  kind: "new-routine";
+  employee: ManagerOfficeConnectedEmployee;
 } | {
   kind: "workspace";
   employee: ManagerOfficeConnectedEmployee;
@@ -138,8 +168,10 @@ interface ManagerOfficeProps extends React.HTMLAttributes<HTMLDivElement> {
   employees: readonly ManagerOfficeEmployee[];
   /** Returns an app-owned route element for every office destination. */
   renderLink: (destination: ManagerOfficeDestination) => React.ReactElement;
-  /** Add/sign-out controls rendered in the office rail. */
+  /** Add/sign-out controls rendered in the app bar or office rail. */
   officeActions?: React.ReactNode;
+  /** Place the wide-layout Workforce toggle. Defaults to the Workforce sidebar. */
+  sidebarTogglePlacement?: React.ComponentProps<typeof ResponsiveSidebarShell>["sidebarTogglePlacement"];
   /**
    * Actions rendered for the selected connected employee. Compose interactive
    * controls through `AppTopBar.Control` so they join the toolbar.
@@ -147,22 +179,84 @@ interface ManagerOfficeProps extends React.HTMLAttributes<HTMLDivElement> {
   renderEmployeeActions?: (employee: ManagerOfficeConnectedEmployee) => React.ReactNode;
   /** Action shown in the empty office. */
   emptyOfficeAction?: React.ReactNode;
+  /** Per-employee reporting buckets used by the executive analytics view. */
+  analytics?: readonly ManagerOfficeEmployeeAnalytics[];
+  /** Currency used for cost estimates. Defaults to USD. */
+  analyticsCurrency?: string;
+  /** Export the exact filtered portfolio and time range currently on screen. */
+  onExportReport?: (selection: ManagerOfficeReportSelection) => void;
 }
+interface ManagerOfficeSidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, "content"> {
+  /** Close the office drawer after a compact-width selection. */
+  closeSidebarOnCompact?: () => void;
+  /** Employees projected from their owning runtimes. */
+  employees: readonly ManagerOfficeEmployee[];
+  /** App-owned route element for an employee selection. */
+  renderLink: ManagerOfficeProps["renderLink"];
+  /** Add/sign-out/toggle controls rendered beside Workforce. */
+  officeActions?: React.ReactNode;
+  /** Employee whose row and optional nested content are active. */
+  selectedEmployeeId?: string | null;
+  /** App-specific selected-employee content shown after the switcher. */
+  content?: React.ReactNode;
+  /** Persistent sidebar action, such as starting a conversation with the selected employee. */
+  footer?: React.ReactNode;
+}
+type ManagerOfficeSidebarAlertProps = {
+  "aria-label"?: string;
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>; /** Primary actionable issue title. */
+  title: React.ReactNode; /** Quiet owning-work or source context. */
+  detail?: React.ReactNode;
+} & ({
+  href: string;
+  render?: never;
+} | {
+  render: React.ReactElement;
+  href?: never;
+});
+/** Dense nested action for an employee alert already signalled by the roster status. */
+declare function ManagerOfficeSidebarAlert({
+  className,
+  detail,
+  title,
+  ...props
+}: ManagerOfficeSidebarAlertProps): React.JSX.Element;
+/**
+ * Shared Manager Office rail. Stories and host shells may add employee-owned
+ * content, but the Workforce header, roster identity, status language, scrolling,
+ * and footer placement stay component-owned and therefore cannot drift.
+ */
+declare function ManagerOfficeSidebar({
+  className,
+  closeSidebarOnCompact,
+  content,
+  employees,
+  renderLink,
+  footer,
+  officeActions,
+  selectedEmployeeId,
+  ...props
+}: ManagerOfficeSidebarProps): React.JSX.Element;
 /**
- * Multi-employee manager office: aggregate handoffs, employee roster, and one
- * employee dossier. The consuming app owns authentication, Agent connections,
- * routing, and the selected employee's full work surface.
+ * Multi-employee manager office: a dashboard, aggregate handoffs, employee
+ * roster, and one employee dossier. The consuming app owns authentication,
+ * Agent connections, routing, and the selected employee's full work surface.
  */
 declare function ManagerOffice({
+  analytics,
+  analyticsCurrency,
   className,
   emptyOfficeAction,
   employees,
   renderLink,
   officeActions,
+  onExportReport,
   renderEmployeeActions,
+  sidebarTogglePlacement,
   style,
   view,
   ...props
 }: ManagerOfficeProps): React.JSX.Element;
 //#endregion
-export { ManagerOffice, ManagerOfficeChannel, ManagerOfficeChannelDirection, ManagerOfficeChannelStatus, ManagerOfficeConnectedEmployee, ManagerOfficeDestination, ManagerOfficeDisconnectedEmployee, ManagerOfficeEmployee, ManagerOfficeEmployeeStatus, ManagerOfficeHandoff, ManagerOfficeProps, ManagerOfficeRoutine, ManagerOfficeView, ManagerOfficeWork, ManagerOfficeWorkStatus };
+export { ManagerOffice, ManagerOfficeAnalyticsPoint, ManagerOfficeBrowserPreview, ManagerOfficeChannel, ManagerOfficeChannelDirection, ManagerOfficeChannelStatus, ManagerOfficeConnectedEmployee, ManagerOfficeDestination, ManagerOfficeDisconnectedEmployee, ManagerOfficeEmployee, ManagerOfficeEmployeeAnalytics, ManagerOfficeEmployeeStatus, ManagerOfficeHandoff, ManagerOfficeProps, ManagerOfficeReportSelection, ManagerOfficeRoutine, ManagerOfficeSidebar, ManagerOfficeSidebarAlert, ManagerOfficeSidebarAlertProps, ManagerOfficeSidebarProps, ManagerOfficeView, ManagerOfficeWork, ManagerOfficeWorkStatus };