@mcp-b/react-components 0.51.2 → 0.52.0

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

@@ -1,14 +1,17 @@
 import { findCatalogMcpServerCard } from "../../utils/mcp-server-catalog.js";
-import { A as McpIcon, C as FolderIcon, K as SpinnerIcon, R as PencilIcon, S as FileIcon, T as InfoIcon, V as QueueIcon, Z as TerminalIcon, b as EyeIcon, c as BoxIcon, et as WarningIcon, o as ArrowUpRightIcon, q as SquareIcon, r as ArrowLeftIcon, y as EllipsisIcon } from "../../icons-cuEtsgj9.js";
+import { A as McpIcon, C as FolderIcon, F as MoonIcon, K as SpinnerIcon, P as MonitorIcon, R as PencilIcon, S as FileIcon, T as InfoIcon, V as QueueIcon, W as SidebarIcon, Y as SunIcon, Z as TerminalIcon, b as EyeIcon, c as BoxIcon, et as WarningIcon, o as ArrowUpRightIcon, q as SquareIcon, r as ArrowLeftIcon, y as EllipsisIcon } from "../../icons-cuEtsgj9.js";
 import { Button } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
+import { IconButton } from "../foundations/IconButton.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import { SubagentRunLabel, getSubagentRunName } from "./SubagentRunIndicator.js";
 import { Menu } from "../foundations/Menu.js";
-import { EmptyState } from "../foundations/EmptyState.js";
+import { BrandLoading } from "../general-purpose/BrandLoading.js";
 import { AgentChat } from "./AgentChat.js";
-import "../foundations/icons.js";
+import { EmptyState } from "../foundations/EmptyState.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
+import { n as isPlainPrimaryLinkActivation } from "../../navigation-link-kqMa81v5.js";
 import { AgentChatStartScreen, AgentChatStartScreenComposer, AgentChatStartScreenPrimary, AgentChatStartScreenSuggestions, AgentChatStartScreenTray, AgentChatStarterList } from "../ai-sdk/AgentChatStartScreen.js";
 import { ChatGptSignInScreen } from "../extension/ChatGptSignInScreen.js";
 import { Avatar } from "../foundations/Avatar.js";
@@ -16,7 +19,6 @@ import { DescriptionList } from "../foundations/DescriptionList.js";
 import { Switch } from "../foundations/Switch.js";
 import { useTheme } from "../foundations/ThemeProvider.js";
 import { ActionGuide, ActionGuideAction, ActionGuideList, ActionGuideSection } from "../general-purpose/ActionGuide.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { ResponsiveSidebarShell, useResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
 import { McpServerIcon } from "./McpServerIcon.js";
 import { ThinkThreadPicker } from "./ThinkThreadPicker.js";
@@ -32,24 +34,13 @@ const WORKBENCH_NAVIGATION = [{
 	label: "Plugins",
 	icon: /* @__PURE__ */ jsx(BoxIcon, {})
 }];
-function MenuGroupLabel({ label, hint }) {
-	return /* @__PURE__ */ jsxs(Menu.GroupLabel, {
-		className: "employee-menu__group-label",
-		children: [label, /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
-			render: /* @__PURE__ */ jsx("span", {
-				className: "employee-menu__hint",
-				tabIndex: 0,
-				"aria-label": label + " help"
-			}),
-			children: /* @__PURE__ */ jsx(InfoIcon, { "aria-hidden": "true" })
-		}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: hint }) }) })] })]
-	});
-}
-function MenuSwitchItem({ label, checked, onCheckedChange }) {
-	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
-		className: "employee-menu__switch",
-		checked,
-		onCheckedChange,
+function MenuSwitchItem({ label, hint, checked, onCheckedChange }) {
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsxs(Tooltip.Trigger, {
+		render: /* @__PURE__ */ jsx(Menu.CheckboxItem, {
+			className: "employee-menu__switch",
+			checked,
+			onCheckedChange
+		}),
 		children: [label, /* @__PURE__ */ jsx(Switch.Root, {
 			"aria-hidden": true,
 			tabIndex: -1,
@@ -58,11 +49,11 @@ function MenuSwitchItem({ label, checked, onCheckedChange }) {
 			checked,
 			children: /* @__PURE__ */ jsx(Switch.Thumb, {})
 		})]
-	});
+	}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: hint }) }) })] });
 }
 /** Employee settings are host-owned state; the menu stores only dialog visibility. */
-function EmployeeMenu({ renderLink, identity, onModel, onSignOut, companion, passkeys, follow, workbenchNavigation = [] }) {
-	const { compact } = useResponsiveSidebarShell();
+function EmployeeMenu({ renderLink, view = "chat", identity, onModel, onSignOut, companion, passkeys, follow, workbenchNavigation = [], navigation }) {
+	const { contentCompact: compact } = useResponsiveSidebarShell();
 	const { preference, setPreference } = useTheme();
 	const [identityOpen, setIdentityOpen] = React.useState(false);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
@@ -78,10 +69,10 @@ function EmployeeMenu({ renderLink, identity, onModel, onSignOut, companion, pas
 		align: "end",
 		sideOffset: 4,
 		children: /* @__PURE__ */ jsxs(Menu.Popup, { children: [
-			compact ? [...WORKBENCH_NAVIGATION, ...workbenchNavigation].map((item) => /* @__PURE__ */ jsxs(Menu.Item, {
+			compact ? (navigation ?? [...WORKBENCH_NAVIGATION, ...workbenchNavigation]).map((item) => /* @__PURE__ */ jsxs(Menu.Item, {
 				render: renderLink({
 					kind: "view",
-					view: item.id
+					view: view === item.id ? "chat" : item.id
 				}),
 				children: [item.icon, item.label]
 			}, item.id)) : null,
@@ -106,12 +97,10 @@ function EmployeeMenu({ renderLink, identity, onModel, onSignOut, companion, pas
 				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__ */ jsx(Menu.GroupLabel, { children: "Companion app" }),
 				/* @__PURE__ */ jsx(MenuSwitchItem, {
 					label: "Connect this browser",
+					hint: "Connecting lets this employee chat with the browser and watch it work from anywhere.",
 					checked: companion.enabled,
 					onCheckedChange: companion.setEnabled
 				}),
@@ -125,35 +114,58 @@ function EmployeeMenu({ renderLink, identity, onModel, onSignOut, companion, pas
 					children: [/* @__PURE__ */ jsx(ArrowUpRightIcon, {}), companion.origin.replace(/^https?:\/\//, "")]
 				})
 			] })] }) : null,
-			passkeys ? /* @__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__ */ jsx(MenuSwitchItem, {
+			passkeys ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Menu.Separator, {}), /* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(Menu.GroupLabel, { children: "Passkeys" }), /* @__PURE__ */ jsx(MenuSwitchItem, {
 				label: "Use its own passkeys",
+				hint: "The employee saves and uses its own passkeys instead of the browser's.",
 				checked: passkeys.enabled,
 				onCheckedChange: passkeys.setEnabled
 			})] })] }) : null,
 			/* @__PURE__ */ jsx(Menu.Separator, {}),
-			/* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(Menu.GroupLabel, { children: "Appearance" }), /* @__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"]
-					})
-				]
-			})] }),
+			/* @__PURE__ */ jsxs(Menu.Group, {
+				className: "employee-menu__appearance",
+				children: [/* @__PURE__ */ jsx(Menu.GroupLabel, { children: "Appearance" }), /* @__PURE__ */ jsxs(Menu.RadioGroup, {
+					className: "employee-menu__theme-options",
+					value: preference,
+					onValueChange: (value) => {
+						if (value === "light" || value === "dark" || value === "system") setPreference(value);
+					},
+					children: [
+						/* @__PURE__ */ jsxs(Menu.RadioItem, {
+							value: "light",
+							className: "employee-menu__theme-option",
+							"aria-label": "Light",
+							title: "Light",
+							closeOnClick: false,
+							children: [/* @__PURE__ */ jsx(SunIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+								className: "sigvelo-visually-hidden",
+								children: "Light"
+							})]
+						}),
+						/* @__PURE__ */ jsxs(Menu.RadioItem, {
+							value: "dark",
+							className: "employee-menu__theme-option",
+							"aria-label": "Dark",
+							title: "Dark",
+							closeOnClick: false,
+							children: [/* @__PURE__ */ jsx(MoonIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+								className: "sigvelo-visually-hidden",
+								children: "Dark"
+							})]
+						}),
+						/* @__PURE__ */ jsxs(Menu.RadioItem, {
+							value: "system",
+							className: "employee-menu__theme-option",
+							"aria-label": "System",
+							title: "System",
+							closeOnClick: false,
+							children: [/* @__PURE__ */ jsx(MonitorIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+								className: "sigvelo-visually-hidden",
+								children: "System"
+							})]
+						})
+					]
+				})]
+			}),
 			onSignOut ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Menu.Separator, {}), /* @__PURE__ */ jsxs(Menu.Item, {
 				onClick: onSignOut,
 				children: [/* @__PURE__ */ jsx(ArrowUpRightIcon, {}), "Sign out"]
@@ -214,16 +226,16 @@ function IdentityDialog({ identity, open, onOpenChange }) {
 	});
 }
 /** Bar links to Files, Plugins, and host views; the compact overflow carries them instead. */
-function EmployeeWorkbenchLinks({ view, renderLink, workbenchNavigation = [] }) {
-	const { compact } = useResponsiveSidebarShell();
+function EmployeeWorkbenchLinks({ view, renderLink, workbenchNavigation = [], navigation }) {
+	const { contentCompact: compact } = useResponsiveSidebarShell();
 	if (compact) return null;
-	return /* @__PURE__ */ jsx(Fragment, { children: [...WORKBENCH_NAVIGATION, ...workbenchNavigation].map((item) => /* @__PURE__ */ jsx(AppTopBar.Link, {
+	return /* @__PURE__ */ jsx(Fragment, { children: (navigation ?? [...WORKBENCH_NAVIGATION, ...workbenchNavigation]).map((item) => /* @__PURE__ */ jsx(AppTopBar.Link, {
 		label: item.label,
 		"aria-current": view === item.id ? "page" : void 0,
 		"data-pressed": view === item.id ? "" : void 0,
 		render: renderLink({
 			kind: "view",
-			view: item.id
+			view: view === item.id ? "chat" : item.id
 		}),
 		children: item.icon
 	}, item.id)) });
@@ -253,29 +265,9 @@ function employeeShellTitle({ agentRun, threadTitle }) {
 		})] })
 	});
 }
-function employeeShellLeading({ agentRun, view, hasThread, appBarLeading, back, renderLink }) {
-	if (agentRun) return back;
-	let navigation;
-	if (view !== "chat") navigation = back;
-	else if (hasThread) navigation = /* @__PURE__ */ jsx(AppTopBar.Link, {
-		label: "New thread",
-		render: renderLink({ kind: "new-thread" }),
-		children: /* @__PURE__ */ jsx(PencilIcon, {})
-	});
-	if (!navigation && !appBarLeading) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [navigation, appBarLeading] });
-}
 function employeeShellActions({ agentRun, view, renderLink, workbenchNavigation, focusedStop, navigation }) {
-	if (!agentRun && navigation) return /* @__PURE__ */ jsx(Fragment, { children: navigation.map((item) => /* @__PURE__ */ jsx(AppTopBar.Link, {
-		label: item.label,
-		"aria-current": view === item.id ? "page" : void 0,
-		render: renderLink({
-			kind: "view",
-			view: item.id
-		}),
-		children: item.icon
-	}, item.id)) });
 	if (!agentRun) return /* @__PURE__ */ jsx(EmployeeWorkbenchLinks, {
+		navigation,
 		view,
 		renderLink,
 		workbenchNavigation
@@ -294,7 +286,18 @@ function employeeShellActions({ agentRun, view, renderLink, workbenchNavigation,
 		children: /* @__PURE__ */ jsx(SquareIcon, {})
 	});
 }
-function EmployeeShell({ view, threads, threadId, agentRun, renderLink, appBarLeading, onDeleteThread, sidebar, sidebarLabel = "threads", navigation, children, ...menu }) {
+function EmployeeNewThread({ renderLink }) {
+	const { closeSidebar } = useResponsiveSidebarShell();
+	return /* @__PURE__ */ jsx(AppTopBar.Link, {
+		label: "New thread",
+		render: renderLink({ kind: "new-thread" }),
+		onClick: (event) => {
+			if (isPlainPrimaryLinkActivation(event)) closeSidebar();
+		},
+		children: /* @__PURE__ */ jsx(PencilIcon, {})
+	});
+}
+function EmployeeShell({ view, threads, threadId, agentRun, renderLink, appBarLeading, compactBack, onDeleteThread, sidebar, sidebarLabel = "threads", navigation, children, ...menu }) {
 	const history = threads ?? EMPTY_THREADS;
 	const thread = history.find((candidate) => candidate.id === threadId);
 	const { backRef, focusedStop } = useEmployeeRunStopFocus();
@@ -326,8 +329,10 @@ function EmployeeShell({ view, threads, threadId, agentRun, renderLink, appBarLe
 		className: "employee-shell",
 		"data-view": view,
 		children: /* @__PURE__ */ jsx(ResponsiveSidebarShell, {
+			className: "employee-shell__navigation",
 			sidebarLabel,
-			sidebarTogglePlacement: "sidebar",
+			defaultSidebarOpen: sidebar ? void 0 : false,
+			sidebarTogglePlacement: "main",
 			showMainLabel: "Show selected thread",
 			bar: {
 				label: "Workbench controls",
@@ -336,14 +341,8 @@ function EmployeeShell({ view, threads, threadId, agentRun, renderLink, appBarLe
 					threadTitle: thread?.title
 				}),
 				compactTitleTrigger: agentRun ? void 0 : /* @__PURE__ */ jsx("span", { children: thread?.title ?? "New chat" }),
-				leading: employeeShellLeading({
-					agentRun,
-					view,
-					hasThread: Boolean(thread),
-					appBarLeading,
-					back,
-					renderLink
-				}),
+				leading: agentRun ? back : /* @__PURE__ */ jsxs(Fragment, { children: [appBarLeading, /* @__PURE__ */ jsx(EmployeeNewThread, { renderLink })] }),
+				compactLeading: !agentRun && view !== "chat" ? compactBack ?? back : void 0,
 				actions: employeeShellActions({
 					agentRun,
 					view,
@@ -354,17 +353,25 @@ function EmployeeShell({ view, threads, threadId, agentRun, renderLink, appBarLe
 				}),
 				primary: /* @__PURE__ */ jsx(EmployeeMenu, {
 					...menu,
+					view,
+					navigation,
 					renderLink,
 					follow: agentRun ? void 0 : menu.follow
-				})
+				}, JSON.stringify([view, threadId]))
 			},
-			sidebar: sidebar ?? (agentRun ? void 0 : ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ThinkThreadPicker, {
+			sidebar: sidebar ?? (agentRun ? void 0 : ({ closeSidebar, closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ThinkThreadPicker, {
+				headerActions: /* @__PURE__ */ jsx(IconButton, {
+					label: "Hide threads",
+					variant: "ghost",
+					size: "sm",
+					onClick: closeSidebar,
+					children: /* @__PURE__ */ jsx(SidebarIcon, {})
+				}),
 				threads: history,
 				renderThreadLink: (item) => renderLink({
 					kind: "thread",
 					threadId: item.id
 				}),
-				createThreadLink: renderLink({ kind: "new-thread" }),
 				onSelect: closeSidebarOnCompact,
 				onDelete: onDeleteThread
 			})),
@@ -383,21 +390,13 @@ function EmployeeGate({ status, connectingLabel, identity, brand, modelSetup })
 			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
 		});
-		case "connecting": return /* @__PURE__ */ jsx("div", {
-			className: "employee-gate",
-			role: "status",
-			children: /* @__PURE__ */ jsx(EmptyState, {
-				icon: /* @__PURE__ */ jsx(SpinnerIcon, {}),
-				description: connectingLabel ?? "Connecting…"
-			})
-		});
+		case "connecting": return /* @__PURE__ */ jsx(BrandLoading, { label: connectingLabel ?? "Connecting…" });
 		case "offline": return /* @__PURE__ */ jsx("div", {
 			className: "employee-gate",
 			role: "status",

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

@@ -1,4 +1,4 @@
-import { EmployeeMenuProps } from "./EmployeeChrome.js";
+import { c as EmployeeMenuProps } from "../../EmployeeChrome-C8eTGJWn.js";
 import { t as ThinkRoutine } from "../../ThinkRoutine-Cb1DdaHa.js";
 import { ThinkRoutineActionsRootProps } from "./ThinkRoutineActions.js";
 import * as React from "react";

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

@@ -1,7 +1,6 @@
 import { R as PencilIcon, r as ArrowLeftIcon } from "../../icons-cuEtsgj9.js";
-import "../foundations/icons.js";
-import { StatusScreen } from "../general-purpose/StatusScreen.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
+import { StatusScreen } from "../general-purpose/StatusScreen.js";
 import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
 import { LinkButton } from "../foundations/LinkButton.js";
 import { EmployeeChrome } from "./EmployeeChrome.js";

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

@@ -1,8 +1,8 @@
 import { J as PromptInputMessage } from "../../PromptInput-DGPrCTPl.js";
-import { EmployeeBrand, EmployeeDestination } from "./EmployeeChrome.js";
+import { a as EmployeeDestination, n as EmployeeBrand } from "../../EmployeeChrome-C8eTGJWn.js";
 import { SetupChecklistGroupProps } from "../general-purpose/SetupChecklist.js";
-import { McpPluginCatalogProps } from "./McpPluginCatalog.js";
-import { WorkspaceMountManagerProps } from "./WorkspaceMountManager.js";
+import { n as McpPluginCatalogProps } from "../../McpPluginCatalog-DNeHDrts.js";
+import { r as WorkspaceMountManagerProps } from "../../WorkspaceMountManager-CkLI1B-G.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/EmployeeStartScreen.d.ts
@@ -25,6 +25,13 @@ interface EmployeeStartActions<Id extends string = string> {
   mounts?: Omit<WorkspaceMountManagerProps, "trigger">;
   personalization?: Pick<SetupChecklistGroupProps<Id>, "entries" | "onSelect">;
 }
+interface EmployeeStartScreenProps<Id extends string = string> {
+  brand: EmployeeBrand;
+  start: EmployeeStartActions<Id>;
+  plugins?: McpPluginCatalogProps;
+  renderLink: (destination: EmployeeDestination) => React.ReactElement;
+  children: React.ReactNode;
+}
 /** Canonical welcome screen, including configured connection states and connection menus. */
 declare function EmployeeStartScreen<Id extends string>({
   brand,
@@ -32,12 +39,6 @@ declare function EmployeeStartScreen<Id extends string>({
   plugins,
   renderLink,
   children
-}: {
-  brand: EmployeeBrand;
-  start: EmployeeStartActions<Id>;
-  plugins?: McpPluginCatalogProps;
-  renderLink: (destination: EmployeeDestination) => React.ReactElement;
-  children: React.ReactNode;
-}): React.JSX.Element;
+}: EmployeeStartScreenProps<Id>): React.JSX.Element;
 //#endregion
-export { EmployeeStartActions, EmployeeStartConnection, EmployeeStartScreen };
+export { EmployeeStartActions, EmployeeStartConnection, EmployeeStartScreen, EmployeeStartScreenProps };

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

@@ -1,14 +1,13 @@
 import { C as FolderIcon, G as SlackIcon, I as PaperclipIcon, c as BoxIcon, g as DiscordIcon } from "../../icons-cuEtsgj9.js";
-import { Button } from "../foundations/Button.js";
+import { IconButton } from "../foundations/IconButton.js";
 import { Menu } from "../foundations/Menu.js";
-import "../foundations/icons.js";
 import { ActionGuideAction } from "../general-purpose/ActionGuide.js";
 import { AppIcon } from "../foundations/AppIcon.js";
 import { EmployeeChrome } from "./EmployeeChrome.js";
-import { t as SetupChecklistAction } from "../../SetupChecklist-Btmy3-_C.js";
+import { t as SetupChecklistAction } from "../../SetupChecklist-BiWQkKEq.js";
 import { McpServerPickerAction, McpServerPickerItems } from "./McpServerPicker.js";
 import { WorkspaceMountManager } from "./WorkspaceMountManager.js";
-import "react";
+import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/EmployeeStartScreen.tsx
 function SetupActions({ start }) {
@@ -32,6 +31,8 @@ function SetupActions({ start }) {
 	] });
 }
 function StartComposerTray({ plugins, renderLink, start }) {
+	const [pluginTrigger, setPluginTrigger] = React.useState(null);
+	const menuBoundary = pluginTrigger?.closest(".agent-chat") ?? void 0;
 	const connections = [{
 		id: "discord",
 		name: "Discord",
@@ -59,21 +60,25 @@ function StartComposerTray({ plugins, renderLink, start }) {
 		}) : null,
 		start.mounts ? /* @__PURE__ */ jsx(WorkspaceMountManager, {
 			...start.mounts,
-			trigger: /* @__PURE__ */ jsxs(Button, {
+			trigger: /* @__PURE__ */ jsx(IconButton, {
 				variant: "ghost",
 				color: "neutral",
 				size: "sm",
-				children: [/* @__PURE__ */ jsx(PaperclipIcon, {}), "Attach folder"]
+				label: "Attach folder",
+				responsiveLabel: "Attach folder",
+				children: /* @__PURE__ */ jsx(PaperclipIcon, {})
 			})
 		}) : null,
-		hasPluginMenu ? /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Button, {
+		hasPluginMenu ? /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(IconButton, {
 			type: "button",
 			variant: "ghost",
 			color: "neutral",
 			size: "sm",
 			render: /* @__PURE__ */ jsx(Menu.Trigger, { unstyled: true }),
-			"aria-label": "Connect plugins",
-			children: [/* @__PURE__ */ jsx("span", { children: "Connect plugins" }), /* @__PURE__ */ jsxs(AppIcon.Stack, {
+			label: "Connect plugins",
+			responsiveLabel: "Plugins",
+			ref: setPluginTrigger,
+			children: /* @__PURE__ */ jsxs(AppIcon.Stack, {
 				"aria-hidden": "true",
 				children: [/* @__PURE__ */ jsx(AppIcon.Root, {
 					size: "xs",
@@ -84,14 +89,16 @@ function StartComposerTray({ plugins, renderLink, start }) {
 					variant: "surface",
 					children: /* @__PURE__ */ jsx(DiscordIcon, {})
 				})]
-			})]
+			})
 		}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
-			side: "bottom",
-			align: "start",
-			sideOffset: 4,
+			side: "top",
+			align: "end",
+			sideOffset: 8,
+			collisionBoundary: menuBoundary,
+			collisionPadding: 8,
 			children: /* @__PURE__ */ jsxs(Menu.Popup, {
 				"aria-label": "Plugins",
-				"data-recipe": "wide-scroll-picker",
+				className: "employee-start__plugins",
 				children: [/* @__PURE__ */ jsx(McpServerPickerItems, {
 					actions: connections,
 					servers: plugins?.servers ?? [],

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

@@ -2,7 +2,6 @@ import { B as PlusIcon, y as EllipsisIcon } from "../../icons-cuEtsgj9.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import { Menu } from "../foundations/Menu.js";
-import "../foundations/icons.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { Toast } from "../foundations/Toast.js";
 import "react";

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

@@ -1,3 +1,2 @@
-import "../foundations/icons.js";
-import { n as ManagerOfficeSidebar, r as ManagerOfficeSidebarAlert, t as ManagerOffice } from "../../ManagerOffice-D-7SOJ4x.js";
+import { n as ManagerOfficeSidebar, r as ManagerOfficeSidebarAlert, t as ManagerOffice } from "../../ManagerOffice-CMJ7laGe.js";
 export { ManagerOffice, ManagerOfficeSidebar, ManagerOfficeSidebarAlert };

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

@@ -1,4 +1,4 @@
-import { EmployeeShellProps } from "./EmployeeChrome.js";
+import { f as EmployeeShellProps } from "../../EmployeeChrome-C8eTGJWn.js";
 import { ManagerOfficeConnectedEmployee, ManagerOfficeDestination, ManagerOfficeEmployee } from "./ManagerOffice.js";
 import * as React from "react";
 
@@ -9,7 +9,7 @@ type ManagerOfficeView = {
   kind: "employee";
   employeeId: string;
 };
-interface ManagerWorkShellProps extends EmployeeShellProps {
+interface ManagerWorkShellProps extends Omit<EmployeeShellProps, "appBarLeading"> {
   employees: readonly ManagerOfficeEmployee[];
   employee: ManagerOfficeEmployee;
   renderOfficeLink: (destination: ManagerOfficeDestination) => React.ReactElement;

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

@@ -1,11 +1,11 @@
-import { B as PlusIcon, C as FolderIcon, G as SlackIcon, P as MonitorIcon, R as PencilIcon, et as WarningIcon, j as MessageSquareIcon } from "../../icons-cuEtsgj9.js";
+import { B as PlusIcon, C as FolderIcon, G as SlackIcon, P as MonitorIcon, R as PencilIcon, W as SidebarIcon, et as WarningIcon, r as ArrowLeftIcon } from "../../icons-cuEtsgj9.js";
+import { IconButton } from "../foundations/IconButton.js";
 import { EmptyState } from "../foundations/EmptyState.js";
-import "../foundations/icons.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
 import { ThinkThreadPicker } from "./ThinkThreadPicker.js";
 import { EmployeeChrome } from "./EmployeeChrome.js";
-import { n as ManagerOfficeSidebar, r as ManagerOfficeSidebarAlert, t as ManagerOffice } from "../../ManagerOffice-D-7SOJ4x.js";
+import { n as ManagerOfficeSidebar, r as ManagerOfficeSidebarAlert, t as ManagerOffice } from "../../ManagerOffice-CMJ7laGe.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ManagerOfficeScreens.tsx
@@ -16,20 +16,23 @@ function ManagerWorkShell({ employees, employee, renderOfficeLink, officeActions
 		renderLink: renderOfficeLink,
 		children: /* @__PURE__ */ jsx(EmployeeChrome.Shell, {
 			...chrome,
+			appBarLeading: /* @__PURE__ */ jsx(AppTopBar.Link, {
+				label: "Back to office",
+				render: renderOfficeLink({
+					kind: "employee",
+					employee
+				}),
+				children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+			}),
 			sidebarLabel: "employees",
 			navigation: [
-				{
-					id: "chat",
-					label: "Chat",
-					icon: /* @__PURE__ */ jsx(MessageSquareIcon, {})
-				},
 				{
 					id: "files",
 					label: "Files",
 					icon: /* @__PURE__ */ jsx(FolderIcon, {})
 				},
 				{
-					id: "live",
+					id: "browser",
 					label: "Browser",
 					icon: /* @__PURE__ */ jsx(MonitorIcon, {})
 				},
@@ -39,12 +42,18 @@ function ManagerWorkShell({ employees, employee, renderOfficeLink, officeActions
 					icon: /* @__PURE__ */ jsx(SlackIcon, {})
 				}
 			],
-			sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ManagerOfficeSidebar, {
+			sidebar: ({ closeSidebar, closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ManagerOfficeSidebar, {
 				layout: "chat",
 				employees,
 				selectedEmployeeId: employee.id,
 				closeSidebarOnCompact,
-				officeActions,
+				officeActions: /* @__PURE__ */ jsxs(Fragment, { children: [officeActions, /* @__PURE__ */ jsx(IconButton, {
+					label: "Hide workforce",
+					variant: "ghost",
+					size: "sm",
+					onClick: closeSidebar,
+					children: /* @__PURE__ */ jsx(SidebarIcon, {})
+				})] }),
 				renderLink: (destination) => {
 					if (destination.kind === "employee" && "work" in destination.employee) {
 						const first = destination.employee.work[0];
@@ -127,18 +136,26 @@ function ManagerOfficeScreen({ employees, renderLink, view, emptyOfficeAction, o
 		employees,
 		renderLink,
 		render: /* @__PURE__ */ jsx(ResponsiveSidebarShell, {
+			className: "employee-shell__navigation",
 			sidebarLabel: "employees",
 			showMainLabel: "Show workforce",
-			sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ManagerOfficeSidebar, {
+			sidebar: ({ closeSidebar, closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ManagerOfficeSidebar, {
 				employees,
 				renderLink,
 				selectedEmployeeId: employee?.id ?? null,
 				closeSidebarOnCompact,
-				officeActions
+				officeActions: /* @__PURE__ */ jsxs(Fragment, { children: [officeActions, /* @__PURE__ */ jsx(IconButton, {
+					label: "Hide workforce",
+					variant: "ghost",
+					size: "sm",
+					onClick: closeSidebar,
+					children: /* @__PURE__ */ jsx(SidebarIcon, {})
+				})] })
 			}),
 			bar: {
 				label: "Workforce controls",
 				title,
+				compactTitleTrigger: /* @__PURE__ */ jsx("span", { children: title }),
 				titleRender: (props) => /* @__PURE__ */ jsx("h1", {
 					...props,
 					children: props.children