@mcp-b/react-components 0.44.1 → 0.46.0

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

@@ -1,12 +1,16 @@
+import { getMcpServerIconSrc } from "../../utils/mcp-server-catalog.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { C as FolderIcon, D as LinkIcon, P as MonitorIcon, R as PauseIcon, T as InfoIcon, U as RefreshIcon, V as PlusIcon, _ as DotIcon, a as ArrowUpIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon, j as MessageSquareIcon, n as ArrowDownIcon, nt as XIcon, p as ChevronRightIcon, q as SpinnerIcon, u as CalendarIcon, z as PencilIcon } from "../../icons-Dw-im7lg.js";
-import { Button } from "../foundations/Button.js";
-import { Tooltip } from "../foundations/Tooltip.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { EmptyState } from "../foundations/EmptyState.js";
+import { B as PlayIcon, C as FolderIcon, D as LinkIcon, P as MonitorIcon, R as PauseIcon, T as InfoIcon, U as RefreshIcon, V as PlusIcon, _ 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, q as SpinnerIcon, u as CalendarIcon, v as DownloadIcon, z as PencilIcon } from "../../icons-BNEY4gO5.js";
+import { Button } from "../foundations/Button.js";
 import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
+import { Tooltip } from "../foundations/Tooltip.js";
+import { Menu } from "../foundations/Menu.js";
 import { Avatar } from "../foundations/Avatar.js";
 import { AppIcon } from "../foundations/AppIcon.js";
+import { n as findCatalogMcpServerCard } from "../../mcp-server-7NR24ASj.js";
+import { Select } from "../foundations/Select.js";
+import { EmptyState } from "../foundations/EmptyState.js";
 import { LinkButton } from "../foundations/LinkButton.js";
 import "../foundations/icons.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
@@ -86,10 +90,10 @@ function chromeProfileColor(seed, taken) {
 //#endregion
 //#region src/components/agents-sdk/ManagerOffice.tsx
 const statusLabels = {
-	"needs-you": "Needs you",
+	"needs-you": "Waiting on you",
 	working: "Working",
 	idle: "Idle",
-	issue: "Issue",
+	issue: "Waiting on you",
 	offline: "Offline",
 	connecting: "Connecting…",
 	unavailable: "Unavailable"
@@ -119,6 +123,27 @@ 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", {
+		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 })
+	}) })] });
+}
 /**
 * Each employee is a Chrome profile, so the bubble wears its profile color —
 * the same palette Chrome assigns profiles from. Chrome's pick is per-machine
@@ -136,52 +161,174 @@ function rosterProfileColors(employees) {
 	}
 	return colors;
 }
-function EmployeeAvatar({ color, employee, size = "sm" }) {
+function EmployeeAvatar({ color, employee, index = 0, size = "sm" }) {
+	const variant = index % 4;
 	return /* @__PURE__ */ jsx(Avatar.Root, {
 		size,
 		shape: "rounded",
+		className: "manager-office__employee-character",
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx(Avatar.Fallback, {
+		children: /* @__PURE__ */ jsxs(Avatar.Fallback, {
+			className: "manager-office__employee-character-fallback",
 			style: {
 				color: color.fg,
-				backgroundColor: color.bg
+				backgroundColor: "transparent"
 			},
-			children: employee.initials
+			children: [/* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 36 36",
+				focusable: "false",
+				role: "presentation",
+				style: { fill: color.bg },
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						x: "5",
+						y: "6",
+						width: "26",
+						height: "25",
+						rx: "7"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: "8",
+						y: "28",
+						width: "8",
+						height: "5",
+						rx: "2.5",
+						opacity: "0.78"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: "20",
+						y: "28",
+						width: "8",
+						height: "5",
+						rx: "2.5",
+						opacity: "0.78"
+					}),
+					variant === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M10 7c.6-3 3.2-5 6.2-5h3.6c3 0 5.6 2 6.2 5Z" }), /* @__PURE__ */ jsx("circle", {
+						cx: "18",
+						cy: "3",
+						r: "1.8"
+					})] }) : variant === 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+						x: "2.5",
+						y: "13",
+						width: "4",
+						height: "10",
+						rx: "2"
+					}), /* @__PURE__ */ jsx("rect", {
+						x: "29.5",
+						y: "13",
+						width: "4",
+						height: "10",
+						rx: "2"
+					})] }) : variant === 2 ? /* @__PURE__ */ jsx("path", {
+						d: "M11 6V3.5h14V6M15 3.5V1.5h6v2",
+						fill: "none",
+						stroke: color.bg,
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M12 7V3l4 3 4-4 4 5Z" }), /* @__PURE__ */ jsx("circle", {
+						cx: "26.5",
+						cy: "7",
+						r: "2"
+					})] }),
+					/* @__PURE__ */ jsx("g", {
+						className: "manager-office__employee-character-face",
+						fill: color.fg,
+						children: variant === 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx("rect", {
+								className: "manager-office__employee-character-visor",
+								x: "10",
+								y: "14",
+								width: "16",
+								height: "8",
+								rx: "4",
+								opacity: "0.94"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "14",
+								cy: "18",
+								r: "1.5",
+								fill: color.bg
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "22",
+								cy: "18",
+								r: "1.5",
+								fill: color.bg
+							})
+						] }) : variant === 3 ? /* @__PURE__ */ jsxs("g", {
+							className: "manager-office__employee-character-glasses",
+							children: [
+								/* @__PURE__ */ jsx("circle", {
+									className: "manager-office__employee-character-lens",
+									cx: "13.5",
+									cy: "17",
+									r: "3"
+								}),
+								/* @__PURE__ */ jsx("circle", {
+									className: "manager-office__employee-character-lens",
+									cx: "22.5",
+									cy: "17",
+									r: "3"
+								}),
+								/* @__PURE__ */ jsx("path", {
+									className: "manager-office__employee-character-bridge",
+									d: "M16.5 17h3"
+								})
+							]
+						}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx("circle", {
+								cx: "13.5",
+								cy: "17",
+								r: "3.2"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "22.5",
+								cy: "17",
+								r: "3.2"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "14.5",
+								cy: "16",
+								r: "1",
+								fill: color.bg,
+								opacity: "0.72"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "23.5",
+								cy: "16",
+								r: "1",
+								fill: color.bg,
+								opacity: "0.72"
+							})
+						] })
+					}),
+					/* @__PURE__ */ jsx("path", {
+						className: "manager-office__employee-character-shine",
+						d: "M9 11c2-2 4.7-3 7.7-3",
+						fill: "none",
+						stroke: color.fg,
+						strokeWidth: "1.5",
+						strokeLinecap: "round"
+					})
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sigvelo-visually-hidden",
+				children: employee.initials
+			})]
 		})
 	});
 }
 /**
-* One glyph per meaning, not one glyph per colour. Colour alone cannot carry
-* these apart: `forced-colors` flattens the palette, and a red/amber pair is
-* the most common colour-vision confusion there is. So an employee asking for
-* a person (`needs-you`), one that has failed (`issue`), and one that cannot be
-* reached at all (`unavailable`) each get a different shape.
+* One glyph per manager action, not one glyph per backend state. Both an
+* employee asking for a person (`needs-you`) and one blocked by an issue
+* (`issue`) require the same response here, so the roster presents both as
+* "Waiting on you" with the warning glyph. An unreachable employee remains a
+* distinct shape because there is no work for the manager to resume yet.
 *
 * `working` and `connecting` deliberately share the spinner: both mean "in
 * motion, wait", and mistaking one for the other costs the manager nothing.
 */
-function statusIcon(status) {
-	if (status === "needs-you") return /* @__PURE__ */ jsx(InfoIcon, {});
-	if (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, {});
-}
-/**
-* The glyph makes the state scannable and the unframed word keeps it readable
-* without hover. The employee header already provides the visual grouping.
-*/
-function EmployeeStatus({ employee }) {
-	const count = employeeAttentionCount(employee);
-	const label = count ? `${statusLabels[employee.status]} · ${count}` : statusLabels[employee.status];
-	return /* @__PURE__ */ jsxs("span", {
-		className: "manager-office__status",
-		"data-status": employee.status,
-		"aria-label": label,
-		children: [statusIcon(employee.status), /* @__PURE__ */ jsx("span", { children: label })]
-	});
-}
 function ThreadStatusIcon({ status }) {
 	return /* @__PURE__ */ jsx("span", {
 		className: "manager-office__thread-status",
@@ -215,21 +362,6 @@ function Timestamp({ now, timestamp }) {
 		children: relativeTime(timestamp, now)
 	});
 }
-function RoutineEvidence({ employee }) {
-	const { completed, finished } = employee.routines.reduce((total, routine) => ({
-		completed: total.completed + routine.completedRuns,
-		finished: total.finished + routine.finishedRuns
-	}), {
-		completed: 0,
-		finished: 0
-	});
-	const label = finished === 0 ? "No runs yet" : `${completed}/${finished} runs`;
-	return /* @__PURE__ */ jsxs("span", {
-		className: "manager-office__evidence",
-		"data-complete": finished > 0 && completed === finished ? "" : void 0,
-		children: [finished === 0 ? /* @__PURE__ */ jsx(CalendarIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}), /* @__PURE__ */ jsx("span", { children: label })]
-	});
-}
 const channelDirectionLabels = {
 	input: "In",
 	output: "Out",
@@ -255,6 +387,28 @@ const channelStatusLabels = {
 	"needs-auth": "Needs sign-in",
 	error: "Error"
 };
+function ChannelMark({ channel }) {
+	if (channel.icon) return /* @__PURE__ */ jsx("span", {
+		className: "manager-office__channel-mark",
+		children: channel.icon
+	});
+	const card = findCatalogMcpServerCard({
+		id: channel.id,
+		name: channel.name
+	});
+	const src = card ? getMcpServerIconSrc(card) : void 0;
+	if (src) return /* @__PURE__ */ jsx("span", {
+		className: "manager-office__channel-mark",
+		children: /* @__PURE__ */ jsx("img", {
+			alt: "",
+			className: "sigvelo-brand-mark sigvelo-brand-mark--colorful",
+			decoding: "async",
+			referrerPolicy: "no-referrer",
+			src
+		})
+	});
+	return /* @__PURE__ */ jsx(AppIcon.Fallback, { children: channel.name.slice(0, 1) });
+}
 function ChannelRow({ channel }) {
 	return /* @__PURE__ */ jsxs("li", {
 		className: "manager-office__channel",
@@ -263,10 +417,7 @@ function ChannelRow({ channel }) {
 			/* @__PURE__ */ jsx(AppIcon.Root, {
 				size: "sm",
 				"aria-hidden": "true",
-				children: channel.icon ? /* @__PURE__ */ jsx("span", {
-					className: "manager-office__channel-mark",
-					children: channel.icon
-				}) : /* @__PURE__ */ jsx(AppIcon.Fallback, { children: channel.name.slice(0, 1) })
+				children: /* @__PURE__ */ jsx(ChannelMark, { channel })
 			}),
 			/* @__PURE__ */ jsxs("span", {
 				className: "manager-office__identity",
@@ -339,76 +490,119 @@ function HandoffCard({ employee, handoff, renderLink, now, showEmployee }) {
 		]
 	});
 }
-function EmployeeSidebar({ closeSidebarOnCompact, employees, renderLink, officeActions, profileColors, view }) {
+/** Dense nested action for an employee alert already signalled by the roster status. */
+function ManagerOfficeSidebarAlert({ className, detail, title, ...props }) {
+	return /* @__PURE__ */ jsxs(LinkButton, {
+		variant: "ghost",
+		color: "neutral",
+		size: "sm",
+		className: cx("manager-office__sidebar-alert", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "manager-office__sidebar-alert-copy",
+			children: [/* @__PURE__ */ jsx("strong", { children: title }), /* @__PURE__ */ jsxs("span", {
+				className: "manager-office__sidebar-alert-meta",
+				children: [detail ? /* @__PURE__ */ jsx("small", { children: detail }) : null, /* @__PURE__ */ jsx("span", {
+					className: "manager-office__sidebar-alert-status",
+					children: "Blocked"
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(ChevronRightIcon, {
+			className: "manager-office__sidebar-alert-chevron",
+			"aria-hidden": "true"
+		})]
+	});
+}
+/**
+* Shared Manager Office rail. Stories and host shells may add employee-owned
+* 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 }) {
 	const rosterLabelId = React.useId();
-	const attentionCount = employees.reduce((total, employee) => total + employeeAttentionCount(employee), 0);
-	const selectedEmployeeId = view.kind === "employee" ? view.employeeId : null;
-	return /* @__PURE__ */ jsxs("nav", {
-		className: "manager-office__sidebar",
-		"aria-label": "Manager office",
+	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]);
+	return /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsxs("nav", {
+		className: cx("manager-office__sidebar", className),
+		"aria-label": "Workforce",
+		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "manager-office__sidebar-heading",
-				children: [/* @__PURE__ */ jsx("strong", { children: "Office" }), /* @__PURE__ */ jsx("span", {
+				children: [/* @__PURE__ */ jsx("strong", { children: "Workforce" }), officeActions ? /* @__PURE__ */ jsx("span", {
 					className: "manager-office__sidebar-actions",
 					children: officeActions
-				})]
-			}),
-			/* @__PURE__ */ jsxs(LinkButton, {
-				render: renderLink({ kind: "attention" }),
-				onClick: closeSidebarOnCompact,
-				variant: "ghost",
-				color: "neutral",
-				size: "sm",
-				className: "manager-office__attention-nav",
-				"aria-current": view.kind === "attention" ? "page" : void 0,
-				children: [/* @__PURE__ */ jsx(WarningIcon, {}), /* @__PURE__ */ jsx("span", { children: attentionCount ? `Needs you (${attentionCount})` : "Needs you" })]
+				}) : null]
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "manager-office__nav-label",
+				className: "manager-office__nav-label sigvelo-visually-hidden",
 				id: rosterLabelId,
 				children: "Employees"
 			}),
 			/* @__PURE__ */ jsx("ul", {
-				className: "manager-office__employee-nav sigvelo-stack-list",
+				ref: employeeNavRef,
+				className: "manager-office__employee-nav",
 				"aria-labelledby": rosterLabelId,
-				children: employees.map((employee) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(LinkButton, {
-					render: renderLink({
-						kind: "employee",
-						employee
-					}),
-					onClick: closeSidebarOnCompact,
-					variant: "ghost",
-					color: "neutral",
-					size: "sm",
-					className: "manager-office__employee-link",
-					"aria-current": selectedEmployeeId === employee.id ? "page" : void 0,
-					"aria-label": `Open ${employee.name} · ${employeeStatusText(employee)}`,
-					children: [
-						/* @__PURE__ */ jsx(EmployeeAvatar, {
-							employee,
-							color: profileColors.get(employee.id)
-						}),
-						/* @__PURE__ */ jsxs("span", {
-							className: "manager-office__identity",
-							children: [/* @__PURE__ */ jsx("strong", {
-								className: "sigvelo-truncate",
-								children: employee.name
-							}), /* @__PURE__ */ jsx("small", {
-								className: "manager-office__nav-state sigvelo-truncate",
-								children: employeeStatusText(employee)
+				"data-overflowing": employeeNavOverflows ? "true" : void 0,
+				children: employees.map((employee, index) => {
+					const selected = selectedEmployeeId === employee.id;
+					return /* @__PURE__ */ jsx("li", {
+						className: "manager-office__employee-group",
+						children: /* @__PURE__ */ jsxs(LinkButton, {
+							render: renderLink({
+								kind: "employee",
+								employee
+							}),
+							onClick: closeSidebarOnCompact,
+							variant: "ghost",
+							color: "neutral",
+							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)}`,
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: "manager-office__employee-avatar",
+								children: [/* @__PURE__ */ jsx(EmployeeAvatar, {
+									employee,
+									color: profileColors.get(employee.id),
+									index
+								}), /* @__PURE__ */ jsx(EmployeePresence, { employee })]
+							}), /* @__PURE__ */ jsx("span", {
+								className: "manager-office__identity sigvelo-visually-hidden",
+								children: /* @__PURE__ */ jsx("strong", {
+									className: "sigvelo-truncate",
+									children: employee.name
+								})
 							})]
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "manager-office__nav-status",
-							"data-status": employee.status,
-							children: statusIcon(employee.status)
 						})
-					]
-				}) }, employee.id))
-			})
+					}, employee.id);
+				})
+			}),
+			content ? /* @__PURE__ */ jsx("div", {
+				className: "manager-office__sidebar-content",
+				children: content
+			}) : null,
+			footer ? /* @__PURE__ */ jsx("div", {
+				className: "manager-office__sidebar-footer",
+				children: footer
+			}) : null
 		]
-	});
+	}) });
 }
 function AttentionView({ employees, renderLink, now }) {
 	const rows = employees.flatMap((employee) => isConnected(employee) ? employee.handoffs.map((handoff) => ({
@@ -418,7 +612,7 @@ function AttentionView({ employees, renderLink, now }) {
 	if (!rows.length) return /* @__PURE__ */ jsx("section", {
 		className: "manager-office__attention",
 		"data-recipe": "page",
-		"aria-label": "Needs you",
+		"aria-label": "Waiting on you",
 		children: /* @__PURE__ */ jsx(EmptyState, {
 			icon: /* @__PURE__ */ jsx(CheckIcon, {}),
 			title: "No active handoffs",
@@ -428,7 +622,7 @@ function AttentionView({ employees, renderLink, now }) {
 	return /* @__PURE__ */ jsx("section", {
 		className: "manager-office__attention",
 		"data-recipe": "page",
-		"aria-label": "Needs you",
+		"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, {
@@ -441,6 +635,825 @@ function AttentionView({ employees, renderLink, now }) {
 		})
 	});
 }
+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) : "—";
+}
+function toggleDashboardFilter(setter, value, checked) {
+	setter((current) => {
+		const next = new Set(current);
+		if (checked) next.add(value);
+		else next.delete(value);
+		return next;
+	});
+}
+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 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
+		}] : [];
+	});
+	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 ? [{
+			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}.`,
+		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__ */ 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]
+			})
+		]
+	});
+}
+function DashboardConnections({ employee }) {
+	if (!isConnected(employee)) return /* @__PURE__ */ jsx("span", {
+		className: "manager-office__connection-empty",
+		children: "Browser connection offline"
+	});
+	if (!employee.channels.length) return /* @__PURE__ */ jsx("span", {
+		className: "manager-office__connection-empty",
+		children: "No connectors yet"
+	});
+	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);
+			})
+		})
+	});
+}
+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);
+	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, {})
+				})
+			]
+		}), !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(Menu.Trigger, {
+		"aria-label": `${label} filter`,
+		className: "manager-office__filter-trigger",
+		"data-active": selected.size || void 0,
+		children: [
+			/* @__PURE__ */ jsx("span", { children: label }),
+			selected.size ? /* @__PURE__ */ jsx("strong", { children: selected.size }) : null,
+			/* @__PURE__ */ jsx(ChevronDownIcon, {})
+		]
+	}), /* @__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(Menu.Trigger, {
+		className: "manager-office__assignment-trigger",
+		disabled: !employees.length,
+		children: [/* @__PURE__ */ jsx("span", { 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 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` : "";
+}
+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);
+	});
+}
+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 })
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "manager-office__analytics-chart",
+			role: "img",
+			"aria-label": `${label} by date over the selected period, from 0 to ${axisValue(axisMaximum)}`,
+			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__ */ 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__ */ 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)) })
+					]
+				})
+			]
+		})]
+	});
+}
+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 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]);
+	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
+				})
+			]
+		})]
+	});
+}
+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",
+						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",
+								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, {})
+								})]
+							})]
+						}), !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);
+				})
+			})
+		]
+	});
+}
 function EmployeeDetail({ employee, renderLink, now, profileColor }) {
 	if (!isConnected(employee)) return /* @__PURE__ */ jsx("div", {
 		"data-recipe": "page",
@@ -456,33 +1469,28 @@ function EmployeeDetail({ employee, renderLink, now, profileColor }) {
 		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
-							]
-						})]
-					}),
-					/* @__PURE__ */ jsx(RoutineEvidence, { employee }),
-					/* @__PURE__ */ jsx(EmployeeStatus, { employee })
-				]
+				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": "Needs you",
+				"aria-label": "Waiting on you",
 				children: employee.handoffs.map((handoff) => /* @__PURE__ */ jsx(HandoffCard, {
 					employee,
 					handoff,
@@ -582,9 +1590,9 @@ function EmployeeDetail({ employee, renderLink, now, profileColor }) {
 												children: [/* @__PURE__ */ jsx("strong", {
 													className: "sigvelo-truncate",
 													children: routine.name
-												}), /* @__PURE__ */ jsxs("small", {
+												}), /* @__PURE__ */ jsx("small", {
 													className: "sigvelo-truncate",
-													children: [routine.enabled ? routine.schedule : `Paused · ${routine.schedule}`, routine.finishedRuns ? ` · ${routine.completedRuns}/${routine.finishedRuns}` : ""]
+													children: routine.enabled ? routine.schedule : `Paused · ${routine.schedule}`
 												})]
 											}),
 											/* @__PURE__ */ jsx(ChevronRightIcon, { className: "manager-office__row-chevron" })
@@ -615,11 +1623,11 @@ function EmployeeDetail({ employee, renderLink, now, profileColor }) {
 	});
 }
 /**
-* Multi-employee manager office: aggregate handoffs, employee roster, and one
-* employee dossier. The consuming app owns authentication, Agent connections,
-* routing, and the selected employee's full work surface.
+* 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({ className, emptyOfficeAction, employees, renderLink, officeActions, renderEmployeeActions, style, view, ...props }) {
+function ManagerOffice({ analytics = [], analyticsCurrency = "USD", className, emptyOfficeAction, employees, renderLink, officeActions, onExportReport, renderEmployeeActions, sidebarTogglePlacement = "sidebar", style, view, ...props }) {
 	const titleId = React.useId();
 	const [now, setNow] = React.useState(Date.now);
 	React.useEffect(() => {
@@ -628,23 +1636,57 @@ function ManagerOffice({ className, emptyOfficeAction, employees, renderLink, of
 	}, []);
 	const selectedEmployee = view.kind === "employee" ? employees.find((employee) => employee.id === view.employeeId) : void 0;
 	const profileColors = rosterProfileColors(employees);
-	const title = view.kind === "attention" ? "Needs you" : selectedEmployee?.name ?? "Employee";
+	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",
-		showMainLabel: "Show manager office",
-		sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(EmployeeSidebar, {
+		sidebarTogglePlacement,
+		showMainLabel: "Show workforce",
+		sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ManagerOfficeSidebar, {
 			closeSidebarOnCompact,
 			employees,
 			renderLink,
 			officeActions,
-			profileColors,
-			view
+			selectedEmployeeId: view.kind === "employee" ? view.employeeId : null
 		}),
 		bar: {
-			label: "Manager office controls",
-			titleRender: /* @__PURE__ */ jsx("h1", { id: titleId }),
+			label: "Workforce controls",
+			titleRender: /* @__PURE__ */ jsx("h1", {
+				id: titleId,
+				children: title
+			}),
 			title,
 			actions: selectedEmployee && isConnected(selectedEmployee) ? /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx(AppTopBar.Link, {
@@ -671,7 +1713,7 @@ function ManagerOffice({ className, emptyOfficeAction, employees, renderLink, of
 		...props,
 		children: /* @__PURE__ */ jsx("main", {
 			className: "manager-office__main",
-			"aria-labelledby": titleId,
+			"aria-label": mainLabel,
 			children: !employees.length ? /* @__PURE__ */ jsx(EmptyState, {
 				icon: /* @__PURE__ */ jsx(PlusIcon, {}),
 				title: "Add your first employee",
@@ -695,4 +1737,4 @@ function ManagerOffice({ className, emptyOfficeAction, employees, renderLink, of
 	}) });
 }
 //#endregion
-export { ManagerOffice };
+export { ManagerOffice, ManagerOfficeSidebar, ManagerOfficeSidebarAlert };