@mcp-b/react-components 0.47.0 → 0.49.0

package/dist/components/general-purpose/TestResults.d.ts

@@ -1,5 +1,6 @@
 import { Collapsible } from "../foundations/Collapsible.js";
 import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/general-purpose/TestResults.d.ts
 type TestStatusValue = "passed" | "failed" | "skipped" | "running";
@@ -15,12 +16,12 @@ interface TestSummary {
   /** Total runtime in milliseconds. */
   duration?: number;
 }
-interface TestResultsProps extends React.HTMLAttributes<HTMLDivElement> {
+interface TestResultsProps extends useRender.ComponentProps<"div"> {
   /** Aggregate test counts used by the summary and progress bar. */
   summary?: TestSummary;
   /** Additional class names for layout only; do not override status colors from apps. */
   className?: string;
-  /** Optional custom report content; defaults to summary and empty content slots. */
+  /** Explicit header, summary, progress, and suite content parts. */
   children?: React.ReactNode;
 }
 /**
@@ -39,22 +40,33 @@ interface TestResultsProps extends React.HTMLAttributes<HTMLDivElement> {
  * @example
  * ```tsx
  * <TestResults summary={{ passed: 10, failed: 1, skipped: 0, total: 11 }}>
- *   <TestSuite name="auth.test.ts" status="failed">
- *     <Test name="rejects bad tokens" status="failed">
- *       <TestError message="Expected 401, received 500" />
- *     </Test>
- *   </TestSuite>
+ *   <TestResultsHeader>
+ *     <TestResultsSummary />
+ *     <TestResultsProgress />
+ *   </TestResultsHeader>
+ *   <TestResultsContent>
+ *     <TestSuite name="auth.test.ts" status="failed">
+ *       <TestSuiteName />
+ *       <TestSuiteContent>
+ *         <Test name="rejects bad tokens" status="failed">
+ *           <TestStatus />
+ *           <TestName />
+ *           <TestError message="Expected 401, received 500" />
+ *         </Test>
+ *       </TestSuiteContent>
+ *     </TestSuite>
+ *   </TestResultsContent>
  * </TestResults>
  * ```
  */
 declare function TestResults({
-  className,
+  render,
   summary,
   children,
   ref,
   ...props
 }: TestResultsProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 interface TestResultsHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 declare function TestResultsHeader({
@@ -150,13 +162,13 @@ declare function TestSuiteContent({
 }: TestSuiteContentProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface TestProps extends React.HTMLAttributes<HTMLDivElement> {
+interface TestProps extends useRender.ComponentProps<"div"> {
   name: string;
   status: TestStatusValue;
   duration?: number;
 }
 declare function Test({
-  className,
+  render,
   name,
   status,
   duration,

package/dist/components/general-purpose/TestResults.js

@@ -1,9 +1,11 @@
-import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
 import { K as SpinnerIcon, d as CheckIcon, nt as XIcon, p as ChevronRightIcon } from "../../icons-cuEtsgj9.js";
 import { Collapsible } from "../foundations/Collapsible.js";
 import { Progress } from "../foundations/Progress.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
 //#region src/components/general-purpose/TestResults.tsx
 const TestResultsContext = React.createContext({});
 /**
@@ -22,28 +24,42 @@ const TestResultsContext = React.createContext({});
 * @example
 * ```tsx
 * <TestResults summary={{ passed: 10, failed: 1, skipped: 0, total: 11 }}>
-*   <TestSuite name="auth.test.ts" status="failed">
-*     <Test name="rejects bad tokens" status="failed">
-*       <TestError message="Expected 401, received 500" />
-*     </Test>
-*   </TestSuite>
+*   <TestResultsHeader>
+*     <TestResultsSummary />
+*     <TestResultsProgress />
+*   </TestResultsHeader>
+*   <TestResultsContent>
+*     <TestSuite name="auth.test.ts" status="failed">
+*       <TestSuiteName />
+*       <TestSuiteContent>
+*         <Test name="rejects bad tokens" status="failed">
+*           <TestStatus />
+*           <TestName />
+*           <TestError message="Expected 401, received 500" />
+*         </Test>
+*       </TestSuiteContent>
+*     </TestSuite>
+*   </TestResultsContent>
 * </TestResults>
 * ```
 */
-function TestResults({ className, summary, children, ref, ...props }) {
+function TestResults({ render, summary, children, ref, ...props }) {
 	const overall = summary && summary.failed > 0 ? "failed" : "passed";
 	const contextValue = React.useMemo(() => ({ summary }), [summary]);
-	const isComposable = hasComposableTestResultsChildren(children);
-	return /* @__PURE__ */ jsx(TestResultsContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsx("div", {
-			ref,
-			className: cx("test-results", className),
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps({
+			className: "test-results",
 			"data-status": overall,
-			...props,
 			"data-recipe": "framed-panel",
-			children: isComposable ? children : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(TestResultsHeader, { children: [/* @__PURE__ */ jsx(TestResultsSummary, {}), /* @__PURE__ */ jsx(TestResultsProgress, {})] }), /* @__PURE__ */ jsx(TestResultsContent, { children })] })
-		})
+			children
+		}, props)
+	});
+	return /* @__PURE__ */ jsx(TestResultsContext.Provider, {
+		value: contextValue,
+		children: element
 	});
 }
 function TestResultsHeader({ className, children, ref, ...props }) {
@@ -147,9 +163,6 @@ function TestResultsContent({ className, children, ref, ...props }) {
 		children
 	});
 }
-function hasComposableTestResultsChildren(children) {
-	return React.Children.toArray(children).some((child) => React.isValidElement(child) && (child.type === TestResultsHeader || child.type === TestResultsSummary || child.type === TestResultsProgress || child.type === TestResultsContent));
-}
 const TestSuiteContext = React.createContext({
 	name: "",
 	status: "passed"
@@ -159,20 +172,16 @@ function TestSuite({ className, name, status, defaultOpen, children, ref, ...pro
 		name,
 		status
 	}), [name, status]);
-	const isComposable = hasComposableTestSuiteChildren(children);
 	return /* @__PURE__ */ jsx(TestSuiteContext.Provider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx(Collapsible.Root, {
 			ref,
-			className: cx("test-results__suite", className),
+			className: mergeBaseClassName("test-results__suite", className),
 			defaultOpen: defaultOpen ?? status === "failed",
 			"data-status": status,
 			...props,
 			unstyled: true,
-			children: isComposable ? children : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TestSuiteName, {}), /* @__PURE__ */ jsx(TestSuiteContent, { children: /* @__PURE__ */ jsx("div", {
-				className: "test-results__suite-tests",
-				children
-			}) })] })
+			children
 		})
 	});
 }
@@ -180,7 +189,7 @@ function TestSuiteName({ className, children, ref, ...props }) {
 	const { name, status } = React.useContext(TestSuiteContext);
 	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
 		ref,
-		className: cx("test-results__suite-trigger", className),
+		className: mergeBaseClassName("test-results__suite-trigger", className),
 		...props,
 		unstyled: true,
 		children: [
@@ -224,20 +233,17 @@ function TestSuiteStats({ className, passed = 0, failed = 0, skipped = 0, childr
 function TestSuiteContent({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible.Panel, {
 		ref,
-		className: cx("test-results__suite-content", className),
+		className: mergeBaseClassName("test-results__suite-content", className),
 		...props,
 		unstyled: true,
 		children
 	});
 }
-function hasComposableTestSuiteChildren(children) {
-	return React.Children.toArray(children).some((child) => React.isValidElement(child) && (child.type === TestSuiteName || child.type === TestSuiteContent));
-}
 const TestContext = React.createContext({
 	name: "",
 	status: "passed"
 });
-function Test({ className, name, status, duration, children, ref, ...props }) {
+function Test({ render, name, status, duration, children, ref, ...props }) {
 	const contextValue = React.useMemo(() => ({
 		duration,
 		name,
@@ -247,24 +253,19 @@ function Test({ className, name, status, duration, children, ref, ...props }) {
 		name,
 		status
 	]);
-	const isComposable = hasComposableTestChildren(children);
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps({
+			className: cx("test-results__test", `test-results__test--${status}`),
+			"data-status": status,
+			children
+		}, props)
+	});
 	return /* @__PURE__ */ jsx(TestContext.Provider, {
 		value: contextValue,
-		children: /* @__PURE__ */ jsx("div", {
-			ref,
-			className: cx("test-results__test", `test-results__test--${status}`, className),
-			"data-status": status,
-			...props,
-			children: isComposable ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsx(TestStatus, {}),
-				/* @__PURE__ */ jsx(TestName, {}),
-				/* @__PURE__ */ jsx(TestDuration, {}),
-				children ? /* @__PURE__ */ jsx("div", {
-					className: "test-results__test-children",
-					children
-				}) : null
-			] })
-		})
+		children: element
 	});
 }
 function TestStatus({ className, children, status, ref, ...props }) {
@@ -301,9 +302,6 @@ function TestDuration({ className, children, ref, ...props }) {
 		children: children ?? `${duration}ms`
 	});
 }
-function hasComposableTestChildren(children) {
-	return React.Children.toArray(children).some((child) => React.isValidElement(child) && (child.type === TestStatus || child.type === TestName || child.type === TestDuration));
-}
 function TestError({ className, message, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,

package/dist/components/general-purpose/ThemeModeControl.d.ts

@@ -6,7 +6,9 @@ interface ThemeModeControlProps {
   "aria-label"?: string;
   /** Name used by the radio group's hidden form input. @default "theme" */
   name?: string;
+  /** Prevents changing the current theme preference. */
   disabled?: boolean;
+  /** Additional class name for layout in the consuming surface. */
   className?: string;
 }
 /**

package/dist/components/general-purpose/WebPreview.d.ts

@@ -1,5 +1,6 @@
-import { n as IconButtonProps } from "../../IconButton-BAUFhUk8.js";
+import { n as IconButtonProps } from "../../IconButton-ByiyjkYE.js";
 import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/general-purpose/WebPreview.d.ts
 interface WebPreviewContextValue {
@@ -15,6 +16,8 @@ interface WebPreviewContextValue {
   reloadToken: number;
 }
 interface WebPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Omit the frame when the host already supplies panel chrome. */
+  surface?: "framed" | "plain";
   /** Initial URL for uncontrolled preview history. */
   defaultUrl?: string;
   /** Controlled URL. Controlled previews leave history ownership to the caller. */
@@ -60,6 +63,7 @@ interface WebPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
  * ```
  */
 declare function WebPreview({
+  surface,
   className,
   defaultUrl,
   url: controlledUrl,
@@ -69,10 +73,14 @@ declare function WebPreview({
   "data-recipe": recipe,
   ...props
 }: WebPreviewProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface WebPreviewNavigationProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface WebPreviewNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Tabs join the address row below them without a second dividing edge. */
+  variant?: "address" | "tabs";
+}
 declare function WebPreviewNavigation({
+  variant,
   className,
   children,
   ref,
@@ -115,6 +123,23 @@ declare function WebPreviewUrl({
 }: WebPreviewUrlProps & {
   ref?: React.Ref<HTMLInputElement>;
 }): React.JSX.Element;
+interface WebPreviewViewportProps extends useRender.ComponentProps<"div"> {}
+/** Media surface shared by iframe previews and host-provided live views.
+ * Compose a behavior part such as Tabs.Panel through render to keep one element. */
+declare function WebPreviewViewport({
+  render,
+  ref,
+  ...props
+}: WebPreviewViewportProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+interface WebPreviewEmptyProps extends React.HTMLAttributes<HTMLDivElement> {}
+/** Centered placeholder or session state inside a preview surface. */
+declare function WebPreviewEmpty({
+  className,
+  ref,
+  ...props
+}: WebPreviewEmptyProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
 interface WebPreviewBodyProps extends Omit<React.IframeHTMLAttributes<HTMLIFrameElement>, "loading"> {
   /** Optional placeholder shown while the iframe has no src. */
   loading?: React.ReactNode;
@@ -149,4 +174,4 @@ declare function WebPreviewConsole({
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { ConsoleLog, ConsoleLogLevel, WebPreview, WebPreviewBody, WebPreviewBodyProps, WebPreviewConsole, WebPreviewConsoleProps, WebPreviewContextValue, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewNavigationButtonProps, WebPreviewNavigationProps, WebPreviewProps, WebPreviewUrl, WebPreviewUrlProps };
+export { ConsoleLog, ConsoleLogLevel, WebPreview, WebPreviewBody, WebPreviewBodyProps, WebPreviewConsole, WebPreviewConsoleProps, WebPreviewContextValue, WebPreviewEmpty, WebPreviewEmptyProps, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewNavigationButtonProps, WebPreviewNavigationProps, WebPreviewProps, WebPreviewUrl, WebPreviewUrlProps, WebPreviewViewport, WebPreviewViewportProps };

package/dist/components/general-purpose/WebPreview.js

@@ -6,6 +6,8 @@ import { ScrollArea } from "../foundations/ScrollArea.js";
 import { Input } from "../foundations/Input.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
 //#region src/components/general-purpose/WebPreview.tsx
 const WebPreviewContext = React.createContext(null);
 function useWebPreviewContext() {
@@ -44,7 +46,7 @@ function useWebPreviewContext() {
 * </WebPreview>
 * ```
 */
-function WebPreview({ className, defaultUrl = "", url: controlledUrl, onUrlChange, children, ref, "data-recipe": recipe, ...props }) {
+function WebPreview({ surface = "framed", className, defaultUrl = "", url: controlledUrl, onUrlChange, children, ref, "data-recipe": recipe, ...props }) {
 	const [navigation, setNavigation] = React.useState(() => ({
 		history: defaultUrl ? [defaultUrl] : [],
 		index: defaultUrl ? 0 : -1
@@ -125,16 +127,18 @@ function WebPreview({ className, defaultUrl = "", url: controlledUrl, onUrlChang
 		children: /* @__PURE__ */ jsx("div", {
 			ref,
 			className: cx("web-preview", className),
+			"data-surface": surface,
 			...props,
 			"data-recipe": cx("framed-panel", recipe),
 			children
 		})
 	});
 }
-function WebPreviewNavigation({ className, children, ref, ...props }) {
+function WebPreviewNavigation({ variant = "address", className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: cx("web-preview__nav", className),
+		"data-variant": variant,
 		...props,
 		children
 	});
@@ -220,21 +224,42 @@ function WebPreviewUrl({ className, placeholder = "Enter URL…", value, onChang
 		})
 	});
 }
+/** Media surface shared by iframe previews and host-provided live views.
+* Compose a behavior part such as Tabs.Panel through render to keep one element. */
+function WebPreviewViewport({ render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps({ className: "web-preview__body" }, props)
+	});
+}
+/** Centered placeholder or session state inside a preview surface. */
+function WebPreviewEmpty({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("web-preview__empty", className),
+		...props
+	});
+}
 function WebPreviewBody({ className, loading, src, ref, interactive = true, ...props }) {
 	const { url, reloadToken } = useWebPreviewContext();
 	const effectiveSrc = src ?? url;
 	const iframeSrc = effectiveSrc ? `${effectiveSrc}${reloadToken ? `#reload-${reloadToken}` : ""}` : void 0;
-	if (!iframeSrc) return /* @__PURE__ */ jsx("div", {
-		className: cx("web-preview__body", "web-preview__body--empty", className),
+	if (!iframeSrc) return /* @__PURE__ */ jsx(WebPreviewViewport, {
+		className,
+		render: /* @__PURE__ */ jsx(WebPreviewEmpty, {}),
 		children: loading ?? "Enter a URL above to preview a site."
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("iframe", {
-		ref,
-		src: iframeSrc,
-		sandbox: "allow-scripts allow-forms allow-popups allow-presentation",
-		title: "Web preview",
-		className: cx("web-preview__body", !interactive && "web-preview__body--readonly", className),
-		...props
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(WebPreviewViewport, {
+		className: cx(!interactive && "web-preview__body--readonly", className),
+		render: /* @__PURE__ */ jsx("iframe", {
+			ref,
+			src: iframeSrc,
+			sandbox: "allow-scripts allow-forms allow-popups allow-presentation",
+			title: "Web preview",
+			...props
+		})
 	}, iframeSrc), loading] });
 }
 function WebPreviewConsole({ className, logs = [], children, ref, ...props }) {
@@ -289,4 +314,4 @@ function WebPreviewConsole({ className, logs = [], children, ref, ...props }) {
 	});
 }
 //#endregion
-export { WebPreview, WebPreviewBody, WebPreviewConsole, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl };
+export { WebPreview, WebPreviewBody, WebPreviewConsole, WebPreviewEmpty, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl, WebPreviewViewport };

package/dist/components/nanites/AgentConnection.js

@@ -2,7 +2,7 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { D as LinkIcon } from "../../icons-cuEtsgj9.js";
 import { Button } from "../foundations/Button.js";
 import { Popover } from "../foundations/Popover.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../../CodeBlock-DMHZiw86.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../../CodeBlock-g8sADidM.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/nanites/AgentToolDetail.d.ts

@@ -1,15 +1,19 @@
-import { i as ThinkChatValue } from "../../ThinkChatContext-COIgzkYp.js";
-import { i as ThinkChatMessagesProps } from "../../ThinkChat-CwMdEum8.js";
-import { t as ThinkAgent } from "../../think-agent-Cip5KAPj.js";
+import { n as AgentToolRunValue } from "../../AgentToolRunsContext-GMe_hSnD.js";
+import { SubagentRunMetadataProps } from "../agents-sdk/SubagentRunDetails.js";
+import { ThinkChatValue } from "../agents-sdk/ThinkChatContext.js";
 import * as React from "react";
 import { UIMessage } from "ai";
 import { UseAgentOptions, useAgent } from "agents/react";
-import { AgentToolRunState } from "agents/agent-tools";
+import { Think } from "@cloudflare/think";
 
+//#region src/components/_internal/think-agent.d.ts
+/** Shared complete Think specialization for stateful React agent hooks. */
+type ThinkAgent<State = unknown> = Think<object, State>;
+//#endregion
 //#region src/components/nanites/AgentToolDetail.d.ts
 interface AgentToolDetailProps<State = unknown, MessageT extends UIMessage = UIMessage> extends React.HTMLAttributes<HTMLDivElement> {
   /** Whole retained run selected from the parent `useAgentToolEvents` result. */
-  run: AgentToolRunState<MessageT["parts"][number]>;
+  run: AgentToolRunValue<MessageT["parts"][number]>;
   /**
    * Whole child Think chat hook result; it owns the stored child transcript.
    * Optional because the run's chrome is parent-side data: while the child
@@ -17,7 +21,6 @@ interface AgentToolDetailProps<State = unknown, MessageT extends UIMessage = UIM
    * region shows a loading status instead.
    */
   chat?: ThinkChatValue<State, MessageT>;
-  messages?: ThinkChatMessagesProps<MessageT>;
   /** App-authored TanStack Router Link to the parent conversation. */
   backLink?: React.ReactElement;
   /**
@@ -25,6 +28,7 @@ interface AgentToolDetailProps<State = unknown, MessageT extends UIMessage = UIM
    * rendered in the top bar's trailing slot after the status mark.
    */
   actions?: React.ReactNode;
+  renderMilestone?: SubagentRunMetadataProps["renderMilestone"];
 }
 /**
  * Live retained-child detail composed from upstream connection and chat values.
@@ -36,15 +40,15 @@ declare function AgentToolDetail<State = unknown, MessageT extends UIMessage = U
   backLink,
   chat,
   className,
-  messages,
   ref,
   run,
+  renderMilestone,
   ...props
 }: AgentToolDetailProps<State, MessageT> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 interface SelectedAgentToolChildProps<ParentAgentT extends ThinkAgent<ParentState>, ParentState = unknown, ChildState = unknown, MessageT extends UIMessage = UIMessage> {
-  run: AgentToolRunState<MessageT["parts"][number]>;
+  run: AgentToolRunValue<MessageT["parts"][number]>;
   /** Whole parent `useAgent` result used to derive the standard root-first route. */
   parentAgent: ReturnType<typeof useAgent<ParentAgentT, ParentState>>;
   /**
@@ -59,7 +63,6 @@ interface SelectedAgentToolChildProps<ParentAgentT extends ThinkAgent<ParentStat
    * wired into `useAgentChat({ getInitialMessages })`.
    */
   getInitialMessages?: (childAgent: ReturnType<typeof useAgent<ThinkAgent<ChildState>, ChildState>>) => Promise<MessageT[]>;
-  messages?: ThinkChatMessagesProps<MessageT>;
   /** App-authored TanStack Router Link to the parent conversation. */
   backLink?: React.ReactElement;
   /**
@@ -84,7 +87,7 @@ declare function selectedAgentToolChildOptions<ChildState = unknown>(parentAgent
     agent: string;
     name: string;
   }>;
-}, run: Pick<AgentToolRunState, "subAgent">, connectionOptions?: UseAgentOptions<ChildState>): UseAgentOptions<ChildState>;
+}, run: Pick<AgentToolRunValue, "subAgent">, connectionOptions?: UseAgentOptions<ChildState>): UseAgentOptions<ChildState>;
 /**
  * Lazily connects one selected retained child and renders its real Think chat.
  *
@@ -101,7 +104,6 @@ declare function SelectedAgentToolChild<ParentAgentT extends ThinkAgent<ParentSt
   connectionOptions,
   fallback,
   getInitialMessages,
-  messages,
   parentAgent,
   run
 }: SelectedAgentToolChildProps<ParentAgentT, ParentState, ChildState, MessageT>): React.JSX.Element;

package/dist/components/nanites/AgentToolDetail.js

@@ -1,25 +1,26 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { r as ArrowLeftIcon } from "../../icons-cuEtsgj9.js";
-import { NaniteMark } from "./NaniteScene.js";
+import { MessageActions } from "../ai-sdk/Message.js";
 import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
+import { NaniteMark } from "./NaniteScene.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
+import { AgentChat } from "../agents-sdk/AgentChat.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
-import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
-import { t as ThinkChat } from "../../ThinkChat-DLDta57t.js";
+import { SubagentRunMetadata } from "../agents-sdk/SubagentRunDetails.js";
+import { ThinkChat } from "../agents-sdk/ThinkChat.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useAgent } from "agents/react";
 import { useAgentChat } from "@cloudflare/think/react";
+import { useAgent } from "agents/react";
 //#region src/components/nanites/AgentToolDetail.tsx
 /**
 * Live retained-child detail composed from upstream connection and chat values.
 * The full child transcript comes from `chat.messages`; `run.parts` remains a
 * compact parent-side stream projection and is never promoted to fake history.
 */
-function AgentToolDetail({ actions, backLink, chat, className, messages, ref, run, ...props }) {
+function AgentToolDetail({ actions, backLink, chat, className, ref, run, renderMilestone, ...props }) {
 	const backRef = React.useRef(null);
 	const name = getSubagentRunName(run);
-	const progressLabel = run.progress?.message ?? run.progress?.phase;
 	React.useEffect(() => {
 		backRef.current?.focus();
 	}, [run.runId]);
@@ -48,40 +49,21 @@ function AgentToolDetail({ actions, backLink, chat, className, messages, ref, ru
 					/* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [/* @__PURE__ */ jsx(SubagentRunIndicator, { run }), actions] })
 				]
 			}),
-			progressLabel || run.milestones?.length || run.error || run.summary ? /* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsx(SubagentRunMetadata, {
 				className: "agent-tool-detail__run-state",
-				children: [
-					progressLabel ? /* @__PURE__ */ jsx(SubagentRunProgress, {
-						label: progressLabel,
-						value: run.progress?.fraction
-					}) : null,
-					run.milestones?.length ? /* @__PURE__ */ jsx(SubagentRunMilestones, {
-						"aria-label": `${name} milestones`,
-						children: run.milestones.map((milestone) => /* @__PURE__ */ jsx(SubagentRunMilestone, { children: milestone.name }, milestone.sequence))
-					}) : null,
-					run.error ? /* @__PURE__ */ jsx("p", {
-						className: "agent-tool-detail__error",
-						children: run.error
-					}) : null,
-					!run.error && run.summary ? /* @__PURE__ */ jsx("p", {
-						className: "agent-tool-detail__summary",
-						children: run.summary
-					}) : null
-				]
-			}) : null,
+				run,
+				renderMilestone
+			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "agent-tool-detail__chat",
-				children: chat ? /* @__PURE__ */ jsx(ThinkChat.Provider, {
+				children: chat ? /* @__PURE__ */ jsxs(ThinkChat.Root, {
 					chat,
-					children: /* @__PURE__ */ jsx(ThinkChat.Messages, {
-						...messages,
-						showComposer: false
-					})
-				}) : /* @__PURE__ */ jsx(ThinkChat.Messages, {
-					...messages,
-					showComposer: false,
-					loading: true
-				})
+					children: [/* @__PURE__ */ jsx(AgentChat.Transcript, { children: ({ message, messageIndex }) => /* @__PURE__ */ jsxs(AgentChat.Message, {
+						message,
+						messageIndex,
+						children: [/* @__PURE__ */ jsx(ThinkChat.MessageContent, { message }), /* @__PURE__ */ jsx(MessageActions, { children: /* @__PURE__ */ jsx(AgentChat.CopyAction, {}) })]
+					}) }), /* @__PURE__ */ jsx(AgentChat.Dock, { children: /* @__PURE__ */ jsx(ThinkChat.RecoveryNotice, {}) })]
+				}) : /* @__PURE__ */ jsx(AgentChat.Loading, {})
 			})
 		]
 	});
@@ -111,12 +93,11 @@ function selectedAgentToolChildOptions(parentAgent, run, connectionOptions) {
 * this component holds the connection and always commits, while the chat
 * suspends behind the internal boundary.
 */
-function SelectedAgentToolChild({ actions, backLink, connectionOptions, fallback, getInitialMessages, messages, parentAgent, run }) {
+function SelectedAgentToolChild({ actions, backLink, connectionOptions, fallback, getInitialMessages, parentAgent, run }) {
 	const childAgent = useAgent(selectedAgentToolChildOptions(parentAgent, run, connectionOptions));
 	return /* @__PURE__ */ jsx(React.Suspense, {
 		fallback: fallback ?? /* @__PURE__ */ jsx(AgentToolDetail, {
 			run,
-			messages,
 			backLink,
 			actions
 		}),
@@ -125,19 +106,17 @@ function SelectedAgentToolChild({ actions, backLink, connectionOptions, fallback
 			backLink,
 			childAgent,
 			getInitialMessages,
-			messages,
 			run
 		}, run.runId)
 	});
 }
-function SelectedAgentToolChildChat({ actions, backLink, childAgent, getInitialMessages, messages, run }) {
+function SelectedAgentToolChildChat({ actions, backLink, childAgent, getInitialMessages, run }) {
 	return /* @__PURE__ */ jsx(AgentToolDetail, {
 		run,
 		chat: useAgentChat({
 			agent: childAgent,
 			...getInitialMessages ? { getInitialMessages: () => getInitialMessages(childAgent) } : {}
 		}),
-		messages,
 		backLink,
 		actions
 	});

package/dist/{copy-button-C0JyjClr.d.ts → copy-button-OUwOdgEm.d.ts}

@@ -1,4 +1,4 @@
-import { n as IconButtonProps } from "./IconButton-BAUFhUk8.js";
+import { n as IconButtonProps } from "./IconButton-ByiyjkYE.js";
 import * as React from "react";
 
 //#region src/components/_internal/copy-button.d.ts