@robota-sdk/agent-ui-web 3.2.1 → 3.3.0

package/dist/index.js

@@ -1,3 +1,4 @@
+import { isObserverMessageType } from "@robota-sdk/agent-transport";
 import React, { createContext, createElement, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { decodeFrame, decodeServerMessage } from "@robota-sdk/agent-transport/client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -306,6 +307,7 @@ const SERVER_MESSAGE_HANDLING = {
 	background_task_control_result: "visible-notice",
 	protocol_error: "visible-notice",
 	resume_gap: "transport-control",
+	surface_role: "reducer-state",
 	settings: "reducer-state",
 	settings_error: "reducer-state"
 };
@@ -400,6 +402,7 @@ function nextRequestId$6(prefix) {
 	return `${prefix}_${requestCounter$6}_${Date.now()}`;
 }
 const CONNECTION_CLOSED = "The connection to the session closed.";
+const READ_ONLY = "This session is read-only.";
 /**
 * The key a finished call's app view is read and called by, taken from the tool row's `appView`
 * reference; `undefined` when the row gives none. Everything outside this module treats it as an
@@ -431,7 +434,7 @@ function callAppToolMessage(requestId, viewKey, name, args) {
 * keeps its own entry. A reply that lost its connection never arrives: the owner of the connection
 * rejects every outstanding request when it drops, is replaced or goes away (`rejectPendingAppRequests`).
 */
-function useAppViewRequests(send, isConnected) {
+function useAppViewRequests(send, isConnected, isObserving) {
 	const pendingRef = useRef(/* @__PURE__ */ new Map());
 	const [requestOwner] = useState(() => nextRequestId$6("app_request"));
 	const rejectPendingAppRequests = useCallback((reason = CONNECTION_CLOSED) => {
@@ -447,6 +450,10 @@ function useAppViewRequests(send, isConnected) {
 			reject(/* @__PURE__ */ new Error(signal?.aborted ? "The app view closed." : CONNECTION_CLOSED));
 			return;
 		}
+		if (isObserving()) {
+			reject(/* @__PURE__ */ new Error(READ_ONLY));
+			return;
+		}
 		const requestId = nextRequestId$6(`${requestOwner}_${prefix}`);
 		const dispose = () => signal?.removeEventListener("abort", abort);
 		const abort = () => {
@@ -465,6 +472,7 @@ function useAppViewRequests(send, isConnected) {
 		}
 	}), [
 		isConnected,
+		isObserving,
 		requestOwner,
 		send
 	]);
@@ -1017,7 +1025,7 @@ function initialSidebarOpen() {
 * on its primary one. After a reconnect to such a host this surface goes back to the session it was
 * on; an older host has one session for everyone, so there is nothing to go back to.
 */
-function useSessionDirectoryState(send) {
+function useSessionDirectoryState(send, isObserving) {
 	const { storage: { browserNamespace } } = useProductIdentity();
 	const [sessionListing, setSessionListing] = useState(null);
 	const [sessionsError, setSessionsError] = useState(null);
@@ -1068,6 +1076,7 @@ function useSessionDirectoryState(send) {
 		if (target === null) return;
 		clearStoredRestoreId(browserNamespace);
 		if (target === listing.currentSessionId) return;
+		if (isObserving()) return;
 		if (!keepsSessionsLive(listing)) return;
 		if (!listing.sessions.some((row) => row.id === target)) return;
 		send({
@@ -1075,7 +1084,11 @@ function useSessionDirectoryState(send) {
 			sessionId: target,
 			requestId: nextRequestId$1("session_change")
 		});
-	}, [send, browserNamespace]);
+	}, [
+		send,
+		browserNamespace,
+		isObserving
+	]);
 	return {
 		sessionListing,
 		sessionsError,
@@ -1370,6 +1383,9 @@ function buildConversationEntriesFromDisplaySegments(displaySegments) {
 function useSessionClient(makeClient) {
 	const [status, setStatus] = useState("disconnected");
 	const statusRef = useRef("disconnected");
+	const [role, setRole] = useState(null);
+	const roleRef = useRef(null);
+	const isObserving = useCallback(() => roleRef.current === "observe", []);
 	const [messages, setMessages] = useState([]);
 	const [activeTools, setActiveTools] = useState([]);
 	const [streamingText, setStreamingText] = useState("");
@@ -1437,8 +1453,9 @@ function useSessionClient(makeClient) {
 	const [executionDetailInput, setExecutionDetailInput] = useState();
 	const executionDetailInputRef = useRef(null);
 	const send = useCallback((msg) => {
+		const refused = isObserving() && !isObserverMessageType(msg.type);
 		if (msg.type === "send-background-task") {
-			if (executionDetailInputRef.current !== null) return;
+			if (refused || executionDetailInputRef.current !== null) return;
 			executionDetailInputRef.current = msg.taskId;
 			setExecutionDetailInput({
 				taskId: msg.taskId,
@@ -1461,14 +1478,16 @@ function useSessionClient(makeClient) {
 				});
 				return;
 			}
+			if (refused) return;
 			commandsInFlightRef.current += 1;
 		}
+		if (refused) return;
 		if (msg.type === "switch-session" || msg.type === "new-session") {
 			sessionChangesInFlightRef.current += 1;
 			if (msg.requestId !== void 0) sessionChangeRequestIdsRef.current.add(msg.requestId);
 		}
 		clientRef.current?.send(msg);
-	}, [appendEntry]);
+	}, [appendEntry, isObserving]);
 	/** One session change this surface asked for has been answered. */
 	const settleSessionChange = useCallback((requestId) => {
 		sessionChangesInFlightRef.current = Math.max(0, sessionChangesInFlightRef.current - 1);
@@ -1504,8 +1523,8 @@ function useSessionClient(makeClient) {
 	const { handleExecutionDetailMessage, handleExecutionWorkspace, closeExecutionDetail, ...executionDetailState } = useExecutionDetailState(send);
 	const { handleModelListMessage, ...modelListState } = useModelListState(send);
 	const { handleProjectMessage, ...projectPanelState } = useProjectPanelState(send);
-	const { handleAppViewMessage, rejectPendingAppRequests, readAppView, callAppTool } = useAppViewRequests(send, useCallback(() => statusRef.current === "connected", []));
-	const { handleSessionsMessage, canListSessions, markCurrent, armRestore, ...sessionDirectoryState } = useSessionDirectoryState(send);
+	const { handleAppViewMessage, rejectPendingAppRequests, readAppView, callAppTool } = useAppViewRequests(send, useCallback(() => statusRef.current === "connected", []), isObserving);
+	const { handleSessionsMessage, canListSessions, markCurrent, armRestore, ...sessionDirectoryState } = useSessionDirectoryState(send, isObserving);
 	const { requestSessions, setSessionSidebarOpen } = sessionDirectoryState;
 	const { handleSettingsMessage, openSettings, refreshSettings, ...settingsState } = useSettingsState(send);
 	const settingsOpenRef = useRef(false);
@@ -1527,6 +1546,10 @@ function useSessionClient(makeClient) {
 		if (handleAgentDefinitionsMessage(msg)) return;
 		if (handleSchedulesMessage(msg)) return;
 		switch (msg.type) {
+			case "surface_role":
+				roleRef.current = msg.role;
+				setRole(msg.role);
+				break;
 			case "messages": {
 				const reconstructed = msg.display ? buildConversationEntriesFromDisplaySegments(msg.display) : msg.messages.flatMap((m) => {
 					if (m.role !== "user" && m.role !== "assistant") return [];
@@ -1898,6 +1921,10 @@ function useSessionClient(makeClient) {
 		const onStatusChange = (next) => {
 			statusRef.current = next;
 			setStatus(next);
+			if (next !== "connected") {
+				roleRef.current = null;
+				setRole(null);
+			}
 			if (next !== "connected") {
 				rejectPendingAppRequests();
 				clearCompactionNotices();
@@ -1916,6 +1943,7 @@ function useSessionClient(makeClient) {
 				sessionChangesInFlightRef.current = 0;
 				sessionChangeRequestIdsRef.current.clear();
 				pendingIntentRef.current = null;
+				client.send({ type: "get-surface-role" });
 				client.send({ type: "get-commands" });
 				client.send({ type: "get-status" });
 				client.send({ type: "get-pending" });
@@ -1924,10 +1952,18 @@ function useSessionClient(makeClient) {
 				requestSchedules();
 			}
 		};
-		const client = makeClient({
+		const inner = makeClient({
 			onMessage: handleMessage,
 			onStatusChange
 		});
+		const client = {
+			connect: () => inner.connect(),
+			disconnect: () => inner.disconnect(),
+			send: (msg) => {
+				if (roleRef.current === "observe" && !isObserverMessageType(msg.type)) return;
+				inner.send(msg);
+			}
+		};
 		clientRef.current = client;
 		client.connect();
 		return () => {
@@ -1956,6 +1992,7 @@ function useSessionClient(makeClient) {
 		commandCatalog,
 		sessionStatus,
 		ownDriverId,
+		role,
 		send,
 		sendCommandSilently,
 		pendingPrompts,
@@ -3569,7 +3606,7 @@ function AgentActivityPanel({ tasks, schedules = [], goal = null, onPauseSchedul
 							task,
 							onPause: onPauseSchedule,
 							onResume: onResumeSchedule,
-							onRequestDelete: () => setPendingDeleteId(task.id)
+							onRequestDelete: onDeleteSchedule ? () => setPendingDeleteId(task.id) : void 0
 						}, task.id))
 					})] }),
 					goal && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
@@ -3670,33 +3707,33 @@ function ScheduleCard({ task, onPause, onResume, onRequestDelete }) {
 					describeScheduleStatus(task)
 				]
 			}),
-			/* @__PURE__ */ jsxs("div", {
+			onResume || onPause || onRequestDelete ? /* @__PURE__ */ jsxs("div", {
 				className: "mt-2 flex items-center gap-3",
-				children: [isPaused ? /* @__PURE__ */ jsxs("button", {
+				children: [isPaused ? onResume && /* @__PURE__ */ jsxs("button", {
 					type: "button",
-					onClick: () => onResume?.(task.id),
+					onClick: () => onResume(task.id),
 					className: "flex items-center gap-1.5 rounded-lg px-2 py-1 text-[13px] text-muted-foreground hover:bg-hover hover:text-foreground",
 					children: [/* @__PURE__ */ jsx(Play, {
 						size: 11,
 						fill: "currentColor",
 						"aria-hidden": "true"
 					}), "Resume"]
-				}) : /* @__PURE__ */ jsxs("button", {
+				}) : onPause && /* @__PURE__ */ jsxs("button", {
 					type: "button",
-					onClick: () => onPause?.(task.id),
+					onClick: () => onPause(task.id),
 					className: "flex items-center gap-1.5 rounded-lg px-2 py-1 text-[13px] text-muted-foreground hover:bg-hover hover:text-foreground",
 					children: [/* @__PURE__ */ jsx(Pause, {
 						size: 11,
 						fill: "currentColor",
 						"aria-hidden": "true"
 					}), "Pause"]
-				}), /* @__PURE__ */ jsx("button", {
+				}), onRequestDelete && /* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: onRequestDelete,
 					className: "flex items-center gap-1.5 rounded-lg px-2 py-1 text-[13px] text-destructive hover:bg-destructive/10",
 					children: "Delete…"
 				})]
-			})
+			}) : null
 		]
 	});
 }
@@ -3720,7 +3757,7 @@ function GoalCard({ goal, onCancel }) {
 				className: "mt-1.5 pl-[26px] text-[13px] text-muted-foreground",
 				children: describeGoalStatus(goal)
 			}),
-			goal.status === "active" && /* @__PURE__ */ jsx("div", {
+			goal.status === "active" && onCancel && /* @__PURE__ */ jsx("div", {
 				className: "mt-2 pl-[26px]",
 				children: /* @__PURE__ */ jsxs("button", {
 					type: "button",
@@ -6516,7 +6553,7 @@ function GoalBar({ status, onStop }) {
 					goal.maxIterations
 				]
 			}),
-			/* @__PURE__ */ jsxs("button", {
+			onStop && /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				"aria-label": "Stop goal",
 				onClick: onStop,
@@ -8421,7 +8458,8 @@ function SetupPanel({ onSetUp, disabled }) {
 * The full desktop layout over an `IWsSessionState`. `surface` is an optional label shown next to the
 * mark (e.g. "app").
 */
-function SessionSurface({ state, surface, personalUsageEnabled = false, draftMode = "persistent", onReconnect, pickFiles, getPathForFile, onOpenMemoryInEditor, appViewSandboxUrl }) {
+function SessionSurface({ state, surface, personalUsageEnabled: personalUsageRequested = false, draftMode = "persistent", onReconnect, pickFiles, getPathForFile, onOpenMemoryInEditor, appViewSandboxUrl }) {
+	const readOnly = state.role === "observe";
 	const [view, setView] = useState("chat");
 	const { identity } = useProductIdentity();
 	const appViewHost = useMemo(() => ({
@@ -8440,6 +8478,7 @@ function SessionSurface({ state, surface, personalUsageEnabled = false, draftMod
 		identity.displayName,
 		surface
 	]);
+	const personalUsageEnabled = personalUsageRequested && !readOnly;
 	const composerRef = useRef(null);
 	const tasks = state.executionWorkspace?.entries ?? [];
 	const hasTasks = tasks.some((entry) => entry.kind !== "main_thread");
@@ -8459,7 +8498,7 @@ function SessionSurface({ state, surface, personalUsageEnabled = false, draftMod
 	const hasWorkInProgress = hasTasks || state.scheduledTasks.length > 0 || currentGoal !== null;
 	const isEmpty = state.messages.length === 0 && !state.streamingText && !state.isThinking && state.activeTools.length === 0;
 	const setupRequired = state.sessionStatus?.setupRequired === true;
-	const hasSessionList = (state.sessionListing ?? null) !== null || state.sessionsError?.code === "list_failed";
+	const hasSessionList = !readOnly && ((state.sessionListing ?? null) !== null || state.sessionsError?.code === "list_failed");
 	const sidebarOpen = hasSessionList && state.sessionSidebarOpen;
 	const usage = personalUsageEnabled && view === "usage";
 	const project = view === "project";
@@ -8529,7 +8568,7 @@ function SessionSurface({ state, surface, personalUsageEnabled = false, draftMod
 					connectionLost: state.connectionLost ?? false
 				}), usage ? /* @__PURE__ */ jsxs("div", {
 					className: "min-h-0 flex-1",
-					children: [/* @__PURE__ */ jsx(PersonalUsageDashboard, { state }), /* @__PURE__ */ jsx(PermissionPrompt, {
+					children: [/* @__PURE__ */ jsx(PersonalUsageDashboard, { state }), readOnly ? null : /* @__PURE__ */ jsx(PermissionPrompt, {
 						layout: "modal",
 						prompts: state.pendingPrompts,
 						onAnswerPermission: state.answerPermission,
@@ -8541,7 +8580,7 @@ function SessionSurface({ state, surface, personalUsageEnabled = false, draftMod
 					children: [/* @__PURE__ */ jsx(ProjectPanel, {
 						state,
 						onOpenMemoryInEditor
-					}), /* @__PURE__ */ jsx(PermissionPrompt, {
+					}), readOnly ? null : /* @__PURE__ */ jsx(PermissionPrompt, {
 						layout: "modal",
 						prompts: state.pendingPrompts,
 						onAnswerPermission: state.answerPermission,
@@ -8561,7 +8600,7 @@ function SessionSurface({ state, surface, personalUsageEnabled = false, draftMod
 								}),
 								/* @__PURE__ */ jsx("div", {
 									className: "min-h-0 flex-1 overflow-hidden",
-									children: setupRequired ? /* @__PURE__ */ jsx(SetupPanel, {
+									children: setupRequired && !readOnly ? /* @__PURE__ */ jsx(SetupPanel, {
 										onSetUp: () => state.send({
 											type: "command",
 											name: "provider",
@@ -8569,7 +8608,7 @@ function SessionSurface({ state, surface, personalUsageEnabled = false, draftMod
 										}),
 										disabled: state.status !== "connected"
 									}) : isEmpty ? /* @__PURE__ */ jsx(EmptyState, {}) : /* @__PURE__ */ jsx(AppViewHostContext.Provider, {
-										value: appViewHost,
+										value: readOnly ? null : appViewHost,
 										children: /* @__PURE__ */ jsx(ConversationView, {
 											messages: state.messages,
 											activeTools: state.activeTools,
@@ -8584,13 +8623,13 @@ function SessionSurface({ state, surface, personalUsageEnabled = false, draftMod
 									children: [
 										/* @__PURE__ */ jsx(GoalBar, {
 											status: state.sessionStatus ?? null,
-											onStop: () => state.send({
+											onStop: readOnly ? void 0 : () => state.send({
 												type: "command",
 												name: "goal",
 												args: "cancel"
 											})
 										}),
-										/* @__PURE__ */ jsx(PermissionPrompt, {
+										readOnly ? null : /* @__PURE__ */ jsx(PermissionPrompt, {
 											layout: "dock",
 											prompts: state.pendingPrompts,
 											onAnswerPermission: state.answerPermission,
@@ -8598,7 +8637,11 @@ function SessionSurface({ state, surface, personalUsageEnabled = false, draftMod
 											ownDriverId: state.ownDriverId,
 											onFocusReturn: () => composerRef.current?.focus()
 										}),
-										setupRequired ? null : /* @__PURE__ */ jsx(Composer, {
+										readOnly ? /* @__PURE__ */ jsx("p", {
+											role: "status",
+											className: "rounded-2xl bg-card px-4 py-3 text-center text-[14px] text-muted-foreground",
+											children: "Read-only: you are watching this session."
+										}) : setupRequired ? null : /* @__PURE__ */ jsx(Composer, {
 											ref: composerRef,
 											draftMode,
 											catalog: state.commandCatalog ?? null,
@@ -8653,13 +8696,13 @@ function SessionSurface({ state, surface, personalUsageEnabled = false, draftMod
 								selectedEntryId: state.openEntryId ?? void 0,
 								onSelect: (entry) => state.openExecutionDetail(entry.id),
 								onReturnToConversation: () => state.closeExecutionDetail(),
-								onStop: stopExecutionEntry,
+								onStop: readOnly ? void 0 : stopExecutionEntry,
 								schedules: state.scheduledTasks,
 								goal: currentGoal,
-								onPauseSchedule: state.pauseSchedule,
-								onResumeSchedule: state.resumeSchedule,
-								onDeleteSchedule: state.deleteSchedule,
-								onCancelGoal: () => state.send({
+								onPauseSchedule: readOnly ? void 0 : state.pauseSchedule,
+								onResumeSchedule: readOnly ? void 0 : state.resumeSchedule,
+								onDeleteSchedule: readOnly ? void 0 : state.deleteSchedule,
+								onCancelGoal: readOnly ? void 0 : () => state.send({
 									type: "command",
 									name: "goal",
 									args: "cancel"
@@ -8674,18 +8717,18 @@ function SessionSurface({ state, surface, personalUsageEnabled = false, draftMod
 							complete: state.executionDetailComplete,
 							onClose: () => state.closeExecutionDetail(),
 							onLoadMore: () => state.loadMoreExecutionDetail(),
-							onStop: openEntry ? () => stopExecutionEntry(openEntry) : void 0,
+							onStop: openEntry && !readOnly ? () => stopExecutionEntry(openEntry) : void 0,
 							inputState: state.executionDetailInput,
 							mode: state.executionDetailMode,
 							unreadable: state.executionDetailUnreadable,
 							onShowEarlier: state.showEarlierExecutionDetail,
 							onShowLive: state.showLiveExecutionDetail,
-							onSend: openEntry ? (prompt) => state.send({
+							onSend: openEntry && !readOnly ? (prompt) => state.send({
 								type: "send-background-task",
 								taskId: openEntry.sourceId,
 								input: { prompt }
 							}) : void 0,
-							onContinue: openEntry?.resumeSessionId ? () => {
+							onContinue: openEntry?.resumeSessionId && !readOnly ? () => {
 								if (openEntry.resumeSessionId) state.switchSession(openEntry.resumeSessionId);
 							} : void 0
 						})
@@ -8693,8 +8736,8 @@ function SessionSurface({ state, surface, personalUsageEnabled = false, draftMod
 				})]
 			}),
 			/* @__PURE__ */ jsx(SessionNotices, { state }),
-			/* @__PURE__ */ jsx(SettingsScreen, { state }),
-			/* @__PURE__ */ jsx(AgentSwitcherSheet, { state }),
+			readOnly ? null : /* @__PURE__ */ jsx(SettingsScreen, { state }),
+			readOnly ? null : /* @__PURE__ */ jsx(AgentSwitcherSheet, { state }),
 			/* @__PURE__ */ jsx(HelpSheet, {
 				open: state.helpOpen,
 				onClose: () => state.closeHelp(),