feat(site): take/release control agents desktop buttons (#24009)

Add "Take control" and "Release control" buttons to the agents desktop
sidebar. This prevents accidental inputs in the VNC window.


https://github.com/user-attachments/assets/b5319579-e1c5-433b-9ba5-b239661a2e4c

site/src/pages/AgentsPage/components/RightPanel/DesktopPanel.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
 import { fn } from "storybook/test";
 import { DesktopPanelView, type DesktopPanelViewProps } from "./DesktopPanel";
 
@@ -6,6 +7,9 @@ const defaults: DesktopPanelViewProps = {
 	status: "idle",
 	reconnect: fn(),
 	attach: fn(),
+	isControlling: false,
+	onTakeControl: fn(),
+	onReleaseControl: fn(),
 };
 
 const meta: Meta<typeof DesktopPanelView> = {
@@ -14,11 +18,30 @@ const meta: Meta<typeof DesktopPanelView> = {
 	args: defaults,
 	decorators: [
 		(Story) => (
-			<div style={{ height: 400, width: 480, border: "1px solid #333" }}>
+			<div
+				style={{
+					height: 400,
+					width: 480,
+					border: "1px solid #333",
+					background:
+						"linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)",
+				}}
+			>
 				<Story />
 			</div>
 		),
 	],
+	render: function RenderComponent(args) {
+		const [isControlling, setIsControlling] = useState(args.isControlling);
+		return (
+			<DesktopPanelView
+				{...args}
+				isControlling={isControlling}
+				onTakeControl={() => setIsControlling(true)}
+				onReleaseControl={() => setIsControlling(false)}
+			/>
+		);
+	},
 };
 export default meta;
 type Story = StoryObj<typeof DesktopPanelView>;
@@ -33,6 +56,10 @@ export const Connected: Story = {
 	args: { status: "connected" },
 };
 
+export const ConnectedControlling: Story = {
+	args: { status: "connected", isControlling: true },
+};
+
 export const Disconnected: Story = {
 	args: { status: "disconnected" },
 };

site/src/pages/AgentsPage/components/RightPanel/DesktopPanel.tsx

@@ -1,7 +1,9 @@
+import { HandIcon, MousePointer2Icon } from "lucide-react";
 import type { FC } from "react";
 import { useState } from "react";
 import { Button } from "#/components/Button/Button";
 import { Spinner } from "#/components/Spinner/Spinner";
+import { cn } from "#/utils/cn";
 import { useDesktopConnection } from "../../hooks/useDesktopConnection";
 
 type DesktopConnectionStatus =
@@ -21,6 +23,9 @@ export interface DesktopPanelViewProps {
 	status: DesktopConnectionStatus;
 	reconnect: () => void;
 	attach: (container: HTMLElement) => void;
+	isControlling: boolean;
+	onTakeControl: () => void;
+	onReleaseControl: () => void;
 }
 
 export const DesktopPanel: FC<DesktopPanelProps> = ({ chatId, isVisible }) => {
@@ -32,12 +37,24 @@ export const DesktopPanel: FC<DesktopPanelProps> = ({ chatId, isVisible }) => {
 		setActivated(true);
 	}
 
+	const [isControlling, setIsControlling] = useState(false);
+	if (!isVisible && isControlling) {
+		setIsControlling(false);
+	}
+
 	const { status, reconnect, attach } = useDesktopConnection({
 		chatId,
 		activated,
 	});
 	return (
-		<DesktopPanelView status={status} reconnect={reconnect} attach={attach} />
+		<DesktopPanelView
+			status={status}
+			reconnect={reconnect}
+			attach={attach}
+			isControlling={isControlling}
+			onTakeControl={() => setIsControlling(true)}
+			onReleaseControl={() => setIsControlling(false)}
+		/>
 	);
 };
 
@@ -45,6 +62,9 @@ export const DesktopPanelView: FC<DesktopPanelViewProps> = ({
 	status,
 	reconnect,
 	attach,
+	isControlling,
+	onTakeControl,
+	onReleaseControl,
 }) => {
 	if (status === "connecting") {
 		return (
@@ -89,11 +109,43 @@ export const DesktopPanelView: FC<DesktopPanelViewProps> = ({
 
 	// status === "connected"
 	return (
-		<div
-			ref={(el) => {
-				if (el) attach(el);
-			}}
-			className="h-full w-full"
-		/>
+		<div className="relative h-full w-full">
+			{/* "Release Control" button — top-right, only when controlling */}
+			{isControlling && (
+				<Button
+					variant="default"
+					size="sm"
+					onClick={onReleaseControl}
+					className="absolute top-2 right-2 z-20 shadow-xl drop-shadow-lg"
+				>
+					<HandIcon className="h-4 w-4" />
+					Release control
+				</Button>
+			)}
+			{/* VNC container — pointer-events toggled */}
+			<div
+				ref={(el) => {
+					if (el) attach(el);
+				}}
+				className={cn("h-full w-full", !isControlling && "pointer-events-none")}
+			/>
+			{/* "Take Control" hover overlay — only when NOT controlling */}
+			{!isControlling && (
+				<div className="group/desktop absolute inset-0 z-10 flex items-center justify-center bg-black/0 transition-all duration-200 ease-in-out group-hover/desktop:bg-black/40">
+					<span className="opacity-0 transition-opacity duration-200 ease-in-out group-hover/desktop:opacity-100">
+						<Button
+							variant="default"
+							size="sm"
+							onClick={onTakeControl}
+							aria-label="Take control of desktop"
+							className="shadow-xl drop-shadow-lg"
+						>
+							<MousePointer2Icon className="h-4 w-4" />
+							Take control
+						</Button>
+					</span>
+				</div>
+			)}
+		</div>
 	);
 };