@mcp-b/react-components 0.33.0 → 0.34.1

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

@@ -10,11 +10,21 @@ import { AgentToolRunState } from "agents/agent-tools";
 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]>;
-  /** Whole child Think chat hook result; it owns the stored child transcript. */
-  chat: ThinkChatValue<State, MessageT>;
+  /**
+   * 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
+   * transcript is still loading, the detail renders without it and the chat
+   * 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;
+  /**
+   * Route-owned run controls (the app's cancel callable, for example),
+   * rendered in a `SubagentRunActions` bar pinned to the bottom edge.
+   */
+  actions?: React.ReactNode;
 }
 /**
  * Live retained-child detail composed from upstream connection and chat values.
@@ -22,6 +32,7 @@ interface AgentToolDetailProps<State = unknown, MessageT extends UIMessage = UIM
  * compact parent-side stream projection and is never promoted to fake history.
  */
 declare function AgentToolDetail<State = unknown, MessageT extends UIMessage = UIMessage>({
+  actions,
   backLink,
   chat,
   className,
@@ -41,9 +52,25 @@ interface SelectedAgentToolChildProps<ParentAgentT extends ThinkAgent<ParentStat
    * configuration as the parent; the selected `run.subAgent` is appended.
    */
   connectionOptions?: UseAgentOptions<ChildState>;
+  /**
+   * Initial child-transcript loader for hosts that do not serve the agent HTTP
+   * routes (upstream's default fetches `/get-messages` over HTTP). Receives the
+   * connected child agent so socket-only hosts can read through its stub;
+   * 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;
+  /**
+   * Replaces the whole detail while the child transcript loads. Defaults to
+   * the detail surface itself with a loading chat region, so the run's chrome
+   * — back link, run state, and pinned actions such as cancel — is available
+   * the moment the route opens.
+   */
+  fallback?: React.ReactNode;
+  /** Route-owned run controls, forwarded to `AgentToolDetail`'s pinned actions bar. */
+  actions?: React.ReactNode;
 }
 /**
  * Child connection options for a selected retained run: the parent's
@@ -58,10 +85,22 @@ declare function selectedAgentToolChildOptions<ChildState = unknown>(parentAgent
     name: string;
   }>;
 }, run: Pick<AgentToolRunState, "subAgent">, connectionOptions?: UseAgentOptions<ChildState>): UseAgentOptions<ChildState>;
-/** Lazily connects one selected retained child and renders its real Think chat. */
+/**
+ * Lazily connects one selected retained child and renders its real Think chat.
+ *
+ * The Suspense boundary between the connection and the chat is load-bearing:
+ * the child socket opens in an effect, and `useAgentChat` suspends while the
+ * initial transcript loads. Under one suspension the render never commits, the
+ * effect never runs, and the socket the load is waiting on never dials — so
+ * this component holds the connection and always commits, while the chat
+ * suspends behind the internal boundary.
+ */
 declare function SelectedAgentToolChild<ParentAgentT extends ThinkAgent<ParentState>, ParentState = unknown, ChildState = unknown, MessageT extends UIMessage = UIMessage>({
+  actions,
   backLink,
   connectionOptions,
+  fallback,
+  getInitialMessages,
   messages,
   parentAgent,
   run

package/dist/components/nanites/AgentToolDetail.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
+import { J as SpinnerIcon, r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
-import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
+import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
 import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
 import { t as ThinkChat } from "../../ThinkChat-en0UbkVv.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
@@ -16,7 +16,7 @@ import { useAgent } from "agents/react";
 * 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({ backLink, chat, className, messages, ref, run, ...props }) {
+function AgentToolDetail({ actions, backLink, chat, className, messages, ref, run, ...props }) {
 	const backRef = React.useRef(null);
 	const name = getSubagentRunName(run);
 	const progressLabel = run.progress?.message ?? run.progress?.phase;
@@ -69,14 +69,20 @@ function AgentToolDetail({ backLink, chat, className, messages, ref, run, ...pro
 			}) : null,
 			/* @__PURE__ */ jsx("div", {
 				className: "agent-tool-detail__chat",
-				children: /* @__PURE__ */ jsx(ThinkChat.Provider, {
+				children: chat ? /* @__PURE__ */ jsx(ThinkChat.Provider, {
 					chat,
 					children: /* @__PURE__ */ jsx(ThinkChat.Messages, {
 						...messages,
 						showComposer: false
 					})
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "agent-tool-detail__chat-loading",
+					role: "status",
+					"aria-label": `${name} transcript loading`,
+					children: /* @__PURE__ */ jsx(SpinnerIcon, {})
 				})
-			})
+			}),
+			actions ? /* @__PURE__ */ jsx(SubagentRunActions, { children: actions }) : null
 		]
 	});
 }
@@ -95,14 +101,46 @@ function selectedAgentToolChildOptions(parentAgent, run, connectionOptions) {
 		sub: [...connectionOptions?.sub ?? parentSubPath, run.subAgent]
 	};
 }
-/** Lazily connects one selected retained child and renders its real Think chat. */
-function SelectedAgentToolChild({ backLink, connectionOptions, messages, parentAgent, run }) {
+/**
+* Lazily connects one selected retained child and renders its real Think chat.
+*
+* The Suspense boundary between the connection and the chat is load-bearing:
+* the child socket opens in an effect, and `useAgentChat` suspends while the
+* initial transcript loads. Under one suspension the render never commits, the
+* effect never runs, and the socket the load is waiting on never dials — so
+* 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 }) {
+	const childAgent = useAgent(selectedAgentToolChildOptions(parentAgent, run, connectionOptions));
+	return /* @__PURE__ */ jsx(React.Suspense, {
+		fallback: fallback ?? /* @__PURE__ */ jsx(AgentToolDetail, {
+			run,
+			messages,
+			backLink,
+			actions
+		}),
+		children: /* @__PURE__ */ jsx(SelectedAgentToolChildChat, {
+			actions,
+			backLink,
+			childAgent,
+			getInitialMessages,
+			messages,
+			run
+		}, run.runId)
+	});
+}
+function SelectedAgentToolChildChat({ actions, backLink, childAgent, getInitialMessages, messages, run }) {
 	return /* @__PURE__ */ jsx(AgentToolDetail, {
 		run,
-		chat: useAgentChat({ agent: useAgent(selectedAgentToolChildOptions(parentAgent, run, connectionOptions)) }),
+		chat: useAgentChat({
+			agent: childAgent,
+			...getInitialMessages ? { getInitialMessages: () => getInitialMessages(childAgent) } : {}
+		}),
 		messages,
-		backLink
-	}, run.runId);
+		backLink,
+		actions
+	});
 }
 //#endregion
 export { AgentToolDetail, SelectedAgentToolChild, selectedAgentToolChildOptions };

package/dist/styles/agent-tool-detail.css

@@ -1,6 +1,6 @@
 .agent-tool-detail {
   display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr);
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
   min-inline-size: 0;
   block-size: 100%;
   background-color: var(--sigvelo-color-surface);
@@ -47,8 +47,25 @@
   block-size: 100%;
 }
 
+.agent-tool-detail__chat-loading {
+  display: grid;
+  place-items: center;
+  block-size: 100%;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.agent-tool-detail > .subagent-run__actions {
+  grid-row: 4;
+  display: flex;
+  justify-content: center;
+  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
+  border-block-start: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
 @media (forced-colors: active) {
-  .agent-tool-detail__run-state {
+  .agent-tool-detail__run-state,
+  .agent-tool-detail > .subagent-run__actions {
     border-color: CanvasText;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.33.0",
+  "version": "0.34.1",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -58,7 +58,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.33.0"
+    "@mcp-b/design-tokens": "0.34.1"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.230",