@mcp-b/react-components 0.39.0 → 0.41.0

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

@@ -2,7 +2,26 @@ import * as React from "react";
 import { BrowserLiveView } from "agents/browser";
 
 //#region src/components/agents-sdk/BrowserRunPanel.d.ts
-interface BrowserRunPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+/**
+ * One entry of the drawn tab strip. The panel synthesizes browser chrome
+ * around content Chrome itself never paints, so a tab is whatever record of a
+ * page the host holds — a Browser Run target, a claimed extension tab — cut
+ * down to the identity and words the strip needs.
+ */
+interface BrowserRunPanelTab {
+  /** Stable identity; the strip's selection value. Hosts stringify their own ids. */
+  id: string;
+  title?: string;
+  url?: string;
+}
+interface BrowserRunPanelCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /** Error from the host's browser session or transport. */
+  error?: React.ReactNode;
+  /** Panel heading. */
+  label?: React.ReactNode;
+  ref?: React.Ref<HTMLDivElement>;
+}
+interface BrowserRunPanelHostedProps extends BrowserRunPanelCommonProps {
   /** Host-side Browser Run Live View data from `connector.liveView()`. */
   liveView?: BrowserLiveView;
   /** Refreshes the Live View URL before it expires. */
@@ -11,36 +30,64 @@ interface BrowserRunPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   onCloseSession?: () => void | Promise<void>;
   /** True while the app is fetching Live View data. */
   loading?: boolean;
-  /** Error from the app-owned browser session fetch/refresh path. */
-  error?: React.ReactNode;
-  /** Panel heading. */
-  label?: React.ReactNode;
   /** Empty state shown when there is no shared browser session. */
   empty?: React.ReactNode;
   /** Fallback passed through to `BrowserLiveView` after URL expiry/failure. */
   fallback?: React.ReactNode;
+  children?: never;
+  tabs?: never;
+  selectedTabId?: never;
+  onSelectTab?: never;
+  url?: never;
+  onOpenUrl?: never;
+  urlPlaceholder?: never;
+  urlDisabled?: never;
+  urlLabel?: never;
+  navigation?: never;
+}
+interface BrowserRunPanelStreamedProps extends BrowserRunPanelCommonProps {
+  /**
+   * The host's own browser surface — typically a `BrowserLiveView` carrying a
+   * host-fed stream. The panel frames it with the drawn tab strip and address
+   * bar; the host keeps everything transport: media, input, reconnection.
+   */
+  children: React.ReactNode;
+  /** The drawn tab strip; it renders only with more than one entry. */
+  tabs?: readonly BrowserRunPanelTab[];
+  /** Controlled selection over `tabs`; null selects nothing. */
+  selectedTabId?: string | null;
+  /** A viewer picked a tab it is not watching; the host grants or ignores it. */
+  onSelectTab?: (tabId: string) => void;
+  /** Address bar value: the streamed page's current URL. */
+  url?: string;
+  /** Commits an address-bar entry. Absent, the address bar is read-only. */
+  onOpenUrl?: (url: string) => void;
+  urlPlaceholder?: string;
+  urlDisabled?: boolean;
+  /** Accessible name for the address input. */
+  urlLabel?: string;
+  /** Navigation controls before the address input, e.g. Back and Reload. */
+  navigation?: React.ReactNode;
+  liveView?: never;
+  onRefresh?: never;
+  onCloseSession?: never;
+  loading?: never;
+  empty?: never;
+  fallback?: never;
 }
+type BrowserRunPanelProps = BrowserRunPanelHostedProps | BrowserRunPanelStreamedProps;
 /**
- * Right-side Browser Run panel for `ThinkFullApp.workbenchPanels`.
+ * Browser panel chrome — drawn tab strip, address bar, edge-to-edge body — for
+ * browser surfaces Chrome itself never paints.
  *
- * The app owns `createBrowserRuntime()`, `connector.liveView()`, polling, and
- * session cleanup. This component only renders upstream `BrowserLiveView`
- * data and calls app-provided refresh/close callbacks.
+ * Two hosts fill it in. A Browser Run host passes upstream `BrowserLiveView`
+ * data from `connector.liveView()`, and the panel derives tabs, address, and
+ * an embedded live view itself, calling app-provided refresh/close callbacks.
+ * A streaming host instead passes `children` — its own live surface — with
+ * the tab strip, address bar, and navigation controlled from the host's own
+ * records, because a remote screencast carries only page pixels and every
+ * piece of chrome around it has to be synthesized from host state.
  */
-declare function BrowserRunPanel({
-  liveView,
-  onRefresh,
-  onCloseSession,
-  loading,
-  error,
-  label,
-  empty,
-  fallback,
-  className,
-  ref,
-  ...props
-}: BrowserRunPanelProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+declare function BrowserRunPanel(props: BrowserRunPanelProps): React.JSX.Element;
 //#endregion
-export { BrowserRunPanel, BrowserRunPanelProps };
+export { BrowserRunPanel, BrowserRunPanelProps, BrowserRunPanelTab };

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

@@ -1,21 +1,20 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { J as SpinnerIcon, rt as XIcon } from "../../icons-B4mGvCvc.js";
-import { Button } from "../foundations/Button.js";
+import { K as SpinnerIcon, tt as XIcon } from "../../icons-CVFSeTJn.js";
 import { Tabs } from "../foundations/Tabs.js";
-import { BrowserLiveView } from "./BrowserLiveView.js";
 import { WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl } from "../general-purpose/WebPreview.js";
+import { BrowserLiveView } from "./BrowserLiveView.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/BrowserRunPanel.tsx
 function isInspectablePage(target) {
 	const pageUrl = target.pageUrl;
 	return Boolean(pageUrl && !pageUrl.startsWith("about:") && !pageUrl.startsWith("chrome:") && !pageUrl.startsWith("devtools:"));
 }
-function targetLabel(target) {
-	return target.title || target.pageUrl || target.targetId;
+function tabLabel(tab) {
+	return tab.title || tab.url || tab.id;
 }
-function targetGlyph(target) {
-	return (target.title || target.pageUrl || target.targetId).trim().charAt(0).toUpperCase() || "•";
+function tabGlyph(tab) {
+	return tabLabel(tab).trim().charAt(0).toUpperCase() || "•";
 }
 function pickTarget(targets, targetId) {
 	return (targetId ? targets.find((target) => target.targetId === targetId) : void 0) ?? targets.find(isInspectablePage) ?? targets[0];
@@ -28,105 +27,64 @@ function BrowserRunPanelState({ children, role, tone = "neutral" }) {
 		children
 	});
 }
-/**
-* Right-side Browser Run panel for `ThinkFullApp.workbenchPanels`.
-*
-* The app owns `createBrowserRuntime()`, `connector.liveView()`, polling, and
-* session cleanup. This component only renders upstream `BrowserLiveView`
-* data and calls app-provided refresh/close callbacks.
-*/
-function BrowserRunPanel({ liveView, onRefresh, onCloseSession, loading, error, label = "Browser", empty = "No live browser session", fallback, className, ref, ...props }) {
-	const [requestedTargetId, setRequestedTargetId] = React.useState();
-	const [receivedAt, setReceivedAt] = React.useState(() => Date.now());
-	React.useEffect(() => {
-		if (liveView) setReceivedAt(Date.now());
-	}, [liveView]);
-	const targets = liveView?.targets ?? [];
-	const target = pickTarget(targets, requestedTargetId);
-	const pageUrl = target?.pageUrl ?? "";
-	const body = target && liveView ? /* @__PURE__ */ jsx(BrowserLiveView, {
-		source: {
-			url: target.url,
-			targetId: target.targetId,
-			expiresInMs: liveView.expiresInMs
-		},
-		receivedAt,
-		pageTitle: target.title ?? target.pageUrl,
-		fallback,
-		className: "browser-run-panel__live-view"
-	}) : loading ? /* @__PURE__ */ jsxs(BrowserRunPanelState, {
-		role: "status",
-		children: [/* @__PURE__ */ jsx(SpinnerIcon, {}), "Loading browser session"]
-	}) : /* @__PURE__ */ jsx(BrowserRunPanelState, { children: empty });
+/** The one rendering of the panel chrome, whichever mode filled its props in. */
+function BrowserRunPanelFrame({ body, bodyBusy, bodyTabValue, className, error, label = "Browser", navigation, navigationEnd, onOpenUrl, onSelectTab, ref, selectedTabId, tabs, url, urlDisabled, urlLabel = "Browser page URL", urlPlaceholder, urlReadOnly, ...props }) {
 	const bodyProps = {
 		className: "web-preview__body browser-run-panel__body",
-		"aria-busy": loading || void 0
+		"aria-busy": bodyBusy || void 0
 	};
 	return /* @__PURE__ */ jsxs(Tabs.Root, {
 		className: cx("browser-run-panel", className),
-		value: target?.targetId ?? null,
+		value: selectedTabId ?? null,
 		onValueChange: (value) => {
-			if (typeof value === "string") setRequestedTargetId(value);
+			if (typeof value === "string" && value !== selectedTabId) onSelectTab?.(value);
 		},
 		render: /* @__PURE__ */ jsx(WebPreview, {
 			ref,
-			url: pageUrl,
+			url,
+			...onOpenUrl ? { onUrlChange: onOpenUrl } : {},
 			role: "region",
 			"aria-label": typeof label === "string" ? label : "Browser",
 			...props
 		}),
 		children: [
-			targets.length > 1 ? /* @__PURE__ */ jsx(WebPreviewNavigation, { children: /* @__PURE__ */ jsxs(Tabs.List, {
+			tabs.length > 1 ? /* @__PURE__ */ jsx(WebPreviewNavigation, { children: /* @__PURE__ */ jsx(Tabs.List, {
 				className: "browser-run-panel__tabs",
 				"aria-label": "Open browser pages",
 				activateOnFocus: true,
-				children: [targets.map((candidate) => /* @__PURE__ */ jsxs(Tabs.Tab, {
-					value: candidate.targetId,
+				children: tabs.map((tab) => /* @__PURE__ */ jsxs(Tabs.Tab, {
+					value: tab.id,
 					className: "browser-run-panel__tab",
-					render: /* @__PURE__ */ jsx(Button, {
-						type: "button",
-						variant: "ghost",
-						color: "neutral",
-						size: "sm"
-					}),
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "browser-run-panel__tab-glyph",
 						"aria-hidden": "true",
-						children: targetGlyph(candidate)
+						children: tabGlyph(tab)
 					}), /* @__PURE__ */ jsx("span", {
 						className: "browser-run-panel__tab-title sigvelo-truncate",
-						children: targetLabel(candidate)
+						children: tabLabel(tab)
 					})]
-				}, candidate.targetId)), /* @__PURE__ */ jsx(Tabs.Indicator, {})]
+				}, tab.id))
 			}) }) : null,
 			/* @__PURE__ */ jsxs(WebPreviewNavigation, {
 				className: "browser-run-panel__address-bar",
 				children: [
+					navigation,
 					/* @__PURE__ */ jsx(WebPreviewUrl, {
-						"aria-label": "Browser page URL",
-						placeholder: "Waiting for browser session",
-						readOnly: true
+						"aria-label": urlLabel,
+						placeholder: urlPlaceholder,
+						readOnly: urlReadOnly,
+						disabled: urlDisabled
 					}),
-					onRefresh ? /* @__PURE__ */ jsx(WebPreviewNavigationButton, {
-						action: "reload",
-						label: "Refresh browser view",
-						disabled: loading,
-						onClick: () => void onRefresh()
-					}) : null,
-					onCloseSession ? /* @__PURE__ */ jsx(WebPreviewNavigationButton, {
-						label: "Close browser session",
-						onClick: () => void onCloseSession(),
-						children: /* @__PURE__ */ jsx(XIcon, {})
-					}) : null
+					navigationEnd
 				]
 			}),
 			error ? /* @__PURE__ */ jsx(BrowserRunPanelState, {
 				tone: "danger",
 				children: error
 			}) : null,
-			targets.length > 1 && target ? /* @__PURE__ */ jsx(Tabs.Panel, {
+			bodyTabValue !== void 0 ? /* @__PURE__ */ jsx(Tabs.Panel, {
 				...bodyProps,
-				value: target.targetId,
+				value: bodyTabValue,
 				children: body
 			}) : /* @__PURE__ */ jsx("div", {
 				...bodyProps,
@@ -135,5 +93,88 @@ function BrowserRunPanel({ liveView, onRefresh, onCloseSession, loading, error,
 		]
 	});
 }
+function HostedBrowserRunPanel({ liveView, onRefresh, onCloseSession, loading, error, label, empty = "No live browser session", fallback, ...props }) {
+	const [requestedTargetId, setRequestedTargetId] = React.useState();
+	const [receivedAt, setReceivedAt] = React.useState(() => Date.now());
+	React.useEffect(() => {
+		if (liveView) setReceivedAt(Date.now());
+	}, [liveView]);
+	const targets = liveView?.targets ?? [];
+	const target = pickTarget(targets, requestedTargetId);
+	const body = target && liveView ? /* @__PURE__ */ jsx(BrowserLiveView, {
+		fill: true,
+		source: {
+			url: target.url,
+			targetId: target.targetId,
+			expiresInMs: liveView.expiresInMs
+		},
+		receivedAt,
+		pageTitle: target.title ?? target.pageUrl,
+		fallback
+	}) : loading ? /* @__PURE__ */ jsxs(BrowserRunPanelState, {
+		role: "status",
+		children: [/* @__PURE__ */ jsx(SpinnerIcon, {}), "Loading browser session"]
+	}) : /* @__PURE__ */ jsx(BrowserRunPanelState, { children: empty });
+	return /* @__PURE__ */ jsx(BrowserRunPanelFrame, {
+		...props,
+		body,
+		bodyBusy: loading,
+		bodyTabValue: targets.length > 1 && target ? target.targetId : void 0,
+		error,
+		label,
+		navigationEnd: /* @__PURE__ */ jsxs(Fragment, { children: [onRefresh ? /* @__PURE__ */ jsx(WebPreviewNavigationButton, {
+			action: "reload",
+			label: "Refresh browser view",
+			disabled: loading,
+			onClick: () => void onRefresh()
+		}) : null, onCloseSession ? /* @__PURE__ */ jsx(WebPreviewNavigationButton, {
+			label: "Close browser session",
+			onClick: () => void onCloseSession(),
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		}) : null] }),
+		onSelectTab: setRequestedTargetId,
+		selectedTabId: target?.targetId ?? null,
+		tabs: targets.map((candidate) => ({
+			id: candidate.targetId,
+			...candidate.title === void 0 ? {} : { title: candidate.title },
+			...candidate.pageUrl === void 0 ? {} : { url: candidate.pageUrl }
+		})),
+		url: target?.pageUrl ?? "",
+		urlPlaceholder: "Waiting for browser session",
+		urlReadOnly: true
+	});
+}
+function StreamedBrowserRunPanel({ children, tabs = [], selectedTabId = null, onSelectTab, url = "", onOpenUrl, urlPlaceholder, urlDisabled, urlLabel, navigation, ...props }) {
+	return /* @__PURE__ */ jsx(BrowserRunPanelFrame, {
+		...props,
+		body: children,
+		navigation,
+		onOpenUrl,
+		onSelectTab,
+		selectedTabId,
+		tabs,
+		url,
+		urlDisabled,
+		urlLabel,
+		urlPlaceholder,
+		urlReadOnly: onOpenUrl === void 0 || void 0
+	});
+}
+/**
+* Browser panel chrome — drawn tab strip, address bar, edge-to-edge body — for
+* browser surfaces Chrome itself never paints.
+*
+* Two hosts fill it in. A Browser Run host passes upstream `BrowserLiveView`
+* data from `connector.liveView()`, and the panel derives tabs, address, and
+* an embedded live view itself, calling app-provided refresh/close callbacks.
+* A streaming host instead passes `children` — its own live surface — with
+* the tab strip, address bar, and navigation controlled from the host's own
+* records, because a remote screencast carries only page pixels and every
+* piece of chrome around it has to be synthesized from host state.
+*/
+function BrowserRunPanel(props) {
+	if (props.children !== void 0) return /* @__PURE__ */ jsx(StreamedBrowserRunPanel, { ...props });
+	return /* @__PURE__ */ jsx(HostedBrowserRunPanel, { ...props });
+}
 //#endregion
 export { BrowserRunPanel };

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

@@ -0,0 +1,156 @@
+import * as React from "react";
+
+//#region src/components/agents-sdk/ManagerOffice.d.ts
+type ManagerOfficeWorkStatus = "idle" | "running" | "attention" | "error" | "interrupted";
+/**
+ * The rail already lists every employee, so there is no separate roster view:
+ * the office opens on the one thing that needs a person, and an employee is a
+ * selection in the rail rather than a page reached through a second list.
+ */
+type ManagerOfficeView = {
+  kind: "attention";
+} | {
+  kind: "employee";
+  employeeId: string;
+};
+interface ManagerOfficeHandoff {
+  /** Stable handoff identity. */
+  id: string;
+  /** Exact claimed browser tab waiting for the manager. */
+  tabId: number;
+  /** Exact action the employee needs from the manager. */
+  reason: string;
+  /**
+   * The employee's own words about what it is blocked on, verbatim. The reason
+   * is the headline a manager scans; this is the ask they answer, so it is not
+   * truncated and not summarized by this component.
+   */
+  request?: string;
+  /** Work item that owns the handoff. */
+  workId: string;
+  /** Human-readable title of the owning work. */
+  workTitle: string;
+  /** Unix timestamp in milliseconds when this handoff began. */
+  createdAt: number;
+}
+interface ManagerOfficeWork {
+  /** Stable work identity. */
+  id: string;
+  /** Human-readable outcome or conversation title. */
+  title: string;
+  /** Canonical thread lifecycle status. */
+  status: ManagerOfficeWorkStatus;
+  /** Unix timestamp in milliseconds of the latest lifecycle transition. */
+  updatedAt: number;
+}
+interface ManagerOfficeRoutine {
+  /** Stable routine identity. */
+  id: string;
+  /** Human-readable recurring responsibility. */
+  name: string;
+  /** Human-readable schedule supplied by the host. */
+  schedule: string;
+  /** Whether future occurrences are enabled. */
+  enabled: boolean;
+  /** Completed runs among the bounded recent run history. */
+  completedRuns: number;
+  /** Terminal runs among the bounded recent run history. */
+  finishedRuns: number;
+}
+/** Which way work moves through a channel, from the employee's side. */
+type ManagerOfficeChannelDirection = "input" | "output" | "both";
+type ManagerOfficeChannelStatus = "connected" | "needs-auth" | "error";
+interface ManagerOfficeChannel {
+  /** Stable channel identity. */
+  id: string;
+  /** Service the employee reaches through, such as “Slack” or “Gmail”. */
+  name: string;
+  direction: ManagerOfficeChannelDirection;
+  status: ManagerOfficeChannelStatus;
+  /** Connected account or workspace, or the reason the channel stopped. */
+  detail?: string;
+  /**
+   * App-owned service mark. Products know their own integrations, so the mark
+   * comes from them; the package draws the first letter when none is supplied.
+   */
+  icon?: React.ReactNode;
+}
+interface ManagerOfficeEmployeeBase {
+  /** Stable employee identity used by routes and list keys. */
+  id: string;
+  /** Short presentation name. */
+  name: string;
+  /** Verified employee email. */
+  email: string;
+  /** One or two characters rendered when no avatar image exists. */
+  initials: string;
+}
+interface ManagerOfficeConnectedEmployee extends ManagerOfficeEmployeeBase {
+  status: "needs-you" | "working" | "idle" | "issue";
+  /** Plain-language summary of the employee's role. */
+  role: string;
+  handoffs: readonly ManagerOfficeHandoff[];
+  work: readonly ManagerOfficeWork[];
+  routines: readonly ManagerOfficeRoutine[];
+  /** Every service the employee reads from or acts on. Empty is meaningful. */
+  channels: readonly ManagerOfficeChannel[];
+}
+interface ManagerOfficeDisconnectedEmployee extends ManagerOfficeEmployeeBase {
+  status: "offline" | "connecting" | "unavailable";
+  /** Honest explanation of the connection state and the manager's next option. */
+  statusDescription: string;
+}
+type ManagerOfficeEmployee = ManagerOfficeConnectedEmployee | ManagerOfficeDisconnectedEmployee;
+type ManagerOfficeEmployeeStatus = ManagerOfficeEmployee["status"];
+interface ManagerOfficeNavigation {
+  /** App-owned route element for the aggregate handoff view. */
+  renderAttentionLink(): React.ReactElement;
+  /** App-owned route element for one employee. */
+  renderEmployeeLink(employee: ManagerOfficeEmployee): React.ReactElement;
+  /** App-owned route element for a handoff's exact work. */
+  renderHandoffLink(employee: ManagerOfficeConnectedEmployee, handoff: ManagerOfficeHandoff): React.ReactElement;
+  /** App-owned route element for one work item. */
+  renderWorkLink(employee: ManagerOfficeConnectedEmployee, work: ManagerOfficeWork): React.ReactElement;
+  /** App-owned route element for one recurring responsibility. */
+  renderRoutineLink(employee: ManagerOfficeConnectedEmployee, routine: ManagerOfficeRoutine): React.ReactElement;
+  /** App-owned route element for starting new work with one employee. */
+  renderNewWorkLink(employee: ManagerOfficeConnectedEmployee): React.ReactElement;
+  /** App-owned route element for browsing one employee's workspace. */
+  renderWorkspaceLink(employee: ManagerOfficeConnectedEmployee): React.ReactElement;
+}
+interface ManagerOfficeProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Current disposable navigation projection; durable selection remains app-owned. */
+  view: ManagerOfficeView;
+  /** Employees projected from their owning runtimes. */
+  employees: readonly ManagerOfficeEmployee[];
+  /** Router elements supplied by the consuming app. */
+  navigation: ManagerOfficeNavigation;
+  /** Add/sign-out controls rendered in the office rail. Pass `null` for none. */
+  officeActions: React.ReactNode;
+  /**
+   * Actions rendered for the selected connected employee. Compose interactive
+   * controls through `AppTopBar.Control` so they join the toolbar; pass `null`
+   * for none.
+   */
+  renderEmployeeActions: (employee: ManagerOfficeConnectedEmployee) => React.ReactNode;
+  /** Action shown in the empty office. Pass `null` for none. */
+  emptyOfficeAction: React.ReactNode;
+}
+/**
+ * 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.
+ */
+declare function ManagerOffice({
+  className,
+  emptyOfficeAction,
+  employees,
+  navigation,
+  officeActions,
+  renderEmployeeActions,
+  style,
+  view,
+  ...props
+}: ManagerOfficeProps): React.JSX.Element;
+//#endregion
+export { ManagerOffice, ManagerOfficeChannel, ManagerOfficeChannelDirection, ManagerOfficeChannelStatus, ManagerOfficeConnectedEmployee, ManagerOfficeDisconnectedEmployee, ManagerOfficeEmployee, ManagerOfficeEmployeeStatus, ManagerOfficeHandoff, ManagerOfficeNavigation, ManagerOfficeProps, ManagerOfficeRoutine, ManagerOfficeView, ManagerOfficeWork, ManagerOfficeWorkStatus };