@mcp-b/react-components 0.7.1 → 0.8.0

package/dist/components/ThinkFullApp.js

@@ -1,65 +1,114 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { h as FileIcon, n as ArrowLeftIcon } from "../icons-BAlTbWWP.js";
+import { P as TerminalIcon, h as FileIcon, n as ArrowLeftIcon } from "../icons-D2Q5n5C1.js";
 import { Button } from "./Button.js";
+import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.js";
 import { WorkspaceExplorer, useWorkspace } from "./WorkspaceExplorer.js";
 import { ThinkChat, useThinkPendingApprovals } from "./ThinkChat.js";
+import { ThinkExecutionWorkbench } from "./ThinkExecutionWorkbench.js";
+import { ThinkThreadShell } from "./ThinkThreadPicker.js";
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThinkFullApp.tsx
-const filesPanelDefaultWidth = 340;
-const filesPanelMinWidth = 300;
-const filesPanelMaxWidth = 600;
-const filesPanelKeyboardStep = 24;
-function clampFilesPanelWidth(width) {
-	return Math.min(filesPanelMaxWidth, Math.max(filesPanelMinWidth, width));
+const workbenchPanelDefaultWidth = 340;
+const workbenchPanelMinWidth = 300;
+const workbenchPanelMaxWidth = 600;
+const workbenchPanelKeyboardStep = 24;
+function clampWorkbenchPanelWidth(width) {
+	return Math.min(workbenchPanelMaxWidth, Math.max(workbenchPanelMinWidth, width));
 }
-function beginFilesPanelResize(event, current, apply) {
+function beginWorkbenchPanelResize(event, current, apply) {
 	event.preventDefault();
 	const startX = event.clientX;
 	const onMove = (move) => {
-		apply(clampFilesPanelWidth(current - (move.clientX - startX)));
+		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-columns");
 	};
 	document.body.classList.add("is-resizing-columns");
 	window.addEventListener("pointermove", onMove);
 	window.addEventListener("pointerup", onUp);
+	window.addEventListener("pointercancel", onUp);
 }
-function WorkspacePanel({ onBack, source, root }) {
+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 }) {
 	return /* @__PURE__ */ jsx(WorkspaceExplorer, {
 		className: "think-full-app__workbench",
 		workspace: useWorkspace({
 			source,
 			root
-		}),
-		title: onBack ? /* @__PURE__ */ jsxs("span", {
-			className: "think-full-app__workspace-title",
-			children: [/* @__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, {})
-			}), /* @__PURE__ */ jsx("span", { children: "Workspace" })]
-		}) : void 0
+		})
 	});
 }
-/** Combines ThinkChat with an optional resizable workspace file explorer shell. */
-function ThinkFullApp(props) {
-	if (!props.agentStub) return /* @__PURE__ */ jsx(ThinkFullAppLayout, { ...props });
-	return /* @__PURE__ */ jsx(ThinkFullAppWithApprovals, {
-		...props,
-		agentStub: props.agentStub
+function WorkbenchViewItem({ children, label, value }) {
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(ToggleGroupItem, {
+		type: "button",
+		className: "think-full-app__workbench-view-item",
+		value,
+		"aria-label": label,
+		children
+	}) }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, {
+		side: "bottom",
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsx(TooltipPopup, { children: label })
+	}) })] });
+}
+function WorkbenchViewSwitch({ value, onValueChange }) {
+	return /* @__PURE__ */ jsxs(ToggleGroup, {
+		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: [/* @__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"
 	});
 }
-function ThinkFullAppWithApprovals({ agentStub, chat, messages, ...props }) {
-	const approvals = useThinkPendingApprovals(agentStub, `${chat.messages.length}:${chat.status}`);
+/** 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 }) {
+	const approvals = useThinkPendingApprovals(agent.stub, `${chat.messages.length}:${chat.status}`);
 	const resolvedMessages = React.useMemo(() => ({
 		...messages,
 		executionApprovals: messages?.executionApprovals ?? approvals.executionApprovals,
@@ -69,44 +118,64 @@ function ThinkFullAppWithApprovals({ agentStub, chat, messages, ...props }) {
 		approvals.pendingApprovals,
 		messages
 	]);
-	return /* @__PURE__ */ jsx(ThinkFullAppLayout, {
-		...props,
-		chat,
-		messages: resolvedMessages
-	});
-}
-function ThinkFullAppLayout({ chat, className, messages, ref, style, workspace, workspaceRoot, ...props }) {
 	const hasWorkspace = workspace !== void 0;
 	const [mobileView, setMobileView] = React.useState("chat");
-	const [filesPanelWidth, setFilesPanelWidth] = React.useState(filesPanelDefaultWidth);
-	const activeMobileView = hasWorkspace && mobileView === "files" ? "files" : "chat";
-	const isMobileFilesView = activeMobileView === "files";
+	const [innerWorkbenchView, setInnerWorkbenchView] = React.useState(defaultWorkbenchView ?? "files");
+	const [workbenchPanelWidth, setWorkbenchPanelWidth] = React.useState(workbenchPanelDefaultWidth);
+	const activeMobileView = mobileView === "workbench" ? "workbench" : "chat";
+	const isMobileWorkbenchView = activeMobileView === "workbench";
+	const activeWorkbenchView = hasWorkspace ? workbenchView ?? innerWorkbenchView : "execution";
+	const showShellTopbar = hasWorkspace || isMobileWorkbenchView;
 	const rootStyle = {
 		...style,
-		"--think-full-app-files-w": `${filesPanelWidth}px`
+		"--think-full-app-workbench-w": `${workbenchPanelWidth}px`
 	};
-	const resizeFilesPanelBy = (delta) => {
-		setFilesPanelWidth((current) => clampFilesPanelWidth(current + delta));
+	const resizeWorkbenchPanelBy = (delta) => {
+		setWorkbenchPanelWidth((current) => clampWorkbenchPanelWidth(current + delta));
 	};
-	return /* @__PURE__ */ jsxs("div", {
+	const setWorkbenchView = React.useCallback((next) => {
+		if (!hasWorkspace) return;
+		if (workbenchView === void 0) setInnerWorkbenchView(next);
+		onWorkbenchViewChange?.(next);
+	}, [
+		hasWorkspace,
+		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-mobile-view": activeMobileView,
 		style: rootStyle,
 		...props,
 		children: [
-			hasWorkspace && !isMobileFilesView ? /* @__PURE__ */ jsx("header", {
+			showShellTopbar ? /* @__PURE__ */ jsxs("div", {
+				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, {
+					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": "Show files",
-					onClick: () => setMobileView("files"),
-					children: /* @__PURE__ */ jsx(FileIcon, {})
+					"aria-label": hasWorkspace ? "Show workbench" : "Show execution",
+					onClick: () => setMobileView("workbench"),
+					children: hasWorkspace ? /* @__PURE__ */ jsx(FileIcon, {}) : /* @__PURE__ */ jsx(TerminalIcon, {})
 				})
 			}) : null,
 			/* @__PURE__ */ jsx("section", {
@@ -118,12 +187,16 @@ function ThinkFullAppLayout({ chat, className, messages, ref, style, workspace,
 						className: "think-full-app__chat-inner",
 						children: [/* @__PURE__ */ jsx(ThinkChat.Provider, {
 							chat,
-							children: /* @__PURE__ */ jsx(ThinkChat.Messages, { ...messages })
+							children: /* @__PURE__ */ jsx(ThinkChat.Messages, { ...resolvedMessages })
 						}), chat.error ? /* @__PURE__ */ jsxs("div", {
 							className: "think-full-app__error",
 							role: "alert",
-							children: [chat.error.message, /* @__PURE__ */ jsx("button", {
+							children: [chat.error.message, /* @__PURE__ */ jsx(Button, {
 								type: "button",
+								variant: "link",
+								color: "neutral",
+								size: "xs",
+								className: "think-full-app__error-dismiss",
 								onClick: () => chat.clearError(),
 								children: "Dismiss"
 							})]
@@ -131,45 +204,55 @@ function ThinkFullAppLayout({ chat, className, messages, ref, style, workspace,
 					})
 				})
 			}),
-			workspace ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				role: "separator",
-				"aria-label": "Resize file panel",
+				"aria-label": "Resize workbench panel",
 				"aria-orientation": "vertical",
-				"aria-valuemin": filesPanelMinWidth,
-				"aria-valuemax": filesPanelMaxWidth,
-				"aria-valuenow": filesPanelWidth,
+				"aria-valuemin": workbenchPanelMinWidth,
+				"aria-valuemax": workbenchPanelMaxWidth,
+				"aria-valuenow": workbenchPanelWidth,
 				className: "think-full-app__resizer",
-				onPointerDown: (event) => beginFilesPanelResize(event, filesPanelWidth, setFilesPanelWidth),
+				onPointerDown: (event) => beginWorkbenchPanelResize(event, workbenchPanelWidth, setWorkbenchPanelWidth),
 				onKeyDown: (event) => {
 					if (event.key === "ArrowLeft") {
 						event.preventDefault();
-						resizeFilesPanelBy(filesPanelKeyboardStep);
+						resizeWorkbenchPanelBy(workbenchPanelKeyboardStep);
 					} else if (event.key === "ArrowRight") {
 						event.preventDefault();
-						resizeFilesPanelBy(-24);
+						resizeWorkbenchPanelBy(-24);
 					} else if (event.key === "Home") {
 						event.preventDefault();
-						setFilesPanelWidth(filesPanelMinWidth);
+						setWorkbenchPanelWidth(workbenchPanelMinWidth);
 					} else if (event.key === "End") {
 						event.preventDefault();
-						setFilesPanelWidth(filesPanelMaxWidth);
+						setWorkbenchPanelWidth(workbenchPanelMaxWidth);
 					}
 				}
-			}), /* @__PURE__ */ jsx("aside", {
+			}),
+			/* @__PURE__ */ jsx("aside", {
 				className: "think-full-app__aside",
-				"aria-label": "File explorer",
+				"aria-label": "Workbench",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "think-full-app__files-slot",
-					children: /* @__PURE__ */ jsx(WorkspacePanel, {
-						source: workspace,
-						root: workspaceRoot,
-						onBack: () => setMobileView("chat")
+					className: "think-full-app__workbench-slot",
+					children: /* @__PURE__ */ jsx(WorkbenchPanel, {
+						executionSource: agent.stub,
+						workspace,
+						workspaceRoot,
+						view: activeWorkbenchView
 					})
 				})
-			})] }) : null
+			})
 		]
 	});
+	if (!threadSidebar) return app;
+	return /* @__PURE__ */ jsx(ThinkThreadShell, {
+		sidebar: threadSidebar,
+		sidebarOpen: threadSidebarOpen,
+		defaultSidebarOpen: defaultThreadSidebarOpen,
+		onSidebarOpenChange: onThreadSidebarOpenChange,
+		children: app
+	});
 }
 //#endregion
-export { ThinkFullApp };
+export { ThinkExecutionWorkbench, ThinkFullApp };

package/dist/components/ThinkThreadPicker.d.ts

@@ -0,0 +1,88 @@
+import * as React from "react";
+
+//#region src/components/ThinkThreadPicker.d.ts
+interface ThinkThreadItem {
+  /** Stable child-agent/thread id passed back to the app's route state. */
+  id: string;
+  /** Human-readable thread title, usually generated by the parent Think agent. */
+  title: string;
+  /** Optional parent-owned preview for apps that render their own richer sidebar. */
+  lastMessagePreview?: string;
+  /** Timestamp from the parent registry or metadata row. `updatedAt` wins over `createdAt`. */
+  createdAt?: Date | number;
+  /** Timestamp from parent-owned thread metadata when available. */
+  updatedAt?: Date | number;
+  /** Preformatted timestamp label when the app already has one, such as "14m". */
+  updatedAtLabel?: string;
+  /** Optional upstream/app status string. The picker only displays it; it does not derive it. */
+  status?: string;
+  /** Human label for `status` when the raw upstream value is not user-facing. */
+  statusLabel?: string;
+}
+interface ThinkThreadPickerProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect" | "title"> {
+  /** Threads from the parent agent, already sorted in the order the app wants to show. */
+  threads: readonly ThinkThreadItem[];
+  /** Selected child-agent/thread id. */
+  selectedId?: string;
+  /** Called when a thread row is selected; callers route this into `useAgent({ sub })`. */
+  onSelect: (id: string) => void;
+  /** Optional parent-agent create action, usually `parent.stub.createThread()`. */
+  onCreate?: () => void | Promise<void>;
+  /** Visible heading for the roster. */
+  title?: React.ReactNode;
+  /** Accessible label for the list navigation. */
+  "aria-label"?: string;
+}
+interface ThinkThreadShellProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Thread picker or app-owned sidebar shown beside the selected child shell. */
+  sidebar: React.ReactNode;
+  /** Whether the thread drawer is open. Omit for internal state. */
+  sidebarOpen?: boolean;
+  /** Initial thread drawer state when `sidebarOpen` is uncontrolled. */
+  defaultSidebarOpen?: boolean;
+  /** Called when the thread drawer is opened or closed. */
+  onSidebarOpenChange?: (open: boolean) => void;
+}
+/**
+ * Thread roster UI for sub-agent chat apps.
+ *
+ * This component does not call Think or Cloudflare RPC methods directly. Feed
+ * it from the parent agent's roster method, then route `onSelect` into the
+ * child `useAgent({ sub: [...] })` name. Keep backend contract notes beside the
+ * parent Think agent because `listThreads()`/`createThread()` are app-owned.
+ */
+declare function ThinkThreadPicker({
+  threads,
+  selectedId,
+  onSelect,
+  onCreate,
+  className,
+  title,
+  "aria-label": ariaLabel,
+  ref,
+  ...props
+}: ThinkThreadPickerProps & {
+  ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+/**
+ * Layout wrapper for a thread picker beside one selected `ThinkFullApp`.
+ *
+ * Mobile keeps the drawer at about 80% width so the selected chat remains
+ * visible as a preview. It only owns layout; callers still own the parent agent,
+ * selected child agent, chat hook, and shared workspace.
+ */
+declare function ThinkThreadShell({
+  sidebar,
+  sidebarOpen,
+  defaultSidebarOpen,
+  onSidebarOpenChange,
+  className,
+  children,
+  ref,
+  style,
+  ...props
+}: ThinkThreadShellProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { ThinkThreadItem, ThinkThreadPicker, ThinkThreadPickerProps, ThinkThreadShell, ThinkThreadShellProps };