@mcp-b/react-components 0.48.0 → 0.49.1

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,11 +1,13 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { r as ArrowLeftIcon } from "../../icons-CeGfXO21.js";
+import { r as ArrowLeftIcon } from "../../icons-cuEtsgj9.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 { NaniteMark } from "./NaniteScene.js";
-import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
-import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
-import { t as ThinkChat } from "../../ThinkChat-DiI6hhDP.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 { useAgentChat } from "@cloudflare/think/react";
@@ -16,10 +18,9 @@ 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({ 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-Dk2vRe9j.js → copy-button-CSDuDfdP.js}

@@ -1,4 +1,4 @@
-import { d as CheckIcon, h as CopyIcon } from "./icons-CeGfXO21.js";
+import { d as CheckIcon, h as CopyIcon } from "./icons-cuEtsgj9.js";
 import { IconButton } from "./components/foundations/IconButton.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

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

package/dist/mcp-server-mAErsxHU.js

@@ -0,0 +1,27 @@
+import { getMcpServerEntry, getMcpServerRuntimeState } from "./utils/mcp-server-catalog.js";
+//#region src/components/_internal/mcp-server.tsx
+function getMcpServerConnectionKind(server) {
+	if (!server) return "available";
+	const state = getMcpServerRuntimeState(server);
+	if (state === "ready") return "connected";
+	if (state === "connecting" || state === "discovering" || state === "connected" && !server.error) return "connecting";
+	return "reconnect";
+}
+/**
+* Resolve one catalog card to the exact Agents SDK entry that owns its live
+* connection state. An explicit server ID is authoritative for authorization
+* flows and deliberately never falls back to a matching catalog entry.
+*/
+function getMcpServerProjection(card, mcp, serverId) {
+	const assignedServer = serverId === void 0 ? void 0 : mcp?.servers[serverId];
+	const entry = serverId === void 0 ? getMcpServerEntry(card, mcp) : assignedServer ? [serverId, assignedServer] : void 0;
+	const server = entry?.[1];
+	return {
+		connectionKind: getMcpServerConnectionKind(server),
+		runtimeState: server ? getMcpServerRuntimeState(server) : void 0,
+		server,
+		serverId: entry?.[0]
+	};
+}
+//#endregion
+export { getMcpServerProjection as t };

package/dist/styles/accessibility.css

@@ -11,4 +11,24 @@
     border-color: GrayText;
     color: GrayText;
   }
+
+  :where([data-slot="meter-track"], [data-slot="progress-track"], [data-slot="slider-track"]) {
+    background-color: Canvas;
+    outline: var(--sigvelo-border-width) solid CanvasText;
+    outline-offset: calc(-1 * var(--sigvelo-border-width));
+  }
+
+  :where(
+    [data-slot="meter-indicator"],
+    [data-slot="progress-indicator"],
+    [data-slot="slider-indicator"]
+  ) {
+    background-color: Highlight;
+  }
+
+  /* Base UI focuses the hidden range input inside the visible thumb. */
+  .slider__thumb:has(:focus-visible) {
+    outline: var(--sigvelo-focus-ring-forced);
+    outline-offset: var(--sigvelo-focus-offset);
+  }
 }

package/dist/styles/activity.css

@@ -77,12 +77,6 @@
   padding-inline: 0;
 }
 
-/* Reveal row for step logs capped at the trailing window. */
-.activity__show-earlier {
-  align-self: flex-start;
-  color: var(--sigvelo-color-text-muted);
-}
-
 .activity__item {
   display: flex;
   align-items: baseline;
@@ -214,102 +208,13 @@
   color: var(--sigvelo-color-danger-text-on-subtle);
 }
 
-.activity__call-audit {
-  display: flex;
-  min-inline-size: 0;
-  flex-direction: column;
-  gap: var(--sigvelo-spacing-1);
-}
-
-.activity__call-audit-label {
-  font-size: var(--sigvelo-text-meta);
-  font-weight: var(--sigvelo-font-weight-normal);
-  color: var(--sigvelo-color-text-muted);
-}
-
-.activity__call-audit-list {
-  display: flex;
-  min-inline-size: 0;
-  flex-direction: column;
-  gap: var(--sigvelo-spacing-1);
-  margin: 0;
-  padding-inline-start: 0;
-  list-style: none;
-  font-size: var(--sigvelo-text-code);
-}
-
-.activity__call-audit-item {
-  min-inline-size: 0;
-  padding-inline-start: 0;
-  color: var(--sigvelo-color-text);
-  overflow-wrap: anywhere;
-}
-
-.activity__call-audit-code,
-.activity__call-audit-result {
-  font-family: var(--sigvelo-font-mono);
-  white-space: pre-wrap;
-}
-
-.activity__call-audit-state {
-  margin-inline-start: var(--sigvelo-spacing-1);
-  color: var(--sigvelo-color-text-muted);
-}
-
-.activity__call-audit-item[data-state="error"] .activity__call-audit-state {
-  color: var(--sigvelo-color-danger-text-on-subtle);
-}
-
-.activity__call-audit-item[data-state="reverted"] .activity__call-audit-state {
-  text-decoration: line-through;
-}
-
-/* Keep nested browser content compact without restyling the Tabs primitive. */
-.activity__browser-panel {
-  padding-block: var(--sigvelo-spacing-2) 0;
-}
-
-/* Blend nested code into the quiet shell fill — no panel-in-panel */
-.activity__shell .code-block {
-  background-color: transparent;
-}
-
 /* Bounded so one long detail cannot swallow the activity list. */
 .activity__group-text,
-.activity__shell-output,
-.activity__code-block {
+.activity__shell-output {
   max-block-size: 12rem;
   overflow-block: auto;
 }
 
-.activity__code-block .code-block__content,
-.activity__code-block .code-block__content--highlighted pre.shiki,
-.activity__code-block .code-block__content--highlighted pre.shiki code {
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-wrap: anywhere;
-}
-
-.activity__browser-screenshot {
-  display: block;
-  inline-size: 100%;
-  /* Screenshot well. Not --sigvelo-layout-sidebar. */
-  max-block-size: 16rem;
-  aspect-ratio: 16 / 10;
-  object-fit: contain;
-  border-radius: var(--sigvelo-radius-md);
-  background-color: var(--sigvelo-color-surface);
-}
-
-/* Mini diff inside an edit panel */
-.activity__diff-del {
-  color: var(--sigvelo-color-danger-text-on-subtle);
-}
-
-.activity__diff-add {
-  color: var(--sigvelo-color-success-text-on-subtle);
-}
-
 .activity__favicon {
   display: block;
   inline-size: var(--sigvelo-control-icon-size-md);