@mcp-b/react-components 0.8.0 → 0.9.0

package/dist/{AgentChat-403mckDG.d.ts → AgentChat-B9LD_WF1.d.ts}

@@ -17,7 +17,60 @@ interface AgentChatRenderMessageContext<MessageT extends UIMessage = UIMessage>
 }
 interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   className?: string;
-  /** AI SDK `UIMessage`s to render, oldest first. */
+  /**
+   * AI SDK `UIMessage`s to render, oldest first.
+   *
+   * `AgentChat` intentionally renders the upstream message objects in place:
+   * it does not normalize them into a local transcript model. That keeps AI SDK
+   * parts such as `text`, `reasoning`, `file`, `tool-*`, `source-url`,
+   * `source-document`, and `step-start` aligned with the types exported from
+   * `ai`. Cloudflare Think also returns these same UI messages through
+   * `useAgentChat`, with Agents session storage applying compaction overlays to
+   * reads before they reach the hook.
+   *
+   * Backend setup for compaction is owned by Think/Agents, not this component:
+   * configure the agent session with `Session.create(this).onCompaction(...)
+   * .compactAfter(...)`. Agents' Sessions docs describe that `getHistory()`
+   * replaces a compacted range with a synthetic message whose id starts with
+   * `compaction_`; this component uses Agents' exported
+   * `isCompactionMessage` helper to render that synthetic message as a quiet
+   * separator. Think's context-overflow recovery is a separate opt-in layer:
+   * set `contextOverflow` and `classifyChatError` on the Think agent if the
+   * backend should compact and retry/proactively guard a too-large in-flight
+   * turn.
+   *
+   * @example Think session compaction setup
+   * ```ts
+   * import { Think, defaultContextOverflowClassifier } from "@cloudflare/think";
+   * import { Session } from "agents/experimental/memory/session";
+   * import { createCompactFunction } from "agents/experimental/memory/utils";
+   * import { generateText } from "ai";
+   *
+   * export class MyAgent extends Think<Env> {
+   *   override configureSession(session: Session) {
+   *     return session
+   *       .onCompaction(
+   *         createCompactFunction({
+   *           summarize: async (prompt) =>
+   *             (await generateText({ model: this.env.MODEL, prompt })).text,
+   *           protectHead: 3,
+   *           tailTokenBudget: 20_000,
+   *         }),
+   *       )
+   *       .compactAfter(100_000);
+   *   }
+   *
+   *   override contextOverflow = {
+   *     reactive: true,
+   *     proactive: { maxInputTokens: 200_000 },
+   *   };
+   *   override classifyChatError = defaultContextOverflowClassifier;
+   * }
+   * ```
+   *
+   * @see https://github.com/cloudflare/agents/blob/main/docs/agents/sessions.md#compaction
+   * @see https://github.com/cloudflare/agents/blob/main/docs/think/index.md#context-window-overflow-recovery
+   */
   messages: readonly MessageT[];
   /** Drives the composer's send/stop affordance and streaming indicators. */
   status?: ChatStatus;
@@ -64,7 +117,19 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
     maxTokens: number;
     modelId?: string;
   };
-  /** Override rendering per part; return `undefined` to fall back to the default part UI. */
+  /**
+   * Override rendering per part; return `undefined` to fall back to the default
+   * AI SDK/Think-aware part UI.
+   *
+   * The default renderer uses upstream helpers where available:
+   * `isTextUIPart`, `isReasoningUIPart`, `isFileUIPart`, `isToolUIPart`,
+   * `getToolName`, and Think's `getToolPartState`/input/output accessors. It
+   * also renders native AI SDK `source-url`/`source-document` parts as a single
+   * grouped `Sources` block when they appear consecutively, and native
+   * `step-start` parts as step separators. If you override source rendering,
+   * return a React node for every source part you want to show; returning
+   * `undefined` lets `AgentChat` keep the upstream-shaped source-run grouping.
+   */
   renderPart?: (context: AgentChatRenderPartContext<MessageT>) => React.ReactNode | undefined;
   /** Rendered after each message's parts — for actions, citations, and the like. */
   renderMessageAfter?: (context: AgentChatRenderMessageContext<MessageT>) => React.ReactNode;

package/dist/{ThinkChatActivity-CeHzk6-K.d.ts → ThinkChatActivity-B2UD95My.d.ts}

@@ -1,4 +1,4 @@
-import { a as AgentChatRenderPartContext, r as AgentChatProps } from "./AgentChat-403mckDG.js";
+import { a as AgentChatRenderPartContext, r as AgentChatProps } from "./AgentChat-B9LD_WF1.js";
 import { s as ThinkChatPart } from "./ThinkChatToolParts-DnUiZgCC.js";
 import * as React from "react";
 import { DynamicToolUIPart, ToolUIPart, UIMessage } from "ai";

package/dist/components/AgentChat.d.ts

@@ -1,2 +1,2 @@
-import { a as AgentChatRenderPartContext, i as AgentChatRenderMessageContext, n as AgentChatPart, r as AgentChatProps, t as AgentChat } from "../AgentChat-403mckDG.js";
+import { a as AgentChatRenderPartContext, i as AgentChatRenderMessageContext, n as AgentChatPart, r as AgentChatProps, t as AgentChat } from "../AgentChat-B9LD_WF1.js";
 export { AgentChat, AgentChatPart, AgentChatProps, AgentChatRenderMessageContext, AgentChatRenderPartContext };

package/dist/components/AgentChat.js

@@ -5,11 +5,14 @@ import { Context, ContextContent, ContextContentBody, ContextContentHeader, Cont
 import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";
 import { ConversationEmptyState } from "./Conversation.js";
 import { Message, MessageAction, MessageActions, MessageAttachment, MessageContent, MessageResponse } from "./Message.js";
+import { Marker, MarkerContent } from "./Marker.js";
 import { MenuGroup, MenuGroupLabel } from "./Menu.js";
 import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
+import { Source, Sources, SourcesContent, SourcesTrigger } from "./Sources.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isCompactionMessage } from "agents/experimental/memory/utils";
 import { getToolInput, getToolOutput, getToolPartState } from "@cloudflare/think/react";
 import { getToolName, isFileUIPart, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
 //#region src/components/AgentChat.tsx
@@ -33,6 +36,21 @@ function AgentChatAddMenu({ children }) {
 		children: [/* @__PURE__ */ jsxs(MenuGroup, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, { children: "Files" }), /* @__PURE__ */ jsx(PromptInputActionAddAttachments, {})] }), children]
 	})] });
 }
+/**
+* Per-message row-size compaction marker from `AIChatAgent` persistence.
+*
+* This is distinct from Session history compaction overlays. When a single
+* SQLite row approaches the Workers/SQLite size limit, Agents compacts large
+* tool outputs and, if necessary, truncates text before persistence. The
+* message remains in place and receives metadata keys documented by Agents:
+* `compactedToolOutputs` lists tool-call ids whose outputs were summarized;
+* `compactedTextParts` lists text-part indexes that were truncated. The UI
+* reads those keys structurally because they are persisted metadata rather than
+* exported AI SDK part variants, then adds a local visual note while preserving
+* the original `UIMessage` and part shapes.
+*
+* @see https://github.com/cloudflare/agents/blob/main/docs/agents/chat-agents.md#row-size-protection
+*/
 function isCompactedPart(message, part, partIndex) {
 	const metadata = message.metadata;
 	if (isTextUIPart(part)) return Array.isArray(metadata?.compactedTextParts) && metadata.compactedTextParts.includes(partIndex);
@@ -60,6 +78,69 @@ function isToolPartFailed(part) {
 	const state = getToolPartState(part);
 	return state === "error" || state === "denied";
 }
+/**
+* AI SDK exports concrete source part types but no public source-part guard.
+* Keep these local guards as exact discriminant checks, matching
+* `ai/src/ui/ui-messages.ts` and `ai/src/ui/process-ui-message-stream.ts`.
+* If AI SDK exports source or step guards later, replace these wrappers rather
+* than widening the local transcript contract.
+*/
+function isSourceUrlPart(part) {
+	return part?.type === "source-url";
+}
+function isSourceDocumentPart(part) {
+	return part?.type === "source-document";
+}
+/**
+* AI SDK emits `step-start` as a native `StepStartUIPart`, but currently exports
+* only the type, not an `isStepStartUIPart` helper. Keep this as the exact
+* upstream discriminant so step separators do not become a local protocol.
+*/
+function isStepStartPart(part) {
+	return part.type === "step-start";
+}
+/**
+* Session compaction overlay marker from Agents Sessions.
+*
+* Agents exports `isCompactionMessage` from
+* `agents/experimental/memory/utils`; it checks the canonical `compaction_`
+* id prefix used when `Session.getHistory()` materializes a summary overlay.
+* `UIMessage` is structurally compatible with the fields the helper reads, so
+* keep this wrapper instead of duplicating the prefix test locally.
+*/
+function isCompactionMessage$1(message) {
+	return isCompactionMessage(message);
+}
+function getMessageText(message) {
+	return message.parts.filter((part) => isTextUIPart(part) || isReasoningUIPart(part)).map((part) => part.text).join("");
+}
+function formatSourceTitle(part) {
+	if (part.title) return part.title;
+	if (part.type === "source-document") return part.filename ?? part.mediaType;
+	try {
+		return new URL(part.url).hostname.replace(/^www\./, "");
+	} catch {
+		return part.url;
+	}
+}
+function renderSources(parts) {
+	return /* @__PURE__ */ jsxs(Sources, { children: [/* @__PURE__ */ jsx(SourcesTrigger, { count: parts.length }), /* @__PURE__ */ jsx(SourcesContent, { children: parts.map((part) => part.type === "source-url" ? /* @__PURE__ */ jsx(Source, {
+		href: part.url,
+		title: formatSourceTitle(part)
+	}, part.sourceId) : /* @__PURE__ */ jsx(Source, {
+		title: formatSourceTitle(part),
+		description: part.filename ?? part.mediaType
+	}, part.sourceId)) })] });
+}
+function getSourceRun(parts, start) {
+	const sources = [];
+	for (let index = start; index < parts.length; index++) {
+		const candidate = parts[index];
+		if (!isSourceUrlPart(candidate) && !isSourceDocumentPart(candidate)) break;
+		sources.push(candidate);
+	}
+	return sources;
+}
 function describeToolPart(part) {
 	const name = getToolName(part);
 	const verb = isToolPartFailed(part) ? `${name} failed` : isToolPartWorking(part) ? `Running ${name}` : `Ran ${name}`;
@@ -96,6 +177,10 @@ function renderDefaultPart(part) {
 		children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, { children: part.text })]
 	});
 	if (isToolUIPart(part)) return renderToolActivity(part);
+	if (isStepStartPart(part)) return /* @__PURE__ */ jsx(Marker, {
+		variant: "separator",
+		children: /* @__PURE__ */ jsx(MarkerContent, { children: "Next step" })
+	});
 	return null;
 }
 /**
@@ -168,7 +253,10 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 					}) : null, messages.map((message, messageIndex) => /* @__PURE__ */ jsx(MessageScrollerItem, {
 						messageId: message.id,
 						scrollAnchor: message.role === "user",
-						children: /* @__PURE__ */ jsxs(Message, {
+						children: isCompactionMessage$1(message) ? /* @__PURE__ */ jsx(Marker, {
+							variant: "separator",
+							children: /* @__PURE__ */ jsx(MarkerContent, { children: getMessageText(message) || "Conversation compacted" })
+						}) : /* @__PURE__ */ jsxs(Message, {
 							from: message.role,
 							children: [
 								message.parts.map((part, partIndex) => {
@@ -179,6 +267,12 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 										partIndex,
 										defaultRender
 									});
+									if (isSourceUrlPart(part) || isSourceDocumentPart(part)) {
+										if (custom !== void 0) return custom ? /* @__PURE__ */ jsx(MessageContent, { children: custom }, getPartKey(part, partIndex)) : null;
+										const previous = message.parts[partIndex - 1];
+										if (isSourceUrlPart(previous) || isSourceDocumentPart(previous)) return null;
+										return /* @__PURE__ */ jsx(MessageContent, { children: renderSources(getSourceRun(message.parts, partIndex)) }, getPartKey(part, partIndex));
+									}
 									const rendered = custom === void 0 ? defaultRender() : custom;
 									return rendered ? /* @__PURE__ */ jsxs(MessageContent, { children: [rendered, isCompactedPart(message, part, partIndex) ? /* @__PURE__ */ jsx("div", {
 										className: "message__compacted",

package/dist/components/ThinkChat.d.ts

@@ -1,9 +1,9 @@
 import { n as ExecutionApprovals } from "../PromptInput-D6-G24p7.js";
-import { a as AgentChatRenderPartContext, r as AgentChatProps } from "../AgentChat-403mckDG.js";
+import { a as AgentChatRenderPartContext, r as AgentChatProps } from "../AgentChat-B9LD_WF1.js";
 import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../BrowserLiveView-ZktFZiMD.js";
 import { n as BrowserReplayProps, t as BrowserReplay } from "../BrowserReplay-6G-mnwcn.js";
 import { _ as isThinkChatActivityPart } from "../ThinkChatToolParts-DnUiZgCC.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-CeHzk6-K.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-B2UD95My.js";
 import { n as ThinkChatValue } from "../ThinkChatContext-BLAAb8J5.js";
 import { FileInfo, UseWorkspaceOptions, WorkspaceExplorer, WorkspaceExplorerProps, WorkspaceFileState, WorkspaceInfo, WorkspaceSource, WorkspaceState, inferWorkspaceLanguage, useWorkspace } from "./WorkspaceExplorer.js";
 import * as React from "react";

package/dist/components/ThinkChatActivity.d.ts

@@ -1,3 +1,3 @@
 import { _ as isThinkChatActivityPart } from "../ThinkChatToolParts-DnUiZgCC.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-CeHzk6-K.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-B2UD95My.js";
 export { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, describeThinkChatActivityPart, isThinkChatActivityPart, renderThinkChatActivityPart };

package/dist/components/ThinkFullApp.d.ts

@@ -9,7 +9,20 @@ import { Think } from "@cloudflare/think";
 
 //#region src/components/ThinkFullApp.d.ts
 type ThinkFullAppAgent<State = unknown> = Think<object, State>;
-type ThinkFullAppWorkbenchView = "files" | "execution";
+type ThinkFullAppWorkbenchView = "files" | "execution" | (string & {});
+interface ThinkFullAppPanelContext<AgentT extends ThinkFullAppAgent<State>, State = unknown> {
+  agent: ReturnType<typeof useAgent<AgentT, State>>;
+  chat: ReturnType<typeof useAgentChat<State, UIMessage>>;
+  workspace?: WorkspaceSource;
+  workspaceRoot?: string;
+}
+interface ThinkFullAppPanel<AgentT extends ThinkFullAppAgent<State>, State = unknown> {
+  /** Unique panel id used by `workbenchView`; custom panels should not reuse built-in ids. */
+  id: ThinkFullAppWorkbenchView;
+  label: string;
+  icon: React.ReactNode;
+  render: (context: ThinkFullAppPanelContext<AgentT, State>) => React.ReactNode;
+}
 interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unknown> extends React.HTMLAttributes<HTMLDivElement> {
   /** The `useAgent` value from `agents/react`; its stub drives approvals and execution records. */
   agent: ReturnType<typeof useAgent<AgentT, State>>;
@@ -21,6 +34,8 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
   workspaceRoot?: string;
   /** Message rendering labels and approval overrides for ThinkChat. */
   messages?: ThinkChatMessagesProps;
+  /** Extra workbench panels appended after the built-in Files and Execution panels. */
+  workbenchPanels?: readonly ThinkFullAppPanel<AgentT, State>[];
   /** Optional parent-owned thread picker/sidebar rendered beside the selected child app. */
   threadSidebar?: React.ReactNode;
   /** Whether the thread sidebar is open. Omit for internal state. */
@@ -50,6 +65,7 @@ declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = u
   style,
   threadSidebar,
   threadSidebarOpen,
+  workbenchPanels,
   workbenchView,
   workspace,
   workspaceRoot,
@@ -58,4 +74,4 @@ declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = u
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { type ThinkExecutionAgent, ThinkExecutionWorkbench, type ThinkExecutionWorkbenchProps, type ThinkExecutionWorkbenchSource, ThinkFullApp, ThinkFullAppAgent, ThinkFullAppProps, ThinkFullAppWorkbenchView };
+export { type ThinkExecutionAgent, ThinkExecutionWorkbench, type ThinkExecutionWorkbenchProps, type ThinkExecutionWorkbenchSource, ThinkFullApp, ThinkFullAppAgent, ThinkFullAppPanel, ThinkFullAppPanelContext, ThinkFullAppProps, ThinkFullAppWorkbenchView };

package/dist/components/ThinkFullApp.js

@@ -68,8 +68,8 @@ function WorkbenchViewItem({ children, label, value }) {
 		children: /* @__PURE__ */ jsx(TooltipPopup, { children: label })
 	}) })] });
 }
-function WorkbenchViewSwitch({ value, onValueChange }) {
-	return /* @__PURE__ */ jsxs(ToggleGroup, {
+function WorkbenchViewSwitch({ panels, value, onValueChange }) {
+	return /* @__PURE__ */ jsx(ToggleGroup, {
 		className: "think-full-app__workbench-view-switch",
 		size: "sm",
 		value: [value],
@@ -78,36 +78,15 @@ function WorkbenchViewSwitch({ value, onValueChange }) {
 			const [next] = nextValue;
 			if (next) onValueChange(next);
 		},
-		children: [/* @__PURE__ */ jsx(WorkbenchViewItem, {
-			value: "files",
-			label: "Files",
-			children: /* @__PURE__ */ jsx(FileIcon, {})
-		}), /* @__PURE__ */ jsx(WorkbenchViewItem, {
-			value: "execution",
-			label: "Execution",
-			children: /* @__PURE__ */ jsx(TerminalIcon, {})
-		})]
-	});
-}
-function WorkbenchPanel({ executionSource, view, workspace, workspaceRoot }) {
-	if (workspace) return /* @__PURE__ */ jsx("div", {
-		className: "think-full-app__workbench-panel",
-		"data-view": view,
-		children: view === "files" ? /* @__PURE__ */ jsx(WorkspacePanel, {
-			source: workspace,
-			root: workspaceRoot
-		}) : /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
-			source: executionSource,
-			title: "Execution"
-		})
-	});
-	return /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
-		source: executionSource,
-		title: "Execution"
+		children: panels.map((panel) => /* @__PURE__ */ jsx(WorkbenchViewItem, {
+			value: panel.id,
+			label: panel.label,
+			children: panel.icon
+		}, panel.id))
 	});
 }
 /** Combines ThinkChat with an optional resizable workbench shell. */
-function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThreadSidebarOpen, messages, onThreadSidebarOpenChange, onWorkbenchViewChange, ref, style, threadSidebar, threadSidebarOpen, workbenchView, workspace, workspaceRoot, ...props }) {
+function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThreadSidebarOpen, messages, onThreadSidebarOpenChange, onWorkbenchViewChange, ref, style, threadSidebar, threadSidebarOpen, workbenchPanels, workbenchView, workspace, workspaceRoot, ...props }) {
 	const approvals = useThinkPendingApprovals(agent.stub, `${chat.messages.length}:${chat.status}`);
 	const resolvedMessages = React.useMemo(() => ({
 		...messages,
@@ -118,14 +97,55 @@ function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThr
 		approvals.pendingApprovals,
 		messages
 	]);
-	const hasWorkspace = workspace !== void 0;
 	const [mobileView, setMobileView] = React.useState("chat");
 	const [innerWorkbenchView, setInnerWorkbenchView] = React.useState(defaultWorkbenchView ?? "files");
 	const [workbenchPanelWidth, setWorkbenchPanelWidth] = React.useState(workbenchPanelDefaultWidth);
+	const hasWorkspace = workspace !== void 0;
+	const panelContext = React.useMemo(() => ({
+		agent,
+		chat,
+		workspace,
+		workspaceRoot
+	}), [
+		agent,
+		chat,
+		workspace,
+		workspaceRoot
+	]);
+	const availableWorkbenchPanels = React.useMemo(() => {
+		const builtInPanels = [];
+		if (workspace !== void 0) builtInPanels.push({
+			id: "files",
+			label: "Files",
+			icon: /* @__PURE__ */ jsx(FileIcon, {}),
+			render: () => /* @__PURE__ */ jsx(WorkspacePanel, {
+				source: workspace,
+				root: workspaceRoot
+			})
+		});
+		builtInPanels.push({
+			id: "execution",
+			label: "Execution",
+			icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
+			render: ({ agent }) => /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
+				source: agent.stub,
+				title: "Execution"
+			})
+		});
+		return workbenchPanels ? [...builtInPanels, ...workbenchPanels] : builtInPanels;
+	}, [
+		workbenchPanels,
+		workspace,
+		workspaceRoot
+	]);
 	const activeMobileView = mobileView === "workbench" ? "workbench" : "chat";
 	const isMobileWorkbenchView = activeMobileView === "workbench";
-	const activeWorkbenchView = hasWorkspace ? workbenchView ?? innerWorkbenchView : "execution";
-	const showShellTopbar = hasWorkspace || isMobileWorkbenchView;
+	const requestedWorkbenchView = workbenchView ?? innerWorkbenchView;
+	const activePanel = availableWorkbenchPanels.find((panel) => panel.id === requestedWorkbenchView) ?? availableWorkbenchPanels[0];
+	const activeWorkbenchView = activePanel?.id ?? "execution";
+	const mobileWorkbenchLabel = hasWorkspace && activeWorkbenchView === "files" ? "Show workbench" : `Show ${activePanel?.label.toLowerCase() ?? "workbench"}`;
+	const showWorkbenchViewSwitch = availableWorkbenchPanels.length > 1;
+	const showShellTopbar = showWorkbenchViewSwitch || isMobileWorkbenchView;
 	const rootStyle = {
 		...style,
 		"--think-full-app-workbench-w": `${workbenchPanelWidth}px`
@@ -134,21 +154,16 @@ function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThr
 		setWorkbenchPanelWidth((current) => clampWorkbenchPanelWidth(current + delta));
 	};
 	const setWorkbenchView = React.useCallback((next) => {
-		if (!hasWorkspace) return;
 		if (workbenchView === void 0) setInnerWorkbenchView(next);
 		onWorkbenchViewChange?.(next);
-	}, [
-		hasWorkspace,
-		onWorkbenchViewChange,
-		workbenchView
-	]);
+	}, [onWorkbenchViewChange, workbenchView]);
 	const app = /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("think-full-app", className),
 		"data-has-files": hasWorkspace ? "true" : "false",
 		"data-has-thread-sidebar": threadSidebar ? "true" : "false",
 		"data-has-workbench": "true",
-		"data-has-workbench-topbar": hasWorkspace ? "true" : "false",
+		"data-has-workbench-topbar": showWorkbenchViewSwitch ? "true" : "false",
 		"data-mobile-view": activeMobileView,
 		style: rootStyle,
 		...props,
@@ -157,8 +172,9 @@ function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThr
 				className: "think-full-app__topbar",
 				role: "toolbar",
 				"aria-label": "Workbench controls",
-				"data-mobile-only": hasWorkspace ? void 0 : "true",
-				children: [/* @__PURE__ */ jsx(WorkbenchBackButton, { onBack: () => setMobileView("chat") }), hasWorkspace ? /* @__PURE__ */ jsx(WorkbenchViewSwitch, {
+				"data-mobile-only": showWorkbenchViewSwitch ? void 0 : "true",
+				children: [/* @__PURE__ */ jsx(WorkbenchBackButton, { onBack: () => setMobileView("chat") }), showWorkbenchViewSwitch ? /* @__PURE__ */ jsx(WorkbenchViewSwitch, {
+					panels: availableWorkbenchPanels,
 					value: activeWorkbenchView,
 					onValueChange: setWorkbenchView
 				}) : null]
@@ -173,9 +189,9 @@ function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThr
 					color: "neutral",
 					size: "icon-sm",
 					className: "think-full-app__mobile-action",
-					"aria-label": hasWorkspace ? "Show workbench" : "Show execution",
+					"aria-label": mobileWorkbenchLabel,
 					onClick: () => setMobileView("workbench"),
-					children: hasWorkspace ? /* @__PURE__ */ jsx(FileIcon, {}) : /* @__PURE__ */ jsx(TerminalIcon, {})
+					children: activePanel?.icon ?? /* @__PURE__ */ jsx(TerminalIcon, {})
 				})
 			}) : null,
 			/* @__PURE__ */ jsx("section", {
@@ -235,11 +251,10 @@ function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThr
 				"aria-label": "Workbench",
 				children: /* @__PURE__ */ jsx("div", {
 					className: "think-full-app__workbench-slot",
-					children: /* @__PURE__ */ jsx(WorkbenchPanel, {
-						executionSource: agent.stub,
-						workspace,
-						workspaceRoot,
-						view: activeWorkbenchView
+					children: /* @__PURE__ */ jsx("div", {
+						className: "think-full-app__workbench-panel",
+						"data-view": activeWorkbenchView,
+						children: activePanel?.render(panelContext)
 					})
 				})
 			})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.8.0",
+  "version": "0.9.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": {
@@ -50,7 +50,7 @@
     "anser": "^2.3.5",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.8.0"
+    "@mcp-b/design-tokens": "0.9.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",