@mcp-b/react-components 0.50.0 → 0.51.0

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

@@ -252,7 +252,7 @@ function AgentChatActions({ children, ...props }) {
 	const { messages, busy } = useAgentChatRuntime();
 	const number = messages.slice(0, messageIndex + 1).filter((m) => m.role === message.role && !isCompactionMessage(m) && !getAgentEvent(m)).length;
 	const unavailable = busy && (message.role === "user" ? message.id === messages.findLast((item) => item.role === "user" && !getAgentEvent(item))?.id : message.id === messages.at(-1)?.id);
-	const actions = /* @__PURE__ */ jsx(MessageActions, {
+	return /* @__PURE__ */ jsx(MessageMeta, { children: /* @__PURE__ */ jsx(MessageActions, {
 		reserveSpace: message.role === "assistant",
 		"aria-label": `Actions for ${message.role === "assistant" ? "response" : "message"} ${number}`,
 		"data-unavailable": unavailable ? true : void 0,
@@ -260,8 +260,7 @@ function AgentChatActions({ children, ...props }) {
 		inert: unavailable ? true : void 0,
 		...props,
 		children
-	});
-	return message.role === "user" ? /* @__PURE__ */ jsx(MessageMeta, { children: actions }) : actions;
+	}) });
 }
 function AgentChatCopyAction() {
 	const { message, messageIndex } = useChatMessage();

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

@@ -14,6 +14,7 @@ type BrowserLiveScreenSignal = {
 type BrowserLiveScreenSignalPayload = {
   kind: "offer";
   sdp: string;
+  tabId: number;
 } | {
   kind: "answer";
   sdp: string;
@@ -70,9 +71,6 @@ type BrowserLiveScreenInput = {
   events: BrowserLiveScreenInputEvent[];
 };
 type BrowserLiveScreenCommand = {
-  kind: "selectTab";
-  tabId: number;
-} | {
   kind: "navigate";
   tabId: number;
   action: "back" | "reload";
@@ -111,14 +109,16 @@ interface BrowserLiveScreenProps {
    * from state, because Chrome's screencast carries only page pixels.
    */
   tabs?: readonly BrowserLiveScreenTab[];
-  /** Claimed tab the host wants visible when the data channel becomes usable. */
-  requestedTabId?: number;
+  /** The host owns this viewer's tab selection, typically in its route. */
+  tabId?: number;
+  /** Requests a new tab selection; the host commits it through `tabId`. */
+  onTabChange(this: void, tabId: number): void;
 }
 /**
  * A complete interactive viewer for an employee's claimed browser tabs.
  *
  * The host supplies only signaling transport, ICE configuration, and claimed
- * tab summaries. This component owns the peer connection, remote-input
+ * tab summaries and selection. This component owns the peer connection, remote-input
  * mapping, reconnect lifecycle, synthesized browser chrome, and cleanup.
  */
 declare function BrowserLiveScreen({
@@ -129,7 +129,8 @@ declare function BrowserLiveScreen({
   label,
   controlLabel,
   tabs,
-  requestedTabId
+  tabId: selectedTabId,
+  onTabChange
 }: BrowserLiveScreenProps): import("react").JSX.Element;
 //#endregion
 export { BrowserLiveScreen, BrowserLiveScreenCommand, BrowserLiveScreenFrameMetadata, BrowserLiveScreenInput, BrowserLiveScreenInputEvent, BrowserLiveScreenProps, BrowserLiveScreenProtocol, BrowserLiveScreenSignal, BrowserLiveScreenSignalPayload, BrowserLiveScreenStatus, BrowserLiveScreenTab };

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

@@ -11,10 +11,10 @@ const BROWSER_LIVE_SCREEN_NEGOTIATION_TIMEOUT_MS = 1e4;
 * A complete interactive viewer for an employee's claimed browser tabs.
 *
 * The host supplies only signaling transport, ICE configuration, and claimed
-* tab summaries. This component owns the peer connection, remote-input
+* tab summaries and selection. This component owns the peer connection, remote-input
 * mapping, reconnect lifecycle, synthesized browser chrome, and cleanup.
 */
-function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, protocol, getIceServers, label = "Employee browser", controlLabel = "Control employee browser", tabs = [], requestedTabId }) {
+function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, protocol, getIceServers, label = "Employee browser", controlLabel = "Control employee browser", tabs = [], tabId: selectedTabId, onTabChange }) {
 	const video = useRef(null);
 	const input = useRef(null);
 	const [inputElement, setInputElement] = useState(null);
@@ -59,13 +59,7 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 	useLayoutEffect(() => {
 		currentProtocol.current = protocol;
 	}, [protocol]);
-	const selectRequestedTab = useEffectEvent((data) => {
-		if (requestedTabId === void 0 || data?.readyState !== "open") return;
-		data.send(currentProtocol.current.serializeCommand({
-			kind: "selectTab",
-			tabId: requestedTabId
-		}));
-	});
+	const captureTabId = tabs.some((tab) => tab.tabId === selectedTabId) ? selectedTabId : void 0;
 	const dataChannelLabel = protocol.dataChannelLabel;
 	const handleWheel = useEffectEvent((event) => {
 		event.preventDefault();
@@ -107,6 +101,13 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 	}, [inputElement]);
 	const [streamed, setStreamed] = useState(null);
 	useEffect(() => {
+		if (captureTabId === void 0) {
+			setPhase("idle");
+			setStreamed(null);
+			return;
+		}
+		const tabId = captureTabId;
+		setPhase("connecting");
 		let disposed = false;
 		let connection;
 		let viewerId = "";
@@ -220,8 +221,6 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 			};
 			const dataChannel = peer.createDataChannel(dataChannelLabel);
 			channel.current = dataChannel;
-			dataChannel.onopen = () => selectRequestedTab(dataChannel);
-			selectRequestedTab(dataChannel);
 			dataChannel.onmessage = (event) => {
 				if (disposed || peer !== connection || channel.current !== dataChannel) return;
 				const status = parseStatus(event.data);
@@ -236,6 +235,7 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 					return;
 				}
 				if (status.kind === "streaming") {
+					if (status.tabId !== tabId) return;
 					const previous = geometry.current;
 					if (previous?.tabId !== status.tabId || previous.streamGeneration !== status.streamGeneration) cancelPointerState();
 					geometry.current = status;
@@ -253,7 +253,8 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 			if (disposed || peer !== connection) return;
 			await sendSignal(currentViewerId, {
 				kind: "offer",
-				sdp: offer.sdp ?? ""
+				sdp: offer.sdp ?? "",
+				tabId
 			});
 		}
 		function restart() {
@@ -270,10 +271,7 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 			unsubscribe();
 			closeCurrent(true);
 		};
-	}, [dataChannelLabel]);
-	useEffect(() => {
-		selectRequestedTab(channel.current);
-	}, [requestedTabId]);
+	}, [dataChannelLabel, captureTabId]);
 	function sendInput(events) {
 		const open = channel.current;
 		const status = geometry.current;
@@ -628,11 +626,8 @@ function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, proto
 			title: tab.title || tab.url || `Tab ${String(tab.tabId)}`,
 			...tab.url === void 0 ? {} : { url: tab.url }
 		})),
-		selectedTabId: streamed ? String(streamed.tabId) : null,
-		onSelectTab: (id) => sendCommand({
-			kind: "selectTab",
-			tabId: Number(id)
-		}),
+		selectedTabId: captureTabId === void 0 ? null : String(captureTabId),
+		onSelectTab: (id) => onTabChange(Number(id)),
 		url: displayUrl,
 		onOpenUrl: (next) => {
 			if (!streamed) return;

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

@@ -195,7 +195,7 @@ function SubagentRunPanelContent({ panel, renderRunLink }) {
 	const { runs, active, completed, visible } = getSubagentRunRows(panel);
 	const focus = useSubagentRunFocus(panel, visible);
 	const stop = panel.commands["current-work"] ?? IDLE;
-	if (panel.collection.status === "ready" && !runs.length && !panel.parentRunning) return null;
+	if (!runs.length) return null;
 	return /* @__PURE__ */ jsx(AgentChatPromptTray, {
 		"data-subagent-run-panel": "",
 		children: /* @__PURE__ */ jsx(Queue, {

package/dist/styles/agent-chat.css

@@ -168,14 +168,17 @@
    the same quiet look without per-app classes. Hug the actions — a short
    viewport (Storybook addons, a short side panel) used to stretch this into
    a vacant slab. Space-between only when there are three slots to fill.
-   Compact control tokens keep this strip on the same ramp as the composer. */
+   Compact control tokens keep this strip on the same ramp as the composer.
+   Count buttons only: opening a popup inserts non-layout focus guards. */
 .agent-chat-start-screen__composer-tray {
   align-self: start;
   justify-content: start;
   min-block-size: 0;
 }
 
-.agent-chat-start-screen__composer-tray:has(> :nth-child(3):last-child) {
+.agent-chat-start-screen__composer-tray:has(
+  > :nth-child(3 of .button):nth-last-child(1 of .button)
+) {
   justify-content: space-between;
 }
 
@@ -561,12 +564,17 @@
     font-size: var(--sigvelo-text-lg);
   }
 
-  .agent-chat-start-screen__composer-tray:has(> :nth-child(3):last-child) {
+  .agent-chat-start-screen__composer-tray:has(
+    > :nth-child(3 of .button):nth-last-child(1 of .button)
+  ) {
     display: grid;
     grid-template-columns: repeat(3, var(--sigvelo-layout-track-fill));
   }
 
-  .agent-chat-start-screen__composer-tray:has(> :nth-child(3):last-child) > .button {
+  .agent-chat-start-screen__composer-tray:has(
+      > :nth-child(3 of .button):nth-last-child(1 of .button)
+    )
+    > .button {
     inline-size: 100%;
     justify-content: center;
   }

package/dist/styles/message.css

@@ -146,6 +146,10 @@
   white-space: nowrap;
 }
 
+.message[data-from="assistant"] > .message__meta {
+  align-self: flex-start;
+}
+
 .message__meta .message__actions[data-unavailable] {
   visibility: hidden;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "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": {
@@ -54,7 +54,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.2",
-    "@mcp-b/design-tokens": "0.50.0"
+    "@mcp-b/design-tokens": "0.51.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.249",