@mcp-b/react-components 0.46.3 → 0.46.5

package/dist/{McpConnectorForm-BETdVBRk.d.ts → McpConnectorForm-CeYNY0MI.d.ts}

@@ -1,4 +1,4 @@
-import { d as McpServerSetupAuthFieldName, l as McpServerSetupAuth } from "./mcp-server-catalog-Cbu483Zb.js";
+import { d as McpServerSetupAuthFieldName, l as McpServerSetupAuth } from "./mcp-server-catalog-C_g7C-9o.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/McpConnectorForm.d.ts

package/dist/{McpPluginCatalog-C6ip9IvL.d.ts → McpPluginCatalog-3qWu8oK1.d.ts}

@@ -1,5 +1,5 @@
-import { o as McpServerCard } from "./mcp-server-catalog-Cbu483Zb.js";
-import { r as McpConnectorFormValues } from "./McpConnectorForm-BETdVBRk.js";
+import { o as McpServerCard } from "./mcp-server-catalog-C_g7C-9o.js";
+import { r as McpConnectorFormValues } from "./McpConnectorForm-CeYNY0MI.js";
 import { l as DialogProps } from "./Dialog-B_FhRWaz.js";
 import * as React from "react";
 import { MCPServersState } from "agents";

package/dist/{Workspace-jdVZ9S0a.d.ts → Workspace-BGhTdDTI.d.ts}

@@ -1,13 +1,12 @@
 import { a as WorkspaceMediaInfo, i as WorkspaceFileState, r as WorkspaceFileAssetResolver, t as WorkspaceFileAsset } from "./WorkspaceFile-Dq-GC0_T.js";
 import { DataTag, QueryKey, UnusedSkipTokenOptions } from "@tanstack/react-query";
-import { WorkspaceLike } from "@cloudflare/think";
 import { FileInfo, Workspace } from "@cloudflare/shell";
 
 //#region src/components/agents-sdk/Workspace.d.ts
 /** Workspace summary, as returned by `Workspace.getWorkspaceInfo()` upstream. */
 type WorkspaceInfo = Awaited<ReturnType<Workspace["getWorkspaceInfo"]>>;
-/** Whole upstream workspace shapes, accepted without narrowing or mirroring. */
-type WorkspaceSource = Workspace | WorkspaceLike;
+/** The exact read surface used by the workspace browser. */
+type WorkspaceSource = Pick<Workspace, "readDir" | "readFile" | "readFileBytes" | "stat"> & Partial<Pick<Workspace, "getWorkspaceInfo">>;
 interface UseWorkspaceOptions {
   /** Must be referentially stable (memoize in the app). */
   source: WorkspaceSource;

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

@@ -1,4 +1,5 @@
 import { n as ResponsiveSidebarShell } from "../../ResponsiveSidebarShell-BTVPxLJK.js";
+import { ThinkRoutine } from "./ThinkRoutine.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/ManagerOffice.d.ts
@@ -44,20 +45,6 @@ interface ManagerOfficeWork {
   /** 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";
@@ -117,7 +104,8 @@ interface ManagerOfficeConnectedEmployee extends ManagerOfficeEmployeeBase {
   role: string;
   handoffs: readonly ManagerOfficeHandoff[];
   work: readonly ManagerOfficeWork[];
-  routines: readonly ManagerOfficeRoutine[];
+  /** Whole upstream-backed routines, including their native task, schedule, and runs. */
+  routines: readonly ThinkRoutine[];
   /** 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. */
@@ -151,7 +139,7 @@ type ManagerOfficeDestination = {
 } | {
   kind: "routine";
   employee: ManagerOfficeConnectedEmployee;
-  routine: ManagerOfficeRoutine;
+  routine: ThinkRoutine;
 } | {
   kind: "new-work";
   employee: ManagerOfficeConnectedEmployee;
@@ -260,4 +248,4 @@ declare function ManagerOffice({
   ...props
 }: ManagerOfficeProps): React.JSX.Element;
 //#endregion
-export { ManagerOffice, ManagerOfficeAnalyticsPoint, ManagerOfficeBrowserPreview, ManagerOfficeChannel, ManagerOfficeChannelDirection, ManagerOfficeChannelStatus, ManagerOfficeConnectedEmployee, ManagerOfficeDestination, ManagerOfficeDisconnectedEmployee, ManagerOfficeEmployee, ManagerOfficeEmployeeAnalytics, ManagerOfficeEmployeeStatus, ManagerOfficeHandoff, ManagerOfficeProps, ManagerOfficeReportSelection, ManagerOfficeRoutine, ManagerOfficeSidebar, ManagerOfficeSidebarAlert, ManagerOfficeSidebarAlertProps, ManagerOfficeSidebarProps, ManagerOfficeView, ManagerOfficeWork, ManagerOfficeWorkStatus };
+export { ManagerOffice, ManagerOfficeAnalyticsPoint, ManagerOfficeBrowserPreview, ManagerOfficeChannel, ManagerOfficeChannelDirection, ManagerOfficeChannelStatus, ManagerOfficeConnectedEmployee, ManagerOfficeDestination, ManagerOfficeDisconnectedEmployee, ManagerOfficeEmployee, ManagerOfficeEmployeeAnalytics, ManagerOfficeEmployeeStatus, ManagerOfficeHandoff, ManagerOfficeProps, ManagerOfficeReportSelection, ManagerOfficeSidebar, ManagerOfficeSidebarAlert, ManagerOfficeSidebarAlertProps, ManagerOfficeSidebarProps, ManagerOfficeView, ManagerOfficeWork, ManagerOfficeWorkStatus };

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

@@ -15,6 +15,7 @@ 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 { getThinkExecutionRunStatus } from "./ThinkExecutionRun.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/chrome-profile-colors.ts
@@ -354,6 +355,15 @@ function relativeTime(timestamp, now) {
 	if (elapsed < day) return `${Math.floor(elapsed / hour)}h`;
 	return `${Math.floor(elapsed / day)}d`;
 }
+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`;
+}
 function Timestamp({ now, timestamp }) {
 	const date = new Date(timestamp);
 	return /* @__PURE__ */ jsx("time", {
@@ -1598,7 +1608,7 @@ function EmployeeDetail({ employee, renderLink, now, profileColor }) {
 													children: routine.name
 												}), /* @__PURE__ */ jsx("small", {
 													className: "sigvelo-truncate",
-													children: routine.enabled ? routine.schedule : `Paused · ${routine.schedule}`
+													children: routineDetail(routine)
 												})]
 											}),
 											/* @__PURE__ */ jsx(ChevronRightIcon, { className: "manager-office__row-chevron" })

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

@@ -1,4 +1,4 @@
-import { o as McpServerCard } from "../../mcp-server-catalog-Cbu483Zb.js";
+import { o as McpServerCard } from "../../mcp-server-catalog-C_g7C-9o.js";
 import * as React from "react";
 import { DynamicToolUIPart, ToolUIPart } from "ai";
 import { MCPServersState } from "agents";

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

@@ -1,2 +1,2 @@
-import { n as McpConnectorFormProps, r as McpConnectorFormValues, t as McpConnectorForm } from "../../McpConnectorForm-BETdVBRk.js";
+import { n as McpConnectorFormProps, r as McpConnectorFormValues, t as McpConnectorForm } from "../../McpConnectorForm-CeYNY0MI.js";
 export { McpConnectorForm, McpConnectorFormProps, McpConnectorFormValues };

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

@@ -1,2 +1,2 @@
-import { a as McpPluginDetailsDialogProps, i as McpPluginDetailsDialog, n as McpPluginCatalogProps, r as McpPluginDetails, t as McpPluginCatalog } from "../../McpPluginCatalog-C6ip9IvL.js";
+import { a as McpPluginDetailsDialogProps, i as McpPluginDetailsDialog, n as McpPluginCatalogProps, r as McpPluginDetails, t as McpPluginCatalog } from "../../McpPluginCatalog-3qWu8oK1.js";
 export { McpPluginCatalog, McpPluginCatalogProps, McpPluginDetails, McpPluginDetailsDialog, McpPluginDetailsDialogProps };

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

@@ -1,6 +1,6 @@
 import { s as MenuItemProps, t as Menu } from "../../Menu-yb6QXWA3.js";
-import { o as McpServerCard } from "../../mcp-server-catalog-Cbu483Zb.js";
-import { n as McpConnectorFormProps } from "../../McpConnectorForm-BETdVBRk.js";
+import { o as McpServerCard } from "../../mcp-server-catalog-C_g7C-9o.js";
+import { n as McpConnectorFormProps } from "../../McpConnectorForm-CeYNY0MI.js";
 import { l as DialogProps } from "../../Dialog-B_FhRWaz.js";
 import * as React from "react";
 import { MCPServersState } from "agents";

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

@@ -1,11 +1,11 @@
 import { l as WorkspaceNavigationAdapter } from "../../WorkspaceLink-Bh9-Jo1r.js";
 import { n as AgentToolEventsValue } from "../../AgentToolRunsContext-jtmveaRE.js";
 import { n as ResponsiveSidebarShell, t as AppBarSlots } from "../../ResponsiveSidebarShell-BTVPxLJK.js";
-import { n as McpPluginCatalogProps } from "../../McpPluginCatalog-C6ip9IvL.js";
+import { n as McpPluginCatalogProps } from "../../McpPluginCatalog-3qWu8oK1.js";
 import { ThinkChatMessagesProps } from "./ThinkChat.js";
 import { ThinkThreadStatusSummary } from "./ThinkThreadPicker.js";
 import { r as WorkspaceFileAssetResolver } from "../../WorkspaceFile-Dq-GC0_T.js";
-import { v as WorkspaceSource } from "../../Workspace-jdVZ9S0a.js";
+import { v as WorkspaceSource } from "../../Workspace-BGhTdDTI.js";
 import { t as ThinkAgent } from "../../think-agent-Cip5KAPj.js";
 import * as React from "react";
 import { UIMessage } from "ai";

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

@@ -1,8 +1,8 @@
+import { ThinkRoutine } from "./ThinkRoutine.js";
 import { ThinkChatDraft } from "./ThinkChat.js";
 import { ThinkThreadItem } from "./ThinkThreadPicker.js";
 import { ThinkFullAppAgent, ThinkFullAppConversation, ThinkFullAppProps } from "./ThinkFullApp.js";
-import { ThinkRoutine } from "./ThinkRoutine.js";
-import { SetupChecklistEntry } from "../general-purpose/SetupChecklist.js";
+import { SetupChecklistGroupProps } from "../general-purpose/SetupChecklist.js";
 import * as React from "react";
 import { UIMessage } from "ai";
 import { AgentToolRunState } from "agents/agent-tools";
@@ -59,7 +59,7 @@ interface ThinkSidepanelConnection {
   description?: string;
   onSelect: () => void;
 }
-interface ThinkSidepanelStart {
+interface ThinkSidepanelStart<Id extends string = string> {
   onSubmit: ThinkChatDraft["onSubmit"];
   suggestions?: readonly {
     label: string;
@@ -72,10 +72,7 @@ interface ThinkSidepanelStart {
   discord?: ThinkSidepanelConnection;
   onAttachFolder?: () => void;
   attachFolderBusy?: boolean;
-  personalization?: {
-    entries: readonly SetupChecklistEntry[];
-    onSelect: (id: string) => void;
-  };
+  personalization?: Pick<SetupChecklistGroupProps<Id>, "entries" | "onSelect">;
 }
 interface ThinkSidepanelSchedules<TRoutine extends ThinkRoutine = ThinkRoutine> {
   routines: readonly TRoutine[];
@@ -118,13 +115,10 @@ interface ThinkSidepanelIdentity {
   onBind?: () => void | Promise<void>;
   onUnbind?: () => void | Promise<void>;
 }
-interface ThinkSidepanelProps<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage, TRoutine extends ThinkRoutine = ThinkRoutine> extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+interface ThinkSidepanelProps<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage, TRoutine extends ThinkRoutine = ThinkRoutine, SetupId extends string = string> extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
   sourceKey: string;
   view: ThinkSidepanelView;
-  thread?: {
-    id: string;
-    title: string;
-  };
+  thread?: ThinkThreadItem;
   threads?: readonly ThinkThreadItem[];
   conversation?: ThinkFullAppConversation<AgentT, State, MessageT>;
   workspace?: ThinkFullAppProps<AgentT, State, MessageT>["workspace"];
@@ -147,7 +141,7 @@ interface ThinkSidepanelProps<AgentT extends ThinkFullAppAgent<State>, State = u
   status?: ThinkSidepanelStatus;
   connectingLabel?: string;
   modelSetup?: ThinkSidepanelModelSetup;
-  start?: ThinkSidepanelStart;
+  start?: ThinkSidepanelStart<SetupId>;
   schedules?: ThinkSidepanelSchedules<TRoutine>;
   agentRun?: ThinkSidepanelAgentRun;
   /** Host-owned live view. The side panel only frames it. */
@@ -158,7 +152,7 @@ interface ThinkSidepanelProps<AgentT extends ThinkFullAppAgent<State>, State = u
  * conversation plus workbench. Hosts hydrate conversation, workspace,
  * plugins, and callables. Storybook is the place to iterate the chrome.
  */
-declare function ThinkSidepanel<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage, TRoutine extends ThinkRoutine = ThinkRoutine>({
+declare function ThinkSidepanel<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage, TRoutine extends ThinkRoutine = ThinkRoutine, SetupId extends string = string>({
   agentRun,
   appBarLeading,
   brand,
@@ -186,6 +180,6 @@ declare function ThinkSidepanel<AgentT extends ThinkFullAppAgent<State>, State =
   view,
   workspace,
   ...props
-}: ThinkSidepanelProps<AgentT, State, MessageT, TRoutine>): React.JSX.Element;
+}: ThinkSidepanelProps<AgentT, State, MessageT, TRoutine, SetupId>): React.JSX.Element;
 //#endregion
 export { ThinkSidepanel, ThinkSidepanelAgentRun, ThinkSidepanelCompanion, ThinkSidepanelConnection, ThinkSidepanelDestination, ThinkSidepanelFollow, ThinkSidepanelIdentity, ThinkSidepanelModelSetup, ThinkSidepanelPasskeyVault, ThinkSidepanelProps, ThinkSidepanelSchedules, ThinkSidepanelStart, ThinkSidepanelStatus, ThinkSidepanelView };

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

@@ -18,8 +18,8 @@ import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { t as SetupChecklistAction } from "../../SetupChecklist-DyPZWzK2.js";
 import { NaniteMark } from "../nanites/NaniteScene.js";
 import { SubagentRunLabel } from "./SubagentRunIndicator.js";
-import { McpServerPickerAction, McpServerPickerItems } from "./McpServerPicker.js";
 import { getThinkExecutionRunId } from "./ThinkExecutionRun.js";
+import { McpServerPickerAction, McpServerPickerItems } from "./McpServerPicker.js";
 import { ThinkThreadPicker, summarizeThinkThreads } from "./ThinkThreadPicker.js";
 import { ThinkFullApp } from "./ThinkFullApp.js";
 import { ThinkRoutineLibrary } from "./ThinkRoutineLibrary.js";

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

@@ -1,2 +1,2 @@
-import { A as workspaceQueryKey, C as workspaceBinaryFileQueryOptions, D as workspaceFileAssetQueryOptions, E as workspaceDirectoryQueryPrefix, O as workspaceFileStatQueryOptions, S as useWorkspace, T as workspaceDirectoryQueryOptions, _ as WorkspaceResolvedAsset, a as WorkspaceDirectoryQueryOptions, b as WorkspaceTextFileQueryKey, c as WorkspaceFileQueryKey, d as WorkspaceFileStatQueryOptions, f as WorkspaceFileVersion, g as WorkspaceQueryKey, h as WorkspaceInfoQueryOptions, i as WorkspaceDirectoryQueryKey, j as workspaceTextFileQueryOptions, k as workspaceInfoQueryOptions, l as WorkspaceFileReadTarget, m as WorkspaceInfoQueryKey, n as WorkspaceBinaryFileQueryKey, o as WorkspaceFileAssetQueryKey, p as WorkspaceInfo, r as WorkspaceBinaryFileQueryOptions, s as WorkspaceFileAssetQueryOptions, t as UseWorkspaceOptions, u as WorkspaceFileStatQueryKey, v as WorkspaceSource, w as workspaceDirectoryQueryKey, x as WorkspaceTextFileQueryOptions, y as WorkspaceState } from "../../Workspace-jdVZ9S0a.js";
+import { A as workspaceQueryKey, C as workspaceBinaryFileQueryOptions, D as workspaceFileAssetQueryOptions, E as workspaceDirectoryQueryPrefix, O as workspaceFileStatQueryOptions, S as useWorkspace, T as workspaceDirectoryQueryOptions, _ as WorkspaceResolvedAsset, a as WorkspaceDirectoryQueryOptions, b as WorkspaceTextFileQueryKey, c as WorkspaceFileQueryKey, d as WorkspaceFileStatQueryOptions, f as WorkspaceFileVersion, g as WorkspaceQueryKey, h as WorkspaceInfoQueryOptions, i as WorkspaceDirectoryQueryKey, j as workspaceTextFileQueryOptions, k as workspaceInfoQueryOptions, l as WorkspaceFileReadTarget, m as WorkspaceInfoQueryKey, n as WorkspaceBinaryFileQueryKey, o as WorkspaceFileAssetQueryKey, p as WorkspaceInfo, r as WorkspaceBinaryFileQueryOptions, s as WorkspaceFileAssetQueryOptions, t as UseWorkspaceOptions, u as WorkspaceFileStatQueryKey, v as WorkspaceSource, w as workspaceDirectoryQueryKey, x as WorkspaceTextFileQueryOptions, y as WorkspaceState } from "../../Workspace-BGhTdDTI.js";
 export { UseWorkspaceOptions, WorkspaceBinaryFileQueryKey, WorkspaceBinaryFileQueryOptions, WorkspaceDirectoryQueryKey, WorkspaceDirectoryQueryOptions, WorkspaceFileAssetQueryKey, WorkspaceFileAssetQueryOptions, WorkspaceFileQueryKey, WorkspaceFileReadTarget, WorkspaceFileStatQueryKey, WorkspaceFileStatQueryOptions, WorkspaceFileVersion, WorkspaceInfo, WorkspaceInfoQueryKey, WorkspaceInfoQueryOptions, WorkspaceQueryKey, WorkspaceResolvedAsset, WorkspaceSource, WorkspaceState, WorkspaceTextFileQueryKey, WorkspaceTextFileQueryOptions, useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryKey, workspaceDirectoryQueryOptions, workspaceDirectoryQueryPrefix, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions };

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

@@ -1,4 +1,4 @@
-import { y as WorkspaceState } from "../../Workspace-jdVZ9S0a.js";
+import { y as WorkspaceState } from "../../Workspace-BGhTdDTI.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/WorkspaceBrowser.d.ts

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

@@ -1,5 +1,5 @@
 import { l as WorkspaceNavigationAdapter } from "../../WorkspaceLink-Bh9-Jo1r.js";
-import { y as WorkspaceState } from "../../Workspace-jdVZ9S0a.js";
+import { y as WorkspaceState } from "../../Workspace-BGhTdDTI.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/WorkspaceExplorer.d.ts

package/dist/components/extension/CodexModelSelector.d.ts

@@ -11,8 +11,8 @@ interface CodexModelSelectorProps<ModelT extends CodexModel = CodexModel> {
   readonly models: readonly ModelT[];
   /** Current Codex catalog id. Use the selected entry's `model` field for inference. */
   readonly selectedModelId?: ModelId<ModelT> | null;
-  /** Called only with an id from the supplied Codex catalog. */
-  readonly onSelectModel: (modelId: ModelId<ModelT>) => void;
+  /** Called only with an entry from the supplied Codex catalog. */
+  readonly onSelectModel: (model: ModelT) => void;
   /** Current reasoning effort advertised by the selected model. */
   readonly selectedEffortId?: ReasoningEffort<ModelT> | null;
   readonly onSelectEffort?: (effortId: ReasoningEffort<ModelT>) => void;

package/dist/components/extension/CodexModelSelector.js

@@ -28,7 +28,7 @@ function CodexModelSelector({ models, selectedModelId = null, onSelectModel, sel
 	function handleSelectModel(modelId) {
 		const model = visibleModels.find((option) => option.id === modelId);
 		if (!model) return;
-		onSelectModel(model.id);
+		onSelectModel(model);
 	}
 	function handleSelectEffort(effortId) {
 		const effort = effortOptions.find((option) => option.reasoningEffort === effortId);

package/dist/components/extension/ConversationTabPicker.d.ts

@@ -8,11 +8,11 @@ interface ConversationTabPickerItem {
   url?: string;
   iconSrc?: string;
 }
-interface ConversationTabPickerProps {
+interface ConversationTabPickerProps<Tab extends ConversationTabPickerItem = ConversationTabPickerItem> {
   /** Browser-enriched tabs already scoped to the current conversation. */
-  tabs: readonly ConversationTabPickerItem[];
+  tabs: readonly Tab[];
   /** Host-owned activation, such as Chrome tab/window focus. */
-  onSelect: (id: ConversationTabId) => void | Promise<void>;
+  onSelect: (tab: Tab) => void | Promise<void>;
   /** Maximum avatars shown in the collapsed trigger. */
   maxVisible?: number;
   groupLabel?: React.ReactNode;
@@ -23,9 +23,9 @@ interface ConversationTabPickerProps {
  * The browser adapter owns tab lookup and activation. This component owns URL
  * labels, favicon fallbacks, menu state, and async activation feedback.
  */
-declare function ConversationTabPicker({
+declare function ConversationTabPicker<Tab extends ConversationTabPickerItem>({
   tabs,
   ...props
-}: ConversationTabPickerProps): React.JSX.Element | null;
+}: ConversationTabPickerProps<Tab>): React.JSX.Element | null;
 //#endregion
 export { ConversationTabId, ConversationTabPicker, ConversationTabPickerItem, ConversationTabPickerProps };

package/dist/components/extension/ConversationTabPicker.js

@@ -54,11 +54,11 @@ function ConversationTabPickerMenu({ tabs, onSelect, maxVisible = 3, groupLabel
 	const pending = action && "pending" in action ? action.pending : null;
 	const error = action && "error" in action ? action.error : null;
 	const label = `${tabs.length} controlled ${tabs.length === 1 ? "tab" : "tabs"}`;
-	async function selectTab(id) {
+	async function selectTab(tab) {
 		if (pending !== null) return;
-		setAction({ pending: id });
+		setAction({ pending: tab.id });
 		try {
-			await onSelect(id);
+			await onSelect(tab);
 			setAction(null);
 			setOpen(false);
 		} catch (cause) {
@@ -98,7 +98,7 @@ function ConversationTabPickerMenu({ tabs, onSelect, maxVisible = 3, groupLabel
 					closeOnClick: false,
 					"data-tab-id": tab.id,
 					disabled: pending !== null,
-					onClick: () => void selectTab(tab.id),
+					onClick: () => void selectTab(tab),
 					children: [/* @__PURE__ */ jsx(TabAvatar, { tab }), /* @__PURE__ */ jsxs("span", {
 						className: "conversation-tab-picker__identity sigvelo-truncate-grow",
 						children: [/* @__PURE__ */ jsx("span", {

package/dist/components/general-purpose/SettingsFormDialog.d.ts

@@ -17,32 +17,32 @@ interface SettingsFormField {
   required?: boolean;
   readOnly?: boolean;
 }
-type SettingsFormValues = Readonly<Record<string, string>>;
-interface SettingsFormDialogProps {
+type SettingsFormValues<Fields extends readonly SettingsFormField[]> = Readonly<Record<Fields[number]["name"], string>>;
+interface SettingsFormDialogProps<Fields extends readonly SettingsFormField[]> {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   title: React.ReactNode;
   description: React.ReactNode;
-  fields: readonly SettingsFormField[];
-  initialValues?: Readonly<Record<string, string | undefined>>;
+  fields: Fields;
+  initialValues?: Readonly<Partial<Record<Fields[number]["name"], string | undefined>>>;
   submitLabel: string;
   submittingLabel?: string;
   removeLabel?: string;
   removingLabel?: string;
   externalError?: string;
-  onSubmit: (values: SettingsFormValues) => void | Promise<void>;
+  onSubmit: (values: SettingsFormValues<Fields>) => void | Promise<void>;
   onRemove?: () => void | Promise<void>;
 }
 /**
  * Uncontrolled, metadata-driven settings dialog with native validation and
  * shared async submit/remove feedback. Product schemas remain in the host.
  */
-declare function SettingsFormDialog({
+declare function SettingsFormDialog<const Fields extends readonly SettingsFormField[]>({
   open,
   onOpenChange,
   title,
   description,
   ...contentProps
-}: SettingsFormDialogProps): React.JSX.Element;
+}: SettingsFormDialogProps<Fields>): React.JSX.Element;
 //#endregion
 export { SETTINGS_FORM_CHECKED, SettingsFormDialog, SettingsFormDialogProps, SettingsFormField, SettingsFormFieldType, SettingsFormValues };

package/dist/components/general-purpose/SettingsFormDialog.js

@@ -24,6 +24,7 @@ function SettingsFormDialogContent({ fields, initialValues, submitLabel, submitt
 	const active = React.useRef(true);
 	const pending = submission === "submit" || submission === "remove";
 	const error = submission && typeof submission === "object" ? submission.error : null;
+	const initialValueByName = initialValues ?? {};
 	React.useEffect(() => {
 		active.current = true;
 		return () => {
@@ -62,7 +63,7 @@ function SettingsFormDialogContent({ fields, initialValues, submitLabel, submitt
 				name: field.name,
 				orientation: "horizontal",
 				children: [/* @__PURE__ */ jsx(Checkbox.Root, {
-					defaultChecked: initialValues?.[field.name] === SETTINGS_FORM_CHECKED,
+					defaultChecked: initialValueByName[field.name] === SETTINGS_FORM_CHECKED,
 					disabled: field.readOnly,
 					children: /* @__PURE__ */ jsx(Checkbox.Indicator, {})
 				}), /* @__PURE__ */ jsxs(Field.Content, { children: [/* @__PURE__ */ jsx(Field.Label, { children: field.label }), field.description ? /* @__PURE__ */ jsx(Field.Description, { children: field.description }) : null] })]
@@ -72,7 +73,7 @@ function SettingsFormDialogContent({ fields, initialValues, submitLabel, submitt
 					/* @__PURE__ */ jsx(Field.Label, { children: field.label }),
 					/* @__PURE__ */ jsx(Field.Control, {
 						autoComplete: field.autoComplete,
-						defaultValue: initialValues?.[field.name],
+						defaultValue: initialValueByName[field.name],
 						placeholder: field.placeholder,
 						readOnly: field.readOnly,
 						required: field.required,

package/dist/{mcp-server-catalog-Cbu483Zb.d.ts → mcp-server-catalog-C_g7C-9o.d.ts}

@@ -420,6 +420,30 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
       readonly url: "https://developers.asana.com/docs/connecting-mcp-clients-to-asanas-v2-server";
     }];
   };
+}, {
+  readonly id: "github";
+  readonly name: "GitHub";
+  readonly url: "https://api.githubcopilot.com/mcp/";
+  readonly description: "Clone, push, and open pull requests as a connected GitHub account";
+  readonly category: "Manual";
+  readonly manualSetup: {
+    readonly auth: {
+      readonly type: "bearer";
+      readonly label: "Personal access token (classic)";
+      readonly fields: readonly [{
+        readonly name: "bearerToken";
+        readonly label: "Personal access token";
+        readonly inputType: "password";
+        readonly placeholder: "ghp_…";
+        readonly required: true;
+      }];
+    };
+    readonly description: "Paste a classic personal access token with all scopes from the agent's own GitHub account — the account is the access boundary. Git and the GitHub API both authenticate as this account.";
+    readonly links: readonly [{
+      readonly label: "Create a classic token";
+      readonly url: "https://github.com/settings/tokens";
+    }];
+  };
 }, {
   readonly id: "gmail";
   readonly name: "Gmail";

package/dist/styles/browser-control-overlay.css

@@ -1,18 +1,20 @@
 /*
- * Standalone stylesheet for browser-control chrome mounted in a closed shadow
- * root. It intentionally uses system colors so it remains legible on arbitrary
- * pages without leaking the full document-level token sheet into the host.
+ * Browser-control chrome, mounted in a closed shadow root on someone else's
+ * page. This standalone design-system leaf is isolated by `:host { all:
+ * initial }`, so it shares no variable, scale, or primitive with the document
+ * stylesheet.
  *
- * Every length here is a literal on purpose. The token layer does not exist
- * inside this shadow root, so a --sigvelo-* reference resolves to nothing and
- * takes its whole declaration with it — silently, and only on a real host page,
- * which is the one place this is hard to notice. Keep the values on the 4px
- * grid by hand; audit:css-recipes checks both halves of that.
+ * Every length is a literal on purpose. A --sigvelo-* reference here resolves
+ * to nothing and silently takes its whole declaration with it, and only on a
+ * real host page — the one place that is hardest to notice. Keep the values on
+ * the 4px grid by hand.
+ *
+ * System colors keep the chrome legible on an arbitrary page's palette and in
+ * forced-colors mode.
  */
 
 :host {
   --browser-control-accent: Highlight;
-  --browser-control-accent-text: HighlightText;
   --browser-control-warning: Mark;
   --browser-control-warning-text: MarkText;
   --browser-control-shadow: color-mix(in srgb, CanvasText 28%, transparent);
@@ -31,50 +33,56 @@
   z-index: 2147483647;
 }
 
+/*
+ * Only the waiting mode draws an edge. A tab under agent control is identified
+ * by its pointer; a border around the whole viewport reads as an error state
+ * and hides the page's own chrome. Waiting is the exception because the page
+ * is being handed back and the user has to notice.
+ */
 :host .frame {
-  background: color-mix(in srgb, var(--browser-control-accent) 5%, transparent);
-  border: 3px solid color-mix(in srgb, var(--browser-control-accent) 88%, transparent);
-  box-shadow: inset 0 0 18px color-mix(in srgb, var(--browser-control-accent) 28%, transparent);
+  box-shadow:
+    inset 0 0 0 3px var(--browser-control-warning),
+    inset 0 0 24px color-mix(in srgb, var(--browser-control-warning) 32%, transparent);
   box-sizing: border-box;
   inset: 0;
   pointer-events: none;
   position: fixed;
 }
 
-:host .frame.waiting {
-  background: color-mix(in srgb, var(--browser-control-warning) 12%, transparent);
-  border-color: var(--browser-control-warning);
-  box-shadow: inset 0 0 18px color-mix(in srgb, var(--browser-control-warning) 32%, transparent);
-}
-
+/*
+ * The pointer artwork. The file is cropped to its alpha, and the alpha includes
+ * the soft white halo -- so the arrow's ink apex, which is what the eye reads as
+ * the point, sits 5px into a 40x41 image, or 3.41px once `contain` renders it
+ * 28px tall. The box is offset by that much and the pivot moved onto it, so the
+ * apex lands on the page's pointer and every rotation the planner emits turns
+ * about it. Shifting the background instead would do the same thing and clip the
+ * halo off the leading edge.
+ *
+ * Position comes from the Web Animations API during a move and from
+ * --think-cursor-x/y at rest; no transform transition, since a CSS transition
+ * and a script-driven animation would fight over the same property.
+ */
 :host .cursor {
-  filter: drop-shadow(0 2px 4px var(--browser-control-shadow));
+  background: url(../assets/browser-control-cursor.png) no-repeat 0 0 / contain;
+  /* Two shadows rather than one: a tight halo that separates the artwork from
+     whatever it is over, and a wide one that reads as the accent glow. */
+  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--browser-control-accent) 90%, transparent))
+    drop-shadow(0 0 15px color-mix(in srgb, var(--browser-control-accent) 48%, transparent));
   height: 28px;
-  left: 0;
-  opacity: 0;
+  left: -3.41px;
   pointer-events: none;
   position: fixed;
-  top: 0;
+  top: -3.41px;
   transform: translate3d(var(--think-cursor-x, 16px), var(--think-cursor-y, 16px), 0);
-  transition:
-    transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1),
-    opacity 80ms linear;
+  /* The ink apex, not the box corner and not the centre. The offset above puts
+     this point on the pointer, and the body swings around it. */
+  transform-origin: 3.41px 3.41px;
   width: 28px;
 }
 
-:host .cursor.visible {
-  opacity: 1;
-}
-
-:host .cursor path {
-  fill: var(--browser-control-accent);
-  stroke: var(--browser-control-accent-text);
-}
-
 :host button {
   appearance: none;
   border-radius: 999px;
-  box-shadow: 0 2px 10px var(--browser-control-shadow);
   cursor: pointer;
   font:
     600 12px/1.2 system-ui,
@@ -92,41 +100,6 @@
   opacity: 0.72;
 }
 
-:host .takeover,
-:host .owner {
-  background: var(--browser-control-accent);
-  border: solid 1px var(--browser-control-accent-text);
-  box-shadow: 0 2px 10px var(--browser-control-shadow);
-  color: var(--browser-control-accent-text);
-}
-
-:host .takeover {
-  pointer-events: none;
-  position: fixed;
-  right: 10px;
-  top: 10px;
-}
-
-:host .takeover.takeover-armed {
-  pointer-events: auto;
-}
-
-:host .owner {
-  border-radius: 999px;
-  font:
-    600 12px/1.2 system-ui,
-    sans-serif;
-  left: 10px;
-  max-width: min(360px, 60vw);
-  overflow: hidden;
-  padding: 8px 12px;
-  pointer-events: none;
-  position: fixed;
-  text-overflow: ellipsis;
-  top: 10px;
-  white-space: nowrap;
-}
-
 :host .banner {
   align-items: center;
   background: var(--browser-control-warning);
@@ -158,6 +131,7 @@
 :host .banner .done,
 :host .banner .cannot {
   border: solid 1px currentcolor;
+  box-shadow: 0 2px 10px var(--browser-control-shadow);
   color: inherit;
   flex-shrink: 0;
 }
@@ -171,12 +145,6 @@
   box-shadow: none;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  :host .cursor {
-    transition: none;
-  }
-}
-
 @media print {
   :host {
     display: none !important;
@@ -184,10 +152,8 @@
 }
 
 @media (forced-colors: active) {
-  :host .frame,
-  :host .takeover,
-  :host .owner,
   :host .banner {
-    forced-color-adjust: none;
+    background: Canvas;
+    color: CanvasText;
   }
 }

package/dist/styles/extension-status.css

@@ -0,0 +1,46 @@
+/*
+ * Standalone extension interstitial. It intentionally does not load the token
+ * cascade; system colors follow the user's light, dark, and forced-color theme.
+ */
+
+.extension-status-page {
+  background: Canvas;
+  color: CanvasText;
+  color-scheme: light dark;
+  display: grid;
+  font:
+    0.875rem/1.5 system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  margin: 0;
+  min-block-size: 100dvb;
+  place-items: center;
+}
+
+.extension-status {
+  /* Mirrors --sigvelo-layout-gutter without loading the document token sheet. */
+  display: grid;
+  gap: 0.75rem;
+  justify-items: center;
+  max-inline-size: 30rem;
+  padding: 0.75rem;
+  text-align: center;
+}
+
+.extension-status h1 {
+  font-size: inherit;
+  font-weight: 600;
+  margin: 0;
+}
+
+.extension-status p {
+  color: GrayText;
+  margin: 0;
+}
+
+.extension-status button {
+  font: inherit;
+}

package/dist/styles/index.css

@@ -86,7 +86,6 @@
 @import "./artifact.css" layer(components);
 @import "./browser-live-view.css" layer(components);
 @import "./browser-live-screen.css" layer(components);
-@import "./browser-control-overlay.css" layer(components);
 @import "./browser-run-panel.css" layer(components);
 @import "./chain-of-thought.css" layer(components);
 @import "./checkpoint.css" layer(components);

package/dist/utils/mcp-server-catalog.d.ts

@@ -1,2 +1,2 @@
-import { a as MCP_SERVER_SETUP_AUTH, c as McpServerManualSetup, d as McpServerSetupAuthFieldName, f as McpServerSetupLink, h as getMcpServerRuntimeState, i as MANUAL_MCP_SERVER_CARDS, l as McpServerSetupAuth, m as getMcpServerIconSrc, n as DCR_MCP_SERVER_CARDS, o as McpServerCard, p as getMcpServerEntry, r as DEFAULT_MCP_SERVER_CARDS, s as McpServerCardIcon, t as CUSTOM_MCP_SERVER_CARD, u as McpServerSetupAuthField } from "../mcp-server-catalog-Cbu483Zb.js";
+import { a as MCP_SERVER_SETUP_AUTH, c as McpServerManualSetup, d as McpServerSetupAuthFieldName, f as McpServerSetupLink, h as getMcpServerRuntimeState, i as MANUAL_MCP_SERVER_CARDS, l as McpServerSetupAuth, m as getMcpServerIconSrc, n as DCR_MCP_SERVER_CARDS, o as McpServerCard, p as getMcpServerEntry, r as DEFAULT_MCP_SERVER_CARDS, s as McpServerCardIcon, t as CUSTOM_MCP_SERVER_CARD, u as McpServerSetupAuthField } from "../mcp-server-catalog-C_g7C-9o.js";
 export { CUSTOM_MCP_SERVER_CARD, DCR_MCP_SERVER_CARDS, DEFAULT_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, MCP_SERVER_SETUP_AUTH, McpServerCard, McpServerCardIcon, McpServerManualSetup, McpServerSetupAuth, McpServerSetupAuthField, McpServerSetupAuthFieldName, McpServerSetupLink, getMcpServerEntry, getMcpServerIconSrc, getMcpServerRuntimeState };

package/dist/utils/mcp-server-catalog.js

@@ -1,4 +1,5 @@
 import { inferFaviconUrl } from "./favicon.js";
+import { siAirtable, siAsana, siAtlassian, siCalendly, siCloudflare, siDatadog, siEgnyte, siGithub, siGitlab, siGrafana, siHubspot, siHuggingface, siLinear, siMiro, siNeon, siNotion, siPaypal, siPosthog, siPostman, siRailway, siSentry, siStripe, siSupabase, siWebflow, siWix, siZapier, siZoom } from "simple-icons";
 //#region src/utils/mcp-server-catalog.ts
 /**
 * Read the complete state emitted by the pinned Agents runtime.
@@ -38,6 +39,40 @@ function normalizeMcpServerUrl(url) {
 }
 const DCR_CATEGORY = "Auto";
 const MANUAL_CATEGORY = "Manual";
+const SIMPLE_ICONS = Object.fromEntries([
+	siAirtable,
+	siAsana,
+	siAtlassian,
+	siCalendly,
+	siCloudflare,
+	siDatadog,
+	siEgnyte,
+	siGithub,
+	siGitlab,
+	siGrafana,
+	siHubspot,
+	siHuggingface,
+	siLinear,
+	siMiro,
+	siNeon,
+	siNotion,
+	siPaypal,
+	siPosthog,
+	siPostman,
+	siRailway,
+	siSentry,
+	siStripe,
+	siSupabase,
+	siWebflow,
+	siWix,
+	siZapier,
+	siZoom
+].map((icon) => [icon.slug, icon.svg]));
+function bundledSimpleIcon(server) {
+	const slug = server.id === "zoom-workspace" ? "zoom" : server.id.replaceAll("-", "");
+	const svg = SIMPLE_ICONS[slug];
+	return svg ? `data:image/svg+xml,${encodeURIComponent(svg)}` : void 0;
+}
 const MCP_SERVER_SETUP_AUTH = {
 	bearer: {
 		type: "bearer",
@@ -120,6 +155,8 @@ const CUSTOM_MCP_SERVER_CARD = {
 function getMcpServerIconSrc(server) {
 	if (typeof server.icon === "string") return server.icon;
 	if (server.icon?.src) return server.icon.src;
+	const bundled = bundledSimpleIcon(server);
+	if (bundled) return bundled;
 	return inferFaviconUrl(server.url);
 }
 /** Remote MCP servers whose OAuth metadata exposes a registration_endpoint. */
@@ -425,6 +462,31 @@ const MANUAL_MCP_SERVER_CARDS = [
 			]
 		}
 	},
+	{
+		id: "github",
+		name: "GitHub",
+		url: "https://api.githubcopilot.com/mcp/",
+		description: "Clone, push, and open pull requests as a connected GitHub account",
+		category: MANUAL_CATEGORY,
+		manualSetup: {
+			auth: {
+				type: "bearer",
+				label: "Personal access token (classic)",
+				fields: [{
+					name: "bearerToken",
+					label: "Personal access token",
+					inputType: "password",
+					placeholder: "ghp_…",
+					required: true
+				}]
+			},
+			description: "Paste a classic personal access token with all scopes from the agent's own GitHub account — the account is the access boundary. Git and the GitHub API both authenticate as this account.",
+			links: [{
+				label: "Create a classic token",
+				url: "https://github.com/settings/tokens"
+			}]
+		}
+	},
 	{
 		id: "gmail",
 		name: "Gmail",
@@ -870,6 +932,12 @@ const DEFAULT_MCP_SERVER_CARDS = [
 	...DCR_MCP_SERVER_CARDS,
 	CUSTOM_MCP_SERVER_CARD,
 	...MANUAL_MCP_SERVER_CARDS
-];
+].map((server) => {
+	const icon = bundledSimpleIcon(server);
+	return icon ? {
+		...server,
+		icon
+	} : server;
+});
 //#endregion
 export { CUSTOM_MCP_SERVER_CARD, DCR_MCP_SERVER_CARDS, DEFAULT_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, MCP_SERVER_SETUP_AUTH, getMcpServerEntry, getMcpServerIconSrc, getMcpServerRuntimeState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.46.3",
+  "version": "0.46.5",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -50,10 +50,11 @@
     "react-icons": "^5.7.0",
     "rehype-slug": "^6.0.0",
     "shiki": "^3.23.0",
+    "simple-icons": "16.28.0",
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.2",
-    "@mcp-b/design-tokens": "0.46.3"
+    "@mcp-b/design-tokens": "0.46.5"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.249",