@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/dist/chunk-GYVRFZDY.js

@@ -0,0 +1,2733 @@
+import {
+  InteractionInterventionBanner,
+  isInteractionControlUnavailable,
+  isNonRetryableInteractionError,
+  isSourcePlacementChangedError,
+  useInteractionInterventions,
+  useInteractionInvalidation,
+  useViewerMenuDismiss
+} from "./chunk-J6DBS4T3.js";
+import {
+  copyTextToClipboard
+} from "./chunk-JVYQRRC4.js";
+import {
+  DesktopViewer
+} from "./chunk-DYWBUX5Q.js";
+import {
+  STREAM_CLOSE_REASON_NORMAL,
+  STREAM_KIND_COMPUTER,
+  STREAM_ROLE_CLIENT,
+  decodeStreamFrame,
+  decodeStreamOpenAck,
+  encodeStreamClose,
+  encodeStreamOpen
+} from "./chunk-5J4FOW6Q.js";
+import {
+  usePageLiveActivity
+} from "./chunk-YQEAA6LT.js";
+import {
+  useEmbeddedComputerInteraction
+} from "./chunk-TKOTKRWY.js";
+import {
+  cn
+} from "./chunk-22KP6LR5.js";
+
+// src/components/computer-viewer.tsx
+import { interactionControlFailureFromError } from "@opengeni/sdk/interaction";
+import {
+  ChevronDownIcon,
+  CircleAlertIcon,
+  KeyboardIcon,
+  LoaderCircleIcon,
+  LockKeyholeIcon,
+  MonitorIcon,
+  MousePointer2Icon,
+  PanelsTopLeftIcon,
+  PlusIcon,
+  RefreshCwIcon,
+  RotateCcwIcon
+} from "lucide-react";
+import {
+  useCallback as useCallback5,
+  useEffect as useEffect5,
+  useLayoutEffect,
+  useMemo as useMemo2,
+  useRef as useRef5,
+  useState as useState5
+} from "react";
+
+// src/hooks/use-computer-frame-stream.ts
+import {
+  computerFrameSocketUrl,
+  decodeComputerFrameMessage
+} from "@opengeni/sdk/interaction";
+import { useCallback, useEffect, useRef, useState } from "react";
+var RELAY_TAG_OPEN = 1;
+var RELAY_TAG_OPEN_ACK = 2;
+var RELAY_TAG_FRAME = 3;
+var RELAY_TAG_CLOSE = 4;
+var MAX_AUTOMATIC_RECONNECTS_WITHOUT_A_FRAME = 2;
+function useComputerFrameStream(options) {
+  const { client, workspaceId } = useEmbeddedComputerInteraction(options);
+  const enabled = options.enabled ?? true;
+  const [nonce, setNonce] = useState(0);
+  const [result, setResult] = useState({
+    state: "idle",
+    frame: null,
+    attachment: null,
+    error: null
+  });
+  const latestRef = useRef({
+    key: "",
+    sequence: -1
+  });
+  const factoryRef = useRef(options.webSocketFactory);
+  const streamRef = useRef(options.stream);
+  factoryRef.current = options.webSocketFactory;
+  streamRef.current = options.stream;
+  const reconnect = useCallback(() => setNonce((value) => value + 1), []);
+  useEffect(() => {
+    const computerSessionId = options.computerSessionId;
+    const targetId = options.targetId;
+    if (!enabled || !computerSessionId || !targetId || typeof window === "undefined") {
+      setResult({ state: "idle", frame: null, attachment: null, error: null });
+      return;
+    }
+    latestRef.current = { key: "", sequence: -1 };
+    setResult({
+      state: "attaching",
+      frame: null,
+      attachment: null,
+      error: null
+    });
+    let disposed = false;
+    let socket = null;
+    let socketHandlers = null;
+    let reconnectTimer = null;
+    let expiryTimer = null;
+    let failures = 0;
+    let controllerGeneration = null;
+    let activeAttachment = null;
+    let activeStream = null;
+    let attachmentExpiresAt = 0;
+    let lastRelaySequence = null;
+    let relayAccepted = false;
+    let pendingFrame = null;
+    let decodingFrame = false;
+    const attachmentAbort = new AbortController();
+    const clearSocket = (terminateProducer = false) => {
+      if (!socket) return;
+      const current = socket;
+      const handlers = socketHandlers;
+      if (terminateProducer && activeStream?.kind === "relay" && socket.readyState === 1) {
+        try {
+          socket.send(
+            relayDatagram(
+              RELAY_TAG_CLOSE,
+              encodeStreamClose({
+                channelId: activeStream.channel.channelId,
+                reason: STREAM_CLOSE_REASON_NORMAL,
+                message: "viewer detached"
+              })
+            )
+          );
+        } catch {
+        }
+      }
+      if (handlers) {
+        current.removeEventListener("open", handlers.open);
+        current.removeEventListener("message", handlers.message);
+        current.removeEventListener("error", handlers.error);
+        current.removeEventListener("close", handlers.close);
+      }
+      if (current.readyState === 0 || current.readyState === 1) {
+        current.close(1e3, "viewer detached");
+      }
+      socket = null;
+      socketHandlers = null;
+      pendingFrame = null;
+    };
+    const clearRecoveryTimers = () => {
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+      if (expiryTimer) clearTimeout(expiryTimer);
+      reconnectTimer = null;
+      expiryTimer = null;
+    };
+    const scheduleReconnect = () => {
+      if (disposed || reconnectTimer) return;
+      if (failures >= MAX_AUTOMATIC_RECONNECTS_WITHOUT_A_FRAME) {
+        clearRecoveryTimers();
+        return;
+      }
+      const delay = Math.min(5e3, 250 * 2 ** Math.min(failures, 5));
+      failures += 1;
+      setResult((current) => ({ ...current, state: "reconnecting" }));
+      reconnectTimer = setTimeout(() => {
+        reconnectTimer = null;
+        connectSocket();
+      }, delay);
+    };
+    const fail = (cause, reconnectAutomatically = true) => {
+      if (disposed) return;
+      const error = cause instanceof Error ? cause : new Error(String(cause));
+      setResult((current) => ({ ...current, state: "error", error }));
+      clearSocket();
+      if (reconnectAutomatically) scheduleReconnect();
+      else clearRecoveryTimers();
+    };
+    const onOpen = (source) => {
+      if (disposed || source !== socket) return;
+      if (activeStream?.kind === "relay") {
+        const body = encodeStreamOpen({
+          channel: { ...activeStream.channel, kind: STREAM_KIND_COMPUTER },
+          token: activeStream.token,
+          role: STREAM_ROLE_CLIENT,
+          resumeFromSeq: lastRelaySequence === null ? "0" : (BigInt(lastRelaySequence) + 1n).toString()
+        });
+        try {
+          source.send(relayDatagram(RELAY_TAG_OPEN, body));
+        } catch (error) {
+          fail(error);
+        }
+        return;
+      }
+      setResult((current) => ({ ...current, state: "live", error: null }));
+    };
+    const drainLatestFrame = async () => {
+      if (decodingFrame) return;
+      decodingFrame = true;
+      try {
+        while (pendingFrame) {
+          if (disposed) break;
+          const pending = pendingFrame;
+          pendingFrame = null;
+          const { bytes, source } = pending;
+          const frame = await decodeComputerFrameMessage(bytes);
+          if (disposed || source !== socket) continue;
+          if (frame.computerSessionId !== computerSessionId || frame.targetId !== targetId) {
+            throw new Error("desktop frame belongs to another resource");
+          }
+          if (!controllerGeneration || frame.controllerGeneration !== controllerGeneration) {
+            throw new Error("desktop frame belongs to a stale controller");
+          }
+          const key = `${computerSessionId}:${targetId}:${frame.controllerGeneration}:${frame.targetGeneration}`;
+          if (latestRef.current.key === key && frame.sequence <= latestRef.current.sequence)
+            continue;
+          latestRef.current = { key, sequence: frame.sequence };
+          failures = 0;
+          setResult((current) => ({
+            ...current,
+            state: "live",
+            frame,
+            error: null
+          }));
+        }
+      } catch (cause) {
+        fail(cause);
+      } finally {
+        decodingFrame = false;
+        if (!disposed && pendingFrame) void drainLatestFrame();
+      }
+    };
+    const onMessage = (source, event) => {
+      void (async () => {
+        try {
+          const bytes = await messageBytes(event.data);
+          if (disposed || source !== socket) return;
+          let frameBytes = bytes;
+          if (activeStream?.kind === "relay") {
+            if (bytes.length < 1) throw new Error("desktop relay returned an empty message");
+            const tag = bytes[0];
+            const body = bytes.subarray(1);
+            if (tag === RELAY_TAG_OPEN_ACK) {
+              const ack = decodeStreamOpenAck(body);
+              if (!ack.accepted) {
+                activeAttachment = null;
+                activeStream = null;
+                attachmentExpiresAt = 0;
+                throw new Error(ack.error?.message ?? "desktop stream was rejected by the relay");
+              }
+              relayAccepted = true;
+              return;
+            }
+            if (tag === RELAY_TAG_CLOSE) {
+              activeAttachment = null;
+              activeStream = null;
+              attachmentExpiresAt = 0;
+              lastRelaySequence = null;
+              relayAccepted = false;
+              fail(new Error("Desktop frame source ended."), false);
+              return;
+            }
+            if (tag !== RELAY_TAG_FRAME || !relayAccepted) return;
+            const relayFrame = decodeStreamFrame(body);
+            lastRelaySequence = relayFrame.seq;
+            frameBytes = relayFrame.data;
+          }
+          pendingFrame = { bytes: frameBytes, source };
+          void drainLatestFrame();
+        } catch (cause) {
+          fail(cause);
+        }
+      })();
+    };
+    const onError = (source) => {
+      if (source !== socket) return;
+      fail(new Error("Desktop view lost connection."));
+    };
+    const onClose = (source) => {
+      if (disposed || source !== socket) return;
+      fail(new Error("Desktop view lost connection."));
+    };
+    const connectSocket = () => {
+      if (disposed) return;
+      clearSocket();
+      if (!activeAttachment || !activeStream || attachmentExpiresAt <= Date.now() + 1e3) {
+        void attach();
+        return;
+      }
+      if (activeStream.kind === "direct_rfb") {
+        setResult((current) => ({ ...current, state: "live", error: null }));
+        return;
+      }
+      relayAccepted = false;
+      setResult((current) => ({
+        ...current,
+        state: "connecting",
+        error: null
+      }));
+      const createSocket = factoryRef.current ?? ((url, protocols) => new WebSocket(url, protocols));
+      const openedSocket = createSocket(
+        activeStream.kind === "relay" ? activeStream.url : computerFrameSocketUrl(activeAttachment, streamRef.current),
+        activeStream.kind === "direct_websocket" ? [...activeStream.protocols] : []
+      );
+      socket = openedSocket;
+      socketHandlers = {
+        open: () => onOpen(openedSocket),
+        message: (event) => onMessage(openedSocket, event),
+        error: () => onError(openedSocket),
+        close: () => onClose(openedSocket)
+      };
+      openedSocket.binaryType = "arraybuffer";
+      openedSocket.addEventListener("open", socketHandlers.open);
+      openedSocket.addEventListener("message", socketHandlers.message);
+      openedSocket.addEventListener("error", socketHandlers.error);
+      openedSocket.addEventListener("close", socketHandlers.close);
+    };
+    const attach = async () => {
+      if (disposed) return;
+      clearSocket();
+      if (expiryTimer) clearTimeout(expiryTimer);
+      setResult((current) => ({
+        ...current,
+        state: current.attachment ? "reconnecting" : "attaching",
+        error: null
+      }));
+      try {
+        const attachment = await client.attachComputerSession(
+          workspaceId,
+          computerSessionId,
+          {
+            targetId,
+            expiresInSeconds: 120,
+            ...streamRef.current ? { stream: streamRef.current } : {}
+          },
+          { signal: attachmentAbort.signal, timeoutMs: 15e3 }
+        );
+        if (disposed) return;
+        if (attachment.computerSessionId !== computerSessionId || attachment.targetId !== targetId) {
+          throw new Error("desktop attachment does not match the requested resource");
+        }
+        controllerGeneration = attachment.controllerGeneration;
+        latestRef.current = { key: "", sequence: -1 };
+        activeAttachment = attachment;
+        activeStream = attachment.stream;
+        attachmentExpiresAt = Date.parse(attachment.expiresAt);
+        lastRelaySequence = null;
+        relayAccepted = false;
+        setResult((current) => ({
+          ...current,
+          state: "connecting",
+          attachment: {
+            computerSessionId: attachment.computerSessionId,
+            controllerGeneration: attachment.controllerGeneration,
+            targetId: attachment.targetId,
+            inputAllowed: attachment.inputAllowed,
+            stream: attachment.stream,
+            expiresAt: attachment.expiresAt
+          },
+          error: null
+        }));
+        const refreshIn = Number.isFinite(attachmentExpiresAt) ? Math.max(1e3, attachmentExpiresAt - Date.now() - 5e3) : 6e4;
+        expiryTimer = setTimeout(() => {
+          if (disposed) return;
+          clearSocket(true);
+          activeAttachment = null;
+          activeStream = null;
+          attachmentExpiresAt = 0;
+          void attach();
+        }, refreshIn);
+        connectSocket();
+      } catch (cause) {
+        if (attachmentAbort.signal.aborted || disposed) return;
+        fail(cause, !isPlacementGenerationLossError(cause));
+      }
+    };
+    void attach();
+    return () => {
+      disposed = true;
+      pendingFrame = null;
+      attachmentAbort.abort();
+      clearRecoveryTimers();
+      clearSocket(true);
+    };
+  }, [client, enabled, nonce, options.computerSessionId, options.targetId, workspaceId]);
+  return { ...result, reconnect };
+}
+function relayDatagram(tag, body) {
+  const message = new Uint8Array(body.length + 1);
+  message[0] = tag;
+  message.set(body, 1);
+  return message.buffer;
+}
+async function messageBytes(value) {
+  if (value instanceof ArrayBuffer) return new Uint8Array(value);
+  if (ArrayBuffer.isView(value)) {
+    return new Uint8Array(value.buffer, value.byteOffset, value.byteLength).slice();
+  }
+  if (typeof Blob !== "undefined" && value instanceof Blob) {
+    return new Uint8Array(await value.arrayBuffer());
+  }
+  throw new Error("desktop frame stream returned a non-binary message");
+}
+function isPlacementGenerationLossError(cause) {
+  const message = cause instanceof Error ? cause.message : String(cause);
+  return /placement instance changed|controller authority changed/i.test(message);
+}
+
+// src/hooks/use-computer-session.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+function useComputerSession(options) {
+  const { client, workspaceId } = useEmbeddedComputerInteraction(options);
+  const computerSessionId = options.computerSessionId;
+  const enabled = (options.enabled ?? true) && computerSessionId !== null;
+  const pageLive = usePageLiveActivity();
+  const pollIntervalMs = Math.max(750, options.pollIntervalMs ?? 2e3);
+  const [state, setState] = useState2(
+    () => emptyState(computerSessionId, enabled)
+  );
+  const visible = state.computerSessionId === computerSessionId ? state : emptyState(computerSessionId, enabled);
+  const refreshBlocked = isNonRetryableInteractionError(visible.error);
+  const selectedTargetIdRef = useRef2(visible.selectedTargetId);
+  selectedTargetIdRef.current = visible.selectedTargetId;
+  const targetsRef = useRef2({
+    computerSessionId,
+    targets: visible.targets
+  });
+  const observationRef = useRef2({ computerSessionId, observation: visible.observation });
+  if (targetsRef.current.computerSessionId !== computerSessionId) {
+    targetsRef.current = { computerSessionId, targets: visible.targets };
+    observationRef.current = {
+      computerSessionId,
+      observation: visible.observation
+    };
+  } else {
+    targetsRef.current.targets = visible.targets;
+    observationRef.current.observation = visible.observation;
+  }
+  const requestRef = useRef2({
+    id: 0,
+    controller: null
+  });
+  const mutationRef = useRef2({
+    computerSessionId,
+    count: 0
+  });
+  const mountedRef = useRef2(true);
+  const invalidateRefresh = useCallback2(() => {
+    const id = requestRef.current.id + 1;
+    requestRef.current.controller?.abort();
+    requestRef.current = { id, controller: null };
+  }, []);
+  const refresh = useCallback2(async () => {
+    if (!enabled || !computerSessionId) return;
+    const id = requestRef.current.id + 1;
+    requestRef.current.controller?.abort();
+    const controller = new AbortController();
+    requestRef.current = { id, controller };
+    let discoveryCompleted = false;
+    try {
+      const [session, targetResponse] = await Promise.all([
+        client.getComputerSession(workspaceId, computerSessionId, {
+          signal: controller.signal
+        }),
+        client.listComputerTargets(workspaceId, computerSessionId, {
+          signal: controller.signal
+        })
+      ]);
+      discoveryCompleted = true;
+      if (!mountedRef.current || requestRef.current.id !== id) return;
+      const targets = sortComputerTargets(targetResponse.targets);
+      const selected = chooseTarget(targets, selectedTargetIdRef.current);
+      const previous = observationRef.current.observation;
+      const retainedObservation = selected && previous?.target.id === selected.id && previous.target.controllerGeneration === selected.controllerGeneration && previous.target.targetGeneration === selected.targetGeneration ? previous : null;
+      selectedTargetIdRef.current = selected?.id ?? null;
+      targetsRef.current = { computerSessionId, targets };
+      observationRef.current = { computerSessionId, observation: retainedObservation };
+      setState(
+        (current) => current.computerSessionId === computerSessionId ? {
+          ...current,
+          session,
+          targets,
+          selectedTargetId: selected?.id ?? null,
+          observation: retainedObservation,
+          loading: false,
+          error: null,
+          controlError: null
+        } : current
+      );
+      const observation = selected ? await client.observeComputerTarget(workspaceId, computerSessionId, selected.id, {
+        signal: controller.signal
+      }) : null;
+      if (!mountedRef.current || requestRef.current.id !== id) return;
+      selectedTargetIdRef.current = selected?.id ?? null;
+      targetsRef.current = { computerSessionId, targets };
+      observationRef.current = { computerSessionId, observation };
+      setState(
+        (current) => current.computerSessionId === computerSessionId ? {
+          ...current,
+          session,
+          targets,
+          selectedTargetId: selected?.id ?? null,
+          observation,
+          loading: false,
+          error: null
+        } : current
+      );
+    } catch (cause) {
+      if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id) return;
+      const error = cause instanceof Error ? cause : new Error(String(cause));
+      setState(
+        (current) => current.computerSessionId === computerSessionId ? {
+          ...current,
+          loading: false,
+          error,
+          controlError: isInteractionControlUnavailable(
+            error,
+            discoveryCompleted ? "observation" : "control"
+          ) ? error : current.controlError
+        } : current
+      );
+    } finally {
+      if (requestRef.current.id === id) requestRef.current = { id, controller: null };
+    }
+  }, [client, computerSessionId, enabled, workspaceId]);
+  useEffect2(() => {
+    mountedRef.current = true;
+    if (!enabled) {
+      invalidateRefresh();
+      setState(emptyState(computerSessionId, false));
+      return;
+    }
+    setState(
+      (current) => current.computerSessionId === computerSessionId ? { ...current, loading: true } : emptyState(computerSessionId, true)
+    );
+    void refresh();
+    return () => {
+      mountedRef.current = false;
+      invalidateRefresh();
+    };
+  }, [computerSessionId, enabled, invalidateRefresh, refresh]);
+  useEffect2(() => {
+    if (!enabled || !pageLive || visible.mutating || refreshBlocked) return;
+    const timer = setInterval(() => {
+      if (!requestRef.current.controller) void refresh();
+    }, pollIntervalMs);
+    return () => clearInterval(timer);
+  }, [enabled, pageLive, pollIntervalMs, refresh, refreshBlocked, visible.mutating]);
+  useEffect2(() => {
+    if (!enabled || !computerSessionId || !pageLive || refreshBlocked) return;
+    let disposed = false;
+    const timer = setInterval(() => {
+      void client.heartbeatComputerSession(workspaceId, computerSessionId).catch(() => {
+        if (!disposed) void refresh();
+      });
+    }, 3e4);
+    return () => {
+      disposed = true;
+      clearInterval(timer);
+    };
+  }, [client, computerSessionId, enabled, pageLive, refresh, refreshBlocked, workspaceId]);
+  const runMutation = useCallback2(
+    async (scopeComputerSessionId, operation) => {
+      invalidateRefresh();
+      if (mutationRef.current.computerSessionId !== scopeComputerSessionId) {
+        mutationRef.current = {
+          computerSessionId: scopeComputerSessionId,
+          count: 0
+        };
+      }
+      mutationRef.current.count += 1;
+      setState(
+        (current) => current.computerSessionId === scopeComputerSessionId ? { ...current, mutating: true, error: null } : current
+      );
+      try {
+        const result = await operation();
+        setState(
+          (current) => current.computerSessionId === scopeComputerSessionId ? { ...current, controlError: null } : current
+        );
+        return result;
+      } catch (cause) {
+        const error = cause instanceof Error ? cause : new Error(String(cause));
+        setState(
+          (current) => current.computerSessionId === scopeComputerSessionId ? {
+            ...current,
+            error,
+            controlError: isInteractionControlUnavailable(error) ? error : current.controlError
+          } : current
+        );
+        throw error;
+      } finally {
+        if (mutationRef.current.computerSessionId === scopeComputerSessionId) {
+          mutationRef.current.count = Math.max(0, mutationRef.current.count - 1);
+          const mutating = mutationRef.current.count > 0;
+          setState(
+            (current) => current.computerSessionId === scopeComputerSessionId ? { ...current, mutating } : current
+          );
+        }
+      }
+    },
+    [invalidateRefresh]
+  );
+  const selectTarget = useCallback2(
+    async (targetId) => {
+      if (!computerSessionId) throw new Error("No desktop is selected.");
+      const target = targetsRef.current.targets.find((candidate) => candidate.id === targetId);
+      if (!target) throw new Error("The selected desktop target is no longer available.");
+      invalidateRefresh();
+      selectedTargetIdRef.current = target.id;
+      observationRef.current = { computerSessionId, observation: null };
+      setState(
+        (current) => current.computerSessionId === computerSessionId ? {
+          ...current,
+          selectedTargetId: target.id,
+          observation: null,
+          loading: true,
+          error: null
+        } : current
+      );
+      try {
+        const observation = await client.observeComputerTarget(
+          workspaceId,
+          computerSessionId,
+          target.id
+        );
+        if (selectedTargetIdRef.current !== target.id) return target;
+        observationRef.current = { computerSessionId, observation };
+        setState(
+          (current) => current.computerSessionId === computerSessionId && current.selectedTargetId === target.id ? { ...current, observation, loading: false, error: null } : current
+        );
+        return observation.target;
+      } catch (cause) {
+        const error = cause instanceof Error ? cause : new Error(String(cause));
+        setState(
+          (current) => current.computerSessionId === computerSessionId && current.selectedTargetId === target.id ? {
+            ...current,
+            loading: false,
+            error,
+            controlError: isInteractionControlUnavailable(error, "observation") ? error : current.controlError
+          } : current
+        );
+        throw error;
+      }
+    },
+    [client, computerSessionId, invalidateRefresh, workspaceId]
+  );
+  const dispatchAction = useCallback2(
+    async (action, operationId, frame) => {
+      if (!computerSessionId) throw new Error("No desktop is selected.");
+      if (frame && frame.computerSessionId !== computerSessionId) {
+        throw new Error("The displayed desktop frame belongs to another desktop session.");
+      }
+      const currentObservation = observationRef.current.computerSessionId === computerSessionId ? observationRef.current.observation : null;
+      const focusTarget = action.type === "focus" ? targetsRef.current.targets.find((candidate) => candidate.id === action.targetId) ?? null : null;
+      const frameTarget = frame ? targetsRef.current.targets.find((candidate) => candidate.id === frame.targetId) ?? (currentObservation?.target.id === frame.targetId ? currentObservation.target : null) : null;
+      const inputTarget = (action.type === "keyboard" || action.type === "clipboard") && targetsRef.current.computerSessionId === computerSessionId ? targetsRef.current.targets.find(
+        (candidate) => candidate.id === selectedTargetIdRef.current
+      ) : null;
+      const target = frameTarget ?? focusTarget ?? currentObservation?.target ?? inputTarget ?? null;
+      if (!target) throw new Error("The desktop target is not ready for input.");
+      if (frame && frame.targetId !== selectedTargetIdRef.current) {
+        throw new Error("The displayed desktop frame is no longer selected.");
+      }
+      if (action.type === "pointer") {
+        const expectedFrameId = frame?.frameId ?? currentObservation?.frameId ?? null;
+        if (!expectedFrameId || action.frameId !== expectedFrameId) {
+          throw new Error("Pointer input must reference the exact displayed desktop frame.");
+        }
+      }
+      if (action.type === "semantic" && !currentObservation) {
+        throw new Error("The desktop accessibility tree is not ready for input.");
+      }
+      return await runMutation(computerSessionId, async () => {
+        const receipt = await client.actInComputer(workspaceId, computerSessionId, {
+          operationId,
+          targetId: target.id,
+          expectedTargetGeneration: frame?.targetGeneration ?? target.targetGeneration,
+          expectedObservationId: action.type === "pointer" ? null : currentObservation?.observationId ?? null,
+          expectedFrameId: action.type === "pointer" ? action.frameId : null,
+          action
+        });
+        if (receipt.observation) {
+          const observation = receipt.observation;
+          observationRef.current = { computerSessionId, observation };
+          selectedTargetIdRef.current = observation.target.id;
+          setState(
+            (current) => current.computerSessionId === computerSessionId ? {
+              ...current,
+              observation,
+              selectedTargetId: observation.target.id,
+              targets: replaceTarget(current.targets, observation.target)
+            } : current
+          );
+        } else {
+          void refresh();
+        }
+        return receipt;
+      });
+    },
+    [client, computerSessionId, refresh, runMutation, workspaceId]
+  );
+  const act = useCallback2(
+    async (action, operationId = crypto.randomUUID()) => await dispatchAction(action, operationId, null),
+    [dispatchAction]
+  );
+  const actFromFrame = useCallback2(
+    async (action, frame, operationId = crypto.randomUUID()) => await dispatchAction(action, operationId, frame),
+    [dispatchAction]
+  );
+  const readClipboard = useCallback2(async () => {
+    if (!computerSessionId) throw new Error("No desktop is selected.");
+    try {
+      return await client.readComputerClipboard(workspaceId, computerSessionId);
+    } catch (cause) {
+      const error = cause instanceof Error ? cause : new Error(String(cause));
+      setState(
+        (current) => current.computerSessionId === computerSessionId ? {
+          ...current,
+          error,
+          controlError: isInteractionControlUnavailable(error) ? error : current.controlError
+        } : current
+      );
+      throw error;
+    }
+  }, [client, computerSessionId, workspaceId]);
+  return {
+    session: visible.session,
+    targets: visible.targets,
+    selectedTarget: visible.targets.find((target) => target.id === visible.selectedTargetId) ?? null,
+    observation: visible.observation,
+    loading: visible.loading,
+    mutating: visible.mutating,
+    error: visible.error,
+    controlError: visible.controlError,
+    refresh,
+    readClipboard,
+    selectTarget,
+    act,
+    actFromFrame
+  };
+}
+function emptyState(computerSessionId, loading) {
+  return {
+    computerSessionId,
+    session: null,
+    targets: [],
+    selectedTargetId: null,
+    observation: null,
+    loading,
+    mutating: false,
+    error: null,
+    controlError: null
+  };
+}
+function chooseTarget(targets, preferredId) {
+  const preferred = targets.find((target) => target.id === preferredId);
+  if (preferred) return preferred;
+  return targets.find((target) => target.focused && target.kind === "screen") ?? targets.find((target) => target.kind === "screen") ?? targets.find((target) => target.focused && target.kind === "window") ?? targets.find((target) => target.kind === "window") ?? targets.find((target) => target.focused && target.kind === "app") ?? targets.find((target) => target.kind === "app") ?? targets[0] ?? null;
+}
+function sortComputerTargets(targets) {
+  const rank = { window: 0, app: 1, screen: 2 };
+  return [...targets].sort(
+    (left, right) => Number(right.focused) - Number(left.focused) || rank[left.kind] - rank[right.kind] || left.title.localeCompare(right.title) || left.id.localeCompare(right.id)
+  );
+}
+function replaceTarget(targets, target) {
+  return sortComputerTargets([
+    ...targets.filter((candidate) => candidate.id !== target.id),
+    target
+  ]);
+}
+
+// src/hooks/use-computer-input-posture.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+function useComputerInputPosture(options) {
+  const { client, workspaceId } = useEmbeddedComputerInteraction(options);
+  const { computerSessionId, controllerGeneration, enabled } = options;
+  const [nonce, setNonce] = useState3(0);
+  const [state, setState] = useState3(null);
+  const key = JSON.stringify([workspaceId, computerSessionId, controllerGeneration, enabled]);
+  const sourceRef = useRef3({ client, key });
+  if (sourceRef.current.client !== client || sourceRef.current.key !== key) {
+    sourceRef.current = { client, key };
+  }
+  const source = sourceRef.current;
+  const visible = state?.source === source && state.nonce === nonce ? state : null;
+  const refresh = useCallback3(() => setNonce((value) => value + 1), []);
+  useEffect3(() => {
+    if (!enabled || !computerSessionId || !controllerGeneration) return;
+    const controller = new AbortController();
+    let disposed = false;
+    setState({ source, nonce, inputAllowed: null, pending: true, error: null });
+    void (async () => {
+      try {
+        if (!client.getComputerInputPosture) {
+          throw new Error("Desktop input availability could not be verified.");
+        }
+        const posture = await client.getComputerInputPosture(workspaceId, computerSessionId, {
+          signal: controller.signal,
+          timeoutMs: 15e3
+        });
+        if (disposed || sourceRef.current !== source) return;
+        if (posture.computerSessionId !== computerSessionId || posture.controllerGeneration !== controllerGeneration || typeof posture.inputAllowed !== "boolean") {
+          throw new Error("Desktop input availability belongs to a different controller.");
+        }
+        setState({
+          source,
+          nonce,
+          inputAllowed: posture.inputAllowed,
+          pending: false,
+          error: null
+        });
+      } catch (cause) {
+        if (disposed || controller.signal.aborted || sourceRef.current !== source) return;
+        setState({
+          source,
+          nonce,
+          inputAllowed: null,
+          pending: false,
+          error: cause instanceof Error ? cause : new Error(String(cause))
+        });
+      }
+    })();
+    return () => {
+      disposed = true;
+      controller.abort();
+    };
+  }, [client, computerSessionId, controllerGeneration, enabled, nonce, source, workspaceId]);
+  return {
+    inputAllowed: visible?.inputAllowed ?? null,
+    pending: enabled && (visible?.pending ?? true),
+    error: visible?.error ?? null,
+    refresh
+  };
+}
+
+// src/hooks/use-computer-sessions.ts
+import { useCallback as useCallback4, useEffect as useEffect4, useMemo, useRef as useRef4, useState as useState4 } from "react";
+function useComputerSessions(options = {}) {
+  const {
+    client,
+    workspaceId,
+    registerSessionReconciler,
+    workspaceInteractionEvent,
+    workspaceInteractionConnectionState
+  } = useEmbeddedComputerInteraction(options);
+  const enabled = options.enabled ?? true;
+  const [state, setState] = useState4(() => emptyState2(workspaceId, enabled));
+  const requestRef = useRef4({
+    id: 0,
+    controller: null
+  });
+  const mountedRef = useRef4(true);
+  const visible = state.workspaceId === workspaceId ? state : emptyState2(workspaceId, enabled);
+  const cancelLoad = useCallback4(() => {
+    const id = requestRef.current.id + 1;
+    requestRef.current.controller?.abort();
+    requestRef.current = { id, controller: null };
+  }, []);
+  const load = useCallback4(
+    async (foreground) => {
+      if (!enabled) return;
+      const id = requestRef.current.id + 1;
+      requestRef.current.controller?.abort();
+      const controller = new AbortController();
+      requestRef.current = { id, controller };
+      setState((current) => ({
+        ...current.workspaceId === workspaceId ? current : emptyState2(workspaceId, true),
+        active: true,
+        loading: foreground,
+        refreshing: !foreground,
+        error: foreground || current.workspaceId !== workspaceId ? null : current.error
+      }));
+      try {
+        const response = await client.listComputerSessions(workspaceId, {
+          signal: controller.signal
+        });
+        if (!mountedRef.current || requestRef.current.id !== id) return;
+        setState({
+          workspaceId,
+          active: true,
+          revision: response.revision,
+          sessions: sortComputerSessions(response.sessions),
+          loading: false,
+          refreshing: false,
+          error: null
+        });
+      } catch (cause) {
+        if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id)
+          return;
+        setState((current) => ({
+          ...current.workspaceId === workspaceId ? current : emptyState2(workspaceId, true),
+          loading: false,
+          refreshing: false,
+          error: cause instanceof Error ? cause : new Error(String(cause))
+        }));
+      } finally {
+        if (requestRef.current.id === id) requestRef.current = { id, controller: null };
+      }
+    },
+    [client, enabled, workspaceId]
+  );
+  const refresh = useCallback4(async () => await load(false), [load]);
+  useEffect4(() => {
+    mountedRef.current = true;
+    if (!enabled) {
+      cancelLoad();
+      setState(emptyState2(workspaceId, false));
+      return;
+    }
+    void load(true);
+    return () => {
+      mountedRef.current = false;
+      cancelLoad();
+    };
+  }, [cancelLoad, enabled, load, workspaceId]);
+  useInteractionInvalidation({
+    workspaceId,
+    key: workspaceId,
+    enabled,
+    event: workspaceInteractionEvent,
+    connectionState: workspaceInteractionConnectionState,
+    knownRevision: visible.revision,
+    refresh,
+    fallbackPollIntervalMs: options.pollIntervalMs
+  });
+  useEffect4(() => {
+    if (!enabled || !options.sessionId) return;
+    return registerSessionReconciler(
+      options.sessionId,
+      `computer-sessions:${workspaceId}`,
+      refresh
+    );
+  }, [enabled, options.sessionId, refresh, registerSessionReconciler, workspaceId]);
+  const create = useCallback4(
+    async (request) => {
+      const response = await client.createComputerSession(workspaceId, {
+        ...request,
+        operationId: request.operationId ?? crypto.randomUUID()
+      });
+      setState((current) => mergeSession(current, workspaceId, response.session));
+      return response;
+    },
+    [client, workspaceId]
+  );
+  const end = useCallback4(
+    async (computerSessionId, operationId = crypto.randomUUID()) => {
+      const response = await client.endComputerSession(workspaceId, computerSessionId, {
+        operationId
+      });
+      setState((current) => mergeSession(current, workspaceId, response.session));
+      return response;
+    },
+    [client, workspaceId]
+  );
+  const relevantSessions = useMemo(
+    () => options.sessionId ? visible.sessions.filter(
+      (session) => session.associations.some((association) => association.sessionId === options.sessionId)
+    ) : [],
+    [options.sessionId, visible.sessions]
+  );
+  return {
+    revision: visible.revision,
+    sessions: visible.sessions,
+    relevantSessions,
+    // A disabled registry is deliberately empty. When its surface becomes
+    // visible again, expose that transition as loading in the same render so
+    // consumers cannot mistake the stale empty snapshot for a completed list.
+    loading: enabled ? !visible.active || visible.loading : false,
+    refreshing: visible.refreshing,
+    error: visible.error,
+    refresh,
+    create,
+    end
+  };
+}
+function emptyState2(workspaceId, loading) {
+  return {
+    workspaceId,
+    active: loading,
+    revision: 0,
+    sessions: [],
+    loading,
+    refreshing: false,
+    error: null
+  };
+}
+function sortComputerSessions(sessions) {
+  return [...sessions].sort((left, right) => {
+    const live = Number(isLiveComputer(right)) - Number(isLiveComputer(left));
+    return live || timestamp(right.lastUsedAt) - timestamp(left.lastUsedAt) || left.id.localeCompare(right.id);
+  });
+}
+function isLiveComputer(session) {
+  return !["ending", "ended", "failed", "lost"].includes(session.lifecycle);
+}
+function timestamp(value) {
+  const parsed = Date.parse(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function mergeSession(current, workspaceId, session) {
+  if (current.workspaceId !== workspaceId) return current;
+  const sessions = current.sessions.filter((candidate) => candidate.id !== session.id);
+  sessions.push(session);
+  return { ...current, sessions: sortComputerSessions(sessions), error: null };
+}
+
+// src/components/computer-viewer.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ComputerViewer({
+  sessionId,
+  enabled = true,
+  className,
+  onNotify,
+  webSocketFactory,
+  renderEmpty,
+  requestedComputerSessionId,
+  requestedComputerRequestId,
+  initialComputerSessionId,
+  onComputerSessionIdChange,
+  ...override
+}) {
+  const registry = useComputerSessions({ ...override, sessionId, enabled });
+  const createSession = registry.create;
+  const refreshRegistry = registry.refresh;
+  const liveRelevant = useMemo2(
+    () => registry.relevantSessions.filter((session) => isLiveComputer2(session)),
+    [registry.relevantSessions]
+  );
+  const connectedPlacementLoss = useMemo2(
+    () => registry.relevantSessions.find(
+      (session) => session.lifecycle === "lost" && session.failureCode === "source_placement_changed" && session.placement.kind === "connected_machine"
+    ) ?? null,
+    [registry.relevantSessions]
+  );
+  const recentRelevantFailure = useMemo2(
+    () => liveRelevant.length === 0 ? registry.relevantSessions.find(
+      (session) => ["failed", "lost"].includes(session.lifecycle) && !(session.failureCode === "source_placement_changed" && session.placement.kind === "connected_machine")
+    ) ?? null : null,
+    [liveRelevant.length, registry.relevantSessions]
+  );
+  const liveSessions = useMemo2(() => {
+    const sessions = registry.sessions.filter((session) => isLiveComputer2(session));
+    return recentRelevantFailure ? [...sessions, recentRelevantFailure] : sessions;
+  }, [recentRelevantFailure, registry.sessions]);
+  const relevant = useMemo2(
+    () => liveRelevant.length > 0 ? liveRelevant : recentRelevantFailure ? [recentRelevantFailure] : [],
+    [liveRelevant, recentRelevantFailure]
+  );
+  const [selection, setSelection] = useState5(
+    () => initialComputerSessionId ? { sessionId: initialComputerSessionId, pinned: true } : null
+  );
+  const selectComputerSession = useCallback5(
+    (next) => {
+      setSelection(next);
+      onComputerSessionIdChange?.(next?.sessionId ?? null);
+    },
+    [onComputerSessionIdChange]
+  );
+  const interventions = useInteractionInterventions({
+    ...override,
+    enabled,
+    resourceKind: "computer_session"
+  });
+  const [creating, setCreating] = useState5(false);
+  const [createError, setCreateError] = useState5(null);
+  const [showControls, setShowControls] = useState5(false);
+  const previousSessionIdRef = useRef5(sessionId);
+  const handledRequestRef = useRef5(null);
+  const seenInterventionIdsRef = useRef5(/* @__PURE__ */ new Set());
+  const createInFlightRef = useRef5(false);
+  const autoCreateSessionRef = useRef5(null);
+  const emptyCatalogConfirmationRef = useRef5(null);
+  const endedGenerationLossRef = useRef5(/* @__PURE__ */ new Set());
+  const recreatedPlacementLossRef = useRef5(/* @__PURE__ */ new Set());
+  const [suppressGenericCreate, setSuppressGenericCreate] = useState5(false);
+  const endStaleComputer = registry.end;
+  useEffect5(() => {
+    if (!enabled) return;
+    for (const session of registry.sessions) {
+      if (!isAttachedChromeGenerationLoss(session)) continue;
+      setSuppressGenericCreate(true);
+      if (endedGenerationLossRef.current.has(session.id)) continue;
+      endedGenerationLossRef.current.add(session.id);
+      void endStaleComputer(session.id).catch(() => {
+        endedGenerationLossRef.current.delete(session.id);
+      });
+    }
+  }, [enabled, endStaleComputer, registry.sessions]);
+  const notifyError = useCallback5(
+    (cause, fallback) => {
+      onNotify?.({
+        kind: "error",
+        message: cause instanceof Error ? cause.message : fallback
+      });
+    },
+    [onNotify]
+  );
+  useEffect5(() => {
+    if (previousSessionIdRef.current === sessionId) return;
+    previousSessionIdRef.current = sessionId;
+    handledRequestRef.current = null;
+    autoCreateSessionRef.current = null;
+    emptyCatalogConfirmationRef.current = null;
+    recreatedPlacementLossRef.current.clear();
+    setSuppressGenericCreate(false);
+    setCreateError(null);
+    setSelection(
+      initialComputerSessionId ? { sessionId: initialComputerSessionId, pinned: true } : null
+    );
+  }, [initialComputerSessionId, sessionId]);
+  useEffect5(() => {
+    if (!enabled || registry.loading) return;
+    const requested = requestedComputerSessionId ? liveSessions.find((session) => session.id === requestedComputerSessionId) ?? null : null;
+    const requestKey = requested ? `${requestedComputerRequestId ?? "default"}:${requested.id}` : null;
+    if (requested && requestKey && handledRequestRef.current !== requestKey) {
+      handledRequestRef.current = requestKey;
+      selectComputerSession({ sessionId: requested.id, pinned: true });
+      return;
+    }
+    const selectedStillLive = liveSessions.some((session) => session.id === selection?.sessionId);
+    if (selection?.pinned && selectedStillLive) return;
+    const preferred = relevant[0] ?? null;
+    if (!preferred) {
+      if (selection) selectComputerSession(null);
+      return;
+    }
+    if (!selectedStillLive || !selection?.pinned) {
+      if (selection?.sessionId !== preferred.id || selection.pinned) {
+        selectComputerSession({ sessionId: preferred.id, pinned: false });
+      }
+    }
+  }, [
+    liveSessions,
+    enabled,
+    registry.loading,
+    relevant,
+    requestedComputerRequestId,
+    requestedComputerSessionId,
+    selectComputerSession,
+    selection
+  ]);
+  const selectedRegistrySession = useMemo2(
+    () => liveSessions.find((session) => session.id === selection?.sessionId) ?? null,
+    [liveSessions, selection?.sessionId]
+  );
+  const interventionCounts = useMemo2(
+    () => countInterventions(interventions.interventions),
+    [interventions.interventions]
+  );
+  const selectedInterventions = useMemo2(
+    () => interventions.interventions.filter(
+      (intervention) => intervention.resourceId === selection?.sessionId
+    ),
+    [interventions.interventions, selection?.sessionId]
+  );
+  const controllerReady = selectedRegistrySession?.lifecycle === "active";
+  const computer = useComputerSession({
+    ...override,
+    computerSessionId: selection?.sessionId ?? null,
+    enabled: enabled && selection !== null && controllerReady
+  });
+  useEffect5(() => {
+    setShowControls(computer.selectedTarget?.kind === "app");
+  }, [sessionId, selection?.sessionId, computer.selectedTarget?.id, computer.selectedTarget?.kind]);
+  useEffect5(() => {
+    if (!isSourcePlacementChangedError(computer.error, "computer_session")) return;
+    void refreshRegistry();
+  }, [computer.error, refreshRegistry]);
+  const act = computer.act;
+  const actFromFrame = computer.actFromFrame;
+  const refreshComputer = computer.refresh;
+  const frames = useComputerFrameStream({
+    ...override,
+    computerSessionId: selection?.sessionId ?? null,
+    targetId: computer.selectedTarget?.id ?? null,
+    enabled: enabled && selection !== null && controllerReady && computer.selectedTarget !== null && isComputerFrameTarget(computer.selectedTarget),
+    stream: {
+      format: "jpeg",
+      quality: 78,
+      maxWidth: 1920,
+      maxHeight: 1200,
+      everyNthFrame: 1
+    },
+    ...webSocketFactory ? { webSocketFactory } : {}
+  });
+  const displayedFrame = frames.frame && frames.frame.computerSessionId === selection?.sessionId && frames.frame.targetId === computer.selectedTarget?.id && frames.frame.targetGeneration === computer.selectedTarget?.targetGeneration ? frames.frame : null;
+  const rfbStream = frames.attachment?.stream.kind === "direct_rfb" ? frames.attachment.stream : null;
+  const appTarget = computer.selectedTarget?.kind === "app";
+  const appInputPosture = useComputerInputPosture({
+    ...override,
+    computerSessionId: selection?.sessionId ?? null,
+    controllerGeneration: computer.session?.controller?.controllerGeneration ?? null,
+    enabled: enabled && controllerReady && appTarget
+  });
+  const inputPostureRef = useRef5({
+    sessionId: selection?.sessionId ?? null,
+    controllerGeneration: computer.session?.controller?.controllerGeneration ?? null,
+    denied: false
+  });
+  const postureSessionId = selection?.sessionId ?? null;
+  const postureController = computer.session?.controller?.controllerGeneration ?? null;
+  if (inputPostureRef.current.sessionId !== postureSessionId || inputPostureRef.current.controllerGeneration !== postureController) {
+    inputPostureRef.current = {
+      sessionId: postureSessionId,
+      controllerGeneration: postureController,
+      denied: false
+    };
+  }
+  if (frames.attachment?.computerSessionId === postureSessionId && frames.attachment.controllerGeneration === postureController) {
+    inputPostureRef.current.denied = frames.attachment.inputAllowed === false;
+  }
+  const inputDenied = appTarget ? appInputPosture.inputAllowed !== true : inputPostureRef.current.denied;
+  const attachmentInputAllowed = frames.attachment !== null && !inputDenied;
+  const inputPosturePending = appTarget ? appInputPosture.pending : inputDenied && (frames.state === "attaching" || frames.state === "reconnecting");
+  const machineLocked = selectedRegistrySession?.failureCode === "machine_locked";
+  const controlUnavailable = computer.controlError !== null;
+  const connectionState = controlUnavailable ? "error" : frames.state;
+  const rfbInputEnabled = rfbStream?.inputAllowed === true && attachmentInputAllowed && !machineLocked && !controlUnavailable && computer.session?.capabilities?.pointerInput === true && computer.session?.capabilities?.keyboardInput === true;
+  const rfbCapability = useMemo2(() => {
+    if (!rfbStream || !frames.attachment) return null;
+    const bounds = computer.selectedTarget?.bounds;
+    return {
+      transport: "vnc-ws",
+      client: "novnc",
+      mode: rfbInputEnabled ? "interactive" : "read-only",
+      url: rfbStream.url,
+      token: null,
+      expiresAt: frames.attachment.expiresAt,
+      resolution: [bounds?.width ?? 1440, bounds?.height ?? 900],
+      unredacted: true,
+      requiresAcknowledgment: false,
+      acknowledged: true,
+      shared: false,
+      sharedSessionIds: [],
+      reason: null
+    };
+  }, [computer.selectedTarget?.bounds, frames.attachment, rfbInputEnabled, rfbStream]);
+  const currentIds = useMemo2(() => new Set(relevant.map((session) => session.id)), [relevant]);
+  useEffect5(() => {
+    for (const intervention of interventions.interventions) {
+      if (seenInterventionIdsRef.current.has(intervention.id)) continue;
+      seenInterventionIdsRef.current.add(intervention.id);
+      onNotify?.({
+        kind: "info",
+        message: `${interventionTitle(intervention)}: ${intervention.reason}`
+      });
+    }
+  }, [interventions.interventions, onNotify]);
+  const resolveIntervention = useCallback5(
+    (intervention, outcome) => {
+      void interventions.resolve(intervention.id, {
+        expectedVersion: intervention.version,
+        outcome
+      }).then(() => {
+        onNotify?.({
+          kind: "info",
+          message: outcome === "completed" ? "Agent notified. Continuing work." : "Request cancelled."
+        });
+      }).catch((cause) => notifyError(cause, "Could not update the desktop request."));
+    },
+    [interventions, notifyError, onNotify]
+  );
+  const createComputer = useCallback5(() => {
+    if (createInFlightRef.current) return;
+    createInFlightRef.current = true;
+    setCreateError(null);
+    setCreating(true);
+    void createSession({ sessionId, name: "Desktop" }).then((response) => {
+      selectComputerSession({ sessionId: response.session.id, pinned: false });
+    }).catch((cause) => {
+      const error = cause instanceof Error ? cause : new Error("Could not open a desktop.");
+      setCreateError(error);
+      notifyError(error, "Could not open a desktop.");
+    }).finally(() => {
+      createInFlightRef.current = false;
+      setCreating(false);
+    });
+  }, [createSession, notifyError, selectComputerSession, sessionId]);
+  useEffect5(() => {
+    if (!enabled || registry.loading || registry.refreshing || liveRelevant.length > 0 || !connectedPlacementLoss || recreatedPlacementLossRef.current.has(connectedPlacementLoss.id)) {
+      return;
+    }
+    recreatedPlacementLossRef.current.add(connectedPlacementLoss.id);
+    autoCreateSessionRef.current = sessionId;
+    emptyCatalogConfirmationRef.current = null;
+    createComputer();
+  }, [
+    connectedPlacementLoss,
+    createComputer,
+    enabled,
+    liveRelevant.length,
+    registry.loading,
+    registry.refreshing,
+    sessionId
+  ]);
+  useEffect5(() => {
+    if (relevant.length > 0) {
+      autoCreateSessionRef.current = sessionId;
+      emptyCatalogConfirmationRef.current = null;
+    }
+  }, [relevant.length, sessionId]);
+  useEffect5(() => {
+    if (!enabled || registry.loading || registry.refreshing || registry.error || relevant.length > 0 || suppressGenericCreate || autoCreateSessionRef.current === sessionId) {
+      return;
+    }
+    if (emptyCatalogConfirmationRef.current !== sessionId) {
+      emptyCatalogConfirmationRef.current = sessionId;
+      void refreshRegistry();
+      return;
+    }
+    autoCreateSessionRef.current = sessionId;
+    createComputer();
+  }, [
+    createComputer,
+    enabled,
+    refreshRegistry,
+    registry.error,
+    registry.loading,
+    registry.refreshing,
+    relevant.length,
+    sessionId,
+    suppressGenericCreate
+  ]);
+  const perform = useCallback5(
+    async (action, frame) => {
+      if (computer.controlError) throw computer.controlError;
+      if (inputDenied) throw new Error("Desktop is view only. Refresh to check desktop controls.");
+      let receipt;
+      if (action.type === "pointer") {
+        if (!frame) throw new Error("Desktop view is not ready for pointer input.");
+        receipt = await actFromFrame(action, frame);
+      } else {
+        receipt = await act(action);
+      }
+      if (receipt.state !== "completed") {
+        throw new Error(receipt.error?.message ?? "Desktop input did not complete.");
+      }
+    },
+    [act, actFromFrame, computer.controlError, inputDenied]
+  );
+  const reconnect = () => {
+    void refreshComputer();
+    if (appTarget) appInputPosture.refresh();
+    else frames.reconnect();
+  };
+  const copyFromRfb = useCallback5(
+    (event) => {
+      if (!rfbInputEnabled || !rfbStream || computer.session?.capabilities?.clipboard !== true)
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      void perform({ type: "clipboard", operation: "copy" }, null).then(() => computer.readClipboard()).then(async (clipboard) => {
+        if (clipboard.text && !await copyTextToClipboard(clipboard.text)) {
+          throw new Error("Desktop text could not be copied to the local clipboard");
+        }
+      }).catch((cause) => notifyError(cause, "Could not copy from the desktop."));
+    },
+    [computer, notifyError, perform, rfbInputEnabled, rfbStream]
+  );
+  const pasteIntoRfb = useCallback5(
+    (text) => {
+      if (!rfbInputEnabled || !rfbStream || computer.session?.capabilities?.clipboard !== true)
+        return false;
+      void (async () => {
+        await perform({ type: "clipboard", operation: "write", text }, null);
+        assertExactComputerClipboard(await computer.readClipboard(), text);
+        await perform({ type: "clipboard", operation: "paste" }, null);
+      })().catch((cause) => notifyError(cause, "Could not paste into the desktop."));
+      return true;
+    },
+    [computer, notifyError, perform, rfbInputEnabled, rfbStream]
+  );
+  const hideGenericCreate = suppressGenericCreate && liveRelevant.length === 0;
+  const generationLossSelected = selectedRegistrySession !== null && isAttachedChromeGenerationLoss(selectedRegistrySession);
+  const generationLossFrames = isAttachedChromeGenerationLossError(frames.error);
+  if (!enabled) return null;
+  if (registry.loading && liveSessions.length === 0) {
+    return /* @__PURE__ */ jsx(
+      ComputerNotice,
+      {
+        icon: /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-4 animate-spin" }),
+        text: "Finding workspace desktops\u2026",
+        ...className ? { className } : {}
+      }
+    );
+  }
+  if (liveSessions.length === 0) {
+    if (hideGenericCreate) {
+      return /* @__PURE__ */ jsx("div", { className: cn("grid h-full place-items-center bg-og-bg p-6", className), children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm text-center", children: [
+        /* @__PURE__ */ jsx(CircleAlertIcon, { className: "mx-auto size-5 text-og-danger" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: "Chrome reconnected\u2014open a fresh browser/desktop." }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: "This Chrome profile is live again, but the previous desktop cannot move to the new connection. Use Browser \u2192 New browser \u2192 Connected Chrome." })
+      ] }) });
+    }
+    if (renderEmpty) return renderEmpty(createComputer, creating);
+    const error = createError ?? registry.error;
+    return /* @__PURE__ */ jsx("div", { className: cn("grid h-full place-items-center bg-og-bg p-6", className), children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm text-center", children: [
+      /* @__PURE__ */ jsx("span", { className: "mx-auto grid size-10 place-items-center rounded-og-lg border border-og-border bg-og-surface-1 text-og-fg-muted", children: error ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-5 text-og-danger" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-5 animate-spin" }) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: error ? "Desktop didn\u2019t open" : "Opening desktop\u2026" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: error?.message ?? "Preparing this agent\u2019s desktop. It will appear here when ready." }),
+      error ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: createError ? createComputer : () => void refreshRegistry(),
+          disabled: creating || registry.refreshing,
+          className: "mt-4 inline-flex h-8 items-center gap-1.5 rounded-og-sm border border-og-primary-border bg-og-primary text-og-primary-fg px-3 text-og-control font-medium transition hover:bg-og-primary-hover disabled:opacity-50",
+          children: [
+            creating || registry.refreshing ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-3.5" }),
+            "Try again"
+          ]
+        }
+      ) : null
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "@container/computer-viewer relative flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-og-bg",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          ComputerToolbar,
+          {
+            sessions: liveSessions,
+            relevantSessionIds: currentIds,
+            selectedSessionId: selection?.sessionId ?? null,
+            creating,
+            refreshing: registry.refreshing || inputPosturePending,
+            interventionCounts,
+            targets: controllerReady ? computer.targets : [],
+            selectedTargetId: computer.selectedTarget?.id ?? null,
+            targetsLoading: controllerReady && computer.loading,
+            onSelectTarget: (targetId) => {
+              void computer.selectTarget(targetId).catch((cause) => notifyError(cause, "Could not switch desktop views."));
+            },
+            onSelect: (computerSessionId) => selectComputerSession({ sessionId: computerSessionId, pinned: true }),
+            onFollow: () => {
+              if (relevant[0]) selectComputerSession({ sessionId: relevant[0].id, pinned: false });
+            },
+            onCreate: hideGenericCreate ? void 0 : createComputer,
+            onRefresh: () => {
+              if (appTarget) {
+                appInputPosture.refresh();
+              } else if ((connectionState === "error" || inputDenied) && !generationLossSelected && !generationLossFrames) {
+                frames.reconnect();
+              }
+              void Promise.all([refreshRegistry(), refreshComputer()]);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          InteractionInterventionBanner,
+          {
+            interventions: selectedInterventions,
+            activeTargetId: computer.selectedTarget?.id ?? null,
+            mutating: interventions.mutating,
+            onOpen: (intervention) => void computer.selectTarget(intervention.targetId).catch((cause) => notifyError(cause, "Could not open the requested desktop view.")),
+            onResolve: resolveIntervention
+          }
+        ),
+        !selectedRegistrySession ? /* @__PURE__ */ jsx(
+          ComputerUnselectedPanel,
+          {
+            peerCount: liveSessions.length,
+            creating,
+            error: createError,
+            generationLoss: suppressGenericCreate,
+            onCreate: createComputer
+          }
+        ) : !controllerReady ? /* @__PURE__ */ jsx(
+          ComputerLifecyclePanel,
+          {
+            session: selectedRegistrySession,
+            creating,
+            onRefresh: registry.refresh,
+            onRetry: createComputer
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col @xl/computer-viewer:flex-row", children: [
+            rfbStream ? /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1 bg-black", onCopyCapture: copyFromRfb, children: [
+              /* @__PURE__ */ jsx(
+                DesktopViewer,
+                {
+                  capability: rfbCapability,
+                  interactive: rfbInputEnabled,
+                  showControlToggle: false,
+                  webSocketProtocols: rfbStream.protocols,
+                  onPasteText: pasteIntoRfb,
+                  targetPlatform: computer.session?.platform ?? null,
+                  className: "h-full"
+                }
+              ),
+              !rfbInputEnabled ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full border border-white/10 bg-black/70 px-3 py-1 text-[11px] text-white/80 backdrop-blur", children: controlUnavailable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                "Desktop controls unavailable",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: reconnect,
+                    className: "pointer-events-auto ml-2 font-medium underline",
+                    children: "Reconnect"
+                  }
+                )
+              ] }) : "View only \xB7 direct input unavailable" }) : null
+            ] }) : /* @__PURE__ */ jsx(
+              ComputerViewport,
+              {
+                frame: machineLocked ? null : displayedFrame,
+                observation: computer.observation,
+                target: computer.selectedTarget,
+                machineLocked,
+                controlUnavailable,
+                inputAllowed: !inputDenied,
+                connectionState,
+                connectionError: computer.controlError ?? appInputPosture.error ?? frames.error ?? computer.error,
+                mutating: computer.mutating,
+                backgroundActions: computer.session?.capabilities?.backgroundActions === true,
+                backgroundInput: computer.session?.capabilities?.backgroundInput === true,
+                clipboardEnabled: attachmentInputAllowed && computer.session?.capabilities?.clipboard === true,
+                pointerInput: attachmentInputAllowed && computer.session?.capabilities?.pointerInput === true,
+                keyboardInput: attachmentInputAllowed && computer.session?.capabilities?.keyboardInput === true,
+                onAction: perform,
+                onReadClipboard: computer.readClipboard,
+                onReconnect: generationLossSelected || generationLossFrames ? () => void 0 : reconnect,
+                onError: (cause) => notifyError(cause, "Desktop input failed.")
+              },
+              JSON.stringify([
+                selection?.sessionId,
+                computer.selectedTarget?.id,
+                computer.selectedTarget?.targetGeneration,
+                frames.attachment?.controllerGeneration
+              ])
+            ),
+            showControls ? /* @__PURE__ */ jsx(
+              ComputerSemanticPanel,
+              {
+                observation: computer.observation,
+                mutating: computer.mutating || controlUnavailable || inputDenied,
+                controlUnavailable,
+                inputAllowed: !inputDenied,
+                onAction: (action) => void perform(action, null).catch(
+                  (cause) => notifyError(cause, "Desktop action failed.")
+                )
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            ComputerStatusBar,
+            {
+              session: computer.session,
+              target: computer.selectedTarget,
+              connectionState,
+              controlUnavailable,
+              inputAllowed: !inputDenied,
+              refreshing: registry.refreshing,
+              showControls,
+              controlCount: semanticControls(computer.observation).length,
+              onToggleControls: () => setShowControls((current) => !current)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ComputerUnselectedPanel(props) {
+  return /* @__PURE__ */ jsx("div", { className: "grid min-h-0 flex-1 place-items-center bg-og-bg p-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "mx-auto grid size-10 place-items-center rounded-og-md border border-og-border bg-og-surface-1 text-og-fg-muted", children: props.error || props.generationLoss ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-4.5 text-og-danger" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-4.5 animate-spin" }) }),
+    /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: props.generationLoss ? "Chrome reconnected\u2014open a fresh browser/desktop." : props.error ? "Desktop didn\u2019t open" : "Opening desktop\u2026" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: props.generationLoss ? "This Chrome profile is live again, but the previous desktop cannot move to the new connection. Use Browser \u2192 New browser \u2192 Connected Chrome." : props.error?.message ?? (props.peerCount === 1 ? "Preparing this agent\u2019s desktop. One peer desktop remains available from the menu." : `Preparing this agent\u2019s desktop. ${props.peerCount} peer desktops remain available from the menu.`) }),
+    props.error && !props.generationLoss ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled: props.creating,
+        onClick: props.onCreate,
+        className: "mt-4 inline-flex h-8 items-center gap-1.5 rounded-og-sm border border-og-border bg-og-surface-1 px-3 text-og-control font-medium text-og-fg transition hover:bg-og-surface-2 disabled:cursor-not-allowed disabled:opacity-50",
+        children: [
+          props.creating ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-3.5" }),
+          "Try again"
+        ]
+      }
+    ) : null
+  ] }) });
+}
+function ComputerToolbar(props) {
+  const detailsRef = useViewerMenuDismiss();
+  const selected = props.sessions.find((session) => session.id === props.selectedSessionId);
+  const current = props.sessions.filter((session) => props.relevantSessionIds.has(session.id));
+  const others = props.sessions.filter((session) => !props.relevantSessionIds.has(session.id));
+  const closeMenu = (restoreFocus) => {
+    detailsRef.current?.removeAttribute("open");
+    if (restoreFocus) detailsRef.current?.querySelector("summary")?.focus();
+  };
+  const choose = (id, restoreFocus) => {
+    props.onSelect(id);
+    closeMenu(restoreFocus);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-10 shrink-0 items-center gap-1.5 border-b border-og-border bg-og-surface-1 px-2", children: [
+    /* @__PURE__ */ jsxs("details", { ref: detailsRef, className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs("summary", { className: "flex h-7 max-w-32 cursor-pointer list-none items-center gap-2 rounded-og-sm px-2 text-og-control text-og-fg transition hover:bg-og-surface-2 @sm/computer-viewer:max-w-52 [&::-webkit-details-marker]:hidden", children: [
+        /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3.5 shrink-0 text-og-fg-muted" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: selected?.name === "Computer" ? "Desktop" : selected?.name ?? "Desktop" }),
+        (props.interventionCounts.get(selected?.id ?? "") ?? 0) > 0 ? /* @__PURE__ */ jsx("span", { className: "size-1.5 shrink-0 rounded-full bg-og-status-waiting" }) : null,
+        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3 shrink-0 text-og-fg-subtle" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "absolute left-2 top-10 z-30 flex max-h-[calc(100%-3rem)] w-72 max-w-[calc(100%-1rem)] flex-col overflow-hidden rounded-og-md border border-og-border bg-og-surface-1 p-1 shadow-xl", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-h-0 max-h-96 overflow-y-auto overscroll-contain", children: [
+          /* @__PURE__ */ jsx(
+            ComputerSessionGroup,
+            {
+              label: "Current agent",
+              sessions: current,
+              selectedId: props.selectedSessionId,
+              interventionCounts: props.interventionCounts,
+              onSelect: choose
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ComputerSessionGroup,
+            {
+              label: "Other agents",
+              sessions: others,
+              selectedId: props.selectedSessionId,
+              interventionCounts: props.interventionCounts,
+              onSelect: choose
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-1 flex shrink-0 gap-1 border-t border-og-border pt-1", children: [
+          current.length > 0 ? /* @__PURE__ */ jsx(
+            MenuButton,
+            {
+              onClick: (event) => {
+                props.onFollow();
+                closeMenu(event.detail === 0);
+              },
+              children: "Follow agent"
+            }
+          ) : null,
+          props.onCreate ? /* @__PURE__ */ jsxs(
+            MenuButton,
+            {
+              onClick: (event) => {
+                props.onCreate?.();
+                closeMenu(event.detail === 0);
+              },
+              disabled: props.creating,
+              children: [
+                /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" }),
+                " New desktop"
+              ]
+            }
+          ) : null
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-og-xs text-og-fg-subtle", children: selected ? `${platformLabel(selected)} \xB7 ${placementLabel(selected)}` : "" }),
+    /* @__PURE__ */ jsx(
+      ComputerTargetPicker,
+      {
+        targets: props.targets,
+        selectedTargetId: props.selectedTargetId,
+        loading: props.targetsLoading,
+        onSelect: props.onSelectTarget
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: props.onRefresh,
+        disabled: props.refreshing,
+        "aria-busy": props.refreshing,
+        className: "grid size-7 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg",
+        "aria-label": "Refresh desktops",
+        children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: cn("size-3.5", props.refreshing && "animate-spin") })
+      }
+    ),
+    props.onCreate ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: props.onCreate,
+        disabled: props.creating,
+        className: "hidden size-7 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-40 @sm/computer-viewer:grid",
+        "aria-label": "Open a new desktop",
+        children: props.creating ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" })
+      }
+    ) : null
+  ] });
+}
+function ComputerSessionGroup(props) {
+  if (props.sessions.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
+    /* @__PURE__ */ jsx("p", { className: "px-2 pb-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-fg-subtle", children: props.label }),
+    props.sessions.map((session) => {
+      const interventionCount = props.interventionCounts.get(session.id) ?? 0;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: (event) => props.onSelect(session.id, event.detail === 0),
+          "aria-pressed": session.id === props.selectedId,
+          className: cn(
+            "flex w-full items-center gap-2 rounded-og-sm px-2 py-1.5 text-left transition hover:bg-og-surface-2",
+            session.id === props.selectedId && "bg-og-surface-2"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "size-1.5 rounded-full",
+                  session.lifecycle === "active" ? "bg-og-status-running" : "bg-og-muted"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "block truncate text-og-control text-og-fg", children: session.name }),
+              /* @__PURE__ */ jsxs("span", { className: "block truncate text-og-xs text-og-fg-subtle", children: [
+                platformLabel(session),
+                " \xB7 ",
+                placementLabel(session)
+              ] })
+            ] }),
+            interventionCount > 0 ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-og-status-waiting/10 px-1.5 py-0.5 text-[10px] font-medium text-og-status-waiting", children: interventionCount }) : null
+          ]
+        },
+        session.id
+      );
+    })
+  ] });
+}
+function MenuButton(props) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: props.onClick,
+      disabled: props.disabled,
+      className: "flex h-7 flex-1 items-center justify-center gap-1 rounded-og-sm px-2 text-og-control text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-50",
+      children: props.children
+    }
+  );
+}
+function ComputerTargetPicker(props) {
+  const screens = props.targets.filter((target) => target.kind === "screen");
+  const advancedTargets = props.targets.filter(
+    (target) => target.kind === "app" || target.kind === "window" && isRenderableComputerView(target)
+  );
+  const advancedRef = useViewerMenuDismiss(advancedTargets.length > 0);
+  const selected = props.targets.find((target) => target.id === props.selectedTargetId);
+  const choose = (id, restoreFocus = false) => {
+    props.onSelect(id);
+    if (advancedRef.current?.open) {
+      advancedRef.current.removeAttribute("open");
+      if (restoreFocus) advancedRef.current.querySelector("summary")?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    screens.length > 1 ? /* @__PURE__ */ jsxs(
+      "select",
+      {
+        "aria-label": "Screen",
+        value: selected?.kind === "screen" ? selected.id : "",
+        onChange: (event) => choose(event.currentTarget.value),
+        className: "h-7 min-w-0 max-w-28 rounded-og-sm border border-og-border bg-og-surface-1 px-1.5 text-og-control text-og-fg outline-hidden focus:border-og-accent @sm/computer-viewer:max-w-40",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: "Screen" }),
+          screens.map((screen, index) => /* @__PURE__ */ jsx("option", { value: screen.id, children: screen.title || `Screen ${index + 1}` }, screen.id))
+        ]
+      }
+    ) : screens[0] && selected?.kind !== "screen" ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => choose(screens[0].id),
+        className: "flex h-7 shrink-0 items-center gap-1.5 rounded-og-sm px-2 text-og-control text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg",
+        children: [
+          /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3.5" }),
+          " Full desktop"
+        ]
+      }
+    ) : null,
+    advancedTargets.length > 0 ? /* @__PURE__ */ jsxs("details", { ref: advancedRef, className: "shrink-0", children: [
+      /* @__PURE__ */ jsxs(
+        "summary",
+        {
+          "aria-label": "Advanced desktop views",
+          title: "Advanced desktop views",
+          className: "flex h-7 cursor-pointer list-none items-center gap-1.5 rounded-og-sm px-2 text-og-control text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg [&::-webkit-details-marker]:hidden",
+          children: [
+            /* @__PURE__ */ jsx(PanelsTopLeftIcon, { className: "size-3.5" }),
+            /* @__PURE__ */ jsx("span", { className: "hidden @sm/computer-viewer:inline", children: "Advanced" }),
+            /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-10 z-30 flex max-h-[calc(100%-3rem)] w-64 max-w-[calc(100%-1rem)] flex-col overflow-hidden rounded-og-md border border-og-border bg-og-surface-1 p-1 shadow-xl", children: [
+        /* @__PURE__ */ jsx("p", { className: "shrink-0 px-2 py-1 text-og-xs text-og-fg-subtle", children: "Apps and windows" }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 max-h-80 overflow-y-auto overscroll-contain", children: advancedTargets.map((target) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: (event) => choose(target.id, event.detail === 0),
+            "aria-pressed": target.id === props.selectedTargetId,
+            className: cn(
+              "flex w-full min-w-0 items-center gap-2 rounded-og-sm px-2 py-1.5 text-left transition hover:bg-og-surface-2",
+              target.id === props.selectedTargetId && "bg-og-surface-2"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "block truncate text-og-control text-og-fg", children: target.title || target.applicationId || target.kind }),
+                /* @__PURE__ */ jsx("span", { className: "block text-og-xs text-og-fg-subtle", children: target.kind === "app" ? "App controls" : "Window view" })
+              ] }),
+              target.focused ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "size-1.5 shrink-0 rounded-full bg-og-status-running",
+                  "aria-label": "Focused"
+                }
+              ) : null
+            ]
+          },
+          target.id
+        )) })
+      ] })
+    ] }) : null,
+    props.loading ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 shrink-0 animate-spin text-og-fg-muted" }) : null
+  ] });
+}
+function isRenderableComputerView(target) {
+  if (target.kind === "screen") return true;
+  if (target.kind !== "window" || !target.bounds) return false;
+  return target.bounds.width >= 160 && target.bounds.height >= 90;
+}
+function isComputerFrameTarget(target) {
+  return target.kind === "window" || target.kind === "screen";
+}
+function ComputerLifecyclePanel(props) {
+  const generationLoss = isAttachedChromeGenerationLoss(props.session);
+  const failed = ["failed", "lost", "repair_required"].includes(props.session.lifecycle);
+  const retryCreatesSession = ["failed", "lost"].includes(props.session.lifecycle);
+  return /* @__PURE__ */ jsx("div", { className: "grid min-h-0 flex-1 place-items-center bg-og-bg p-6", children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm text-center", children: [
+    failed ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "mx-auto size-5 text-og-danger" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "mx-auto size-5 animate-spin text-og-fg-muted" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: generationLoss ? "Chrome reconnected\u2014open a fresh browser/desktop." : failed ? "Desktop needs attention" : lifecycleLabel(props.session.lifecycle) }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: generationLoss ? "This Chrome profile is live again, but the previous desktop cannot move to the new connection. Use Browser \u2192 New browser \u2192 Connected Chrome." : computerFailureMessage(props.session) ?? "The desktop is being prepared on its placement. It will appear here when ready." }),
+    failed && !generationLoss ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => retryCreatesSession ? props.onRetry() : void props.onRefresh(),
+        disabled: props.creating,
+        className: "mt-4 inline-flex h-8 items-center gap-1.5 rounded-og-sm border border-og-border bg-og-surface-1 px-3 text-og-control font-medium text-og-fg transition hover:bg-og-surface-2",
+        children: [
+          props.creating ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-3.5" }),
+          retryCreatesSession ? "Try again" : "Check again"
+        ]
+      }
+    ) : null
+  ] }) });
+}
+function ComputerViewport(props) {
+  const canvasRef = useRef5(null);
+  const inputRef = useRef5(null);
+  const composingRef = useRef5(false);
+  const pointerStartRef = useRef5(null);
+  const clickTimerRef = useRef5(null);
+  const lastClickRef = useRef5(null);
+  const wheelRef = useRef5(null);
+  const pendingTextRef = useRef5(null);
+  const actionRef = useRef5(props.onAction);
+  const readClipboardRef = useRef5(props.onReadClipboard);
+  const errorRef = useRef5(props.onError);
+  const actionTailRef = useRef5(Promise.resolve());
+  const actionQueueEpochRef = useRef5(0);
+  const queuedFrameRef = useRef5(null);
+  const currentFrameRef = useRef5(props.frame);
+  const paintedFrameRef = useRef5(null);
+  const [paintedFrame, setPaintedFrame] = useState5(null);
+  const decodingFrameRef = useRef5(false);
+  const mountedRef = useRef5(true);
+  actionRef.current = props.onAction;
+  readClipboardRef.current = props.onReadClipboard;
+  errorRef.current = props.onError;
+  const streamFailed = props.connectionState === "error";
+  const rawInputEnabled = props.target?.kind !== "app" && !streamFailed && !props.controlUnavailable && !props.machineLocked && (props.backgroundInput || !props.backgroundActions || props.target?.kind === "screen" || props.target?.focused === true);
+  const clearBufferedInput = useCallback5(() => {
+    if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
+    if (wheelRef.current?.timer) clearTimeout(wheelRef.current.timer);
+    if (pendingTextRef.current?.timer) clearTimeout(pendingTextRef.current.timer);
+    clickTimerRef.current = null;
+    wheelRef.current = null;
+    pendingTextRef.current = null;
+    pointerStartRef.current = null;
+    lastClickRef.current = null;
+    composingRef.current = false;
+    if (inputRef.current) inputRef.current.value = "";
+  }, []);
+  const pointerInputEnabled = rawInputEnabled && props.pointerInput;
+  const keyboardInputEnabled = rawInputEnabled && props.keyboardInput;
+  useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    const viewport = canvas?.parentElement;
+    if (!canvas || !viewport) return;
+    const fit = () => fitComputerCanvas(canvas);
+    fit();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", fit);
+      return () => window.removeEventListener("resize", fit);
+    }
+    const observer = new ResizeObserver(fit);
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, []);
+  const paintQueuedFrames = useCallback5(() => {
+    if (decodingFrameRef.current) return;
+    decodingFrameRef.current = true;
+    void (async () => {
+      try {
+        while (mountedRef.current) {
+          const frame = queuedFrameRef.current;
+          queuedFrameRef.current = null;
+          if (!frame) break;
+          let objectUrl = null;
+          try {
+            const blob = new Blob([frame.data.slice().buffer], { type: frame.mediaType });
+            if (typeof createImageBitmap === "function") {
+              const bitmap = await createImageBitmap(blob);
+              try {
+                const canvas2 = canvasRef.current;
+                if (mountedRef.current && canvas2 && currentFrameRef.current && sameComputerTarget(frame, currentFrameRef.current)) {
+                  paintCanvas(canvas2, bitmap, frame.width, frame.height);
+                  paintedFrameRef.current = frame;
+                  setPaintedFrame(frame);
+                }
+              } finally {
+                bitmap.close();
+              }
+              continue;
+            }
+            objectUrl = URL.createObjectURL(blob);
+            const image = await loadImage(objectUrl);
+            const canvas = canvasRef.current;
+            if (mountedRef.current && canvas && currentFrameRef.current && sameComputerTarget(frame, currentFrameRef.current)) {
+              paintCanvas(canvas, image, frame.width, frame.height);
+              paintedFrameRef.current = frame;
+              setPaintedFrame(frame);
+            }
+          } catch (cause) {
+            if (mountedRef.current && currentFrameRef.current && sameComputerTarget(frame, currentFrameRef.current))
+              errorRef.current(cause);
+          } finally {
+            if (objectUrl) URL.revokeObjectURL(objectUrl);
+          }
+        }
+      } finally {
+        decodingFrameRef.current = false;
+        if (mountedRef.current && queuedFrameRef.current) paintQueuedFrames();
+      }
+    })();
+  }, []);
+  useLayoutEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      actionQueueEpochRef.current += 1;
+      queuedFrameRef.current = null;
+      clearBufferedInput();
+    };
+  }, [clearBufferedInput]);
+  useLayoutEffect(() => {
+    if (currentFrameRef.current && !props.frame) {
+      actionQueueEpochRef.current += 1;
+      clearBufferedInput();
+    }
+    currentFrameRef.current = props.frame;
+    if (!props.frame) {
+      queuedFrameRef.current = null;
+      paintedFrameRef.current = null;
+      setPaintedFrame(null);
+      return;
+    }
+    queuedFrameRef.current = props.frame;
+    paintQueuedFrames();
+  }, [clearBufferedInput, paintQueuedFrames, props.frame]);
+  useLayoutEffect(() => {
+    if (!rawInputEnabled || !props.pointerInput || !props.keyboardInput) {
+      actionQueueEpochRef.current += 1;
+      clearBufferedInput();
+    }
+  }, [clearBufferedInput, props.keyboardInput, props.pointerInput, rawInputEnabled]);
+  const enqueue = useCallback5(
+    (action, frame, after) => {
+      const epoch = actionQueueEpochRef.current;
+      const dispatch = actionRef.current;
+      const isCurrent = () => mountedRef.current && epoch === actionQueueEpochRef.current;
+      actionTailRef.current = actionTailRef.current.catch(() => void 0).then(async () => {
+        if (!isCurrent()) return;
+        await dispatch(action, frame);
+        if (!isCurrent()) return;
+        await after?.(isCurrent);
+      }).catch((cause) => {
+        if (!isCurrent()) return;
+        actionQueueEpochRef.current += 1;
+        clearBufferedInput();
+        errorRef.current(cause);
+      });
+    },
+    [clearBufferedInput]
+  );
+  const point = useCallback5(
+    (frame, clientX, clientY) => computerPoint(canvasRef.current, frame, clientX, clientY),
+    []
+  );
+  const flushPendingText = useCallback5(() => {
+    const pending = pendingTextRef.current;
+    if (!pending) return;
+    clearTimeout(pending.timer);
+    pendingTextRef.current = null;
+    enqueue({ type: "keyboard", action: "type", value: pending.text }, null);
+  }, [enqueue]);
+  const flushPendingClick = useCallback5(() => {
+    const pending = lastClickRef.current;
+    if (!pending) return;
+    if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
+    clickTimerRef.current = null;
+    lastClickRef.current = null;
+    enqueue(
+      {
+        type: "pointer",
+        frameId: pending.frame.frameId,
+        action: "click",
+        x: pending.x,
+        y: pending.y
+      },
+      pending.frame
+    );
+  }, [enqueue]);
+  const flushPendingWheel = useCallback5(() => {
+    const batch = wheelRef.current;
+    if (!batch) return;
+    if (batch.timer) clearTimeout(batch.timer);
+    wheelRef.current = null;
+    enqueue(
+      {
+        type: "pointer",
+        frameId: batch.frame.frameId,
+        action: "scroll",
+        x: batch.x,
+        y: batch.y,
+        deltaX: batch.deltaX,
+        deltaY: batch.deltaY
+      },
+      batch.frame
+    );
+  }, [enqueue]);
+  const pointerDown = (event) => {
+    const frame = paintedFrameRef.current;
+    if (!frame || props.mutating || !rawInputEnabled || event.button !== 0) return;
+    event.preventDefault();
+    if (keyboardInputEnabled) inputRef.current?.focus({ preventScroll: true });
+    if (!pointerInputEnabled) return;
+    flushPendingWheel();
+    flushPendingText();
+    pointerStartRef.current = {
+      x: event.clientX,
+      y: event.clientY,
+      pointerId: event.pointerId,
+      frame
+    };
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+  };
+  const pointerUp = (event) => {
+    if (!pointerInputEnabled) return;
+    const start = pointerStartRef.current;
+    pointerStartRef.current = null;
+    if (!start || start.pointerId !== event.pointerId) return;
+    const from = point(start.frame, start.x, start.y);
+    const to = point(start.frame, event.clientX, event.clientY);
+    if (!from || !to) return;
+    if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > 5) {
+      flushPendingClick();
+      enqueue(
+        {
+          type: "pointer",
+          frameId: start.frame.frameId,
+          action: "drag",
+          x: from.x,
+          y: from.y,
+          endX: to.x,
+          endY: to.y
+        },
+        start.frame
+      );
+      return;
+    }
+    const now = Date.now();
+    const previous = lastClickRef.current;
+    if (previous && now - previous.at < 280 && Math.hypot(previous.x - to.x, previous.y - to.y) < 6 && sameFrameFence(previous.frame, start.frame)) {
+      if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
+      clickTimerRef.current = null;
+      lastClickRef.current = null;
+      enqueue(
+        {
+          type: "pointer",
+          frameId: start.frame.frameId,
+          action: "double_click",
+          x: to.x,
+          y: to.y
+        },
+        start.frame
+      );
+      return;
+    }
+    lastClickRef.current = { at: now, x: to.x, y: to.y, frame: start.frame };
+    clickTimerRef.current = setTimeout(() => {
+      clickTimerRef.current = null;
+      lastClickRef.current = null;
+      enqueue(
+        {
+          type: "pointer",
+          frameId: start.frame.frameId,
+          action: "click",
+          x: to.x,
+          y: to.y
+        },
+        start.frame
+      );
+    }, 280);
+  };
+  const contextMenu = (event) => {
+    event.preventDefault();
+    if (!pointerInputEnabled) return;
+    const frame = paintedFrameRef.current;
+    if (!frame) return;
+    flushPendingWheel();
+    flushPendingText();
+    flushPendingClick();
+    const at = point(frame, event.clientX, event.clientY);
+    if (at) {
+      enqueue(
+        {
+          type: "pointer",
+          frameId: frame.frameId,
+          action: "click",
+          x: at.x,
+          y: at.y,
+          button: "right"
+        },
+        frame
+      );
+    }
+  };
+  const wheel = (event) => {
+    if (!pointerInputEnabled) return;
+    const frame = paintedFrameRef.current;
+    if (!frame) return;
+    const at = point(frame, event.clientX, event.clientY);
+    if (!at) return;
+    flushPendingText();
+    flushPendingClick();
+    event.preventDefault();
+    let pending = wheelRef.current;
+    if (pending && (!sameComputerTarget(pending.frame, frame) || Math.hypot(pending.x - at.x, pending.y - at.y) > 6)) {
+      flushPendingWheel();
+      pending = null;
+    }
+    wheelRef.current = {
+      x: at.x,
+      y: at.y,
+      deltaX: (pending?.deltaX ?? 0) + event.deltaX,
+      deltaY: (pending?.deltaY ?? 0) + event.deltaY,
+      frame,
+      timer: pending?.timer ?? setTimeout(flushPendingWheel, 45)
+    };
+  };
+  const keyDown = (event) => {
+    if (!keyboardInputEnabled) return;
+    if (composingRef.current || event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) {
+      return;
+    }
+    flushPendingWheel();
+    const command = event.metaKey || event.ctrlKey;
+    if (props.clipboardEnabled && command && !event.altKey && ["c", "v"].includes(event.key.toLowerCase())) {
+      flushPendingText();
+      return;
+    }
+    const key = computerKey(event);
+    if (!key) return;
+    event.preventDefault();
+    flushPendingText();
+    flushPendingClick();
+    enqueue({ type: "keyboard", action: "press", value: key }, null);
+  };
+  const copy = (event) => {
+    if (!props.clipboardEnabled || !keyboardInputEnabled) return;
+    event.preventDefault();
+    flushPendingWheel();
+    flushPendingText();
+    flushPendingClick();
+    const readClipboard = readClipboardRef.current;
+    enqueue({ type: "clipboard", operation: "copy" }, null, async (isCurrent) => {
+      const clipboard = await readClipboard();
+      if (!isCurrent()) return;
+      if (!clipboard.text) return;
+      if (!await copyTextToClipboard(clipboard.text)) {
+        throw new Error("Desktop text could not be copied to the local clipboard");
+      }
+    });
+  };
+  const paste = (event) => {
+    if (!props.clipboardEnabled || !keyboardInputEnabled) return;
+    event.preventDefault();
+    flushPendingWheel();
+    flushPendingText();
+    flushPendingClick();
+    const text = event.clipboardData.getData("text/plain");
+    const readClipboard = readClipboardRef.current;
+    const dispatch = actionRef.current;
+    enqueue({ type: "clipboard", operation: "write", text }, null, async (isCurrent) => {
+      const clipboard = await readClipboard();
+      if (!isCurrent()) return;
+      assertExactComputerClipboard(clipboard, text);
+      await dispatch({ type: "clipboard", operation: "paste" }, null);
+    });
+  };
+  const input = (value, nativeComposing = false) => {
+    if (composingRef.current || nativeComposing) return;
+    if (!value || !keyboardInputEnabled) return;
+    flushPendingWheel();
+    flushPendingClick();
+    const pending = pendingTextRef.current;
+    if (pending) {
+      clearTimeout(pending.timer);
+      pending.text += value;
+      pending.timer = setTimeout(flushPendingText, 16);
+    } else {
+      pendingTextRef.current = {
+        text: value,
+        timer: setTimeout(flushPendingText, 16)
+      };
+    }
+    if (inputRef.current) inputRef.current.value = "";
+  };
+  const compositionEnd = (event) => {
+    composingRef.current = false;
+    input(event.currentTarget.value || event.data);
+  };
+  const showCanvas = props.frame !== null && paintedFrame !== null && sameComputerTarget(props.frame, paintedFrame) && !props.machineLocked && !streamFailed;
+  return /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden bg-black", children: [
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        className: cn(
+          "absolute inset-0 m-auto max-h-full max-w-full touch-none focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent",
+          !showCanvas && "invisible",
+          !pointerInputEnabled && "cursor-default"
+        ),
+        onPointerDown: pointerDown,
+        onPointerUp: pointerUp,
+        onPointerCancel: () => {
+          pointerStartRef.current = null;
+        },
+        onContextMenu: contextMenu,
+        onWheel: wheel,
+        "aria-label": `Interactive ${props.target?.kind ?? "desktop"} view`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: inputRef,
+        defaultValue: "",
+        onInput: (event) => input(event.currentTarget.value, event.nativeEvent.isComposing),
+        onCompositionStart: () => {
+          composingRef.current = true;
+        },
+        onCompositionEnd: compositionEnd,
+        onKeyDown: keyDown,
+        onCopy: copy,
+        onPaste: paste,
+        className: "pointer-events-none absolute left-1/2 top-1/2 size-px resize-none overflow-hidden opacity-0",
+        "aria-label": "Desktop keyboard input",
+        autoCapitalize: "off",
+        autoCorrect: "off",
+        spellCheck: false,
+        disabled: !keyboardInputEnabled
+      }
+    ),
+    !showCanvas ? /* @__PURE__ */ jsx(
+      ComputerViewportFallback,
+      {
+        observation: props.observation,
+        machineLocked: props.machineLocked,
+        controlUnavailable: props.controlUnavailable,
+        inputAllowed: props.inputAllowed,
+        connectionState: props.connectionState,
+        error: props.connectionError,
+        onAction: (action) => enqueue(action, null),
+        onReconnect: props.onReconnect
+      }
+    ) : null,
+    props.mutating ? /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute right-3 top-3 flex items-center gap-1.5 rounded-full border border-white/10 bg-black/65 px-2.5 py-1 text-[11px] text-white/80 backdrop-blur", children: [
+      /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }),
+      " Acting"
+    ] }) : null,
+    showCanvas && (!rawInputEnabled || !props.pointerInput || !props.keyboardInput) ? /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 left-1/2 flex w-max max-w-[calc(100%-1.5rem)] -translate-x-1/2 items-center gap-2 rounded-full border border-white/10 bg-black/70 py-1 pl-3 pr-1 text-[11px] text-white/80 backdrop-blur", children: [
+      /* @__PURE__ */ jsx("span", { children: !rawInputEnabled && (props.pointerInput || props.keyboardInput) ? "Background view \xB7 use app controls" : !props.pointerInput && !props.keyboardInput ? "View only \xB7 mouse and keyboard unavailable" : props.keyboardInput ? "Keyboard only \xB7 mouse unavailable" : "Mouse only \xB7 keyboard unavailable" }),
+      !rawInputEnabled && props.target && (props.pointerInput || props.keyboardInput) ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: props.mutating,
+          onClick: () => enqueue({ type: "focus", targetId: props.target.id }, null),
+          className: "shrink-0 whitespace-nowrap rounded-full bg-white/10 px-2 py-0.5 font-medium text-white transition hover:bg-white/20 disabled:opacity-50",
+          children: "Bring to front"
+        }
+      ) : null
+    ] }) : null
+  ] });
+}
+function assertExactComputerClipboard(clipboard, expected) {
+  if (clipboard.truncated || clipboard.text !== expected) {
+    throw new Error("Desktop clipboard did not accept the exact pasted text");
+  }
+}
+function ComputerViewportFallback(props) {
+  if (props.machineLocked) {
+    return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 grid place-items-center bg-og-bg p-6", children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm text-center", children: [
+      /* @__PURE__ */ jsx(LockKeyholeIcon, { className: "mx-auto size-6 text-og-fg-muted" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: "Machine locked" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: "Live frames and input stay private until someone unlocks the machine." })
+    ] }) });
+  }
+  const appControls = props.observation?.target.kind === "app";
+  const controlFailure = interactionControlFailureFromError(props.error);
+  const interactive = semanticControls(props.observation).filter((node) => semanticAction(node) !== null).slice(0, 10);
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 grid place-items-center bg-og-bg p-6", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md rounded-og-lg border border-og-border bg-og-surface-1 p-4 shadow-lg", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      props.error ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-4 text-og-danger" }) : appControls ? /* @__PURE__ */ jsx(PanelsTopLeftIcon, { className: "size-4 text-og-fg-muted" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-4 animate-spin text-og-fg-muted" }),
+      /* @__PURE__ */ jsx("p", { className: "text-og-menu font-medium text-og-fg", children: isAttachedChromeGenerationLossError(props.error) ? "Chrome reconnected\u2014open a fresh browser/desktop." : !props.inputAllowed ? "View only" : props.controlUnavailable ? "Desktop controls unavailable" : props.error ? "Live view disconnected" : appControls ? "App controls" : computerConnectionLabel(props.connectionState) })
+    ] }),
+    props.error ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-og-control leading-5 text-og-fg-muted", children: isAttachedChromeGenerationLossError(props.error) ? "Chrome reconnected\u2014open a fresh browser/desktop. Use Browser \u2192 New browser \u2192 Connected Chrome." : controlFailure?.message ?? props.error.message }) : null,
+    !props.inputAllowed ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-og-control leading-5 text-og-fg-muted", children: "Refresh to check desktop controls." }) : null,
+    interactive.length > 0 && !props.controlUnavailable && props.inputAllowed ? /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t border-og-border pt-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-og-xs text-og-fg-subtle", children: "App controls remain available" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: interactive.map((node) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            const action = semanticAction(node);
+            if (action) props.onAction(action);
+          },
+          className: "rounded-og-sm border border-og-border bg-og-surface-1 px-2 py-1 text-og-control text-og-fg transition hover:bg-og-surface-2",
+          children: node.name || node.role
+        },
+        node.ref
+      )) })
+    ] }) : null,
+    props.error && !isAttachedChromeGenerationLossError(props.error) ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: props.onReconnect,
+        className: "mt-3 text-og-control font-medium text-og-accent hover:underline",
+        children: controlFailure?.retryable === false ? "Try again" : "Reconnect"
+      }
+    ) : null
+  ] }) });
+}
+function ComputerSemanticPanel(props) {
+  const nodes = semanticControls(props.observation).slice(0, 100);
+  return /* @__PURE__ */ jsxs("aside", { className: "box-border max-h-[40%] w-full shrink-0 overflow-y-auto border-t border-og-border bg-og-surface-1 p-2 @xl/computer-viewer:max-h-none @xl/computer-viewer:w-64 @xl/computer-viewer:border-t-0 @xl/computer-viewer:border-l", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-1.5 px-1 text-og-xs font-medium uppercase tracking-[0.1em] text-og-fg-subtle", children: [
+      /* @__PURE__ */ jsx(KeyboardIcon, { className: "size-3" }),
+      " App controls"
+    ] }),
+    !props.inputAllowed ? /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-og-control leading-5 text-og-fg-muted", children: "View only \xB7 refresh to check desktop controls." }) : props.controlUnavailable ? /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-og-control leading-5 text-og-fg-muted", children: "Reconnect to use app controls." }) : null,
+    nodes.length === 0 ? props.controlUnavailable ? null : /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-og-control leading-5 text-og-fg-muted", children: "This view has no accessibility controls. Use the live image instead." }) : /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: nodes.map((node) => /* @__PURE__ */ jsx(
+      ComputerSemanticControl,
+      {
+        node,
+        mutating: props.mutating,
+        onAction: props.onAction
+      },
+      node.ref
+    )) })
+  ] });
+}
+function ComputerSemanticControl(props) {
+  const { node } = props;
+  const editable = node.actions.includes("set_value");
+  const action = semanticAction(node);
+  const observedValue = semanticValue(node) ?? "";
+  const [value, setValue] = useState5(() => observedValue);
+  useEffect5(() => {
+    setValue(observedValue);
+  }, [node.ref, observedValue]);
+  if (editable) {
+    return /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "rounded-og-sm px-2 py-1.5 hover:bg-og-surface-2",
+        onSubmit: (event) => {
+          event.preventDefault();
+          if (props.mutating) return;
+          props.onAction({
+            type: "semantic",
+            locator: { kind: "ref", ref: node.ref },
+            action: "set_value",
+            value
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx("label", { className: "block truncate text-[10px] uppercase text-og-fg-subtle", children: node.name || node.identifier || node.role }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-1 flex gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value,
+                disabled: props.mutating,
+                onChange: (event) => setValue(event.currentTarget.value),
+                className: "min-w-0 flex-1 rounded-og-sm border border-og-border bg-og-surface-1 px-1.5 py-1 text-og-control text-og-fg outline-hidden focus:border-og-accent",
+                "aria-label": `Set ${node.name || node.identifier || node.role}`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "submit",
+                disabled: props.mutating,
+                className: "rounded-og-sm border border-og-border bg-og-surface-1 px-2 text-og-control font-medium text-og-fg transition hover:bg-og-surface-2 disabled:opacity-50",
+                children: "Set"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled: !action || props.mutating,
+      onClick: () => {
+        if (action) props.onAction(action);
+      },
+      className: "flex w-full items-start gap-2 rounded-og-sm px-2 py-1.5 text-left transition hover:bg-og-surface-2 disabled:cursor-default disabled:hover:bg-transparent",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-[10px] uppercase text-og-fg-subtle", children: node.role }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-og-control text-og-fg", children: node.name || semanticValue(node) || node.identifier || "Unnamed control" })
+      ]
+    }
+  );
+}
+function ComputerStatusBar(props) {
+  const screen = props.target?.kind === "screen";
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-8 shrink-0 items-center gap-2 border-t border-og-border bg-og-surface-1 px-2 text-og-xs text-og-fg-subtle", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "size-1.5 rounded-full",
+          props.connectionState === "live" ? "bg-og-status-running" : "bg-og-muted"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children: !props.inputAllowed ? "View only" : props.controlUnavailable ? "Controls unavailable" : props.target?.kind === "app" ? "App controls" : props.connectionState === "live" ? "Live" : computerConnectionLabel(props.connectionState) }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: !props.inputAllowed ? "Refresh to check desktop controls" : props.controlUnavailable ? "Reconnect to use desktop input" : screen ? "Full screen \xB7 input may move pointer and focus" : props.target?.kind === "app" ? props.session?.capabilities?.backgroundActions ? "App \xB7 controls work in the background" : "App controls" : props.session?.capabilities?.backgroundInput ? "Window \xB7 clicks and typing stay in the background" : props.session?.capabilities?.backgroundActions ? "Window \xB7 app controls work in the background" : props.target?.kind ?? "Desktop" }),
+    screen ? /* @__PURE__ */ jsx(MousePointer2Icon, { className: "size-3", "aria-hidden": true }) : null,
+    props.refreshing ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }) : null,
+    props.controlCount > 0 || props.showControls ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: props.onToggleControls,
+        "aria-pressed": props.showControls,
+        className: cn(
+          "rounded px-1.5 py-0.5 transition hover:bg-og-surface-2 hover:text-og-fg",
+          props.showControls && "bg-og-surface-2 text-og-fg"
+        ),
+        children: [
+          "Controls ",
+          props.controlCount
+        ]
+      }
+    ) : null
+  ] });
+}
+function ComputerNotice(props) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid h-full place-items-center bg-og-bg text-og-control text-og-fg-muted",
+        props.className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        props.icon,
+        props.text
+      ] })
+    }
+  );
+}
+var structuralRoles = /* @__PURE__ */ new Set([
+  "frame",
+  "panel",
+  "section",
+  "document",
+  "document web",
+  "static",
+  "static text",
+  "heading",
+  "paragraph",
+  "notification",
+  "separator",
+  "tool bar",
+  "page tab list"
+]);
+function semanticControls(observation) {
+  if (observation?.semantic?.kind !== "snapshot") return [];
+  const result = [];
+  const visit = (node) => {
+    const role = node.role.trim().toLowerCase();
+    const label = node.name?.trim() || node.identifier?.trim();
+    if (node.actions.includes("set_value") || label && label.toLowerCase() !== role && !structuralRoles.has(role) && semanticAction(node) !== null) {
+      result.push(node);
+    }
+    node.children?.forEach(visit);
+  };
+  observation.semantic.roots.forEach(visit);
+  return result;
+}
+function semanticAction(node) {
+  const invoke = ["invoke", "press", "click"].some((action) => node.actions.includes(action));
+  if (invoke) {
+    return {
+      type: "semantic",
+      locator: { kind: "ref", ref: node.ref },
+      action: "invoke"
+    };
+  }
+  return null;
+}
+function semanticValue(node) {
+  return typeof node.value === "string" ? node.value : null;
+}
+function paintCanvas(canvas, image, width, height) {
+  const dimensionsChanged = canvas.width !== width || canvas.height !== height;
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d", { alpha: false });
+  if (!context) throw new Error("Desktop canvas is unavailable.");
+  context.drawImage(image, 0, 0, width, height);
+  if (dimensionsChanged) fitComputerCanvas(canvas);
+}
+function fitComputerCanvas(canvas) {
+  const viewport = canvas.parentElement;
+  if (!viewport || canvas.width <= 0 || canvas.height <= 0) return;
+  const scale = Math.min(
+    viewport.clientWidth / canvas.width,
+    viewport.clientHeight / canvas.height
+  );
+  if (!Number.isFinite(scale) || scale <= 0) return;
+  canvas.style.width = `${canvas.width * scale}px`;
+  canvas.style.height = `${canvas.height * scale}px`;
+}
+function loadImage(url) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error("Desktop frame image could not be decoded."));
+    image.src = url;
+  });
+}
+function computerPoint(canvas, frame, clientX, clientY) {
+  if (!canvas) return null;
+  const rect = canvas.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) return null;
+  return {
+    x: Math.max(0, Math.min(frame.width - 1, (clientX - rect.left) / rect.width * frame.width)),
+    y: Math.max(0, Math.min(frame.height - 1, (clientY - rect.top) / rect.height * frame.height))
+  };
+}
+function computerKey(event) {
+  if (["Alt", "AltGraph", "Control", "Meta", "Shift"].includes(event.key)) return null;
+  const special = /* @__PURE__ */ new Set([
+    "Enter",
+    "Tab",
+    "Escape",
+    "Backspace",
+    "Delete",
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    "Home",
+    "End",
+    "PageUp",
+    "PageDown"
+  ]);
+  const modified = event.altKey || event.ctrlKey || event.metaKey;
+  if (!modified && !special.has(event.key)) return null;
+  const parts = [];
+  if (event.ctrlKey) parts.push("Control");
+  if (event.altKey) parts.push("Alt");
+  if (event.metaKey) parts.push("Meta");
+  if (event.shiftKey) parts.push("Shift");
+  parts.push(event.key === " " ? "Space" : event.key);
+  return parts.join("+");
+}
+function sameFrameFence(left, right) {
+  return left.frameId === right.frameId && sameComputerTarget(left, right);
+}
+function sameComputerTarget(left, right) {
+  return left.computerSessionId === right.computerSessionId && left.controllerGeneration === right.controllerGeneration && left.targetId === right.targetId && left.targetGeneration === right.targetGeneration;
+}
+function isLiveComputer2(session) {
+  return !["ending", "ended", "failed", "lost"].includes(session.lifecycle);
+}
+function computerFailureMessage(session) {
+  switch (session.failureCode) {
+    case "machine_locked":
+      return "Unlock the connected Mac, then try again.";
+    case "controller_heartbeat_expired":
+      return "The desktop connection was lost. Try opening it again.";
+    case "controller_transition_expired":
+      return session.placement.kind === "attached_device" ? "Chrome reconnected\u2014open a fresh browser/desktop. Use Browser \u2192 New browser \u2192 Connected Chrome." : "The desktop connection expired. Open a new desktop.";
+    case null:
+      return null;
+    default:
+      return "The desktop could not be opened. Try again.";
+  }
+}
+function isAttachedChromeGenerationLoss(session) {
+  return session.lifecycle === "lost" && session.failureCode === "controller_transition_expired" && session.placement.kind === "attached_device";
+}
+function isAttachedChromeGenerationLossError(error) {
+  if (!error) return false;
+  return /placement instance changed|controller authority changed/i.test(error.message);
+}
+function countInterventions(interventions) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const intervention of interventions) {
+    counts.set(intervention.resourceId, (counts.get(intervention.resourceId) ?? 0) + 1);
+  }
+  return counts;
+}
+function interventionTitle(intervention) {
+  switch (intervention.kind) {
+    case "manual_login":
+      return "Sign in needed";
+    case "mfa":
+      return "Verification needed";
+    case "external_action":
+    case "confirmation":
+      return "Action needed";
+    case "other":
+      return "Desktop needs your help";
+  }
+}
+function platformLabel(session) {
+  switch (session.platform) {
+    case "macos":
+      return "Mac";
+    case "linux":
+      return "Linux";
+    case "windows":
+      return "Windows";
+    default:
+      return "Desktop";
+  }
+}
+function placementLabel(session) {
+  switch (session.placement.kind) {
+    case "sandbox_group":
+      return "Agent sandbox";
+    case "connected_machine":
+      return "Connected machine";
+    case "attached_device":
+      return "Your machine";
+    case "external_provider":
+      return "Cloud desktop";
+  }
+}
+function lifecycleLabel(lifecycle) {
+  switch (lifecycle) {
+    case "starting":
+      return "Opening desktop\u2026";
+    case "suspending":
+      return "Pausing desktop\u2026";
+    case "suspended":
+      return "Desktop paused";
+    case "restoring":
+      return "Restoring desktop\u2026";
+    case "ending":
+      return "Closing desktop\u2026";
+    default:
+      return "Connecting to desktop\u2026";
+  }
+}
+function computerConnectionLabel(state) {
+  switch (state) {
+    case "attaching":
+      return "Opening desktop view\u2026";
+    case "connecting":
+      return "Connecting\u2026";
+    case "reconnecting":
+      return "Reconnecting\u2026";
+    case "error":
+      return "Disconnected";
+    default:
+      return "Waiting for desktop\u2026";
+  }
+}
+
+export {
+  useComputerSessions,
+  useComputerSession,
+  useComputerFrameStream,
+  ComputerViewer,
+  computerKey
+};
+//# sourceMappingURL=chunk-GYVRFZDY.js.map