@opengeni/react 6.5.2-canary.41607687019001 → 6.7.0

package/dist/chunk-IKJLSBUI.js

@@ -1,2984 +0,0 @@
-"use client";
-import {
-  InteractionInterventionBanner,
-  isInteractionControlUnavailable,
-  isNonRetryableInteractionError,
-  isSourcePlacementChangedError,
-  useInteractionInterventions,
-  useInteractionInvalidation,
-  useViewerMenuDismiss
-} from "./chunk-QIK2Q6N5.js";
-import {
-  copyTextToClipboard
-} from "./chunk-PEHTX3V7.js";
-import {
-  usePageLiveActivity
-} from "./chunk-RV3O5OCQ.js";
-import {
-  DesktopViewer
-} from "./chunk-5KWMYPJV.js";
-import {
-  STREAM_CLOSE_REASON_NORMAL,
-  STREAM_KIND_COMPUTER,
-  STREAM_ROLE_CLIENT,
-  decodeStreamFrame,
-  decodeStreamOpenAck,
-  encodeStreamClose,
-  encodeStreamOpen
-} from "./chunk-TNEZNMSN.js";
-import {
-  useEmbeddedComputerInteraction
-} from "./chunk-TVQCDDSZ.js";
-import {
-  cn
-} from "./chunk-TXS65BB2.js";
-import {
-  useOpenGeniText
-} from "./chunk-TNUSPXPW.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";
-import { errorMessage } from "@opengeni/contracts/values";
-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 t = useOpenGeniText();
-  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(t("hooks.useComputerFrameStream.desktopViewLostConnection")));
-    };
-    const onClose = (source) => {
-      if (disposed || source !== socket) return;
-      fail(new Error(t("hooks.useComputerFrameStream.desktopViewLostConnection")));
-    };
-    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, t]);
-  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 = errorMessage(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";
-var actionResultFences = /* @__PURE__ */ new WeakMap();
-function isStaleComputerActionResult(value) {
-  return typeof value === "object" && value !== null && actionResultFences.get(value)?.() === false;
-}
-function computerActionReceiptError(t, receipt) {
-  const error = new Error(
-    receipt.error?.message ?? t("hooks.useComputerSession.desktopInputDidNotComplete")
-  );
-  const fence = actionResultFences.get(receipt);
-  if (fence) actionResultFences.set(error, fence);
-  return error;
-}
-function useComputerSession(options) {
-  const t = useOpenGeniText();
-  const { client, workspaceId } = useEmbeddedComputerInteraction(options);
-  const computerSessionId = options.computerSessionId;
-  const enabled = (options.enabled ?? true) && computerSessionId !== null;
-  const sourceRef = useRef2({
-    client,
-    workspaceId,
-    computerSessionId,
-    enabled
-  });
-  if (sourceRef.current.client !== client || sourceRef.current.workspaceId !== workspaceId || sourceRef.current.computerSessionId !== computerSessionId || sourceRef.current.enabled !== enabled) {
-    sourceRef.current = { client, workspaceId, computerSessionId, enabled };
-  }
-  const source = sourceRef.current;
-  const pageLive = usePageLiveActivity();
-  const pollIntervalMs = Math.max(750, options.pollIntervalMs ?? 2e3);
-  const [state, setState] = useState2(() => emptyState(source, enabled));
-  const visible = state.source === source ? state : emptyState(source, enabled);
-  const refreshBlocked = isNonRetryableInteractionError(visible.error);
-  const selectedTargetIdRef = useRef2(visible.selectedTargetId);
-  selectedTargetIdRef.current = visible.selectedTargetId;
-  const selectionRevisionRef = useRef2(0);
-  const actionResultOrderRef = useRef2({ next: 0, settled: 0 });
-  const targetsRef = useRef2({
-    source,
-    computerSessionId,
-    targets: visible.targets
-  });
-  const observationRef = useRef2({ source, computerSessionId, observation: visible.observation });
-  if (targetsRef.current.source !== source) {
-    targetsRef.current = { source, computerSessionId, targets: visible.targets };
-    observationRef.current = {
-      source,
-      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,
-    source,
-    count: 0
-  });
-  const mountedRef = useRef2(true);
-  const isCurrentSource = useCallback2(
-    () => mountedRef.current && sourceRef.current === source,
-    [source]
-  );
-  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 || !isCurrentSource()) 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 (!isCurrentSource() || requestRef.current.id !== id) return;
-      const targets = sortComputerTargets(targetResponse.targets);
-      const selected = chooseTarget(targets, selectedTargetIdRef.current);
-      const selectedId = selected?.id ?? selectedTargetIdRef.current;
-      const previous = observationRef.current.source === source ? observationRef.current.observation : null;
-      const retainedObservation = selected && previous?.target.id === selected.id && previous.target.controllerGeneration === selected.controllerGeneration && previous.target.targetGeneration === selected.targetGeneration ? previous : null;
-      selectedTargetIdRef.current = selectedId;
-      targetsRef.current = { source, computerSessionId, targets };
-      observationRef.current = { source, computerSessionId, observation: retainedObservation };
-      setState(
-        (current) => isCurrentSource() && current.source === source && current.computerSessionId === computerSessionId ? {
-          ...current,
-          session,
-          targets,
-          selectedTargetId: selectedId,
-          observation: retainedObservation,
-          loading: false,
-          error: null,
-          controlError: null
-        } : current
-      );
-      const observation = selected ? await client.observeComputerTarget(workspaceId, computerSessionId, selected.id, {
-        signal: controller.signal
-      }) : null;
-      if (!isCurrentSource() || requestRef.current.id !== id) return;
-      selectedTargetIdRef.current = selectedId;
-      targetsRef.current = { source, computerSessionId, targets };
-      observationRef.current = { source, computerSessionId, observation };
-      setState(
-        (current) => isCurrentSource() && current.source === source && current.computerSessionId === computerSessionId ? {
-          ...current,
-          session,
-          targets,
-          selectedTargetId: selectedId,
-          observation,
-          loading: false,
-          error: null
-        } : current
-      );
-    } catch (cause) {
-      if (controller.signal.aborted || !isCurrentSource() || requestRef.current.id !== id) return;
-      const error = cause instanceof Error ? cause : new Error(String(cause));
-      setState(
-        (current) => isCurrentSource() && current.source === source && 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, isCurrentSource, source, workspaceId]);
-  useEffect2(() => {
-    mountedRef.current = true;
-    if (!enabled) {
-      invalidateRefresh();
-      setState(emptyState(source, false));
-      return;
-    }
-    setState(
-      (current) => current.source === source ? {
-        ...current,
-        loading: true,
-        mutating: mutationRef.current.source === source && mutationRef.current.count > 0
-      } : emptyState(source, true)
-    );
-    void refresh();
-    return () => {
-      mountedRef.current = false;
-      invalidateRefresh();
-    };
-  }, [computerSessionId, enabled, invalidateRefresh, refresh, source]);
-  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) => {
-      if (!isCurrentSource()) throw new Error(t("hooks.useComputerSession.theDesktopSourceIsNo"));
-      invalidateRefresh();
-      if (mutationRef.current.computerSessionId !== scopeComputerSessionId || mutationRef.current.source !== source) {
-        mutationRef.current = {
-          computerSessionId: scopeComputerSessionId,
-          source,
-          count: 0
-        };
-      }
-      mutationRef.current.count += 1;
-      setState(
-        (current) => isCurrentSource() && current.source === source && current.computerSessionId === scopeComputerSessionId ? { ...current, mutating: true, error: null } : current
-      );
-      try {
-        return await operation();
-      } finally {
-        if (mutationRef.current.computerSessionId === scopeComputerSessionId && mutationRef.current.source === source) {
-          mutationRef.current.count = Math.max(0, mutationRef.current.count - 1);
-          const mutating = mutationRef.current.count > 0;
-          setState(
-            (current) => isCurrentSource() && current.source === source && current.computerSessionId === scopeComputerSessionId ? { ...current, mutating } : current
-          );
-        }
-      }
-    },
-    [invalidateRefresh, isCurrentSource, source, t]
-  );
-  const selectTarget = useCallback2(
-    async (targetId) => {
-      if (!computerSessionId) throw new Error(t("hooks.useComputerSession.noDesktopIsSelected"));
-      if (!isCurrentSource()) throw new Error(t("hooks.useComputerSession.theDesktopSourceIsNo"));
-      const target = targetsRef.current.source === source ? targetsRef.current.targets.find((candidate) => candidate.id === targetId) : null;
-      if (!target) throw new Error(t("hooks.useComputerSession.theSelectedDesktopTargetIs"));
-      invalidateRefresh();
-      const readRequestId = requestRef.current.id;
-      const selectionRevision = ++selectionRevisionRef.current;
-      const isCurrentSelection = () => isCurrentSource() && selectionRevisionRef.current === selectionRevision;
-      const isCurrentSelectionRead = () => isCurrentSelection() && requestRef.current.id === readRequestId;
-      selectedTargetIdRef.current = target.id;
-      observationRef.current = { source, computerSessionId, observation: null };
-      setState(
-        (current) => isCurrentSelection() && current.source === source && 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 (!isCurrentSelectionRead() || selectedTargetIdRef.current !== target.id) return target;
-        observationRef.current = { source, computerSessionId, observation };
-        setState(
-          (current) => isCurrentSelection() && current.source === source && 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));
-        if (isCurrentSelectionRead()) {
-          setState(
-            (current) => isCurrentSelection() && current.source === source && current.computerSessionId === computerSessionId && current.selectedTargetId === target.id ? {
-              ...current,
-              loading: false,
-              error,
-              controlError: isInteractionControlUnavailable(error, "observation") ? error : current.controlError
-            } : current
-          );
-        }
-        throw error;
-      }
-    },
-    [client, computerSessionId, invalidateRefresh, isCurrentSource, source, workspaceId, t]
-  );
-  const dispatchAction = useCallback2(
-    async (action, operationId, frame) => {
-      if (!computerSessionId) throw new Error(t("hooks.useComputerSession.noDesktopIsSelected"));
-      if (!isCurrentSource()) throw new Error(t("hooks.useComputerSession.theDesktopSourceIsNo"));
-      if (frame && frame.computerSessionId !== computerSessionId) {
-        throw new Error("The displayed desktop frame belongs to another desktop session.");
-      }
-      const currentObservation = observationRef.current.source === source && observationRef.current.computerSessionId === computerSessionId ? observationRef.current.observation : null;
-      const focusTarget = action.type === "focus" && targetsRef.current.source === source ? targetsRef.current.targets.find((candidate) => candidate.id === action.targetId) ?? null : null;
-      const frameTarget = frame && targetsRef.current.source === source ? currentObservation?.target.id === frame.targetId ? currentObservation.target : targetsRef.current.targets.find((candidate) => candidate.id === frame.targetId) ?? null : null;
-      const inputTarget = (action.type === "keyboard" || action.type === "clipboard") && targetsRef.current.source === source && 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(t("hooks.useComputerSession.theDisplayedDesktopFrameIs"));
-      }
-      if (frame && (frame.controllerGeneration !== target.controllerGeneration || frame.targetGeneration !== target.targetGeneration)) {
-        throw new Error("The displayed desktop frame belongs to an earlier target generation.");
-      }
-      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.");
-      }
-      const selectedTargetId = selectedTargetIdRef.current;
-      const selectedTarget = targetsRef.current.targets.find(
-        (candidate) => candidate.id === selectedTargetId
-      );
-      const selectedFence = selectedTarget && {
-        id: selectedTarget.id,
-        computerSessionId: selectedTarget.computerSessionId,
-        controllerGeneration: selectedTarget.controllerGeneration,
-        targetGeneration: selectedTarget.targetGeneration
-      };
-      const selectionRevision = selectionRevisionRef.current;
-      const isCurrentView = () => isCurrentSource() && selectionRevisionRef.current === selectionRevision && selectedTargetIdRef.current === selectedTargetId && targetsRef.current.source === source && targetsRef.current.computerSessionId === computerSessionId && sameTargetFence(
-        selectedFence,
-        targetsRef.current.targets.find((candidate) => candidate.id === selectedTargetId)
-      );
-      const resultOrder = ++actionResultOrderRef.current.next;
-      let admitted = false;
-      let resultTargetId = selectedTargetId;
-      let resultFence = selectedFence;
-      const isCurrentResultView = () => isCurrentSource() && selectionRevisionRef.current === selectionRevision && selectedTargetIdRef.current === resultTargetId && targetsRef.current.source === source && sameTargetFence(
-        resultFence,
-        targetsRef.current.targets.find((candidate) => candidate.id === resultTargetId)
-      );
-      const canProjectResult = () => {
-        if (!admitted) {
-          if (!isCurrentView() || resultOrder < actionResultOrderRef.current.settled) return false;
-          actionResultOrderRef.current.settled = resultOrder;
-          admitted = true;
-          invalidateRefresh();
-        }
-        return isCurrentResultView() && resultOrder === actionResultOrderRef.current.settled;
-      };
-      const projectState = (update) => {
-        setState(
-          (current) => admitted && isCurrentResultView() && current.source === source && current.computerSessionId === computerSessionId && current.actionResultOrder <= resultOrder ? { ...update(current), actionResultOrder: resultOrder } : current
-        );
-      };
-      return await runMutation(computerSessionId, async () => {
-        try {
-          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
-          });
-          const receiptSettled = receipt.state === "completed" || receipt.state === "failed" || receipt.state === "outcome_unknown";
-          actionResultFences.set(
-            receipt,
-            () => admitted ? isCurrentResultView() && resultOrder === actionResultOrderRef.current.settled : isCurrentView() && resultOrder >= actionResultOrderRef.current.settled
-          );
-          if (!receiptSettled || !canProjectResult()) return receipt;
-          if (receipt.observation) {
-            const observation = receipt.observation;
-            observationRef.current = { source, computerSessionId, observation };
-            selectedTargetIdRef.current = observation.target.id;
-            targetsRef.current.targets = replaceTarget(
-              targetsRef.current.targets,
-              observation.target
-            );
-            resultTargetId = observation.target.id;
-            resultFence = {
-              id: observation.target.id,
-              computerSessionId: observation.target.computerSessionId,
-              controllerGeneration: observation.target.controllerGeneration,
-              targetGeneration: observation.target.targetGeneration
-            };
-            projectState((current) => ({
-              ...current,
-              error: null,
-              controlError: null,
-              observation,
-              selectedTargetId: observation.target.id,
-              targets: replaceTarget(current.targets, observation.target)
-            }));
-          } else {
-            projectState((current) => ({ ...current, error: null, controlError: null }));
-            void refresh();
-          }
-          return receipt;
-        } catch (cause) {
-          const error = cause instanceof Error ? cause : new Error(String(cause));
-          actionResultFences.set(
-            error,
-            () => admitted && isCurrentResultView() && resultOrder === actionResultOrderRef.current.settled
-          );
-          if (canProjectResult()) {
-            projectState((current) => ({
-              ...current,
-              error,
-              controlError: isInteractionControlUnavailable(error) ? error : current.controlError
-            }));
-          }
-          throw error;
-        }
-      });
-    },
-    [
-      client,
-      computerSessionId,
-      invalidateRefresh,
-      isCurrentSource,
-      refresh,
-      runMutation,
-      source,
-      workspaceId,
-      t
-    ]
-  );
-  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(t("hooks.useComputerSession.noDesktopIsSelected"));
-    const selectionRevision = selectionRevisionRef.current;
-    const settledOrder = actionResultOrderRef.current.settled;
-    const selectedTargetId = selectedTargetIdRef.current;
-    const selectedTarget = targetsRef.current.targets.find(
-      (candidate) => candidate.id === selectedTargetId
-    );
-    const selectedFence = selectedTarget && {
-      id: selectedTarget.id,
-      computerSessionId: selectedTarget.computerSessionId,
-      controllerGeneration: selectedTarget.controllerGeneration,
-      targetGeneration: selectedTarget.targetGeneration
-    };
-    const isCurrentRead = () => isCurrentSource() && selectionRevisionRef.current === selectionRevision && actionResultOrderRef.current.settled === settledOrder && selectedTargetIdRef.current === selectedTargetId && targetsRef.current.source === source && sameTargetFence(
-      selectedFence,
-      targetsRef.current.targets.find((candidate) => candidate.id === selectedTargetId)
-    );
-    try {
-      const clipboard = await client.readComputerClipboard(workspaceId, computerSessionId);
-      actionResultFences.set(clipboard, isCurrentRead);
-      return clipboard;
-    } catch (cause) {
-      const error = cause instanceof Error ? cause : new Error(String(cause));
-      actionResultFences.set(error, isCurrentRead);
-      setState(
-        (current) => isCurrentRead() && current.source === source && current.computerSessionId === computerSessionId ? {
-          ...current,
-          error,
-          controlError: isInteractionControlUnavailable(error) ? error : current.controlError
-        } : current
-      );
-      throw error;
-    }
-  }, [client, computerSessionId, isCurrentSource, source, workspaceId, t]);
-  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(source, loading) {
-  return {
-    source,
-    computerSessionId: source.computerSessionId,
-    session: null,
-    targets: [],
-    selectedTargetId: null,
-    observation: null,
-    loading,
-    mutating: false,
-    error: null,
-    controlError: null,
-    actionResultOrder: 0
-  };
-}
-function chooseTarget(targets, preferredId) {
-  if (preferredId !== null) return targets.find((target) => target.id === preferredId) ?? null;
-  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
-  ]);
-}
-function sameTargetFence(left, right) {
-  return left?.id === right?.id && left?.computerSessionId === right?.computerSessionId && left?.controllerGeneration === right?.controllerGeneration && left?.targetGeneration === right?.targetGeneration;
-}
-
-// 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 t = useOpenGeniText();
-  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(t("hooks.useComputerInputPosture.desktopInputAvailabilityCouldNot"));
-        }
-        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, t]);
-  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 t = useOpenGeniText();
-  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) => {
-      if (isStaleComputerActionResult(cause)) return;
-      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(t, intervention)}: ${intervention.reason}`
-      });
-    }
-  }, [interventions.interventions, onNotify, t]);
-  const resolveIntervention = useCallback5(
-    (intervention, outcome) => {
-      void interventions.resolve(intervention.id, {
-        expectedVersion: intervention.version,
-        outcome
-      }).then(() => {
-        onNotify?.({
-          kind: "info",
-          message: outcome === "completed" ? t("computerViewer.agentNotifiedContinuingWork") : t("computerViewer.requestCancelled")
-        });
-      }).catch((cause) => notifyError(cause, t("computerViewer.couldNotUpdateTheDesktop")));
-    },
-    [interventions, notifyError, onNotify, t]
-  );
-  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(t("computerViewer.couldNotOpenADesktop"));
-      setCreateError(error);
-      notifyError(error, t("computerViewer.couldNotOpenADesktop"));
-    }).finally(() => {
-      createInFlightRef.current = false;
-      setCreating(false);
-    });
-  }, [createSession, notifyError, selectComputerSession, sessionId, t]);
-  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, operationId) => {
-      if (computer.controlError) throw computer.controlError;
-      if (inputDenied) throw new Error(t("computerViewer.desktopIsViewOnlyRefresh"));
-      let receipt;
-      if (action.type === "pointer") {
-        if (!frame) throw new Error(t("computerViewer.desktopViewIsNotReady"));
-        receipt = await actFromFrame(action, frame, operationId);
-      } else {
-        receipt = await act(action, operationId);
-      }
-      if (!isStaleComputerActionResult(receipt) && receipt.state !== "completed") {
-        throw computerActionReceiptError(t, receipt);
-      }
-      return receipt;
-    },
-    [act, actFromFrame, computer.controlError, inputDenied, t]
-  );
-  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 (async () => {
-        const receipt = await perform({ type: "clipboard", operation: "copy" }, null);
-        if (isStaleComputerActionResult(receipt)) return;
-        const clipboard = await computer.readClipboard();
-        if (isStaleComputerActionResult(receipt) || isStaleComputerActionResult(clipboard)) return;
-        if (clipboard.text && !await copyTextToClipboard(clipboard.text)) {
-          throw new Error(t("computerViewer.desktopTextCouldNotBe"));
-        }
-      })().catch((cause) => notifyError(cause, t("computerViewer.couldNotCopyFromThe")));
-    },
-    [computer, notifyError, perform, rfbInputEnabled, rfbStream, t]
-  );
-  const pasteIntoRfb = useCallback5(
-    (text) => {
-      if (!rfbInputEnabled || !rfbStream || computer.session?.capabilities?.clipboard !== true)
-        return false;
-      void (async () => {
-        const receipt = await perform({ type: "clipboard", operation: "write", text }, null);
-        if (isStaleComputerActionResult(receipt)) return;
-        const clipboard = await computer.readClipboard();
-        if (isStaleComputerActionResult(receipt) || isStaleComputerActionResult(clipboard)) return;
-        assertExactComputerClipboard(t, clipboard, text);
-        await perform({ type: "clipboard", operation: "paste" }, null);
-      })().catch((cause) => notifyError(cause, t("computerViewer.couldNotPasteIntoThe")));
-      return true;
-    },
-    [computer, notifyError, perform, rfbInputEnabled, rfbStream, t]
-  );
-  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: t("computerViewer.findingWorkspaceDesktops"),
-        ...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: t("computerViewer.chromeReconnectedOpenAFresh") }),
-        /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: t("computerViewer.thisChromeProfileIsLive") })
-      ] }) });
-    }
-    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 ? t("computerViewer.desktopDidnTOpen") : t("computerViewer.openingDesktop") }),
-      /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: error?.message ?? t("computerViewer.preparingThisAgentSDesktop") }),
-      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" }),
-            t("computerViewer.tryAgain")
-          ]
-        }
-      ) : 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, t("computerViewer.couldNotSwitchDesktopViews")));
-            },
-            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, t("computerViewer.couldNotOpenTheRequested"))),
-            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: [
-                t("computerViewer.desktopControlsUnavailable"),
-                " ",
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: reconnect,
-                    className: "pointer-events-auto ml-2 font-medium underline",
-                    children: t("computerViewer.reconnect")
-                  }
-                )
-              ] }) : t("computerViewer.viewOnlyDirectInputUnavailable") }) : 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,
-                allowForegroundInputWithinOwnedSeat: computer.session?.platform === "linux" && computer.session.adapter === "opengeni.cua.linux.v1" && computer.session.seatId === `linux-virtual:${computer.session.id}` && Boolean(computer.session.displayId),
-                clipboardEnabled: attachmentInputAllowed && computer.session?.capabilities?.clipboard === true,
-                pointerInput: attachmentInputAllowed && computer.session?.capabilities?.pointerInput === true,
-                pointerClickContinuation: attachmentInputAllowed && computer.session?.capabilities?.pointerClickContinuation === true,
-                keyboardInput: attachmentInputAllowed && computer.session?.capabilities?.keyboardInput === true,
-                onAction: perform,
-                onReadClipboard: computer.readClipboard,
-                onReconnect: generationLossSelected || generationLossFrames ? () => void 0 : reconnect,
-                onError: (cause) => notifyError(cause, t("computerViewer.desktopInputFailed"))
-              },
-              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, t("computerViewer.desktopActionFailed"))
-                )
-              }
-            ) : null
-          ] }),
-          /* @__PURE__ */ jsx(
-            ComputerStatusBar,
-            {
-              session: computer.session,
-              target: computer.selectedTarget,
-              connectionState,
-              controlUnavailable,
-              inputAllowed: !inputDenied,
-              refreshing: registry.refreshing,
-              showControls,
-              controlCount: semanticControls(t, computer.observation).length,
-              onToggleControls: () => setShowControls((current) => !current)
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function ComputerUnselectedPanel(props) {
-  const t = useOpenGeniText();
-  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 ? t("computerViewer.chromeReconnectedOpenAFresh") : props.error ? t("computerViewer.desktopDidnTOpen") : t("computerViewer.openingDesktop") }),
-    /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: props.generationLoss ? t("computerViewer.thisChromeProfileIsLive") : props.error?.message ?? (props.peerCount === 1 ? t("computerViewer.preparingThisAgentSDesktop2") : t("computerViewer.preparingThisAgentSDesktop3", { peerCount: props.peerCount })) }),
-    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" }),
-          t("computerViewer.tryAgain")
-        ]
-      }
-    ) : null
-  ] }) });
-}
-function ComputerToolbar(props) {
-  const t = useOpenGeniText();
-  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" ? t("computerViewer.desktop") : selected?.name ?? t("computerViewer.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: t("computerViewer.currentAgent"),
-              sessions: current,
-              selectedId: props.selectedSessionId,
-              interventionCounts: props.interventionCounts,
-              onSelect: choose
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ComputerSessionGroup,
-            {
-              label: t("computerViewer.otherAgents"),
-              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: t("computerViewer.followAgent")
-            }
-          ) : 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" }),
-                " ",
-                t("computerViewer.newDesktop")
-              ]
-            }
-          ) : null
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-og-xs text-og-fg-subtle", children: selected ? `${platformLabel(t, selected)} \xB7 ${placementLabel(t, 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": t("computerViewer.refreshDesktops"),
-        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": t("computerViewer.openANewDesktop"),
-        children: props.creating ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" })
-      }
-    ) : null
-  ] });
-}
-function ComputerSessionGroup(props) {
-  const t = useOpenGeniText();
-  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-fg-subtle"
-                )
-              }
-            ),
-            /* @__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(t, session),
-                " \xB7 ",
-                placementLabel(t, 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 t = useOpenGeniText();
-  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": t("computerViewer.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: t("computerViewer.screen") }),
-          screens.map((screen, index) => /* @__PURE__ */ jsx("option", { value: screen.id, children: screen.title || t("computerViewer.screenIndex", { index: 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" }),
-          " ",
-          t("computerViewer.fullDesktop")
-        ]
-      }
-    ) : null,
-    advancedTargets.length > 0 ? /* @__PURE__ */ jsxs("details", { ref: advancedRef, className: "shrink-0", children: [
-      /* @__PURE__ */ jsxs(
-        "summary",
-        {
-          "aria-label": t("computerViewer.advancedDesktopViews"),
-          title: t("computerViewer.advancedDesktopViews"),
-          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: t("computerViewer.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: t("computerViewer.appsAndWindows") }),
-        /* @__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" ? t("computerViewer.appControls") : t("computerViewer.windowView") })
-              ] }),
-              target.focused ? /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "size-1.5 shrink-0 rounded-full bg-og-status-running",
-                  "aria-label": t("computerViewer.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 t = useOpenGeniText();
-  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 ? t("computerViewer.chromeReconnectedOpenAFresh") : failed ? t("computerViewer.desktopNeedsAttention") : lifecycleLabel(t, props.session.lifecycle) }),
-    /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: generationLoss ? t("computerViewer.thisChromeProfileIsLive") : computerFailureMessage(t, props.session) ?? t("computerViewer.theDesktopIsBeingPrepared") }),
-    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 ? t("computerViewer.tryAgain") : t("computerViewer.checkAgain")
-        ]
-      }
-    ) : null
-  ] }) });
-}
-function ComputerViewport(props) {
-  const t = useOpenGeniText();
-  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 targetRef = useRef5(props.target);
-  const readClipboardRef = useRef5(props.onReadClipboard);
-  const errorRef = useRef5(props.onError);
-  const actionTailRef = useRef5(Promise.resolve());
-  const actionQueueEpochRef = useRef5(0);
-  const queuedTextRef = useRef5(null);
-  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;
-  targetRef.current = props.target;
-  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 || // CUA may activate within its allocated Linux desktop. This does not
-  // grant foreground input to an attached physical desktop.
-  props.allowForegroundInputWithinOwnedSeat || !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;
-    queuedTextRef.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, continuation) => {
-      const epoch = actionQueueEpochRef.current;
-      const plainText = action.type === "keyboard" && action.action === "type";
-      const queuedText = queuedTextRef.current;
-      if (plainText && !frame && !after && !continuation && queuedText?.epoch === epoch && queuedText.delivery.completion === actionTailRef.current && queuedText.action.value.length + action.value.length <= 1e6) {
-        queuedText.action.value += action.value;
-        return queuedText.delivery;
-      }
-      queuedTextRef.current = null;
-      const dispatch = actionRef.current;
-      const admittedTarget = targetRef.current;
-      const isCurrent = () => mountedRef.current && epoch === actionQueueEpochRef.current;
-      const operationId = crypto.randomUUID();
-      let markStarted;
-      const started = new Promise((resolve) => {
-        markStarted = resolve;
-      });
-      const previous = actionTailRef.current;
-      const ready = continuation && previous === continuation.completion ? continuation.started : previous.then(() => true);
-      const delivery = ready.then(async (firstStarted) => {
-        if (queuedTextRef.current?.action === action) queuedTextRef.current = null;
-        if (!firstStarted || !isCurrent()) {
-          markStarted(false);
-          return;
-        }
-        const pending = dispatch(action, frame, operationId);
-        markStarted(true);
-        const receipt = await pending;
-        const isCurrentResult = () => isCurrent() && !isStaleComputerActionResult(receipt);
-        if (!isCurrentResult()) return;
-        const observedTarget = receipt.observation?.target;
-        if (!admittedTarget || receipt.computerSessionId !== admittedTarget.computerSessionId || receipt.controllerGeneration !== admittedTarget.controllerGeneration || receipt.targetId !== admittedTarget.id || observedTarget && (observedTarget.computerSessionId !== admittedTarget.computerSessionId || observedTarget.controllerGeneration !== admittedTarget.controllerGeneration || observedTarget.id !== admittedTarget.id || observedTarget.targetGeneration !== admittedTarget.targetGeneration)) {
-          actionQueueEpochRef.current += 1;
-          clearBufferedInput();
-          return;
-        }
-        await after?.(isCurrentResult);
-      }).catch((cause) => {
-        markStarted(false);
-        if (!isCurrent() || isStaleComputerActionResult(cause)) return;
-        actionQueueEpochRef.current += 1;
-        clearBufferedInput();
-        errorRef.current(cause);
-      });
-      const completion = continuation ? Promise.all([previous, delivery]).then(() => void 0) : delivery;
-      actionTailRef.current = completion;
-      const queued = { operationId, started, completion };
-      if (plainText && !frame && !after && !continuation) {
-        queuedTextRef.current = { action, epoch, delivery: queued };
-      }
-      return queued;
-    },
-    [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;
-    if (!pending.pending) return;
-    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.pointerClickContinuation && 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 canvasRect = event.currentTarget.getBoundingClientRect();
-    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 && previous.pending === !props.pointerClickContinuation && (props.pointerClickContinuation ? Math.hypot(previous.clientX - event.clientX, previous.clientY - event.clientY) < 6 && previous.canvasRect.left === canvasRect.left && previous.canvasRect.top === canvasRect.top && previous.canvasRect.width === canvasRect.width && previous.canvasRect.height === canvasRect.height && sameComputerTarget(previous.frame, start.frame) && previous.frame.width === start.frame.width && previous.frame.height === start.frame.height : 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: props.pointerClickContinuation ? "click" : "double_click",
-          ...props.pointerClickContinuation ? { clickCount: 2 } : {},
-          ...previous.delivery ? { continuationOfOperationId: previous.delivery.operationId } : {},
-          x: to.x,
-          y: to.y
-        },
-        start.frame,
-        void 0,
-        previous.delivery ?? void 0
-      );
-      return;
-    }
-    flushPendingClick();
-    lastClickRef.current = {
-      at: now,
-      x: to.x,
-      y: to.y,
-      frame: start.frame,
-      clientX: event.clientX,
-      clientY: event.clientY,
-      canvasRect,
-      pending: !props.pointerClickContinuation,
-      delivery: null
-    };
-    if (props.pointerClickContinuation) {
-      const delivery = enqueue(
-        {
-          type: "pointer",
-          frameId: start.frame.frameId,
-          action: "click",
-          clickCount: 1,
-          x: to.x,
-          y: to.y
-        },
-        start.frame
-      );
-      if (lastClickRef.current) lastClickRef.current.delivery = delivery;
-      return;
-    }
-    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(t("computerViewer.desktopTextCouldNotBe"));
-      }
-    });
-  };
-  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(t, 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": t(
-          props.target?.kind === "app" ? "computerViewer.interactiveAppView" : props.target?.kind === "window" ? "computerViewer.interactiveWindowView" : props.target?.kind === "screen" ? "computerViewer.interactiveScreenView" : "computerViewer.interactiveDesktopView"
-        )
-      }
-    ),
-    /* @__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": t("computerViewer.desktopKeyboardInput"),
-        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" }),
-      " ",
-      t("computerViewer.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) ? t("computerViewer.backgroundViewUseAppControls") : !props.pointerInput && !props.keyboardInput ? t("computerViewer.viewOnlyMouseAndKeyboard") : props.keyboardInput ? t("computerViewer.keyboardOnlyMouseUnavailable") : t("computerViewer.mouseOnlyKeyboardUnavailable") }),
-      !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: t("computerViewer.bringToFront")
-        }
-      ) : null
-    ] }) : null
-  ] });
-}
-function assertExactComputerClipboard(t, clipboard, expected) {
-  if (clipboard.truncated || clipboard.text !== expected) {
-    throw new Error(t("computerViewer.desktopClipboardDidNotAccept"));
-  }
-}
-function ComputerViewportFallback(props) {
-  const t = useOpenGeniText();
-  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: t("computerViewer.machineLocked") }),
-      /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: t("computerViewer.liveFramesAndInputStay") })
-    ] }) });
-  }
-  const appControls = props.observation?.target.kind === "app";
-  const controlFailure = interactionControlFailureFromError(props.error);
-  const interactive = semanticControls(t, 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) ? t("computerViewer.chromeReconnectedOpenAFresh") : !props.inputAllowed ? t("computerViewer.viewOnly") : props.controlUnavailable ? t("computerViewer.desktopControlsUnavailable") : props.error ? t("computerViewer.liveViewDisconnected") : appControls ? t("computerViewer.appControls") : computerConnectionLabel(t, props.connectionState) })
-    ] }),
-    props.error ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-og-control leading-5 text-og-fg-muted", children: isAttachedChromeGenerationLossError(props.error) ? t("computerViewer.chromeReconnectedOpenAFresh2") : controlFailure?.message ?? props.error.message }) : null,
-    !props.inputAllowed ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-og-control leading-5 text-og-fg-muted", children: t("computerViewer.refreshToCheckDesktopControls") }) : 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: t("computerViewer.appControlsRemainAvailable") }),
-      /* @__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 og-link",
-        children: controlFailure?.retryable === false ? t("computerViewer.tryAgain") : t("computerViewer.reconnect")
-      }
-    ) : null
-  ] }) });
-}
-function ComputerSemanticPanel(props) {
-  const t = useOpenGeniText();
-  const nodes = semanticControls(t, 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" }),
-      " ",
-      t("computerViewer.appControls")
-    ] }),
-    !props.inputAllowed ? /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-og-control leading-5 text-og-fg-muted", children: t("computerViewer.viewOnlyRefreshToCheck") }) : props.controlUnavailable ? /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-og-control leading-5 text-og-fg-muted", children: t("computerViewer.reconnectToUseAppControls") }) : 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: t("computerViewer.thisViewHasNoAccessibility") }) : /* @__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 t = useOpenGeniText();
-  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": t("computerViewer.setName", {
-                  name: 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: t("computerViewer.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 || t("computerViewer.unnamedControl") })
-      ]
-    }
-  );
-}
-function ComputerStatusBar(props) {
-  const t = useOpenGeniText();
-  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-fg-subtle"
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx("span", { children: !props.inputAllowed ? t("computerViewer.viewOnly") : props.controlUnavailable ? t("computerViewer.controlsUnavailable") : props.target?.kind === "app" ? t("computerViewer.appControls") : props.connectionState === "live" ? t("computerViewer.live") : computerConnectionLabel(t, props.connectionState) }),
-    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: !props.inputAllowed ? t("computerViewer.refreshToCheckDesktopControls2") : props.controlUnavailable ? t("computerViewer.reconnectToUseDesktopInput") : screen ? t("computerViewer.fullScreenInputMayMove") : props.target?.kind === "app" ? props.session?.capabilities?.backgroundActions ? t("computerViewer.appControlsWorkInThe") : t("computerViewer.appControls") : props.session?.capabilities?.backgroundInput ? t("computerViewer.windowClicksAndTypingStay") : props.session?.capabilities?.backgroundActions ? t("computerViewer.windowAppControlsWorkIn") : props.target?.kind ?? t("computerViewer.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__ */ jsx(
-      "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: t("computerViewer.controlsControlcount", { controlCount: 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(t, 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(t, session) {
-  switch (session.failureCode) {
-    case "machine_locked":
-      return t("computerViewer.unlockTheConnectedMacThen");
-    case "controller_heartbeat_expired":
-    // The sandbox it ran in was lost or replaced.
-    case "placement_instance_lost":
-      return t("computerViewer.theDesktopConnectionWasLost");
-    case "controller_transition_expired":
-      return session.placement.kind === "attached_device" ? t("computerViewer.chromeReconnectedOpenAFresh2") : t("computerViewer.theDesktopConnectionExpiredOpen");
-    case "idle_released":
-      return t("computerViewer.theDesktopStoppedAfterIt");
-    case null:
-      return null;
-    default:
-      return t("computerViewer.theDesktopCouldNotBe");
-  }
-}
-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(t, intervention) {
-  switch (intervention.kind) {
-    case "manual_login":
-      return t("computerViewer.signInNeeded");
-    case "mfa":
-      return t("computerViewer.verificationNeeded");
-    case "external_action":
-    case "confirmation":
-      return t("computerViewer.actionNeeded");
-    case "other":
-      return t("computerViewer.desktopNeedsYourHelp");
-  }
-}
-function platformLabel(t, session) {
-  switch (session.platform) {
-    case "macos":
-      return t("computerViewer.mac");
-    case "linux":
-      return t("computerViewer.linux");
-    case "windows":
-      return t("computerViewer.windows");
-    default:
-      return t("computerViewer.desktop");
-  }
-}
-function placementLabel(t, session) {
-  switch (session.placement.kind) {
-    case "sandbox_group":
-      return t("computerViewer.agentSandbox");
-    case "connected_machine":
-      return t("computerViewer.connectedMachine");
-    case "attached_device":
-      return t("computerViewer.yourMachine");
-    case "external_provider":
-      return t("computerViewer.cloudDesktop");
-  }
-}
-function lifecycleLabel(t, lifecycle) {
-  switch (lifecycle) {
-    case "starting":
-      return t("computerViewer.openingDesktop");
-    case "suspending":
-      return t("computerViewer.pausingDesktop");
-    case "suspended":
-      return t("computerViewer.desktopPaused");
-    case "restoring":
-      return t("computerViewer.restoringDesktop");
-    case "ending":
-      return t("computerViewer.closingDesktop");
-    default:
-      return t("computerViewer.connectingToDesktop");
-  }
-}
-function computerConnectionLabel(t, state) {
-  switch (state) {
-    case "attaching":
-      return t("computerViewer.openingDesktopView");
-    case "connecting":
-      return t("computerViewer.connecting");
-    case "reconnecting":
-      return t("computerViewer.reconnecting");
-    case "error":
-      return t("computerViewer.disconnected");
-    default:
-      return t("computerViewer.waitingForDesktop");
-  }
-}
-
-export {
-  useComputerFrameStream,
-  useComputerSession,
-  useComputerSessions,
-  ComputerViewer,
-  computerKey
-};
-//# sourceMappingURL=chunk-IKJLSBUI.js.map