@mcp-b/react-components 0.7.0 → 0.8.0

package/dist/components/ThinkFullApp.js

@@ -0,0 +1,258 @@
+import { t as cx } from "../class-names-9UtZwb0J.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 { 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-columns");
+	};
+	document.body.classList.add("is-resizing-columns");
+	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 }) {
+	return /* @__PURE__ */ jsx(WorkspaceExplorer, {
+		className: "think-full-app__workbench",
+		workspace: useWorkspace({
+			source,
+			root
+		})
+	});
+}
+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"
+	});
+}
+/** 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,
+		pendingApprovals: messages?.pendingApprovals ?? approvals.pendingApprovals
+	}), [
+		approvals.executionApprovals,
+		approvals.pendingApprovals,
+		messages
+	]);
+	const hasWorkspace = workspace !== void 0;
+	const [mobileView, setMobileView] = React.useState("chat");
+	const [innerWorkbenchView, setInnerWorkbenchView] = React.useState(defaultWorkbenchView ?? "files");
+	const [workbenchPanelWidth, setWorkbenchPanelWidth] = React.useState(workbenchPanelDefaultWidth);
+	const 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-workbench-w": `${workbenchPanelWidth}px`
+	};
+	const resizeWorkbenchPanelBy = (delta) => {
+		setWorkbenchPanelWidth((current) => clampWorkbenchPanelWidth(current + delta));
+	};
+	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: [
+			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": hasWorkspace ? "Show workbench" : "Show execution",
+					onClick: () => setMobileView("workbench"),
+					children: hasWorkspace ? /* @__PURE__ */ jsx(FileIcon, {}) : /* @__PURE__ */ jsx(TerminalIcon, {})
+				})
+			}) : null,
+			/* @__PURE__ */ jsx("section", {
+				className: "think-full-app__chat-surface",
+				"aria-label": "Chat",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "think-full-app__chat",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "think-full-app__chat-inner",
+						children: [/* @__PURE__ */ jsx(ThinkChat.Provider, {
+							chat,
+							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, {
+								type: "button",
+								variant: "link",
+								color: "neutral",
+								size: "xs",
+								className: "think-full-app__error-dismiss",
+								onClick: () => chat.clearError(),
+								children: "Dismiss"
+							})]
+						}) : null]
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "separator",
+				"aria-label": "Resize workbench panel",
+				"aria-orientation": "vertical",
+				"aria-valuemin": workbenchPanelMinWidth,
+				"aria-valuemax": workbenchPanelMaxWidth,
+				"aria-valuenow": workbenchPanelWidth,
+				className: "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", {
+				className: "think-full-app__aside",
+				"aria-label": "Workbench",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "think-full-app__workbench-slot",
+					children: /* @__PURE__ */ jsx(WorkbenchPanel, {
+						executionSource: agent.stub,
+						workspace,
+						workspaceRoot,
+						view: activeWorkbenchView
+					})
+				})
+			})
+		]
+	});
+	if (!threadSidebar) return app;
+	return /* @__PURE__ */ jsx(ThinkThreadShell, {
+		sidebar: threadSidebar,
+		sidebarOpen: threadSidebarOpen,
+		defaultSidebarOpen: defaultThreadSidebarOpen,
+		onSidebarOpenChange: onThreadSidebarOpenChange,
+		children: app
+	});
+}
+//#endregion
+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 };

package/dist/components/ThinkThreadPicker.js

@@ -0,0 +1,282 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { M as SpinnerIcon, O as PlusIcon, j as SidebarIcon, u as DotIcon } from "../icons-D2Q5n5C1.js";
+import { Button } from "./Button.js";
+import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { ScrollArea } from "./ScrollArea.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ThinkThreadPicker.tsx
+const threadSidebarDefaultWidth = 256;
+const threadSidebarMinWidth = 224;
+const threadSidebarMaxWidth = 384;
+const threadSidebarKeyboardStep = 24;
+function useControllableSidebar({ sidebarOpen, defaultSidebarOpen, onSidebarOpenChange }) {
+	const [innerOpen, setInnerOpen] = React.useState(defaultSidebarOpen ?? true);
+	return [sidebarOpen ?? innerOpen, React.useCallback((next) => {
+		if (sidebarOpen === void 0) setInnerOpen(next);
+		onSidebarOpenChange?.(next);
+	}, [sidebarOpen, onSidebarOpenChange])];
+}
+function clampThreadSidebarWidth(width) {
+	return Math.min(threadSidebarMaxWidth, Math.max(threadSidebarMinWidth, width));
+}
+function beginThreadSidebarResize(event, current, apply) {
+	event.preventDefault();
+	const startX = event.clientX;
+	const onMove = (move) => {
+		apply(clampThreadSidebarWidth(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 toThreadDate(value) {
+	if (value === void 0) return void 0;
+	const date = value instanceof Date ? value : new Date(value);
+	return Number.isNaN(date.getTime()) ? void 0 : date;
+}
+function formatThreadTimestamp(thread) {
+	const date = toThreadDate(thread.updatedAt ?? thread.createdAt);
+	if (thread.updatedAtLabel) return {
+		date,
+		label: thread.updatedAtLabel
+	};
+	if (!date) return void 0;
+	const elapsed = Math.max(0, Date.now() - date.getTime());
+	const minute = 6e4;
+	const hour = 60 * minute;
+	const day = 24 * hour;
+	if (elapsed < hour) return {
+		date,
+		label: `${Math.max(1, Math.round(elapsed / minute))}m`
+	};
+	if (elapsed < day) return {
+		date,
+		label: `${Math.round(elapsed / hour)}h`
+	};
+	if (elapsed < 7 * day) return {
+		date,
+		label: `${Math.round(elapsed / day)}d`
+	};
+	return {
+		date,
+		label: date.toLocaleDateString(void 0, {
+			month: "short",
+			day: "numeric"
+		})
+	};
+}
+function formatThreadStatus(thread) {
+	if (thread.statusLabel) return thread.statusLabel;
+	if (!thread.status || thread.status === "idle" || thread.status === "ready") return void 0;
+	return thread.status.replaceAll("-", " ");
+}
+function isThreadBusy(status) {
+	return status === "pending" || status === "running" || status === "starting" || status === "streaming" || status === "submitted" || status === "recovering";
+}
+/**
+* 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.
+*/
+function ThinkThreadPicker({ threads, selectedId, onSelect, onCreate, className, title = "Recents", "aria-label": ariaLabel = "Threads", ref, ...props }) {
+	return /* @__PURE__ */ jsxs("aside", {
+		ref,
+		className: cx("think-thread-picker", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("header", {
+				className: "think-thread-picker__header",
+				children: /* @__PURE__ */ jsx("h2", {
+					className: "think-thread-picker__title",
+					children: title
+				})
+			}),
+			/* @__PURE__ */ jsx("nav", {
+				className: "think-thread-picker__nav",
+				"aria-label": ariaLabel,
+				children: /* @__PURE__ */ jsxs(ScrollArea.Root, {
+					className: "think-thread-picker__scroll",
+					children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+						className: "think-thread-picker__viewport",
+						"aria-label": "Thread list",
+						children: threads.length ? /* @__PURE__ */ jsx("ul", {
+							className: "think-thread-picker__list",
+							children: threads.map((thread) => {
+								const timestamp = formatThreadTimestamp(thread);
+								const statusLabel = formatThreadStatus(thread);
+								const busy = isThreadBusy(thread.status);
+								return /* @__PURE__ */ jsx("li", {
+									className: "think-thread-picker__item",
+									children: /* @__PURE__ */ jsxs(Button, {
+										type: "button",
+										variant: "ghost",
+										color: "neutral",
+										size: "sm",
+										className: "think-thread-picker__thread",
+										"data-selected": thread.id === selectedId ? "true" : "false",
+										"data-status": thread.status,
+										"aria-current": thread.id === selectedId ? "page" : void 0,
+										onClick: () => onSelect(thread.id),
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "think-thread-picker__thread-title",
+											children: thread.title
+										}), statusLabel ? /* @__PURE__ */ jsx("span", {
+											className: "think-thread-picker__thread-status",
+											role: "img",
+											"aria-label": statusLabel,
+											title: statusLabel,
+											children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(DotIcon, {})
+										}) : timestamp?.date ? /* @__PURE__ */ jsx("time", {
+											className: "think-thread-picker__thread-time",
+											dateTime: timestamp.date.toISOString(),
+											title: timestamp.date.toLocaleString(),
+											children: timestamp.label
+										}) : timestamp ? /* @__PURE__ */ jsx("span", {
+											className: "think-thread-picker__thread-time",
+											children: timestamp.label
+										}) : null]
+									})
+								}, thread.id);
+							})
+						}) : /* @__PURE__ */ jsx("p", {
+							className: "think-thread-picker__empty",
+							children: "No threads yet."
+						})
+					}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+						orientation: "vertical",
+						children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {})
+					})]
+				})
+			}),
+			onCreate ? /* @__PURE__ */ jsx("div", {
+				className: "think-thread-picker__footer",
+				children: /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: "normal",
+					color: "neutral",
+					size: "sm",
+					className: "think-thread-picker__create",
+					onClick: () => void onCreate(),
+					children: [/* @__PURE__ */ jsx(PlusIcon, {}), /* @__PURE__ */ jsx("span", { children: "New thread" })]
+				})
+			}) : null
+		]
+	});
+}
+/**
+* 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.
+*/
+function ThinkThreadShell({ sidebar, sidebarOpen, defaultSidebarOpen, onSidebarOpenChange, className, children, ref, style, ...props }) {
+	const sidebarId = React.useId();
+	const [isSidebarOpen, setSidebarOpen] = useControllableSidebar({
+		sidebarOpen,
+		defaultSidebarOpen,
+		onSidebarOpenChange
+	});
+	const [sidebarWidth, setSidebarWidth] = React.useState(threadSidebarDefaultWidth);
+	const toggleLabel = isSidebarOpen ? "Hide threads" : "Show threads";
+	const rootStyle = {
+		...style,
+		"--think-thread-sidebar-w": `${sidebarWidth}px`
+	};
+	const resizeThreadSidebarBy = (delta) => {
+		setSidebarWidth((current) => clampThreadSidebarWidth(current + delta));
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("think-thread-shell", className),
+		style: rootStyle,
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "think-thread-shell__frame",
+			"data-sidebar-open": isSidebarOpen ? "true" : "false",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "think-thread-shell__toolbar",
+					role: "toolbar",
+					"aria-label": "Thread controls",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "think-thread-shell__panel-toggle",
+						children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							color: "neutral",
+							size: "icon",
+							"aria-label": toggleLabel,
+							"aria-controls": sidebarId,
+							"aria-expanded": isSidebarOpen,
+							"aria-pressed": isSidebarOpen,
+							"data-selected": isSidebarOpen,
+							onClick: () => setSidebarOpen(!isSidebarOpen),
+							children: /* @__PURE__ */ jsx(SidebarIcon, {})
+						}) }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, {
+							side: "bottom",
+							sideOffset: 6,
+							children: /* @__PURE__ */ jsx(TooltipPopup, { children: toggleLabel })
+						}) })] })
+					})
+				}),
+				isSidebarOpen ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: "separator",
+					"aria-label": "Resize threads panel",
+					"aria-orientation": "vertical",
+					"aria-valuemin": threadSidebarMinWidth,
+					"aria-valuemax": threadSidebarMaxWidth,
+					"aria-valuenow": sidebarWidth,
+					className: "think-thread-shell__resizer",
+					onPointerDown: (event) => beginThreadSidebarResize(event, sidebarWidth, setSidebarWidth),
+					onKeyDown: (event) => {
+						if (event.key === "ArrowLeft") {
+							event.preventDefault();
+							resizeThreadSidebarBy(-24);
+						} else if (event.key === "ArrowRight") {
+							event.preventDefault();
+							resizeThreadSidebarBy(threadSidebarKeyboardStep);
+						} else if (event.key === "Home") {
+							event.preventDefault();
+							setSidebarWidth(threadSidebarMinWidth);
+						} else if (event.key === "End") {
+							event.preventDefault();
+							setSidebarWidth(threadSidebarMaxWidth);
+						}
+					}
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					id: sidebarId,
+					className: "think-thread-shell__sidebar",
+					"aria-hidden": isSidebarOpen ? void 0 : true,
+					inert: isSidebarOpen ? void 0 : true,
+					children: sidebar
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "think-thread-shell__main",
+					children
+				}),
+				isSidebarOpen ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "think-thread-shell__peek",
+					"aria-label": "Show selected thread",
+					onClick: () => setSidebarOpen(false)
+				}) : null
+			]
+		})
+	});
+}
+//#endregion
+export { ThinkThreadPicker, ThinkThreadShell };

package/dist/components/WebPreview.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { O as RefreshIcon, n as ArrowLeftIcon, o as ChevronDownIcon, r as ArrowRightIcon } from "../icons-BCNawx-T.js";
+import { k as RefreshIcon, n as ArrowLeftIcon, o as ChevronDownIcon, r as ArrowRightIcon } from "../icons-D2Q5n5C1.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { Badge } from "./Badge.js";

package/dist/components/WorkspaceExplorer.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { O as RefreshIcon, k as SearchIcon, m as FileIcon, n as ArrowLeftIcon } from "../icons-BCNawx-T.js";
+import { A as SearchIcon, h as FileIcon, k as RefreshIcon, n as ArrowLeftIcon } from "../icons-D2Q5n5C1.js";
 import { Button } from "./Button.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-BK0sOAbV.js";
-import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-BWQZ0FSi.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-XNQOupQ3.js";
+import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-wMyZhhHO.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/WorkspaceExplorer.tsx
@@ -193,7 +193,8 @@ const LANGUAGE_BY_EXTENSION = {
 };
 /** Best-effort syntax-highlighting language from a file path; unknown extensions render as plain text. */
 function inferWorkspaceLanguage(path) {
-	return LANGUAGE_BY_EXTENSION[basename(path).split(".").at(-1)?.toLowerCase() ?? ""] ?? "text";
+	const extension = basename(path).split(".").at(-1)?.toLowerCase() ?? "";
+	return LANGUAGE_BY_EXTENSION[extension] ?? "text";
 }
 /**
 * A Think workspace file browser with a preview pane: lazy directory tree,

package/dist/components/icons.d.ts

@@ -1,2 +1,2 @@
-import { A as SearchIcon, C as MonitorIcon, D as PlayIcon, E as PencilIcon, F as WrenchIcon, I as XIcon, M as SquareIcon, N as TerminalIcon, O as PlusIcon, P as WarningIcon, S as MinusIcon, T as PauseIcon, _ as IconProps, a as CheckIcon, b as LinkIcon, c as ChevronRightIcon, d as DownloadIcon, f as EyeIcon, g as FolderOpenIcon, h as FolderIcon, i as ArrowUpIcon, j as SpinnerIcon, k as RefreshIcon, l as CopyIcon, m as FileIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeOffIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as ImageIcon, w as PaperclipIcon, x as MaximizeIcon, y as InfoIcon } from "../icons-BYpJY6L2.js";
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
+import { A as RefreshIcon, C as MinusIcon, D as PencilIcon, E as PauseIcon, F as TerminalIcon, I as WarningIcon, L as WrenchIcon, M as SidebarIcon, N as SpinnerIcon, O as PlayIcon, P as SquareIcon, R as XIcon, S as MaximizeIcon, T as PaperclipIcon, _ as FolderOpenIcon, a as CheckIcon, b as InfoIcon, c as ChevronRightIcon, d as DownloadIcon, f as EllipsisIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SearchIcon, k as PlusIcon, l as CopyIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as IconProps, w as MonitorIcon, x as LinkIcon, y as ImageIcon } from "../icons-CbjtbIJK.js";
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SidebarIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/components/icons.js

@@ -1,2 +1,2 @@
-import { A as SpinnerIcon, C as PaperclipIcon, D as PlusIcon, E as PlayIcon, F as XIcon, M as TerminalIcon, N as WarningIcon, O as RefreshIcon, P as WrenchIcon, S as MonitorIcon, T as PencilIcon, _ as ImageIcon, a as CheckIcon, b as MaximizeIcon, c as ChevronRightIcon, d as DownloadIcon, f as EyeIcon, g as FolderOpenIcon, h as FolderIcon, i as ArrowUpIcon, j as SquareIcon, k as SearchIcon, l as CopyIcon, m as FileIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeOffIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as InfoIcon, w as PauseIcon, x as MinusIcon, y as LinkIcon } from "../icons-BCNawx-T.js";
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
+import { A as SearchIcon, C as MonitorIcon, D as PlayIcon, E as PencilIcon, F as WarningIcon, I as WrenchIcon, L as XIcon, M as SpinnerIcon, N as SquareIcon, O as PlusIcon, P as TerminalIcon, S as MinusIcon, T as PauseIcon, _ as FolderOpenIcon, a as CheckIcon, b as LinkIcon, c as ChevronRightIcon, d as DownloadIcon, f as EllipsisIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SidebarIcon, k as RefreshIcon, l as CopyIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as ImageIcon, w as PaperclipIcon, x as MaximizeIcon, y as InfoIcon } from "../icons-D2Q5n5C1.js";
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SidebarIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };