@mcp-b/react-components 0.34.0 → 0.35.0

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

@@ -1,4 +1,4 @@
-import { i as formatErrorMessage } from "../../format-CmopcfqJ.js";
+import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { getWorkspaceBasename, inferWorkspaceMedia } from "./WorkspaceFile.js";
 import { n as isWorkspacePathWithinRoot, t as canonicalizeAbsoluteWorkspacePath } from "../../workspace-path-L_KmjRjq.js";
 import * as React from "react";

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

@@ -1,4 +1,4 @@
-import { o as WorkspaceState } from "../../Workspace-EhvvlHOB.js";
+import { o as WorkspaceState } from "../../Workspace-GTlqvcIn.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/WorkspaceBrowser.d.ts

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

@@ -1,5 +1,5 @@
 import { a as WorkspaceFileLinkProps, c as WorkspaceLinkResolution, d as WorkspaceNavigationProvider, f as WorkspaceNavigationProviderProps, i as WorkspaceFileLink, l as WorkspaceNavigationAdapter, n as WorkspaceDestination, o as WorkspaceInvalidDestination, p as resolveWorkspaceLink, r as WorkspaceExternalDestination, s as WorkspaceLinkBase, t as ResolveWorkspaceLinkOptions, u as WorkspaceNavigationEntry } from "../../WorkspaceLink-DQogVe8E.js";
-import { a as WorkspaceMediaInfo, c as WorkspaceMediaTrackKind, d as inferWorkspaceLanguage, f as inferWorkspaceMedia, g as parseWorkspaceSkill, h as isWorkspaceSkillPath, i as WorkspaceFileState, l as WorkspaceSkillDocument, m as isWorkspaceMediaPath, n as WorkspaceFileAssetRequest, o as WorkspaceMediaKind, p as isWorkspaceMarkdownPath, r as WorkspaceFileAssetResolver, s as WorkspaceMediaTrack, t as WorkspaceFileAsset } from "../../WorkspaceFile-C8Riev9j.js";
-import { a as WorkspaceSource, c as workspaceBinaryFileQueryOptions, d as workspaceDirectoryQueryPrefix, f as workspaceFileAssetQueryOptions, g as workspaceTextFileQueryOptions, h as workspaceQueryKey, i as WorkspaceQueryKey, l as workspaceDirectoryQueryKey, m as workspaceInfoQueryOptions, n as WorkspaceFileReadTarget, o as WorkspaceState, p as workspaceFileStatQueryOptions, r as WorkspaceInfo, s as useWorkspace, t as UseWorkspaceOptions, u as workspaceDirectoryQueryOptions } from "../../Workspace-EhvvlHOB.js";
-import { n as WorkspaceExplorerProps, t as WorkspaceExplorer } from "../../WorkspaceExplorer-DygQnEyi.js";
+import { _ as parseWorkspaceSkill, a as WorkspaceMediaInfo, c as WorkspaceMediaTrackKind, d as inferWorkspaceLanguage, f as inferWorkspaceMedia, g as isWorkspaceSkillPath, h as isWorkspaceMediaPath, i as WorkspaceFileState, l as WorkspaceSkillDocument, m as isWorkspaceMarkdownPath, n as WorkspaceFileAssetRequest, o as WorkspaceMediaKind, r as WorkspaceFileAssetResolver, s as WorkspaceMediaTrack, t as WorkspaceFileAsset } from "../../WorkspaceFile-CVAzjTt6.js";
+import { a as WorkspaceSource, c as workspaceBinaryFileQueryOptions, d as workspaceDirectoryQueryPrefix, f as workspaceFileAssetQueryOptions, g as workspaceTextFileQueryOptions, h as workspaceQueryKey, i as WorkspaceQueryKey, l as workspaceDirectoryQueryKey, m as workspaceInfoQueryOptions, n as WorkspaceFileReadTarget, o as WorkspaceState, p as workspaceFileStatQueryOptions, r as WorkspaceInfo, s as useWorkspace, t as UseWorkspaceOptions, u as workspaceDirectoryQueryOptions } from "../../Workspace-GTlqvcIn.js";
+import { n as WorkspaceExplorerProps, t as WorkspaceExplorer } from "../../WorkspaceExplorer-Cu044amt.js";
 export { type ResolveWorkspaceLinkOptions, type UseWorkspaceOptions, type WorkspaceDestination, WorkspaceExplorer, WorkspaceExplorerProps, type WorkspaceExternalDestination, type WorkspaceFileAsset, type WorkspaceFileAssetRequest, type WorkspaceFileAssetResolver, WorkspaceFileLink, type WorkspaceFileLinkProps, type WorkspaceFileReadTarget, type WorkspaceFileState, type WorkspaceInfo, type WorkspaceInvalidDestination, type WorkspaceLinkBase, type WorkspaceLinkResolution, type WorkspaceMediaInfo, type WorkspaceMediaKind, type WorkspaceMediaTrack, type WorkspaceMediaTrackKind, type WorkspaceNavigationAdapter, type WorkspaceNavigationEntry, WorkspaceNavigationProvider, type WorkspaceNavigationProviderProps, type WorkspaceQueryKey, type WorkspaceSkillDocument, type WorkspaceSource, type WorkspaceState, inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceMediaPath, isWorkspaceSkillPath, parseWorkspaceSkill, resolveWorkspaceLink, useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryKey, workspaceDirectoryQueryOptions, workspaceDirectoryQueryPrefix, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions };

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

@@ -3,7 +3,7 @@ import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceMediaPath, isWorkspaceSkillPath, parseWorkspaceSkill } from "./WorkspaceFile.js";
 import { a as WorkspaceNavigationRestorationBoundary, n as WorkspaceNavigationProvider, o as useRequiredWorkspaceNavigationRestoration, r as resolveWorkspaceLink, t as WorkspaceFileLink } from "../../WorkspaceLink-DZeLe_jN.js";
 import { WorkspaceBrowser } from "./WorkspaceBrowser.js";
-import { t as WorkspaceFileView } from "../../WorkspaceFileView-BtzVKAed.js";
+import { t as WorkspaceFileView } from "../../WorkspaceFileView-BmxSbhRu.js";
 import { useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryKey, workspaceDirectoryQueryOptions, workspaceDirectoryQueryPrefix, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions } from "./Workspace.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,2 +1,2 @@
-import { a as WorkspaceMediaInfo, c as WorkspaceMediaTrackKind, d as inferWorkspaceLanguage, f as inferWorkspaceMedia, g as parseWorkspaceSkill, h as isWorkspaceSkillPath, i as WorkspaceFileState, l as WorkspaceSkillDocument, m as isWorkspaceMediaPath, n as WorkspaceFileAssetRequest, o as WorkspaceMediaKind, p as isWorkspaceMarkdownPath, r as WorkspaceFileAssetResolver, s as WorkspaceMediaTrack, t as WorkspaceFileAsset, u as getWorkspaceBasename } from "../../WorkspaceFile-C8Riev9j.js";
-export { WorkspaceFileAsset, WorkspaceFileAssetRequest, WorkspaceFileAssetResolver, WorkspaceFileState, WorkspaceMediaInfo, WorkspaceMediaKind, WorkspaceMediaTrack, WorkspaceMediaTrackKind, WorkspaceSkillDocument, getWorkspaceBasename, inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceMediaPath, isWorkspaceSkillPath, parseWorkspaceSkill };
+import { _ as parseWorkspaceSkill, a as WorkspaceMediaInfo, c as WorkspaceMediaTrackKind, d as inferWorkspaceLanguage, f as inferWorkspaceMedia, g as isWorkspaceSkillPath, h as isWorkspaceMediaPath, i as WorkspaceFileState, l as WorkspaceSkillDocument, m as isWorkspaceMarkdownPath, n as WorkspaceFileAssetRequest, o as WorkspaceMediaKind, p as inferWorkspaceMimeType, r as WorkspaceFileAssetResolver, s as WorkspaceMediaTrack, t as WorkspaceFileAsset, u as getWorkspaceBasename } from "../../WorkspaceFile-CVAzjTt6.js";
+export { WorkspaceFileAsset, WorkspaceFileAssetRequest, WorkspaceFileAssetResolver, WorkspaceFileState, WorkspaceMediaInfo, WorkspaceMediaKind, WorkspaceMediaTrack, WorkspaceMediaTrackKind, WorkspaceSkillDocument, getWorkspaceBasename, inferWorkspaceLanguage, inferWorkspaceMedia, inferWorkspaceMimeType, isWorkspaceMarkdownPath, isWorkspaceMediaPath, isWorkspaceSkillPath, parseWorkspaceSkill };

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

@@ -108,6 +108,21 @@ const MEDIA_BY_EXTENSION = {
 		mimeType: "video/x-m4v"
 	}
 };
+/**
+* Source extensions whose registry answer is wrong for a workspace. `.ts` and
+* `.mts` are MPEG-2 transport stream to both the IANA registry and a browser's
+* own `File.type`, so a store that reports either verbatim describes every
+* TypeScript file as a video. Those two are the registry's only collisions with
+* a source extension — `.cts` and `.tsx` are simply absent from it, and `.svg`
+* is a genuine image — so this table stays a short list of known-wrong names
+* rather than an allowlist that would refuse real media it has not heard of.
+*/
+const SOURCE_MIME_BY_EXTENSION = {
+	ts: "text/typescript",
+	mts: "text/typescript",
+	cts: "text/typescript",
+	tsx: "text/tsx"
+};
 const SUPPORTED_IMAGE_MIME_TYPES = /* @__PURE__ */ new Set([
 	"image/png",
 	"image/jpeg",
@@ -147,6 +162,9 @@ function inferWorkspaceMediaFromMime(mimeType) {
 function getWorkspaceBasename(path) {
 	return path.split("/").filter(Boolean).at(-1) ?? path;
 }
+function workspaceExtension(path) {
+	return getWorkspaceBasename(path).split(".").at(-1)?.toLowerCase() ?? "";
+}
 function isWorkspaceMarkdownPath(path) {
 	return getWorkspaceBasename(path).toLowerCase().endsWith(".md");
 }
@@ -159,15 +177,35 @@ function isWorkspaceSkillPath(path) {
 * that report generic values such as `application/octet-stream`.
 */
 function inferWorkspaceMedia(path, mimeType) {
+	const extension = workspaceExtension(path);
+	if (SOURCE_MIME_BY_EXTENSION[extension]) return null;
 	const byMimeType = inferWorkspaceMediaFromMime(mimeType);
 	if (byMimeType) return byMimeType;
 	const normalizedMimeType = normalizeWorkspaceMimeType(mimeType);
 	if (normalizedMimeType && !GENERIC_MEDIA_MIME_TYPES.has(normalizedMimeType)) return null;
-	const extension = getWorkspaceBasename(path).split(".").at(-1)?.toLowerCase() ?? "";
 	const byExtension = MEDIA_BY_EXTENSION[extension];
 	if (byExtension) return byExtension;
 	return null;
 }
+/**
+* The mime type this vocabulary fixes for a file name, or `null` where it has
+* no opinion and the caller's own answer stands.
+*
+* A workspace that derives mime types from names needs this for the reason
+* `inferWorkspaceMedia` distrusts them: the platform registries call `.ts`
+* MPEG-2 transport stream, and every downstream media check believes it. Media
+* extensions answer their canonical type here too, so a host has one call
+* instead of a copy of the table this module already keeps.
+*
+* @example
+* ```ts
+* const mimeType = inferWorkspaceMimeType(name) ?? lookup(name) ?? "application/octet-stream";
+* ```
+*/
+function inferWorkspaceMimeType(path) {
+	const extension = workspaceExtension(path);
+	return SOURCE_MIME_BY_EXTENSION[extension] ?? MEDIA_BY_EXTENSION[extension]?.mimeType ?? null;
+}
 function isWorkspaceMediaPath(path, mimeType) {
 	return inferWorkspaceMedia(path, mimeType) !== null;
 }
@@ -188,8 +226,7 @@ function parseWorkspaceSkill(content) {
 }
 /** Best-effort syntax-highlighting language from a file path; unknown extensions render as plain text. */
 function inferWorkspaceLanguage(path) {
-	const extension = getWorkspaceBasename(path).split(".").at(-1)?.toLowerCase() ?? "";
-	return LANGUAGE_BY_EXTENSION[extension] ?? "text";
+	return LANGUAGE_BY_EXTENSION[workspaceExtension(path)] ?? "text";
 }
 //#endregion
-export { getWorkspaceBasename, inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceMediaPath, isWorkspaceSkillPath, parseWorkspaceSkill };
+export { getWorkspaceBasename, inferWorkspaceLanguage, inferWorkspaceMedia, inferWorkspaceMimeType, isWorkspaceMarkdownPath, isWorkspaceMediaPath, isWorkspaceSkillPath, parseWorkspaceSkill };

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

@@ -1,4 +1,4 @@
-import { i as WorkspaceFileState } from "../../WorkspaceFile-C8Riev9j.js";
+import { i as WorkspaceFileState } from "../../WorkspaceFile-CVAzjTt6.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/WorkspaceFileView.d.ts

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

@@ -1,2 +1,2 @@
-import { t as WorkspaceFileView } from "../../WorkspaceFileView-BtzVKAed.js";
+import { t as WorkspaceFileView } from "../../WorkspaceFileView-BmxSbhRu.js";
 export { WorkspaceFileView };

package/dist/components/ai-sdk/Approval.d.ts

@@ -62,7 +62,6 @@ declare function ApprovalPreviewRow({
 }: ApprovalPreviewRowProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare function formatApprovalValue(value: unknown): string;
 interface ApprovalInputPreviewProps {
   input: unknown;
 }
@@ -99,4 +98,4 @@ declare function ApprovalDecision({
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { Approval, ApprovalCount, ApprovalCountProps, ApprovalDecision, ApprovalDecisionProps, ApprovalDecisionValue, ApprovalHeader, ApprovalHeaderProps, ApprovalInputPreview, ApprovalInputPreviewProps, ApprovalPreview, ApprovalPreviewProps, ApprovalPreviewRow, ApprovalPreviewRowProps, ApprovalProps, ApprovalQuestion, ApprovalQuestionProps, formatApprovalValue };
+export { Approval, ApprovalCount, ApprovalCountProps, ApprovalDecision, ApprovalDecisionProps, ApprovalDecisionValue, ApprovalHeader, ApprovalHeaderProps, ApprovalInputPreview, ApprovalInputPreviewProps, ApprovalPreview, ApprovalPreviewProps, ApprovalPreviewRow, ApprovalPreviewRowProps, ApprovalProps, ApprovalQuestion, ApprovalQuestionProps };

package/dist/components/ai-sdk/Approval.js

@@ -1,6 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { B as PencilIcon } from "../../icons-B1Qw05te.js";
 import { Button } from "../foundations/Button.js";
+import { a as formatUnknownValue } from "../../format-DB2mX9DA.js";
 import { Kbd } from "../foundations/Kbd.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -68,17 +69,13 @@ function ApprovalPreviewRow({ children, className, label, ref, ...props }) {
 		]
 	});
 }
-function formatApprovalValue(value) {
-	if (typeof value === "string") return value;
-	return JSON.stringify(value) ?? String(value);
-}
 /** Renders unknown upstream input without changing or normalizing its shape. */
 function ApprovalInputPreview({ input }) {
 	const entries = input && typeof input === "object" && !Array.isArray(input) ? Object.entries(input) : void 0;
 	return /* @__PURE__ */ jsx(ApprovalPreview, { children: entries ? entries.map(([key, value]) => /* @__PURE__ */ jsx(ApprovalPreviewRow, {
 		label: key,
-		children: formatApprovalValue(value)
-	}, key)) : /* @__PURE__ */ jsx(ApprovalPreviewRow, { children: formatApprovalValue(input) }) });
+		children: formatUnknownValue(value)
+	}, key)) : /* @__PURE__ */ jsx(ApprovalPreviewRow, { children: formatUnknownValue(input) }) });
 }
 function getErrorMessage(error) {
 	if (error instanceof Error && error.message.trim()) return error.message;
@@ -223,4 +220,4 @@ function ApprovalDecision({ className, onDecision, onSkip, subject = "this actio
 	});
 }
 //#endregion
-export { Approval, ApprovalCount, ApprovalDecision, ApprovalHeader, ApprovalInputPreview, ApprovalPreview, ApprovalPreviewRow, ApprovalQuestion, formatApprovalValue };
+export { Approval, ApprovalCount, ApprovalDecision, ApprovalHeader, ApprovalInputPreview, ApprovalPreview, ApprovalPreviewRow, ApprovalQuestion };

package/dist/components/ai-sdk/Context.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Popover } from "../foundations/Popover.js";
 import { Separator } from "../foundations/Separator.js";
-import { t as ProgressRing } from "../../progress-ring-Dz_ztrW2.js";
+import { t as ProgressRing } from "../../progress-ring-BEocM1e3.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Context.tsx

package/dist/components/ai-sdk/Goal.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Q as TargetIcon, V as PlayIcon, et as TrashIcon, z as PauseIcon } from "../../icons-B1Qw05te.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { i as formatErrorMessage } from "../../format-CmopcfqJ.js";
+import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Goal.tsx

package/dist/components/ai-sdk/Message.js

@@ -3,7 +3,7 @@ import { C as FileIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../ic
 import { Button } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { t as AttachmentPreview } from "../../attachment-preview-1CXJvrmb.js";
-import { n as clamp } from "../../format-CmopcfqJ.js";
+import { n as clamp } from "../../format-DB2mX9DA.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cjk } from "@streamdown/cjk";

package/dist/components/ai-sdk/Plan.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { d as CheckIcon, i as ArrowRightIcon, v as DotIcon } from "../../icons-B1Qw05te.js";
 import { Popover } from "../foundations/Popover.js";
-import { t as ProgressRing } from "../../progress-ring-Dz_ztrW2.js";
+import { t as ProgressRing } from "../../progress-ring-BEocM1e3.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Plan.tsx

package/dist/components/ai-sdk/PromptInput.js

@@ -4,7 +4,7 @@ import { Button } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { t as AttachmentPreview } from "../../attachment-preview-1CXJvrmb.js";
-import { i as formatErrorMessage, n as clamp, r as formatClock } from "../../format-CmopcfqJ.js";
+import { i as formatErrorMessage, n as clamp, r as formatClock } from "../../format-DB2mX9DA.js";
 import { Combobox } from "../foundations/Combobox.js";
 import { Kbd } from "../foundations/Kbd.js";
 import { Menu } from "../foundations/Menu.js";

package/dist/components/ai-sdk/ToolInvocation.js

@@ -1,12 +1,12 @@
 import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Activity.js";
+import { a as formatUnknownValue } from "../../format-DB2mX9DA.js";
 import { getToolDisplayName, isToolPartFailed, isToolPartWorking } from "./ToolPart.js";
 import { t as summarizeToolInput } from "../../summarize-tool-input-CqTcGRYy.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getToolName } from "ai";
 //#region src/components/ai-sdk/ToolInvocation.tsx
 function formatToolValue(value) {
-	if (value === void 0) return void 0;
-	return typeof value === "string" ? value : JSON.stringify(value, null, 2);
+	return value === void 0 ? void 0 : formatUnknownValue(value, 2);
 }
 function describeToolPart(part) {
 	const name = getToolDisplayName(part);

package/dist/components/extension/ChatGptSignInScreen.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { J as SpinnerIcon } from "../../icons-B1Qw05te.js";
 import { Button } from "../foundations/Button.js";
-import { u as ModelSelectorLogo } from "../../ModelSelector-DzdEs2fX.js";
+import { u as ModelSelectorLogo } from "../../ModelSelector-DtBxWqRn.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/extension/ChatGptSignInScreen.tsx

package/dist/components/extension/CodexModelSelector.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { W as RefreshIcon, d as CheckIcon, f as ChevronDownIcon, l as BrainIcon, m as ChevronRightIcon } from "../../icons-B1Qw05te.js";
 import { Tooltip } from "../foundations/Tooltip.js";
-import { a as titleCase } from "../../format-CmopcfqJ.js";
+import { o as titleCase } from "../../format-DB2mX9DA.js";
 import { Menu } from "../foundations/Menu.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/extension/ConversationTabPicker.js

@@ -1,7 +1,7 @@
 import { tt as WarningIcon } from "../../icons-B1Qw05te.js";
 import { Avatar } from "../foundations/Avatar.js";
 import { Button } from "../foundations/Button.js";
-import { i as formatErrorMessage } from "../../format-CmopcfqJ.js";
+import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { Menu } from "../foundations/Menu.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/foundations/EmptyState.d.ts

@@ -18,7 +18,8 @@ interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ti
  * region is the container's job, not this component's; set
  * `--sigvelo-recipe-empty-state-padding-block` where a roomier well is wanted.
  *
- * `children` replaces the whole stack, for the cases that need an action.
+ * `children` land under the description, for the action that makes the region
+ * non-empty.
  *
  * @example
  * ```tsx
@@ -28,7 +29,9 @@ interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ti
  *   icon={<MessageIcon />}
  *   title="Start a conversation"
  *   description="Ask the agent to inspect, plan, or build."
- * />
+ * >
+ *   <Button size="sm">New thread</Button>
+ * </EmptyState>
  * ```
  */
 declare function EmptyState({

package/dist/components/foundations/EmptyState.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/foundations/EmptyState.tsx
 /**
 * Placeholder for a region that has nothing in it yet.
@@ -11,7 +11,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * region is the container's job, not this component's; set
 * `--sigvelo-recipe-empty-state-padding-block` where a roomier well is wanted.
 *
-* `children` replaces the whole stack, for the cases that need an action.
+* `children` land under the description, for the action that makes the region
+* non-empty.
 *
 * @example
 * ```tsx
@@ -21,15 +22,17 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 *   icon={<MessageIcon />}
 *   title="Start a conversation"
 *   description="Ask the agent to inspect, plan, or build."
-* />
+* >
+*   <Button size="sm">New thread</Button>
+* </EmptyState>
 * ```
 */
 function EmptyState({ className, icon, title, description, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("empty-state", className),
 		...props,
-		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+		children: [
 			icon ? /* @__PURE__ */ jsx("span", {
 				className: "empty-state__icon",
 				"aria-hidden": "true",
@@ -42,8 +45,9 @@ function EmptyState({ className, icon, title, description, children, ref, ...pro
 			description ? /* @__PURE__ */ jsx("div", {
 				className: "empty-state__description",
 				children: description
-			}) : null
-		] })
+			}) : null,
+			children
+		]
 	});
 }
 //#endregion

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

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
-import { n as clamp } from "../../format-CmopcfqJ.js";
+import { n as clamp } from "../../format-DB2mX9DA.js";
 import { Separator } from "../foundations/Separator.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { K as SidebarIcon } from "../../icons-B1Qw05te.js";
 import { Button } from "../foundations/Button.js";
-import { t as capitalize } from "../../format-CmopcfqJ.js";
+import { t as capitalize } from "../../format-DB2mX9DA.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { AppTopBar } from "./AppTopBar.js";
 import { ResizableSidePanel } from "./ResizableSidePanel.js";

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

@@ -1,6 +1,6 @@
 import { Button } from "../foundations/Button.js";
 import { Dialog } from "../foundations/Dialog.js";
-import { i as formatErrorMessage } from "../../format-CmopcfqJ.js";
+import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { Field } from "../foundations/Field.js";
 import { Form } from "../foundations/Form.js";
 import * as React from "react";

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

@@ -10,8 +10,13 @@ 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;
@@ -57,7 +62,12 @@ interface SelectedAgentToolChildProps<ParentAgentT extends ThinkAgent<ParentStat
   messages?: ThinkChatMessagesProps<MessageT>;
   /** App-authored TanStack Router Link to the parent conversation. */
   backLink?: React.ReactElement;
-  /** Rendered while the child transcript loads (the internal Suspense fallback). */
+  /**
+   * 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;

package/dist/components/nanites/AgentToolDetail.js

@@ -3,7 +3,7 @@ import { r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.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 { t as ThinkChat } from "../../ThinkChat-DbzqSTBt.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
 import * as React from "react";
@@ -69,12 +69,16 @@ function AgentToolDetail({ actions, backLink, chat, className, messages, ref, ru
 			}) : 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(ThinkChat.Messages, {
+					...messages,
+					showComposer: false,
+					loading: true
 				})
 			}),
 			actions ? /* @__PURE__ */ jsx(SubagentRunActions, { children: actions }) : null
@@ -109,7 +113,12 @@ function selectedAgentToolChildOptions(parentAgent, run, connectionOptions) {
 function SelectedAgentToolChild({ actions, backLink, connectionOptions, fallback, getInitialMessages, messages, parentAgent, run }) {
 	const childAgent = useAgent(selectedAgentToolChildOptions(parentAgent, run, connectionOptions));
 	return /* @__PURE__ */ jsx(React.Suspense, {
-		fallback: fallback ?? null,
+		fallback: fallback ?? /* @__PURE__ */ jsx(AgentToolDetail, {
+			run,
+			messages,
+			backLink,
+			actions
+		}),
 		children: /* @__PURE__ */ jsx(SelectedAgentToolChildChat, {
 			actions,
 			backLink,

package/dist/{format-CmopcfqJ.js → format-DB2mX9DA.js}

@@ -37,5 +37,20 @@ function formatClock(totalSeconds) {
 function formatErrorMessage(error) {
 	return error instanceof Error ? error.message : String(error);
 }
+/**
+* Renders an unknown upstream value as display text. Tool arguments, results,
+* and audit records arrive in shapes this package never declared, so a bigint,
+* a cycle, or a value `JSON.stringify` has no answer for is an ordinary input
+* here rather than a thrown render. `space` is `JSON.stringify`'s, so a block
+* panel passes `2` and an inline row passes nothing.
+*/
+function formatUnknownValue(value, space) {
+	if (typeof value === "string") return value;
+	try {
+		return JSON.stringify(value, (_key, item) => typeof item === "bigint" ? `${item}n` : item, space) ?? String(value);
+	} catch {
+		return String(value);
+	}
+}
 //#endregion
-export { titleCase as a, formatErrorMessage as i, clamp as n, formatClock as r, capitalize as t };
+export { formatUnknownValue as a, formatErrorMessage as i, clamp as n, titleCase as o, formatClock as r, capitalize as t };

package/dist/{progress-ring-Dz_ztrW2.js → progress-ring-BEocM1e3.js}

@@ -1,4 +1,4 @@
-import { n as clamp } from "./format-CmopcfqJ.js";
+import { n as clamp } from "./format-DB2mX9DA.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/progress-ring.tsx
 /**

package/dist/styles/agent-chat.css

@@ -57,6 +57,22 @@
   --message-scroller-button-inset-block-end: var(--sigvelo-spacing-2);
 }
 
+/* Takes the whole transcript region, the way the scroller it stands in for
+   does, so nothing moves when the rows arrive. The composer floats over its
+   lower edge, so the spinner sits slightly high rather than under it. */
+.agent-chat__transcript-loading {
+  display: grid;
+  block-size: 100%;
+  min-block-size: 0;
+  place-items: center;
+  padding-block-end: var(--agent-chat-composer-size, 5rem);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.agent-chat[data-composer-hidden] .agent-chat__transcript-loading {
+  padding-block-end: 0;
+}
+
 .agent-chat-start-screen {
   block-size: 100%;
   min-block-size: 0;

package/dist/styles/field.css

@@ -8,7 +8,7 @@
 
 .field[data-invalid] .field__label,
 .field[data-invalid] .field-title {
-  color: var(--sigvelo-color-danger-bg);
+  color: var(--sigvelo-color-danger-text);
 }
 
 .field--horizontal {
@@ -103,7 +103,7 @@
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
   line-height: var(--sigvelo-leading-snug);
-  color: var(--sigvelo-color-danger-bg);
+  color: var(--sigvelo-color-danger-text);
   margin: 0;
   opacity: 1;
   translate: 0;

package/dist/styles/think-execution-workbench.css

@@ -58,6 +58,15 @@
   min-inline-size: 0;
 }
 
+/* Only the container concerns — the block inside is `EmptyState`, and this
+   component is documented as reusable outside the workbench, so it does not
+   reach for a workbench class to fill itself. */
+.think-execution-detail--empty {
+  align-content: center;
+  justify-items: center;
+  min-block-size: 12rem;
+}
+
 .think-execution-workbench__run-list {
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -187,19 +196,6 @@
   line-height: var(--sigvelo-leading-tight);
 }
 
-.think-execution-workbench__empty-detail {
-  min-block-size: 12rem;
-  display: grid;
-  place-items: center;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
-  text-align: center;
-}
-
-.think-execution-workbench__empty-detail p {
-  margin: 0;
-}
-
 @container (width >= 44rem) {
   .think-execution-workbench__content {
     grid-template-rows: minmax(0, 1fr);

package/dist/styles/think-routine-library.css

@@ -355,38 +355,10 @@
     var(--sigvelo-color-neutral-border-subtle);
 }
 
-.think-routine-library__empty-list,
-.think-routine-library__empty-detail {
-  color: var(--sigvelo-color-text-muted);
-  text-align: center;
-}
-
-.think-routine-library__empty-list {
-  padding: var(--sigvelo-spacing-4) var(--sigvelo-spacing-3);
-}
-
-.think-routine-library__empty-list p,
-.think-routine-library__empty-detail p {
-  margin: var(--sigvelo-spacing-1) 0 0;
-  font-size: var(--sigvelo-text-compact);
-}
-
+/* Filling the pane is all this adds — the muted, centred anatomy inside it is
+   `EmptyState`, which already centres itself and spaces its own action. */
 .think-routine-library__empty-detail {
   min-block-size: 100%;
-  display: grid;
-  place-content: center;
-  padding: var(--sigvelo-spacing-4);
-}
-
-.think-routine-library__empty-detail h1 {
-  margin: 0;
-  color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-lg);
-}
-
-.think-routine-library__empty-action {
-  justify-self: center;
-  margin-block-start: var(--sigvelo-spacing-4);
 }
 
 .think-routine-library__create {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "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.34.0"
+    "@mcp-b/design-tokens": "0.35.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.230",