@mcp-b/react-components 0.42.0 → 0.43.0

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

@@ -0,0 +1,656 @@
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { $ as WarningIcon, C as FolderIcon, G as SlackIcon, I as PaperclipIcon, K as SpinnerIcon, R as PencilIcon, S as FileIcon, T as InfoIcon, V as QueueIcon, Z as TerminalIcon, b as EyeIcon, c as BoxIcon, g as DiscordIcon, k as McpIcon, o as ArrowUpRightIcon, q as SquareIcon, r as ArrowLeftIcon, y as EllipsisIcon } from "../../icons-CVFSeTJn.js";
+import { Button } from "../foundations/Button.js";
+import { Tooltip } from "../foundations/Tooltip.js";
+import { Menu } from "../foundations/Menu.js";
+import { Dialog } from "../foundations/Dialog.js";
+import { ChatGptSignInScreen } from "../extension/ChatGptSignInScreen.js";
+import { Avatar } from "../foundations/Avatar.js";
+import { EmptyState } from "../foundations/EmptyState.js";
+import { AppIcon } from "../foundations/AppIcon.js";
+import "../foundations/icons.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
+import { DescriptionList } from "../foundations/DescriptionList.js";
+import { McpServerPickerAction, McpServerPickerItems } from "./McpServerPicker.js";
+import { NaniteMark } from "../nanites/NaniteScene.js";
+import { getThinkExecutionRunId } from "./ThinkExecutionRun.js";
+import { ThinkThreadPicker, summarizeThinkThreads } from "./ThinkThreadPicker.js";
+import { ThinkFullApp } from "./ThinkFullApp.js";
+import { Switch } from "../foundations/Switch.js";
+import { ThinkRoutineLibrary } from "./ThinkRoutineLibrary.js";
+import { ActionGuide } from "../general-purpose/ActionGuide.js";
+import { t as SetupChecklistAction } from "../../SetupChecklist-H1JRCIIe.js";
+import { useTheme } from "../foundations/ThemeProvider.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/agents-sdk/ThinkSidepanel.tsx
+const EMPTY_THREADS = [];
+function AppearanceMenu() {
+	const { preference, setPreference } = useTheme();
+	return /* @__PURE__ */ jsxs(Menu.RadioGroup, {
+		value: preference,
+		onValueChange: (value) => {
+			if (value === "light" || value === "dark" || value === "system") setPreference(value);
+		},
+		children: [
+			/* @__PURE__ */ jsxs(Menu.RadioItem, {
+				value: "light",
+				children: [/* @__PURE__ */ jsx(Menu.RadioItemIndicator, {}), "Light"]
+			}),
+			/* @__PURE__ */ jsxs(Menu.RadioItem, {
+				value: "dark",
+				children: [/* @__PURE__ */ jsx(Menu.RadioItemIndicator, {}), "Dark"]
+			}),
+			/* @__PURE__ */ jsxs(Menu.RadioItem, {
+				value: "system",
+				children: [/* @__PURE__ */ jsx(Menu.RadioItemIndicator, {}), "System"]
+			})
+		]
+	});
+}
+function MenuGroupLabel({ hint, label }) {
+	return /* @__PURE__ */ jsxs(Menu.GroupLabel, {
+		className: "think-sidepanel__menu-group-label",
+		children: [label, /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+			render: /* @__PURE__ */ jsx("span", { className: "think-sidepanel__menu-hint" }),
+			children: /* @__PURE__ */ jsx(InfoIcon, {})
+		}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: hint }) }) })] })]
+	});
+}
+function OverflowMenu({ companion, follow, identityEmail, onIdentity, onModel, onSignOut, passkeyVault, renderLink }) {
+	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
+		label: "More actions",
+		tooltip: identityEmail ? `Signed in as ${identityEmail}` : void 0,
+		render: /* @__PURE__ */ jsx(Menu.Trigger, {}),
+		children: identityEmail ? /* @__PURE__ */ jsx(Avatar.Root, {
+			size: "sm",
+			children: /* @__PURE__ */ jsx(Avatar.Fallback, { children: identityEmail[0]?.toUpperCase() })
+		}) : /* @__PURE__ */ jsx(EllipsisIcon, {})
+	}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		side: "bottom",
+		align: "end",
+		sideOffset: 4,
+		children: /* @__PURE__ */ jsxs(Menu.Popup, { children: [
+			/* @__PURE__ */ jsxs(Menu.Item, {
+				render: renderLink({
+					kind: "view",
+					view: "files"
+				}),
+				children: [/* @__PURE__ */ jsx(FileIcon, {}), "Files"]
+			}),
+			/* @__PURE__ */ jsxs(Menu.Item, {
+				render: renderLink({
+					kind: "view",
+					view: "plugins"
+				}),
+				children: [/* @__PURE__ */ jsx(BoxIcon, {}), "Plugins"]
+			}),
+			/* @__PURE__ */ jsxs(Menu.Item, {
+				render: renderLink({
+					kind: "view",
+					view: "schedules"
+				}),
+				children: [/* @__PURE__ */ jsx(QueueIcon, {}), "Routines"]
+			}),
+			follow ? /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+				checked: follow.followed,
+				onCheckedChange: follow.onCheckedChange,
+				children: [/* @__PURE__ */ jsx(EyeIcon, {}), "Follow this conversation"]
+			}) : null,
+			onIdentity ? /* @__PURE__ */ jsxs(Menu.Item, {
+				onClick: onIdentity,
+				children: [/* @__PURE__ */ jsx(InfoIcon, {}), "Identity"]
+			}) : null,
+			onModel ? /* @__PURE__ */ jsxs(Menu.Item, {
+				onClick: onModel,
+				children: [/* @__PURE__ */ jsx(TerminalIcon, {}), "Model"]
+			}) : null,
+			companion ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Menu.Separator, {}), /* @__PURE__ */ jsxs(Menu.Group, { children: [
+				/* @__PURE__ */ jsx(MenuGroupLabel, {
+					label: "Companion app",
+					hint: "Connecting lets this employee chat with the browser and watch it work from anywhere."
+				}),
+				/* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+					className: "think-sidepanel__menu-switch-item",
+					checked: companion.enabled,
+					onCheckedChange: companion.setEnabled,
+					children: ["Connect this browser", /* @__PURE__ */ jsx(Switch.Root, {
+						"aria-hidden": true,
+						readOnly: true,
+						size: "sm",
+						checked: companion.enabled,
+						children: /* @__PURE__ */ jsx(Switch.Thumb, {})
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Menu.Item, {
+					render: /* @__PURE__ */ jsx("a", {
+						href: companion.origin,
+						target: "_blank",
+						rel: "noreferrer",
+						"aria-label": companion.origin.replace(/^https?:\/\//, "")
+					}),
+					children: [/* @__PURE__ */ jsx(ArrowUpRightIcon, {}), companion.origin.replace(/^https?:\/\//, "")]
+				})
+			] })] }) : null,
+			passkeyVault ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Menu.Separator, {}), /* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, {
+				label: "Passkeys",
+				hint: "The employee saves and uses its own passkeys instead of the browser's."
+			}), /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+				className: "think-sidepanel__menu-switch-item",
+				checked: passkeyVault.enabled,
+				onCheckedChange: passkeyVault.setEnabled,
+				children: ["Use its own passkeys", /* @__PURE__ */ jsx(Switch.Root, {
+					"aria-hidden": true,
+					readOnly: true,
+					size: "sm",
+					checked: passkeyVault.enabled,
+					children: /* @__PURE__ */ jsx(Switch.Thumb, {})
+				})]
+			})] })] }) : null,
+			/* @__PURE__ */ jsx(Menu.Separator, {}),
+			/* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(Menu.GroupLabel, { children: "Appearance" }), /* @__PURE__ */ jsx(AppearanceMenu, {})] }),
+			onSignOut ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Menu.Separator, {}), /* @__PURE__ */ jsxs(Menu.Item, {
+				onClick: onSignOut,
+				children: [/* @__PURE__ */ jsx(ArrowUpRightIcon, {}), "Sign out"]
+			})] }) : null
+		] })
+	}) })] });
+}
+function GateScreen({ brand, connectingLabel, identity, modelSetup, status }) {
+	if (status === "connecting") return /* @__PURE__ */ jsx("div", {
+		className: "think-sidepanel__gate",
+		role: "status",
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			icon: /* @__PURE__ */ jsx(SpinnerIcon, {}),
+			description: connectingLabel ?? "Connecting…"
+		})
+	});
+	if (status === "offline") return /* @__PURE__ */ jsx("main", {
+		className: "think-sidepanel__gate",
+		role: "status",
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			icon: /* @__PURE__ */ jsx(WarningIcon, {}),
+			title: `${brand.name} is offline`,
+			description: "Open the browser and turn the companion connection on. This screen reconnects on its own."
+		})
+	});
+	if (status === "identity-blocked" && identity) return /* @__PURE__ */ jsxs("div", {
+		className: "think-sidepanel__gate",
+		role: "alert",
+		children: [/* @__PURE__ */ jsx(EmptyState, {
+			icon: /* @__PURE__ */ jsx(WarningIcon, {}),
+			title: "Wrong browser profile",
+			description: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("p", { children: [
+				"This installation is assigned to ",
+				/* @__PURE__ */ jsx("strong", { children: identity.assignedAccount }),
+				", but the live profile is ",
+				/* @__PURE__ */ jsx("strong", { children: identity.liveProfile }),
+				"."
+			] }), /* @__PURE__ */ jsx("p", { children: identity.managed ? "Open the assigned profile. Organization policy controls this assignment." : "Open the assigned profile, or remove the binding." })] })
+		}), identity.managed || !identity.onUnbind ? null : /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			color: "destructive",
+			onClick: identity.onUnbind,
+			children: "Remove binding"
+		})]
+	});
+	if (status === "needs-model") return /* @__PURE__ */ jsx(ChatGptSignInScreen, {
+		busy: modelSetup?.busy,
+		error: modelSetup?.error,
+		label: modelSetup?.label,
+		title: `Meet ${brand.name}`,
+		brandName: "SigVelo",
+		brandLogo: brand.logo,
+		onSignIn: modelSetup?.onSignIn,
+		secondaryAction: modelSetup?.onCustomEndpoint ? {
+			label: "Set up a custom model endpoint",
+			onSelect: modelSetup.onCustomEndpoint
+		} : void 0
+	});
+	return null;
+}
+function IdentityDialog({ identity, onOpenChange, open }) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Viewport, { children: /* @__PURE__ */ jsxs(Dialog.Popup, { children: [
+			/* @__PURE__ */ jsxs(Dialog.Header, { children: [/* @__PURE__ */ jsx(Dialog.Title, { children: "Operating identity" }), /* @__PURE__ */ jsx(Dialog.Description, { children: "This employee operates the live browser profile as its own identity. Assigning the account keeps it from signing in with another profile." })] }),
+			/* @__PURE__ */ jsxs(DescriptionList.Root, {
+				variant: "divided",
+				children: [/* @__PURE__ */ jsxs(DescriptionList.Item, { children: [/* @__PURE__ */ jsx(DescriptionList.Term, { children: "Live profile" }), /* @__PURE__ */ jsx(DescriptionList.Details, { children: identity.liveProfile })] }), /* @__PURE__ */ jsxs(DescriptionList.Item, { children: [/* @__PURE__ */ jsx(DescriptionList.Term, { children: "Assigned account" }), /* @__PURE__ */ jsx(DescriptionList.Details, { children: identity.managed ? `${identity.assignedAccount} (managed by your organization)` : identity.assignedAccount })] })]
+			}),
+			/* @__PURE__ */ jsx(Dialog.Footer, { children: identity.managed ? /* @__PURE__ */ jsx("p", { children: "Organization policy controls this binding." }) : identity.onUnbind && identity.assignedAccount ? /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				color: "destructive",
+				onClick: () => {
+					Promise.resolve(identity.onUnbind?.()).then(() => onOpenChange(false));
+				},
+				children: "Remove binding"
+			}) : /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				color: "primary",
+				disabled: !identity.canBind || !identity.onBind,
+				onClick: () => {
+					Promise.resolve(identity.onBind?.()).then(() => onOpenChange(false));
+				},
+				children: "Assign this profile"
+			}) })
+		] }) })] })
+	});
+}
+function CapabilityGuide({ brandName, start }) {
+	const send = (text) => void start.onSubmit({
+		text,
+		files: []
+	});
+	return /* @__PURE__ */ jsx(ActionGuide, {
+		title: `${brandName} can work across your browser.`,
+		description: "They can act in signed-in tabs, keep workspace files, connect plugins, and run recurring work after this panel closes.",
+		sections: [
+			{
+				id: "quick-browser-job",
+				title: "Start with a quick browser job",
+				layout: "compact",
+				actions: [{
+					id: "organize-tabs",
+					icon: /* @__PURE__ */ jsx(BoxIcon, {}),
+					label: "Organize this window’s tabs by task"
+				}, {
+					id: "close-duplicate-tabs",
+					icon: /* @__PURE__ */ jsx(EyeIcon, {}),
+					label: "Close duplicate tabs in this window"
+				}]
+			},
+			{
+				id: "ongoing-work",
+				title: "Set up ongoing work",
+				layout: "cards",
+				actions: [
+					{
+						id: "create-routine",
+						icon: /* @__PURE__ */ jsx(QueueIcon, {}),
+						label: "Create a recurring task"
+					},
+					...start.slack && !start.slack.configured ? [{
+						id: "connect-slack",
+						icon: /* @__PURE__ */ jsx(SlackIcon, {}),
+						label: "Connect Slack"
+					}] : [],
+					...start.discord && !start.discord.configured ? [{
+						id: "connect-discord",
+						icon: /* @__PURE__ */ jsx(DiscordIcon, {}),
+						label: "Connect Discord"
+					}] : [],
+					...start.onAttachFolder ? [{
+						id: "attach-local-folder",
+						icon: /* @__PURE__ */ jsx(FolderIcon, {}),
+						label: "Attach a local folder"
+					}] : [],
+					{
+						id: "connections",
+						icon: /* @__PURE__ */ jsx(McpIcon, {}),
+						label: start.hasConnectedApps ? "Use my connected apps" : "Connect another app"
+					}
+				]
+			},
+			{
+				id: "larger-workflow",
+				title: "Build a larger workflow",
+				layout: "list",
+				actions: [
+					{
+						id: "automate-browser",
+						icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
+						label: "Automate work across signed-in tabs",
+						variant: "ghost"
+					},
+					{
+						id: "move-workspace-files",
+						icon: /* @__PURE__ */ jsx(FolderIcon, {}),
+						label: "Move files between a website and the workspace",
+						variant: "ghost"
+					},
+					{
+						id: "record-browser-workflow",
+						icon: /* @__PURE__ */ jsx(EyeIcon, {}),
+						label: "Record a browser workflow as an MP4",
+						variant: "ghost"
+					}
+				]
+			}
+		],
+		onAction: (action) => {
+			switch (action.id) {
+				case "organize-tabs": return send("Organize this window’s tabs by task.");
+				case "close-duplicate-tabs": return send("Close duplicate tabs in this window.");
+				case "create-routine": return send("Help me create a recurring task that runs on a schedule.");
+				case "connect-slack": return start.slack?.onSelect();
+				case "connect-discord": return start.discord?.onSelect();
+				case "connections": return send(start.hasConnectedApps ? "Show me useful work I can do across my connected apps." : "Help me connect another app I use.");
+				case "automate-browser": return send("Automate a workflow across my signed-in browser tabs.");
+				case "move-workspace-files": return send("Move files between a signed-in website and the workspace.");
+				case "record-browser-workflow": return send("Record a browser workflow as an MP4.");
+				case "attach-local-folder": return start.onAttachFolder?.();
+			}
+		}
+	});
+}
+function StartComposerTray({ plugins, renderLink, start }) {
+	const hasPluginMenu = Boolean(plugins || start.slack || start.discord);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		start.personalization ? /* @__PURE__ */ jsx(SetupChecklistAction, {
+			actionLabel: "Prompts",
+			label: "Prompts",
+			entries: start.personalization.entries,
+			onSelect: start.personalization.onSelect
+		}) : null,
+		start.onAttachFolder ? /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "ghost",
+			color: "neutral",
+			size: "md",
+			disabled: start.attachFolderBusy,
+			onClick: start.onAttachFolder,
+			"aria-label": "Connect a local folder",
+			children: [/* @__PURE__ */ jsx(PaperclipIcon, {}), /* @__PURE__ */ jsx("span", { children: "Connect a local folder" })]
+		}) : null,
+		hasPluginMenu ? /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "ghost",
+			color: "neutral",
+			size: "md",
+			render: /* @__PURE__ */ jsx(Menu.Trigger, { unstyled: true }),
+			"aria-label": "Connect plugins",
+			children: [/* @__PURE__ */ jsx("span", { children: "Connect plugins" }), /* @__PURE__ */ jsxs(AppIcon.Stack, {
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ jsx(AppIcon.Root, {
+					size: "sm",
+					variant: "surface",
+					children: /* @__PURE__ */ jsx(SlackIcon, {})
+				}), /* @__PURE__ */ jsx(AppIcon.Root, {
+					size: "sm",
+					variant: "surface",
+					children: /* @__PURE__ */ jsx(DiscordIcon, {})
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+			side: "bottom",
+			align: "start",
+			sideOffset: 4,
+			children: /* @__PURE__ */ jsxs(Menu.Popup, {
+				"aria-label": "Plugins",
+				"data-recipe": "wide-scroll-picker",
+				children: [/* @__PURE__ */ jsx(McpServerPickerItems, {
+					actions: [...start.discord ? [{
+						id: "discord",
+						icon: /* @__PURE__ */ jsx(DiscordIcon, {}),
+						label: start.discord.configured ? "Discord" : "Connect Discord",
+						description: start.discord.description ?? (start.discord.configured ? "Connected" : "Talk to this employee from Discord"),
+						onSelect: start.discord.onSelect
+					}] : [], ...start.slack ? [{
+						id: "slack",
+						icon: /* @__PURE__ */ jsx(SlackIcon, {}),
+						label: start.slack.configured ? "Slack" : "Connect Slack",
+						description: start.slack.description ?? (start.slack.configured ? "Connected" : "Talk to this employee from Slack"),
+						onSelect: start.slack.onSelect
+					}] : []],
+					servers: plugins?.servers ?? [],
+					mcp: plugins?.mcp,
+					onConnect: plugins?.onConnect,
+					onDisconnect: plugins?.onDisconnect
+				}), /* @__PURE__ */ jsx(McpServerPickerAction, {
+					icon: /* @__PURE__ */ jsx(BoxIcon, {}),
+					label: "Browse plugins",
+					description: plugins?.onConnect ? "Find and connect supported tools" : "See what this browser is connected to",
+					render: renderLink({
+						kind: "view",
+						view: "plugins"
+					})
+				})]
+			})
+		}) })] }) : null
+	] });
+}
+function startStarters(brandName, start, onShowGuide) {
+	return {
+		"aria-label": "Suggested prompts",
+		items: [
+			{
+				id: "capability-guide",
+				label: `See what ${brandName} can do`,
+				icon: /* @__PURE__ */ jsx(InfoIcon, {}),
+				muted: true
+			},
+			...start.suggestionsError ? [{
+				id: "retry-suggestions",
+				label: "Try generating suggestions again",
+				icon: /* @__PURE__ */ jsx(InfoIcon, {}),
+				muted: true
+			}] : [],
+			...start.suggestions?.map((suggestion, index) => ({
+				id: `suggestion:${index}:${suggestion.value}:${suggestion.label}`,
+				label: suggestion.label,
+				icon: suggestion.value.startsWith("/") ? /* @__PURE__ */ jsx(BoxIcon, {}) : suggestion.value.startsWith("@") ? /* @__PURE__ */ jsx(McpIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+			})) ?? []
+		],
+		onSelect: (item) => {
+			if (item.id === "capability-guide") {
+				onShowGuide();
+				return;
+			}
+			if (item.id === "retry-suggestions") {
+				start.onRetrySuggestions?.();
+				return;
+			}
+			const suggestion = start.suggestions?.find((candidate, index) => item.id === `suggestion:${index}:${candidate.value}:${candidate.label}`);
+			if (suggestion) start.onSubmit({
+				text: suggestion.value,
+				files: []
+			});
+		}
+	};
+}
+function BackToChat({ renderLink }) {
+	return /* @__PURE__ */ jsx(AppTopBar.Link, {
+		label: "Back to chat",
+		render: renderLink({
+			kind: "view",
+			view: "chat"
+		}),
+		children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+	});
+}
+function employeeMessages({ agentRun, brandName, guideOpen, hasConversation, hostMessages, onShowGuide, plugins, renderLink, start }) {
+	const onSubmit = hostMessages?.draft?.onSubmit ?? start?.onSubmit;
+	const draft = hasConversation ? hostMessages?.draft : onSubmit ? {
+		messages: hostMessages?.draft?.messages ?? [],
+		onSubmit,
+		status: hostMessages?.draft?.status
+	} : hostMessages?.draft;
+	return {
+		placeholder: "How can I help you today?",
+		approvalsEnabled: false,
+		...hostMessages,
+		startScreen: start ? {
+			lead: guideOpen ? /* @__PURE__ */ jsx(CapabilityGuide, {
+				brandName,
+				start
+			}) : void 0,
+			composerTray: /* @__PURE__ */ jsx(StartComposerTray, {
+				plugins,
+				renderLink,
+				start
+			}),
+			starters: guideOpen ? void 0 : startStarters(brandName, start, onShowGuide)
+		} : hostMessages?.startScreen,
+		draft,
+		showComposer: agentRun ? false : hostMessages?.showComposer
+	};
+}
+/**
+* The employee side panel: icon-and-tooltip chrome, start screen, schedules,
+* conversation plus workbench. Hosts hydrate conversation, workspace,
+* plugins, and callables. Storybook is the place to iterate the chrome.
+*/
+function ThinkSidepanel({ agentRun, appBarLeading, brand, className, companion, connectingLabel, conversation, follow, identity, live, messages, modelSetup, onDeleteThread, onModel, onSignOut, passkeyVault, plugins, renderLink, schedules, sourceKey, start, status = "ready", thread, threads = EMPTY_THREADS, view, workspace, ...props }) {
+	const [identityOpen, setIdentityOpen] = React.useState(false);
+	const [guideOpen, setGuideOpen] = React.useState(false);
+	if (status !== "ready") return /* @__PURE__ */ jsx("div", {
+		className: cx("think-sidepanel", className),
+		"data-status": status,
+		...props,
+		children: /* @__PURE__ */ jsx(GateScreen, {
+			brand,
+			connectingLabel,
+			identity,
+			modelSetup,
+			status
+		})
+	});
+	const overflow = /* @__PURE__ */ jsx(OverflowMenu, {
+		companion,
+		follow: thread && !agentRun ? follow : void 0,
+		identityEmail: identity?.email,
+		onIdentity: identity ? () => setIdentityOpen(true) : void 0,
+		onModel,
+		onSignOut,
+		passkeyVault,
+		renderLink
+	});
+	const identityDialog = identity ? /* @__PURE__ */ jsx(IdentityDialog, {
+		identity,
+		open: identityOpen,
+		onOpenChange: setIdentityOpen
+	}) : null;
+	const newThread = thread && !agentRun ? /* @__PURE__ */ jsx(AppTopBar.Link, {
+		label: "New thread",
+		render: renderLink({ kind: "new-thread" }),
+		children: /* @__PURE__ */ jsx(PencilIcon, {})
+	}) : void 0;
+	const chatLeading = newThread || view === "chat" && appBarLeading ? /* @__PURE__ */ jsxs(Fragment, { children: [newThread, view === "chat" ? appBarLeading : null] }) : void 0;
+	const chatMessages = employeeMessages({
+		agentRun,
+		brandName: brand.name,
+		guideOpen,
+		hasConversation: Boolean(conversation),
+		hostMessages: messages,
+		onShowGuide: () => setGuideOpen(true),
+		plugins,
+		renderLink,
+		start
+	});
+	if (view === "live") return /* @__PURE__ */ jsxs("div", {
+		className: cx("think-sidepanel", className),
+		"data-view": "live",
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "think-sidepanel__live",
+			children: [/* @__PURE__ */ jsxs(AppTopBar.Root, {
+				"aria-label": "Live view controls",
+				children: [/* @__PURE__ */ jsx(AppTopBar.Leading, { children: /* @__PURE__ */ jsx(BackToChat, { renderLink }) }), /* @__PURE__ */ jsx(AppTopBar.Title, { children: "Live view" })]
+			}), live]
+		}), identityDialog]
+	});
+	if (view === "schedules") return /* @__PURE__ */ jsxs("div", {
+		className: cx("think-sidepanel", className),
+		"data-view": "schedules",
+		...props,
+		children: [schedules?.editor ? /* @__PURE__ */ jsx("div", {
+			className: "think-sidepanel__editor",
+			children: schedules.editor
+		}) : schedules ? /* @__PURE__ */ jsx(ThinkRoutineLibrary, {
+			bar: {
+				leading: /* @__PURE__ */ jsx(BackToChat, { renderLink }),
+				primary: overflow
+			},
+			routines: schedules.routines,
+			showOwner: false,
+			selectedRoutineId: schedules.selectedRoutineId,
+			error: schedules.error,
+			renderRoutineLink: (routine) => renderLink({
+				kind: "routine",
+				routineId: routine.id
+			}),
+			createRoutineLink: renderLink({ kind: "create-routine" }),
+			renderEditRoutineLink: (routine) => renderLink({
+				kind: "edit-routine",
+				routineId: routine.id
+			}),
+			renderRunLink: (routine, run) => renderLink({
+				kind: "routine-run",
+				routineId: routine.id,
+				runId: getThinkExecutionRunId(run)
+			}),
+			onRunRoutine: schedules.onRunRoutine,
+			onRoutineEnabledChange: schedules.onRoutineEnabledChange,
+			onDeleteRoutine: schedules.onDeleteRoutine
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "think-sidepanel__gate",
+			children: /* @__PURE__ */ jsx(EmptyState, {
+				title: "Schedules",
+				description: "No schedules to show."
+			})
+		}), identityDialog]
+	});
+	const workbenchView = view === "plugins" ? "plugins" : view === "files" ? "files" : "chat";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("think-sidepanel", className),
+		"data-view": view,
+		...props,
+		children: [/* @__PURE__ */ jsx(ThinkFullApp, {
+			conversation,
+			renderAgentToolRunLink: (run) => renderLink({
+				kind: "agent-run",
+				runId: run.runId
+			}),
+			bar: {
+				title: agentRun ? /* @__PURE__ */ jsxs("span", {
+					className: "think-sidepanel__run-title",
+					children: [/* @__PURE__ */ jsx(NaniteMark, {}), /* @__PURE__ */ jsx("span", {
+						className: "sigvelo-truncate",
+						children: agentRun.title
+					})]
+				}) : thread?.title ?? "New chat",
+				leading: agentRun ? /* @__PURE__ */ jsx(AppTopBar.Link, {
+					label: "Back to parent conversation",
+					render: thread ? renderLink({
+						kind: "thread",
+						threadId: thread.id
+					}) : renderLink({
+						kind: "view",
+						view: "chat"
+					}),
+					children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+				}) : chatLeading,
+				compactLeading: !agentRun && (view === "files" || view === "plugins") ? /* @__PURE__ */ jsx(BackToChat, { renderLink }) : void 0,
+				actions: agentRun?.running && agentRun.onCancel ? /* @__PURE__ */ jsx(AppTopBar.Button, {
+					label: "Cancel run",
+					onClick: agentRun.onCancel,
+					children: /* @__PURE__ */ jsx(SquareIcon, {})
+				}) : void 0,
+				primary: overflow,
+				views: null
+			},
+			threadStatusSummary: agentRun ? void 0 : summarizeThinkThreads(threads),
+			sourceKey,
+			workspace: agentRun ? void 0 : workspace,
+			plugins: agentRun ? void 0 : plugins,
+			view: workbenchView,
+			threadSidebar: agentRun ? void 0 : ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ThinkThreadPicker, {
+				threads,
+				renderThreadLink: (item) => renderLink({
+					kind: "thread",
+					threadId: item.id
+				}),
+				createThreadLink: renderLink({ kind: "new-thread" }),
+				onSelect: closeSidebarOnCompact,
+				onDelete: onDeleteThread
+			}),
+			messages: chatMessages
+		}), identityDialog]
+	});
+}
+//#endregion
+export { ThinkSidepanel };

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

@@ -42,11 +42,10 @@ interface ThinkThreadPickerProps extends Omit<React.HTMLAttributes<HTMLElement>,
    */
   renderThreadLink: (thread: ThinkThreadItem) => React.ReactElement;
   /**
-   * Optional create action. An app whose threads are minted by their first
-   * message should navigate to its new-thread screen here rather than create
-   * one: a thread created on click is an empty thread until someone writes in it.
+   * App-authored TanStack Router Link to the new-thread screen. A thread
+   * created on click is an empty thread until someone writes in it.
    */
-  onCreate?: () => void | Promise<void>;
+  createThreadLink?: React.ReactElement;
   /**
    * Notified on unmodified primary activation. The link still navigates — the
    * route is the selection — so this is for side effects such as closing a
@@ -77,7 +76,7 @@ declare function ThinkThreadStatusIndicators({
 declare function ThinkThreadPicker({
   threads,
   renderThreadLink,
-  onCreate,
+  createThreadLink,
   onSelect,
   onDelete,
   className,