@mcp-b/react-components 0.40.0 → 0.42.0

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

@@ -0,0 +1,698 @@
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { Collapsible } from "../foundations/Collapsible.js";
+import { $ as WarningIcon, A as MessageSquareIcon, B as PlusIcon, C as FolderIcon, D as LinkIcon, H as RefreshIcon, K as SpinnerIcon, L as PauseIcon, N as MonitorIcon, R as PencilIcon, T as InfoIcon, _ as DotIcon, a as ArrowUpIcon, d as CheckIcon, f as ChevronDownIcon, n as ArrowDownIcon, p as ChevronRightIcon, tt as XIcon, u as CalendarIcon } from "../../icons-CVFSeTJn.js";
+import { Button } from "../foundations/Button.js";
+import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
+import { Tooltip } from "../foundations/Tooltip.js";
+import { Avatar } from "../foundations/Avatar.js";
+import { AppIcon } from "../foundations/AppIcon.js";
+import { EmptyState } from "../foundations/EmptyState.js";
+import { LinkButton } from "../foundations/LinkButton.js";
+import "../foundations/icons.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
+import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/_internal/chrome-profile-colors.ts
+const PALETTE = [
+	{
+		bg: "#ffab40",
+		fg: "#1f1f1f"
+	},
+	{
+		bg: "#43a047",
+		fg: "#ffffff"
+	},
+	{
+		bg: "#199da9",
+		fg: "#ffffff"
+	},
+	{
+		bg: "#5d93e4",
+		fg: "#ffffff"
+	},
+	{
+		bg: "#ffaebd",
+		fg: "#1f1f1f"
+	},
+	{
+		bg: "#bd165c",
+		fg: "#ffffff"
+	},
+	{
+		bg: "#b71c1c",
+		fg: "#ffffff"
+	},
+	{
+		bg: "#2e7d32",
+		fg: "#ffffff"
+	},
+	{
+		bg: "#006e78",
+		fg: "#ffffff"
+	},
+	{
+		bg: "#1565c0",
+		fg: "#ffffff"
+	},
+	{
+		bg: "#5b3689",
+		fg: "#ffffff"
+	}
+];
+/** FNV-1a, for a stable pick from the same seat across reloads. */
+function hash(seed) {
+	let value = 2166136261;
+	for (let index = 0; index < seed.length; index++) {
+		value ^= seed.charCodeAt(index);
+		value = Math.imul(value, 16777619);
+	}
+	return value >>> 0;
+}
+/**
+* Deterministic Chrome-style profile color for one identity. Pass the set of
+* `bg` values already assigned to the rest of the roster so two profiles only
+* share a color once the palette is exhausted, exactly as Chrome avoids
+* colors in use by other profiles.
+*/
+function chromeProfileColor(seed, taken) {
+	const start = hash(seed) % PALETTE.length;
+	for (let offset = 0; offset < PALETTE.length; offset++) {
+		const candidate = PALETTE[(start + offset) % PALETTE.length];
+		if (!taken?.has(candidate.bg)) return candidate;
+	}
+	return PALETTE[start];
+}
+//#endregion
+//#region src/components/agents-sdk/ManagerOffice.tsx
+const statusLabels = {
+	"needs-you": "Needs you",
+	working: "Working",
+	idle: "Idle",
+	issue: "Issue",
+	offline: "Offline",
+	connecting: "Connecting…",
+	unavailable: "Unavailable"
+};
+/**
+* Named positively, so a status added to the union later is disconnected until
+* someone says otherwise. The negative form — "not offline, connecting, or
+* unavailable" — silently admits every new status, and the first thing this
+* component does with a connected employee is read `handoffs`, which a
+* disconnected one does not carry.
+*/
+const CONNECTED_STATUSES = {
+	"needs-you": true,
+	working: true,
+	idle: true,
+	issue: true
+};
+function isConnected(employee) {
+	return employee.status in CONNECTED_STATUSES;
+}
+function employeeAttentionCount(employee) {
+	return isConnected(employee) ? employee.handoffs.length : 0;
+}
+/** The roster spells out what its handoff count measures. */
+function employeeStatusText(employee) {
+	const count = employeeAttentionCount(employee);
+	const label = statusLabels[employee.status];
+	return count ? `${label} · ${count} handoff${count === 1 ? "" : "s"}` : 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
+* state the host can't read, so the roster re-derives it: a stable hash per
+* seat, skipping colors already worn by earlier roster entries the way Chrome
+* skips colors in use by other profiles.
+*/
+function rosterProfileColors(employees) {
+	const taken = /* @__PURE__ */ new Set();
+	const colors = /* @__PURE__ */ new Map();
+	for (const employee of employees) {
+		const color = chromeProfileColor(employee.id, taken);
+		taken.add(color.bg);
+		colors.set(employee.id, color);
+	}
+	return colors;
+}
+function EmployeeAvatar({ color, employee, size = "sm" }) {
+	return /* @__PURE__ */ jsx(Avatar.Root, {
+		size,
+		shape: "rounded",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx(Avatar.Fallback, {
+			style: {
+				color: color.fg,
+				backgroundColor: color.bg
+			},
+			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.
+*
+* `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",
+		"data-status": status,
+		"aria-hidden": "true",
+		children: status === "running" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : status === "error" ? /* @__PURE__ */ jsx(WarningIcon, {}) : status === "interrupted" ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(DotIcon, {})
+	});
+}
+function threadStatusLabel(status) {
+	if (status === "attention") return "Update ready";
+	if (status === "running") return "Working";
+	if (status === "error") return "Issue";
+	if (status === "interrupted") return "Stopped";
+	return "Updated";
+}
+function relativeTime(timestamp, now) {
+	const elapsed = Math.max(0, now - timestamp);
+	const minute = 6e4;
+	const hour = 60 * minute;
+	const day = 24 * hour;
+	if (elapsed < minute) return "now";
+	if (elapsed < hour) return `${Math.floor(elapsed / minute)}m`;
+	if (elapsed < day) return `${Math.floor(elapsed / hour)}h`;
+	return `${Math.floor(elapsed / day)}d`;
+}
+function Timestamp({ now, timestamp }) {
+	const date = new Date(timestamp);
+	return /* @__PURE__ */ jsx("time", {
+		dateTime: date.toISOString(),
+		title: date.toLocaleString(),
+		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",
+	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
+* a manager should not have to learn a second vocabulary for it.
+*/
+function channelStatusIcon(status) {
+	if (status === "connected") return /* @__PURE__ */ jsx(CheckIcon, {});
+	if (status === "needs-auth") return /* @__PURE__ */ jsx(InfoIcon, {});
+	return /* @__PURE__ */ jsx(WarningIcon, {});
+}
+const channelStatusLabels = {
+	connected: "Connected",
+	"needs-auth": "Needs sign-in",
+	error: "Error"
+};
+function ChannelRow({ channel }) {
+	return /* @__PURE__ */ jsxs("li", {
+		className: "manager-office__channel",
+		"data-status": channel.status,
+		children: [
+			/* @__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) })
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "manager-office__identity",
+				children: [/* @__PURE__ */ jsx("strong", {
+					className: "sigvelo-truncate",
+					children: channel.name
+				}), /* @__PURE__ */ jsx("small", {
+					className: "sigvelo-truncate",
+					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,
+				title: channelStatusLabels[channel.status],
+				children: [channelStatusIcon(channel.status), /* @__PURE__ */ jsx("span", {
+					className: "sigvelo-visually-hidden",
+					children: channelStatusLabels[channel.status]
+				})]
+			})
+		]
+	});
+}
+/**
+* A handoff is the one thing on this surface that is waiting on a person, so
+* it gets the surface built for that — `AgentAttention` in its warning tone —
+* rather than another ghost row indistinguishable from the work beneath it.
+* The action is a link into the owning work, because that is where the single
+* approval surface lives; nothing is approved or dismissed from the roster.
+*/
+function HandoffCard({ employee, handoff, renderLink, now, showEmployee }) {
+	return /* @__PURE__ */ jsxs(AgentAttention, {
+		tone: "attention",
+		className: cx("manager-office__handoff", !handoff.request && "manager-office__handoff--bare"),
+		children: [
+			/* @__PURE__ */ jsx(AgentAttentionHeader, {
+				icon: /* @__PURE__ */ jsx(InfoIcon, {}),
+				title: handoff.reason,
+				description: /* @__PURE__ */ jsxs(Fragment, { children: [
+					showEmployee ? `${employee.name} · ` : null,
+					handoff.workTitle,
+					" · ",
+					/* @__PURE__ */ jsx(Timestamp, {
+						timestamp: handoff.createdAt,
+						now
+					})
+				] })
+			}),
+			handoff.request ? /* @__PURE__ */ jsx(AgentAttentionBody, {
+				className: "manager-office__handoff-ask",
+				children: handoff.request
+			}) : null,
+			/* @__PURE__ */ jsx(AgentAttentionActions, { children: /* @__PURE__ */ jsxs(LinkButton, {
+				render: renderLink({
+					kind: "handoff",
+					employee,
+					handoff
+				}),
+				size: "sm",
+				"aria-label": `Open ${handoff.workTitle} to ${handoff.reason.toLowerCase()}`,
+				children: [/* @__PURE__ */ jsx(MonitorIcon, {}), "Open browser"]
+			}) })
+		]
+	});
+}
+function EmployeeSidebar({ closeSidebarOnCompact, employees, renderLink, officeActions, profileColors, view }) {
+	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",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "manager-office__sidebar-heading",
+				children: [/* @__PURE__ */ jsx("strong", { children: "Office" }), /* @__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" })]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "manager-office__nav-label",
+				id: rosterLabelId,
+				children: "Employees"
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "manager-office__employee-nav sigvelo-stack-list",
+				"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)
+							})]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "manager-office__nav-status",
+							"data-status": employee.status,
+							children: statusIcon(employee.status)
+						})
+					]
+				}) }, employee.id))
+			})
+		]
+	});
+}
+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": "Needs 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": "Needs 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 EmployeeDetail({ employee, renderLink, now, profileColor }) {
+	if (!isConnected(employee)) return /* @__PURE__ */ jsx("div", {
+		"data-recipe": "page",
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			icon: employee.status === "connecting" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(MonitorIcon, {}),
+			title: `${employee.name} is ${statusLabels[employee.status].toLowerCase()}`,
+			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
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsx(RoutineEvidence, { employee }),
+					/* @__PURE__ */ jsx(EmployeeStatus, { employee })
+				]
+			}),
+			employee.handoffs.length ? /* @__PURE__ */ jsx("section", {
+				className: "manager-office__employee-handoffs",
+				"aria-label": "Needs 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__ */ jsxs("small", {
+													className: "sigvelo-truncate",
+													children: [routine.enabled ? routine.schedule : `Paused · ${routine.schedule}`, routine.finishedRuns ? ` · ${routine.completedRuns}/${routine.finishedRuns}` : ""]
+												})]
+											}),
+											/* @__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: 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 }) {
+	const titleId = React.useId();
+	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);
+	const title = view.kind === "attention" ? "Needs you" : selectedEmployee?.name ?? "Employee";
+	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, {
+			closeSidebarOnCompact,
+			employees,
+			renderLink,
+			officeActions,
+			profileColors,
+			view
+		}),
+		bar: {
+			label: "Manager office controls",
+			titleRender: /* @__PURE__ */ jsx("h1", { id: titleId }),
+			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-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
+			}) : 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."
+			})
+		})
+	}) });
+}
+//#endregion
+export { ManagerOffice };