@mcp-b/react-components 0.14.0 → 0.14.2

package/dist/components/ThinkChat.d.ts

@@ -1,8 +1,8 @@
-import { a as AgentChatRenderPartContext, r as AgentChatProps } from "../AgentChat-Cgb1xuT7.js";
+import { a as AgentChatRenderPartContext, r as AgentChatProps } from "../AgentChat-DQkqt82e.js";
 import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../BrowserLiveView-BV5qgFgI.js";
 import { n as BrowserReplayProps, t as BrowserReplay } from "../BrowserReplay-xWvRjRAC.js";
-import { _ as isThinkChatActivityPart } from "../ThinkChatToolParts-Cv4o7j6F.js";
-import { a as ThinkChatToolRenderers, c as renderThinkChatActivityPart, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as describeThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-m9orbdeI.js";
+import { x as isThinkChatActivityPart } from "../ThinkChatToolParts-CDEjqS6A.js";
+import { a as ThinkChatToolRenderers, c as renderThinkChatActivityPart, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as describeThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-BmwuIigx.js";
 import { n as ThinkChatValue } from "../ThinkChatContext-C3Eb1Xpi.js";
 import { FileInfo, UseWorkspaceOptions, WorkspaceExplorer, WorkspaceExplorerProps, WorkspaceFileState, WorkspaceInfo, WorkspaceSource, WorkspaceState, inferWorkspaceLanguage, useWorkspace } from "./WorkspaceExplorer.js";
 import * as React from "react";
@@ -29,6 +29,8 @@ interface ThinkChatMessagesProps<MessageT extends UIMessage = UIMessage> extends
   className?: string;
   /** Disable the composer (e.g. while the agent is unreachable). */
   disabled?: boolean;
+  /** Hide the composer while retaining the normal Think transcript rendering. */
+  showComposer?: AgentChatProps<MessageT>["showComposer"];
   /** Shown in place of the list while there are no messages. */
   emptyState?: React.ReactNode;
   /** Extra controls rendered inside the composer, next to the send button. */
@@ -104,7 +106,9 @@ declare function ThinkChatRoot<State = unknown, MessageT extends UIMessage = UIM
  * The full conversation surface — message list plus composer — with the
  * activity renderer as the default `renderPart`: runs of reasoning/tool parts
  * fold into one collapsed Activity block with derived labels and per-tool
- * panels. Extend for app-specific tools with `toolRenderers` (label/panel
+ * panels. Session-generated context/load/search tools are recognized from
+ * their upstream runtime schemas and keep their recorded inputs and outputs
+ * inspectable. Extend for app-specific tools with `toolRenderers` (label/panel
  * inside the log) or `excludeTools` + your own `renderPart` (standalone
  * card) — see README "App-specific tools" and the Custom Tool Panel story.
  */

package/dist/components/ThinkChat.js

@@ -2,6 +2,6 @@ import { BrowserLiveView } from "./BrowserLiveView.js";
 import { BrowserReplay } from "./BrowserReplay.js";
 import { isThinkChatActivityPart } from "./ThinkChatToolParts.js";
 import { ThinkChatActivity, createThinkChatActivityRenderer, describeThinkChatActivityPart, renderThinkChatActivityPart } from "./ThinkChatActivity.js";
-import { a as useThinkChat, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkPendingApprovals, r as ThinkChatProvider, t as ThinkChat } from "../ThinkChat-7DQ2CogF.js";
+import { a as useThinkChat, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkPendingApprovals, r as ThinkChatProvider, t as ThinkChat } from "../ThinkChat-BPcehdbP.js";
 import { WorkspaceExplorer, inferWorkspaceLanguage, useWorkspace } from "./WorkspaceExplorer.js";
 export { BrowserLiveView, BrowserReplay, ThinkChat, ThinkChatActivity, ThinkChatMessages, ThinkChatProvider, ThinkChatRoot, WorkspaceExplorer, createThinkChatActivityRenderer, describeThinkChatActivityPart, inferWorkspaceLanguage, isThinkChatActivityPart, renderThinkChatActivityPart, useThinkChat, useThinkPendingApprovals, useWorkspace };

package/dist/components/ThinkChatActivity.d.ts

@@ -1,3 +1,3 @@
-import { _ as isThinkChatActivityPart } from "../ThinkChatToolParts-Cv4o7j6F.js";
-import { a as ThinkChatToolRenderers, c as renderThinkChatActivityPart, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as describeThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-m9orbdeI.js";
+import { x as isThinkChatActivityPart } from "../ThinkChatToolParts-CDEjqS6A.js";
+import { a as ThinkChatToolRenderers, c as renderThinkChatActivityPart, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as describeThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-BmwuIigx.js";
 export { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, describeThinkChatActivityPart, isThinkChatActivityPart, renderThinkChatActivityPart };

package/dist/components/ThinkChatActivity.js

@@ -2,8 +2,8 @@ import { D as PencilIcon, I as TerminalIcon, L as WarningIcon, R as WrenchIcon,
 import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityText, ActivityTrigger } from "./Activity.js";
 import { t as summarizeToolInput } from "../summarize-tool-input-BUJsENSn.js";
 import { useOptionalThinkChatContext } from "./ThinkChatContext.js";
-import { displayUrl, isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartFailed, isPartWorking, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart } from "./ThinkChatToolParts.js";
-import { ThinkChatBrowserPanel, ThinkChatExecutePanel, ThinkChatFetchPanel, ThinkChatSkillPanel, ThinkChatWorkspacePanel } from "./ThinkChatToolPanels.js";
+import { displayUrl, isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartFailed, isPartWorking, isSessionContextToolFailure, isSessionContextToolPart, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart } from "./ThinkChatToolParts.js";
+import { ThinkChatBrowserPanel, ThinkChatExecutePanel, ThinkChatFetchPanel, ThinkChatSessionContextPanel, ThinkChatSkillPanel, ThinkChatWorkspacePanel } from "./ThinkChatToolPanels.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getToolInput, getToolOutput } from "@cloudflare/think/react";
@@ -130,6 +130,7 @@ function activityPartIconKind(part) {
 		case "tool-bash": return "command";
 	}
 	if (isSkillToolPart(part)) return "tool";
+	if (isSessionContextToolPart(part)) return part.type === "tool-search_context" || part.type === "tool-session_search" ? "search" : "tool";
 	if (isFetchToolPart(part)) return "web";
 	if (isBrowserToolPart(part)) return part.type === "tool-browser_execute" ? "browser" : "web";
 	if (isExecuteToolPart(part)) return "command";
@@ -163,6 +164,7 @@ function describeThinkChatActivityPart(part, toolRenderers) {
 	}
 	if (isWorkspaceToolPart(part)) return describeWorkspaceToolPart(part);
 	if (isSkillToolPart(part)) return describeSkillToolPart(part);
+	if (isSessionContextToolPart(part)) return describeSessionContextToolPart(part);
 	if (isFetchToolPart(part)) return describeFetchToolPart(part);
 	if (isBrowserToolPart(part)) return describeBrowserToolPart(part);
 	if (isExecuteToolPart(part)) return describeExecuteToolPart(part);
@@ -212,6 +214,23 @@ function describeSkillToolPart(part) {
 	})();
 	return failed ? `${label} · failed` : label;
 }
+function describeSessionContextToolPart(part) {
+	const working = isPartWorking(part);
+	const failed = isSessionContextToolFailure(part);
+	const label = (() => {
+		switch (part.type) {
+			case "tool-set_context": {
+				const target = part.input?.label ? ` ${part.input.label}` : " context";
+				return `${working ? "Updating" : "Updated"}${target}`;
+			}
+			case "tool-load_context": return `${working ? "Loading" : "Loaded"} ${part.input?.key ?? "context"}`;
+			case "tool-unload_context": return `${working ? "Unloading" : "Unloaded"} ${part.input?.key ?? "context"}`;
+			case "tool-search_context": return `${working ? "Searching" : "Searched"} ${part.input?.label ?? "context"}`;
+			case "tool-session_search": return `${working ? "Searching" : "Searched"} conversations`;
+		}
+	})();
+	return failed ? `${label} · failed` : label;
+}
 function describeBrowserToolPart(part) {
 	const working = isPartWorking(part);
 	const failed = isPartFailed(part);
@@ -253,6 +272,7 @@ function summarizeActivitySteps(parts) {
 	const skillNames = /* @__PURE__ */ new Set();
 	let thoughts = 0;
 	let skillParts = 0;
+	const sessionSegments = /* @__PURE__ */ new Set();
 	let fetches = 0;
 	let browses = 0;
 	let codeRuns = 0;
@@ -263,7 +283,8 @@ function summarizeActivitySteps(parts) {
 	} else if (isSkillToolPart(part)) {
 		skillParts++;
 		if (typeof part.input?.name === "string") skillNames.add(part.input.name);
-	} else if (isFetchToolPart(part)) fetches++;
+	} else if (isSessionContextToolPart(part)) sessionSegments.add(part.type === "tool-search_context" || part.type === "tool-session_search" ? "searched context" : "updated context");
+	else if (isFetchToolPart(part)) fetches++;
 	else if (isBrowserToolPart(part)) browses++;
 	else if (isExecuteToolPart(part)) codeRuns++;
 	else if (isToolUIPart(part)) genericSegments.add(genericToolLabels(getToolName(part), activityPartUrl(part) !== null).summary);
@@ -276,6 +297,7 @@ function summarizeActivitySteps(parts) {
 	const segments = [];
 	if (thoughts > 0) segments.push("thought");
 	if (skillParts > 0) segments.push(skillNames.size === 1 ? `used the ${[...skillNames][0]} skill` : skillNames.size > 1 ? `used ${skillNames.size} skills` : "used a skill");
+	for (const segment of ["updated context", "searched context"]) if (sessionSegments.has(segment)) segments.push(segment);
 	if (reads > 0) segments.push(`read ${files(reads)}`);
 	if (edits > 0) segments.push(`edited ${files(edits)}`);
 	if (deletes > 0) segments.push(`deleted ${files(deletes)}`);
@@ -362,6 +384,11 @@ function ThinkChatActivityStep({ text, part, toolRenderers }) {
 		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatSkillPanel, { part })
 	});
+	if (isSessionContextToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
+		label: text,
+		icon,
+		children: /* @__PURE__ */ jsx(ThinkChatSessionContextPanel, { part })
+	});
 	if (isFetchToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		label: text,
 		icon,

package/dist/components/ThinkChatToolPanels.d.ts

@@ -1,4 +1,4 @@
-import { i as SkillToolPart, l as WorkspaceToolPart, n as ExecuteToolPart, r as FetchToolPart, t as BrowserToolPart } from "../ThinkChatToolParts-Cv4o7j6F.js";
+import { a as SessionContextToolPart, d as WorkspaceToolPart, n as ExecuteToolPart, o as SkillToolPart, r as FetchToolPart, t as BrowserToolPart } from "../ThinkChatToolParts-CDEjqS6A.js";
 import * as React from "react";
 
 //#region src/components/ThinkChatToolPanels.d.ts
@@ -18,6 +18,14 @@ declare function ThinkChatSkillPanel({
 }: {
   part: SkillToolPart;
 }): React.JSX.Element;
+/** Session panels expose the durable context/search operation recorded in the
+    UIMessage. The session itself remains server-owned; this is transcript
+    rendering, not a client-side mirror of context state. */
+declare function ThinkChatSessionContextPanel({
+  part
+}: {
+  part: SessionContextToolPart;
+}): React.JSX.Element;
 declare function ThinkChatFetchPanel({
   part
 }: {
@@ -36,4 +44,4 @@ declare function ThinkChatBrowserPanel({
   part: BrowserToolPart;
 }): React.JSX.Element;
 //#endregion
-export { ThinkChatBrowserPanel, ThinkChatExecutePanel, ThinkChatFetchPanel, ThinkChatSkillPanel, ThinkChatWorkspacePanel };
+export { ThinkChatBrowserPanel, ThinkChatExecutePanel, ThinkChatFetchPanel, ThinkChatSessionContextPanel, ThinkChatSkillPanel, ThinkChatWorkspacePanel };

package/dist/components/ThinkChatToolPanels.js

@@ -2,7 +2,7 @@ import { ActivityOutput, ActivityPanel } from "./Activity.js";
 import { Tabs } from "./Tabs.js";
 import { t as CodeBlock } from "../CodeBlock-BUFXG8HW.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
-import { displayUrl } from "./ThinkChatToolParts.js";
+import { displayUrl, isSessionContextToolFailure } from "./ThinkChatToolParts.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { getToolName } from "ai";
@@ -152,6 +152,51 @@ function ThinkChatSkillPanel({ part }) {
 		}
 	}
 }
+/** Session panels expose the durable context/search operation recorded in the
+UIMessage. The session itself remains server-owned; this is transcript
+rendering, not a client-side mirror of context state. */
+function ThinkChatSessionContextPanel({ part }) {
+	if (part.state === "output-error") return /* @__PURE__ */ jsx(ActivityPanel, {
+		label: getToolName(part),
+		text: part.errorText,
+		status: "error",
+		error: true
+	});
+	if (part.state === "output-denied") return renderDeniedPanel(getToolName(part), part.approval.reason);
+	const output = part.state === "output-available" ? part.output : void 0;
+	const outputIsError = isSessionContextToolFailure(part);
+	switch (part.type) {
+		case "tool-set_context": {
+			const input = part.input;
+			const title = input?.metadata?.title;
+			return /* @__PURE__ */ jsx(ActivityPanel, {
+				label: title ? `${input?.label ?? "context"} / ${title}` : input?.label ?? "context",
+				text: input?.content,
+				status: output,
+				error: outputIsError
+			});
+		}
+		case "tool-load_context":
+		case "tool-unload_context": return /* @__PURE__ */ jsx(ActivityPanel, {
+			label: `${part.input?.label ?? "context"} / ${part.input?.key ?? "entry"}`,
+			text: output,
+			status: outputIsError ? "error" : void 0,
+			error: outputIsError
+		});
+		case "tool-search_context": return /* @__PURE__ */ jsx(ActivityPanel, {
+			label: part.input?.query ?? "Context search",
+			text: output,
+			status: outputIsError ? "error" : part.input?.label,
+			error: outputIsError
+		});
+		case "tool-session_search": return /* @__PURE__ */ jsx(ActivityPanel, {
+			label: part.input?.query ?? "Conversation search",
+			text: output,
+			status: outputIsError ? "error" : void 0,
+			error: outputIsError
+		});
+	}
+}
 function ThinkChatFetchPanel({ part }) {
 	const label = part.input?.url ?? part.input?.path ?? "fetch";
 	if (part.state === "output-error") return /* @__PURE__ */ jsx(ActivityPanel, {
@@ -364,4 +409,4 @@ function getBashStatusText(output, errorText, deniedReason) {
 	return "success";
 }
 //#endregion
-export { ThinkChatBrowserPanel, ThinkChatExecutePanel, ThinkChatFetchPanel, ThinkChatSkillPanel, ThinkChatWorkspacePanel };
+export { ThinkChatBrowserPanel, ThinkChatExecutePanel, ThinkChatFetchPanel, ThinkChatSessionContextPanel, ThinkChatSkillPanel, ThinkChatWorkspacePanel };

package/dist/components/ThinkChatToolParts.d.ts

@@ -1,2 +1,2 @@
-import { _ as isThinkChatActivityPart, a as ThinkBashToolOutput, c as ThinkWorkspaceToolName, d as isBrowserToolPart, f as isExecuteToolPart, g as isSkillToolPart, h as isPartWorking, i as SkillToolPart, l as WorkspaceToolPart, m as isPartFailed, n as ExecuteToolPart, o as ThinkBashToolPart, p as isFetchToolPart, r as FetchToolPart, s as ThinkChatPart, t as BrowserToolPart, u as displayUrl, v as isWorkspaceToolPart } from "../ThinkChatToolParts-Cv4o7j6F.js";
-export { BrowserToolPart, ExecuteToolPart, FetchToolPart, SkillToolPart, ThinkBashToolOutput, ThinkBashToolPart, ThinkChatPart, ThinkWorkspaceToolName, WorkspaceToolPart, displayUrl, isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartFailed, isPartWorking, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart };
+import { S as isWorkspaceToolPart, _ as isPartWorking, a as SessionContextToolPart, b as isSkillToolPart, c as ThinkBashToolPart, d as WorkspaceToolPart, f as displayUrl, g as isPartFailed, h as isFetchToolPart, i as SessionContextToolName, l as ThinkChatPart, m as isExecuteToolPart, n as ExecuteToolPart, o as SkillToolPart, p as isBrowserToolPart, r as FetchToolPart, s as ThinkBashToolOutput, t as BrowserToolPart, u as ThinkWorkspaceToolName, v as isSessionContextToolFailure, x as isThinkChatActivityPart, y as isSessionContextToolPart } from "../ThinkChatToolParts-CDEjqS6A.js";
+export { BrowserToolPart, ExecuteToolPart, FetchToolPart, SessionContextToolName, SessionContextToolPart, SkillToolPart, ThinkBashToolOutput, ThinkBashToolPart, ThinkChatPart, ThinkWorkspaceToolName, WorkspaceToolPart, displayUrl, isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartFailed, isPartWorking, isSessionContextToolFailure, isSessionContextToolPart, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart };

package/dist/components/ThinkChatToolParts.js

@@ -22,6 +22,22 @@ const SKILL_TOOL_NAMES = /* @__PURE__ */ new Set([
 function isSkillToolPart(part) {
 	return isStaticToolUIPart(part) && SKILL_TOOL_NAMES.has(getStaticToolName(part));
 }
+const SESSION_CONTEXT_TOOL_NAMES = /* @__PURE__ */ new Set([
+	"set_context",
+	"load_context",
+	"unload_context",
+	"search_context",
+	"session_search"
+]);
+function isSessionContextToolPart(part) {
+	return isStaticToolUIPart(part) && SESSION_CONTEXT_TOOL_NAMES.has(getStaticToolName(part));
+}
+/** Session tools report provider failures as successful string outputs so the
+model can recover. Treat that upstream `Error:` envelope as failed UI while
+preserving the recorded tool state and output verbatim. */
+function isSessionContextToolFailure(part) {
+	return isPartFailed(part) || part.state === "output-available" && part.output.startsWith("Error:");
+}
 function isFetchToolPart(part) {
 	return isStaticToolUIPart(part) && getStaticToolName(part).startsWith("fetch_");
 }
@@ -63,4 +79,4 @@ function displayUrl(url) {
 	return url ? url.replace(/^https?:\/\//, "") : "";
 }
 //#endregion
-export { displayUrl, isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartFailed, isPartWorking, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart };
+export { displayUrl, isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartFailed, isPartWorking, isSessionContextToolFailure, isSessionContextToolPart, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart };

package/dist/components/ThinkFullApp.js

@@ -4,7 +4,7 @@ import { Separator } from "./Separator.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { ToggleGroup } from "./ToggleGroup.js";
-import { o as useThinkPendingApprovals, s as resolveThinkApprovalProps, t as ThinkChat } from "../ThinkChat-7DQ2CogF.js";
+import { o as useThinkPendingApprovals, s as resolveThinkApprovalProps, t as ThinkChat } from "../ThinkChat-BPcehdbP.js";
 import { WorkspaceExplorer, useWorkspace } from "./WorkspaceExplorer.js";
 import { ThinkExecutionWorkbench } from "./ThinkExecutionWorkbench.js";
 import { ThinkThreadShell } from "./ThinkThreadShell.js";

package/dist/styles/activity.css

@@ -4,11 +4,15 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  min-width: 0;
   /* Hard cap, Codex-style, on the WHOLE unit — collapsed line and expanded
      log alike — so toggling never reflows the conversation width. Plain rem,
      not min(100%, …): percentages are ignored in intrinsic-size contributions,
      so the min() let wide nowrap rows inflate content-sized ancestors. */
   max-width: 36rem;
+  /* Live tool labels and panels must never contribute a wider intrinsic size
+     when Activity is inserted into a narrow chat transcript. */
+  contain: inline-size;
   /* Whitespace separates the work log from message prose around it */
   margin-block: 0.5rem;
   font-family: inherit;
@@ -17,6 +21,8 @@
 
 .activity__trigger {
   display: flex;
+  width: 100%;
+  min-width: 0;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
   padding-block: var(--sigvelo-spacing-1-5);

package/dist/styles/agent-chat.css

@@ -3,6 +3,7 @@
   position: relative;
   width: 100%;
   height: 100%;
+  min-width: 0;
   min-height: 0;
   background-color: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
@@ -10,6 +11,7 @@
 }
 
 .agent-chat__conversation {
+  min-width: 0;
   height: 100%;
   min-height: 0;
 }
@@ -18,12 +20,18 @@
    --agent-chat-composer-size is set from a ResizeObserver in AgentChat. */
 .agent-chat__transcript-content {
   gap: 0.875rem;
+  min-inline-size: 0;
+  max-inline-size: 100%;
   inline-size: min(100%, var(--agent-chat-content-max-inline-size));
   margin-inline: auto;
   padding-block: 1rem calc(var(--agent-chat-composer-size, 5rem) + 0.5rem);
   padding-inline: 1rem;
 }
 
+.agent-chat[data-composer-hidden] .agent-chat__transcript-content {
+  padding-block-end: var(--sigvelo-spacing-4);
+}
+
 .agent-chat__empty-row {
   display: flex;
   flex: 1;
@@ -35,7 +43,13 @@
 }
 
 .agent-chat__scroll-button {
-  inset-block-end: calc(var(--agent-chat-composer-size, 5rem) + 0.5rem);
+  --message-scroller-button-inset-block-end: calc(
+    var(--agent-chat-composer-size, 5rem) + var(--sigvelo-spacing-2)
+  );
+}
+
+.agent-chat[data-composer-hidden] .agent-chat__scroll-button {
+  --message-scroller-button-inset-block-end: var(--sigvelo-spacing-2);
 }
 
 /* Floating over the transcript: solid behind the controls, fading out

package/dist/styles/index.css

@@ -83,6 +83,7 @@
 @import "./queue.css" layer(components);
 @import "./reasoning.css" layer(components);
 @import "./sources.css" layer(components);
+@import "./subagent-run.css" layer(components);
 @import "./task.css" layer(components);
 @import "./terminal.css" layer(components);
 @import "./test-results.css" layer(components);

package/dist/styles/message-scroller.css

@@ -60,7 +60,7 @@
 .message-scroller__button {
   position: absolute;
   inset-inline-start: 50%;
-  inset-block-end: 1rem;
+  inset-block-end: var(--message-scroller-button-inset-block-end, 1rem);
   z-index: 1;
   translate: -50% 0;
   border-radius: 999rem;

package/dist/styles/message.css

@@ -3,6 +3,7 @@
   flex-direction: column;
   gap: 0.25rem;
   width: 100%;
+  min-width: 0;
   font-family: inherit;
   color: var(--sigvelo-color-text);
 }
@@ -20,6 +21,7 @@
 .message__content {
   display: inline-block;
   max-width: min(42rem, 85%);
+  min-width: 0;
   padding-block: 0.5rem;
   padding-inline: var(--sigvelo-spacing-3);
   border-radius: var(--sigvelo-radius-lg);

package/dist/styles/nanite-scene.css

@@ -5,6 +5,22 @@
   line-height: 0;
 }
 
+.nanite-mark {
+  display: inline-flex;
+  flex: 0 0 auto;
+  inline-size: 1.25rem;
+  block-size: 1.5rem;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.nanite-mark svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
 .nanite-scene--trio {
   inline-size: 200px;
   block-size: 68px;

package/dist/styles/streamdown.css

@@ -21,6 +21,16 @@
   overflow-wrap: anywhere;
 }
 
+.message[data-from="user"] [data-streamdown="link"] {
+  color: var(--sigvelo-color-primary-text-on-bg);
+}
+
+[data-streamdown="link"]:focus-visible {
+  outline: var(--sigvelo-focus-width) solid currentColor;
+  outline-offset: var(--sigvelo-focus-offset);
+  border-radius: var(--sigvelo-radius-xs);
+}
+
 /* Links render as <button> when link safety is enabled. */
 button[data-streamdown="link"] {
   appearance: none;

package/dist/styles/subagent-run.css

@@ -0,0 +1,188 @@
+.subagent-run {
+  display: inline-flex;
+  flex-direction: column;
+  max-inline-size: 100%;
+  color: var(--sigvelo-color-text);
+  font-family: inherit;
+}
+
+.subagent-run__trigger {
+  display: flex;
+  align-items: safe center;
+  gap: var(--sigvelo-spacing-1-5);
+  min-block-size: var(--sigvelo-control-height-md);
+  max-inline-size: 18rem;
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2-5);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-full);
+  background-color: var(--sigvelo-color-surface);
+  color: var(--sigvelo-color-text);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  transition:
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.subagent-run__trigger:hover:not([data-disabled]) {
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  border-color: var(--sigvelo-color-neutral-border-muted);
+}
+
+.subagent-run__trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
+}
+
+.subagent-run__trigger[data-panel-open],
+.subagent-run__trigger[aria-pressed="true"] {
+  border-color: var(--sigvelo-color-neutral-border-muted);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.subagent-run__trigger[aria-pressed="true"] {
+  box-shadow: inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-neutral-border-subtle);
+}
+
+.subagent-run__trigger-content {
+  display: flex;
+  align-items: safe center;
+  flex: 1 1 0;
+  gap: var(--sigvelo-spacing-1-5);
+  min-inline-size: 0;
+}
+
+.subagent-run__trigger[data-slot="subagent-run-trigger"] .subagent-run__trigger-content {
+  align-items: stretch;
+  flex-direction: column;
+  gap: 0;
+}
+
+.subagent-run__heading {
+  display: flex;
+  align-items: safe center;
+  flex-wrap: nowrap;
+  gap: var(--sigvelo-spacing-1-5);
+  min-inline-size: 0;
+}
+
+.subagent-run__title {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.subagent-run__description {
+  display: block;
+  overflow: hidden;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-compact);
+  line-height: 1.5;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.subagent-run__description:empty {
+  display: none;
+}
+
+.subagent-run__status {
+  max-inline-size: 100%;
+}
+
+.subagent-run__content-inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-spacing-3);
+  min-inline-size: min(30rem, calc(100vw - var(--sigvelo-spacing-8)));
+  margin-block-start: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-lg);
+  background-color: var(--sigvelo-color-surface);
+}
+
+.subagent-run__progress {
+  display: grid;
+  gap: var(--sigvelo-spacing-1-5);
+}
+
+.subagent-run__progress-label {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-3);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: 1.5;
+}
+
+.subagent-run__progress-label > :first-child {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.subagent-run__progress-label > :last-child {
+  flex: 0 0 auto;
+  font-variant-numeric: tabular-nums;
+}
+
+.subagent-run__milestones {
+  display: grid;
+  gap: var(--sigvelo-spacing-1-5);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.subagent-run__milestone {
+  display: flex;
+  align-items: baseline;
+  gap: var(--sigvelo-spacing-2);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-compact);
+  line-height: 1.5;
+}
+
+.subagent-run__milestone::before {
+  content: "";
+  flex: 0 0 auto;
+  inline-size: var(--sigvelo-spacing-1-5);
+  block-size: var(--sigvelo-spacing-1-5);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-full);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.subagent-run__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-2);
+  justify-content: flex-end;
+}
+
+@media (forced-colors: active) {
+  .subagent-run__trigger,
+  .subagent-run__content-inner {
+    border-color: CanvasText;
+  }
+
+  .subagent-run__trigger:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  .subagent-run__milestone::before {
+    border-color: CanvasText;
+  }
+}

package/dist/styles/think-full-app.css

@@ -46,6 +46,7 @@
   min-inline-size: 0;
   min-block-size: 0;
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   grid-template-rows: minmax(0, 1fr);
   overflow: hidden;
   background: var(--sigvelo-color-surface);
@@ -57,6 +58,7 @@
   min-inline-size: 0;
   min-block-size: 0;
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   grid-template-rows: minmax(0, 1fr);
   overflow: hidden;
 }

package/dist/styles/workspace-explorer.css

@@ -108,6 +108,7 @@
 }
 
 .workspace-explorer__tree .file-tree__name {
+  flex: 0 1 auto;
   line-height: 1.4;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "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": {
@@ -53,7 +53,7 @@
     "lucide-react": "^1.23.0",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.14.0"
+    "@mcp-b/design-tokens": "0.14.2"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",