import type {
  ComputerAction,
  ComputerActionReceipt,
  ComputerClipboard,
  ComputerFrame,
  ComputerObservation,
  ComputerSession,
  ComputerTarget,
  InteractionIntervention,
  InteractionSemanticNode,
} from "@opengeni/sdk/interaction";
import { interactionControlFailureFromError } from "@opengeni/sdk/interaction";
import type { DesktopStreamCapability } from "@opengeni/sdk";
import {
  ChevronDownIcon,
  CircleAlertIcon,
  KeyboardIcon,
  LoaderCircleIcon,
  LockKeyholeIcon,
  MonitorIcon,
  MousePointer2Icon,
  PanelsTopLeftIcon,
  PlusIcon,
  RefreshCwIcon,
  RotateCcwIcon,
} from "lucide-react";
import {
  type ClipboardEvent,
  type CompositionEvent,
  type KeyboardEvent,
  type MouseEvent,
  type PointerEvent,
  type ReactNode,
  type WheelEvent,
  useCallback,
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import {
  type ComputerFrameWebSocketFactory,
  useComputerFrameStream,
} from "../hooks/use-computer-frame-stream";
import {
  computerActionReceiptError,
  isStaleComputerActionResult,
  useComputerSession,
} from "../hooks/use-computer-session";
import { useComputerInputPosture } from "../hooks/use-computer-input-posture";
import { useComputerSessions } from "../hooks/use-computer-sessions";
import { useInteractionInterventions } from "../hooks/use-interaction-interventions";
import { cn } from "../lib/cn";
import { copyTextToClipboard } from "../lib/clipboard";
import { isSourcePlacementChangedError } from "../lib/interaction-errors";
import type { EmbeddedComputerInteractionClientOverride } from "../session-context";
import { InteractionInterventionBanner } from "./interaction-intervention-banner";
import { DesktopViewer } from "./desktop-viewer";
import { useViewerMenuDismiss } from "./use-viewer-menu-dismiss";
import { useOpenGeniText, type OpenGeniText } from "../messages/runtime";

export type ComputerViewerNotification = { kind: "error" | "info"; message: string };

export type ComputerViewerProps = EmbeddedComputerInteractionClientOverride & {
  /** Selected Opengeni agent/session. Peer ComputerSessions remain visible. */
  sessionId: string;
  enabled?: boolean | undefined;
  className?: string | undefined;
  onNotify?: ((notification: ComputerViewerNotification) => void) | undefined;
  /** Tests/demos only. Production uses the browser's native WebSocket. */
  webSocketFactory?: ComputerFrameWebSocketFactory | undefined;
  renderEmpty?: ((create: () => void, creating: boolean) => ReactNode) | undefined;
  /** Host navigation request for one exact ComputerSession. */
  requestedComputerSessionId?: string | null | undefined;
  requestedComputerRequestId?: string | number | null | undefined;
  /** Restore and report the Desktop session selected in this task's dock. */
  initialComputerSessionId?: string | null | undefined;
  onComputerSessionIdChange?: ((computerSessionId: string | null) => void) | undefined;
};

type ComputerSelection = { sessionId: string; pinned: boolean } | null;
type PointerStart = { x: number; y: number; pointerId: number; frame: ComputerFrame };

/** Full ComputerSession surface: workspace discovery, peer switching, app/window/
 * screen navigation, semantic controls, exact-frame input, and live media. */
export function ComputerViewer({
  sessionId,
  enabled = true,
  className,
  onNotify,
  webSocketFactory,
  renderEmpty,
  requestedComputerSessionId,
  requestedComputerRequestId,
  initialComputerSessionId,
  onComputerSessionIdChange,
  ...override
}: ComputerViewerProps) {
  const t = useOpenGeniText();
  const registry = useComputerSessions({ ...override, sessionId, enabled });
  const createSession = registry.create;
  const refreshRegistry = registry.refresh;
  const liveRelevant = useMemo(
    () => registry.relevantSessions.filter((session) => isLiveComputer(session)),
    [registry.relevantSessions],
  );
  const connectedPlacementLoss = useMemo(
    () =>
      registry.relevantSessions.find(
        (session) =>
          session.lifecycle === "lost" &&
          session.failureCode === "source_placement_changed" &&
          session.placement.kind === "connected_machine",
      ) ?? null,
    [registry.relevantSessions],
  );
  const recentRelevantFailure = useMemo(
    () =>
      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 = useMemo(() => {
    const sessions = registry.sessions.filter((session) => isLiveComputer(session));
    return recentRelevantFailure ? [...sessions, recentRelevantFailure] : sessions;
  }, [recentRelevantFailure, registry.sessions]);
  const relevant = useMemo(
    () =>
      liveRelevant.length > 0 ? liveRelevant : recentRelevantFailure ? [recentRelevantFailure] : [],
    [liveRelevant, recentRelevantFailure],
  );
  const [selection, setSelection] = useState<ComputerSelection>(() =>
    initialComputerSessionId ? { sessionId: initialComputerSessionId, pinned: true } : null,
  );
  const selectComputerSession = useCallback(
    (next: ComputerSelection) => {
      setSelection(next);
      onComputerSessionIdChange?.(next?.sessionId ?? null);
    },
    [onComputerSessionIdChange],
  );
  const interventions = useInteractionInterventions({
    ...override,
    enabled,
    resourceKind: "computer_session",
  });
  const [creating, setCreating] = useState(false);
  const [createError, setCreateError] = useState<Error | null>(null);
  const [showControls, setShowControls] = useState(false);
  const previousSessionIdRef = useRef(sessionId);
  const handledRequestRef = useRef<string | null>(null);
  const seenInterventionIdsRef = useRef(new Set<string>());
  const createInFlightRef = useRef(false);
  const autoCreateSessionRef = useRef<string | null>(null);
  const emptyCatalogConfirmationRef = useRef<string | null>(null);
  const endedGenerationLossRef = useRef(new Set<string>());
  const recreatedPlacementLossRef = useRef(new Set<string>());
  const [suppressGenericCreate, setSuppressGenericCreate] = useState(false);
  const endStaleComputer = registry.end;
  useEffect(() => {
    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 = useCallback(
    (cause: unknown, fallback: string) => {
      if (isStaleComputerActionResult(cause)) return;
      onNotify?.({
        kind: "error",
        message: cause instanceof Error ? cause.message : fallback,
      });
    },
    [onNotify],
  );

  useEffect(() => {
    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]);

  useEffect(() => {
    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);
    // Peer computers remain one click away, but never become the implicit
    // computer for another agent. Otherwise opening a sandbox's Computer tab
    // can silently select—and send input to—a connected user's Mac.
    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 = useMemo(
    () => liveSessions.find((session) => session.id === selection?.sessionId) ?? null,
    [liveSessions, selection?.sessionId],
  );
  const interventionCounts = useMemo(
    () => countInterventions(interventions.interventions),
    [interventions.interventions],
  );
  const selectedInterventions = useMemo(
    () =>
      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,
  });
  useEffect(() => {
    setShowControls(computer.selectedTarget?.kind === "app");
  }, [sessionId, selection?.sessionId, computer.selectedTarget?.id, computer.selectedTarget?.kind]);
  useEffect(() => {
    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: 1_920,
      maxHeight: 1_200,
      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 = useRef({
    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;
  }
  // Keep a known denial while a fresh attachment is pending or a semantic-only
  // target has no stream. Only a fresh posture for this controller clears it.
  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;
  // RFB has one combined input switch; partial native input stays view-only.
  const rfbInputEnabled =
    rfbStream?.inputAllowed === true &&
    attachmentInputAllowed &&
    !machineLocked &&
    !controlUnavailable &&
    computer.session?.capabilities?.pointerInput === true &&
    computer.session?.capabilities?.keyboardInput === true;
  const rfbCapability = useMemo<DesktopStreamCapability | null>(() => {
    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 ?? 1_440, bounds?.height ?? 900],
      unredacted: true,
      requiresAcknowledgment: false,
      acknowledged: true,
      shared: false,
      sharedSessionIds: [],
      reason: null,
    };
  }, [computer.selectedTarget?.bounds, frames.attachment, rfbInputEnabled, rfbStream]);
  const currentIds = useMemo(() => new Set(relevant.map((session) => session.id)), [relevant]);

  useEffect(() => {
    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 = useCallback(
    (intervention: InteractionIntervention, outcome: "completed" | "dismissed") => {
      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 = useCallback(() => {
    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]);

  useEffect(() => {
    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,
  ]);

  useEffect(() => {
    // Once this task's Desktop has been observed, a later transient empty
    // registry snapshot must not create a second one. This can happen while the
    // lazy surface is disabled/re-enabled or while an invalidation refresh
    // briefly races the association projection. The existing Desktop remains
    // the task's authority; explicit New desktop is still available.
    if (relevant.length > 0) {
      autoCreateSessionRef.current = sessionId;
      emptyCatalogConfirmationRef.current = null;
    }
  }, [relevant.length, sessionId]);

  useEffect(() => {
    if (
      !enabled ||
      registry.loading ||
      registry.refreshing ||
      registry.error ||
      relevant.length > 0 ||
      suppressGenericCreate ||
      autoCreateSessionRef.current === sessionId
    ) {
      return;
    }
    // A lazy surface can momentarily publish an empty settled projection while
    // its initial catalog and a workspace invalidation cross. Confirm the empty
    // result with one authoritative refresh before creating anything. A real
    // empty catalog creates on the following render; an existing association
    // appears and cancels this path.
    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 = useCallback(
    async (
      action: ComputerAction,
      frame: ComputerFrame | null,
      operationId?: string,
    ): Promise<ComputerActionReceipt> => {
      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 = useCallback(
    (event: ClipboardEvent<HTMLDivElement>) => {
      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 = useCallback(
    (text: string): boolean => {
      if (!rfbInputEnabled || !rfbStream || computer.session?.capabilities?.clipboard !== true)
        return false;
      // Keep paste on the canonical ComputerSession action path. RFB
      // ClientCutText synchronization varies by server and can acknowledge a
      // local paste without ever updating the remote graphical seat. These two
      // awaited actions run against the exact selected ComputerSession/target.
      // Read-after-write is the causal readiness barrier on X11: clipboard
      // ownership is asynchronous, so a successful write response alone does
      // not prove that the graphical seat can already serve the selection.
      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 (
      <ComputerNotice
        icon={<LoaderCircleIcon className="size-4 animate-spin" />}
        text={t("computerViewer.findingWorkspaceDesktops")}
        {...(className ? { className } : {})}
      />
    );
  }
  if (liveSessions.length === 0) {
    if (hideGenericCreate) {
      return (
        <div className={cn("grid h-full place-items-center bg-og-bg p-6", className)}>
          <div className="max-w-sm text-center">
            <CircleAlertIcon className="mx-auto size-5 text-og-danger" />
            <p className="mt-3 text-og-menu font-medium text-og-fg">
              {t("computerViewer.chromeReconnectedOpenAFresh")}
            </p>
            <p className="mt-1 text-og-control leading-5 text-og-fg-muted">
              {t("computerViewer.thisChromeProfileIsLive")}
            </p>
          </div>
        </div>
      );
    }
    if (renderEmpty) return renderEmpty(createComputer, creating);
    const error = createError ?? registry.error;
    return (
      <div className={cn("grid h-full place-items-center bg-og-bg p-6", className)}>
        <div className="max-w-sm text-center">
          <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">
            {error ? (
              <CircleAlertIcon className="size-5 text-og-danger" />
            ) : (
              <LoaderCircleIcon className="size-5 animate-spin" />
            )}
          </span>
          <p className="mt-3 text-og-menu font-medium text-og-fg">
            {error ? t("computerViewer.desktopDidnTOpen") : t("computerViewer.openingDesktop")}
          </p>
          <p className="mt-1 text-og-control leading-5 text-og-fg-muted">
            {error?.message ?? t("computerViewer.preparingThisAgentSDesktop")}
          </p>
          {error ? (
            <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"
            >
              {creating || registry.refreshing ? (
                <LoaderCircleIcon className="size-3.5 animate-spin" />
              ) : (
                <RotateCcwIcon className="size-3.5" />
              )}
              {t("computerViewer.tryAgain")}
            </button>
          ) : null}
        </div>
      </div>
    );
  }

  return (
    <div
      className={cn(
        "@container/computer-viewer relative flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-og-bg",
        className,
      )}
    >
      <ComputerToolbar
        sessions={liveSessions}
        relevantSessionIds={currentIds}
        selectedSessionId={selection?.sessionId ?? null}
        creating={creating}
        refreshing={registry.refreshing || inputPosturePending}
        interventionCounts={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 ? undefined : createComputer}
        onRefresh={() => {
          if (appTarget) {
            appInputPosture.refresh();
          } else if (
            (connectionState === "error" || inputDenied) &&
            !generationLossSelected &&
            !generationLossFrames
          ) {
            frames.reconnect();
          }
          void Promise.all([refreshRegistry(), refreshComputer()]);
        }}
      />
      <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 ? (
        <ComputerUnselectedPanel
          peerCount={liveSessions.length}
          creating={creating}
          error={createError}
          generationLoss={suppressGenericCreate}
          onCreate={createComputer}
        />
      ) : !controllerReady ? (
        <ComputerLifecyclePanel
          session={selectedRegistrySession}
          creating={creating}
          onRefresh={registry.refresh}
          onRetry={createComputer}
        />
      ) : (
        <>
          <div className="flex min-h-0 flex-1 flex-col @xl/computer-viewer:flex-row">
            {rfbStream ? (
              <div className="relative min-h-0 flex-1 bg-black" onCopyCapture={copyFromRfb}>
                <DesktopViewer
                  capability={rfbCapability}
                  interactive={rfbInputEnabled}
                  showControlToggle={false}
                  webSocketProtocols={rfbStream.protocols}
                  onPasteText={pasteIntoRfb}
                  targetPlatform={computer.session?.platform ?? null}
                  className="h-full"
                />
                {!rfbInputEnabled ? (
                  <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">
                    {controlUnavailable ? (
                      <>
                        {t("computerViewer.desktopControlsUnavailable")}{" "}
                        <button
                          type="button"
                          onClick={reconnect}
                          className="pointer-events-auto ml-2 font-medium underline"
                        >
                          {t("computerViewer.reconnect")}
                        </button>
                      </>
                    ) : (
                      t("computerViewer.viewOnlyDirectInputUnavailable")
                    )}
                  </div>
                ) : null}
              </div>
            ) : (
              <ComputerViewport
                key={JSON.stringify([
                  selection?.sessionId,
                  computer.selectedTarget?.id,
                  computer.selectedTarget?.targetGeneration,
                  frames.attachment?.controllerGeneration,
                ])}
                frame={machineLocked ? null : displayedFrame}
                observation={computer.observation}
                target={computer.selectedTarget}
                machineLocked={machineLocked}
                controlUnavailable={controlUnavailable}
                inputAllowed={!inputDenied}
                connectionState={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 ? () => undefined : reconnect
                }
                onError={(cause) => notifyError(cause, t("computerViewer.desktopInputFailed"))}
              />
            )}
            {showControls ? (
              <ComputerSemanticPanel
                observation={computer.observation}
                mutating={computer.mutating || controlUnavailable || inputDenied}
                controlUnavailable={controlUnavailable}
                inputAllowed={!inputDenied}
                onAction={(action) =>
                  void perform(action, null).catch((cause) =>
                    notifyError(cause, t("computerViewer.desktopActionFailed")),
                  )
                }
              />
            ) : null}
          </div>
          <ComputerStatusBar
            session={computer.session}
            target={computer.selectedTarget}
            connectionState={connectionState}
            controlUnavailable={controlUnavailable}
            inputAllowed={!inputDenied}
            refreshing={registry.refreshing}
            showControls={showControls}
            controlCount={semanticControls(t, computer.observation).length}
            onToggleControls={() => setShowControls((current) => !current)}
          />
        </>
      )}
    </div>
  );
}

function ComputerUnselectedPanel(props: {
  peerCount: number;
  creating: boolean;
  error: Error | null;
  generationLoss: boolean;
  onCreate: () => void;
}) {
  const t = useOpenGeniText();
  return (
    <div className="grid min-h-0 flex-1 place-items-center bg-og-bg p-6 text-center">
      <div className="max-w-sm">
        <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">
          {props.error || props.generationLoss ? (
            <CircleAlertIcon className="size-4.5 text-og-danger" />
          ) : (
            <LoaderCircleIcon className="size-4.5 animate-spin" />
          )}
        </span>
        <p className="mt-3 text-og-menu font-medium text-og-fg">
          {props.generationLoss
            ? t("computerViewer.chromeReconnectedOpenAFresh")
            : props.error
              ? t("computerViewer.desktopDidnTOpen")
              : t("computerViewer.openingDesktop")}
        </p>
        <p className="mt-1 text-og-control leading-5 text-og-fg-muted">
          {props.generationLoss
            ? t("computerViewer.thisChromeProfileIsLive")
            : (props.error?.message ??
              (props.peerCount === 1
                ? t("computerViewer.preparingThisAgentSDesktop2")
                : t("computerViewer.preparingThisAgentSDesktop3", { peerCount: props.peerCount })))}
        </p>
        {props.error && !props.generationLoss ? (
          <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"
          >
            {props.creating ? (
              <LoaderCircleIcon className="size-3.5 animate-spin" />
            ) : (
              <RotateCcwIcon className="size-3.5" />
            )}
            {t("computerViewer.tryAgain")}
          </button>
        ) : null}
      </div>
    </div>
  );
}

function ComputerToolbar(props: {
  sessions: ComputerSession[];
  relevantSessionIds: Set<string>;
  selectedSessionId: string | null;
  creating: boolean;
  refreshing: boolean;
  interventionCounts: Map<string, number>;
  targets: ComputerTarget[];
  selectedTargetId: string | null;
  targetsLoading: boolean;
  onSelectTarget: (id: string) => void;
  onSelect: (id: string) => void;
  onFollow: () => void;
  onCreate?: (() => void) | undefined;
  onRefresh: () => void;
}) {
  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: boolean) => {
    detailsRef.current?.removeAttribute("open");
    if (restoreFocus) detailsRef.current?.querySelector("summary")?.focus();
  };
  const choose = (id: string, restoreFocus: boolean) => {
    props.onSelect(id);
    closeMenu(restoreFocus);
  };
  return (
    <div className="flex h-10 shrink-0 items-center gap-1.5 border-b border-og-border bg-og-surface-1 px-2">
      <details ref={detailsRef} className="min-w-0">
        <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">
          <MonitorIcon className="size-3.5 shrink-0 text-og-fg-muted" />
          <span className="truncate font-medium">
            {selected?.name === "Computer"
              ? t("computerViewer.desktop")
              : (selected?.name ?? t("computerViewer.desktop"))}
          </span>
          {(props.interventionCounts.get(selected?.id ?? "") ?? 0) > 0 ? (
            <span className="size-1.5 shrink-0 rounded-full bg-og-status-waiting" />
          ) : null}
          <ChevronDownIcon className="size-3 shrink-0 text-og-fg-subtle" />
        </summary>
        <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">
          <div className="min-h-0 max-h-96 overflow-y-auto overscroll-contain">
            <ComputerSessionGroup
              label={t("computerViewer.currentAgent")}
              sessions={current}
              selectedId={props.selectedSessionId}
              interventionCounts={props.interventionCounts}
              onSelect={choose}
            />
            <ComputerSessionGroup
              label={t("computerViewer.otherAgents")}
              sessions={others}
              selectedId={props.selectedSessionId}
              interventionCounts={props.interventionCounts}
              onSelect={choose}
            />
          </div>
          <div className="mt-1 flex shrink-0 gap-1 border-t border-og-border pt-1">
            {current.length > 0 ? (
              <MenuButton
                onClick={(event) => {
                  props.onFollow();
                  closeMenu(event.detail === 0);
                }}
              >
                {t("computerViewer.followAgent")}
              </MenuButton>
            ) : null}
            {props.onCreate ? (
              <MenuButton
                onClick={(event) => {
                  props.onCreate?.();
                  closeMenu(event.detail === 0);
                }}
                disabled={props.creating}
              >
                <PlusIcon className="size-3.5" /> {t("computerViewer.newDesktop")}
              </MenuButton>
            ) : null}
          </div>
        </div>
      </details>
      <span className="min-w-0 flex-1 truncate text-og-xs text-og-fg-subtle">
        {selected ? `${platformLabel(t, selected)} · ${placementLabel(t, selected)}` : ""}
      </span>
      <ComputerTargetPicker
        targets={props.targets}
        selectedTargetId={props.selectedTargetId}
        loading={props.targetsLoading}
        onSelect={props.onSelectTarget}
      />
      <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")}
      >
        <RefreshCwIcon className={cn("size-3.5", props.refreshing && "animate-spin")} />
      </button>
      {props.onCreate ? (
        <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")}
        >
          {props.creating ? (
            <LoaderCircleIcon className="size-3.5 animate-spin" />
          ) : (
            <PlusIcon className="size-3.5" />
          )}
        </button>
      ) : null}
    </div>
  );
}

function ComputerSessionGroup(props: {
  label: string;
  sessions: ComputerSession[];
  selectedId: string | null;
  interventionCounts: Map<string, number>;
  onSelect: (id: string, restoreFocus: boolean) => void;
}) {
  const t = useOpenGeniText();
  if (props.sessions.length === 0) return null;
  return (
    <div className="py-1">
      <p className="px-2 pb-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-fg-subtle">
        {props.label}
      </p>
      {props.sessions.map((session) => {
        const interventionCount = props.interventionCounts.get(session.id) ?? 0;
        return (
          <button
            key={session.id}
            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",
            )}
          >
            <span
              className={cn(
                "size-1.5 rounded-full",
                session.lifecycle === "active" ? "bg-og-status-running" : "bg-og-muted",
              )}
            />
            <span className="min-w-0 flex-1">
              <span className="block truncate text-og-control text-og-fg">{session.name}</span>
              <span className="block truncate text-og-xs text-og-fg-subtle">
                {platformLabel(t, session)} · {placementLabel(t, session)}
              </span>
            </span>
            {interventionCount > 0 ? (
              <span className="rounded-full bg-og-status-waiting/10 px-1.5 py-0.5 text-[10px] font-medium text-og-status-waiting">
                {interventionCount}
              </span>
            ) : null}
          </button>
        );
      })}
    </div>
  );
}

function MenuButton(props: {
  children: ReactNode;
  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
  disabled?: boolean;
}) {
  return (
    <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"
    >
      {props.children}
    </button>
  );
}

function ComputerTargetPicker(props: {
  targets: ComputerTarget[];
  selectedTargetId: string | null;
  loading: boolean;
  onSelect: (id: string) => void;
}) {
  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: string, restoreFocus = false) => {
    props.onSelect(id);
    if (advancedRef.current?.open) {
      advancedRef.current.removeAttribute("open");
      if (restoreFocus) advancedRef.current.querySelector("summary")?.focus();
    }
  };
  return (
    <>
      {screens.length > 1 ? (
        <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"
        >
          <option value="" disabled hidden>
            {t("computerViewer.screen")}
          </option>
          {screens.map((screen, index) => (
            <option key={screen.id} value={screen.id}>
              {screen.title || t("computerViewer.screenIndex", { index: index + 1 })}
            </option>
          ))}
        </select>
      ) : screens[0] && selected?.kind !== "screen" ? (
        <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"
        >
          <MonitorIcon className="size-3.5" /> {t("computerViewer.fullDesktop")}
        </button>
      ) : null}
      {advancedTargets.length > 0 ? (
        <details ref={advancedRef} className="shrink-0">
          <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"
          >
            <PanelsTopLeftIcon className="size-3.5" />
            <span className="hidden @sm/computer-viewer:inline">
              {t("computerViewer.advanced")}
            </span>
            <ChevronDownIcon className="size-3" />
          </summary>
          <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">
            <p className="shrink-0 px-2 py-1 text-og-xs text-og-fg-subtle">
              {t("computerViewer.appsAndWindows")}
            </p>
            <div className="min-h-0 max-h-80 overflow-y-auto overscroll-contain">
              {advancedTargets.map((target) => (
                <button
                  key={target.id}
                  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",
                  )}
                >
                  <span className="min-w-0 flex-1">
                    <span className="block truncate text-og-control text-og-fg">
                      {target.title || target.applicationId || target.kind}
                    </span>
                    <span className="block text-og-xs text-og-fg-subtle">
                      {target.kind === "app"
                        ? t("computerViewer.appControls")
                        : t("computerViewer.windowView")}
                    </span>
                  </span>
                  {target.focused ? (
                    <span
                      className="size-1.5 shrink-0 rounded-full bg-og-status-running"
                      aria-label={t("computerViewer.focused")}
                    />
                  ) : null}
                </button>
              ))}
            </div>
          </div>
        </details>
      ) : null}
      {props.loading ? (
        <LoaderCircleIcon className="size-3.5 shrink-0 animate-spin text-og-fg-muted" />
      ) : null}
    </>
  );
}

function isRenderableComputerView(target: ComputerTarget): boolean {
  if (target.kind === "screen") return true;
  if (target.kind !== "window" || !target.bounds) return false;
  // AX exposes applications and tiny utility/menu windows as valid semantic
  // targets. Keep those available to tools, but do not present them as visual
  // desktop tabs when they cannot form a useful live view.
  return target.bounds.width >= 160 && target.bounds.height >= 90;
}

function isComputerFrameTarget(target: ComputerTarget): boolean {
  return target.kind === "window" || target.kind === "screen";
}

function ComputerLifecyclePanel(props: {
  session: ComputerSession;
  creating: boolean;
  onRefresh: () => Promise<void>;
  onRetry: () => void;
}) {
  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 (
    <div className="grid min-h-0 flex-1 place-items-center bg-og-bg p-6">
      <div className="max-w-sm text-center">
        {failed ? (
          <CircleAlertIcon className="mx-auto size-5 text-og-danger" />
        ) : (
          <LoaderCircleIcon className="mx-auto size-5 animate-spin text-og-fg-muted" />
        )}
        <p className="mt-3 text-og-menu font-medium text-og-fg">
          {generationLoss
            ? t("computerViewer.chromeReconnectedOpenAFresh")
            : failed
              ? t("computerViewer.desktopNeedsAttention")
              : lifecycleLabel(t, props.session.lifecycle)}
        </p>
        <p className="mt-1 text-og-control leading-5 text-og-fg-muted">
          {generationLoss
            ? t("computerViewer.thisChromeProfileIsLive")
            : (computerFailureMessage(t, props.session) ??
              t("computerViewer.theDesktopIsBeingPrepared"))}
        </p>
        {failed && !generationLoss ? (
          <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"
          >
            {props.creating ? (
              <LoaderCircleIcon className="size-3.5 animate-spin" />
            ) : (
              <RotateCcwIcon className="size-3.5" />
            )}
            {retryCreatesSession ? t("computerViewer.tryAgain") : t("computerViewer.checkAgain")}
          </button>
        ) : null}
      </div>
    </div>
  );
}

type ComputerQueuedAction = {
  operationId: string;
  started: Promise<boolean>;
  completion: Promise<void>;
};

function ComputerViewport(props: {
  frame: ComputerFrame | null;
  observation: ComputerObservation | null;
  target: ComputerTarget | null;
  machineLocked: boolean;
  controlUnavailable: boolean;
  inputAllowed: boolean;
  connectionState: string;
  connectionError: Error | null;
  mutating: boolean;
  backgroundActions: boolean;
  backgroundInput: boolean;
  allowForegroundInputWithinOwnedSeat: boolean;
  clipboardEnabled: boolean;
  pointerInput: boolean;
  pointerClickContinuation: boolean;
  keyboardInput: boolean;
  onAction: (
    action: ComputerAction,
    frame: ComputerFrame | null,
    operationId?: string,
  ) => Promise<ComputerActionReceipt>;
  onReadClipboard: () => Promise<ComputerClipboard>;
  onReconnect: () => void;
  onError: (cause: unknown) => void;
}) {
  const t = useOpenGeniText();
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const inputRef = useRef<HTMLTextAreaElement | null>(null);
  const composingRef = useRef(false);
  const pointerStartRef = useRef<PointerStart | null>(null);
  const clickTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const lastClickRef = useRef<{
    at: number;
    x: number;
    y: number;
    frame: ComputerFrame;
    clientX: number;
    clientY: number;
    canvasRect: Pick<DOMRect, "left" | "top" | "width" | "height">;
    pending: boolean;
    delivery: ComputerQueuedAction | null;
  } | null>(null);
  const wheelRef = useRef<{
    x: number;
    y: number;
    deltaX: number;
    deltaY: number;
    frame: ComputerFrame;
    timer: ReturnType<typeof setTimeout> | null;
  } | null>(null);
  const pendingTextRef = useRef<{
    text: string;
    timer: ReturnType<typeof setTimeout>;
  } | null>(null);
  const actionRef = useRef(props.onAction);
  const targetRef = useRef(props.target);
  const readClipboardRef = useRef(props.onReadClipboard);
  const errorRef = useRef(props.onError);
  const actionTailRef = useRef<Promise<void>>(Promise.resolve());
  const actionQueueEpochRef = useRef(0);
  const queuedTextRef = useRef<{
    action: Extract<ComputerAction, { type: "keyboard" }>;
    epoch: number;
    delivery: ComputerQueuedAction;
  } | null>(null);
  const queuedFrameRef = useRef<ComputerFrame | null>(null);
  const currentFrameRef = useRef<ComputerFrame | null>(props.frame);
  const paintedFrameRef = useRef<ComputerFrame | null>(null);
  const [paintedFrame, setPaintedFrame] = useState<ComputerFrame | null>(null);
  const decodingFrameRef = useRef(false);
  const mountedRef = useRef(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 = useCallback(() => {
    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);
    }
    // The canvas is absolute, so fitting it cannot resize the observed dock.
    const observer = new ResizeObserver(fit);
    observer.observe(viewport);
    return () => observer.disconnect();
  }, []);

  const paintQueuedFrames = useCallback(() => {
    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: string | null = null;
          try {
            const blob = new Blob([frame.data.slice().buffer], { type: frame.mediaType });
            if (typeof createImageBitmap === "function") {
              const bitmap = await createImageBitmap(blob);
              try {
                const canvas = canvasRef.current;
                if (
                  mountedRef.current &&
                  canvas &&
                  currentFrameRef.current &&
                  sameComputerTarget(frame, currentFrameRef.current)
                ) {
                  paintCanvas(canvas, 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 = useCallback(
    (
      action: ComputerAction,
      frame: ComputerFrame | null,
      after?: (isCurrent: () => boolean) => Promise<void>,
      continuation?: ComputerQueuedAction,
    ) => {
      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 <= 1_000_000
      ) {
        // Only combine adjacent text that has not crossed the dispatch boundary.
        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!: (value: boolean) => void;
      const started = new Promise<boolean>((resolve) => {
        markStarted = resolve;
      });
      const previous = actionTailRef.current;
      // Only the real second click may start before its first HTTP receipt.
      // The controller queue and native causal proof still serialize delivery.
      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))
          ) {
            // Receipt projection can replace the target before React remounts us.
            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(() => undefined)
        : 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 = useCallback(
    (frame: ComputerFrame, clientX: number, clientY: number) =>
      computerPoint(canvasRef.current, frame, clientX, clientY),
    [],
  );

  const flushPendingText = useCallback(() => {
    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 = useCallback(() => {
    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 = useCallback(() => {
    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: PointerEvent<HTMLCanvasElement>) => {
    const frame = paintedFrameRef.current;
    if (
      !frame ||
      (!props.pointerClickContinuation && props.mutating) ||
      !rawInputEnabled ||
      event.button !== 0
    )
      return;
    // Preserve the keyboard sink's focus through the canvas pointer default action.
    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: PointerEvent<HTMLCanvasElement>) => {
    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 as const } : {}),
          ...(previous.delivery
            ? { continuationOfOperationId: previous.delivery.operationId }
            : {}),
          x: to.x,
          y: to.y,
        },
        start.frame,
        undefined,
        previous.delivery ?? undefined,
      );
      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: MouseEvent<HTMLCanvasElement>) => {
    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: WheelEvent<HTMLCanvasElement>) => {
    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: KeyboardEvent<HTMLTextAreaElement>) => {
    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: ClipboardEvent<HTMLTextAreaElement>) => {
    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: ClipboardEvent<HTMLTextAreaElement>) => {
    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: string, 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: CompositionEvent<HTMLTextAreaElement>) => {
    composingRef.current = false;
    input(event.currentTarget.value || event.data);
  };

  const showCanvas =
    props.frame !== null &&
    paintedFrame !== null &&
    sameComputerTarget(props.frame, paintedFrame) &&
    !props.machineLocked &&
    !streamFailed;
  return (
    <div className="relative min-h-0 flex-1 overflow-hidden bg-black">
      <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",
        )}
      />
      <textarea
        ref={inputRef}
        defaultValue=""
        onInput={(event) =>
          input(event.currentTarget.value, (event.nativeEvent as InputEvent).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 ? (
        <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 ? (
        <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">
          <LoaderCircleIcon className="size-3 animate-spin" /> {t("computerViewer.acting")}
        </div>
      ) : null}
      {showCanvas && (!rawInputEnabled || !props.pointerInput || !props.keyboardInput) ? (
        <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">
          <span>
            {!rawInputEnabled && (props.pointerInput || props.keyboardInput)
              ? t("computerViewer.backgroundViewUseAppControls")
              : !props.pointerInput && !props.keyboardInput
                ? t("computerViewer.viewOnlyMouseAndKeyboard")
                : props.keyboardInput
                  ? t("computerViewer.keyboardOnlyMouseUnavailable")
                  : t("computerViewer.mouseOnlyKeyboardUnavailable")}
          </span>
          {!rawInputEnabled && props.target && (props.pointerInput || props.keyboardInput) ? (
            <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"
            >
              {t("computerViewer.bringToFront")}
            </button>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}

function assertExactComputerClipboard(
  t: OpenGeniText,
  clipboard: ComputerClipboard,
  expected: string,
): void {
  if (clipboard.truncated || clipboard.text !== expected) {
    throw new Error(t("computerViewer.desktopClipboardDidNotAccept"));
  }
}

function ComputerViewportFallback(props: {
  observation: ComputerObservation | null;
  machineLocked: boolean;
  controlUnavailable: boolean;
  inputAllowed: boolean;
  connectionState: string;
  error: Error | null;
  onAction: (action: ComputerAction) => void;
  onReconnect: () => void;
}) {
  const t = useOpenGeniText();
  if (props.machineLocked) {
    return (
      <div className="absolute inset-0 grid place-items-center bg-og-bg p-6">
        <div className="max-w-sm text-center">
          <LockKeyholeIcon className="mx-auto size-6 text-og-fg-muted" />
          <p className="mt-3 text-og-menu font-medium text-og-fg">
            {t("computerViewer.machineLocked")}
          </p>
          <p className="mt-1 text-og-control leading-5 text-og-fg-muted">
            {t("computerViewer.liveFramesAndInputStay")}
          </p>
        </div>
      </div>
    );
  }
  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 (
    <div className="absolute inset-0 grid place-items-center bg-og-bg p-6">
      <div className="w-full max-w-md rounded-og-lg border border-og-border bg-og-surface-1 p-4 shadow-lg">
        <div className="flex items-center gap-2">
          {props.error ? (
            <CircleAlertIcon className="size-4 text-og-danger" />
          ) : appControls ? (
            <PanelsTopLeftIcon className="size-4 text-og-fg-muted" />
          ) : (
            <LoaderCircleIcon className="size-4 animate-spin text-og-fg-muted" />
          )}
          <p className="text-og-menu font-medium text-og-fg">
            {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)}
          </p>
        </div>
        {props.error ? (
          <p className="mt-2 text-og-control leading-5 text-og-fg-muted">
            {isAttachedChromeGenerationLossError(props.error)
              ? t("computerViewer.chromeReconnectedOpenAFresh2")
              : (controlFailure?.message ?? props.error.message)}
          </p>
        ) : null}
        {!props.inputAllowed ? (
          <p className="mt-2 text-og-control leading-5 text-og-fg-muted">
            {t("computerViewer.refreshToCheckDesktopControls")}
          </p>
        ) : null}
        {interactive.length > 0 && !props.controlUnavailable && props.inputAllowed ? (
          <div className="mt-3 border-t border-og-border pt-3">
            <p className="mb-2 text-og-xs text-og-fg-subtle">
              {t("computerViewer.appControlsRemainAvailable")}
            </p>
            <div className="flex flex-wrap gap-1.5">
              {interactive.map((node) => (
                <button
                  key={node.ref}
                  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"
                >
                  {node.name || node.role}
                </button>
              ))}
            </div>
          </div>
        ) : null}
        {props.error && !isAttachedChromeGenerationLossError(props.error) ? (
          <button
            type="button"
            onClick={props.onReconnect}
            className="mt-3 text-og-control font-medium og-link"
          >
            {controlFailure?.retryable === false
              ? t("computerViewer.tryAgain")
              : t("computerViewer.reconnect")}
          </button>
        ) : null}
      </div>
    </div>
  );
}

function ComputerSemanticPanel(props: {
  observation: ComputerObservation | null;
  mutating: boolean;
  controlUnavailable: boolean;
  inputAllowed: boolean;
  onAction: (action: ComputerAction) => void;
}) {
  const t = useOpenGeniText();
  const nodes = semanticControls(t, props.observation).slice(0, 100);
  return (
    <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">
      <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">
        <KeyboardIcon className="size-3" /> {t("computerViewer.appControls")}
      </div>
      {!props.inputAllowed ? (
        <p className="px-1 py-2 text-og-control leading-5 text-og-fg-muted">
          {t("computerViewer.viewOnlyRefreshToCheck")}
        </p>
      ) : props.controlUnavailable ? (
        <p className="px-1 py-2 text-og-control leading-5 text-og-fg-muted">
          {t("computerViewer.reconnectToUseAppControls")}
        </p>
      ) : null}
      {nodes.length === 0 ? (
        props.controlUnavailable ? null : (
          <p className="px-1 py-2 text-og-control leading-5 text-og-fg-muted">
            {t("computerViewer.thisViewHasNoAccessibility")}
          </p>
        )
      ) : (
        <div className="space-y-0.5">
          {nodes.map((node) => (
            <ComputerSemanticControl
              key={node.ref}
              node={node}
              mutating={props.mutating}
              onAction={props.onAction}
            />
          ))}
        </div>
      )}
    </aside>
  );
}

function ComputerSemanticControl(props: {
  node: InteractionSemanticNode;
  mutating: boolean;
  onAction: (action: ComputerAction) => void;
}) {
  const t = useOpenGeniText();
  const { node } = props;
  const editable = node.actions.includes("set_value");
  const action = semanticAction(node);
  const observedValue = semanticValue(node) ?? "";
  const [value, setValue] = useState(() => observedValue);

  useEffect(() => {
    setValue(observedValue);
  }, [node.ref, observedValue]);

  if (editable) {
    return (
      <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,
          });
        }}
      >
        <label className="block truncate text-[10px] uppercase text-og-fg-subtle">
          {node.name || node.identifier || node.role}
        </label>
        <div className="mt-1 flex gap-1">
          <input
            value={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,
            })}
          />
          <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"
          >
            {t("computerViewer.set")}
          </button>
        </div>
      </form>
    );
  }

  return (
    <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"
    >
      <span className="mt-0.5 text-[10px] uppercase text-og-fg-subtle">{node.role}</span>
      <span className="min-w-0 flex-1 truncate text-og-control text-og-fg">
        {node.name || semanticValue(node) || node.identifier || t("computerViewer.unnamedControl")}
      </span>
    </button>
  );
}

function ComputerStatusBar(props: {
  session: ComputerSession | null;
  target: ComputerTarget | null;
  connectionState: string;
  controlUnavailable: boolean;
  inputAllowed: boolean;
  refreshing: boolean;
  showControls: boolean;
  controlCount: number;
  onToggleControls: () => void;
}) {
  const t = useOpenGeniText();
  const screen = props.target?.kind === "screen";
  return (
    <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">
      <span
        className={cn(
          "size-1.5 rounded-full",
          props.connectionState === "live" ? "bg-og-status-running" : "bg-og-muted",
        )}
      />
      <span>
        {!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)}
      </span>
      <span className="min-w-0 flex-1 truncate">
        {!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"))}
      </span>
      {screen ? <MousePointer2Icon className="size-3" aria-hidden /> : null}
      {props.refreshing ? <LoaderCircleIcon className="size-3 animate-spin" /> : null}
      {props.controlCount > 0 || props.showControls ? (
        <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",
          )}
        >
          {t("computerViewer.controlsControlcount", { controlCount: props.controlCount })}
        </button>
      ) : null}
    </div>
  );
}

function ComputerNotice(props: { icon: ReactNode; text: string; className?: string }) {
  return (
    <div
      className={cn(
        "grid h-full place-items-center bg-og-bg text-og-control text-og-fg-muted",
        props.className,
      )}
    >
      <div className="flex items-center gap-2">
        {props.icon}
        {props.text}
      </div>
    </div>
  );
}

const structuralRoles = new Set([
  "frame",
  "panel",
  "section",
  "document",
  "document web",
  "static",
  "static text",
  "heading",
  "paragraph",
  "notification",
  "separator",
  "tool bar",
  "page tab list",
]);

function semanticControls(
  t: OpenGeniText,
  observation: ComputerObservation | null,
): InteractionSemanticNode[] {
  if (observation?.semantic?.kind !== "snapshot") return [];
  const result: InteractionSemanticNode[] = [];
  const visit = (node: InteractionSemanticNode) => {
    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: InteractionSemanticNode): ComputerAction | null {
  const invoke = ["invoke", "press", "click"].some((action) => node.actions.includes(action));
  if (invoke) {
    return {
      type: "semantic",
      locator: { kind: "ref", ref: node.ref },
      action: "invoke",
    };
  }
  // A row in the background-native controls panel must never become an
  // implicit foregrounding gesture. Focus remains available through the typed
  // SDK/tool action when the caller explicitly intends to take the shared seat.
  return null;
}

function semanticValue(node: InteractionSemanticNode): string | null {
  return typeof node.value === "string" ? node.value : null;
}

function paintCanvas(
  canvas: HTMLCanvasElement,
  image: CanvasImageSource,
  width: number,
  height: number,
): void {
  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: HTMLCanvasElement): void {
  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,
  );
  // Hidden docks retain their previous fit until their content box is visible.
  if (!Number.isFinite(scale) || scale <= 0) return;
  canvas.style.width = `${canvas.width * scale}px`;
  canvas.style.height = `${canvas.height * scale}px`;
}

function loadImage(url: string): Promise<HTMLImageElement> {
  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: HTMLCanvasElement | null,
  frame: ComputerFrame,
  clientX: number,
  clientY: number,
): { x: number; y: number } | null {
  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)),
  };
}

export function computerKey(
  event: Pick<
    KeyboardEvent<HTMLTextAreaElement>,
    "altKey" | "ctrlKey" | "key" | "metaKey" | "shiftKey"
  >,
): string | null {
  if (["Alt", "AltGraph", "Control", "Meta", "Shift"].includes(event.key)) return null;
  const special = 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: string[] = [];
  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: ComputerFrame, right: ComputerFrame): boolean {
  return left.frameId === right.frameId && sameComputerTarget(left, right);
}

function sameComputerTarget(left: ComputerFrame, right: ComputerFrame): boolean {
  return (
    left.computerSessionId === right.computerSessionId &&
    left.controllerGeneration === right.controllerGeneration &&
    left.targetId === right.targetId &&
    left.targetGeneration === right.targetGeneration
  );
}

function isLiveComputer(session: ComputerSession): boolean {
  return !["ending", "ended", "failed", "lost"].includes(session.lifecycle);
}

function computerFailureMessage(t: OpenGeniText, session: ComputerSession): string | null {
  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: ComputerSession): boolean {
  return (
    session.lifecycle === "lost" &&
    session.failureCode === "controller_transition_expired" &&
    session.placement.kind === "attached_device"
  );
}

function isAttachedChromeGenerationLossError(error: Error | null): boolean {
  if (!error) return false;
  return /placement instance changed|controller authority changed/i.test(error.message);
}

function countInterventions(
  interventions: readonly InteractionIntervention[],
): Map<string, number> {
  const counts = new Map<string, number>();
  for (const intervention of interventions) {
    counts.set(intervention.resourceId, (counts.get(intervention.resourceId) ?? 0) + 1);
  }
  return counts;
}

function interventionTitle(t: OpenGeniText, intervention: InteractionIntervention): string {
  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: OpenGeniText, session: ComputerSession): string {
  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: OpenGeniText, session: ComputerSession): string {
  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: OpenGeniText, lifecycle: ComputerSession["lifecycle"]): string {
  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: OpenGeniText, state: string): string {
  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");
  }
}