@mcp-b/react-components 0.49.0 → 0.50.0

package/dist/ManagerOffice-5pEFpoV3.js

@@ -0,0 +1,1146 @@
+import { findCatalogMcpServerCard, getMcpServerIconSrc } from "./utils/mcp-server-catalog.js";
+import { t as cx } from "./class-names-BiMDVpUo.js";
+import { Collapsible } from "./components/foundations/Collapsible.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-CeGfXO21.js";
+import { Button } from "./components/foundations/Button.js";
+import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "./components/ai-sdk/AgentAttention.js";
+import { Tooltip } from "./components/foundations/Tooltip.js";
+import { Avatar } from "./components/foundations/Avatar.js";
+import { CorrespondentName, correspondentHandleLabel } from "./components/ai-sdk/Correspondent.js";
+import { AppIcon } from "./components/foundations/AppIcon.js";
+import { EmptyState } from "./components/foundations/EmptyState.js";
+import { LinkButton } from "./components/foundations/LinkButton.js";
+import { getThinkExecutionRunStatus } from "./components/agents-sdk/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 = [
+	{
+		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 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",
+	idle: "Idle",
+	issue: "Waiting on you",
+	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;
+}
+function EmployeePresence({ employee }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "manager-office__nav-status",
+		"data-status": employee.status,
+		"aria-hidden": "true"
+	});
+}
+/**
+* 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, 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__ */ jsxs(Avatar.Fallback, {
+			className: "manager-office__employee-character-fallback",
+			style: {
+				color: color.fg,
+				backgroundColor: "transparent"
+			},
+			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 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 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)
+	});
+}
+/**
+* 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 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",
+		"data-status": channel.status,
+		children: [
+			/* @__PURE__ */ jsx(AppIcon.Root, {
+				size: "sm",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(ChannelMark, { channel })
+			}),
+			/* @__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__ */ 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"]
+			}) })
+		]
+	});
+}
+/** 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 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 profileColors = rosterProfileColors(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: [isChat ? null : /* @__PURE__ */ jsx("strong", { children: "Workforce" }), officeActions ? /* @__PURE__ */ jsx("span", {
+					className: "manager-office__sidebar-actions",
+					children: officeActions
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "manager-office__nav-label sigvelo-visually-hidden",
+				id: rosterLabelId,
+				children: "Employees"
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "manager-office__employee-nav",
+				role: "list",
+				"aria-labelledby": rosterLabelId,
+				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, {
+							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} · ${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,
+									size: isChat ? "sm" : "md"
+								}), /* @__PURE__ */ jsx(EmployeePresence, { employee })]
+							}), 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);
+				})
+			}),
+			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 isReviewWork(work) {
+	return work.status === "attention" || work.status === "error";
+}
+/** 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 workingSetOf(work) {
+	return work.workingSet ?? [];
+}
+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 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 /* @__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,
+			work
+		}),
+		variant: "ghost",
+		color: "neutral",
+		size: "sm",
+		className: workLinkClassNames[placement],
+		"aria-label": `Open ${work.title} to ${threadStatusLabel(work.status).toLowerCase()}`,
+		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: [
+						showEmployee ? `${employee.name} · ` : null,
+						threadStatusLabel(work.status),
+						" · ",
+						/* @__PURE__ */ jsx(Timestamp, {
+							timestamp: work.updatedAt,
+							now
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(ChevronRightIcon, { className: "manager-office__row-chevron" })
+		]
+	});
+}
+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
+	});
+	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 })
+	});
+	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 WorkLane({ employee, now, renderLink, work }) {
+	const titleId = React.useId();
+	const workingSet = workingSetOf(work);
+	return /* @__PURE__ */ jsxs("article", {
+		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
+				})
+			}),
+			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
+		]
+	});
+}
+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."
+		})
+	});
+	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]
+	});
+}
+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 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__briefing",
+			children: [
+				/* @__PURE__ */ jsx("strong", {
+					className: "sigvelo-truncate",
+					children: employee.name
+				}),
+				/* @__PURE__ */ jsx("small", {
+					className: "sigvelo-truncate",
+					children: employee.email
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "manager-office__role",
+					children: employee.role
+				})
+			]
+		})]
+	});
+}
+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 ManagerOfficeWorkSection({ className, ...props }) {
+	const employee = useEmployee();
+	const { renderLink, now } = useOffice();
+	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(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 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: [
+							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("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 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, {}),
+			title: `${employee.name} is ${statusLabels[employee.status].toLowerCase()}`,
+			description: employee.statusDescription
+		})
+	});
+}
+/** 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 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 { ManagerOfficeSidebar as n, ManagerOfficeSidebarAlert as r, ManagerOffice as t };