@mcp-b/react-components 0.51.2 → 0.53.0

package/dist/assets/sigvelo-logo.svg

@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="390 289.5 420 420">
+  <title>SigVelo</title>
+  <style>
+    @media (prefers-color-scheme: dark) {
+      #top-gradient stop:nth-child(2) { stop-color: #06e8ff }
+      #top-gradient stop:nth-child(3) { stop-color: #25dfff }
+      #top-gradient stop:nth-child(4) { stop-color: #2ed1ff }
+      #top-gradient stop:nth-child(5) { stop-color: #36bdff }
+      #top-gradient stop:nth-child(6) { stop-color: #3ca4ff }
+      #top-gradient stop:nth-child(7) { stop-color: #3b85ff }
+      #top-gradient stop:nth-child(8) { stop-color: #3566ff }
+      #top-gradient stop:nth-child(9) { stop-color: #3561ff }
+      #bottom-gradient stop:nth-child(2) { stop-color: #17e8ff }
+      #bottom-gradient stop:nth-child(3) { stop-color: #2fe1ff }
+      #bottom-gradient stop:nth-child(4) { stop-color: #40d5ff }
+      #bottom-gradient stop:nth-child(5) { stop-color: #49c5ff }
+      #bottom-gradient stop:nth-child(6) { stop-color: #4cb1ff }
+      #bottom-gradient stop:nth-child(7) { stop-color: #4999ff }
+      #bottom-gradient stop:nth-child(8) { stop-color: #4081ff }
+      #bottom-gradient stop:nth-child(9) { stop-color: #316bff }
+      #bottom-gradient stop:nth-child(10) { stop-color: #2a64ff }
+      .body { fill: #26e5ff }
+    }
+  </style>
+  <defs>
+    <linearGradient id="top-gradient" x1="756.23" y1="475.14" x2="608.29" y2="352.58" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#00ebff"/>
+      <stop offset=".17" stop-color="#00e7fe"/>
+      <stop offset=".32" stop-color="#01dcfd"/>
+      <stop offset=".46" stop-color="#04cbfa"/>
+      <stop offset=".59" stop-color="#08b2f6"/>
+      <stop offset=".72" stop-color="#0c91f2"/>
+      <stop offset=".85" stop-color="#1269ec"/>
+      <stop offset=".98" stop-color="#183be6"/>
+      <stop offset="1" stop-color="#1a32e5"/>
+    </linearGradient>
+    <linearGradient id="bottom-gradient" x1="452.57" y1="524.29" x2="583.8" y2="641.28" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#00ebff"/>
+      <stop offset=".24" stop-color="#00e8ff"/>
+      <stop offset=".38" stop-color="#00e0ff"/>
+      <stop offset=".5" stop-color="#00d1ff"/>
+      <stop offset=".61" stop-color="#00bdff"/>
+      <stop offset=".71" stop-color="#00a3ff"/>
+      <stop offset=".8" stop-color="#0082ff"/>
+      <stop offset=".88" stop-color="#005cff"/>
+      <stop offset=".96" stop-color="#0030ff"/>
+      <stop offset="1" stop-color="#0118ff"/>
+    </linearGradient>
+  </defs>
+  <path fill="url(#top-gradient)" d="m746.99 482.75-145.57-84.52 60.02-34.87 71.05 41.28a29.03 29.03 0 0 1 14.47 25.13l.03 52.97Z"/>
+  <path fill="url(#bottom-gradient)" d="m602.51 601.74-60.02 34.87-29.12-16.94-45.85-26.63a29.03 29.03 0 0 1-14.48-25.14l-.03-53 59.5 34.57.79.46 89.21 51.8Z"/>
+  <path class="body" fill="#00e4ff" d="m732.58 595.89-115.46 67.09a29.16 29.16 0 0 1-29.22 0l-45.41-26.38 60.02-34.87 84.29-48.96-.07-84.18 60.29 35.03.03 67.1a29.05 29.05 0 0 1-14.47 25.16Z"/>
+  <path class="body" fill="#00e4ff" d="m661.44 363.37-60.02 34.87-88.19 51.21.07 79.61-60.32-35.03-.03-62.5a29.05 29.05 0 0 1 14.48-25.16l119.39-69.35a29.16 29.16 0 0 1 29.2 0l45.42 26.36Z"/>
+</svg>

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

@@ -1,5 +1,5 @@
 import { canRequestFavicon, inferFaviconUrl } from "../../utils/favicon.js";
-import { D as LinkIcon, P as MonitorIcon, R as PencilIcon, S as FileIcon, T as InfoIcon, U as SearchIcon, Z as TerminalIcon, et as WarningIcon, tt as WrenchIcon } from "../../icons-cuEtsgj9.js";
+import { D as LinkIcon, P as MonitorIcon, R as PencilIcon, S as FileIcon, T as InfoIcon, U as SearchIcon, Z as TerminalIcon, et as WarningIcon, tt as WrenchIcon } from "../../icons-CeGfXO21.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/AgentActivity.tsx

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

@@ -1,7 +1,7 @@
 import { D as PromptInputCommandDefinition, J as PromptInputMessage, r as PromptInput, vt as PromptInputTray } from "../../PromptInput-DGPrCTPl.js";
 import { r as AgentChatQueuedPrompt } from "../../AgentChatQueue-MrHhV901.js";
 import { i as AgentMessageRenderPartContext } from "../../AgentMessageParts-C7L-Mv9U.js";
-import { i as MessageActions } from "../../Message-DyaTBiV7.js";
+import { i as MessageActions } from "../../Message-COsMPZSC.js";
 import { t as VirtualMessageScrollAnchor } from "../../MessageScrollerVirtual-D4afYwVB.js";
 import { a as getPendingToolApprovals } from "../../PromptInputApproval-D2hpn54U.js";
 import * as React from "react";
@@ -77,7 +77,11 @@ declare function AgentChatTranscript<MessageT extends UIMessage = UIMessage>({
   className,
   scrollAnchor
 }: AgentChatTranscriptProps<MessageT>): React.JSX.Element;
-declare function AgentChatLoading(): React.JSX.Element;
+declare function AgentChatLoading({
+  label
+}: {
+  label?: string;
+}): React.JSX.Element;
 interface AgentChatMessageProps<MessageT extends UIMessage = UIMessage> extends AgentChatRenderMessageContext<MessageT> {
   children: React.ReactNode;
 }

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

@@ -1,24 +1,23 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { H as RefreshIcon, K as SpinnerIcon, Q as TrashIcon, R as PencilIcon, t as ArchiveIcon } from "../../icons-cuEtsgj9.js";
 import { ExpansionStateProvider } from "../ai-sdk/ExpansionState.js";
+import { H as RefreshIcon, K as SpinnerIcon, Q as TrashIcon, R as PencilIcon, t as ArchiveIcon } from "../../icons-CeGfXO21.js";
+import { AgentChatMessageEditor } from "../ai-sdk/AgentChatMessageEditor.js";
+import { PromptInput, PromptInputSubmit, PromptInputTray, composerLinksToReferences, usePromptInputController } from "../ai-sdk/PromptInput.js";
 import { Message, MessageAction, MessageActions, MessageCopyAction, MessageMeta, MessageTimestamp } from "../ai-sdk/Message.js";
-import { AgentEventRow, getAgentEvent } from "./AgentEvent.js";
-import { AgentChatQueueProvider, useOptionalAgentChatQueue } from "./AgentChatQueue.js";
 import { AgentMessageParts } from "../ai-sdk/AgentMessageParts.js";
-import { AgentChatMessageEditor } from "../ai-sdk/AgentChatMessageEditor.js";
+import { Marker, MarkerContent } from "../foundations/Marker.js";
 import { VirtualMessageScroller } from "../ai-sdk/MessageScrollerVirtual.js";
-import { PromptInput, PromptInputSubmit, PromptInputTray, composerLinksToReferences, usePromptInputController } from "../ai-sdk/PromptInput.js";
 import { Queue, QueueItem, QueueItemAction, QueueItemActions, QueueItemContent, QueueItemIndicator, QueueList } from "../ai-sdk/Queue.js";
+import { AgentEventRow, getAgentEvent } from "./AgentEvent.js";
+import { AgentChatQueueProvider, useOptionalAgentChatQueue } from "./AgentChatQueue.js";
 import { PromptInputApproval, getApprovalStateKey, getPendingToolApprovals } from "./PromptInputApproval.js";
-import { EmptyState } from "../foundations/EmptyState.js";
-import { Marker, MarkerContent } from "../foundations/Marker.js";
-import { TransitionSurface } from "../foundations/TransitionSurface.js";
+import { BrandLoading } from "../general-purpose/BrandLoading.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";
-import { isCompactionMessage } from "agents/experimental/memory/utils";
 import { isTextUIPart } from "ai";
+import { isCompactionMessage } from "agents/experimental/memory/utils";
 //#region src/components/agents-sdk/AgentChat.tsx
 function observeAgentChatDock(element) {
 	if (!element || typeof ResizeObserver === "undefined") return;
@@ -114,9 +113,8 @@ function AgentChatRuntimeRoot({ messages, status = "ready", onRegenerate, onEdit
 	]);
 	return /* @__PURE__ */ jsx(AgentChatContext.Provider, {
 		value,
-		children: /* @__PURE__ */ jsxs(TransitionSurface, {
+		children: /* @__PURE__ */ jsxs("div", {
 			ref,
-			variant: "fade",
 			className: cx("agent-chat", className),
 			"data-recipe": "fill-host",
 			...props,
@@ -153,14 +151,10 @@ function AgentChatTranscript({ children, emptyState, className, scrollAnchor })
 		})
 	}) });
 }
-function AgentChatLoading() {
-	return /* @__PURE__ */ jsx("div", {
+function AgentChatLoading({ label = "Loading conversation" }) {
+	return /* @__PURE__ */ jsx(BrandLoading, {
 		className: "agent-chat__transcript-loading",
-		role: "status",
-		children: /* @__PURE__ */ jsx(EmptyState, {
-			icon: /* @__PURE__ */ jsx(SpinnerIcon, {}),
-			description: "Loading conversation"
-		})
+		label
 	});
 }
 const ChatMessageContext = React.createContext(null);

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

@@ -1,4 +1,4 @@
-import { E as KeyboardIcon, H as RefreshIcon, r as ArrowLeftIcon } from "../../icons-cuEtsgj9.js";
+import { E as KeyboardIcon, H as RefreshIcon, r as ArrowLeftIcon } from "../../icons-CeGfXO21.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 { K as SpinnerIcon, _ as DotIcon, k as MaximizeIcon } from "../../icons-cuEtsgj9.js";
+import { K as SpinnerIcon, _ as DotIcon, k as MaximizeIcon } from "../../icons-CeGfXO21.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,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { L as PauseIcon, z as PlayIcon } from "../../icons-cuEtsgj9.js";
+import { L as PauseIcon, z as PlayIcon } from "../../icons-CeGfXO21.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { i as formatClock } from "../../format-COCyV98Z.js";
 import { EmptyState } from "../foundations/EmptyState.js";

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { K as SpinnerIcon, nt as XIcon } from "../../icons-cuEtsgj9.js";
+import { K as SpinnerIcon, nt as XIcon } from "../../icons-CeGfXO21.js";
 import { Tabs } from "../foundations/Tabs.js";
 import { WebPreview, WebPreviewEmpty, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl, WebPreviewViewport } from "../general-purpose/WebPreview.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";

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

@@ -1,49 +1,62 @@
-import { EmployeeAgentRun, EmployeeBrand, EmployeeModelSetup, EmployeeShellProps, EmployeeStatus } from "./EmployeeChrome.js";
+import { l as WorkspaceNavigationAdapter } from "../../WorkspaceLink-Bh9-Jo1r.js";
+import { f as EmployeeShellProps, l as EmployeeModelSetup, n as EmployeeBrand, p as EmployeeStatus, t as EmployeeAgentRun } from "../../EmployeeChrome-B605rpVz.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/EmployeeApp.d.ts
-interface EmployeeAppProps extends EmployeeShellProps {
-  /** Application admission. Gates occupy the entire screen, without navigation. */
+interface EmployeeAppRootProps extends EmployeeShellProps {
+  /** Admission gates remain separate; connecting keeps the application frame mounted. */
   status: EmployeeStatus;
+  workspaceNavigation?: WorkspaceNavigationAdapter;
   brand: EmployeeBrand;
   modelSetup?: EmployeeModelSetup;
-  connectingLabel?: string;
-  /** Transcript hydration does not withdraw the parent's navigation or Stop controls. */
-  conversationLoading?: string;
-  /** Child transcript state; null means a parent chat, independently of toolbar state. */
-  conversationRun: EmployeeAgentRun | null;
-  /** Current output pane, or null when the conversation occupies the screen. */
-  workbench: React.ReactNode;
-  /** Host-bound live browser screen. */
-  live: React.ReactNode;
-  /** Host-bound schedule screen. */
+  /** Schedule navigation owns its own shell; the chat remains mounted behind it. */
   schedules: React.ReactNode;
-  report?: React.ReactNode;
-  /** Render the extension or manager shell from this package using the same chrome state. */
+  /** Render the extension or manager shell with the same chrome state. */
   shell: (props: EmployeeShellProps) => React.ReactNode;
-  /** Host-bound conversation. */
-  children: React.ReactNode;
   ref?: React.Ref<HTMLDivElement>;
 }
-/**
- * Canonical employee screen. Hosts keep chat providers mounted above it and
- * supply live content; this component owns admission, navigation and layout.
- */
-declare function EmployeeApp({
+/** Persistent admission and navigation frame. Put keyed runtimes and Suspense inside it. */
+declare function EmployeeAppRoot({
   status,
+  workspaceNavigation,
   brand,
   modelSetup,
-  connectingLabel,
-  conversationLoading,
-  conversationRun,
-  workbench,
-  live,
   schedules,
-  report,
   shell,
   ref,
   children,
   ...chrome
-}: EmployeeAppProps): React.JSX.Element;
+}: EmployeeAppRootProps): React.JSX.Element;
+interface EmployeeAppContentProps {
+  view: EmployeeShellProps["view"];
+  /** Current output pane, or null when the conversation occupies the screen. */
+  workbench: React.ReactNode;
+  live: React.ReactNode;
+  report?: React.ReactNode;
+  /** Place transcript hydration boundaries here so they cannot replace navigation or output. */
+  children: React.ReactNode;
+}
+/** Stable content lanes. Hosts hydrate the conversation locally and retain output while waiting. */
+declare function EmployeeAppContent({
+  view,
+  workbench,
+  live,
+  report,
+  children
+}: EmployeeAppContentProps): React.JSX.Element;
+/** Local run failure presentation; keep the parent connection and queue above this part. */
+declare function EmployeeAppConversation({
+  run,
+  children
+}: {
+  run: EmployeeAgentRun | null;
+  children: React.ReactNode;
+}): React.JSX.Element;
+/** Compose one persistent frame around independently hydrating conversation content. */
+declare const EmployeeApp: {
+  Root: typeof EmployeeAppRoot;
+  Content: typeof EmployeeAppContent;
+  Conversation: typeof EmployeeAppConversation;
+};
 //#endregion
-export { EmployeeApp, EmployeeAppProps };
+export { EmployeeApp, EmployeeAppContentProps, EmployeeAppRootProps };

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

@@ -1,57 +1,70 @@
-import { K as SpinnerIcon, et as WarningIcon } from "../../icons-cuEtsgj9.js";
-import "../foundations/icons.js";
+import { et as WarningIcon } from "../../icons-CeGfXO21.js";
+import { WorkbenchBack } from "./WorkbenchBack.js";
 import { StatusScreen } from "../general-purpose/StatusScreen.js";
 import { EmployeeChrome } from "./EmployeeChrome.js";
 import { ThinkFullApp } from "./ThinkFullApp.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/EmployeeApp.tsx
-/**
-* Canonical employee screen. Hosts keep chat providers mounted above it and
-* supply live content; this component owns admission, navigation and layout.
-*/
-function EmployeeApp({ status, brand, modelSetup, connectingLabel, conversationLoading, conversationRun, workbench, live, schedules, report, shell, ref, children, ...chrome }) {
-	if (status !== "ready") return /* @__PURE__ */ jsx("div", {
+/** Persistent admission and navigation frame. Put keyed runtimes and Suspense inside it. */
+function EmployeeAppRoot({ status, workspaceNavigation, brand, modelSetup, schedules, shell, ref, children, ...chrome }) {
+	const admitted = status === "ready" || status === "connecting";
+	chrome.compactBack ??= /* @__PURE__ */ jsx(WorkbenchBack, {
+		navigation: workspaceNavigation,
+		filesOpen: chrome.view === "files",
+		backToChatLink: chrome.renderLink({
+			kind: "view",
+			view: "chat"
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
 		className: "employee-app",
 		"data-view": chrome.view,
 		ref,
-		children: /* @__PURE__ */ jsx(EmployeeChrome.Gate, {
+		children: !admitted ? /* @__PURE__ */ jsx(EmployeeChrome.Gate, {
 			status,
 			brand,
 			identity: chrome.identity,
-			modelSetup,
-			connectingLabel
-		})
+			modelSetup
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: "employee-app__surface",
+			hidden: chrome.view === "schedules",
+			children: shell({
+				...chrome,
+				children
+			})
+		}), chrome.view === "schedules" ? schedules : null] })
 	});
-	const run = conversationRun;
-	const content = chrome.view === "live" ? live : /* @__PURE__ */ jsxs(ThinkFullApp.Root, {
+}
+/** Stable content lanes. Hosts hydrate the conversation locally and retain output while waiting. */
+function EmployeeAppContent({ view, workbench, live, report, children }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ThinkFullApp.Root, {
 		workbenchOpen: Boolean(workbench),
+		hidden: view === "live",
 		children: [
 			/* @__PURE__ */ jsxs(ThinkFullApp.Conversation, {
 				"data-workspace-restoration-scope": "chat",
-				children: [report, run?.state === "unavailable" || run?.state === "error" ? /* @__PURE__ */ jsx(StatusScreen, {
-					role: "alert",
-					icon: /* @__PURE__ */ jsx(WarningIcon, {}),
-					title: run.state === "unavailable" ? "Delegated run unavailable" : "Could not open this run",
-					description: run.state === "error" ? run.error : "This run is no longer available. The parent conversation keeps its history and controls."
-				}) : conversationLoading ? /* @__PURE__ */ jsx(StatusScreen, {
-					icon: /* @__PURE__ */ jsx(SpinnerIcon, {}),
-					description: conversationLoading
-				}) : children]
+				children: [report, children]
 			}),
 			/* @__PURE__ */ jsx(ThinkFullApp.ResizeHandle, {}),
 			/* @__PURE__ */ jsx(ThinkFullApp.Workbench, { children: workbench })
 		]
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "employee-app",
-		"data-view": chrome.view,
-		ref,
-		children: chrome.view === "schedules" ? schedules : shell({
-			...chrome,
-			children: content
-		})
-	});
+	}), view === "live" ? live : null] });
+}
+/** Local run failure presentation; keep the parent connection and queue above this part. */
+function EmployeeAppConversation({ run, children }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: run?.state === "unavailable" || run?.state === "error" ? /* @__PURE__ */ jsx(StatusScreen, {
+		role: "alert",
+		icon: /* @__PURE__ */ jsx(WarningIcon, {}),
+		title: run.state === "unavailable" ? "Delegated run unavailable" : "Could not open this run",
+		description: run.state === "error" ? run.error : "This run is no longer available. The parent conversation keeps its history and controls."
+	}) : children });
 }
+/** Compose one persistent frame around independently hydrating conversation content. */
+const EmployeeApp = {
+	Root: EmployeeAppRoot,
+	Content: EmployeeAppContent,
+	Conversation: EmployeeAppConversation
+};
 //#endregion
 export { EmployeeApp };

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

@@ -1,12 +1,16 @@
-import { E as PromptInputCommandComposerProps, F as PromptInputDictationProps, M as PromptInputContextSelectorProps } from "../../PromptInput-DGPrCTPl.js";
+import { E as PromptInputCommandComposerProps, M as PromptInputContextSelectorProps } from "../../PromptInput-DGPrCTPl.js";
 import { AgentChatTranscriptProps } from "./AgentChat.js";
+import { ConversationTabPickerProps } from "../extension/ConversationTabPicker.js";
+import { SetupChecklistGroupProps } from "../general-purpose/SetupChecklist.js";
+import { McpServerPickerItemsProps } from "./McpServerPicker.js";
+import { EmployeeStartScreenProps } from "./EmployeeStartScreen.js";
 import { ContextProps } from "../ai-sdk/Context.js";
 import { CodexModelSelectorProps } from "../extension/CodexModelSelector.js";
 import { ThinkChatMessageContentProps } from "./ThinkChat.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/EmployeeChat.d.ts
-interface EmployeeComposerProps {
+interface EmployeeComposerProps<Id extends string = string> {
   commands: PromptInputCommandComposerProps["commands"];
   mentionCommands?: PromptInputCommandComposerProps["mentionCommands"];
   onCompact?: () => Promise<{
@@ -14,18 +18,20 @@ interface EmployeeComposerProps {
   }>;
   placeholder?: string;
   disabled?: boolean;
-  /** Additional connection/personalization menu entries, using shared menu components. */
-  menu?: React.ReactNode;
+  personalization?: Pick<SetupChecklistGroupProps<Id>, "entries" | "onSelect">;
+  connections?: McpServerPickerItemsProps;
   tools?: React.ReactNode;
   contextSelector?: PromptInputContextSelectorProps;
-  tabs?: React.ReactNode;
+  tabs?: ConversationTabPickerProps;
   model?: CodexModelSelectorProps;
-  dictation?: PromptInputDictationProps;
+  /** Dictation control; mount live meter subscriptions inside this slot. */
+  dictation?: React.ReactNode;
   context?: ContextProps;
 }
 /** One composer anatomy for the app and its examples; capabilities remain explicit. */
-declare function EmployeeComposer({
-  menu,
+declare function EmployeeComposer<Id extends string = string>({
+  personalization,
+  connections,
   tools,
   contextSelector,
   tabs,
@@ -36,7 +42,7 @@ declare function EmployeeComposer({
   placeholder,
   disabled,
   ...input
-}: EmployeeComposerProps): React.JSX.Element;
+}: EmployeeComposerProps<Id>): React.JSX.Element;
 interface EmployeeTranscriptProps extends Omit<ThinkChatMessageContentProps, "message"> {
   readOnly?: boolean;
   scrollAnchor?: AgentChatTranscriptProps["scrollAnchor"];
@@ -59,5 +65,20 @@ declare function EmployeeChatDock({
   readOnly?: boolean;
   children?: React.ReactNode;
 }): React.JSX.Element;
+/** Shared conversation layout. Hosts hydrate the parts and retain their runtime providers. */
+declare function EmployeeConversation<Id extends string = string>({
+  transcript,
+  composer,
+  welcome,
+  loading,
+  loadingLabel,
+  ...dock
+}: {
+  transcript?: EmployeeTranscriptProps;
+  composer: EmployeeComposerProps<Id>;
+  welcome?: Omit<EmployeeStartScreenProps<Id>, "children">;
+  loading?: boolean;
+  loadingLabel?: string;
+} & React.ComponentProps<typeof EmployeeChatDock>): React.JSX.Element;
 //#endregion
-export { EmployeeChatDock, EmployeeComposer, EmployeeComposerProps, EmployeeTranscript, EmployeeTranscriptProps };
+export { EmployeeChatDock, EmployeeComposer, EmployeeComposerProps, EmployeeConversation, EmployeeTranscript, EmployeeTranscriptProps };

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

@@ -1,7 +1,11 @@
-import { PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputAttachments, PromptInputBody, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputFooterEnd, PromptInputTools } from "../ai-sdk/PromptInput.js";
-import { AgentChat, useAgentChatCompaction } from "./AgentChat.js";
+import { PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputAttachments, PromptInputBody, PromptInputCommandComposer, PromptInputContextSelector, PromptInputFooter, PromptInputFooterEnd, PromptInputTools } from "../ai-sdk/PromptInput.js";
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger } from "../ai-sdk/Context.js";
 import { CodexModelSelector } from "../extension/CodexModelSelector.js";
+import { ConversationTabPicker } from "../extension/ConversationTabPicker.js";
+import { AgentChat, useAgentChatCompaction } from "./AgentChat.js";
+import { n as SetupChecklistGroup } from "../../SetupChecklist-DWyifWWg.js";
+import { McpServerPickerItems } from "./McpServerPicker.js";
+import { EmployeeStartScreen } from "./EmployeeStartScreen.js";
 import { ThinkChat } from "./ThinkChat.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -23,7 +27,7 @@ function CompactingInput({ onCompact, ...props }) {
 	})] });
 }
 /** One composer anatomy for the app and its examples; capabilities remain explicit. */
-function EmployeeComposer({ menu, tools, contextSelector, tabs, model, dictation, context, onCompact, placeholder = "How can I help you today?", disabled, ...input }) {
+function EmployeeComposer({ personalization, connections, tools, contextSelector, tabs, model, dictation, context, onCompact, placeholder = "How can I help you today?", disabled, ...input }) {
 	const inputProps = {
 		...input,
 		placeholder,
@@ -38,13 +42,20 @@ function EmployeeComposer({ menu, tools, contextSelector, tabs, model, dictation
 				onCompact
 			}) : /* @__PURE__ */ jsx(CommandInput, { ...inputProps }),
 			/* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsxs(PromptInputTools, { children: [
-				/* @__PURE__ */ jsxs(PromptInputActionMenu, { children: [/* @__PURE__ */ jsx(PromptInputActionMenuTrigger, { disabled }), /* @__PURE__ */ jsxs(PromptInputActionMenuContent, { children: [/* @__PURE__ */ jsx(PromptInputActionAddAttachments, {}), menu] })] }),
+				/* @__PURE__ */ jsxs(PromptInputActionMenu, { children: [/* @__PURE__ */ jsx(PromptInputActionMenuTrigger, { disabled }), /* @__PURE__ */ jsxs(PromptInputActionMenuContent, { children: [
+					/* @__PURE__ */ jsx(PromptInputActionAddAttachments, {}),
+					personalization ? /* @__PURE__ */ jsx(SetupChecklistGroup, {
+						label: "Prompts",
+						...personalization
+					}) : null,
+					connections ? /* @__PURE__ */ jsx(McpServerPickerItems, { ...connections }) : null
+				] })] }),
 				contextSelector ? /* @__PURE__ */ jsx(PromptInputContextSelector, { ...contextSelector }) : null,
 				tools
 			] }), /* @__PURE__ */ jsxs(PromptInputFooterEnd, { children: [
-				tabs,
+				tabs ? /* @__PURE__ */ jsx(ConversationTabPicker, { ...tabs }) : null,
 				model ? /* @__PURE__ */ jsx(CodexModelSelector, { ...model }) : null,
-				dictation ? /* @__PURE__ */ jsx(PromptInputDictation, { ...dictation }) : null,
+				dictation,
 				context ? /* @__PURE__ */ jsxs(Context, {
 					...context,
 					children: [/* @__PURE__ */ jsx(ContextTrigger, {}), /* @__PURE__ */ jsxs(ContextContent, { children: [/* @__PURE__ */ jsx(ContextContentHeader, {}), /* @__PURE__ */ jsx(ContextContentBody, {})] })]
@@ -80,5 +91,22 @@ function EmployeeChatDock({ recovery, notices, readOnly, children }) {
 		children
 	] })] });
 }
+/** Shared conversation layout. Hosts hydrate the parts and retain their runtime providers. */
+function EmployeeConversation({ transcript, composer, welcome, loading, loadingLabel, ...dock }) {
+	if (welcome && !loading && !dock.readOnly) return /* @__PURE__ */ jsx(EmployeeStartScreen, {
+		...welcome,
+		children: /* @__PURE__ */ jsx(EmployeeComposer, { ...composer })
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [loading ? /* @__PURE__ */ jsx(AgentChat.Loading, { label: loadingLabel }) : /* @__PURE__ */ jsx(EmployeeTranscript, {
+		...transcript,
+		readOnly: dock.readOnly
+	}), /* @__PURE__ */ jsxs(EmployeeChatDock, {
+		...dock,
+		children: [dock.children, /* @__PURE__ */ jsx(EmployeeComposer, {
+			...composer,
+			disabled: loading || composer.disabled
+		})]
+	})] });
+}
 //#endregion
-export { EmployeeChatDock, EmployeeComposer, EmployeeTranscript };
+export { EmployeeChatDock, EmployeeComposer, EmployeeConversation, EmployeeTranscript };