@mcp-b/react-components 0.47.0 → 0.49.0

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

@@ -1,23 +1,21 @@
-import { getMcpServerIconSrc } from "../../utils/mcp-server-catalog.js";
+import { findCatalogMcpServerCard, getMcpServerIconSrc } from "../../utils/mcp-server-catalog.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { B as PlusIcon, C as FolderIcon, D as LinkIcon, H as RefreshIcon, K as SpinnerIcon, L as PauseIcon, P as MonitorIcon, R as PencilIcon, T as InfoIcon, _ as DotIcon, a as ArrowUpIcon, b as EyeIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon, j as MessageSquareIcon, n as ArrowDownIcon, nt as XIcon, p as ChevronRightIcon, u as CalendarIcon, v as DownloadIcon, z as PlayIcon } from "../../icons-cuEtsgj9.js";
+import { C as FolderIcon, D as LinkIcon, K as SpinnerIcon, L as PauseIcon, P as MonitorIcon, S as FileIcon, T as InfoIcon, _ as DotIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon, j as MessageSquareIcon, p as ChevronRightIcon, u as CalendarIcon } from "../../icons-cuEtsgj9.js";
 import { Collapsible } from "../foundations/Collapsible.js";
 import { Button } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
+import { EmptyState } from "../foundations/EmptyState.js";
 import { Avatar } from "../foundations/Avatar.js";
 import { AppIcon } from "../foundations/AppIcon.js";
-import { n as findCatalogMcpServerCard } from "../../mcp-server-7NR24ASj.js";
-import { EmptyState } from "../foundations/EmptyState.js";
-import { Menu } from "../foundations/Menu.js";
-import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
 import { LinkButton } from "../foundations/LinkButton.js";
-import { Select } from "../foundations/Select.js";
 import "../foundations/icons.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
-import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
+import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
+import { CorrespondentName, correspondentHandleLabel } from "../ai-sdk/Correspondent.js";
 import { getThinkExecutionRunStatus } from "./ThinkExecutionRun.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
 //#region src/components/_internal/chrome-profile-colors.ts
 const PALETTE = [
 	{
@@ -90,6 +88,18 @@ function chromeProfileColor(seed, taken) {
 }
 //#endregion
 //#region src/components/agents-sdk/ManagerOffice.tsx
+const OfficeContext = React.createContext(null);
+const EmployeeContext = React.createContext(null);
+function useOffice() {
+	const value = React.useContext(OfficeContext);
+	if (!value) throw new Error("ManagerOffice parts require ManagerOffice.Root.");
+	return value;
+}
+function useEmployee() {
+	const value = React.useContext(EmployeeContext);
+	if (!value) throw new Error("Employee parts require ManagerOffice.Employee.");
+	return value;
+}
 const statusLabels = {
 	"needs-you": "Waiting on you",
 	working: "Working",
@@ -124,26 +134,12 @@ function employeeStatusText(employee) {
 	const label = statusLabels[employee.status];
 	return count ? `${label} · ${count} handoff${count === 1 ? "" : "s"}` : label;
 }
-function statusIcon(status) {
-	if (status === "needs-you" || status === "issue") return /* @__PURE__ */ jsx(WarningIcon, {});
-	if (status === "unavailable") return /* @__PURE__ */ jsx(XIcon, {});
-	if (status === "working" || status === "connecting") return /* @__PURE__ */ jsx(SpinnerIcon, {});
-	if (status === "offline") return /* @__PURE__ */ jsx(MonitorIcon, {});
-	return /* @__PURE__ */ jsx(PauseIcon, {});
-}
 function EmployeePresence({ employee }) {
-	const label = employeeStatusText(employee);
-	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsx("span", {
 		className: "manager-office__nav-status",
 		"data-status": employee.status,
-		role: "img",
-		"aria-label": label,
-		children: statusIcon(employee.status)
-	}) }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
-		side: "top",
-		sideOffset: 6,
-		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: label })
-	}) })] });
+		"aria-hidden": "true"
+	});
 }
 /**
 * Each employee is a Chrome profile, so the bubble wears its profile color —
@@ -355,15 +351,6 @@ function relativeTime(timestamp, now) {
 	if (elapsed < day) return `${Math.floor(elapsed / hour)}h`;
 	return `${Math.floor(elapsed / day)}d`;
 }
-function routineDetail(routine) {
-	const schedule = routine.enabled ? routine.task.schedule : `Paused · ${routine.task.schedule}`;
-	const finishedRuns = routine.runs.filter((run) => run.completedAt != null);
-	if (!finishedRuns.length) return schedule;
-	return `${schedule} · ${finishedRuns.filter((run) => {
-		const status = getThinkExecutionRunStatus(run);
-		return status === "completed" || status === "complete";
-	}).length} of ${finishedRuns.length} recent runs completed`;
-}
 function Timestamp({ now, timestamp }) {
 	const date = new Date(timestamp);
 	return /* @__PURE__ */ jsx("time", {
@@ -372,16 +359,6 @@ function Timestamp({ now, timestamp }) {
 		children: relativeTime(timestamp, now)
 	});
 }
-const channelDirectionLabels = {
-	input: "In",
-	output: "Out",
-	both: "In · Out"
-};
-function channelDirectionIcon(direction) {
-	if (direction === "input") return /* @__PURE__ */ jsx(ArrowDownIcon, {});
-	if (direction === "output") return /* @__PURE__ */ jsx(ArrowUpIcon, {});
-	return /* @__PURE__ */ jsx(RefreshIcon, {});
-}
 /**
 * Deliberately the same three glyphs the employee statuses use: a channel that
 * needs a sign-in is the same kind of event as an employee that needs one, and
@@ -439,13 +416,6 @@ function ChannelRow({ channel }) {
 					children: channel.detail ?? channelStatusLabels[channel.status]
 				})]
 			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "manager-office__channel-direction",
-				"aria-label": `Direction: ${channelDirectionLabels[channel.direction]}`,
-				role: "img",
-				title: channelDirectionLabels[channel.direction],
-				children: channelDirectionIcon(channel.direction)
-			}),
 			/* @__PURE__ */ jsxs("span", {
 				className: "manager-office__channel-status",
 				"data-status": channel.status,
@@ -528,32 +498,30 @@ function ManagerOfficeSidebarAlert({ className, detail, title, ...props }) {
 * content, but the Workforce header, roster identity, status language, scrolling,
 * and footer placement stay component-owned and therefore cannot drift.
 */
-function ManagerOfficeSidebar({ className, closeSidebarOnCompact, content, employees, renderLink, footer, officeActions, selectedEmployeeId, ...props }) {
+function moveRosterFocus(event, layout) {
+	const nextKey = layout === "office" ? "ArrowDown" : "ArrowRight";
+	const prevKey = layout === "office" ? "ArrowUp" : "ArrowLeft";
+	if (event.key !== nextKey && event.key !== prevKey && event.key !== "Home" && event.key !== "End") return;
+	const links = [...event.currentTarget.querySelectorAll("a[href], button")];
+	const index = links.findIndex((link) => link === document.activeElement);
+	if (index < 0) return;
+	event.preventDefault();
+	const last = links.length - 1;
+	links[event.key === "Home" ? 0 : event.key === "End" ? last : event.key === nextKey ? Math.min(last, index + 1) : Math.max(0, index - 1)]?.focus();
+}
+function ManagerOfficeSidebar({ className, closeSidebarOnCompact, content, employees, renderLink, footer, layout = "office", officeActions, selectedEmployeeId, ...props }) {
 	const rosterLabelId = React.useId();
-	const employeeNavRef = React.useRef(null);
-	const [employeeNavOverflows, setEmployeeNavOverflows] = React.useState(false);
 	const profileColors = rosterProfileColors(employees);
-	React.useLayoutEffect(() => {
-		const employeeNav = employeeNavRef.current;
-		if (!employeeNav) return;
-		const syncOverflow = () => {
-			const overflows = employeeNav.scrollWidth > employeeNav.clientWidth;
-			setEmployeeNavOverflows((current) => current === overflows ? current : overflows);
-		};
-		syncOverflow();
-		if (typeof ResizeObserver === "undefined") return;
-		const observer = new ResizeObserver(syncOverflow);
-		observer.observe(employeeNav);
-		return () => observer.disconnect();
-	}, [employees]);
+	const isChat = layout === "chat";
 	return /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsxs("nav", {
 		className: cx("manager-office__sidebar", className),
 		"aria-label": "Workforce",
+		"data-layout": layout,
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "manager-office__sidebar-heading",
-				children: [/* @__PURE__ */ jsx("strong", { children: "Workforce" }), officeActions ? /* @__PURE__ */ jsx("span", {
+				children: [isChat ? null : /* @__PURE__ */ jsx("strong", { children: "Workforce" }), officeActions ? /* @__PURE__ */ jsx("span", {
 					className: "manager-office__sidebar-actions",
 					children: officeActions
 				}) : null]
@@ -564,12 +532,13 @@ function ManagerOfficeSidebar({ className, closeSidebarOnCompact, content, emplo
 				children: "Employees"
 			}),
 			/* @__PURE__ */ jsx("ul", {
-				ref: employeeNavRef,
 				className: "manager-office__employee-nav",
+				role: "list",
 				"aria-labelledby": rosterLabelId,
-				"data-overflowing": employeeNavOverflows ? "true" : void 0,
+				onKeyDown: (event) => moveRosterFocus(event, layout),
 				children: employees.map((employee, index) => {
 					const selected = selectedEmployeeId === employee.id;
+					const status = employeeStatusText(employee);
 					return /* @__PURE__ */ jsx("li", {
 						className: "manager-office__employee-group",
 						children: /* @__PURE__ */ jsxs(LinkButton, {
@@ -583,21 +552,25 @@ function ManagerOfficeSidebar({ className, closeSidebarOnCompact, content, emplo
 							size: "sm",
 							className: "manager-office__employee-link",
 							"aria-current": selected ? "page" : void 0,
-							"aria-label": `Open ${employee.name} · ${employeeStatusText(employee)}`,
-							title: `${employee.name} · ${employeeStatusText(employee)}`,
+							"aria-label": `Open ${employee.name} · ${status}`,
+							title: isChat ? `${employee.name} · ${status}` : void 0,
 							children: [/* @__PURE__ */ jsxs("span", {
 								className: "manager-office__employee-avatar",
 								children: [/* @__PURE__ */ jsx(EmployeeAvatar, {
 									employee,
 									color: profileColors.get(employee.id),
-									index
+									index,
+									size: isChat ? "sm" : "md"
 								}), /* @__PURE__ */ jsx(EmployeePresence, { employee })]
-							}), /* @__PURE__ */ jsx("span", {
-								className: "manager-office__identity sigvelo-visually-hidden",
-								children: /* @__PURE__ */ jsx("strong", {
+							}), isChat ? null : /* @__PURE__ */ jsxs("span", {
+								className: "manager-office__identity",
+								children: [/* @__PURE__ */ jsx("strong", {
 									className: "sigvelo-truncate",
 									children: employee.name
-								})
+								}), /* @__PURE__ */ jsx("small", {
+									className: "sigvelo-truncate",
+									children: statusLabels[employee.status]
+								})]
 							})]
 						})
 					}, employee.id);
@@ -614,864 +587,510 @@ function ManagerOfficeSidebar({ className, closeSidebarOnCompact, content, emplo
 		]
 	}) });
 }
-function AttentionView({ employees, renderLink, now }) {
-	const rows = employees.flatMap((employee) => isConnected(employee) ? employee.handoffs.map((handoff) => ({
-		employee,
-		handoff
-	})) : []);
-	if (!rows.length) return /* @__PURE__ */ jsx("section", {
-		className: "manager-office__attention",
-		"data-recipe": "page",
-		"aria-label": "Waiting on you",
-		children: /* @__PURE__ */ jsx(EmptyState, {
-			icon: /* @__PURE__ */ jsx(CheckIcon, {}),
-			title: "No active handoffs",
-			description: "Employee connection state remains visible in the roster."
-		})
-	});
-	return /* @__PURE__ */ jsx("section", {
-		className: "manager-office__attention",
-		"data-recipe": "page",
-		"aria-label": "Waiting on you",
-		children: /* @__PURE__ */ jsx("ul", {
-			className: "manager-office__attention-list sigvelo-stack-list",
-			children: rows.map(({ employee, handoff }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(HandoffCard, {
-				employee,
-				handoff,
-				renderLink,
-				now,
-				showEmployee: true
-			}) }, `${employee.id}:${handoff.id}`))
-		})
-	});
+function isReviewWork(work) {
+	return work.status === "attention" || work.status === "error";
 }
-const dashboardLanes = [
-	"working",
-	"needs-you",
-	"done",
-	"idle"
-];
-const analyticsDateFormatter = new Intl.DateTimeFormat(void 0, {
-	day: "numeric",
-	month: "short"
-});
-function analyticsDateLabel(timestamp) {
-	return timestamp ? analyticsDateFormatter.format(timestamp) : "—";
+/** Finished or failed work the manager should open in chat — not a live-tab wait. */
+function reviewWorkFor(employee) {
+	const waiting = new Set(employee.handoffs.map((handoff) => handoff.workId));
+	return employee.work.filter((work) => isReviewWork(work) && !waiting.has(work.id));
 }
-function toggleDashboardFilter(setter, value, checked) {
-	setter((current) => {
-		const next = new Set(current);
-		if (checked) next.add(value);
-		else next.delete(value);
-		return next;
-	});
+function workingSetOf(work) {
+	return work.workingSet ?? [];
 }
-const dashboardLaneCopy = {
-	working: {
-		title: "In progress",
-		description: "Employees working now"
-	},
-	"needs-you": {
-		title: "Waiting on you",
-		description: "Blocked or waiting for you"
-	},
-	done: {
-		title: "Done",
-		description: "Fresh outcomes to review"
-	},
-	idle: {
-		title: "Idle",
-		description: "Not working — assign something now"
+function workingSetKey(item) {
+	if (item.kind === "file" || item.kind === "folder") return `${item.kind}:${item.path}`;
+	if (item.kind === "link") return `link:${item.href}`;
+	return `correspondent:${correspondentHandleLabel(item.correspondent.handle)}`;
+}
+function safeHttpUrl(url) {
+	try {
+		const parsed = new URL(url);
+		if (parsed.protocol !== "https:" && parsed.protocol !== "http:") return void 0;
+		return parsed.href;
+	} catch {
+		return;
 	}
-};
-function dashboardCards(employees, lane) {
-	if (lane === "idle") return employees.flatMap((employee) => {
-		if (!isConnected(employee)) return [];
-		const hasCurrentWork = employee.work.some((work) => [
-			"running",
-			"attention",
-			"error",
-			"interrupted"
-		].includes(work.status));
-		return employee.status === "idle" && !hasCurrentWork ? [{
-			employee,
-			lane
-		}] : [];
+}
+function providerCardForHref(href) {
+	let parsed;
+	try {
+		parsed = new URL(href);
+	} catch {
+		return;
+	}
+	const host = parsed.hostname.toLowerCase();
+	if (host === "docs.google.com" || host.endsWith(".docs.google.com")) {
+		if (parsed.pathname.includes("/spreadsheets/")) return findCatalogMcpServerCard({ id: "google-sheets" });
+		if (parsed.pathname.includes("/document/")) return findCatalogMcpServerCard({ id: "google-docs" });
+		if (parsed.pathname.includes("/presentation/")) return findCatalogMcpServerCard({ id: "google-slides" });
+	}
+	if (host === "drive.google.com" || host.endsWith(".drive.google.com")) return findCatalogMcpServerCard({ id: "google-drive" });
+}
+function workingSetLinkDetail(item) {
+	const card = providerCardForHref(item.href);
+	if (card) return card.name;
+	try {
+		return new URL(item.href).hostname.replace(/^www\./u, "");
+	} catch {
+		return item.href;
+	}
+}
+function WorkingSetMark({ item }) {
+	if (item.kind === "file") return /* @__PURE__ */ jsx(FileIcon, {});
+	if (item.kind === "folder") return /* @__PURE__ */ jsx(FolderIcon, {});
+	const card = providerCardForHref(item.href);
+	const src = card ? getMcpServerIconSrc(card) : void 0;
+	if (src) return /* @__PURE__ */ jsxs(AppIcon.Root, {
+		size: "xs",
+		variant: "artwork",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx(AppIcon.Image, {
+			src,
+			alt: ""
+		}), /* @__PURE__ */ jsx(AppIcon.Fallback, { children: (card?.name ?? item.title).slice(0, 1) })]
 	});
-	return employees.flatMap((employee) => {
-		if (!isConnected(employee)) return lane === "needs-you" ? [{
-			employee,
-			lane
-		}] : [];
-		if (lane === "working") {
-			const work = employee.work.find((candidate) => candidate.status === "running");
-			return work ? [{
-				employee,
-				lane,
-				work
-			}] : [];
-		}
-		if (lane === "done") {
-			const work = employee.work.find((candidate) => candidate.status === "attention");
-			return work ? [{
-				employee,
-				lane,
-				work
-			}] : [];
-		}
-		const handoff = employee.handoffs[0];
-		if (handoff) return [{
-			employee,
-			lane,
-			handoff,
-			work: employee.work.find((candidate) => candidate.id === handoff.workId)
-		}];
-		const work = employee.work.find((candidate) => ["error", "interrupted"].includes(candidate.status));
-		return work ? [{
+	return /* @__PURE__ */ jsx(LinkIcon, {});
+}
+function routineDetail(routine) {
+	const schedule = routine.enabled ? routine.task.schedule : `Paused · ${routine.task.schedule}`;
+	const finishedRuns = routine.runs.filter((run) => run.completedAt != null);
+	if (!finishedRuns.length) return schedule;
+	return `${schedule} · ${finishedRuns.filter((run) => {
+		const status = getThinkExecutionRunStatus(run);
+		return status === "completed" || status === "complete";
+	}).length} of ${finishedRuns.length} recent runs completed`;
+}
+/**
+* Where a work link sits decides whether it draws its own surface: a row in a
+* work list is a bounded row, while a lane heading sits inside the lane card,
+* which already draws one.
+*/
+const workLinkClassNames = {
+	row: "manager-office__work-link",
+	lane: "manager-office__lane-title"
+};
+/** The link onto a work thread, shared by standalone rows and lane headings. */
+function WorkLink({ employee, placement, renderLink, now, showEmployee, work }) {
+	return /* @__PURE__ */ jsxs(LinkButton, {
+		render: renderLink({
+			kind: "work",
 			employee,
-			lane,
 			work
-		}] : [];
-	});
-}
-function DashboardBrowserPreview({ card }) {
-	const connectedEmployee = isConnected(card.employee) ? card.employee : null;
-	const disconnectedDescription = isConnected(card.employee) ? "" : card.employee.statusDescription;
-	const title = connectedEmployee ? (card.lane === "done" ? card.work?.title : connectedEmployee.browserPreview?.title) ?? card.work?.title ?? "Ready for a new assignment" : "Browser is offline";
-	const url = connectedEmployee ? connectedEmployee.browserPreview?.url ?? "New tab" : disconnectedDescription;
-	const state = card.lane === "working" ? "Live" : card.lane === "needs-you" ? "Paused" : card.lane === "done" ? "Result ready" : connectedEmployee ? "Idle" : "Disconnected";
-	return /* @__PURE__ */ jsxs("div", {
-		className: "manager-office__browser-preview",
-		"data-lane": card.lane,
-		role: "img",
-		"aria-label": `${card.employee.name} browser preview: ${title}. ${state}.`,
+		}),
+		variant: "ghost",
+		color: "neutral",
+		size: "sm",
+		className: workLinkClassNames[placement],
+		"aria-label": `Open ${work.title} to ${threadStatusLabel(work.status).toLowerCase()}`,
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "manager-office__browser-chrome",
-				"aria-hidden": "true",
-				children: [
-					/* @__PURE__ */ jsx("span", {}),
-					/* @__PURE__ */ jsx("span", {}),
-					/* @__PURE__ */ jsx("span", {}),
-					/* @__PURE__ */ jsx("small", { children: url })
-				]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "manager-office__browser-page",
-				"aria-hidden": "true",
-				children: [
-					/* @__PURE__ */ jsx("span", { className: "manager-office__browser-page-mark" }),
-					/* @__PURE__ */ jsxs("span", {
-						className: "manager-office__browser-page-copy",
-						children: [/* @__PURE__ */ jsx("strong", { children: title }), /* @__PURE__ */ jsx("small", { children: card.work?.title ?? card.handoff?.workTitle ?? (connectedEmployee ? url : "") })]
-					}),
-					/* @__PURE__ */ jsxs("span", {
-						className: "manager-office__browser-page-lines",
-						children: [
-							/* @__PURE__ */ jsx("i", {}),
-							/* @__PURE__ */ jsx("i", {}),
-							/* @__PURE__ */ jsx("i", {})
-						]
-					}),
-					card.lane === "working" ? /* @__PURE__ */ jsx("span", { className: "manager-office__browser-cursor" }) : null
-				]
-			}),
+			/* @__PURE__ */ jsx(ThreadStatusIcon, { status: work.status }),
 			/* @__PURE__ */ jsxs("span", {
-				className: "manager-office__browser-state",
-				"aria-hidden": "true",
-				children: [card.lane === "working" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : card.lane === "done" ? /* @__PURE__ */ jsx(CheckIcon, {}) : null, state]
-			})
+				className: "manager-office__identity",
+				children: [/* @__PURE__ */ jsxs("strong", {
+					className: "sigvelo-truncate",
+					children: [work.title, work.status === "attention" ? /* @__PURE__ */ jsx("span", {
+						className: "manager-office__unread-dot",
+						"aria-hidden": "true"
+					}) : null]
+				}), /* @__PURE__ */ jsxs("small", {
+					className: "sigvelo-truncate",
+					children: [
+						showEmployee ? `${employee.name} · ` : null,
+						threadStatusLabel(work.status),
+						" · ",
+						/* @__PURE__ */ jsx(Timestamp, {
+							timestamp: work.updatedAt,
+							now
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(ChevronRightIcon, { className: "manager-office__row-chevron" })
 		]
 	});
 }
-function DashboardConnections({ employee }) {
-	if (!isConnected(employee)) return /* @__PURE__ */ jsx("span", {
-		className: "manager-office__connection-empty",
-		children: "Browser connection offline"
+function workingSetItemCaption(item) {
+	if (item.kind === "link") return workingSetLinkDetail(item);
+	return item.kind === "folder" ? "Workspace folder" : "Workspace file";
+}
+function WorkingSetAttachment(props) {
+	const { caption, label, mark, title } = props;
+	const contents = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "manager-office__working-set-mark",
+		"aria-hidden": "true",
+		children: mark
+	}), /* @__PURE__ */ jsx("strong", {
+		className: "sigvelo-truncate",
+		children: title
+	})] });
+	const link = "href" in props ? /* @__PURE__ */ jsx(LinkButton, {
+		href: props.href,
+		target: "_blank",
+		rel: "noreferrer",
+		variant: "ghost",
+		color: "neutral",
+		size: "sm",
+		className: "manager-office__working-set-link",
+		"aria-label": label,
+		children: contents
+	}) : /* @__PURE__ */ jsx(LinkButton, {
+		render: props.render,
+		variant: "ghost",
+		color: "neutral",
+		size: "sm",
+		className: "manager-office__working-set-link",
+		"aria-label": label,
+		children: contents
 	});
-	if (!employee.channels.length) return /* @__PURE__ */ jsx("span", {
-		className: "manager-office__connection-empty",
-		children: "No connectors yet"
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: link }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		side: "bottom",
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: caption })
+	}) })] });
+}
+function WorkingSetItemRow({ employee, item, renderLink, work }) {
+	if (item.kind === "correspondent") return /* @__PURE__ */ jsx("li", {
+		className: "manager-office__working-set-item",
+		children: /* @__PURE__ */ jsx(CorrespondentName, { correspondent: item.correspondent })
 	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "manager-office__dashboard-connections",
-		"aria-label": "Connections",
-		children: /* @__PURE__ */ jsx("span", {
-			className: "manager-office__connection-icons",
-			children: employee.channels.slice(0, 4).map((channel) => {
-				const statusLabel = channel.status === "connected" ? "Connected" : channel.status === "needs-auth" ? "Needs sign-in" : "Connection error";
-				return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
-					"aria-label": `${channel.name}: ${statusLabel}`,
-					delay: 300,
-					render: /* @__PURE__ */ jsx(AppIcon.Root, {
-						size: "xs",
-						"data-status": channel.status
-					}),
-					role: "img",
-					children: /* @__PURE__ */ jsx(ChannelMark, { channel })
-				}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
-					side: "top",
-					sideOffset: 6,
-					children: /* @__PURE__ */ jsxs(Tooltip.Popup, { children: [
-						channel.name,
-						" · ",
-						statusLabel
-					] })
-				}) })] }, channel.id);
+	const caption = workingSetItemCaption(item);
+	const mark = /* @__PURE__ */ jsx(WorkingSetMark, { item });
+	if (item.kind === "link") {
+		const href = safeHttpUrl(item.href);
+		if (!href) return null;
+		return /* @__PURE__ */ jsx("li", {
+			className: "manager-office__working-set-item",
+			children: /* @__PURE__ */ jsx(WorkingSetAttachment, {
+				caption,
+				label: `${item.title} (${caption}, opens in a new tab)`,
+				href,
+				mark,
+				title: item.title
 			})
+		});
+	}
+	const location = item.kind === "folder" ? "folder" : "file";
+	return /* @__PURE__ */ jsx("li", {
+		className: "manager-office__working-set-item",
+		children: /* @__PURE__ */ jsx(WorkingSetAttachment, {
+			caption,
+			label: `Open ${item.title} ${location} in workspace`,
+			render: renderLink({
+				kind: "workspace",
+				employee,
+				work,
+				path: item.path
+			}),
+			mark,
+			title: item.title
 		})
 	});
 }
-function dashboardCardId(card) {
-	return `${card.lane}:${card.employee.id}:${card.work?.id ?? card.handoff?.id ?? "employee"}`;
-}
-function DashboardCard({ card, collapsed, color, index, now, onToggleCollapsed, renderLink }) {
-	const connectedEmployee = isConnected(card.employee) ? card.employee : null;
-	const disconnectedDescription = isConnected(card.employee) ? "" : card.employee.statusDescription;
-	const title = card.handoff?.reason ?? card.work?.title ?? (connectedEmployee ? "No active work" : "Reconnect employee");
-	const detail = card.handoff?.request ?? (connectedEmployee ? connectedEmployee.role : disconnectedDescription);
+function WorkLane({ employee, now, renderLink, work }) {
+	const titleId = React.useId();
+	const workingSet = workingSetOf(work);
 	return /* @__PURE__ */ jsxs("article", {
-		className: "manager-office__dashboard-card",
-		"data-collapsed": collapsed || void 0,
-		"data-lane": card.lane,
-		children: [/* @__PURE__ */ jsxs("header", {
-			className: "manager-office__dashboard-card-header",
-			children: [
-				/* @__PURE__ */ jsx(EmployeeAvatar, {
-					employee: card.employee,
-					color,
-					index,
-					size: "md"
-				}),
-				/* @__PURE__ */ jsxs("span", {
-					className: "manager-office__dashboard-card-owner",
-					children: [/* @__PURE__ */ jsx("strong", { children: card.employee.name }), /* @__PURE__ */ jsx("small", {
-						className: "sigvelo-truncate",
-						children: connectedEmployee ? connectedEmployee.role : "Employee offline"
-					})]
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					"aria-expanded": !collapsed,
-					"aria-label": `${collapsed ? "Expand" : "Collapse"} ${card.employee.name} card`,
-					className: "manager-office__dashboard-card-toggle",
-					color: "neutral",
-					onClick: onToggleCollapsed,
-					size: "sm",
-					type: "button",
-					variant: "ghost",
-					children: collapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {})
+		className: "manager-office__lane",
+		"aria-labelledby": titleId,
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				id: titleId,
+				className: "manager-office__lane-heading",
+				children: /* @__PURE__ */ jsx(WorkLink, {
+					employee,
+					now,
+					placement: "lane",
+					renderLink,
+					showEmployee: false,
+					work
 				})
-			]
-		}), !collapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
-			card.lane === "working" || card.lane === "needs-you" && card.handoff ? /* @__PURE__ */ jsx(DashboardBrowserPreview, { card }) : null,
-			card.lane === "done" && card.work ? /* @__PURE__ */ jsxs("section", {
-				className: "manager-office__outcome-summary",
-				"aria-label": "Completed outcome",
-				children: [
-					/* @__PURE__ */ jsx("strong", { children: card.work.title }),
-					/* @__PURE__ */ jsx("p", { children: card.work.summary ?? `${card.work.title} is complete and ready for review.` }),
-					/* @__PURE__ */ jsxs("span", {
-						className: "manager-office__dashboard-updated",
-						children: [
-							"Completed ",
-							/* @__PURE__ */ jsx(Timestamp, {
-								timestamp: card.work.updatedAt,
-								now
-							}),
-							" ago"
-						]
-					})
-				]
-			}) : /* @__PURE__ */ jsxs("div", {
-				className: "manager-office__dashboard-card-copy",
-				children: [
-					/* @__PURE__ */ jsx("strong", { children: title }),
-					/* @__PURE__ */ jsx("small", { children: detail }),
-					card.work ? /* @__PURE__ */ jsxs("span", {
-						className: "manager-office__dashboard-updated",
-						children: [
-							"Updated ",
-							/* @__PURE__ */ jsx(Timestamp, {
-								timestamp: card.work.updatedAt,
-								now
-							}),
-							" ago"
-						]
-					}) : null
-				]
 			}),
-			/* @__PURE__ */ jsx(DashboardConnections, { employee: card.employee }),
-			/* @__PURE__ */ jsx("footer", {
-				className: "manager-office__dashboard-card-actions",
-				children: connectedEmployee && card.lane === "idle" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(LinkButton, {
-					render: renderLink({
-						kind: "new-work",
-						employee: connectedEmployee
-					}),
-					size: "sm",
-					children: [/* @__PURE__ */ jsx(PlayIcon, {}), "Assign work"]
-				}), /* @__PURE__ */ jsxs(LinkButton, {
-					render: renderLink({
-						kind: "new-routine",
-						employee: connectedEmployee
-					}),
-					variant: "ghost",
-					color: "neutral",
-					size: "sm",
-					children: [/* @__PURE__ */ jsx(CalendarIcon, {}), "Set routine"]
-				})] }) : connectedEmployee && card.handoff ? /* @__PURE__ */ jsxs(LinkButton, {
-					render: renderLink({
-						kind: "handoff",
-						employee: connectedEmployee,
-						handoff: card.handoff
-					}),
-					size: "sm",
-					children: [/* @__PURE__ */ jsx(EyeIcon, {}), "Help in browser"]
-				}) : connectedEmployee && card.work ? /* @__PURE__ */ jsxs(LinkButton, {
-					render: renderLink({
-						kind: "work",
-						employee: connectedEmployee,
-						work: card.work
-					}),
-					size: "sm",
-					children: [card.lane === "done" ? /* @__PURE__ */ jsx(CheckIcon, {}) : card.lane === "needs-you" ? /* @__PURE__ */ jsx(WarningIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {}), card.lane === "done" ? "Review result" : card.lane === "needs-you" ? "Open issue" : "Watch work"]
-				}) : /* @__PURE__ */ jsxs(LinkButton, {
-					render: renderLink({
-						kind: "employee",
-						employee: card.employee
-					}),
-					size: "sm",
-					children: [/* @__PURE__ */ jsx(RefreshIcon, {}), "Reconnect"]
-				})
-			})
-		] }) : null]
-	});
-}
-function DashboardFilterMenu({ label, onToggle, options, selected }) {
-	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Button, {
-		variant: "outline",
-		color: "neutral",
-		size: "sm",
-		"aria-label": `${label} filter`,
-		className: "manager-office__filter-trigger",
-		"data-active": selected.size || void 0,
-		render: /* @__PURE__ */ jsx(Menu.Trigger, { unstyled: true }),
-		children: [
-			/* @__PURE__ */ jsx("span", { children: label }),
-			selected.size ? /* @__PURE__ */ jsx("strong", { children: selected.size }) : null,
-			/* @__PURE__ */ jsx(ChevronDownIcon, {})
+			work.summary ? /* @__PURE__ */ jsx("p", {
+				className: "manager-office__lane-summary",
+				children: work.summary
+			}) : null,
+			workingSet.length ? /* @__PURE__ */ jsx("ul", {
+				className: "manager-office__working-set",
+				role: "list",
+				"aria-label": "Working set",
+				children: workingSet.map((item) => /* @__PURE__ */ jsx(WorkingSetItemRow, {
+					employee,
+					item,
+					renderLink,
+					work
+				}, workingSetKey(item)))
+			}) : null
 		]
-	}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
-		sideOffset: 6,
-		align: "start",
-		children: /* @__PURE__ */ jsx(Menu.Popup, {
-			className: "manager-office__filter-popup",
-			children: /* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(Menu.GroupLabel, { children: label }), options.map((option) => /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
-				checked: selected.has(option.value),
-				onCheckedChange: (checked) => onToggle(option.value, checked === true),
-				children: [/* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {}), option.label]
-			}, option.value))] })
-		})
-	}) })] });
+	});
 }
-function AssignWorkMenu({ employees, profileColors, renderLink }) {
-	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Button, {
-		size: "sm",
-		className: "manager-office__assignment-trigger",
-		disabled: !employees.length,
-		render: /* @__PURE__ */ jsx(Menu.Trigger, { unstyled: true }),
-		children: ["Assign work", /* @__PURE__ */ jsx(ChevronDownIcon, {})]
-	}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
-		align: "end",
-		sideOffset: 6,
-		children: /* @__PURE__ */ jsx(Menu.Popup, {
-			"aria-label": "Choose an AI employee",
-			className: "manager-office__assignment-popup",
-			children: /* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(Menu.GroupLabel, { children: "Choose an employee" }), employees.map((employee, index) => /* @__PURE__ */ jsxs(Menu.Item, {
-				"aria-label": `Assign work to ${employee.name}`,
-				className: "manager-office__assignment-item",
-				render: renderLink({
-					kind: "new-work",
-					employee
-				}),
-				children: [
-					/* @__PURE__ */ jsx(EmployeeAvatar, {
-						employee,
-						color: profileColors.get(employee.id),
-						index
-					}),
-					/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("strong", { children: employee.name }), /* @__PURE__ */ jsx("small", {
-						className: "sigvelo-truncate",
-						children: employee.role
-					})] }),
-					/* @__PURE__ */ jsx(ChevronRightIcon, {})
-				]
-			}, employee.id))] })
+function ManagerOfficeAttention({ className, ...props }) {
+	const { employees, renderLink, now } = useOffice();
+	const waits = employees.flatMap((employee) => isConnected(employee) ? employee.handoffs.map((handoff) => ({
+		employee,
+		handoff
+	})) : []);
+	const reviews = employees.flatMap((employee) => isConnected(employee) ? reviewWorkFor(employee).map((work) => ({
+		employee,
+		work
+	})) : []);
+	if (!waits.length && !reviews.length) return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx("manager-office__attention", className),
+		"data-recipe": "page",
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			icon: /* @__PURE__ */ jsx(CheckIcon, {}),
+			title: "Nothing needs you",
+			description: "Employee connection state remains visible in the roster."
 		})
-	}) })] });
-}
-function employeeMatchesUtilization(employee, selected) {
-	if (!selected.size) return true;
-	if (!isConnected(employee)) return selected.has("connector-issue");
-	const matches = [];
-	if (employee.browserPreview) matches.push("browser");
-	if (employee.routines.length) matches.push("routines");
-	else matches.push("no-routines");
-	if (employee.channels.some((channel) => channel.status !== "connected")) matches.push("connector-issue");
-	return matches.some((value) => selected.has(value));
-}
-function niceAxisMaximum(values) {
-	const maximum = Math.max(...values, 1);
-	const roughStep = maximum / 2;
-	const magnitude = 10 ** Math.floor(Math.log10(roughStep));
-	const normalized = roughStep / magnitude;
-	const step = (normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10) * magnitude;
-	return Math.ceil(maximum / step) * step;
-}
-function chartY(value, maximum, height = 76) {
-	return height - 4 - value / maximum * (height - 10);
-}
-function chartPath(values, maximum, width = 260, height = 76) {
-	if (!values.length) return "";
-	return values.map((value, index) => {
-		const x = values.length === 1 ? width / 2 : index / (values.length - 1) * width;
-		const y = chartY(value, maximum, height);
-		return `${index ? "L" : "M"}${x.toFixed(1)},${y.toFixed(1)}`;
-	}).join(" ");
-}
-function chartAreaPath(values, maximum, width = 260, height = 76) {
-	const line = chartPath(values, maximum, width, height);
-	return line ? `${line} L${width},${height - 4} L0,${height - 4} Z` : "";
+	});
+	const both = waits.length > 0 && reviews.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cx("manager-office__attention", className),
+		"data-recipe": "page",
+		children: [waits.length ? /* @__PURE__ */ jsxs("div", {
+			className: "manager-office__attention-group",
+			children: [both ? /* @__PURE__ */ jsx("h2", {
+				className: "manager-office__section-title",
+				children: "Needs you in the browser"
+			}) : null, /* @__PURE__ */ jsx("ul", {
+				className: "manager-office__attention-list sigvelo-stack-list",
+				"aria-label": "Waiting on you",
+				children: waits.map(({ employee, handoff }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(HandoffCard, {
+					employee,
+					handoff,
+					renderLink,
+					now,
+					showEmployee: true
+				}) }, `${employee.id}:${handoff.id}`))
+			})]
+		}) : null, reviews.length ? /* @__PURE__ */ jsxs("div", {
+			className: "manager-office__attention-group",
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: "manager-office__section-title",
+				children: "Ready for you"
+			}), /* @__PURE__ */ jsx("ul", {
+				className: "manager-office__work-list sigvelo-stack-list",
+				"aria-label": "Ready for you",
+				children: reviews.map(({ employee, work }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(WorkLink, {
+					employee,
+					work,
+					placement: "row",
+					renderLink,
+					now,
+					showEmployee: true
+				}) }, `${employee.id}:${work.id}`))
+			})]
+		}) : null]
+	});
 }
-function chartBars(values, maximum, width = 260, height = 76) {
-	const barWidth = Math.max(2, width / Math.max(values.length, 1) - 3);
-	return values.map((value, index) => {
-		const barHeight = Math.max(value ? 3 : 0, value / maximum * (height - 10));
-		const x = values.length === 1 ? width / 2 - barWidth / 2 : index / values.length * width;
-		return /* @__PURE__ */ jsx("rect", {
-			className: "manager-office__analytics-bar",
-			height: barHeight,
-			rx: "2",
-			width: barWidth,
-			x,
-			y: height - 4 - barHeight
-		}, index);
+const employeeDefaults = {
+	className: "manager-office__employee-detail",
+	"data-recipe": "page"
+};
+/** Scope the selected employee without imposing dossier content or column order. */
+function ManagerOfficeEmployeeRoot({ employee, render, ref, ...props }) {
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps(employeeDefaults, props)
+	});
+	return /* @__PURE__ */ jsx(EmployeeContext.Provider, {
+		value: employee,
+		children: element
 	});
 }
-function AnalyticsSeries({ detail, label, tone, timestamps, value, values }) {
-	const axisMaximum = niceAxisMaximum(values);
-	const axisValue = (axisValue) => {
-		if (tone === "roi") return `${Math.round(axisValue)}×`;
-		if (tone === "workload") return `${Math.round(axisValue)}h`;
-		return String(Math.round(axisValue));
-	};
-	const middleIndex = Math.floor(Math.max(timestamps.length - 1, 0) / 2);
-	return /* @__PURE__ */ jsxs("article", {
-		className: "manager-office__analytics-series",
-		"data-tone": tone,
-		children: [/* @__PURE__ */ jsxs("span", {
-			className: "manager-office__analytics-series-copy",
-			children: [
-				/* @__PURE__ */ jsx("small", { children: label }),
-				/* @__PURE__ */ jsx("strong", { children: value }),
-				/* @__PURE__ */ jsx("span", { children: detail })
-			]
+function ManagerOfficeEmployeeHeader({ className, ...props }) {
+	const employee = useEmployee();
+	const { profileColors } = useOffice();
+	const profileColor = profileColors.get(employee.id) ?? chromeProfileColor(employee.id);
+	return /* @__PURE__ */ jsxs("header", {
+		...props,
+		className: cx("manager-office__employee-header", className),
+		children: [/* @__PURE__ */ jsx(EmployeeAvatar, {
+			employee,
+			color: profileColor,
+			size: "lg"
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "manager-office__analytics-chart",
-			role: "img",
-			"aria-label": `${label} by date over the selected period, from 0 to ${axisValue(axisMaximum)}`,
+			className: "manager-office__briefing",
 			children: [
-				/* @__PURE__ */ jsxs("span", {
-					className: "manager-office__analytics-y-axis",
-					"aria-hidden": "true",
-					children: [
-						/* @__PURE__ */ jsx("span", { children: axisValue(axisMaximum) }),
-						/* @__PURE__ */ jsx("span", { children: axisValue(axisMaximum / 2) }),
-						/* @__PURE__ */ jsx("span", { children: axisValue(0) })
-					]
+				/* @__PURE__ */ jsx("strong", {
+					className: "sigvelo-truncate",
+					children: employee.name
 				}),
-				/* @__PURE__ */ jsxs("svg", {
-					viewBox: "0 0 260 76",
-					"aria-hidden": "true",
-					preserveAspectRatio: "none",
-					children: [
-						/* @__PURE__ */ jsx("path", {
-							className: "manager-office__analytics-gridline",
-							d: "M0 4H260M0 38H260M0 72H260"
-						}),
-						/* @__PURE__ */ jsx("path", {
-							className: "manager-office__analytics-axis-line",
-							d: "M0 4V72H260"
-						}),
-						tone === "outcomes" ? chartBars(values, axisMaximum) : /* @__PURE__ */ jsxs(Fragment, { children: [
-							/* @__PURE__ */ jsx("path", {
-								className: "manager-office__analytics-area",
-								d: chartAreaPath(values, axisMaximum)
-							}),
-							/* @__PURE__ */ jsx("path", {
-								className: "manager-office__analytics-line",
-								d: chartPath(values, axisMaximum)
-							}),
-							values.length ? /* @__PURE__ */ jsx("circle", {
-								className: "manager-office__analytics-endpoint",
-								cx: "260",
-								cy: chartY(values.at(-1) ?? 0, axisMaximum),
-								r: "3"
-							}) : null
-						] })
-					]
+				/* @__PURE__ */ jsx("small", {
+					className: "sigvelo-truncate",
+					children: employee.email
 				}),
-				/* @__PURE__ */ jsxs("span", {
-					className: "manager-office__analytics-x-axis",
-					"aria-hidden": "true",
-					children: [
-						/* @__PURE__ */ jsx("span", { children: analyticsDateLabel(timestamps[0]) }),
-						/* @__PURE__ */ jsx("span", { children: analyticsDateLabel(timestamps[middleIndex]) }),
-						/* @__PURE__ */ jsx("span", { children: analyticsDateLabel(timestamps.at(-1)) })
-					]
+				/* @__PURE__ */ jsx("p", {
+					className: "manager-office__role",
+					children: employee.role
 				})
 			]
 		})]
 	});
 }
-function aggregateAnalytics(analytics, employeeIds, now, rangeDays) {
-	const cutoff = now - rangeDays * 24 * 60 * 6e4;
-	const buckets = /* @__PURE__ */ new Map();
-	for (const employee of analytics) {
-		if (!employeeIds.has(employee.employeeId)) continue;
-		for (const point of employee.points) {
-			if (point.timestamp < cutoff || point.timestamp > now) continue;
-			const day = new Date(point.timestamp);
-			day.setHours(0, 0, 0, 0);
-			const timestamp = day.getTime();
-			const current = buckets.get(timestamp) ?? {
-				timestamp,
-				completed: 0,
-				workloadHours: 0,
-				estimatedCost: 0
-			};
-			current.completed += point.completed;
-			current.workloadHours += point.workloadHours;
-			current.estimatedCost += point.estimatedCost;
-			buckets.set(timestamp, current);
-		}
-	}
-	return [...buckets.values()].sort((left, right) => left.timestamp - right.timestamp);
+function ManagerOfficeHandoffs({ className, ...props }) {
+	const employee = useEmployee();
+	const { renderLink, now } = useOffice();
+	return employee.handoffs.length ? /* @__PURE__ */ jsx("section", {
+		...props,
+		className: cx("manager-office__employee-handoffs", className),
+		"aria-label": "Waiting on you",
+		children: employee.handoffs.map((handoff) => /* @__PURE__ */ jsx(HandoffCard, {
+			employee,
+			handoff,
+			renderLink,
+			now,
+			showEmployee: false
+		}, handoff.id))
+	}) : null;
 }
-function DashboardAnalytics({ analytics, currency, employeeIds, now, onExportReport, rangeDays, setRangeDays }) {
-	const points = aggregateAnalytics(analytics, new Set(employeeIds), now, rangeDays);
-	const completed = points.reduce((sum, point) => sum + point.completed, 0);
-	const workload = points.reduce((sum, point) => sum + point.workloadHours, 0);
-	const hourlyWageEquivalent = 45;
-	const monthlyCostPerEmployee = 28;
-	const monthlyAICost = employeeIds.length * monthlyCostPerEmployee;
-	const selectedPeriodAICost = monthlyAICost * rangeDays / 30;
-	const laborValue = workload * hourlyWageEquivalent;
-	const roiMultiple = selectedPeriodAICost ? laborValue / selectedPeriodAICost : 0;
-	const dailyAICost = monthlyAICost / 30;
-	const roiValues = points.map((point) => dailyAICost ? point.workloadHours * hourlyWageEquivalent / dailyAICost : 0);
-	const money = React.useMemo(() => new Intl.NumberFormat(void 0, {
-		currency,
-		maximumFractionDigits: 0,
-		style: "currency"
-	}), [currency]);
+function ManagerOfficeWorkSection({ className, ...props }) {
+	const employee = useEmployee();
+	const { renderLink, now } = useOffice();
 	return /* @__PURE__ */ jsxs("section", {
-		className: "manager-office__analytics",
-		"aria-labelledby": "manager-office-analytics-title",
-		children: [/* @__PURE__ */ jsxs("header", {
-			className: "manager-office__analytics-header",
-			children: [/* @__PURE__ */ jsx("h2", {
-				id: "manager-office-analytics-title",
-				children: "Your workforce at a glance"
-			}), /* @__PURE__ */ jsxs("span", {
-				className: "manager-office__analytics-actions",
-				children: [/* @__PURE__ */ jsxs(Select.Root, {
-					value: String(rangeDays),
-					onValueChange: (value) => setRangeDays(Number(value)),
-					children: [/* @__PURE__ */ jsxs(Select.Trigger, {
-						className: "manager-office__analytics-range",
-						"aria-label": "Analytics time range",
-						children: [
-							/* @__PURE__ */ jsx(CalendarIcon, {}),
-							/* @__PURE__ */ jsxs("span", { children: [
-								/* @__PURE__ */ jsx("span", {
-									className: "manager-office__analytics-range-prefix",
-									children: "Last "
-								}),
-								rangeDays,
-								" days"
-							] }),
-							/* @__PURE__ */ jsx(Select.Icon, { children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
-						]
-					}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
-						sideOffset: 4,
-						children: /* @__PURE__ */ jsx(Select.Popup, { children: /* @__PURE__ */ jsx(Select.List, { children: [
-							7,
-							30,
-							90
-						].map((days) => /* @__PURE__ */ jsxs(Select.Item, {
-							value: String(days),
-							children: [/* @__PURE__ */ jsx(Select.ItemIndicator, {}), /* @__PURE__ */ jsxs(Select.ItemText, { children: [
-								"Last ",
-								days,
-								" days"
-							] })]
-						}, days)) }) })
-					}) })]
-				}), onExportReport ? /* @__PURE__ */ jsxs(Button, {
-					"aria-label": "Export report",
-					className: "manager-office__analytics-export",
-					title: "Export report",
-					type: "button",
-					size: "sm",
-					variant: "outline",
-					onClick: () => onExportReport({
-						employeeIds,
-						rangeDays
-					}),
-					children: [/* @__PURE__ */ jsx(DownloadIcon, {}), /* @__PURE__ */ jsxs("span", {
-						className: "manager-office__analytics-export-label",
-						children: ["Export", /* @__PURE__ */ jsx("span", {
-							className: "manager-office__export-report-suffix",
-							children: " report"
-						})]
-					})]
-				}) : null]
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "manager-office__analytics-series-grid",
-			children: [
-				/* @__PURE__ */ jsx(AnalyticsSeries, {
-					detail: `${(completed / Math.max(employeeIds.length, 1)).toFixed(1)} per employee`,
-					label: "Completed outcomes",
-					tone: "outcomes",
-					timestamps: points.map((point) => point.timestamp),
-					value: String(completed),
-					values: points.map((point) => point.completed)
-				}),
-				/* @__PURE__ */ jsx(AnalyticsSeries, {
-					detail: `${(workload / Math.max(employeeIds.length, 1)).toFixed(1)}h per employee`,
-					label: "Workload",
-					tone: "workload",
-					timestamps: points.map((point) => point.timestamp),
-					value: `${Math.round(workload)}h`,
-					values: points.map((point) => point.workloadHours)
-				}),
-				/* @__PURE__ */ jsx(AnalyticsSeries, {
-					detail: `${money.format(hourlyWageEquivalent)}/hr equivalent · ${money.format(monthlyCostPerEmployee)}/employee/mo`,
-					label: "Return on investment",
-					tone: "roi",
-					timestamps: points.map((point) => point.timestamp),
-					value: `${roiMultiple.toFixed(1)}×`,
-					values: roiValues
-				})
-			]
+		...props,
+		className: cx("manager-office__section", className),
+		children: [/* @__PURE__ */ jsx("header", {
+			className: "manager-office__section-header",
+			children: /* @__PURE__ */ jsxs("h2", {
+				className: "manager-office__section-title",
+				children: [/* @__PURE__ */ jsx(MessageSquareIcon, {}), "Work"]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "manager-office__section-content",
+			children: employee.work.length ? /* @__PURE__ */ jsx("ul", {
+				className: "manager-office__work-list sigvelo-stack-list",
+				children: employee.work.map((work) => /* @__PURE__ */ jsx("li", { children: workingSetOf(work).length ? /* @__PURE__ */ jsx(WorkLane, {
+					employee,
+					now,
+					renderLink,
+					work
+				}) : /* @__PURE__ */ jsx(WorkLink, {
+					employee,
+					now,
+					placement: "row",
+					renderLink,
+					showEmployee: false,
+					work
+				}) }, work.id))
+			}) : /* @__PURE__ */ jsx("p", {
+				className: "manager-office__section-empty",
+				children: "No work yet."
+			})
 		})]
 	});
 }
-function DashboardView({ analytics, analyticsCurrency, employees, now, onExportReport, profileColors, renderLink }) {
-	const lanes = dashboardLanes;
-	const [rangeDays, setRangeDays] = React.useState(30);
-	const [employeeFilters, setEmployeeFilters] = React.useState(() => /* @__PURE__ */ new Set());
-	const [appFilters, setAppFilters] = React.useState(() => /* @__PURE__ */ new Set());
-	const [utilizationFilters, setUtilizationFilters] = React.useState(() => /* @__PURE__ */ new Set());
-	const [collapsedLanes, setCollapsedLanes] = React.useState(() => /* @__PURE__ */ new Set());
-	const [collapsedCards, setCollapsedCards] = React.useState(() => /* @__PURE__ */ new Set());
-	const filteredEmployees = employees.filter((employee) => {
-		const connected = isConnected(employee);
-		if (employeeFilters.size && !employeeFilters.has(employee.id)) return false;
-		if (appFilters.size && (!connected || !employee.channels.some((channel) => appFilters.has(channel.name)))) return false;
-		return employeeMatchesUtilization(employee, utilizationFilters);
-	});
-	const cardsByLane = new Map(lanes.map((lane) => [lane, dashboardCards(filteredEmployees, lane)]));
-	const appOptions = [...new Set(employees.flatMap((employee) => isConnected(employee) ? employee.channels.map((channel) => channel.name) : []))].sort((left, right) => left.localeCompare(right)).map((name) => ({
-		label: name,
-		value: name
-	}));
-	const filtersActive = employeeFilters.size > 0 || appFilters.size > 0 || utilizationFilters.size > 0;
-	const activeFilterCount = employeeFilters.size + appFilters.size + utilizationFilters.size;
-	const clearFilters = () => {
-		setEmployeeFilters(/* @__PURE__ */ new Set());
-		setAppFilters(/* @__PURE__ */ new Set());
-		setUtilizationFilters(/* @__PURE__ */ new Set());
-	};
-	const toggleLane = (lane) => setCollapsedLanes((current) => {
-		const next = new Set(current);
-		if (next.has(lane)) next.delete(lane);
-		else next.add(lane);
-		return next;
-	});
-	const toggleCard = (cardId) => setCollapsedCards((current) => {
-		const next = new Set(current);
-		if (next.has(cardId)) next.delete(cardId);
-		else next.add(cardId);
-		return next;
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "manager-office__dashboard-content",
-		"data-recipe": "page",
-		children: [
-			/* @__PURE__ */ jsxs("section", {
-				className: "manager-office__dashboard-controls",
-				"aria-label": "Workforce controls",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "manager-office__workforce-actions",
-					"aria-label": "Workforce actions",
-					children: /* @__PURE__ */ jsx(AssignWorkMenu, {
-						employees: employees.filter(isConnected),
-						profileColors,
-						renderLink
-					})
-				}), /* @__PURE__ */ jsxs("section", {
-					className: "manager-office__filters",
-					"aria-label": "Filter AI employees",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "manager-office__filters-main",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "manager-office__filters-heading",
-							children: [/* @__PURE__ */ jsx("strong", { children: "Filters" }), filtersActive ? /* @__PURE__ */ jsxs("span", { children: [activeFilterCount, " active"] }) : null]
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "manager-office__filter-categories",
-							children: [
-								/* @__PURE__ */ jsx(DashboardFilterMenu, {
-									label: "Employee",
-									options: employees.map((employee) => ({
-										label: employee.name,
-										value: employee.id
-									})),
-									selected: employeeFilters,
-									onToggle: (value, checked) => toggleDashboardFilter(setEmployeeFilters, value, checked)
-								}),
-								/* @__PURE__ */ jsx(DashboardFilterMenu, {
-									label: "Apps",
-									options: appOptions,
-									selected: appFilters,
-									onToggle: (value, checked) => toggleDashboardFilter(setAppFilters, value, checked)
-								}),
-								/* @__PURE__ */ jsx(DashboardFilterMenu, {
-									label: "Utilization",
-									options: [
-										{
-											label: "Live browser connected",
-											value: "browser"
-										},
-										{
-											label: "Has routines",
-											value: "routines"
-										},
-										{
-											label: "No routines",
-											value: "no-routines"
-										},
-										{
-											label: "Connection issue",
-											value: "connector-issue"
-										}
-									],
-									selected: utilizationFilters,
-									onToggle: (value, checked) => toggleDashboardFilter(setUtilizationFilters, value, checked)
-								}),
-								filtersActive ? /* @__PURE__ */ jsxs(Button, {
-									className: "manager-office__filter-clear",
-									type: "button",
-									variant: "ghost",
-									size: "sm",
-									onClick: clearFilters,
-									children: [/* @__PURE__ */ jsx(XIcon, {}), "Clear filters"]
-								}) : null
-							]
-						})]
-					}), /* @__PURE__ */ jsxs("p", {
-						"aria-live": "polite",
+function ManagerOfficeRoutines({ className, ...props }) {
+	const employee = useEmployee();
+	const { renderLink } = useOffice();
+	return /* @__PURE__ */ jsx("section", {
+		...props,
+		className: cx("manager-office__section", className),
+		"aria-label": "Routines",
+		children: /* @__PURE__ */ jsxs(Collapsible.Root, {
+			defaultOpen: true,
+			children: [/* @__PURE__ */ jsxs(Button, {
+				render: /* @__PURE__ */ jsx(Collapsible.Trigger, { unstyled: true }),
+				type: "button",
+				variant: "ghost",
+				color: "neutral",
+				size: "sm",
+				className: "manager-office__routine-trigger",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "manager-office__identity",
+					children: [/* @__PURE__ */ jsx(CalendarIcon, {}), /* @__PURE__ */ jsx("strong", { children: "Routines" })]
+				}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "sigvelo-disclosure-chevron" })]
+			}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+				unstyled: true,
+				children: employee.routines.length ? /* @__PURE__ */ jsx("ul", {
+					className: "manager-office__routine-list sigvelo-stack-list",
+					children: employee.routines.map((routine) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(LinkButton, {
+						render: renderLink({
+							kind: "routine",
+							employee,
+							routine
+						}),
+						variant: "ghost",
+						color: "neutral",
+						size: "sm",
+						className: "manager-office__routine-link",
 						children: [
-							"Showing ",
-							/* @__PURE__ */ jsx("strong", { children: filteredEmployees.length }),
-							" of ",
-							employees.length,
-							" employees"
-						]
-					})]
-				})]
-			}),
-			analytics.length ? /* @__PURE__ */ jsx(DashboardAnalytics, {
-				analytics,
-				currency: analyticsCurrency,
-				employeeIds: filteredEmployees.map((employee) => employee.id),
-				now,
-				onExportReport,
-				rangeDays,
-				setRangeDays
-			}) : null,
-			/* @__PURE__ */ jsx("div", {
-				className: "manager-office__kanban",
-				"aria-label": "AI employee progress board",
-				style: { gridTemplateColumns: lanes.map((lane) => collapsedLanes.has(lane) ? "4rem" : "minmax(15rem, 1fr)").join(" ") },
-				children: lanes.map((lane) => {
-					const cards = cardsByLane.get(lane) ?? [];
-					const visibleCards = cards.slice(0, 5);
-					const headingId = `manager-office-lane-${lane}`;
-					const collapsed = collapsedLanes.has(lane);
-					return /* @__PURE__ */ jsxs("section", {
-						className: "manager-office__kanban-lane",
-						"data-collapsed": collapsed || void 0,
-						"data-lane": lane,
-						"aria-labelledby": headingId,
-						children: [/* @__PURE__ */ jsxs("header", {
-							className: "manager-office__kanban-lane-header",
-							children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("h3", {
-								id: headingId,
-								children: dashboardLaneCopy[lane].title
-							}), /* @__PURE__ */ jsx("small", { children: dashboardLaneCopy[lane].description })] }), /* @__PURE__ */ jsxs("span", {
-								className: "manager-office__kanban-lane-actions",
+							routine.enabled ? /* @__PURE__ */ jsx(CalendarIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "manager-office__identity",
 								children: [/* @__PURE__ */ jsx("strong", {
-									"aria-label": `${cards.length} items`,
-									children: cards.length
-								}), /* @__PURE__ */ jsx(Button, {
-									"aria-expanded": !collapsed,
-									"aria-label": `${collapsed ? "Expand" : "Collapse"} ${dashboardLaneCopy[lane].title} column`,
-									className: "manager-office__kanban-lane-toggle",
-									color: "neutral",
-									onClick: () => toggleLane(lane),
-									size: "sm",
-									type: "button",
-									variant: "ghost",
-									children: collapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {})
+									className: "sigvelo-truncate",
+									children: routine.name
+								}), /* @__PURE__ */ jsx("small", {
+									className: "sigvelo-truncate",
+									children: routineDetail(routine)
 								})]
-							})]
-						}), !collapsed ? /* @__PURE__ */ jsxs("div", {
-							className: "manager-office__kanban-cards",
-							children: [
-								visibleCards.map((card) => /* @__PURE__ */ jsx(DashboardCard, {
-									card,
-									collapsed: collapsedCards.has(dashboardCardId(card)),
-									color: profileColors.get(card.employee.id),
-									index: employees.indexOf(card.employee),
-									now,
-									onToggleCollapsed: () => toggleCard(dashboardCardId(card)),
-									renderLink
-								}, dashboardCardId(card))),
-								!cards.length ? /* @__PURE__ */ jsx("p", {
-									className: "manager-office__kanban-empty",
-									children: "Nothing here right now."
-								}) : null,
-								cards.length > visibleCards.length ? /* @__PURE__ */ jsxs("p", {
-									className: "manager-office__kanban-more",
-									children: [
-										"+",
-										cards.length - visibleCards.length,
-										" more match · Refine filters to narrow"
-									]
-								}) : null
-							]
-						}) : null]
-					}, lane);
+							}),
+							/* @__PURE__ */ jsx(ChevronRightIcon, { className: "manager-office__row-chevron" })
+						]
+					}) }, routine.id))
+				}) : /* @__PURE__ */ jsx("p", {
+					className: "manager-office__section-empty",
+					children: "No routines yet."
 				})
+			})]
+		})
+	});
+}
+function ManagerOfficeChannels({ className, ...props }) {
+	const employee = useEmployee();
+	return /* @__PURE__ */ jsxs("section", {
+		...props,
+		className: cx("manager-office__section", className),
+		children: [/* @__PURE__ */ jsx("header", {
+			className: "manager-office__section-header",
+			children: /* @__PURE__ */ jsxs("h2", {
+				className: "manager-office__section-title",
+				children: [/* @__PURE__ */ jsx(LinkIcon, {}), "Channels"]
 			})
-		]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "manager-office__section-content",
+			children: employee.channels.length ? /* @__PURE__ */ jsx("ul", {
+				className: "manager-office__channel-list sigvelo-stack-list",
+				children: employee.channels.map((channel) => /* @__PURE__ */ jsx(ChannelRow, { channel }, channel.id))
+			}) : /* @__PURE__ */ jsx("p", {
+				className: "manager-office__section-empty",
+				children: "Nothing connected yet."
+			})
+		})]
+	});
+}
+function ManagerOfficeMain({ render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "main",
+		render,
+		ref,
+		props: mergeProps({ className: "manager-office__main" }, props)
 	});
 }
-function EmployeeDetail({ employee, renderLink, now, profileColor }) {
-	if (!isConnected(employee)) return /* @__PURE__ */ jsx("div", {
+function ManagerOfficeColumns({ render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps({ className: "manager-office__employee-columns" }, props)
+	});
+}
+function ManagerOfficeAside({ render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "aside",
+		render,
+		ref,
+		props: mergeProps({ className: "manager-office__employee-aside" }, props)
+	});
+}
+/** Honest disconnected state; the host chooses when and where to display it. */
+function ManagerOfficeConnectionState({ employee }) {
+	return /* @__PURE__ */ jsx("div", {
 		"data-recipe": "page",
 		children: /* @__PURE__ */ jsx(EmptyState, {
 			icon: employee.status === "connecting" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(MonitorIcon, {}),
@@ -1479,278 +1098,50 @@ function EmployeeDetail({ employee, renderLink, now, profileColor }) {
 			description: employee.statusDescription
 		})
 	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "manager-office__employee-detail",
-		"data-recipe": "page",
-		children: [
-			/* @__PURE__ */ jsxs("header", {
-				className: "manager-office__employee-header",
-				children: [/* @__PURE__ */ jsx(EmployeeAvatar, {
-					employee,
-					color: profileColor,
-					size: "lg"
-				}), /* @__PURE__ */ jsxs("span", {
-					className: "manager-office__identity",
-					children: [/* @__PURE__ */ jsx("strong", {
-						className: "sigvelo-truncate",
-						children: employee.name
-					}), /* @__PURE__ */ jsxs("small", {
-						className: "manager-office__role sigvelo-truncate",
-						children: [
-							employee.email,
-							" · ",
-							employee.role
-						]
-					})]
-				})]
-			}),
-			employee.handoffs.length ? /* @__PURE__ */ jsx("section", {
-				className: "manager-office__employee-handoffs",
-				"aria-label": "Waiting on you",
-				children: employee.handoffs.map((handoff) => /* @__PURE__ */ jsx(HandoffCard, {
-					employee,
-					handoff,
-					renderLink,
-					now,
-					showEmployee: false
-				}, handoff.id))
-			}) : null,
-			/* @__PURE__ */ jsxs("div", {
-				className: "manager-office__employee-columns",
-				children: [/* @__PURE__ */ jsxs("section", {
-					className: "manager-office__section",
-					children: [/* @__PURE__ */ jsx("header", {
-						className: "manager-office__section-header",
-						children: /* @__PURE__ */ jsxs("h2", {
-							className: "manager-office__section-title",
-							children: [/* @__PURE__ */ jsx(MessageSquareIcon, {}), "Work"]
-						})
-					}), /* @__PURE__ */ jsx("div", {
-						className: "manager-office__section-content",
-						children: employee.work.length ? /* @__PURE__ */ jsx("ul", {
-							className: "manager-office__work-list sigvelo-stack-list",
-							children: employee.work.map((work) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(LinkButton, {
-								render: renderLink({
-									kind: "work",
-									employee,
-									work
-								}),
-								variant: "ghost",
-								color: "neutral",
-								size: "sm",
-								className: "manager-office__work-link",
-								children: [
-									/* @__PURE__ */ jsx(ThreadStatusIcon, { status: work.status }),
-									/* @__PURE__ */ jsxs("span", {
-										className: "manager-office__identity",
-										children: [/* @__PURE__ */ jsxs("strong", {
-											className: "sigvelo-truncate",
-											children: [work.title, work.status === "attention" ? /* @__PURE__ */ jsx("span", {
-												className: "manager-office__unread-dot",
-												"aria-hidden": "true"
-											}) : null]
-										}), /* @__PURE__ */ jsxs("small", {
-											className: "sigvelo-truncate",
-											children: [
-												threadStatusLabel(work.status),
-												" ·",
-												" ",
-												/* @__PURE__ */ jsx(Timestamp, {
-													timestamp: work.updatedAt,
-													now
-												})
-											]
-										})]
-									}),
-									/* @__PURE__ */ jsx(ChevronRightIcon, { className: "manager-office__row-chevron" })
-								]
-							}) }, work.id))
-						}) : /* @__PURE__ */ jsx(EmptyState, { description: "No work yet." })
-					})]
-				}), /* @__PURE__ */ jsxs("aside", {
-					className: "manager-office__employee-aside",
-					children: [/* @__PURE__ */ jsx("section", {
-						className: "manager-office__section",
-						"aria-label": "Routines",
-						children: /* @__PURE__ */ jsxs(Collapsible.Root, {
-							defaultOpen: true,
-							children: [/* @__PURE__ */ jsxs(Button, {
-								render: /* @__PURE__ */ jsx(Collapsible.Trigger, { unstyled: true }),
-								type: "button",
-								variant: "ghost",
-								color: "neutral",
-								size: "sm",
-								className: "manager-office__routine-trigger",
-								children: [/* @__PURE__ */ jsxs("span", {
-									className: "manager-office__identity",
-									children: [/* @__PURE__ */ jsx(CalendarIcon, {}), /* @__PURE__ */ jsx("strong", { children: "Routines" })]
-								}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "sigvelo-disclosure-chevron" })]
-							}), /* @__PURE__ */ jsx(Collapsible.Panel, {
-								unstyled: true,
-								children: employee.routines.length ? /* @__PURE__ */ jsx("ul", {
-									className: "manager-office__routine-list sigvelo-stack-list",
-									children: employee.routines.map((routine) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(LinkButton, {
-										render: renderLink({
-											kind: "routine",
-											employee,
-											routine
-										}),
-										variant: "ghost",
-										color: "neutral",
-										size: "sm",
-										className: "manager-office__routine-link",
-										children: [
-											routine.enabled ? /* @__PURE__ */ jsx(CalendarIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {}),
-											/* @__PURE__ */ jsxs("span", {
-												className: "manager-office__identity",
-												children: [/* @__PURE__ */ jsx("strong", {
-													className: "sigvelo-truncate",
-													children: routine.name
-												}), /* @__PURE__ */ jsx("small", {
-													className: "sigvelo-truncate",
-													children: routineDetail(routine)
-												})]
-											}),
-											/* @__PURE__ */ jsx(ChevronRightIcon, { className: "manager-office__row-chevron" })
-										]
-									}) }, routine.id))
-								}) : /* @__PURE__ */ jsx(EmptyState, { description: "No routines yet." })
-							})]
-						})
-					}), /* @__PURE__ */ jsxs("section", {
-						className: "manager-office__section",
-						children: [/* @__PURE__ */ jsx("header", {
-							className: "manager-office__section-header",
-							children: /* @__PURE__ */ jsxs("h2", {
-								className: "manager-office__section-title",
-								children: [/* @__PURE__ */ jsx(LinkIcon, {}), "Inputs & outputs"]
-							})
-						}), /* @__PURE__ */ jsx("div", {
-							className: "manager-office__section-content",
-							children: employee.channels.length ? /* @__PURE__ */ jsx("ul", {
-								className: "manager-office__channel-list sigvelo-stack-list",
-								children: employee.channels.map((channel) => /* @__PURE__ */ jsx(ChannelRow, { channel }, channel.id))
-							}) : /* @__PURE__ */ jsx(EmptyState, { description: "Nothing connected yet." })
-						})]
-					})]
-				})]
-			})
-		]
-	});
 }
-/**
-* Multi-employee manager office: a dashboard, aggregate handoffs, employee
-* roster, and one employee dossier. The consuming app owns authentication,
-* Agent connections, routing, and the selected employee's full work surface.
-*/
-function ManagerOffice({ analytics = [], analyticsCurrency = "USD", className, emptyOfficeAction, employees, renderLink, officeActions, onExportReport, renderEmployeeActions, sidebarTogglePlacement = "sidebar", style, view, ...props }) {
-	const titleId = React.useId();
+/** Office data and relative-time boundary; hosts compose their shell and routed content. */
+function ManagerOfficeRoot({ employees, renderLink, render, ref, ...props }) {
 	const [now, setNow] = React.useState(Date.now);
 	React.useEffect(() => {
 		const interval = window.setInterval(() => setNow(Date.now()), 6e4);
 		return () => window.clearInterval(interval);
 	}, []);
-	const selectedEmployee = view.kind === "employee" ? employees.find((employee) => employee.id === view.employeeId) : void 0;
-	const profileColors = rosterProfileColors(employees);
-	if (view.kind === "dashboard") return /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsxs("div", {
-		className: cx("manager-office", "manager-office--dashboard", className),
-		style,
-		...props,
-		children: [/* @__PURE__ */ jsxs(AppTopBar.Root, {
-			"aria-label": "Workforce controls",
-			titleAlign: "start",
-			children: [/* @__PURE__ */ jsx(AppTopBar.Title, { render: /* @__PURE__ */ jsx("h1", {
-				id: titleId,
-				children: "Workforce"
-			}) }), officeActions ? /* @__PURE__ */ jsx(AppTopBar.Trailing, { children: officeActions }) : null]
-		}), /* @__PURE__ */ jsx("main", {
-			className: "manager-office__dashboard",
-			"aria-labelledby": titleId,
-			children: !employees.length ? /* @__PURE__ */ jsx(EmptyState, {
-				icon: /* @__PURE__ */ jsx(PlusIcon, {}),
-				title: "Add your first employee",
-				description: "Connect another profile to manage it here.",
-				children: emptyOfficeAction
-			}) : /* @__PURE__ */ jsx(DashboardView, {
-				analytics,
-				analyticsCurrency,
-				employees,
-				now,
-				onExportReport,
-				profileColors,
-				renderLink
-			})
-		})]
-	}) });
-	const title = view.kind === "attention" ? "Waiting on you" : selectedEmployee?.name ?? "Employee";
-	const mainLabel = view.kind === "attention" ? "Waiting on you" : `${selectedEmployee?.name ?? "Employee"} details`;
-	return /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsx(ResponsiveSidebarShell, {
-		className: cx("manager-office", className),
-		style,
-		sidebarLabel: "employees",
-		sidebarTogglePlacement,
-		showMainLabel: "Show workforce",
-		sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ManagerOfficeSidebar, {
-			closeSidebarOnCompact,
-			employees,
-			renderLink,
-			officeActions,
-			selectedEmployeeId: view.kind === "employee" ? view.employeeId : null
-		}),
-		bar: {
-			label: "Workforce controls",
-			titleRender: /* @__PURE__ */ jsx("h1", {
-				id: titleId,
-				children: title
-			}),
-			title,
-			actions: selectedEmployee && isConnected(selectedEmployee) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsx(AppTopBar.Link, {
-					label: `Start new work with ${selectedEmployee.name}`,
-					tooltip: "New work",
-					render: renderLink({
-						kind: "new-work",
-						employee: selectedEmployee
-					}),
-					children: /* @__PURE__ */ jsx(PencilIcon, {})
-				}),
-				/* @__PURE__ */ jsx(AppTopBar.Link, {
-					label: `Open ${selectedEmployee.name} workspace`,
-					tooltip: "Workspace",
-					render: renderLink({
-						kind: "workspace",
-						employee: selectedEmployee
-					}),
-					children: /* @__PURE__ */ jsx(FolderIcon, {})
-				}),
-				renderEmployeeActions?.(selectedEmployee)
-			] }) : void 0
-		},
-		...props,
-		children: /* @__PURE__ */ jsx("main", {
-			className: "manager-office__main",
-			"aria-label": mainLabel,
-			children: !employees.length ? /* @__PURE__ */ jsx(EmptyState, {
-				icon: /* @__PURE__ */ jsx(PlusIcon, {}),
-				title: "Add your first employee",
-				description: "Connect another profile to manage it here.",
-				children: emptyOfficeAction
-			}) : view.kind === "attention" ? /* @__PURE__ */ jsx(AttentionView, {
-				employees,
-				renderLink,
-				now
-			}) : selectedEmployee ? /* @__PURE__ */ jsx(EmployeeDetail, {
-				employee: selectedEmployee,
-				renderLink,
-				now,
-				profileColor: profileColors.get(selectedEmployee.id)
-			}) : /* @__PURE__ */ jsx(EmptyState, {
-				icon: /* @__PURE__ */ jsx(WarningIcon, {}),
-				title: "Employee unavailable",
-				description: "Choose another employee from the roster."
-			})
-		})
-	}) });
+	const profileColors = React.useMemo(() => rosterProfileColors(employees), [employees]);
+	const value = React.useMemo(() => ({
+		employees,
+		renderLink,
+		now,
+		profileColors
+	}), [
+		employees,
+		renderLink,
+		now,
+		profileColors
+	]);
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps({ className: "manager-office" }, props)
+	});
+	return /* @__PURE__ */ jsx(OfficeContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(Tooltip.Provider, { children: element })
+	});
 }
+const ManagerOffice = {
+	Root: ManagerOfficeRoot,
+	Main: ManagerOfficeMain,
+	Attention: ManagerOfficeAttention,
+	Employee: ManagerOfficeEmployeeRoot,
+	EmployeeHeader: ManagerOfficeEmployeeHeader,
+	Handoffs: ManagerOfficeHandoffs,
+	Columns: ManagerOfficeColumns,
+	Aside: ManagerOfficeAside,
+	Work: ManagerOfficeWorkSection,
+	Routines: ManagerOfficeRoutines,
+	Channels: ManagerOfficeChannels,
+	ConnectionState: ManagerOfficeConnectionState
+};
 //#endregion
 export { ManagerOffice, ManagerOfficeSidebar, ManagerOfficeSidebarAlert };