@mcp-b/react-components 0.14.2 → 0.16.1

package/dist/components/ThinkFullApp.js

@@ -1,93 +1,41 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { I as TerminalIcon, h as FileIcon, n as ArrowLeftIcon } from "../icons-Ba9THQKz.js";
-import { Separator } from "./Separator.js";
+import { G as TerminalIcon, s as ChevronDownIcon, v as FileIcon } from "../icons-CpfUer49.js";
 import { Button } from "./Button.js";
-import { Tooltip } from "./Tooltip.js";
-import { ToggleGroup } from "./ToggleGroup.js";
-import { o as useThinkPendingApprovals, s as resolveThinkApprovalProps, t as ThinkChat } from "../ThinkChat-BPcehdbP.js";
-import { WorkspaceExplorer, useWorkspace } from "./WorkspaceExplorer.js";
+import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../WorkspaceLink-DIPbXrUM.js";
+import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
+import { AppTopBar } from "./AppTopBar.js";
+import { ResizableSidePanel } from "./ResizableSidePanel.js";
+import { o as useThinkPendingApprovals, s as resolveThinkApprovalProps, t as ThinkChat } from "../ThinkChat-CzC-zNGA.js";
+import { useWorkspace } from "./Workspace.js";
+import { WorkspaceExplorer } from "./WorkspaceExplorer.js";
 import { ThinkExecutionWorkbench } from "./ThinkExecutionWorkbench.js";
+import { ThinkFullAppViewSwitch } from "./ThinkFullAppViewSwitch.js";
+import { ThinkThreadStatusIndicators } from "./ThinkThreadPicker.js";
 import { ThinkThreadShell } from "./ThinkThreadShell.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThinkFullApp.tsx
 const workbenchPanelDefaultWidth = 340;
 const workbenchPanelMinWidth = 300;
 const workbenchPanelMaxWidth = 600;
 const workbenchPanelKeyboardStep = 24;
-function clampWorkbenchPanelWidth(width) {
-	return Math.min(workbenchPanelMaxWidth, Math.max(workbenchPanelMinWidth, width));
-}
-function beginWorkbenchPanelResize(event, current, apply) {
-	event.preventDefault();
-	const startX = event.clientX;
-	const onMove = (move) => {
-		apply(clampWorkbenchPanelWidth(current - (move.clientX - startX)));
-	};
-	const onUp = () => {
-		window.removeEventListener("pointermove", onMove);
-		window.removeEventListener("pointerup", onUp);
-		window.removeEventListener("pointercancel", onUp);
-		document.body.classList.remove("is-resizing-think-full-app");
-	};
-	document.body.classList.add("is-resizing-think-full-app");
-	window.addEventListener("pointermove", onMove);
-	window.addEventListener("pointerup", onUp);
-	window.addEventListener("pointercancel", onUp);
-}
-function WorkbenchBackButton({ onBack }) {
-	return /* @__PURE__ */ jsx(Button, {
-		type: "button",
-		variant: "ghost",
-		color: "neutral",
-		size: "icon-sm",
-		className: "think-full-app__workspace-back",
-		"aria-label": "Show chat",
-		onClick: onBack,
-		children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
-	});
-}
-function WorkspacePanel({ source, root }) {
+function WorkspacePanel({ config, workbenchNavigation }) {
 	return /* @__PURE__ */ jsx(WorkspaceExplorer, {
 		className: "think-full-app__workbench",
 		workspace: useWorkspace({
-			source,
-			root
-		})
-	});
-}
-function WorkbenchViewItem({ children, label, value }) {
-	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx(ToggleGroup.Item, {
-		type: "button",
-		className: "think-full-app__workbench-view-item",
-		value,
-		"aria-label": label,
-		children
-	}) }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
-		side: "bottom",
-		sideOffset: 6,
-		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: label })
-	}) })] });
-}
-function WorkbenchViewSwitch({ panels, value, onValueChange }) {
-	return /* @__PURE__ */ jsx(ToggleGroup.Root, {
-		className: "think-full-app__workbench-view-switch",
-		size: "sm",
-		value: [value],
-		"aria-label": "Workbench views",
-		onValueChange: (nextValue) => {
-			const [next] = nextValue;
-			if (next) onValueChange(next);
-		},
-		children: panels.map((panel) => /* @__PURE__ */ jsx(WorkbenchViewItem, {
-			value: panel.id,
-			label: panel.label,
-			children: panel.icon
-		}, panel.id))
+			source: config.source,
+			root: config.root,
+			resolveFileAsset: config.resolveFileAsset,
+			maxInlineAssetBytes: config.maxInlineAssetBytes
+		}),
+		navigation: config.navigation,
+		leading: workbenchNavigation || config.leading ? /* @__PURE__ */ jsxs(Fragment, { children: [workbenchNavigation, config.leading] }) : void 0,
+		actions: config.actions
 	});
 }
 /** Combines ThinkChat with an optional resizable workbench shell. */
-function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThreadSidebarOpen, messages, onThreadSidebarOpenChange, onWorkbenchViewChange, ref, style, threadSidebar, threadSidebarOpen, workbenchPanels, workbenchView, workspace, workspaceRoot, ...props }) {
+function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat, className, defaultMobileView, defaultWorkbenchView, defaultThreadSidebarOpen, messages, mobileView, onMobileViewChange, onSelectedExecutionRunChange, onThreadSidebarOpenChange, onWorkbenchViewChange, ref, selectedExecutionRun, showExecutionWorkbench = true, style, threadSidebar, threadSidebarOpen, threadStatusSummary, workbenchPanels, workbenchView, workspace, ...props }) {
+	const appRef = React.useRef(null);
 	const approvals = useThinkPendingApprovals(agent.stub, `${chat.messages.length}:${chat.status}`);
 	const resolvedMessages = React.useMemo(() => {
 		const approvalProps = resolveThinkApprovalProps({
@@ -109,20 +57,16 @@ function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThr
 		approvals.refreshPendingApprovals,
 		messages
 	]);
-	const [mobileView, setMobileView] = React.useState("chat");
+	const [innerMobileView, setInnerMobileView] = React.useState(defaultMobileView ?? "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
+		workspace
 	}), [
 		agent,
 		chat,
-		workspace,
-		workspaceRoot
+		workspace
 	]);
 	const availableWorkbenchPanels = React.useMemo(() => {
 		const builtInPanels = [];
@@ -130,82 +74,135 @@ function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThr
 			id: "files",
 			label: "Files",
 			icon: /* @__PURE__ */ jsx(FileIcon, {}),
-			render: () => /* @__PURE__ */ jsx(WorkspacePanel, {
-				source: workspace,
-				root: workspaceRoot
-			})
+			render: () => /* @__PURE__ */ jsx(WorkspacePanel, { config: workspace })
 		});
-		builtInPanels.push({
+		if (showExecutionWorkbench) builtInPanels.push({
 			id: "execution",
 			label: "Execution",
 			icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
 			render: ({ agent }) => /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
 				source: agent.stub,
-				title: "Execution"
+				title: "Execution",
+				selectedRun: selectedExecutionRun,
+				onSelectedRunChange: onSelectedExecutionRunChange
 			})
 		});
 		return workbenchPanels ? [...builtInPanels, ...workbenchPanels] : builtInPanels;
 	}, [
+		onSelectedExecutionRunChange,
+		selectedExecutionRun,
+		showExecutionWorkbench,
 		workbenchPanels,
-		workspace,
-		workspaceRoot
+		workspace
 	]);
-	const activeMobileView = mobileView === "workbench" ? "workbench" : "chat";
-	const isMobileWorkbenchView = activeMobileView === "workbench";
+	const requestedMobileView = mobileView ?? innerMobileView;
 	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 activeWorkbenchView = activePanel?.id;
+	const hasWorkbench = activePanel !== void 0;
+	const activeMobileView = hasWorkbench ? requestedMobileView : "chat";
 	const showWorkbenchViewSwitch = availableWorkbenchPanels.length > 1;
-	const showShellTopbar = showWorkbenchViewSwitch || isMobileWorkbenchView;
-	const rootStyle = {
-		...style,
-		"--think-full-app-workbench-w": `${workbenchPanelWidth}px`
-	};
-	const resizeWorkbenchPanelBy = (delta) => {
-		setWorkbenchPanelWidth((current) => clampWorkbenchPanelWidth(current + delta));
-	};
+	const workbenchViews = availableWorkbenchPanels;
+	const canEmbedWorkbenchNavigation = activeWorkbenchView === "files" || activeWorkbenchView === "execution";
+	const hasApplicationChrome = Boolean(appBarActions || appBarLeading || appBarTitle || threadSidebar);
+	const shouldRenderInlineAppBar = !threadSidebar && (hasApplicationChrome || hasWorkbench);
+	const hasCompactAppBar = shouldRenderInlineAppBar && !hasApplicationChrome && canEmbedWorkbenchNavigation;
+	const hasAppBarRow = shouldRenderInlineAppBar && !hasCompactAppBar;
 	const setWorkbenchView = React.useCallback((next) => {
 		if (workbenchView === void 0) setInnerWorkbenchView(next);
 		onWorkbenchViewChange?.(next);
 	}, [onWorkbenchViewChange, workbenchView]);
-	const app = /* @__PURE__ */ jsxs("div", {
-		ref,
+	const setMobileView = React.useCallback((next) => {
+		if (mobileView === void 0) setInnerMobileView(next);
+		onMobileViewChange?.(next);
+	}, [mobileView, onMobileViewChange]);
+	const workbenchNavigation = showWorkbenchViewSwitch ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+		className: "think-full-app__embedded-view-switch",
+		views: workbenchViews,
+		value: activeWorkbenchView,
+		onValueChange: (next) => {
+			if (next) setWorkbenchView(next);
+		},
+		"aria-label": "Workbench views"
+	}) : null;
+	const renderAppTopBar = (sidebarControls) => /* @__PURE__ */ jsxs(AppTopBar.Root, {
+		className: "think-full-app__app-bar",
+		"aria-label": "Workbench controls",
+		"data-mobile-view": activeMobileView,
+		"data-compact-only": hasCompactAppBar ? "true" : void 0,
+		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-controls": sidebarControls.sidebarId,
+				"aria-expanded": sidebarControls.sidebarOpen,
+				onClick: (event) => sidebarControls.toggleSidebar(event.currentTarget),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "think-full-app__thread-trigger-title",
+						children: appBarTitle ?? "Threads"
+					}),
+					threadStatusSummary ? /* @__PURE__ */ jsx(ThinkThreadStatusIndicators, { summary: threadStatusSummary }) : null,
+					/* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })
+				]
+			}) : null] }) : null,
+			/* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [
+				appBarActions,
+				showWorkbenchViewSwitch && activeWorkbenchView && !canEmbedWorkbenchNavigation ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+					className: "think-full-app__workbench-view-switch",
+					views: workbenchViews,
+					value: activeWorkbenchView,
+					onValueChange: (next) => {
+						if (next) setWorkbenchView(next);
+					},
+					"aria-label": "Workbench views"
+				}) : null,
+				activePanel ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+					className: "think-full-app__mobile-view-switch",
+					views: workbenchViews,
+					value: activeMobileView === "workbench" ? activePanel.id : void 0,
+					allowEmpty: true,
+					onValueChange: (next) => {
+						if (!next) {
+							setMobileView("chat");
+							return;
+						}
+						setWorkbenchView(next);
+						setMobileView("workbench");
+					},
+					"aria-label": "App views"
+				}) : null
+			] })
+		]
+	});
+	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,
 		"data-has-thread-sidebar": threadSidebar ? "true" : "false",
-		"data-has-workbench-topbar": showWorkbenchViewSwitch ? "true" : "false",
+		"data-has-workbench": hasWorkbench ? "true" : "false",
+		"data-has-workbench-topbar": hasAppBarRow ? "true" : "false",
+		"data-has-compact-app-bar": hasCompactAppBar ? "true" : "false",
 		"data-mobile-view": activeMobileView,
-		style: rootStyle,
+		style,
 		...props,
 		children: [
-			showShellTopbar ? /* @__PURE__ */ jsxs("div", {
-				className: "think-full-app__topbar",
-				role: "toolbar",
-				"aria-label": "Workbench controls",
-				"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]
-			}) : null,
-			!isMobileWorkbenchView ? /* @__PURE__ */ jsx("div", {
-				className: "think-full-app__mobile-header",
-				role: "toolbar",
-				"aria-label": "Workbench",
-				children: /* @__PURE__ */ jsx(Button, {
-					type: "button",
-					variant: "ghost",
-					color: "neutral",
-					size: "icon-sm",
-					className: "think-full-app__mobile-action",
-					"aria-label": mobileWorkbenchLabel,
-					onClick: () => setMobileView("workbench"),
-					children: activePanel?.icon ?? /* @__PURE__ */ jsx(TerminalIcon, {})
-				})
-			}) : null,
+			shouldRenderInlineAppBar ? renderAppTopBar() : null,
 			/* @__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",
@@ -230,33 +227,7 @@ function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThr
 					})
 				})
 			}),
-			/* @__PURE__ */ jsx(Separator, {
-				decorative: false,
-				orientation: "vertical",
-				tabIndex: 0,
-				"aria-label": "Resize workbench panel",
-				"aria-valuemin": workbenchPanelMinWidth,
-				"aria-valuemax": workbenchPanelMaxWidth,
-				"aria-valuenow": workbenchPanelWidth,
-				className: "think-resize-handle think-full-app__resizer",
-				onPointerDown: (event) => beginWorkbenchPanelResize(event, workbenchPanelWidth, setWorkbenchPanelWidth),
-				onKeyDown: (event) => {
-					if (event.key === "ArrowLeft") {
-						event.preventDefault();
-						resizeWorkbenchPanelBy(workbenchPanelKeyboardStep);
-					} else if (event.key === "ArrowRight") {
-						event.preventDefault();
-						resizeWorkbenchPanelBy(-24);
-					} else if (event.key === "Home") {
-						event.preventDefault();
-						setWorkbenchPanelWidth(workbenchPanelMinWidth);
-					} else if (event.key === "End") {
-						event.preventDefault();
-						setWorkbenchPanelWidth(workbenchPanelMaxWidth);
-					}
-				}
-			}),
-			/* @__PURE__ */ jsx("aside", {
+			activePanel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "think-full-app__resizer" }), /* @__PURE__ */ jsx("aside", {
 				className: "think-full-app__aside",
 				"aria-label": "Workbench",
 				children: /* @__PURE__ */ jsx("div", {
@@ -264,18 +235,41 @@ function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThr
 					children: /* @__PURE__ */ jsx("div", {
 						className: "think-full-app__workbench-panel",
 						"data-view": activeWorkbenchView,
-						children: activePanel?.render(panelContext)
+						children: activeWorkbenchView === "files" && workspace ? /* @__PURE__ */ jsx(WorkspacePanel, {
+							config: workspace,
+							workbenchNavigation
+						}) : activeWorkbenchView === "execution" ? /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
+							source: agent.stub,
+							title: "Execution",
+							backButton: workbenchNavigation,
+							selectedRun: selectedExecutionRun,
+							onSelectedRunChange: onSelectedExecutionRunChange
+						}) : activePanel.render(panelContext)
 					})
 				})
-			})
+			})] }) : null
 		]
 	});
+	const app = workspace ? /* @__PURE__ */ jsx(WorkspaceNavigationProvider, {
+		root: workspace.root ?? "/",
+		base: {
+			kind: "directory",
+			path: workspace.root ?? "/"
+		},
+		navigation: workspace.navigation,
+		children: /* @__PURE__ */ jsxs(WorkspaceNavigationRestorationBoundary, { children: [/* @__PURE__ */ jsx(WorkspaceNavigationFocusRestorer, {
+			entryKey: workspace.navigation.current.key,
+			rootRef: appRef,
+			scope: "chat"
+		}), appContent] })
+	}) : appContent;
 	if (!threadSidebar) return app;
 	return /* @__PURE__ */ jsx(ThinkThreadShell, {
 		sidebar: threadSidebar,
 		sidebarOpen: threadSidebarOpen,
 		defaultSidebarOpen: defaultThreadSidebarOpen,
 		onSidebarOpenChange: onThreadSidebarOpenChange,
+		topBar: (controls) => renderAppTopBar(controls),
 		children: app
 	});
 }

package/dist/components/ThinkFullAppViewSwitch.d.ts

@@ -0,0 +1,31 @@
+import { r as ToggleGroupProps } from "../ToggleGroup-8hPv-b69.js";
+import * as React from "react";
+
+//#region src/components/ThinkFullAppViewSwitch.d.ts
+interface ThinkFullAppView {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+}
+interface ThinkFullAppViewSwitchProps extends Omit<ToggleGroupProps, "children" | "onValueChange" | "value"> {
+  views: readonly ThinkFullAppView[];
+  value?: string;
+  /** Whether pressing the selected view may clear the selection. */
+  allowEmpty?: boolean;
+  onValueChange: (value: string | undefined, eventDetails: Parameters<NonNullable<ToggleGroupProps["onValueChange"]>>[1]) => void;
+}
+/**
+ * Icon view picker shared by ThinkFullApp's wide workbench and compact app
+ * navigation. Base UI owns selection and roving focus; AppTopBar owns the
+ * toolbar control and tooltip presentation.
+ */
+declare function ThinkFullAppViewSwitch({
+  allowEmpty,
+  className,
+  onValueChange,
+  value,
+  views,
+  ...props
+}: ThinkFullAppViewSwitchProps): React.JSX.Element;
+//#endregion
+export { ThinkFullAppView, ThinkFullAppViewSwitch, ThinkFullAppViewSwitchProps };

package/dist/components/ThinkFullAppViewSwitch.js

@@ -0,0 +1,34 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { AppTopBar } from "./AppTopBar.js";
+import { ToggleGroup } from "./ToggleGroup.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ThinkFullAppViewSwitch.tsx
+/**
+* Icon view picker shared by ThinkFullApp's wide workbench and compact app
+* navigation. Base UI owns selection and roving focus; AppTopBar owns the
+* toolbar control and tooltip presentation.
+*/
+function ThinkFullAppViewSwitch({ allowEmpty = false, className, onValueChange, value, views, ...props }) {
+	return /* @__PURE__ */ jsx(ToggleGroup.Root, {
+		className: cx("think-full-app__view-switch", className),
+		size: "sm",
+		value: value ? [value] : [],
+		onValueChange: (nextValue, eventDetails) => {
+			const [next] = nextValue;
+			if (next || allowEmpty) onValueChange(next, eventDetails);
+		},
+		...props,
+		children: views.map((view) => /* @__PURE__ */ jsx(AppTopBar.Button, {
+			type: "button",
+			label: view.label,
+			render: /* @__PURE__ */ jsx(ToggleGroup.Item, {
+				type: "button",
+				value: view.id
+			}),
+			children: view.icon
+		}, view.id))
+	});
+}
+//#endregion
+export { ThinkFullAppViewSwitch };

package/dist/components/ThinkRoutine.d.ts

@@ -0,0 +1,36 @@
+import { t as ThinkExecutionRun } from "../ThinkExecutionRun-ChhWhOoU.js";
+import { ThinkScheduledTask } from "@cloudflare/think";
+import { Schedule } from "agents";
+
+//#region src/components/ThinkRoutine.d.ts
+/** App-owned identity for the Think agent that owns a routine. */
+interface ThinkRoutineOwner {
+  id: string;
+  name: string;
+}
+/**
+ * App-level routine descriptor. Scheduling and execution records remain whole
+ * upstream Think/Agents SDK values; only library identity and enabled state are
+ * app-owned because neither SDK provides a cross-agent routine catalog.
+ */
+interface ThinkRoutine {
+  id: string;
+  name: string;
+  description?: string;
+  enabled: boolean;
+  owner: ThinkRoutineOwner;
+  task: ThinkScheduledTask;
+  schedule?: Schedule<unknown> | null;
+  runs: readonly ThinkExecutionRun[];
+}
+/** Preserves an app-enriched native execution type carried by a routine subtype. */
+type ThinkRoutineRunOf<TRoutine extends ThinkRoutine = ThinkRoutine> = TRoutine["runs"][number];
+interface ThinkRoutineCreateRequest {
+  name: string;
+  ownerId: string;
+  /** Whole upstream task, including prompt functions and handler tasks. */
+  task: ThinkScheduledTask;
+}
+declare function getThinkRoutineNextRun(routine: ThinkRoutine): string;
+//#endregion
+export { ThinkRoutine, ThinkRoutineCreateRequest, ThinkRoutineOwner, ThinkRoutineRunOf, getThinkRoutineNextRun };

package/dist/components/ThinkRoutine.js

@@ -0,0 +1,15 @@
+//#region src/components/ThinkRoutine.ts
+function getThinkRoutineNextRun(routine) {
+	return routine.schedule ? formatThinkExecutionDate(routine.schedule.time * 1e3, "Not scheduled") : "Pending reconciliation";
+}
+function formatThinkExecutionDate(value, fallback) {
+	const date = value instanceof Date ? value : new Date(value);
+	return Number.isNaN(date.getTime()) ? fallback : date.toLocaleString(void 0, {
+		month: "short",
+		day: "numeric",
+		hour: "numeric",
+		minute: "2-digit"
+	});
+}
+//#endregion
+export { getThinkRoutineNextRun };

package/dist/components/ThinkRoutineBrowser.d.ts

@@ -0,0 +1,25 @@
+import { ThinkRoutine } from "./ThinkRoutine.js";
+import * as React from "react";
+
+//#region src/components/ThinkRoutineBrowser.d.ts
+type ThinkRoutineFilter = "all" | "active" | "paused";
+interface ThinkRoutineBrowserProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> {
+  routines: readonly ThinkRoutine[];
+  selectedRoutineId?: string;
+  onSelectedRoutineIdChange?: (routineId: string) => void;
+  onCreateRoutine?: () => void;
+}
+/** Searchable, filterable navigation for an app-owned collection of Think routines. */
+declare function ThinkRoutineBrowser({
+  className,
+  routines,
+  selectedRoutineId,
+  onSelectedRoutineIdChange,
+  onCreateRoutine,
+  ref,
+  ...props
+}: ThinkRoutineBrowserProps & {
+  ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+//#endregion
+export { ThinkRoutineBrowser, ThinkRoutineBrowserProps, ThinkRoutineFilter };