@mcp-b/react-components 0.40.0 → 0.42.0

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

@@ -77,7 +77,7 @@ interface BrowserRunPanelStreamedProps extends BrowserRunPanelCommonProps {
 }
 type BrowserRunPanelProps = BrowserRunPanelHostedProps | BrowserRunPanelStreamedProps;
 /**
- * Browser panel chrome — drawn tab strip, address bar, framed body — for
+ * 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`

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

@@ -1,6 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Y as SpinnerIcon, it as XIcon } from "../../icons-MmIXciMO.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 { WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl } from "../general-purpose/WebPreview.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
@@ -46,22 +45,17 @@ function BrowserRunPanelFrame({ body, bodyBusy, bodyTabValue, className, error,
 			...onOpenUrl ? { onUrlChange: onOpenUrl } : {},
 			role: "region",
 			"aria-label": typeof label === "string" ? label : "Browser",
-			...props
+			...props,
+			"data-recipe": "fill-host"
 		}),
 		children: [
-			tabs.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: [tabs.map((tab) => /* @__PURE__ */ jsxs(Tabs.Tab, {
+				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",
@@ -70,7 +64,7 @@ function BrowserRunPanelFrame({ body, bodyBusy, bodyTabValue, className, error,
 						className: "browser-run-panel__tab-title sigvelo-truncate",
 						children: tabLabel(tab)
 					})]
-				}, tab.id)), /* @__PURE__ */ jsx(Tabs.Indicator, {})]
+				}, tab.id))
 			}) }) : null,
 			/* @__PURE__ */ jsxs(WebPreviewNavigation, {
 				className: "browser-run-panel__address-bar",
@@ -109,6 +103,7 @@ function HostedBrowserRunPanel({ liveView, onRefresh, onCloseSession, loading, e
 	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,
@@ -167,7 +162,7 @@ function StreamedBrowserRunPanel({ children, tabs = [], selectedTabId = null, on
 	});
 }
 /**
-* Browser panel chrome — drawn tab strip, address bar, framed body — for
+* 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`

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

@@ -0,0 +1,168 @@
+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"];
+/**
+ * Every place the office can send a manager, as one discriminated union — the
+ * same shape `WorkspaceNavigationAdapter.renderLink` uses. Consumers map it
+ * with one `switch` instead of implementing seven factories.
+ */
+type ManagerOfficeDestination = {
+  kind: "attention";
+} | {
+  kind: "employee";
+  employee: ManagerOfficeEmployee;
+} | {
+  kind: "handoff";
+  employee: ManagerOfficeConnectedEmployee;
+  handoff: ManagerOfficeHandoff;
+} | {
+  kind: "work";
+  employee: ManagerOfficeConnectedEmployee;
+  work: ManagerOfficeWork;
+} | {
+  kind: "routine";
+  employee: ManagerOfficeConnectedEmployee;
+  routine: ManagerOfficeRoutine;
+} | {
+  kind: "new-work";
+  employee: ManagerOfficeConnectedEmployee;
+} | {
+  kind: "workspace";
+  employee: ManagerOfficeConnectedEmployee;
+};
+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[];
+  /** Returns an app-owned route element for every office destination. */
+  renderLink: (destination: ManagerOfficeDestination) => React.ReactElement;
+  /** Add/sign-out controls rendered in the office rail. */
+  officeActions?: React.ReactNode;
+  /**
+   * Actions rendered for the selected connected employee. Compose interactive
+   * controls through `AppTopBar.Control` so they join the toolbar.
+   */
+  renderEmployeeActions?: (employee: ManagerOfficeConnectedEmployee) => React.ReactNode;
+  /** Action shown in the empty office. */
+  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,
+  renderLink,
+  officeActions,
+  renderEmployeeActions,
+  style,
+  view,
+  ...props
+}: ManagerOfficeProps): React.JSX.Element;
+//#endregion
+export { ManagerOffice, ManagerOfficeChannel, ManagerOfficeChannelDirection, ManagerOfficeChannelStatus, ManagerOfficeConnectedEmployee, ManagerOfficeDestination, ManagerOfficeDisconnectedEmployee, ManagerOfficeEmployee, ManagerOfficeEmployeeStatus, ManagerOfficeHandoff, ManagerOfficeProps, ManagerOfficeRoutine, ManagerOfficeView, ManagerOfficeWork, ManagerOfficeWorkStatus };