@mcp-b/react-components 0.14.2 → 0.16.0

package/dist/components/ThinkExecutionWorkbench.js

@@ -1,181 +1,26 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { A as RefreshIcon, E as PauseIcon, I as TerminalIcon, N as SpinnerIcon, a as CheckIcon, f as EllipsisIcon, h as FileIcon, t as ArrowDownIcon, y as InfoIcon, z as XIcon } from "../icons-Ba9THQKz.js";
-import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityOutput, ActivityPanel, ActivityTrigger } from "./Activity.js";
+import { L as RefreshIcon, h as EllipsisIcon } from "../icons-CpfUer49.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { Menu } from "./Menu.js";
+import { AppTopBar } from "./AppTopBar.js";
+import { formatThinkExecutionRunProgress, getThinkExecutionRunAccessibleName, getThinkExecutionRunId, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunSubtitle, getThinkExecutionRunTitle, isSameThinkExecutionRun, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
+import { ThinkExecutionStatus } from "./ThinkExecutionStatus.js";
+import { ThinkExecutionDetail } from "./ThinkExecutionDetail.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThinkExecutionWorkbench.tsx
 const executionPanelPageSize = 20;
-function formatTimestamp(value) {
-	if (value == null) return "Not recorded";
-	const date = value instanceof Date ? value : new Date(value);
-	return Number.isNaN(date.getTime()) ? "Not recorded" : date.toLocaleString();
-}
-function formatShortTimestamp(value) {
-	if (value == null) return "Not recorded";
-	const date = value instanceof Date ? value : new Date(value);
-	return Number.isNaN(date.getTime()) ? "Not recorded" : date.toLocaleString(void 0, {
-		month: "short",
-		day: "numeric",
-		hour: "numeric",
-		minute: "2-digit"
-	});
-}
-function formatJson(value) {
-	return JSON.stringify(value, null, 2);
-}
 function getErrorMessage(error) {
 	return error instanceof Error ? error.message : String(error);
 }
-function TooltipIcon({ children, className, label, status, tone }) {
-	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx("span", {
-		"aria-label": label,
-		className: cx("think-execution-workbench__icon", className),
-		"data-status": status,
-		"data-tone": tone,
-		role: "img",
-		children
-	}) }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
-		side: "top",
-		sideOffset: 6,
-		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: label })
-	}) })] });
-}
-function runId(run) {
-	return run.kind === "submission" ? run.record.submissionId : run.record.workflowId;
-}
-function runTitle(run) {
-	return run.kind === "submission" ? run.record.submissionId : run.record.workflowName;
-}
-function runSubtitle(run) {
-	return run.kind === "workflow" ? run.record.workflowId : void 0;
-}
-function runCreatedAt(run) {
-	return run.record.createdAt;
-}
-function runProgressedAt(run) {
-	return run.kind === "submission" ? run.record.startedAt : run.record.updatedAt;
-}
-function runProgressedLabel(run) {
-	return run.kind === "submission" ? "Started" : "Updated";
-}
-function runCompletedAt(run) {
-	return run.record.completedAt;
-}
-function runStatus(run) {
-	return String(run.record.status);
-}
-function formatStatus(status) {
-	return status.charAt(0).toUpperCase() + status.slice(1);
-}
-function runListTimestamp(run) {
-	const progressedAt = runProgressedAt(run);
-	return `${progressedAt ? runProgressedLabel(run) : "Created"} ${formatShortTimestamp(progressedAt ?? runCreatedAt(run))}`;
-}
-function runAccessibleName(run) {
-	const subtitle = runSubtitle(run);
-	return `${runTitle(run)}${subtitle ? ` ${subtitle}` : ""}. ${formatStatus(runStatus(run))}. ${runListTimestamp(run)}`;
-}
-function runStatusTone(run) {
-	const status = runStatus(run);
-	if (status === "completed" || status === "complete") return "success";
-	if (status === "error" || status === "errored" || status === "terminated") return "danger";
-	if (status === "aborted" || status === "skipped" || status === "paused" || status === "waiting") return "warning";
-	if (status === "running") return "primary";
-	return "neutral";
-}
-function RunStatus({ run }) {
-	const status = runStatus(run);
-	const icon = status === "completed" || status === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {}) : status === "error" || status === "errored" || status === "terminated" ? /* @__PURE__ */ jsx(XIcon, {}) : status === "aborted" || status === "skipped" || status === "paused" || status === "waiting" ? /* @__PURE__ */ jsx(PauseIcon, {}) : status === "running" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(InfoIcon, {});
-	return /* @__PURE__ */ jsx(TooltipIcon, {
-		className: "think-execution-workbench__status",
-		label: `Status: ${status}`,
-		status,
-		tone: runStatusTone(run),
-		children: icon
-	});
-}
-function runMetadata(run) {
-	return run.record.metadata;
-}
-function runError(run) {
-	return run.kind === "submission" ? run.record.error : run.record.error ? `${run.record.error.name}: ${run.record.error.message}` : void 0;
-}
-function isSameRun(first, second) {
-	return first?.kind === second.kind && runId(first) === runId(second);
-}
 function isSubmissionCancelable(status) {
 	return status === "pending" || status === "running";
 }
-function isWorkflowTerminal(status) {
-	const value = String(status);
-	return value === "complete" || value === "errored" || value === "terminated";
-}
-function RunActivity({ run }) {
-	const progressedAt = runProgressedAt(run);
-	const completedAt = runCompletedAt(run);
-	const error = runError(run);
-	const metadata = runMetadata(run);
-	return /* @__PURE__ */ jsxs(Activity, {
-		defaultOpen: true,
-		children: [/* @__PURE__ */ jsx(ActivityTrigger, {
-			icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
-			label: "Activity"
-		}), /* @__PURE__ */ jsxs(ActivityContent, { children: [
-			/* @__PURE__ */ jsx(ActivityItem, {
-				icon: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
-				children: `Created ${formatTimestamp(runCreatedAt(run))}`
-			}),
-			progressedAt ? /* @__PURE__ */ jsx(ActivityItem, {
-				icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
-				children: `${runProgressedLabel(run)} ${formatTimestamp(progressedAt)}`
-			}) : null,
-			completedAt ? /* @__PURE__ */ jsx(ActivityItem, {
-				icon: /* @__PURE__ */ jsx(CheckIcon, {}),
-				children: `Finished ${formatTimestamp(completedAt)}`
-			}) : null,
-			error ? /* @__PURE__ */ jsx(ActivityItemGroup, {
-				icon: /* @__PURE__ */ jsx(XIcon, {}),
-				label: "Failure",
-				children: /* @__PURE__ */ jsx(ActivityPanel, {
-					label: "Error",
-					text: error,
-					status: "error",
-					error: true
-				})
-			}) : null,
-			metadata ? /* @__PURE__ */ jsx(ActivityItemGroup, {
-				icon: /* @__PURE__ */ jsx(InfoIcon, {}),
-				label: "Metadata",
-				children: /* @__PURE__ */ jsx(ActivityOutput, { children: formatJson(metadata) })
-			}) : null,
-			/* @__PURE__ */ jsx(ActivityItemGroup, {
-				icon: /* @__PURE__ */ jsx(FileIcon, {}),
-				label: "Raw record",
-				children: /* @__PURE__ */ jsx(ActivityOutput, { children: formatJson(run.record) })
-			})
-		] })]
-	});
-}
-function RunDetail({ run }) {
-	if (!run) return /* @__PURE__ */ jsx("div", {
-		className: "think-execution-workbench__empty-detail",
-		role: "status",
-		children: /* @__PURE__ */ jsx("p", { children: "Select a run to view its activity." })
-	});
-	const id = runId(run);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("header", {
-		className: "think-execution-workbench__detail-header",
-		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: runTitle(run) }), run.kind === "workflow" ? /* @__PURE__ */ jsx("code", { children: id }) : null] }), /* @__PURE__ */ jsxs("div", {
-			className: "think-execution-workbench__detail-status",
-			children: [/* @__PURE__ */ jsx(RunStatus, { run }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: formatStatus(runStatus(run)) }), /* @__PURE__ */ jsx("span", { children: runListTimestamp(run) })] })]
-		})]
-	}), /* @__PURE__ */ jsx(RunActivity, { run })] });
-}
 function RunActions({ busy, onAction, run, source }) {
-	const id = runId(run);
+	const id = getThinkExecutionRunId(run);
+	const statusTone = getThinkExecutionRunStatusTone(run);
+	const kind = isThinkSubmissionRun(run) ? "submission" : "workflow";
 	const action = (key, callback) => () => onAction(key, callback);
 	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx(Menu.Trigger, {
 		unstyled: true,
@@ -185,7 +30,7 @@ function RunActions({ busy, onAction, run, source }) {
 			color: "neutral",
 			size: "icon-xs",
 			className: "think-execution-workbench__run-actions",
-			"aria-label": `Actions for ${run.kind} ${id}`,
+			"aria-label": `Actions for ${kind} ${id}`,
 			disabled: busy,
 			children: /* @__PURE__ */ jsx(EllipsisIcon, {})
 		})
@@ -195,8 +40,8 @@ function RunActions({ busy, onAction, run, source }) {
 		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: "Run actions" })
 	}) })] }), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 		align: "end",
-		children: /* @__PURE__ */ jsx(Menu.Popup, { children: run.kind === "submission" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-			isSubmissionCancelable(run.record.status) ? /* @__PURE__ */ jsx(Menu.Item, {
+		children: /* @__PURE__ */ jsx(Menu.Popup, { children: isThinkSubmissionRun(run) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			isSubmissionCancelable(run.status) ? /* @__PURE__ */ jsx(Menu.Item, {
 				disabled: busy,
 				onClick: action(`cancel-submission:${id}`, () => source.cancelSubmission(id)),
 				children: "Cancel"
@@ -211,25 +56,25 @@ function RunActions({ busy, onAction, run, source }) {
 		] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(Menu.Item, {
 				disabled: busy,
-				onClick: action(`sync-workflow:${id}`, () => source.getWorkflowStatus(run.record.workflowName, id)),
+				onClick: action(`sync-workflow:${id}`, () => source.getWorkflowStatus(run.workflowName, id)),
 				children: "Refresh status"
 			}),
-			runStatus(run) === "running" ? /* @__PURE__ */ jsx(Menu.Item, {
+			getThinkExecutionRunStatus(run) === "running" ? /* @__PURE__ */ jsx(Menu.Item, {
 				disabled: busy,
 				onClick: action(`pause-workflow:${id}`, () => source.pauseWorkflow(id)),
 				children: "Pause"
 			}) : null,
-			runStatus(run) === "paused" ? /* @__PURE__ */ jsx(Menu.Item, {
+			getThinkExecutionRunStatus(run) === "paused" ? /* @__PURE__ */ jsx(Menu.Item, {
 				disabled: busy,
 				onClick: action(`resume-workflow:${id}`, () => source.resumeWorkflow(id)),
 				children: "Resume"
 			}) : null,
-			isWorkflowTerminal(run.record.status) ? /* @__PURE__ */ jsx(Menu.Item, {
+			statusTone === "success" || statusTone === "danger" ? /* @__PURE__ */ jsx(Menu.Item, {
 				disabled: busy,
 				onClick: action(`restart-workflow:${id}`, () => source.restartWorkflow(id)),
 				children: "Restart"
 			}) : null,
-			runStatus(run) === "running" ? /* @__PURE__ */ jsx(Menu.Item, {
+			getThinkExecutionRunStatus(run) === "running" ? /* @__PURE__ */ jsx(Menu.Item, {
 				disabled: busy,
 				variant: "destructive",
 				onClick: action(`terminate-workflow:${id}`, () => source.terminateWorkflow(id)),
@@ -250,7 +95,7 @@ function RunActions({ busy, onAction, run, source }) {
 * The workbench reads and acts through the whole upstream agent stub; it does
 * not normalize execution records or own workflow authoring.
 */
-function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPanelPageSize, ref, source, title = "Execution", ...props }) {
+function ThinkExecutionWorkbench({ backButton, className, onSelectedRunChange, pageSize = executionPanelPageSize, ref, selectedRun: controlledSelectedRun, source, title = "Execution", ...props }) {
 	const runsId = React.useId();
 	const activeSourceRef = React.useRef(source);
 	const sourceGenerationRef = React.useRef(0);
@@ -260,14 +105,9 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 	const [executionData, setExecutionData] = React.useState(null);
 	const [selection, setSelection] = React.useState(null);
 	const activeExecutionData = executionData?.source === source ? executionData : null;
-	const selectedRun = selection?.source === source ? selection.run : null;
-	const runs = React.useMemo(() => [...activeExecutionData?.submissions.map((record) => ({
-		kind: "submission",
-		record
-	})) ?? [], ...activeExecutionData?.workflows.workflows.map((record) => ({
-		kind: "workflow",
-		record
-	})) ?? []].sort((first, second) => Number(runCreatedAt(second)) - Number(runCreatedAt(first))), [activeExecutionData]);
+	const innerSelectedRun = selection?.source === source ? selection.run : null;
+	const selectedRun = controlledSelectedRun === void 0 ? innerSelectedRun : controlledSelectedRun;
+	const runs = React.useMemo(() => [...activeExecutionData?.submissions ?? [], ...activeExecutionData?.workflows.workflows ?? []].sort((first, second) => Number(second.createdAt) - Number(first.createdAt)), [activeExecutionData]);
 	const isCurrentOperation = React.useCallback((operation) => activeSourceRef.current === operation.source && sourceGenerationRef.current === operation.generation && operationSequenceRef.current === operation.sequence, []);
 	const beginOperation = React.useCallback(() => {
 		if (activeSourceRef.current !== source) return null;
@@ -328,30 +168,34 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 		loadData
 	]);
 	const selectRun = React.useCallback((run) => {
-		runAction(`select-${run.kind}:${runId(run)}`, async (operation) => {
-			if (run.kind === "submission") {
-				const inspection = await operation.source.inspectSubmission(run.record.submissionId);
+		const kind = isThinkSubmissionRun(run) ? "submission" : "workflow";
+		runAction(`select-${kind}:${getThinkExecutionRunId(run)}`, async (operation) => {
+			if (isThinkSubmissionRun(run)) {
+				const inspection = await operation.source.inspectSubmission(run.submissionId);
 				if (!isCurrentOperation(operation)) return;
-				setSelection({
+				const selected = inspection ?? run;
+				if (controlledSelectedRun === void 0) setSelection({
 					source: operation.source,
-					run: inspection ? {
-						kind: "submission",
-						record: inspection
-					} : run
+					run: selected
 				});
+				onSelectedRunChange?.(selected);
 				return;
 			}
-			const workflow = await operation.source.getWorkflow(run.record.workflowId);
+			const workflow = await operation.source.getWorkflow(run.workflowId);
 			if (!isCurrentOperation(operation)) return;
-			setSelection({
+			const selected = workflow ?? run;
+			if (controlledSelectedRun === void 0) setSelection({
 				source: operation.source,
-				run: workflow ? {
-					kind: "workflow",
-					record: workflow
-				} : run
+				run: selected
 			});
+			onSelectedRunChange?.(selected);
 		});
-	}, [isCurrentOperation, runAction]);
+	}, [
+		controlledSelectedRun,
+		isCurrentOperation,
+		onSelectedRunChange,
+		runAction
+	]);
 	React.useLayoutEffect(() => {
 		activeSourceRef.current = source;
 		sourceGenerationRef.current += 1;
@@ -375,29 +219,22 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 		className: cx("think-execution-workbench", className),
 		...props,
 		children: [
-			/* @__PURE__ */ jsxs("header", {
+			/* @__PURE__ */ jsxs(AppTopBar.Root, {
 				className: "think-execution-workbench__header",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "think-execution-workbench__heading",
-					children: [backButton, /* @__PURE__ */ jsx("h2", {
+				"aria-label": "Run controls",
+				children: [
+					/* @__PURE__ */ jsx(AppTopBar.Leading, { children: backButton }),
+					/* @__PURE__ */ jsx(AppTopBar.Title, { children: /* @__PURE__ */ jsx("h2", {
 						className: "think-execution-workbench__title",
 						children: title
-					})]
-				}), /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx(Button, {
-					type: "button",
-					variant: "ghost",
-					color: "neutral",
-					size: "icon-xs",
-					className: "think-execution-workbench__refresh",
-					"aria-label": "Refresh runs",
-					disabled: busyAction !== null,
-					onClick: () => void refresh(),
-					children: /* @__PURE__ */ jsx(RefreshIcon, {})
-				}) }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
-					side: "bottom",
-					sideOffset: 6,
-					children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: "Refresh runs" })
-				}) })] })]
+					}) }),
+					/* @__PURE__ */ jsx(AppTopBar.Trailing, { children: /* @__PURE__ */ jsx(AppTopBar.Button, {
+						label: "Refresh runs",
+						disabled: busyAction !== null,
+						onClick: () => void refresh(),
+						children: /* @__PURE__ */ jsx(RefreshIcon, {})
+					}) })
+				]
 			}),
 			error ? /* @__PURE__ */ jsx("div", {
 				className: "think-execution-workbench__error",
@@ -427,28 +264,35 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 						className: "think-execution-workbench__list",
 						role: "list",
 						children: runs.map((run) => {
-							const id = runId(run);
-							const selected = isSameRun(selectedRun, run);
+							const id = getThinkExecutionRunId(run);
+							const kind = isThinkSubmissionRun(run) ? "submission" : "workflow";
+							const selected = isSameThinkExecutionRun(selectedRun, run);
 							return /* @__PURE__ */ jsxs("li", {
 								"data-selected": selected || void 0,
-								children: [/* @__PURE__ */ jsxs("button", {
+								children: [/* @__PURE__ */ jsxs(Button, {
 									type: "button",
+									variant: "ghost",
+									color: "neutral",
+									size: "sm",
 									className: "think-execution-workbench__run",
-									"aria-label": runAccessibleName(run),
+									"aria-label": getThinkExecutionRunAccessibleName(run),
 									"aria-current": selected ? "page" : void 0,
 									disabled: busyAction !== null,
 									onClick: () => selectRun(run),
-									children: [/* @__PURE__ */ jsx(RunStatus, { run }), /* @__PURE__ */ jsxs("span", {
+									children: [/* @__PURE__ */ jsx(ThinkExecutionStatus, {
+										run,
+										className: "think-execution-workbench__icon"
+									}), /* @__PURE__ */ jsxs("span", {
 										className: "think-execution-workbench__run-copy",
 										children: [/* @__PURE__ */ jsxs("span", {
 											className: "think-execution-workbench__run-heading",
 											children: [/* @__PURE__ */ jsx("span", {
 												className: "think-execution-workbench__run-title",
-												children: runTitle(run)
-											}), runSubtitle(run) ? /* @__PURE__ */ jsx("code", { children: runSubtitle(run) }) : null]
+												children: getThinkExecutionRunTitle(run)
+											}), getThinkExecutionRunSubtitle(run) ? /* @__PURE__ */ jsx("code", { children: getThinkExecutionRunSubtitle(run) }) : null]
 										}), /* @__PURE__ */ jsx("span", {
 											className: "think-execution-workbench__run-summary",
-											children: runListTimestamp(run)
+											children: formatThinkExecutionRunProgress(run)
 										})]
 									})]
 								}), /* @__PURE__ */ jsx(RunActions, {
@@ -457,13 +301,13 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 									source,
 									onAction: (key, action) => void runAction(key, () => action())
 								})]
-							}, `${run.kind}:${id}`);
+							}, `${kind}:${id}`);
 						})
 					})]
 				}), /* @__PURE__ */ jsx("section", {
 					className: "think-execution-workbench__detail",
 					"aria-label": "Run detail",
-					children: /* @__PURE__ */ jsx(RunDetail, { run: selectedRun })
+					children: /* @__PURE__ */ jsx(ThinkExecutionDetail, { run: selectedRun })
 				})]
 			})
 		]

package/dist/components/ThinkFullApp.d.ts

@@ -1,5 +1,11 @@
-import { WorkspaceSource } from "./WorkspaceExplorer.js";
+import { l as WorkspaceNavigationAdapter } from "../WorkspaceLink-DK1DWMHe.js";
+import { r as WorkspaceFileAssetResolver } from "../WorkspaceFile-DOZkPwzu.js";
+import { r as WorkspaceSource } from "../Workspace-D39LxGvP.js";
 import { ThinkChatMessagesProps } from "./ThinkChat.js";
+import { t as ThinkExecutionRun } from "../ThinkExecutionRun-ChhWhOoU.js";
+import { ThinkFullAppView } from "./ThinkFullAppViewSwitch.js";
+import { ThinkThreadStatusSummary } from "./ThinkThreadPicker.js";
+import { ThinkThreadShell } from "./ThinkThreadShell.js";
 import * as React from "react";
 import { useAgentChat } from "@cloudflare/think/react";
 import { UIMessage } from "ai";
@@ -11,19 +17,27 @@ import { Think } from "@cloudflare/think";
 type ThinkAgent<State = unknown> = Think<object, State>;
 //#endregion
 //#region src/components/ThinkFullApp.d.ts
+type ThinkFullAppMobileView = "chat" | "workbench";
 type ThinkFullAppAgent<State = unknown> = ThinkAgent<State>;
 type ThinkFullAppWorkbenchView = "files" | "execution" | (string & {});
+interface ThinkFullAppWorkspaceConfig {
+  source: WorkspaceSource;
+  root?: string;
+  navigation: WorkspaceNavigationAdapter;
+  resolveFileAsset?: WorkspaceFileAssetResolver;
+  maxInlineAssetBytes?: number;
+  /** Leading workspace control, such as a host-owned Back to chat button. */
+  leading?: React.ReactNode;
+  actions?: React.ReactNode;
+}
 interface ThinkFullAppPanelContext<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage> {
   agent: ReturnType<typeof useAgent<AgentT, State>>;
   chat: ReturnType<typeof useAgentChat<State, MessageT>>;
-  workspace?: WorkspaceSource;
-  workspaceRoot?: string;
+  workspace?: ThinkFullAppWorkspaceConfig;
 }
-interface ThinkFullAppPanel<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage> {
+interface ThinkFullAppPanel<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage> extends ThinkFullAppView {
   /** 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, MessageT>) => React.ReactNode;
 }
 interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage> extends React.HTMLAttributes<HTMLDivElement> {
@@ -31,22 +45,43 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
   agent: ReturnType<typeof useAgent<AgentT, State>>;
   /** The `useAgentChat` value from `@cloudflare/think/react` used by the chat surface. */
   chat: ReturnType<typeof useAgentChat<State, MessageT>>;
-  /** Optional workspace source shown in the file explorer pane. */
-  workspace?: WorkspaceSource;
-  /** Root path passed to the workspace explorer. */
-  workspaceRoot?: string;
+  /** Atomic workspace source, navigation, media, and header configuration. */
+  workspace?: ThinkFullAppWorkspaceConfig;
+  /** Product-specific actions rendered in the application top bar. */
+  appBarActions?: React.ReactNode;
+  /** Product-specific navigation rendered after the built-in sidebar control. */
+  appBarLeading?: React.ReactNode;
+  /** Active conversation or page title rendered in the application top bar. */
+  appBarTitle?: React.ReactNode;
+  /** Aggregate thread activity rendered beside the compact thread-title disclosure. */
+  threadStatusSummary?: ThinkThreadStatusSummary;
+  /** Whether to include the built-in Execution workbench. Defaults to true. */
+  showExecutionWorkbench?: boolean;
+  /** Whole native execution selected by a parent-owned record. */
+  selectedExecutionRun?: ThinkExecutionRun | null;
+  /** Receives the whole native execution selected in the workbench. */
+  onSelectedExecutionRunChange?: (run: ThinkExecutionRun) => void;
   /** Message rendering labels and approval overrides for ThinkChat. */
   messages?: ThinkChatMessagesProps<MessageT>;
   /** Extra workbench panels appended after the built-in Files and Execution panels. */
   workbenchPanels?: readonly ThinkFullAppPanel<AgentT, State, MessageT>[];
-  /** Optional parent-owned thread picker/sidebar rendered beside the selected child app. */
-  threadSidebar?: React.ReactNode;
+  /**
+   * Optional parent-owned thread picker/sidebar rendered beside the selected child app.
+   * Use the render form to close the compact drawer after selecting a thread.
+   */
+  threadSidebar?: React.ComponentProps<typeof ThinkThreadShell>["sidebar"];
   /** Whether the thread sidebar is open. Omit for internal state. */
   threadSidebarOpen?: boolean;
   /** Initial thread sidebar state when `threadSidebarOpen` is uncontrolled. */
   defaultThreadSidebarOpen?: boolean;
   /** Called when the thread sidebar is opened or closed. */
   onThreadSidebarOpenChange?: (open: boolean) => void;
+  /** Visible surface at narrow widths. Omit for internal state. */
+  mobileView?: ThinkFullAppMobileView;
+  /** Initial narrow-width surface when `mobileView` is uncontrolled. */
+  defaultMobileView?: ThinkFullAppMobileView;
+  /** Called when narrow layouts switch between chat and the workbench. */
+  onMobileViewChange?: (view: ThinkFullAppMobileView) => void;
   /** Selected workbench lane. Use this when the parent app stores the lane in route state. */
   workbenchView?: ThinkFullAppWorkbenchView;
   /** Initial workbench lane when `workbenchView` is uncontrolled. */
@@ -57,24 +92,33 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
 /** Combines ThinkChat with an optional resizable workbench shell. */
 declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage>({
   agent,
+  appBarActions,
+  appBarLeading,
+  appBarTitle,
   chat,
   className,
+  defaultMobileView,
   defaultWorkbenchView,
   defaultThreadSidebarOpen,
   messages,
+  mobileView,
+  onMobileViewChange,
+  onSelectedExecutionRunChange,
   onThreadSidebarOpenChange,
   onWorkbenchViewChange,
   ref,
+  selectedExecutionRun,
+  showExecutionWorkbench,
   style,
   threadSidebar,
   threadSidebarOpen,
+  threadStatusSummary,
   workbenchPanels,
   workbenchView,
   workspace,
-  workspaceRoot,
   ...props
 }: ThinkFullAppProps<AgentT, State, MessageT> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { ThinkFullApp, ThinkFullAppAgent, ThinkFullAppPanel, ThinkFullAppPanelContext, ThinkFullAppProps, ThinkFullAppWorkbenchView };
+export { ThinkFullApp, ThinkFullAppAgent, ThinkFullAppMobileView, ThinkFullAppPanel, ThinkFullAppPanelContext, ThinkFullAppProps, ThinkFullAppWorkbenchView, ThinkFullAppWorkspaceConfig };