@mcp-b/react-components 0.44.1 → 0.46.0

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

@@ -0,0 +1,96 @@
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { Activity, ActivityContent, ActivityText, ActivityTrigger } from "../ai-sdk/Activity.js";
+import { r as firstLine } from "../../format-COCyV98Z.js";
+import { MessageResponse } from "../ai-sdk/Message.js";
+import { NaniteMark } from "../nanites/NaniteScene.js";
+import { getSubagentRunName } from "./SubagentRunIndicator.js";
+import { useOptionalAgentToolRuns } from "./AgentToolRunsContext.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isTextUIPart } from "ai";
+//#region src/components/agents-sdk/AgentEvent.tsx
+/**
+* `metadata.source` values Think stamps on the turns it injects for a
+* detached (background) agent-tool run: upstream's default and the source the
+* browser host passes for a delegated run's completion and milestone reports.
+* A turn tagged with one of these was written by the runtime, not typed by the
+* person, so the transcript renders it as an agent event rather than a user
+* bubble.
+*/
+const AGENT_EVENT_SOURCES = /* @__PURE__ */ new Set(["delegate-completion", "detached-agent-tool"]);
+function stringField(record, key) {
+	const value = record[key];
+	return typeof value === "string" ? value : void 0;
+}
+/**
+* Classify a framework-injected background-run message. Think persists a
+* `submitMessages` turn's metadata under `metadata.turnMetadata` on the
+* user-role message it appends (a completion notice, a `react` milestone), and
+* puts a `narrate` milestone's metadata directly on the assistant message it
+* adds — so both shapes are read. Anything else is an ordinary message.
+*/
+function getAgentEvent(message) {
+	const metadata = message.metadata;
+	if (!metadata || typeof metadata !== "object") return null;
+	const record = metadata;
+	const turnMetadata = record.turnMetadata;
+	const candidate = turnMetadata && typeof turnMetadata === "object" ? turnMetadata : record;
+	const source = stringField(candidate, "source");
+	if (source === void 0 || !AGENT_EVENT_SOURCES.has(source)) return null;
+	return {
+		source,
+		runId: stringField(candidate, "runId"),
+		status: stringField(candidate, "status"),
+		milestone: stringField(candidate, "milestone")
+	};
+}
+function eventVerb(event) {
+	if (event.milestone) return "reported";
+	switch (event.status) {
+		case "completed": return "finished";
+		case "error": return "failed";
+		case "aborted": return "was cancelled";
+		case "interrupted": return "was interrupted";
+		default: return "ended";
+	}
+}
+/**
+* Both formatters — Think's `formatDetachedCompletion` and the host's
+* milestone override — open with a one-line `Background task "…" (run …)`
+* heading and put the child's own words in the next paragraph. The row's own
+* action line already says that much, so the preview starts after it.
+*/
+const RUNTIME_HEADING = /^Background task .*?\n\n/u;
+/** The first line of the event's own words, without the runtime heading. */
+function agentEventPreview(text) {
+	return firstLine(text.replace(RUNTIME_HEADING, "")) || void 0;
+}
+/**
+* One collapsed transcript row for a background run's report or completion
+* notice: who reported, what happened, and the first line of what it said;
+* expanding shows the whole text the model received. The run's name comes
+* from the parent's retained-run projection when the row is inside an
+* `AgentToolRunsProvider`.
+*/
+function AgentEventRow({ className, event, message, ref, ...props }) {
+	const agentTools = useOptionalAgentToolRuns();
+	const run = event.runId ? agentTools?.runsById[event.runId] : void 0;
+	const name = run ? getSubagentRunName(run) : "Background task";
+	const text = message.parts.filter(isTextUIPart).map((part) => part.text).join("\n").trim();
+	return /* @__PURE__ */ jsxs(Activity, {
+		ref,
+		"data-slot": "agent-event",
+		"data-source": event.source,
+		"data-status": event.status,
+		className: cx("agent-event", className),
+		stateKey: `agent-event:${message.id}`,
+		...props,
+		children: [/* @__PURE__ */ jsx(ActivityTrigger, {
+			icon: /* @__PURE__ */ jsx(NaniteMark, { index: run?.order }),
+			action: `${name} ${eventVerb(event)}`,
+			detail: agentEventPreview(text)
+		}), /* @__PURE__ */ jsx(ActivityContent, { children: /* @__PURE__ */ jsx(ActivityText, { children: /* @__PURE__ */ jsx(MessageResponse, { children: text }) }) })]
+	});
+}
+//#endregion
+export { AgentEventRow, getAgentEvent };

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

@@ -1,2 +1,2 @@
-import { a as useOptionalAgentToolRuns, i as AgentToolRunsProviderProps, n as AgentToolEventsValue, o as useSourceScopedAgentToolEvents, r as AgentToolRunsProvider, t as AgentToolEventSource } from "../../AgentToolRunsContext-daY67hFM.js";
+import { a as useOptionalAgentToolRuns, i as AgentToolRunsProviderProps, n as AgentToolEventsValue, o as useSourceScopedAgentToolEvents, r as AgentToolRunsProvider, t as AgentToolEventSource } from "../../AgentToolRunsContext-jtmveaRE.js";
 export { AgentToolEventSource, AgentToolEventsValue, AgentToolRunsProvider, AgentToolRunsProviderProps, useOptionalAgentToolRuns, useSourceScopedAgentToolEvents };

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

@@ -14,20 +14,24 @@ import { useAgentToolEvents } from "agents/react";
 * The subscription's listener attaches in a passive effect, after paint. A
 * host whose transport is in-process (the browser extension's port bridge)
 * can complete the connect and deliver the replay before that effect runs —
-* reliably so on a hot return from a drill-in. Upstream owns the fix:
-* `useAgent` buffers `agent-tool-event` frames from socket construction and
-* `useAgentToolEvents` drains them when its listener attaches (agents >
-* 0.20.1; `_bufferAgentToolReplayFrame` is the seam for a non-`useAgent`
-* socket). On older versions such hosts must buffer and re-dispatch
-* themselves — think-browser-host's `useThinkAgentToolEvents` is that
-* interim shim. Network transports are not affected in practice: the round
+* reliably so on a hot return from a drill-in. The fix lives in the Agents
+* SDK, not here: `useAgent` buffers `agent-tool-event` frames from socket
+* construction and `useAgentToolEvents` drains them when its listener
+* attaches (`_bufferAgentToolReplayFrame` is the seam for a non-`useAgent`
+* socket). As of agents 0.21.0 that is still the browser host's vendored
+* edit, not a published release; a host on the published package has to
+* buffer and re-dispatch the frames around its own socket before this hook
+* can see them. Network transports are not affected in practice: the round
 * trip loses to the effect flush.
 */
 function useSourceScopedAgentToolEvents(agent) {
 	const agentTools = useAgentToolEvents({ agent });
 	const sourceIdentity = JSON.stringify(agent.path);
 	const resetAgentTools = React.useEffectEvent(() => agentTools.resetLocalState());
+	const seenIdentity = React.useRef(sourceIdentity);
 	React.useEffect(() => {
+		if (seenIdentity.current === sourceIdentity) return;
+		seenIdentity.current = sourceIdentity;
 		resetAgentTools();
 	}, [sourceIdentity]);
 	return agentTools;

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

@@ -1,4 +1,4 @@
-import { E as KeyboardIcon, U as RefreshIcon, r as ArrowLeftIcon } from "../../icons-Dw-im7lg.js";
+import { E as KeyboardIcon, U as RefreshIcon, r as ArrowLeftIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
 import { WebPreviewNavigationButton } from "../general-purpose/WebPreview.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { _ as DotIcon, k as MaximizeIcon, q as SpinnerIcon } from "../../icons-Dw-im7lg.js";
+import { _ as DotIcon, k as MaximizeIcon, q as SpinnerIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";

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

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { B as PlayIcon, R as PauseIcon } from "../../icons-Dw-im7lg.js";
+import { B as PlayIcon, R as PauseIcon } from "../../icons-BNEY4gO5.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { r as formatClock } from "../../format-DB2mX9DA.js";
+import { i as formatClock } from "../../format-COCyV98Z.js";
 import { EmptyState } from "../foundations/EmptyState.js";
 import { Slider } from "../foundations/Slider.js";
 import * as React from "react";

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { nt as XIcon, q as SpinnerIcon } from "../../icons-Dw-im7lg.js";
+import { nt as XIcon, q as SpinnerIcon } from "../../icons-BNEY4gO5.js";
 import { Tabs } from "../foundations/Tabs.js";
 import { WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl } from "../general-purpose/WebPreview.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";

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

@@ -1,13 +1,12 @@
+import { n as ResponsiveSidebarShell } from "../../ResponsiveSidebarShell-BTVPxLJK.js";
 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.
- */
+/** The app-owned projection currently shown by the manager office. */
 type ManagerOfficeView = {
+  kind: "dashboard";
+} | {
   kind: "attention";
 } | {
   kind: "employee";
@@ -40,6 +39,8 @@ interface ManagerOfficeWork {
   title: string;
   /** Canonical thread lifecycle status. */
   status: ManagerOfficeWorkStatus;
+  /** Concise result shown to managers when the work is ready for review. */
+  summary?: string;
   /** Unix timestamp in milliseconds of the latest lifecycle transition. */
   updatedAt: number;
 }
@@ -71,10 +72,35 @@ interface ManagerOfficeChannel {
   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.
+   * comes from them. When omitted, a catalog plugin mark is used when the
+   * channel name matches a known connector; otherwise the first letter.
    */
   icon?: React.ReactNode;
 }
+interface ManagerOfficeBrowserPreview {
+  /** Title of the tab currently visible on the employee's browser. */
+  title: string;
+  /** Display-safe URL supplied by the host. */
+  url: string;
+}
+interface ManagerOfficeAnalyticsPoint {
+  /** Start of the reporting bucket as a Unix timestamp in milliseconds. */
+  timestamp: number;
+  /** Outcomes completed during this bucket. */
+  completed: number;
+  /** Employee runtime consumed during this bucket. */
+  workloadHours: number;
+  /** Host-estimated inference and tool cost during this bucket. */
+  estimatedCost: number;
+}
+interface ManagerOfficeEmployeeAnalytics {
+  employeeId: string;
+  points: readonly ManagerOfficeAnalyticsPoint[];
+}
+interface ManagerOfficeReportSelection {
+  employeeIds: readonly string[];
+  rangeDays: 7 | 30 | 90;
+}
 interface ManagerOfficeEmployeeBase {
   /** Stable employee identity used by routes and list keys. */
   id: string;
@@ -94,6 +120,8 @@ interface ManagerOfficeConnectedEmployee extends ManagerOfficeEmployeeBase {
   routines: readonly ManagerOfficeRoutine[];
   /** Every service the employee reads from or acts on. Empty is meaningful. */
   channels: readonly ManagerOfficeChannel[];
+  /** The live tab the manager can glance at from the office. */
+  browserPreview?: ManagerOfficeBrowserPreview;
 }
 interface ManagerOfficeDisconnectedEmployee extends ManagerOfficeEmployeeBase {
   status: "offline" | "connecting" | "unavailable";
@@ -127,6 +155,9 @@ type ManagerOfficeDestination = {
 } | {
   kind: "new-work";
   employee: ManagerOfficeConnectedEmployee;
+} | {
+  kind: "new-routine";
+  employee: ManagerOfficeConnectedEmployee;
 } | {
   kind: "workspace";
   employee: ManagerOfficeConnectedEmployee;
@@ -138,8 +169,10 @@ interface ManagerOfficeProps extends React.HTMLAttributes<HTMLDivElement> {
   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. */
+  /** Add/sign-out controls rendered in the app bar or office rail. */
   officeActions?: React.ReactNode;
+  /** Place the wide-layout Workforce toggle. Defaults to the Workforce sidebar. */
+  sidebarTogglePlacement?: React.ComponentProps<typeof ResponsiveSidebarShell>["sidebarTogglePlacement"];
   /**
    * Actions rendered for the selected connected employee. Compose interactive
    * controls through `AppTopBar.Control` so they join the toolbar.
@@ -147,22 +180,84 @@ interface ManagerOfficeProps extends React.HTMLAttributes<HTMLDivElement> {
   renderEmployeeActions?: (employee: ManagerOfficeConnectedEmployee) => React.ReactNode;
   /** Action shown in the empty office. */
   emptyOfficeAction?: React.ReactNode;
+  /** Per-employee reporting buckets used by the executive analytics view. */
+  analytics?: readonly ManagerOfficeEmployeeAnalytics[];
+  /** Currency used for cost estimates. Defaults to USD. */
+  analyticsCurrency?: string;
+  /** Export the exact filtered portfolio and time range currently on screen. */
+  onExportReport?: (selection: ManagerOfficeReportSelection) => void;
 }
+interface ManagerOfficeSidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, "content"> {
+  /** Close the office drawer after a compact-width selection. */
+  closeSidebarOnCompact?: () => void;
+  /** Employees projected from their owning runtimes. */
+  employees: readonly ManagerOfficeEmployee[];
+  /** App-owned route element for an employee selection. */
+  renderLink: ManagerOfficeProps["renderLink"];
+  /** Add/sign-out/toggle controls rendered beside Workforce. */
+  officeActions?: React.ReactNode;
+  /** Employee whose row and optional nested content are active. */
+  selectedEmployeeId?: string | null;
+  /** App-specific selected-employee content shown after the switcher. */
+  content?: React.ReactNode;
+  /** Persistent sidebar action, such as starting a conversation with the selected employee. */
+  footer?: React.ReactNode;
+}
+type ManagerOfficeSidebarAlertProps = {
+  "aria-label"?: string;
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>; /** Primary actionable issue title. */
+  title: React.ReactNode; /** Quiet owning-work or source context. */
+  detail?: React.ReactNode;
+} & ({
+  href: string;
+  render?: never;
+} | {
+  render: React.ReactElement;
+  href?: never;
+});
+/** Dense nested action for an employee alert already signalled by the roster status. */
+declare function ManagerOfficeSidebarAlert({
+  className,
+  detail,
+  title,
+  ...props
+}: ManagerOfficeSidebarAlertProps): React.JSX.Element;
+/**
+ * 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.
+ */
+declare function ManagerOfficeSidebar({
+  className,
+  closeSidebarOnCompact,
+  content,
+  employees,
+  renderLink,
+  footer,
+  officeActions,
+  selectedEmployeeId,
+  ...props
+}: ManagerOfficeSidebarProps): React.JSX.Element;
 /**
- * Multi-employee manager office: aggregate handoffs, employee roster, and one
- * employee dossier. The consuming app owns authentication, Agent connections,
- * routing, and the selected employee's full work surface.
+ * Multi-employee manager office: a dashboard, aggregate handoffs, employee
+ * roster, and one employee dossier. The consuming app owns authentication,
+ * Agent connections, routing, and the selected employee's full work surface.
  */
 declare function ManagerOffice({
+  analytics,
+  analyticsCurrency,
   className,
   emptyOfficeAction,
   employees,
   renderLink,
   officeActions,
+  onExportReport,
   renderEmployeeActions,
+  sidebarTogglePlacement,
   style,
   view,
   ...props
 }: ManagerOfficeProps): React.JSX.Element;
 //#endregion
-export { ManagerOffice, ManagerOfficeChannel, ManagerOfficeChannelDirection, ManagerOfficeChannelStatus, ManagerOfficeConnectedEmployee, ManagerOfficeDestination, ManagerOfficeDisconnectedEmployee, ManagerOfficeEmployee, ManagerOfficeEmployeeStatus, ManagerOfficeHandoff, ManagerOfficeProps, ManagerOfficeRoutine, ManagerOfficeView, ManagerOfficeWork, ManagerOfficeWorkStatus };
+export { ManagerOffice, ManagerOfficeAnalyticsPoint, ManagerOfficeBrowserPreview, ManagerOfficeChannel, ManagerOfficeChannelDirection, ManagerOfficeChannelStatus, ManagerOfficeConnectedEmployee, ManagerOfficeDestination, ManagerOfficeDisconnectedEmployee, ManagerOfficeEmployee, ManagerOfficeEmployeeAnalytics, ManagerOfficeEmployeeStatus, ManagerOfficeHandoff, ManagerOfficeProps, ManagerOfficeReportSelection, ManagerOfficeRoutine, ManagerOfficeSidebar, ManagerOfficeSidebarAlert, ManagerOfficeSidebarAlertProps, ManagerOfficeSidebarProps, ManagerOfficeView, ManagerOfficeWork, ManagerOfficeWorkStatus };