@mcp-b/react-components 0.39.0 → 0.41.0

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

@@ -1,14 +1,14 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { J as SpinnerIcon, O as InfoIcon, d as CheckIcon, rt as XIcon, z as PauseIcon } from "../../icons-B4mGvCvc.js";
+import { K as SpinnerIcon, L as PauseIcon, T as InfoIcon, d as CheckIcon, tt as XIcon } from "../../icons-CVFSeTJn.js";
 import { Tooltip } from "../foundations/Tooltip.js";
-import { formatThinkExecutionRunProgress, formatThinkExecutionStatus, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunSubtitle, getThinkExecutionRunTitle } from "./ThinkExecutionRun.js";
+import { formatThinkExecutionRunProgress, formatThinkExecutionStatus, getThinkExecutionRunKindLabel, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunTitle } from "./ThinkExecutionRun.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkExecutionStatus.tsx
 function statusIcon(tone) {
 	if (tone === "success") return /* @__PURE__ */ jsx(CheckIcon, {});
 	if (tone === "danger") return /* @__PURE__ */ jsx(XIcon, {});
-	if (tone === "warning") return /* @__PURE__ */ jsx(PauseIcon, {});
+	if (tone === "paused") return /* @__PURE__ */ jsx(PauseIcon, {});
 	if (tone === "primary") return /* @__PURE__ */ jsx(SpinnerIcon, {});
 	return /* @__PURE__ */ jsx(InfoIcon, {});
 }
@@ -34,7 +34,6 @@ function ThinkExecutionStatus({ className, label, run, ref, ...props }) {
 }
 /** Shared identity, status, and progress summary for a whole Think execution record. */
 function ThinkExecutionRunSummary({ className, run, ref, ...props }) {
-	const subtitle = getThinkExecutionRunSubtitle(run);
 	return /* @__PURE__ */ jsxs("span", {
 		ref,
 		"data-slot": "think-execution-run-summary",
@@ -42,15 +41,12 @@ function ThinkExecutionRunSummary({ className, run, ref, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx(ThinkExecutionStatus, { run }), /* @__PURE__ */ jsxs("span", {
 			className: "think-execution-run-summary__copy",
-			children: [/* @__PURE__ */ jsxs("span", {
-				className: "think-execution-run-summary__heading",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "think-execution-run-summary__title sigvelo-truncate",
-					children: getThinkExecutionRunTitle(run)
-				}), subtitle ? /* @__PURE__ */ jsx("code", { children: subtitle }) : null]
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "think-execution-run-summary__title sigvelo-truncate",
+				children: getThinkExecutionRunTitle(run)
 			}), /* @__PURE__ */ jsx("span", {
-				className: "think-execution-run-summary__progress",
-				children: formatThinkExecutionRunProgress(run)
+				className: "think-execution-run-summary__meta sigvelo-truncate",
+				children: `${getThinkExecutionRunKindLabel(run)} · ${formatThinkExecutionStatus(getThinkExecutionRunStatus(run))} · ${formatThinkExecutionRunProgress(run)}`
 			})]
 		})]
 	});

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

@@ -1,4 +1,4 @@
-import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-lYYgyeE1.js";
+import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-k8bpyXqt.js";
 import * as React from "react";
 import { DataTag, UnusedSkipTokenOptions } from "@tanstack/react-query";
 import { Think, ThinkSubmissionInspection } from "@cloudflare/think";
@@ -21,6 +21,12 @@ interface ThinkExecutionWorkbenchProps extends Omit<React.HTMLAttributes<HTMLDiv
   selectedRun: ThinkExecutionRun | null;
   /** Returns an application-authored TanStack Router Link for the run. */
   renderRunLink: (run: ThinkExecutionRun) => React.ReactElement;
+  /**
+   * Returns an application-authored TanStack Router Link back to the run
+   * list. A selected run replaces the list — the workspace drill-in pattern —
+   * so this link is the way back out.
+   */
+  renderRunsLink: () => React.ReactElement;
 }
 interface ThinkExecutionRunsData {
   submissions: readonly ThinkSubmissionInspection[];
@@ -48,6 +54,7 @@ declare function ThinkExecutionWorkbench({
   pageSize,
   ref,
   renderRunLink,
+  renderRunsLink,
   selectedRun,
   source,
   sourceKey,

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

@@ -1,15 +1,15 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { W as RefreshIcon, b as EllipsisIcon } from "../../icons-B4mGvCvc.js";
+import { $ as WarningIcon, H as RefreshIcon, r as ArrowLeftIcon, y as EllipsisIcon } from "../../icons-CVFSeTJn.js";
 import { buttonVariants } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { Menu } from "../foundations/Menu.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { EmptyState } from "../foundations/EmptyState.js";
-import { getThinkExecutionRunAccessibleName, getThinkExecutionRunId, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, isSameThinkExecutionRun, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
+import { getThinkExecutionRunAccessibleName, getThinkExecutionRunId, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
 import { ThinkExecutionRunSummary } from "./ThinkExecutionStatus.js";
 import { ThinkExecutionDetail } from "./ThinkExecutionDetail.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { queryOptions, useMutation, useSuspenseQuery } from "@tanstack/react-query";
@@ -117,7 +117,7 @@ function thinkExecutionRunsQueryOptions(source, sourceKey, pageSize = executionP
 * not normalize execution records or own workflow authoring. Its first
 * uncached list read suspends to the consuming route's Suspense boundary.
 */
-function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPanelPageSize, ref, renderRunLink, selectedRun, source, sourceKey, title = "Execution", ...props }) {
+function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPanelPageSize, ref, renderRunLink, renderRunsLink, selectedRun, source, sourceKey, title = "Execution", ...props }) {
 	const runsId = React.useId();
 	const runsOptions = thinkExecutionRunsQueryOptions(source, sourceKey, pageSize);
 	const runsQueryKey = thinkExecutionRunsScopeQueryKey(sourceKey);
@@ -146,14 +146,24 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 		children: [
 			/* @__PURE__ */ jsxs(AppTopBar.Root, {
 				className: "think-execution-workbench__header",
+				titleAlign: "start",
 				"aria-label": "Run controls",
 				children: [
-					/* @__PURE__ */ jsx(AppTopBar.Leading, { children: backButton }),
+					/* @__PURE__ */ jsx(AppTopBar.Leading, { children: selectedRun ? /* @__PURE__ */ jsx(AppTopBar.Link, {
+						label: "Back to runs",
+						render: renderRunsLink(),
+						children: /* @__PURE__ */ jsx(ArrowLeftIcon, { "aria-hidden": "true" })
+					}) : backButton }),
 					/* @__PURE__ */ jsx(AppTopBar.Title, { children: /* @__PURE__ */ jsx("h2", {
 						className: "think-execution-workbench__title",
 						children: title
 					}) }),
-					/* @__PURE__ */ jsx(AppTopBar.Trailing, { children: /* @__PURE__ */ jsx(AppTopBar.Button, {
+					/* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [selectedRun ? /* @__PURE__ */ jsx(RunActions, {
+						busy: actionIsPending,
+						run: selectedRun,
+						source,
+						onAction: runAction
+					}) : null, /* @__PURE__ */ jsx(AppTopBar.Button, {
 						label: "Refresh runs",
 						disabled: busyAction !== null,
 						onClick: () => {
@@ -161,18 +171,22 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 							runsQuery.refetch();
 						},
 						children: /* @__PURE__ */ jsx(RefreshIcon, {})
-					}) })
+					})] })
 				]
 			}),
-			error ? /* @__PURE__ */ jsx("div", {
+			error ? /* @__PURE__ */ jsxs("div", {
 				className: "think-execution-workbench__error",
 				role: "alert",
-				children: formatErrorMessage(error)
+				children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: formatErrorMessage(error) })]
 			}) : null,
-			/* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsx("div", {
 				className: "think-execution-workbench__content",
 				"aria-busy": busyAction !== null,
-				children: [/* @__PURE__ */ jsxs("section", {
+				children: selectedRun ? /* @__PURE__ */ jsx("section", {
+					className: "think-execution-workbench__detail",
+					"aria-label": "Run detail",
+					children: /* @__PURE__ */ jsx(ThinkExecutionDetail, { run: selectedRun })
+				}) : /* @__PURE__ */ jsxs("section", {
 					className: "think-execution-workbench__run-list",
 					"aria-labelledby": runsId,
 					children: [/* @__PURE__ */ jsx("div", {
@@ -190,35 +204,26 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 						children: runs.map((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__ */ jsx(NavigationLink, {
-									render: renderRunLink(run),
-									"data-slot": "button",
-									className: buttonVariants({
-										variant: "ghost",
-										color: "neutral",
-										size: "sm",
-										className: "think-execution-workbench__run"
-									}),
-									"aria-label": getThinkExecutionRunAccessibleName(run),
-									"aria-current": selected ? "page" : void 0,
-									children: /* @__PURE__ */ jsx(ThinkExecutionRunSummary, { run })
-								}), /* @__PURE__ */ jsx(RunActions, {
-									busy: actionIsPending,
-									run,
-									source,
-									onAction: runAction
-								})]
-							}, `${kind}:${id}`);
+							return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx(NavigationLink, {
+								render: renderRunLink(run),
+								"data-slot": "button",
+								className: buttonVariants({
+									variant: "ghost",
+									color: "neutral",
+									size: "sm",
+									className: "think-execution-workbench__run"
+								}),
+								"aria-label": getThinkExecutionRunAccessibleName(run),
+								children: /* @__PURE__ */ jsx(ThinkExecutionRunSummary, { run })
+							}), /* @__PURE__ */ jsx(RunActions, {
+								busy: actionIsPending,
+								run,
+								source,
+								onAction: runAction
+							})] }, `${kind}:${id}`);
 						})
 					})]
-				}), /* @__PURE__ */ jsx("section", {
-					className: "think-execution-workbench__detail",
-					"aria-label": "Run detail",
-					children: /* @__PURE__ */ jsx(ThinkExecutionDetail, { run: selectedRun })
-				})]
+				})
 			})
 		]
 	});

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

@@ -1,12 +1,12 @@
 import { l as WorkspaceNavigationAdapter } from "../../WorkspaceLink-Bh9-Jo1r.js";
-import { n as AgentToolEventsValue } from "../../AgentToolRunsContext-BCVqCtJ1.js";
+import { n as AgentToolEventsValue } from "../../AgentToolRunsContext-daY67hFM.js";
 import { McpPluginCatalogProps } from "./McpPluginCatalog.js";
 import { ThinkChatMessagesProps } from "./ThinkChat.js";
-import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-lYYgyeE1.js";
+import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-k8bpyXqt.js";
 import { ThinkExecutionWorkbenchProps } from "./ThinkExecutionWorkbench.js";
+import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
 import { ThinkFullAppView } from "./ThinkFullAppViewSwitch.js";
 import { ThinkThreadStatusSummary } from "./ThinkThreadPicker.js";
-import { ThinkThreadShell } from "./ThinkThreadShell.js";
 import { r as WorkspaceFileAssetResolver } from "../../WorkspaceFile-BLaFmMrt.js";
 import { WorkspaceSource } from "./Workspace.js";
 import { t as ThinkAgent } from "../../think-agent-Cip5KAPj.js";
@@ -67,8 +67,10 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
   plugins?: McpPluginCatalogProps;
   /** Product-specific actions rendered in the application top bar. */
   appBarActions?: React.ReactNode;
-  /** Product-specific navigation rendered after the built-in sidebar control. */
+  /** Product-specific navigation that owns the leading slot at every width. */
   appBarLeading?: React.ReactNode;
+  /** Product-specific compact navigation; the wide layout keeps its sidebar toggle. */
+  compactAppBarLeading?: 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. */
@@ -88,8 +90,16 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
    * has its own source identity.
    */
   sourceKey: string;
-  /** Returns an application-authored TanStack Router Link and enables the Execution workbench. */
+  /**
+   * Returns an application-authored TanStack Router Link for a run. Together
+   * with `renderExecutionRunsLink` this enables the Execution workbench.
+   */
   renderExecutionRunLink?: ThinkExecutionWorkbenchProps["renderRunLink"];
+  /**
+   * Returns an application-authored TanStack Router Link back to the run
+   * list — the way out of a selected run, which replaces the list in place.
+   */
+  renderExecutionRunsLink?: ThinkExecutionWorkbenchProps["renderRunsLink"];
   /** Message rendering labels and approval overrides for ThinkChat. */
   messages?: ThinkChatMessagesProps<MessageT>;
   /** Extra workbench panels appended after the enabled built-in panels. */
@@ -100,7 +110,7 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
    * 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"];
+  threadSidebar?: React.ComponentProps<typeof ResponsiveSidebarShell>["sidebar"];
   /** Whether the thread sidebar is open. Omit for internal state. */
   threadSidebarOpen?: boolean;
   /** Initial thread sidebar state when `threadSidebarOpen` is uncontrolled. */
@@ -134,6 +144,7 @@ declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = u
   appBarActions,
   appBarLeading,
   appBarTitle,
+  compactAppBarLeading,
   className,
   conversation,
   defaultMobileView,
@@ -151,6 +162,7 @@ declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = u
   ref,
   renderAgentToolRunLink,
   renderExecutionRunLink,
+  renderExecutionRunsLink,
   selectedExecutionRun,
   showMobileViewSwitch,
   showWorkbenchViewSwitch,

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

@@ -1,28 +1,24 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { $ as TerminalIcon, C as FileIcon, J as SpinnerIcon, c as BoxIcon, f as ChevronDownIcon } from "../../icons-B4mGvCvc.js";
-import { Button } from "../foundations/Button.js";
+import { K as SpinnerIcon, S as FileIcon, Z as TerminalIcon, c as BoxIcon } from "../../icons-CVFSeTJn.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
-import { ScrollArea } from "../foundations/ScrollArea.js";
 import { EmptyState } from "../foundations/EmptyState.js";
+import { ResizableSidePanel } from "../general-purpose/ResizableSidePanel.js";
+import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
 import { McpPluginCatalog } from "./McpPluginCatalog.js";
 import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../../WorkspaceLink-DtH66bAY.js";
 import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-BES_3Mb-.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { ThinkExecutionWorkbench } from "./ThinkExecutionWorkbench.js";
-import { ResizableSidePanel } from "../general-purpose/ResizableSidePanel.js";
 import { ThinkFullAppViewSwitch } from "./ThinkFullAppViewSwitch.js";
 import { ThinkThreadStatusIndicators } from "./ThinkThreadPicker.js";
-import { ThinkThreadShell } from "./ThinkThreadShell.js";
 import { useWorkspace } from "./Workspace.js";
 import { WorkspaceExplorer } from "./WorkspaceExplorer.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkFullApp.tsx
-const workbenchPanelDefaultWidth = 340;
-const workbenchPanelMinWidth = 300;
-const workbenchPanelMaxWidth = 600;
-const workbenchPanelKeyboardStep = 24;
-const workbenchPanelCollapseThreshold = 240;
+const conversationDefaultWidth = 393;
+const conversationMinWidth = 320;
+const conversationMaxWidth = 640;
+const conversationKeyboardStep = 24;
 function WorkspacePanel({ config }) {
 	const selectedPath = config.navigation.current.destination.kind === "file" ? config.navigation.current.destination.path : null;
 	return /* @__PURE__ */ jsx(WorkspaceExplorer, {
@@ -40,12 +36,6 @@ function WorkspacePanel({ config }) {
 		actions: config.actions
 	});
 }
-function PluginsPanel({ config }) {
-	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
-		className: "think-full-app__workbench",
-		children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, { children: /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsx(McpPluginCatalog, { ...config }) }) }), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {}) })]
-	});
-}
 /**
 * Approval discovery and background-agent events need a live connection, so they
 * live here rather than in the shell, which also renders before there is one.
@@ -82,7 +72,7 @@ function ThinkFullAppThreadChat({ agent, agentTools, chat, messages, renderAgent
 	});
 }
 /** Combines ThinkChat with an optional resizable workbench shell. */
-function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, conversation, defaultMobileView, defaultWorkbenchOpen, defaultWorkbenchView, defaultThreadSidebarOpen, hideAppBarInWorkbench = false, messages, mobileView, onMobileViewChange, onThreadSidebarOpenChange, onWorkbenchOpenChange, onWorkbenchViewChange, plugins, ref, renderAgentToolRunLink, renderExecutionRunLink, selectedExecutionRun = null, showMobileViewSwitch = true, showWorkbenchViewSwitch = true, sourceKey, style, threadSidebar, threadSidebarOpen, threadStatusSummary, workbenchOpen, workbenchPanels, workbenchView, workspace, ...props }) {
+function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, compactAppBarLeading, className, conversation, defaultMobileView, defaultWorkbenchOpen, defaultWorkbenchView, defaultThreadSidebarOpen, hideAppBarInWorkbench = false, messages, mobileView, onMobileViewChange, onThreadSidebarOpenChange, onWorkbenchOpenChange, onWorkbenchViewChange, plugins, ref, renderAgentToolRunLink, renderExecutionRunLink, renderExecutionRunsLink, selectedExecutionRun = null, showMobileViewSwitch = true, showWorkbenchViewSwitch = true, sourceKey, style, threadSidebar, threadSidebarOpen, threadStatusSummary, workbenchOpen, workbenchPanels, workbenchView, workspace, ...props }) {
 	const agent = conversation?.agent;
 	const appRef = React.useRef(null);
 	const workbenchPanelRef = React.useRef(null);
@@ -115,7 +105,7 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, co
 		icon: /* @__PURE__ */ jsx(FileIcon, {}),
 		render: () => /* @__PURE__ */ jsx(WorkspacePanel, { config: workspace })
 	});
-	if (renderExecutionRunLink && agent) availableWorkbenchPanels.push({
+	if (renderExecutionRunLink && renderExecutionRunsLink && agent) availableWorkbenchPanels.push({
 		id: "execution",
 		label: "Execution",
 		icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
@@ -133,7 +123,8 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, co
 				sourceKey,
 				title: "Execution",
 				selectedRun: selectedExecutionRun,
-				renderRunLink: renderExecutionRunLink
+				renderRunLink: renderExecutionRunLink,
+				renderRunsLink: renderExecutionRunsLink
 			})
 		})
 	});
@@ -141,7 +132,7 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, co
 		id: "plugins",
 		label: "Plugins",
 		icon: /* @__PURE__ */ jsx(BoxIcon, {}),
-		render: () => /* @__PURE__ */ jsx(PluginsPanel, { config: plugins })
+		render: () => /* @__PURE__ */ jsx(McpPluginCatalog, { ...plugins })
 	});
 	if (workbenchPanels) availableWorkbenchPanels.push(...workbenchPanels);
 	const selectedPanel = availableWorkbenchPanels.find((panel) => panel.id === requestedWorkbenchView) ?? availableWorkbenchPanels[0];
@@ -152,8 +143,9 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, co
 	const activeMobileView = hasWorkbench ? requestedMobileView : "chat";
 	const shouldShowWorkbenchViewSwitch = showWorkbenchViewSwitch && availableWorkbenchPanels.length > 0;
 	const workbenchViews = availableWorkbenchPanels;
-	const shouldRenderInlineAppBar = !threadSidebar && (Boolean(appBarActions || appBarLeading || appBarTitle || threadSidebar) || hasAvailableWorkbench);
-	const hasAppBarRow = shouldRenderInlineAppBar;
+	const hasApplicationChrome = Boolean(appBarActions || appBarLeading || compactAppBarLeading || appBarTitle || threadSidebar);
+	const shouldShowMobileViewSwitch = Boolean(selectedPanel) && showMobileViewSwitch;
+	const hasAppBarRow = hasApplicationChrome || shouldShowWorkbenchViewSwitch || shouldShowMobileViewSwitch;
 	React.useLayoutEffect(() => {
 		const pendingFocus = pendingPanelFocusRef.current;
 		if (!pendingFocus || pendingFocus.id !== activeWorkbenchView) return;
@@ -170,135 +162,95 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, co
 		} : null;
 		React.startTransition(() => setWorkbenchView(next));
 	};
-	const renderAppTopBar = (sidebarControls) => /* @__PURE__ */ jsxs(AppTopBar.Root, {
-		className: "think-full-app__app-bar",
-		"aria-label": "Workbench controls",
-		"data-mobile-view": activeMobileView,
-		children: [
-			/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [sidebarControls?.sidebarToggle, appBarLeading] }),
-			appBarTitle || sidebarControls ? /* @__PURE__ */ jsxs(AppTopBar.Title, { children: [appBarTitle ? /* @__PURE__ */ jsx("span", {
-				className: "think-full-app__app-title",
-				children: appBarTitle
-			}) : null, sidebarControls ? /* @__PURE__ */ jsxs(Button, {
-				type: "button",
-				variant: "ghost",
-				color: "neutral",
-				size: "sm",
-				className: "think-full-app__thread-trigger",
-				"aria-label": "Threads",
-				"aria-controls": sidebarControls.sidebarId,
-				"aria-expanded": sidebarControls.sidebarOpen,
-				onClick: (event) => sidebarControls.toggleSidebar(event.currentTarget),
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "think-full-app__thread-trigger-title sigvelo-truncate",
-						children: appBarTitle ?? "Threads"
-					}),
-					threadStatusSummary ? /* @__PURE__ */ jsx(ThinkThreadStatusIndicators, { summary: threadStatusSummary }) : null,
-					/* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })
-				]
-			}) : null] }) : null,
-			/* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [
-				appBarActions,
-				shouldShowWorkbenchViewSwitch && selectedPanel ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
-					className: "think-full-app__workbench-view-switch",
-					views: workbenchViews,
-					value: activeWorkbenchView,
-					allowEmpty: true,
-					onValueChange: (next) => {
-						updateAppView(() => {
-							if (!next) {
-								setWorkbenchOpen(false);
-								return;
-							}
-							updateWorkbenchPanel(next);
-							setWorkbenchOpen(true);
-						});
-					},
-					"aria-label": "Workbench views"
-				}) : null,
-				selectedPanel && showMobileViewSwitch ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
-					className: "think-full-app__mobile-view-switch",
-					views: workbenchViews,
-					value: activeMobileView === "workbench" ? activeWorkbenchView : void 0,
-					allowEmpty: true,
-					onValueChange: (next) => {
-						updateAppView(() => {
-							if (!next) {
-								setMobileView("chat");
-								return;
-							}
-							setWorkbenchView(next);
-							setMobileView("workbench");
-						});
-					},
-					"aria-label": "App views"
-				}) : null
-			] })
-		]
-	});
+	const appBarTrailing = appBarActions || shouldShowWorkbenchViewSwitch || shouldShowMobileViewSwitch ? /* @__PURE__ */ jsxs(Fragment, { children: [
+		appBarActions,
+		shouldShowWorkbenchViewSwitch ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+			className: "think-full-app__workbench-view-switch",
+			views: workbenchViews,
+			value: activeWorkbenchView,
+			allowEmpty: true,
+			onValueChange: (next) => {
+				updateAppView(() => {
+					if (!next) {
+						setWorkbenchOpen(false);
+						return;
+					}
+					updateWorkbenchPanel(next);
+					setWorkbenchOpen(true);
+				});
+			},
+			"aria-label": "Workbench views"
+		}) : null,
+		shouldShowMobileViewSwitch ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+			className: "think-full-app__mobile-view-switch",
+			views: workbenchViews,
+			value: activeMobileView === "workbench" ? activeWorkbenchView : void 0,
+			allowEmpty: true,
+			onValueChange: (next) => {
+				updateAppView(() => {
+					if (!next) {
+						setMobileView("chat");
+						return;
+					}
+					setWorkbenchView(next);
+					setMobileView("workbench");
+				});
+			},
+			"aria-label": "App views"
+		}) : null
+	] }) : void 0;
 	const appContent = /* @__PURE__ */ jsxs(ResizableSidePanel.Root, {
 		ref: mergeRefs(appRef, ref),
 		className: cx("think-full-app", className),
 		label: "workbench",
-		side: "end",
-		defaultSize: workbenchPanelDefaultWidth,
-		minSize: workbenchPanelMinWidth,
-		maxSize: workbenchPanelMaxWidth,
-		keyboardStep: workbenchPanelKeyboardStep,
-		collapseThreshold: workbenchPanelCollapseThreshold,
-		onCollapse: () => setWorkbenchOpen(false),
-		"data-has-thread-sidebar": threadSidebar ? "true" : "false",
+		side: "start",
+		defaultSize: conversationDefaultWidth,
+		minSize: conversationMinWidth,
+		maxSize: conversationMaxWidth,
+		keyboardStep: conversationKeyboardStep,
 		"data-has-workbench": hasWorkbench ? "true" : "false",
-		"data-has-workbench-topbar": hasAppBarRow ? "true" : "false",
 		"data-mobile-view": activeMobileView,
 		style,
 		...props,
-		children: [
-			shouldRenderInlineAppBar ? renderAppTopBar() : null,
-			/* @__PURE__ */ jsxs("div", {
-				className: "think-full-app__view-scope",
-				"data-recipe": "application-plane",
-				"data-mobile-view": activeMobileView,
-				children: [/* @__PURE__ */ jsx("section", {
-					className: "think-full-app__chat-surface",
-					"data-workspace-restoration-scope": "chat",
-					"aria-label": "Chat",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "think-full-app__view-scope",
+			"data-mobile-view": activeMobileView,
+			children: [/* @__PURE__ */ jsx("section", {
+				className: "think-full-app__chat-surface",
+				"data-workspace-restoration-scope": "chat",
+				"aria-label": "Chat",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "think-full-app__chat",
 					children: /* @__PURE__ */ jsx("div", {
-						className: "think-full-app__chat",
-						children: /* @__PURE__ */ jsx("div", {
-							className: "think-full-app__chat-inner",
-							children: conversation ? /* @__PURE__ */ jsx(ThinkFullAppThreadChat, {
-								...conversation,
-								messages,
-								renderAgentToolRunLink,
-								sourceKey
-							}) : /* @__PURE__ */ jsx(ThinkChat.Messages, {
-								...messages,
-								renderAgentToolRunLink
-							})
+						className: "think-full-app__chat-inner",
+						children: conversation ? /* @__PURE__ */ jsx(ThinkFullAppThreadChat, {
+							...conversation,
+							messages,
+							renderAgentToolRunLink,
+							sourceKey
+						}) : /* @__PURE__ */ jsx(ThinkChat.Messages, {
+							...messages,
+							renderAgentToolRunLink
 						})
 					})
-				}), activePanel ? /* @__PURE__ */ jsx("aside", {
-					className: "think-full-app__aside",
-					"aria-label": "Workbench",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "think-full-app__workbench-slot",
-						children: /* @__PURE__ */ jsx(React.ViewTransition, {
-							default: "sigvelo-layout-transition",
-							children: /* @__PURE__ */ jsx("div", {
-								ref: workbenchPanelRef,
-								className: "think-full-app__workbench-panel",
-								"data-view": activeWorkbenchView,
-								tabIndex: -1,
-								children: activePanel.render()
-							})
+				})
+			}), hasAvailableWorkbench ? /* @__PURE__ */ jsx("aside", {
+				className: "think-full-app__aside",
+				"aria-label": "Workbench",
+				children: activePanel ? /* @__PURE__ */ jsx("div", {
+					className: "think-full-app__workbench-slot",
+					children: /* @__PURE__ */ jsx(React.ViewTransition, {
+						default: "sigvelo-layout-transition",
+						children: /* @__PURE__ */ jsx("div", {
+							ref: workbenchPanelRef,
+							className: "think-full-app__workbench-panel",
+							tabIndex: -1,
+							children: activePanel.render()
 						})
 					})
-				}) : null]
-			}),
-			activePanel ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "think-full-app__resizer" }) : null
-		]
+				}) : null
+			}) : null]
+		}), activePanel ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "think-full-app__resizer" }) : null]
 	});
 	const app = workspace ? /* @__PURE__ */ jsx(WorkspaceNavigationProvider, {
 		root: workspace.root ?? "/",
@@ -313,14 +265,30 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, co
 			scope: "chat"
 		}), appContent] })
 	}) : appContent;
-	if (!threadSidebar) return app;
-	return /* @__PURE__ */ jsx(ThinkThreadShell, {
+	return /* @__PURE__ */ jsx(ResponsiveSidebarShell, {
+		className: "think-full-app-shell",
 		sidebar: threadSidebar,
+		sidebarLabel: "threads",
 		sidebarOpen: threadSidebarOpen,
 		defaultSidebarOpen: defaultThreadSidebarOpen,
 		onSidebarOpenChange: onThreadSidebarOpenChange,
-		"data-hide-app-bar-in-workbench": hideAppBarInWorkbench ? "" : void 0,
-		topBar: (controls) => renderAppTopBar(controls),
+		showMainLabel: "Show selected thread",
+		topBarHidden: !hasAppBarRow,
+		topBarProps: {
+			className: "think-full-app__app-bar",
+			"aria-label": "Workbench controls",
+			"data-app-chrome": hasApplicationChrome || shouldShowWorkbenchViewSwitch ? "true" : "false",
+			"data-mobile-view": activeMobileView,
+			"data-hide-in-workbench": hideAppBarInWorkbench ? "" : void 0
+		},
+		topBarLeading: appBarLeading,
+		compactTopBarLeading: compactAppBarLeading,
+		topBarTitle: appBarTitle,
+		compactTitleTrigger: threadSidebar ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "sigvelo-truncate",
+			children: appBarTitle ?? "Threads"
+		}), threadStatusSummary ? /* @__PURE__ */ jsx(ThinkThreadStatusIndicators, { summary: threadStatusSummary }) : null] }) : void 0,
+		topBarTrailing: appBarTrailing,
 		children: app
 	});
 }

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

@@ -1,4 +1,4 @@
-import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-lYYgyeE1.js";
+import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-k8bpyXqt.js";
 import { ThinkScheduledTask } from "@cloudflare/think";
 import { Schedule } from "agents";
 

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { H as PlusIcon } from "../../icons-B4mGvCvc.js";
+import { B as PlusIcon } from "../../icons-CVFSeTJn.js";
 import { buttonVariants } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
 import { t as capitalize } from "../../format-DB2mX9DA.js";