@mcp-b/react-components 0.48.0 → 0.49.1

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

@@ -1,4 +1,4 @@
-import { o as McpServerCard } from "../../mcp-server-catalog-C_g7C-9o.js";
+import { McpServerCard } from "../../utils/mcp-server-catalog.js";
 import * as React from "react";
 import { DynamicToolUIPart, ToolUIPart } from "ai";
 import { MCPServersState } from "agents";
@@ -20,10 +20,10 @@ interface McpConnectionRequestBaseProps extends Omit<React.HTMLAttributes<HTMLDi
   onDecline?: () => void | Promise<void>;
 }
 type McpConnectionRequestProps = (McpConnectionRequestBaseProps & {
-  /** A live authorization outcome must identify its assigned Agents MCP entry. */outcome: "authorization-required";
+  /** A live authorization outcome must identify its assigned Agents MCP entry. */outcome: "authorization-required"; /** Agents MCP entry assigned to this authorization request. */
   serverId: string;
 }) | (McpConnectionRequestBaseProps & {
-  /** App-validated terminal outcome, or omitted while the request is active. */outcome?: Exclude<McpConnectionRequestOutcome, "authorization-required">;
+  /** App-validated terminal outcome, or omitted while the request is active. */outcome?: Exclude<McpConnectionRequestOutcome, "authorization-required">; /** Unused unless the outcome requires authorization. */
   serverId?: never;
 });
 /**
@@ -32,7 +32,7 @@ type McpConnectionRequestProps = (McpConnectionRequestBaseProps & {
  * same `onConnect` seam instead of introducing recovery operations.
  */
 declare function McpConnectionRequest(props: McpConnectionRequestProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
 export { McpConnectionRequest, McpConnectionRequestOutcome, McpConnectionRequestProps };

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

@@ -1,10 +1,11 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { K as SpinnerIcon, d as CheckIcon, et as WarningIcon } from "../../icons-CeGfXO21.js";
+import { K as SpinnerIcon, d as CheckIcon, et as WarningIcon } from "../../icons-cuEtsgj9.js";
 import { Button } from "../foundations/Button.js";
-import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
-import { r as getMcpServerProjection, t as McpServerIcon } from "../../mcp-server-7NR24ASj.js";
+import { McpServerIcon } from "./McpServerIcon.js";
 import { DescriptionList } from "../foundations/DescriptionList.js";
+import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
+import { t as getMcpServerProjection } from "../../mcp-server-mAErsxHU.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getToolPartState } from "@cloudflare/think/react";

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

@@ -1,2 +1,39 @@
-import { n as McpConnectorFormProps, r as McpConnectorFormValues, t as McpConnectorForm } from "../../McpConnectorForm-CeYNY0MI.js";
+import { McpServerSetupAuth, McpServerSetupAuthFieldName } from "../../utils/mcp-server-catalog.js";
+import * as React from "react";
+
+//#region src/components/agents-sdk/McpConnectorForm.d.ts
+type CredentialFieldName = Exclude<McpServerSetupAuthFieldName, "redirectUrl">;
+type McpConnectorFormValues = Readonly<Partial<Record<CredentialFieldName, string>> & {
+  readonly name: string;
+  readonly url: string;
+}>;
+type McpConnectorFormProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "status"> & {
+  /** Authentication metadata that decides which credential fields render. */readonly auth?: McpServerSetupAuth; /** Initial connector values. Publisher client credentials remain app-owned. */
+  readonly defaults?: Partial<McpConnectorFormValues>; /** Optional pattern used to validate the MCP name field. */
+  readonly namePattern?: string; /** Keep a catalog-owned MCP name and URL visible but immutable. */
+  readonly readOnlyServer?: boolean; /** Read-only redirect URL shown for manual OAuth client setup. */
+  readonly redirectUrl?: string; /** Inline connection status announced politely to assistive tech. */
+  readonly status?: React.ReactNode; /** Label for the submit button. */
+  readonly submitLabel?: string; /** Label shown while submit is pending. */
+  readonly submittingLabel?: string; /** Called with normalized connector values after native form validation passes. */
+  readonly onSubmit: (values: McpConnectorFormValues) => void | Promise<void>;
+};
+/** Collects MCP connector settings and optional credentials with native form validation. */
+declare function McpConnectorForm({
+  auth,
+  className,
+  defaults,
+  namePattern,
+  readOnlyServer,
+  redirectUrl,
+  status,
+  submitLabel,
+  submittingLabel,
+  onSubmit,
+  ref,
+  ...props
+}: McpConnectorFormProps & {
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLFormElement>;
+}): React.JSX.Element;
+//#endregion
 export { McpConnectorForm, McpConnectorFormProps, McpConnectorFormValues };

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

@@ -1,9 +1,9 @@
 import { CUSTOM_MCP_SERVER_CARD } from "../../utils/mcp-server-catalog.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Button } from "../foundations/Button.js";
+import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import { Field } from "../foundations/Field.js";
 import { Form } from "../foundations/Form.js";
-import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import { Fieldset } from "../foundations/Fieldset.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,2 +1,94 @@
-import { a as McpPluginDetailsDialogProps, i as McpPluginDetailsDialog, n as McpPluginCatalogProps, r as McpPluginDetails, t as McpPluginCatalog } from "../../McpPluginCatalog-3qWu8oK1.js";
+import { McpServerCard } from "../../utils/mcp-server-catalog.js";
+import { McpConnectorFormValues } from "./McpConnectorForm.js";
+import { DialogProps } from "../foundations/Dialog.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;
+  /** Accessible label and placeholder for the plugin filter. */
+  searchLabel?: string;
+  /** Content shown when no plugins match the current filter. */
+  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
 export { McpPluginCatalog, McpPluginCatalogProps, McpPluginDetails, McpPluginDetailsDialog, McpPluginDetailsDialogProps };

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

@@ -1,15 +1,16 @@
 import { CUSTOM_MCP_SERVER_CARD } from "../../utils/mcp-server-catalog.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { B as PlusIcon, K as SpinnerIcon, et as WarningIcon, nt as XIcon, o as ArrowUpRightIcon, y as EllipsisIcon } from "../../icons-CeGfXO21.js";
+import { B as PlusIcon, K as SpinnerIcon, et as WarningIcon, nt as XIcon, o as ArrowUpRightIcon, y as EllipsisIcon } from "../../icons-cuEtsgj9.js";
 import { Button } from "../foundations/Button.js";
-import { AgentAttention, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import { AppIcon } from "../foundations/AppIcon.js";
-import { r as getMcpServerProjection, t as McpServerIcon } from "../../mcp-server-7NR24ASj.js";
-import { Separator } from "../foundations/Separator.js";
+import { McpServerIcon } from "./McpServerIcon.js";
 import { SearchField } from "../foundations/SearchField.js";
+import { Separator } from "../foundations/Separator.js";
+import { AgentAttention, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
+import { t as getMcpServerProjection } from "../../mcp-server-mAErsxHU.js";
 import { McpServerSetupDialog } from "./McpServerPicker.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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

@@ -0,0 +1,17 @@
+import { McpServerCard } from "../../utils/mcp-server-catalog.js";
+import { AppIconSize, AppIconVariant } from "../foundations/AppIcon.js";
+
+//#region src/components/agents-sdk/McpServerIcon.d.ts
+interface McpServerIconProps {
+  server: McpServerCard;
+  size?: AppIconSize;
+  variant?: AppIconVariant;
+}
+/** Catalog-backed MCP identity mark. The owning control supplies its accessible name. */
+declare function McpServerIcon({
+  server,
+  size,
+  variant
+}: McpServerIconProps): import("react").JSX.Element;
+//#endregion
+export { McpServerIcon, McpServerIconProps };

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

@@ -0,0 +1,25 @@
+import { findCatalogMcpServerCard, getMcpServerIconSrc } from "../../utils/mcp-server-catalog.js";
+import { AppIcon } from "../foundations/AppIcon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/agents-sdk/McpServerIcon.tsx
+/** Catalog-backed MCP identity mark. The owning control supplies its accessible name. */
+function McpServerIcon({ server, size = "lg", variant }) {
+	const resolved = server.icon == null ? findCatalogMcpServerCard({
+		id: server.id,
+		name: server.name,
+		url: server.url
+	}) ?? server : server;
+	const src = getMcpServerIconSrc(resolved);
+	return /* @__PURE__ */ jsxs(AppIcon.Root, {
+		size,
+		variant,
+		"aria-hidden": "true",
+		children: [src ? /* @__PURE__ */ jsx(AppIcon.Image, {
+			alt: "",
+			fit: "contain",
+			src
+		}, src) : null, /* @__PURE__ */ jsx(AppIcon.Fallback, { children: resolved.name.slice(0, 1) })]
+	});
+}
+//#endregion
+export { McpServerIcon };

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

@@ -1,7 +1,7 @@
-import { s as MenuItemProps, t as Menu } from "../../Menu-yb6QXWA3.js";
-import { o as McpServerCard } from "../../mcp-server-catalog-C_g7C-9o.js";
-import { n as McpConnectorFormProps } from "../../McpConnectorForm-CeYNY0MI.js";
-import { l as DialogProps } from "../../Dialog-B_FhRWaz.js";
+import { s as MenuItemProps, t as Menu } from "../../Menu-CgfUZhZd.js";
+import { McpServerCard } from "../../utils/mcp-server-catalog.js";
+import { McpConnectorFormProps } from "./McpConnectorForm.js";
+import { DialogProps } from "../foundations/Dialog.js";
 import * as React from "react";
 import { MCPServersState } from "agents";
 
@@ -17,6 +17,7 @@ interface McpServerPickerProps {
   onDisconnect?: (serverId: string) => void | Promise<void>;
   /** App-owned connection actions shown before the server catalog. */
   actions?: readonly McpServerPickerActionItem[];
+  /** Visible heading for the app-owned actions group. */
   actionsLabel?: React.ReactNode;
   /** Offset from the plus trigger to the menu, useful for prompt composers. */
   sideOffset?: number;

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

@@ -1,11 +1,12 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { K as SpinnerIcon, N as MinusIcon, d as CheckIcon, et as WarningIcon } from "../../icons-CeGfXO21.js";
+import { K as SpinnerIcon, N as MinusIcon, d as CheckIcon, et as WarningIcon } from "../../icons-cuEtsgj9.js";
 import { buttonVariants } from "../foundations/Button.js";
-import { Menu } from "../foundations/Menu.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
-import { r as getMcpServerProjection, t as McpServerIcon } from "../../mcp-server-7NR24ASj.js";
+import { Menu } from "../foundations/Menu.js";
 import { PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger } from "../ai-sdk/PromptInput.js";
+import { McpServerIcon } from "./McpServerIcon.js";
+import { t as getMcpServerProjection } from "../../mcp-server-mAErsxHU.js";
 import { McpConnectorForm } from "./McpConnectorForm.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,6 +1,6 @@
-import { r as ButtonProps } from "../../Button-CZt3yywF.js";
-import { l as DialogProps } from "../../Dialog-B_FhRWaz.js";
-import { SeparatorProps } from "../foundations/Separator.js";
+import { r as ButtonProps } from "../../Button-DjONW5UW.js";
+import { DialogProps } from "../foundations/Dialog.js";
+import { n as SeparatorProps } from "../../Separator-CzhtLYE1.js";
 import * as React from "react";
 import Cloudflare from "cloudflare";
 import { AiModelsSearchObject } from "@cloudflare/workers-types";
@@ -110,7 +110,7 @@ declare function ModelSelector({
   ref,
   ...props
 }: ModelSelectorProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function CloudflareModelSelector({
   models,

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

@@ -1,13 +1,13 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { U as SearchIcon, f as ChevronDownIcon } from "../../icons-CeGfXO21.js";
+import { U as SearchIcon, f as ChevronDownIcon } from "../../icons-cuEtsgj9.js";
 import { Button } from "../foundations/Button.js";
-import { Autocomplete } from "../foundations/Autocomplete.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { c as titleCase } from "../../format-COCyV98Z.js";
-import { Separator } from "../foundations/Separator.js";
+import { Autocomplete } from "../foundations/Autocomplete.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
-import { t as ProviderLogo } from "../../provider-logos-DWYY8wNz.js";
 import { EmptyState } from "../foundations/EmptyState.js";
+import { t as ProviderLogo } from "../../provider-logos-DWYY8wNz.js";
+import { Separator } from "../foundations/Separator.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";

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

@@ -1,44 +1,2 @@
-import * as React from "react";
-import { ChatAddToolApproveResponseFunction, DynamicToolUIPart, ToolUIPart, UIMessage } from "ai";
-import { PendingApproval, Think } from "@cloudflare/think";
-import { AgentStub } from "agents/client";
-
-//#region src/components/agents-sdk/PromptInputApproval.d.ts
-/** The id a response must carry: the approval id, or the paused run's executionId. */
-declare function getApprovalRequestId(part: ToolUIPart | DynamicToolUIPart): string | undefined;
-/** Component-local identity: paused executions can ask for multiple approvals. */
-declare function getApprovalStateKey(part: ToolUIPart | DynamicToolUIPart): string | undefined;
-/** Derives pending tool approvals straight from the messages — no app-owned shapes. */
-declare function getPendingToolApprovals(messages: readonly UIMessage[], {
-  pausedExecutions
-}?: {
-  pausedExecutions?: boolean;
-}): Array<ToolUIPart | DynamicToolUIPart>;
-interface PromptInputApprovalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "part"> {
-  part?: ToolUIPart | DynamicToolUIPart;
-  approval?: PendingApproval;
-  onRespond?: ChatAddToolApproveResponseFunction;
-  thinkStub?: AgentStub<Think>;
-  onExecutionSettled?: () => void | Promise<void>;
-  onSkip?: () => void;
-  question?: React.ReactNode;
-  count?: number;
-}
-/** Adapts AI SDK and Think approval states into the prompt-input approval surface. */
-declare function PromptInputApproval({
-  part,
-  approval: durableApproval,
-  onRespond,
-  thinkStub,
-  onExecutionSettled,
-  onSkip,
-  question,
-  count,
-  className,
-  ref,
-  ...props
-}: PromptInputApprovalProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element | null;
-//#endregion
+import { a as getPendingToolApprovals, i as getApprovalStateKey, n as PromptInputApprovalProps, r as getApprovalRequestId, t as PromptInputApproval } from "../../PromptInputApproval-D2hpn54U.js";
 export { PromptInputApproval, PromptInputApprovalProps, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals };

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { ToolApproval } from "../ai-sdk/ToolApproval.js";
 import { ThinkExecutionApproval, ThinkPendingApproval, getPausedExecution } from "./ThinkPendingApproval.js";
+import { ToolApproval } from "../ai-sdk/ToolApproval.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { isToolUIPart } from "ai";

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

@@ -1,4 +1,4 @@
-import { D as PromptInputCommandDefinition } from "../../PromptInput-DtJHyp0S.js";
+import { D as PromptInputCommandDefinition } from "../../PromptInput-4kCz3T9P.js";
 import { ConversationTabPickerItem } from "../extension/ConversationTabPicker.js";
 import { MCPServersState } from "agents";
 import { SkillDescriptor } from "agents/skills";

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

@@ -1,7 +1,6 @@
 import { composerLinkHref } from "../../utils/composer-link.js";
-import { getMcpServerIconSrc } from "../../utils/mcp-server-catalog.js";
-import { A as McpIcon, c as BoxIcon } from "../../icons-CeGfXO21.js";
-import { n as findCatalogMcpServerCard } from "../../mcp-server-7NR24ASj.js";
+import { findCatalogMcpServerCard, getMcpServerIconSrc } from "../../utils/mcp-server-catalog.js";
+import { A as McpIcon, c as BoxIcon } from "../../icons-cuEtsgj9.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/PromptInputCommands.tsx
 function mcpServerCommandIcon(server) {

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

@@ -1,2 +1,89 @@
-import { a as UseSessionCompactionOptions, c as parseSessionStatusFrame, i as SessionStatusPhase, l as useSessionCompaction, n as SessionFrameSource, o as UseSessionCompactionResult, r as SessionStatusFrame, s as parseSessionErrorFrame, t as SessionCompactionSize } from "../../SessionCompaction-CmTJFpzj.js";
+import { ChatStatus, UIMessage } from "ai";
+
+//#region src/components/agents-sdk/SessionCompaction.d.ts
+type SessionStatusPhase = "idle" | "compacting";
+interface SessionStatusFrame {
+  phase: SessionStatusPhase;
+  /** Present on the idle frame that follows a successful compaction. */
+  compacted: boolean;
+  /**
+   * Session's own estimate for the history this frame describes, or null when
+   * the frame omits it or carries a non-finite value. Not provider-reported
+   * usage — never render it as an exact token count, and never feed it to the
+   * `Context` ring, which reads `metadata.usage`.
+   */
+  tokenEstimate: number | null;
+  /**
+   * The same estimate taken before the compaction this frame reports, from its
+   * `compacted` payload. Null on every other frame. Both numbers come from one
+   * estimator over one history, so their difference is a meaningful size even
+   * though neither is exact.
+   */
+  tokensBefore: number | null;
+}
+/**
+ * Parse a raw websocket payload as a `cf_agent_session` status frame.
+ * Returns null for every other frame on the connection.
+ */
+declare function parseSessionStatusFrame(data: unknown): SessionStatusFrame | null;
+/**
+ * Parse a raw websocket payload as a `cf_agent_session_error` frame,
+ * returning its error text. Null for every other frame on the connection.
+ */
+declare function parseSessionErrorFrame(data: unknown): string | null;
+/** The message-frame surface of a `useAgent` connection. */
+interface SessionFrameSource {
+  addEventListener(type: "message", listener: (event: MessageEvent) => void): void;
+  removeEventListener(type: "message", listener: (event: MessageEvent) => void): void;
+}
+interface UseSessionCompactionOptions<MessageT extends UIMessage> {
+  /** The conversation agent's `useAgent` connection. */
+  agent: SessionFrameSource;
+  /** The conversation's `useAgentChat` value (status + local view setter). */
+  chat: {
+    status: ChatStatus;
+    setMessages: (messages: MessageT[]) => void;
+  };
+  /** Server read used to reload the transcript after a compaction lands. */
+  getMessages: () => Promise<MessageT[]>;
+}
+/**
+ * How much a landed compaction shortened the history, per Session's own
+ * estimator. A UI may show the difference as an approximate size; it must not
+ * present either number as exact usage.
+ */
+interface SessionCompactionSize {
+  tokensBefore: number;
+  tokensAfter: number;
+}
+interface UseSessionCompactionResult {
+  compacting: boolean;
+  /**
+   * Size of the compaction that landed most recently on this connection, or
+   * null when none has landed or the frames carried no usable estimates. A new
+   * object per compaction, so a consumer can dismiss one acknowledgement by
+   * identity and still show the next. Cleared when the next compaction starts.
+   */
+  lastCompaction: SessionCompactionSize | null;
+  /**
+   * Set when the post-compaction transcript reload rejected — the local view
+   * is stale relative to the server until a retry succeeds. Surface it
+   * ("Transcript may be out of date"); the hook retries on the next status
+   * transition to `"ready"`.
+   */
+  reloadError: unknown;
+  /**
+   * Error text from the last `cf_agent_session_error` frame — the only signal
+   * a user who ran /compact gets when the server-side compaction itself fails
+   * (the phase just flips back to idle with no `compacted` payload). Cleared
+   * when the next compaction starts.
+   */
+  sessionError: string | null;
+}
+declare function useSessionCompaction<MessageT extends UIMessage>({
+  agent,
+  chat,
+  getMessages
+}: UseSessionCompactionOptions<MessageT>): UseSessionCompactionResult;
+//#endregion
 export { SessionCompactionSize, SessionFrameSource, SessionStatusFrame, SessionStatusPhase, UseSessionCompactionOptions, UseSessionCompactionResult, parseSessionErrorFrame, parseSessionStatusFrame, useSessionCompaction };

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

@@ -15,8 +15,8 @@ import * as React from "react";
 * the end of the turn when one is streaming, so a mid-turn proactive
 * compaction never clobbers streamed state.
 *
-* The composer half is AgentChat's built-in `/compact` entry: pass the
-* app's compaction callable as its `onCompact` prop.
+* Compose the command with `useAgentChatCompaction`: supply the app's
+* compaction callable, then place its command and notice explicitly.
 *
 * This module is the "local adapter … documented runtime-only mirror" that
 * docs/think-session-ui.md calls for: upstream exports no payload types or

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

@@ -1,6 +1,35 @@
+import { n as AgentToolRunValue } from "../../AgentToolRunsContext-GMe_hSnD.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/SubagentRunDetails.d.ts
+interface SubagentRunMetadataProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  run: AgentToolRunValue;
+  /** Product-owned milestone payloads stay whole; the default displays their names. */
+  renderMilestone?: (milestone: NonNullable<AgentToolRunValue["milestones"]>[number]) => React.ReactNode;
+}
+/** Full retained evidence, without a connection, transcript provider or second app bar. */
+declare function SubagentRunMetadata({
+  run,
+  renderMilestone,
+  className,
+  ...props
+}: SubagentRunMetadataProps): React.JSX.Element;
+interface SubagentRunReportProps {
+  run: AgentToolRunValue;
+  renderMilestone?: SubagentRunMetadataProps["renderMilestone"];
+  className?: string;
+}
+/**
+ * The run's retained report and progress as a disclosure above its transcript
+ * on the employee run route. Open state is keyed by run through the enclosing
+ * ExpansionStateProvider (the panel's `reportDisclosures` store), so a report
+ * collapsed once stays collapsed across drill-in navigation.
+ */
+declare function SubagentRunReport({
+  run,
+  renderMilestone,
+  className
+}: SubagentRunReportProps): React.JSX.Element;
 interface SubagentRunProgressProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Human-readable current action or phase. */
   label: string;
@@ -33,4 +62,4 @@ declare function SubagentRunMilestone({
   ref?: React.Ref<HTMLLIElement>;
 }): React.JSX.Element;
 //#endregion
-export { SubagentRunMilestone, SubagentRunMilestoneProps, SubagentRunMilestones, SubagentRunMilestonesProps, SubagentRunProgress, SubagentRunProgressProps };
+export { SubagentRunMetadata, SubagentRunMetadataProps, SubagentRunMilestone, SubagentRunMilestoneProps, SubagentRunMilestones, SubagentRunMilestonesProps, SubagentRunProgress, SubagentRunProgressProps, SubagentRunReport, SubagentRunReportProps };

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

@@ -1,9 +1,65 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { Collapsible } from "../foundations/Collapsible.js";
+import { useExpansionState } from "../ai-sdk/ExpansionState.js";
 import { n as clamp } from "../../format-COCyV98Z.js";
 import { Progress } from "../foundations/Progress.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/SubagentRunDetails.tsx
+/** Full retained evidence, without a connection, transcript provider or second app bar. */
+function SubagentRunMetadata({ run, renderMilestone, className, ...props }) {
+	const progressLabel = run.progress?.message ?? run.progress?.phase;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("subagent-run__metadata", className),
+		...props,
+		children: [
+			progressLabel ? /* @__PURE__ */ jsx(SubagentRunProgress, {
+				label: progressLabel,
+				value: run.progress?.fraction
+			}) : null,
+			run.milestones?.length ? /* @__PURE__ */ jsx(SubagentRunMilestones, {
+				"aria-label": "Run milestones",
+				children: run.milestones.map((milestone) => /* @__PURE__ */ jsx(SubagentRunMilestone, { children: renderMilestone ? renderMilestone(milestone) : milestone.name }, milestone.sequence))
+			}) : null,
+			run.childStillRunning !== false && (run.status === "interrupted" || run.status === "aborted") ? /* @__PURE__ */ jsx("p", {
+				role: "status",
+				children: "The child may still be running."
+			}) : null,
+			run.error ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				children: run.error
+			}) : null,
+			run.summary ? /* @__PURE__ */ jsx("p", { children: run.summary }) : null
+		]
+	});
+}
+/**
+* The run's retained report and progress as a disclosure above its transcript
+* on the employee run route. Open state is keyed by run through the enclosing
+* ExpansionStateProvider (the panel's `reportDisclosures` store), so a report
+* collapsed once stays collapsed across drill-in navigation.
+*/
+function SubagentRunReport({ run, renderMilestone, className }) {
+	const [open, setOpen] = useExpansionState(`run-report:${run.runId}`, true);
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		"data-slot": "subagent-run-report",
+		className: cx("subagent-run__report", className),
+		open,
+		onOpenChange: setOpen,
+		unstyled: true,
+		children: [/* @__PURE__ */ jsx(Collapsible.Trigger, {
+			className: "subagent-run__report-trigger",
+			unstyled: true,
+			children: "Run report and progress"
+		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+			unstyled: true,
+			children: /* @__PURE__ */ jsx(SubagentRunMetadata, {
+				run,
+				renderMilestone
+			})
+		})]
+	});
+}
 function SubagentRunProgress({ className, label, value, ref, ...props }) {
 	const labelId = React.useId();
 	const percent = value === void 0 ? null : Math.round(clamp(value, 0, 1) * 100);
@@ -39,4 +95,4 @@ function SubagentRunMilestone({ className, ref, ...props }) {
 	});
 }
 //#endregion
-export { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress };
+export { SubagentRunMetadata, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress, SubagentRunReport };