import type {
  AttachedBrowserBridge,
  AttachedBrowserDevice,
  BrowserAction,
  BrowserActionBatch,
  BrowserActionReceipt,
  BrowserDiagnosticBatch,
  BrowserDownload,
  BrowserDownloadSaveResponse,
  BrowserFrame,
  BrowserIdentity,
  BrowserObservation,
  BrowserRevision,
  BrowserSession,
  BrowserTarget,
  ComputerSession,
  InteractionPlacement,
  InteractionIntervention,
  InteractionSemanticNode,
  SiteAuthConnection,
} from "@opengeni/sdk/interaction";
import { interactionControlFailureFromError } from "@opengeni/sdk/interaction";
import {
  BugIcon,
  ArchiveIcon,
  ArrowLeftIcon,
  ArrowRightIcon,
  CheckIcon,
  ChevronDownIcon,
  CircleAlertIcon,
  DownloadIcon,
  FileCheck2Icon,
  Globe2Icon,
  LoaderCircleIcon,
  MonitorIcon,
  PlusIcon,
  RefreshCwIcon,
  RotateCcwIcon,
  SaveIcon,
  UserRoundIcon,
  XIcon,
  ZapIcon,
} from "lucide-react";
import {
  type FormEvent,
  type ClipboardEvent,
  type CompositionEvent,
  type KeyboardEvent,
  type MouseEvent,
  type PointerEvent,
  type ReactNode,
  type WheelEvent,
  useCallback,
  useEffect,
  useId,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import {
  useBrowserFrameStream,
  type BrowserFrameWebSocketFactory,
} from "../hooks/use-browser-frame-stream";
import { useAttachedBrowsers } from "../hooks/use-attached-browsers";
import { useBrowserIdentities } from "../hooks/use-browser-identities";
import { useBrowserDownloads } from "../hooks/use-browser-downloads";
import { useBrowserSession, type BrowserFrameInputFence } from "../hooks/use-browser-session";
import { useBrowserSessions } from "../hooks/use-browser-sessions";
import { useInteractionInterventions } from "../hooks/use-interaction-interventions";
import { useSiteAuthConnections } from "../hooks/use-site-auth-connections";
import { cn } from "../lib/cn";
import { copyTextToClipboard } from "../lib/clipboard";
import { formatBytes } from "../lib/format";
import {
  isInteractionControlUnavailable,
  isSourcePlacementChangedError,
} from "../lib/interaction-errors";
import { useClientConfigFlags } from "../hooks/use-client-config-flags";
import {
  type EmbeddedBrowserInteractionClientOverride,
  useEmbeddedBrowserInteraction,
} from "../session-context";
import { browserKey, HUMAN_BROWSER_HOME_URL, normalizeBrowserAddress } from "./browser-input";
import { InteractionInterventionBanner } from "./interaction-intervention-banner";
import { BrowserSelectControl } from "./browser-select-control";
import { useViewerMenuDismiss } from "./use-viewer-menu-dismiss";
import { useOpenGeniText, type OpenGeniText } from "../messages/runtime";

/** Auto-ending a lost attached-device browser: bounded retries for transient failures only. */
const STALE_BROWSER_END_MAX_ATTEMPTS = 3;
const STALE_BROWSER_END_RETRY_BASE_MS = 5_000;

/**
 * Delay before retrying an automatic end of a lost attached-device browser, or null to stop.
 * A refusal (4xx, e.g. 409 when the server will not end it) is never retried: re-sending it on
 * every registry refresh looped about one request per second on prod.
 */
export function staleBrowserEndRetryDelayMs(cause: unknown, failedAttempts: number): number | null {
  const status = (cause as { status?: unknown } | null)?.status;
  if (typeof status === "number" && status >= 400 && status < 500) return null;
  if (failedAttempts >= STALE_BROWSER_END_MAX_ATTEMPTS) return null;
  return STALE_BROWSER_END_RETRY_BASE_MS * 2 ** (failedAttempts - 1);
}

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

export type BrowserViewerProps = EmbeddedBrowserInteractionClientOverride & {
  /** The selected Opengeni agent/session. Peer BrowserSessions stay discoverable. */
  sessionId: string;
  enabled?: boolean | undefined;
  /** Whether the Browser tab is selected. Keeps the mounted media stream warm
   * while pausing semantic reads behind other dock tabs. */
  active?: boolean | undefined;
  className?: string | undefined;
  onNotify?: ((notification: BrowserViewerNotification) => void) | undefined;
  /** Tests/demos only. Production uses the browser's native WebSocket. */
  webSocketFactory?: BrowserFrameWebSocketFactory | undefined;
  renderEmpty?: ((create: () => void, creating: boolean) => ReactNode) | undefined;
  /** Optional host capability for placing a human-created headed browser inside
   * an exact ComputerSession. Browser-only embedders still create a headed
   * browser; they simply omit the linked desktop resource. */
  createLinkedComputer?:
    | ((
        name: string,
        placement?: InteractionPlacement,
      ) => Promise<Pick<ComputerSession, "id" | "placement">>)
    | undefined;
  /** Navigate to the exact linked ComputerSession; never a lookalike desktop. */
  onOpenComputer?: ((computerSessionId: string) => void) | undefined;
  /** Restore and report the BrowserSession selected in this task's dock. */
  initialBrowserSessionId?: string | null | undefined;
  onBrowserSessionIdChange?: ((browserSessionId: string | null) => void) | undefined;
  /** Host-owned install/setup surface for attaching an existing Chrome profile.
   * The machine bridge remains discoverable even when this URL is omitted. */
  browserExtensionSetupUrl?: string | undefined;
};

type BrowserSelection = { sessionId: string; pinned: boolean } | null;
type BrowserLaunchChoice =
  | { kind: "clean" }
  | { kind: "profile"; identityId: string; baseRevisionId?: string }
  | { kind: "attached"; device: AttachedBrowserDevice };
// ArrayBuffer is opaque to React development prop diagnostics; a Uint8Array
// exposes every image byte as an enumerable property retained in timing entries.
type BrowserViewportFrame = Omit<BrowserFrame, "data"> & { data: ArrayBuffer };

type PointerStart = {
  x: number;
  y: number;
  pointerId: number;
  frame: BrowserViewportFrame;
};
type BrowserResumeAttempt = {
  operationId: string;
  running: boolean;
  terminal: boolean;
  error: Error | null;
};
type BrowserDiagnosticsView = {
  browserSessionId: string;
  targetId: string;
  loading: boolean;
  batch: BrowserDiagnosticBatch | null;
  error: Error | null;
};

/**
 * Complete browser-native session surface: workspace discovery, agent relevance,
 * browser/tab switching, live frames, semantic fallback, direct human input,
 * address navigation, diagnostics, and reconnect. Closing it never closes the browser.
 */
export function BrowserViewer({
  sessionId,
  enabled = true,
  active = true,
  className,
  onNotify,
  webSocketFactory,
  renderEmpty,
  createLinkedComputer,
  onOpenComputer,
  initialBrowserSessionId,
  onBrowserSessionIdChange,
  browserExtensionSetupUrl,
  ...override
}: BrowserViewerProps) {
  const t = useOpenGeniText();
  const registry = useBrowserSessions({ ...override, sessionId, enabled });
  const attached = useAttachedBrowsers({ ...override, enabled });
  const { client: configClient } = useEmbeddedBrowserInteraction(override);
  // The deployment's own branded extension when it ships one.
  const browserExtensionName = useClientConfigFlags(configClient as never).browserExtension?.name;
  const onlineAttachedBridges = useMemo(
    () => attached.bridges.filter((bridge) => bridge.state === "online"),
    [attached.bridges],
  );
  const profiles = useBrowserIdentities({ ...override, enabled, includeArchived: true });
  const siteAuth = useSiteAuthConnections({
    ...override,
    enabled: enabled && profiles.identities.length > 0,
  });
  const createRegistryBrowser = registry.create;
  const refreshRegistry = registry.refresh;
  const loadProfileRevisions = profiles.revisions;
  const liveSessions = useMemo(
    () => registry.sessions.filter((session) => isLiveBrowser(session)),
    [registry.sessions],
  );
  const attachedGenerationLoss = useMemo(
    () => attachedChromeGenerationLoss(registry.sessions),
    [registry.sessions],
  );
  const endedGenerationLossRef = useRef(new Set<string>());
  const endStaleBrowserAttemptsRef = useRef(new Map<string, number>());
  const endStaleBrowser = registry.end;
  useEffect(() => {
    if (!enabled) return;
    for (const session of registry.sessions) {
      if (
        session.lifecycle !== "lost" ||
        session.failureCode !== "controller_transition_expired" ||
        session.placement.kind !== "attached_device"
      ) {
        continue;
      }
      if (endedGenerationLossRef.current.has(session.id)) continue;
      endedGenerationLossRef.current.add(session.id);
      void endStaleBrowser(session.id).catch((cause: unknown) => {
        const attempts = (endStaleBrowserAttemptsRef.current.get(session.id) ?? 0) + 1;
        endStaleBrowserAttemptsRef.current.set(session.id, attempts);
        const delay = staleBrowserEndRetryDelayMs(cause, attempts);
        if (delay === null) return;
        setTimeout(() => endedGenerationLossRef.current.delete(session.id), delay);
      });
    }
  }, [enabled, endStaleBrowser, registry.sessions]);
  const relevant = useMemo(
    () => registry.relevantSessions.filter((session) => isLiveBrowser(session)),
    [registry.relevantSessions],
  );
  const latestRelevantBrowser = registry.relevantSessions[0];
  const unavailableBrowser =
    latestRelevantBrowser?.lifecycle === "lost" || latestRelevantBrowser?.lifecycle === "failed"
      ? latestRelevantBrowser
      : undefined;
  const [selection, setSelection] = useState<BrowserSelection>(() =>
    initialBrowserSessionId ? { sessionId: initialBrowserSessionId, pinned: true } : null,
  );
  const selectBrowserSession = useCallback(
    (next: BrowserSelection) => {
      setSelection(next);
      onBrowserSessionIdChange?.(next?.sessionId ?? null);
    },
    [onBrowserSessionIdChange],
  );
  const interventions = useInteractionInterventions({
    ...override,
    enabled,
    resourceKind: "browser_session",
  });
  const [creating, setCreating] = useState(false);
  const [savingProfile, setSavingProfile] = useState(false);
  const [baseRevisionOrdinal, setBaseRevisionOrdinal] = useState<number | null>(null);
  const [profileHistory, setProfileHistory] = useState<{
    identityId: string;
    loading: boolean;
    revisions: BrowserRevision[];
  } | null>(null);
  const [resumeAttempt, setResumeAttempt] = useState<{
    sessionId: string;
    attempt: BrowserResumeAttempt;
  } | null>(null);
  const resumeAttemptsRef = useRef(new Map<string, BrowserResumeAttempt>());
  const previousSessionIdRef = useRef(sessionId);
  const seenInterventionIdsRef = useRef(new Set<string>());
  const diagnosticRequestRef = useRef(0);
  const viewportFocusHandoffRef = useRef<string | null>(null);
  const [diagnosticsView, setDiagnosticsView] = useState<BrowserDiagnosticsView | null>(null);

  const notifyError = useCallback(
    (cause: unknown, fallback: string) => {
      const message = cause instanceof Error ? cause.message : fallback;
      onNotify?.({ kind: "error", message });
    },
    [onNotify],
  );

  useEffect(() => {
    if (previousSessionIdRef.current !== sessionId) {
      previousSessionIdRef.current = sessionId;
      setSelection(
        initialBrowserSessionId ? { sessionId: initialBrowserSessionId, pinned: true } : null,
      );
    }
  }, [initialBrowserSessionId, sessionId]);

  useEffect(() => {
    if (!enabled || registry.loading) return;
    const selectedStillLive = liveSessions.some((session) => session.id === selection?.sessionId);
    // A manually selected workspace browser stays selected, but an unrelated
    // browser must never become the implicit browser for this agent. That made
    // a Modal session appear to own a connected Mac browser.
    if (selection?.pinned && selectedStillLive) return;
    const preferred = relevant[0] ?? null;
    if (!preferred) {
      if (selection) selectBrowserSession(null);
      return;
    }
    if (!selectedStillLive || !selection?.pinned) {
      if (selection?.sessionId !== preferred.id || selection.pinned) {
        selectBrowserSession({ sessionId: preferred.id, pinned: false });
      }
    }
  }, [enabled, liveSessions, registry.loading, relevant, selectBrowserSession, 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 resumeSession = registry.resume;
  const [hasLiveFrame, setHasLiveFrame] = useState(false);

  const wakeBrowser = useCallback(
    async (session: BrowserSession, retry = false): Promise<void> => {
      const current = resumeAttemptsRef.current.get(session.id);
      if (current?.running || (!retry && current)) return;
      const operationId = current && !current.terminal ? current.operationId : crypto.randomUUID();
      const attempt: BrowserResumeAttempt = {
        operationId,
        running: true,
        terminal: false,
        error: null,
      };
      resumeAttemptsRef.current.set(session.id, attempt);
      setResumeAttempt({ sessionId: session.id, attempt });
      try {
        const response = await resumeSession(session.id, operationId);
        if (response.operation.state !== "completed") {
          throw Object.assign(
            new Error(
              response.operation.error?.message ?? t("browserViewer.browserCouldNotReopen2"),
            ),
            { terminal: true },
          );
        }
        resumeAttemptsRef.current.delete(session.id);
        setResumeAttempt((visible) => (visible?.sessionId === session.id ? null : visible));
      } catch (cause) {
        const error = cause instanceof Error ? cause : new Error(String(cause));
        const failed: BrowserResumeAttempt = {
          operationId,
          running: false,
          terminal:
            typeof cause === "object" && cause !== null && "terminal" in cause
              ? cause.terminal === true
              : false,
          error,
        };
        resumeAttemptsRef.current.set(session.id, failed);
        setResumeAttempt({ sessionId: session.id, attempt: failed });
        notifyError(error, t("browserViewer.couldNotReopenThisBrowser"));
      }
    },
    [notifyError, resumeSession, t],
  );

  useEffect(() => {
    if (!selectedRegistrySession) return;
    if (selectedRegistrySession.lifecycle === "active") {
      resumeAttemptsRef.current.delete(selectedRegistrySession.id);
      setResumeAttempt((visible) =>
        visible?.sessionId === selectedRegistrySession.id ? null : visible,
      );
    }
  }, [selectedRegistrySession]);

  const browser = useBrowserSession({
    ...override,
    browserSessionId: selection?.sessionId ?? null,
    enabled: enabled && selection !== null && controllerReady,
    semanticObservationEnabled: active && !hasLiveFrame,
  });
  useEffect(() => {
    if (!isSourcePlacementChangedError(browser.error, "browser_session")) return;
    void refreshRegistry();
  }, [browser.error, refreshRegistry]);
  const downloads = useBrowserDownloads({
    ...override,
    browserSessionId: selection?.sessionId ?? null,
    enabled:
      enabled &&
      diagnosticsView !== null &&
      controllerReady &&
      browser.session?.capabilities.downloads === true,
  });
  const loadBrowserDiagnostics = browser.diagnostics;

  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("browserViewer.agentNotifiedContinuingWork")
                : t("browserViewer.requestCancelled"),
          });
        })
        .catch((cause) => notifyError(cause, t("browserViewer.couldNotUpdateTheBrowser")));
    },
    [interventions, notifyError, onNotify, t],
  );
  const frames = useBrowserFrameStream({
    ...override,
    browserSessionId: selection?.sessionId ?? null,
    targetId: browser.selectedTarget?.id ?? null,
    enabled:
      enabled &&
      selection !== null &&
      controllerReady &&
      browser.selectedTarget !== null &&
      browser.session?.capabilities.liveFrames === true,
    stream: { format: "jpeg", quality: 76, maxWidth: 1_920, maxHeight: 1_200 },
    ...(webSocketFactory ? { webSocketFactory } : {}),
  });
  const receivedFrame = frameMatchesSelectedTarget(
    frames.frame,
    browser.session,
    browser.selectedTarget,
  )
    ? frames.frame
    : null;
  const displayedFrame = useMemo<BrowserViewportFrame | null>(
    () => (receivedFrame ? { ...receivedFrame, data: receivedFrame.data.slice().buffer } : null),
    [receivedFrame],
  );
  const frameIsLive = frames.state === "live" && displayedFrame !== null;
  useEffect(() => {
    setHasLiveFrame(frameIsLive);
  }, [frameIsLive]);
  const supportsLiveFrames =
    (browser.session ?? selectedRegistrySession)?.capabilities.liveFrames === true;
  const controlUnavailable = isInteractionControlUnavailable(browser.error);
  const connectionError = controlUnavailable ? browser.error : (frames.error ?? browser.error);
  // A managed controller can reject a stale attachment while the same browser
  // remains healthy. Only extension-attached Chrome requires a new browser on
  // connection-generation loss; an unrelated lost Chrome must not poison the
  // selected managed browser's recovery UI.
  const selectedPlacement = (browser.session ?? selectedRegistrySession)?.placement;
  const selectedChromeGenerationLoss =
    selectedPlacement?.kind === "attached_device" &&
    isAttachedChromeGenerationLossError(connectionError);
  const replacementChromeDevice =
    selectedChromeGenerationLoss && selectedPlacement.kind === "attached_device"
      ? attached.devices.find((candidate) => candidate.id === selectedPlacement.deviceId)
      : null;
  const displayConnectionState =
    connectionError && (!frameIsLive || controlUnavailable)
      ? "error"
      : !browser.session
        ? "connecting"
        : supportsLiveFrames
          ? frames.state === "live" && !displayedFrame
            ? "connecting"
            : frames.state
          : "semantic";
  const selectedProfile = useMemo(
    () =>
      profiles.identities.find(
        (identity) =>
          identity.id === (browser.session?.identityId ?? selectedRegistrySession?.identityId),
      ) ?? null,
    [browser.session?.identityId, profiles.identities, selectedRegistrySession?.identityId],
  );
  const selectedProfileAuth = useMemo(
    () =>
      selectedProfile
        ? siteAuth.connections.filter(
            (connection) => connection.preferredIdentityId === selectedProfile.id,
          )
        : [],
    [selectedProfile, siteAuth.connections],
  );

  useEffect(() => {
    diagnosticRequestRef.current += 1;
    setDiagnosticsView(null);
  }, [browser.session?.id, browser.selectedTarget?.id]);

  const loadDiagnostics = useCallback(() => {
    const browserSessionId = browser.session?.id;
    const targetId = browser.selectedTarget?.id;
    if (!browserSessionId || !targetId) return;
    const requestId = diagnosticRequestRef.current + 1;
    diagnosticRequestRef.current = requestId;
    setDiagnosticsView((current) => ({
      browserSessionId,
      targetId,
      loading: true,
      batch:
        current?.browserSessionId === browserSessionId && current.targetId === targetId
          ? current.batch
          : null,
      error: null,
    }));
    void loadBrowserDiagnostics({ limit: 100 })
      .then((batch) => {
        if (diagnosticRequestRef.current !== requestId) return;
        setDiagnosticsView({ browserSessionId, targetId, loading: false, batch, error: null });
      })
      .catch((cause) => {
        if (diagnosticRequestRef.current !== requestId) return;
        setDiagnosticsView({
          browserSessionId,
          targetId,
          loading: false,
          batch: null,
          error: cause instanceof Error ? cause : new Error(String(cause)),
        });
      });
  }, [browser.selectedTarget?.id, browser.session?.id, loadBrowserDiagnostics]);

  const closeDiagnostics = useCallback(() => {
    diagnosticRequestRef.current += 1;
    setDiagnosticsView(null);
  }, []);

  const refreshDiagnostics = useCallback(() => {
    loadDiagnostics();
    if (browser.session?.capabilities.downloads) void downloads.refresh();
  }, [browser.session?.capabilities.downloads, downloads, loadDiagnostics]);

  const saveDownload = useCallback(
    async (
      downloadId: string,
      destinationPath: string,
      overwrite: boolean,
    ): Promise<BrowserDownloadSaveResponse> => {
      const response = await downloads.saveToWorkspace(downloadId, destinationPath, { overwrite });
      onNotify?.({
        kind: "info",
        message: t("browserViewer.filenameSavedToDestinationpath", {
          filename: response.download.filename,
          destinationPath: response.destinationPath,
        }),
      });
      return response;
    },
    [downloads, onNotify, t],
  );

  useEffect(() => {
    const identityId = browser.session?.identityId ?? selectedRegistrySession?.identityId;
    const revisionId = browser.session?.baseRevisionId ?? selectedRegistrySession?.baseRevisionId;
    if (!identityId) {
      setBaseRevisionOrdinal(null);
      setProfileHistory(null);
      return;
    }
    let disposed = false;
    setBaseRevisionOrdinal(null);
    setProfileHistory({ identityId, loading: true, revisions: [] });
    void loadProfileRevisions(identityId)
      .then((response) => {
        if (!disposed) {
          setBaseRevisionOrdinal(
            revisionId
              ? (response.revisions.find((revision) => revision.id === revisionId)?.ordinal ?? null)
              : null,
          );
          setProfileHistory({ identityId, loading: false, revisions: response.revisions });
        }
      })
      .catch(() => {
        if (!disposed) setProfileHistory({ identityId, loading: false, revisions: [] });
      });
    return () => {
      disposed = true;
    };
  }, [
    browser.session?.baseRevisionId,
    browser.session?.identityId,
    loadProfileRevisions,
    selectedRegistrySession?.baseRevisionId,
    selectedRegistrySession?.identityId,
  ]);

  const createBrowser = useCallback(
    (choice: BrowserLaunchChoice = { kind: "clean" }) => {
      if (creating) return;
      const identity =
        choice.kind === "profile"
          ? profiles.identities.find((candidate) => candidate.id === choice.identityId)
          : null;
      if (choice.kind === "profile" && (!identity || identity.status !== "active")) {
        onNotify?.({
          kind: "error",
          message: t("browserViewer.thisBrowserProfileIsNo"),
        });
        return;
      }
      const device = choice.kind === "attached" ? choice.device : null;
      const browserName =
        device?.profileLabel ??
        device?.name ??
        (identity ? `${identity.name} browser` : t("browserViewer.browser"));
      setCreating(true);
      void (async () => {
        let linkedComputer: Pick<ComputerSession, "id" | "placement"> | null = null;
        let computerViewUnavailable = false;
        if (createLinkedComputer) {
          try {
            linkedComputer = await createLinkedComputer(
              `${browserName} desktop`,
              device ? { kind: "attached_device", deviceId: device.id } : undefined,
            );
          } catch {
            // Browser control is independently useful on locked/headless placements.
            // A linked ComputerSession is an optional visual enhancement and must not
            // prevent the canonical BrowserSession from starting.
            computerViewUnavailable = true;
          }
        }
        const response = await createRegistryBrowser({
          sessionId,
          name: browserName,
          // Human-created browsers are always ordinary visual Chromium/Chrome.
          // Lightpanda remains an agent-only optimization requested explicitly
          // through browser_open; if an agent creates one it is still visible in
          // the shared BrowserSession switcher.
          headless: false,
          initialUrl: HUMAN_BROWSER_HOME_URL,
          ...(device
            ? {
                placement: {
                  kind: "attached_device" as const,
                  deviceId: device.id,
                },
              }
            : {}),
          ...(linkedComputer
            ? {
                linkedComputerSessionId: linkedComputer.id,
                placement: linkedComputer.placement,
              }
            : {}),
          ...(identity
            ? {
                identityId: identity.id,
                ...(choice.kind === "profile" && choice.baseRevisionId
                  ? { baseRevisionId: choice.baseRevisionId }
                  : {}),
              }
            : {}),
        });
        selectBrowserSession({ sessionId: response.session.id, pinned: true });
        if (computerViewUnavailable) {
          onNotify?.({
            kind: "info",
            message: t("browserViewer.browserOpenedDesktopViewIs"),
          });
        }
      })()
        .catch((cause) => notifyError(cause, t("browserViewer.couldNotOpenABrowser")))
        .finally(() => setCreating(false));
    },
    [
      createLinkedComputer,
      createRegistryBrowser,
      creating,
      notifyError,
      onNotify,
      selectBrowserSession,
      profiles.identities,
      sessionId,
      t,
    ],
  );

  const saveProfileVersion = useCallback(
    async (newProfileName?: string): Promise<boolean> => {
      const session = browser.session;
      if (!session || savingProfile || !session.capabilities.identityPublication) return false;
      setSavingProfile(true);
      try {
        let identity = selectedProfile;
        if (!identity) {
          const name = newProfileName?.trim() ?? "";
          if (!name) return false;
          // First-save is intentionally two-phase: the named identity exists
          // before its first immutable revision. If capture/upload failed after
          // that create, retry into the same empty identity instead of turning
          // the recoverable draft into a permanent name conflict.
          identity =
            profiles.identities.find(
              (candidate) =>
                candidate.status === "active" &&
                candidate.revisionCount === 0 &&
                candidate.name.localeCompare(name, undefined, { sensitivity: "base" }) === 0,
            ) ?? (await profiles.create({ name })).identity;
        }
        const response = await profiles.publish(session.id, {
          identityId: identity.id,
          expectedHeadGeneration: identity.headGeneration,
          advanceDefault: true,
        });
        setBaseRevisionOrdinal(response.revision.ordinal);
        setProfileHistory((current) => ({
          identityId: response.identity.id,
          loading: false,
          revisions:
            current?.identityId === response.identity.id
              ? [
                  ...current.revisions.filter((revision) => revision.id !== response.revision.id),
                  response.revision,
                ]
              : [response.revision],
        }));
        await Promise.all([browser.refresh(), registry.refresh()]);
        onNotify?.({
          kind: "info",
          message:
            response.outcome === "saved_as_default"
              ? t("browserViewer.nameVersionOrdinalSavedFor", {
                  name: response.identity.name,
                  ordinal: response.revision.ordinal,
                })
              : t("browserViewer.nameVersionOrdinalSavedAnother", {
                  name: response.identity.name,
                  ordinal: response.revision.ordinal,
                }),
        });
        return true;
      } catch (cause) {
        notifyError(cause, t("browserViewer.couldNotSaveThisBrowser"));
        return false;
      } finally {
        setSavingProfile(false);
      }
    },
    [browser, notifyError, onNotify, profiles, registry, savingProfile, selectedProfile, t],
  );

  const updateProfile = useCallback(
    async (
      identity: BrowserIdentity,
      update: { name?: string; status?: "active" | "archived"; defaultRevisionId?: string },
    ): Promise<boolean> => {
      if (savingProfile) return false;
      setSavingProfile(true);
      try {
        const response = await profiles.update(identity.id, {
          expectedVersion: identity.version,
          ...update,
        });
        if (update.defaultRevisionId) {
          const ordinal = profileHistory?.revisions.find(
            (revision) => revision.id === update.defaultRevisionId,
          )?.ordinal;
          onNotify?.({
            kind: "info",
            message: ordinal
              ? t("browserViewer.nameVersionOpensByDefault", {
                  name: response.identity.name,
                  ordinal,
                })
              : t("browserViewer.nameOpensByDefault", { name: response.identity.name }),
          });
        } else if (update.status === "archived") {
          onNotify?.({
            kind: "info",
            message: t("browserViewer.nameHiddenFromNewBrowsers", { name: response.identity.name }),
          });
        } else if (update.status === "active") {
          onNotify?.({ kind: "info", message: `${response.identity.name} restored.` });
        }
        return true;
      } catch (cause) {
        notifyError(cause, t("browserViewer.couldNotUpdateThisBrowser"));
        await profiles.refresh().catch(() => undefined);
        return false;
      } finally {
        setSavingProfile(false);
      }
    },
    [notifyError, onNotify, profileHistory?.revisions, profiles, savingProfile, t],
  );

  if (!enabled) return null;
  if (registry.loading && liveSessions.length === 0) {
    return (
      <BrowserNotice
        icon={<LoaderCircleIcon className="animate-spin" />}
        text={t("browserViewer.findingBrowsers")}
        {...(className ? { className } : {})}
      />
    );
  }
  if (liveSessions.length === 0) {
    if (renderEmpty && !unavailableBrowser)
      return <>{renderEmpty(() => createBrowser(), creating)}</>;
    return (
      <div
        className={cn("flex h-full min-h-0 items-center justify-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-md border border-og-border bg-og-surface-1 text-og-fg-muted">
            <Globe2Icon className="size-4.5" />
          </span>
          {unavailableBrowser && !attachedGenerationLoss ? (
            <BrowserUnavailableNotice session={unavailableBrowser} />
          ) : (
            <>
              <p className="mt-3 text-og-menu font-medium text-og-fg">
                {attachedGenerationLoss
                  ? t("browserViewer.chromeReconnectedOpenAFresh")
                  : t("browserViewer.noBrowserOpen")}
              </p>
              <p className="mt-1 text-og-control leading-5 text-og-fg-muted">
                {attachedGenerationLoss
                  ? t("browserViewer.thisChromeProfileIsLive")
                  : t("browserViewer.aBrowserAppearsHereWhen")}
              </p>
            </>
          )}
          <BrowserLaunchMenu
            attachedBridges={onlineAttachedBridges}
            attachedDevices={attached.devices}
            identities={profiles.identities}
            creating={creating}
            mutatingProfile={savingProfile}
            onCreate={createBrowser}
            onRestore={(identity) => updateProfile(identity, { status: "active" })}
            setupUrl={browserExtensionSetupUrl}
            extensionName={browserExtensionName}
            prominent
          />
          {registry.error ? (
            <p className="mt-3 text-og-control text-og-danger">{registry.error.message}</p>
          ) : null}
        </div>
      </div>
    );
  }

  return (
    <div
      className={cn("relative flex h-full min-h-0 flex-col overflow-hidden bg-og-bg", className)}
    >
      <BrowserToolbar
        sessions={liveSessions}
        relevantSessionIds={new Set(relevant.map((session) => session.id))}
        selectedSessionId={selection?.sessionId ?? null}
        identities={profiles.identities}
        attachedBridges={onlineAttachedBridges}
        attachedDevices={attached.devices}
        selectedProfile={selectedProfile}
        baseRevisionOrdinal={baseRevisionOrdinal}
        profileHistory={profileHistory}
        authConnections={selectedProfileAuth}
        creating={creating}
        savingProfile={savingProfile}
        refreshing={registry.refreshing || attached.refreshing}
        interventionCounts={interventionCounts}
        onSelect={(browserSessionId) =>
          selectBrowserSession({ sessionId: browserSessionId, pinned: true })
        }
        onFollow={() => {
          const preferred = relevant[0];
          if (preferred) selectBrowserSession({ sessionId: preferred.id, pinned: false });
        }}
        onCreate={createBrowser}
        onSaveProfile={saveProfileVersion}
        onUpdateProfile={updateProfile}
        onOpenProfileVersion={(identityId, baseRevisionId) =>
          createBrowser({ kind: "profile", identityId, baseRevisionId })
        }
        onRefresh={() => void Promise.all([registry.refresh(), attached.refresh()])}
        setupUrl={browserExtensionSetupUrl}
        extensionName={browserExtensionName}
      />
      <InteractionInterventionBanner
        interventions={selectedInterventions}
        activeTargetId={browser.selectedTarget?.id ?? null}
        mutating={interventions.mutating}
        onOpen={(intervention) =>
          void browser
            .selectTarget(intervention.targetId)
            .catch((cause) => notifyError(cause, t("browserViewer.couldNotOpenTheRequested")))
        }
        onResolve={resolveIntervention}
      />
      {!selectedRegistrySession ? (
        <BrowserUnselectedPanel
          unavailableBrowser={unavailableBrowser}
          peerCount={liveSessions.length}
          creating={creating}
          onCreate={() => createBrowser()}
        />
      ) : !controllerReady ? (
        <BrowserLifecyclePanel
          session={selectedRegistrySession}
          attempt={
            resumeAttempt?.sessionId === selectedRegistrySession.id ? resumeAttempt.attempt : null
          }
          onResume={() => void wakeBrowser(selectedRegistrySession, true)}
        />
      ) : (
        <>
          <BrowserTabs
            targets={browser.targets}
            selectedTargetId={browser.selectedTarget?.id ?? null}
            mutating={savingProfile}
            tabControl={browser.session?.capabilities.tabs === true}
            onSelect={(targetId) =>
              void browser
                .selectTarget(targetId)
                .catch((cause) => notifyError(cause, t("browserViewer.couldNotSwitchTabs")))
            }
            onClose={(targetId) =>
              void browser
                .closeTarget(targetId)
                .catch((cause) => notifyError(cause, t("browserViewer.couldNotCloseTheTab")))
            }
            onOpen={() =>
              void browser
                .openTarget(HUMAN_BROWSER_HOME_URL)
                .catch((cause) => notifyError(cause, t("browserViewer.couldNotOpenATab")))
            }
          />
          <BrowserAddressBar
            target={browser.selectedTarget}
            loading={browser.loading || browser.mutating || savingProfile}
            onNavigate={(url) =>
              void browser
                .act({ type: "navigate", url })
                .catch((cause) => notifyError(cause, t("browserViewer.couldNotNavigate")))
            }
            onHistory={async (direction) => {
              try {
                const action = { type: "history", direction } as const;
                if (receivedFrame) await browser.actFromFrame(action, receivedFrame);
                else {
                  if (!browser.observation)
                    throw new Error("The browser page is not ready for input.");
                  await browser.actFromObservation(action, browser.observation);
                }
              } catch (cause) {
                notifyError(
                  cause,
                  direction === "back"
                    ? t("browserViewer.couldNotGoBack")
                    : t("browserViewer.couldNotGoForward"),
                );
              }
            }}
            onReload={() => {
              const url = browser.selectedTarget?.url;
              if (url)
                void browser
                  .act({ type: "navigate", url })
                  .catch((cause) => notifyError(cause, t("browserViewer.couldNotReload")));
            }}
          />
          {browser.inputFailure ? (
            <div
              role="alert"
              aria-label={t("browserViewer.browserInputStatus")}
              className="flex shrink-0 items-center gap-2 border-t border-og-border bg-og-surface-1 px-3 py-2 text-og-xs"
            >
              <CircleAlertIcon className="size-4 shrink-0 text-og-status-failed" />
              <div className="min-w-0 flex-1">
                <span className="font-medium">
                  {browser.inputFailure.state === "failed"
                    ? t("browserViewer.browserInputFailed")
                    : t("browserViewer.inputResultUnknown")}
                </span>
                <p className="text-og-fg-subtle">
                  {browser.inputFailure.error?.message ??
                    t("browserViewer.inspectThePageBeforeContinuing")}
                </p>
              </div>
              <button
                type="button"
                onClick={() => void browser.refresh()}
                className="shrink-0 rounded border border-og-border px-2 py-1 transition hover:bg-og-surface-2"
              >
                {t("browserViewer.checkBrowser")}
              </button>
            </div>
          ) : null}
          <div className="relative flex min-h-0 min-w-0 flex-1 overflow-hidden">
            <BrowserViewport
              // A new control scope must discard every buffered gesture and queued action.
              key={JSON.stringify([
                selection?.sessionId,
                browser.selectedTarget?.id,
                browser.selectedTarget?.targetGeneration,
                browser.selectedTarget?.documentGeneration,
                frames.attachment?.controllerGeneration,
              ])}
              focusHandoffRef={viewportFocusHandoffRef}
              focusScope={JSON.stringify([
                selection?.sessionId,
                browser.selectedTarget?.id,
                browser.selectedTarget?.targetGeneration,
              ])}
              frame={displayedFrame}
              connectionState={displayConnectionState}
              supportsLiveFrames={supportsLiveFrames}
              connectionError={connectionError}
              controlUnavailable={controlUnavailable}
              observation={browser.observation}
              mutating={browser.mutating || savingProfile}
              activityLabel={savingProfile ? t("browserViewer.savingBrowserVersion") : undefined}
              clipboardEnabled={browser.session?.capabilities.clipboard === true}
              inputBatchAttachment={frames.attachment}
              onAction={async (action, frame) => {
                const focusedInput =
                  frame &&
                  action.type === "pointer" &&
                  action.action === "click" &&
                  (action.button === undefined || action.button === "left") &&
                  frames.attachment?.focusedInputObservations === true &&
                  frames.attachment.browserSessionId === frame.browserSessionId &&
                  frames.attachment.controllerGeneration === frame.controllerGeneration &&
                  frames.attachment.targetId === frame.targetId &&
                  Date.parse(frames.attachment.expiresAt) > Date.now();
                const receipt = frame
                  ? await browser.actFromFrame(
                      action,
                      frame,
                      undefined,
                      focusedInput ? "input" : "none",
                    )
                  : await browser.act(action);
                if (receipt.state !== "completed") {
                  throw new Error(
                    receipt.error?.message ?? t("browserViewer.browserInputDidNotComplete"),
                  );
                }
                return receipt;
              }}
              onReadClipboard={browser.readClipboard}
              onObserveForInput={browser.observeForInput}
              onSelectFromObservation={browser.actFromObservation}
              onReconnect={
                selectedChromeGenerationLoss
                  ? () => {
                      if (replacementChromeDevice) {
                        createBrowser({ kind: "attached", device: replacementChromeDevice });
                      }
                    }
                  : () => {
                      void browser.refresh();
                      frames.reconnect();
                    }
              }
              reconnectLabel={
                selectedChromeGenerationLoss && replacementChromeDevice
                  ? t("browserViewer.openAFreshConnectedChrome")
                  : undefined
              }
              reconnectMessage={
                selectedChromeGenerationLoss
                  ? t("browserViewer.chromeReconnectedOpenAFresh")
                  : undefined
              }
              onError={(cause) => notifyError(cause, t("browserViewer.browserInputFailed2"))}
            />
            {diagnosticsView ? (
              <BrowserDiagnosticsDrawer
                session={browser.session}
                profile={selectedProfile}
                target={browser.selectedTarget}
                observation={browser.observation}
                baseRevisionOrdinal={baseRevisionOrdinal}
                state={diagnosticsView}
                downloads={downloads.downloads}
                downloadsEnabled={browser.session?.capabilities.downloads === true}
                downloadsLoading={downloads.loading}
                downloadsRefreshing={downloads.refreshing}
                downloadsError={downloads.error}
                savingDownloadIds={downloads.savingDownloadIds}
                onSaveDownload={saveDownload}
                onRefreshDownloads={() => void downloads.refresh()}
                onRefresh={refreshDiagnostics}
                onClose={closeDiagnostics}
              />
            ) : null}
          </div>
          <BrowserStatusBar
            session={browser.session}
            profile={selectedProfile}
            target={browser.selectedTarget}
            observation={browser.observation}
            inputFailure={browser.inputFailure}
            connectionState={displayConnectionState}
            refreshing={registry.refreshing}
            diagnosticsOpen={diagnosticsView !== null}
            onOpenComputer={
              browser.session?.linkedComputerSessionId && onOpenComputer
                ? () => {
                    const computerSessionId = browser.session?.linkedComputerSessionId;
                    if (computerSessionId) onOpenComputer(computerSessionId);
                  }
                : undefined
            }
            onDiagnostics={diagnosticsView ? closeDiagnostics : loadDiagnostics}
          />
        </>
      )}
    </div>
  );
}

function BrowserLifecyclePanel(props: {
  session: BrowserSession;
  attempt: BrowserResumeAttempt | null;
  onResume: () => void;
}) {
  const t = useOpenGeniText();
  const failed = props.attempt?.error ?? null;
  const label = failed
    ? t("browserViewer.browserCouldNotReopen")
    : props.session.lifecycle === "suspending"
      ? t("browserViewer.savingBrowserState")
      : props.session.lifecycle === "restoring" || props.attempt?.running
        ? t("browserViewer.openingBrowser")
        : props.session.lifecycle === "starting"
          ? t("browserViewer.startingBrowser")
          : t("browserViewer.browserIsSleeping");
  const detail = failed
    ? failed.message
    : props.session.lifecycle === "suspended"
      ? t("browserViewer.itsPrivateStateIsSaved")
      : t("browserViewer.theBrowserWillReconnectHere");
  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">
          {failed ? (
            <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">{label}</p>
        <p className="mt-1 text-og-control leading-5 text-og-fg-muted">{detail}</p>
        {failed || (props.session.lifecycle === "suspended" && !props.attempt?.running) ? (
          <button
            type="button"
            onClick={props.onResume}
            className="mt-4 inline-flex h-8 items-center rounded-og-sm border border-og-primary-border bg-og-primary px-3 text-og-control font-medium text-og-primary-fg transition hover:bg-og-primary-hover"
          >
            {t("browserViewer.openBrowser")}
          </button>
        ) : null}
      </div>
    </div>
  );
}

function BrowserToolbar(props: {
  sessions: BrowserSession[];
  relevantSessionIds: Set<string>;
  selectedSessionId: string | null;
  attachedBridges: AttachedBrowserBridge[];
  attachedDevices: AttachedBrowserDevice[];
  identities: BrowserIdentity[];
  selectedProfile: BrowserIdentity | null;
  baseRevisionOrdinal: number | null;
  profileHistory: { identityId: string; loading: boolean; revisions: BrowserRevision[] } | null;
  authConnections: SiteAuthConnection[];
  creating: boolean;
  savingProfile: boolean;
  refreshing: boolean;
  interventionCounts: Map<string, number>;
  onSelect: (id: string) => void;
  onFollow: () => void;
  onCreate: (choice?: BrowserLaunchChoice) => void;
  onSaveProfile: (newProfileName?: string) => Promise<boolean>;
  onUpdateProfile: (
    identity: BrowserIdentity,
    update: { name?: string; status?: "active" | "archived"; defaultRevisionId?: string },
  ) => Promise<boolean>;
  onOpenProfileVersion: (identityId: string, baseRevisionId: string) => void;
  onRefresh: () => void;
  setupUrl?: string | undefined;
  extensionName?: string | undefined;
}) {
  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 choose = (id: string) => {
    props.onSelect(id);
    detailsRef.current?.removeAttribute("open");
  };
  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-52 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 [&::-webkit-details-marker]:hidden">
          <Globe2Icon className="size-3.5 shrink-0 text-og-fg-muted" />
          <span className="truncate font-medium">
            {selected?.name ?? t("browserViewer.browser")}
          </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">
            <BrowserSessionGroup
              label={t("browserViewer.currentAgent")}
              sessions={current}
              identities={props.identities}
              selectedId={props.selectedSessionId}
              interventionCounts={props.interventionCounts}
              onSelect={choose}
            />
            <BrowserSessionGroup
              label={t("browserViewer.workspaceBrowsers")}
              sessions={others}
              identities={props.identities}
              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={props.onFollow}>{t("browserViewer.followAgent")}</MenuButton>
            ) : null}
            <MenuButton onClick={() => props.onCreate()} disabled={props.creating}>
              <PlusIcon className="size-3.5" /> {t("browserViewer.newBrowser")}
            </MenuButton>
          </div>
        </div>
      </details>
      <span className="min-w-0 flex-1 truncate text-og-xs text-og-fg-subtle">
        {placementLabel(t, selected)}
      </span>
      <BrowserProfileMenu
        session={selected ?? null}
        identity={props.selectedProfile}
        baseRevisionOrdinal={props.baseRevisionOrdinal}
        history={props.profileHistory}
        authConnections={props.authConnections}
        saving={props.savingProfile}
        onSave={props.onSaveProfile}
        onUpdate={props.onUpdateProfile}
        onOpenVersion={props.onOpenProfileVersion}
      />
      <button
        type="button"
        onClick={props.onRefresh}
        className="grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg"
        aria-label={t("browserViewer.refreshBrowsers")}
      >
        <RefreshCwIcon className={cn("size-3.5", props.refreshing && "animate-spin")} />
      </button>
      <BrowserLaunchMenu
        attachedBridges={props.attachedBridges}
        attachedDevices={props.attachedDevices}
        identities={props.identities}
        creating={props.creating}
        mutatingProfile={props.savingProfile}
        onCreate={props.onCreate}
        onRestore={(identity) => props.onUpdateProfile(identity, { status: "active" })}
        setupUrl={props.setupUrl}
        extensionName={props.extensionName}
      />
    </div>
  );
}

function BrowserUnselectedPanel(props: {
  unavailableBrowser: BrowserSession | undefined;
  peerCount: number;
  creating: 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">
          <Globe2Icon className="size-4.5" />
        </span>
        {props.unavailableBrowser ? (
          <BrowserUnavailableNotice session={props.unavailableBrowser} />
        ) : (
          <p className="mt-3 text-og-menu font-medium text-og-fg">
            {t("browserViewer.noBrowserForThisAgent")}
          </p>
        )}
        <p className="mt-1 text-og-control leading-5 text-og-fg-muted">
          {props.peerCount === 1
            ? t("browserViewer.oneWorkspaceBrowserIsAvailable")
            : t("browserViewer.peercountWorkspaceBrowsersAreAvailable", {
                peerCount: props.peerCount,
              })}
        </p>
        <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-primary-border bg-og-primary px-3 text-og-control font-medium text-og-primary-fg transition hover:bg-og-primary-hover disabled:cursor-not-allowed disabled:opacity-50"
        >
          <PlusIcon className="size-3.5" />
          {props.creating ? t("browserViewer.opening") : t("browserViewer.newBrowser")}
        </button>
      </div>
    </div>
  );
}

function BrowserUnavailableNotice({ session }: { session: BrowserSession }) {
  const t = useOpenGeniText();
  const reason =
    session.failureCode === "provider_deadline_rotation"
      ? t("browserViewer.theComputerRunningItReached")
      : session.failureCode === "source_placement_changed"
        ? t("browserViewer.thisChatMovedToAnother")
        : session.failureCode === "idle_released"
          ? t("browserViewer.itStoppedAfterItWent")
          : session.lifecycle === "failed"
            ? t("browserViewer.itStoppedUnexpectedly")
            : t("browserViewer.theConnectionToItWas");
  return (
    <div role="status">
      <p className="mt-3 text-og-menu font-medium text-og-fg">
        {t("browserViewer.browserUnavailable")}
      </p>
      <p className="mt-1 break-words text-og-control leading-5 text-og-fg-muted">
        {t("browserViewer.nameReasonOpenANew", { name: session.name, reason })}
      </p>
    </div>
  );
}

function BrowserSessionGroup(props: {
  label: string;
  sessions: BrowserSession[];
  identities: BrowserIdentity[];
  selectedId: string | null;
  interventionCounts: Map<string, number>;
  onSelect: (id: string) => 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 identity = props.identities.find((candidate) => candidate.id === session.identityId);
        const interventionCount = props.interventionCounts.get(session.id) ?? 0;
        return (
          <button
            key={session.id}
            type="button"
            aria-label={`${session.name}${identity ? ` · ${identity.name}` : ""} · ${placementLabel(t, session)}`}
            aria-pressed={session.id === props.selectedId}
            onClick={() => props.onSelect(session.id)}
            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">
                {identity ? `${identity.name} · ` : ""}
                {placementLabel(t, session)}
              </span>
            </span>
            {interventionCount > 0 ? (
              <span className="rounded-full bg-og-status-waiting/12 px-1.5 py-0.5 text-[10px] font-medium text-og-status-waiting">
                {interventionCount}
              </span>
            ) : null}
          </button>
        );
      })}
    </div>
  );
}

function BrowserLaunchMenu(props: {
  attachedBridges: AttachedBrowserBridge[];
  attachedDevices: AttachedBrowserDevice[];
  identities: BrowserIdentity[];
  creating: boolean;
  mutatingProfile: boolean;
  onCreate: (choice?: BrowserLaunchChoice) => void;
  onRestore: (identity: BrowserIdentity) => Promise<boolean>;
  setupUrl?: string | undefined;
  extensionName?: string | undefined;
  prominent?: boolean;
}) {
  const t = useOpenGeniText();
  const detailsRef = useViewerMenuDismiss();
  const choose = (choice?: BrowserLaunchChoice) => {
    detailsRef.current?.removeAttribute("open");
    props.onCreate(choice);
  };
  const restore = async (identity: BrowserIdentity) => {
    if (await props.onRestore(identity)) detailsRef.current?.removeAttribute("open");
  };
  const busy = props.creating || props.mutatingProfile;
  const activeIdentities = props.identities.filter((identity) => identity.status === "active");
  const archivedIdentities = props.identities.filter((identity) => identity.status === "archived");
  return (
    <details ref={detailsRef} className={cn(props.prominent && "mt-4 inline-block")}>
      <summary
        onClick={(event) => {
          if (busy) event.preventDefault();
        }}
        className={cn(
          "cursor-pointer list-none items-center justify-center gap-1.5 text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg [&::-webkit-details-marker]:hidden",
          props.prominent
            ? "inline-flex h-8 rounded-og-sm border border-og-border bg-og-surface-1 px-3 text-og-control font-medium text-og-fg"
            : "grid size-7 place-items-center rounded-og-sm",
          busy && "pointer-events-none opacity-50",
        )}
        aria-label={t("browserViewer.newBrowser")}
      >
        {busy ? (
          <LoaderCircleIcon className="size-3.5 animate-spin" />
        ) : (
          <PlusIcon className="size-3.5" />
        )}
        {props.prominent ? t("browserViewer.newBrowser") : null}
        {props.prominent ? <ChevronDownIcon className="size-3" /> : null}
      </summary>
      <div
        className={cn(
          "absolute z-40 max-h-[calc(100%-3rem)] w-72 max-w-[calc(100%-1rem)] overflow-y-auto rounded-og-md border border-og-border bg-og-surface-1 p-1 text-left shadow-xl",
          props.prominent ? "left-1/2 top-2 -translate-x-1/2" : "right-2 top-10",
        )}
      >
        {props.attachedDevices.length > 0 || props.attachedBridges.length > 0 ? (
          <div className="pb-1">
            <p className="px-2 pb-1 pt-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-fg-subtle">
              {t("browserViewer.connectedChrome")}
            </p>
            {props.attachedDevices.map((device) => (
              <button
                key={device.id}
                type="button"
                onClick={() => choose({ kind: "attached", device })}
                className="flex w-full items-center gap-2 rounded-og-sm px-2 py-2 text-left transition hover:bg-og-surface-2"
              >
                <MonitorIcon className="size-3.5 shrink-0 text-og-fg-muted" />
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-og-control text-og-fg">
                    {device.profileLabel ?? device.name}
                  </span>
                  <span className="block truncate text-og-xs text-og-fg-subtle">
                    {t("browserViewer.openTabs", {
                      browserName: device.browserName,
                      count: device.tabCount,
                    })}
                  </span>
                </span>
                <span className="size-1.5 shrink-0 rounded-full bg-og-status-running" />
              </button>
            ))}
            {props.attachedBridges.length > 0 ? (
              props.setupUrl ? (
                <a
                  href={props.setupUrl}
                  target="_blank"
                  rel="noreferrer"
                  onClick={() => detailsRef.current?.removeAttribute("open")}
                  className="flex w-full items-center gap-2 rounded-og-sm px-2 py-2 text-left transition hover:bg-og-surface-2"
                >
                  <PlusIcon className="size-3.5 shrink-0 text-og-fg-muted" />
                  <span className="min-w-0 flex-1">
                    <span className="block truncate text-og-control text-og-fg">
                      {props.attachedDevices.length > 0
                        ? t("browserViewer.connectAnotherChromeProfile")
                        : t("browserViewer.connectThisChromeProfile")}
                    </span>
                    <span className="block truncate text-og-xs text-og-fg-subtle">
                      {t("browserViewer.machineConnectedChromeExtensionMissing")}
                    </span>
                  </span>
                </a>
              ) : (
                <div className="flex w-full items-center gap-2 px-2 py-2 text-left">
                  <MonitorIcon className="size-3.5 shrink-0 text-og-fg-muted" />
                  <span className="min-w-0 flex-1">
                    <span className="block truncate text-og-control text-og-fg">
                      {t("browserViewer.chromeConnectionReady")}
                    </span>
                    <span className="block text-og-xs leading-4 text-og-fg-subtle">
                      {t("browserViewer.installTheOpengeniBrowserExtension", {
                        extensionName: props.extensionName ?? "Opengeni Browser",
                      })}
                    </span>
                  </span>
                </div>
              )
            ) : null}
          </div>
        ) : null}
        <p
          className={cn(
            "px-2 pb-1 pt-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-fg-subtle",
            (props.attachedDevices.length > 0 || props.attachedBridges.length > 0) &&
              "border-t border-og-border",
          )}
        >
          {t("browserViewer.openIsolatedBrowser")}
        </p>
        <button
          type="button"
          onClick={() => choose({ kind: "clean" })}
          className="flex w-full items-center gap-2 rounded-og-sm px-2 py-2 text-left transition hover:bg-og-surface-2"
        >
          <Globe2Icon className="size-3.5 text-og-fg-muted" />
          <span>
            <span className="block text-og-control text-og-fg">
              {t("browserViewer.freshBrowser")}
            </span>
            <span className="block text-og-xs text-og-fg-subtle">
              {t("browserViewer.visualBrowserNoSavedState")}
            </span>
          </span>
        </button>
        {activeIdentities.length > 0 ? (
          <div className="mt-1 border-t border-og-border pt-1">
            {activeIdentities.map((identity) => (
              <button
                key={identity.id}
                type="button"
                onClick={() => choose({ kind: "profile", identityId: identity.id })}
                className="flex w-full items-center gap-2 rounded-og-sm px-2 py-2 text-left transition hover:bg-og-surface-2"
              >
                <UserRoundIcon className="size-3.5 text-og-fg-muted" />
                <span className="min-w-0">
                  <span className="block truncate text-og-control text-og-fg">{identity.name}</span>
                  <span className="block text-og-xs text-og-fg-subtle">
                    {identity.defaultRevisionId
                      ? t("browserViewer.savedVersions", { count: identity.revisionCount })
                      : t("browserViewer.readyForFirstSignIn")}
                  </span>
                </span>
              </button>
            ))}
          </div>
        ) : null}
        {archivedIdentities.length > 0 ? (
          <details className="mt-1 border-t border-og-border pt-1">
            <summary className="flex cursor-pointer list-none items-center gap-1.5 rounded-og-sm px-2 py-1.5 text-og-xs text-og-fg-subtle transition hover:bg-og-surface-2 hover:text-og-fg [&::-webkit-details-marker]:hidden">
              <ArchiveIcon className="size-3" />{" "}
              {t("browserViewer.hiddenProfilesLength", { length: archivedIdentities.length })}
              <ChevronDownIcon className="ml-auto size-3" />
            </summary>
            {archivedIdentities.map((identity) => (
              <button
                key={identity.id}
                type="button"
                disabled={busy}
                onClick={() => void restore(identity)}
                className="flex w-full items-center gap-2 rounded-og-sm px-2 py-2 text-left transition hover:bg-og-surface-2 disabled:opacity-50"
              >
                <RotateCcwIcon className="size-3.5 text-og-fg-muted" />
                <span className="min-w-0 flex-1 truncate text-og-control text-og-fg">
                  {t("browserViewer.restoreName", { name: identity.name })}
                </span>
              </button>
            ))}
          </details>
        ) : null}
      </div>
    </details>
  );
}

function BrowserProfileMenu(props: {
  session: BrowserSession | null;
  identity: BrowserIdentity | null;
  baseRevisionOrdinal: number | null;
  history: { identityId: string; loading: boolean; revisions: BrowserRevision[] } | null;
  authConnections: SiteAuthConnection[];
  saving: boolean;
  onSave: (newProfileName?: string) => Promise<boolean>;
  onUpdate: (
    identity: BrowserIdentity,
    update: { name?: string; status?: "active" | "archived"; defaultRevisionId?: string },
  ) => Promise<boolean>;
  onOpenVersion: (identityId: string, baseRevisionId: string) => void;
}) {
  const t = useOpenGeniText();
  const detailsRef = useViewerMenuDismiss();
  const nameInputId = useId();
  const [name, setName] = useState("");
  const attached = props.session?.placement.kind === "attached_device";
  const canSave =
    (props.session?.capabilities.identityPublication ?? false) &&
    props.identity?.status !== "archived";
  const revisions =
    props.identity && props.history?.identityId === props.identity.id
      ? [...props.history.revisions].sort((left, right) => right.ordinal - left.ordinal)
      : [];
  const save = async (newProfileName?: string) => {
    if (await props.onSave(newProfileName)) {
      setName("");
      detailsRef.current?.removeAttribute("open");
    }
  };
  const openVersion = (identityId: string, baseRevisionId: string) => {
    detailsRef.current?.removeAttribute("open");
    props.onOpenVersion(identityId, baseRevisionId);
  };
  const versionLabel = attached
    ? "live"
    : props.identity
      ? props.baseRevisionOrdinal
        ? `v${props.baseRevisionOrdinal}`
        : props.session?.baseRevisionId
          ? "saved"
          : "unsaved"
      : "temporary";
  return (
    <details ref={detailsRef} className="min-w-0">
      <summary className="flex h-7 max-w-40 cursor-pointer list-none items-center gap-1.5 rounded-og-sm px-2 text-og-xs text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg [&::-webkit-details-marker]:hidden">
        {props.saving ? (
          <LoaderCircleIcon className="size-3 animate-spin" />
        ) : attached ? (
          <MonitorIcon className="size-3" />
        ) : (
          <UserRoundIcon className="size-3" />
        )}
        <span className="truncate">
          {attached ? props.session?.name : (props.identity?.name ?? t("browserViewer.temporary"))}
        </span>
        {attached || props.identity ? (
          <span className="shrink-0 text-og-fg-subtle">· {versionLabel}</span>
        ) : null}
        <ChevronDownIcon className="size-3 shrink-0 text-og-fg-subtle" />
      </summary>
      <div className="absolute right-2 top-10 z-40 max-h-[calc(100%-3rem)] w-72 max-w-[calc(100%-1rem)] overflow-y-auto rounded-og-md border border-og-border bg-og-surface-1 p-3 shadow-xl">
        <div className="flex items-start gap-2">
          <span className="grid size-7 shrink-0 place-items-center rounded-og-sm bg-og-surface-2 text-og-fg-muted">
            {attached ? (
              <MonitorIcon className="size-3.5" />
            ) : (
              <UserRoundIcon className="size-3.5" />
            )}
          </span>
          <div className="min-w-0">
            <p className="truncate text-og-control font-medium text-og-fg">
              {attached
                ? props.session?.name
                : (props.identity?.name ?? t("browserViewer.temporaryBrowser"))}
            </p>
            <p className="mt-0.5 text-og-xs leading-4 text-og-fg-subtle">
              {attached
                ? t("browserViewer.thisSessionDrivesTheExisting")
                : props.identity?.status === "archived"
                  ? t("browserViewer.hiddenFromNewBrowsersThis")
                  : props.identity
                    ? props.baseRevisionOrdinal
                      ? t("browserViewer.startedFromVersionBaserevisionordinal", {
                          baseRevisionOrdinal: props.baseRevisionOrdinal,
                        })
                      : t("browserViewer.notSavedYet")
                    : t("browserViewer.thisBrowserIsNotReusable")}
            </p>
          </div>
        </div>
        {props.identity && revisions.length > 0 ? (
          <div className="mt-3 border-t border-og-border pt-2">
            <p className="px-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-fg-subtle">
              {t("browserViewer.savedVersions2")}
            </p>
            <div className="mt-1 max-h-40 overflow-y-auto">
              {revisions.map((revision) => {
                const isDefault = revision.id === props.identity?.defaultRevisionId;
                const isCurrent = revision.ordinal === props.baseRevisionOrdinal;
                const materialization = revisionMaterializationSummary(t, revision);
                return (
                  <div
                    key={revision.id}
                    className="flex w-full items-center gap-1 rounded-og-sm transition hover:bg-og-surface-2"
                  >
                    <button
                      type="button"
                      disabled={props.saving || props.identity?.status === "archived"}
                      aria-label={t("browserViewer.openNameVersionOrdinal", {
                        name: props.identity!.name,
                        ordinal: revision.ordinal,
                      })}
                      onClick={() => openVersion(props.identity!.id, revision.id)}
                      className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5 text-left disabled:opacity-50"
                    >
                      <span className="grid size-4 place-items-center text-og-fg-muted">
                        {isCurrent ? <CheckIcon className="size-3.5 text-og-accent" /> : null}
                      </span>
                      <span className="min-w-0 flex-1">
                        <span className="block text-og-control text-og-fg">
                          {t("browserViewer.versionOrdinal", { ordinal: revision.ordinal })}
                        </span>
                        <span className="block truncate text-[10px] text-og-fg-subtle">
                          {materialization.label}
                        </span>
                      </span>
                      {isCurrent ? (
                        <span className="text-[10px] text-og-fg-subtle">
                          {t("browserViewer.current")}
                        </span>
                      ) : null}
                    </button>
                    <button
                      type="button"
                      disabled={isDefault || props.saving || props.identity?.status === "archived"}
                      aria-label={
                        isDefault
                          ? t("browserViewer.nameVersionOrdinalIsThe", {
                              name: props.identity!.name,
                              ordinal: revision.ordinal,
                            })
                          : t("browserViewer.useNameVersionOrdinalBy", {
                              name: props.identity!.name,
                              ordinal: revision.ordinal,
                            })
                      }
                      title={
                        isDefault
                          ? t("browserViewer.defaultVersion")
                          : t("browserViewer.useByDefault")
                      }
                      onClick={() =>
                        void props.onUpdate(props.identity!, { defaultRevisionId: revision.id })
                      }
                      className="mr-1 shrink-0 rounded-og-sm px-2 py-1 text-[10px] text-og-fg-subtle transition hover:bg-og-surface-3 hover:text-og-fg disabled:cursor-default disabled:opacity-70"
                    >
                      {isDefault ? t("browserViewer.default") : t("browserViewer.makeDefault")}
                    </button>
                  </div>
                );
              })}
            </div>
            <p className="mt-1 px-2 text-[10px] leading-4 text-og-fg-subtle">
              {t("browserViewer.changingTheDefaultAffectsOnly")}
            </p>
          </div>
        ) : props.identity &&
          props.history?.identityId === props.identity.id &&
          props.history.loading ? (
          <p className="mt-3 flex items-center gap-1.5 border-t border-og-border px-2 pt-2 text-og-xs text-og-fg-subtle">
            <LoaderCircleIcon className="size-3 animate-spin" />{" "}
            {t("browserViewer.loadingSavedVersions")}
          </p>
        ) : null}
        {props.identity && props.authConnections.length > 0 ? (
          <div className="mt-3 border-t border-og-border pt-2">
            <p className="px-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-fg-subtle">
              {t("browserViewer.loginHealth")}
            </p>
            <div className="mt-1 space-y-1">
              {props.authConnections.map((connection) => {
                const health = siteAuthHealth(t, connection);
                return (
                  <div
                    key={connection.id}
                    className="flex items-start gap-2 rounded-og-sm px-2 py-1.5"
                  >
                    <span className={cn("mt-1 size-1.5 shrink-0 rounded-full", health.dotClass)} />
                    <span className="min-w-0 flex-1">
                      <span className="block truncate text-og-control text-og-fg">
                        {connection.name}
                      </span>
                      <span className="block truncate text-[10px] text-og-fg-subtle">
                        {connection.accountLabel} · {health.label}
                      </span>
                    </span>
                  </div>
                );
              })}
            </div>
          </div>
        ) : null}
        {canSave ? (
          props.identity ? (
            <button
              type="button"
              onClick={() => void save()}
              disabled={props.saving}
              className="mt-3 flex h-8 w-full items-center justify-center gap-1.5 rounded-og-sm border border-og-border bg-og-surface-2 px-3 text-og-control font-medium text-og-fg transition hover:bg-og-surface-3 disabled:opacity-50"
            >
              {props.saving ? (
                <LoaderCircleIcon className="size-3.5 animate-spin" />
              ) : (
                <SaveIcon className="size-3.5" />
              )}
              {props.saving
                ? t("browserViewer.savingBrowserVersion")
                : t("browserViewer.saveNewVersion")}
            </button>
          ) : (
            <form
              className="mt-3"
              onSubmit={(event) => {
                event.preventDefault();
                if (name.trim()) void save(name);
              }}
            >
              <label className="text-og-xs font-medium text-og-fg-muted" htmlFor={nameInputId}>
                {t("browserViewer.profileName")}
              </label>
              <div className="mt-1 flex gap-1.5">
                <input
                  id={nameInputId}
                  value={name}
                  onInput={(event) => setName(event.currentTarget.value)}
                  maxLength={200}
                  placeholder={t("browserViewer.work")}
                  className="h-8 min-w-0 flex-1 rounded-og-sm border border-og-border bg-og-bg px-2 text-og-control text-og-fg placeholder:text-og-fg-subtle focus:border-og-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent"
                />
                <button
                  type="submit"
                  disabled={!name.trim() || props.saving}
                  className="inline-flex h-8 items-center gap-1 rounded-og-sm border border-og-primary-border bg-og-primary text-og-primary-fg px-2.5 text-og-control font-medium transition hover:bg-og-primary-hover disabled:opacity-50"
                >
                  {props.saving ? (
                    <LoaderCircleIcon className="size-3.5 animate-spin" />
                  ) : (
                    <SaveIcon className="size-3.5" />
                  )}
                  {t("browserViewer.save")}
                </button>
              </div>
            </form>
          )
        ) : (
          <p className="mt-3 rounded-og-sm bg-og-surface-2 px-2.5 py-2 text-og-xs text-og-fg-subtle">
            {attached
              ? t("browserViewer.chromeKeepsThisProfileS")
              : props.identity?.status === "archived"
                ? t("browserViewer.restoreThisProfileBeforeSaving")
                : t("browserViewer.thisBrowserCannotSaveReusable")}
          </p>
        )}
        {!attached && props.identity ? (
          <button
            type="button"
            disabled={props.saving}
            onClick={() =>
              void props.onUpdate(props.identity!, {
                status: props.identity!.status === "active" ? "archived" : "active",
              })
            }
            className="mt-2 flex h-8 w-full items-center justify-center gap-1.5 rounded-og-sm px-3 text-og-control text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-50"
          >
            {props.identity.status === "active" ? (
              <ArchiveIcon className="size-3.5" />
            ) : (
              <RotateCcwIcon className="size-3.5" />
            )}
            {props.identity.status === "active"
              ? t("browserViewer.hideFromNewBrowsers")
              : t("browserViewer.restoreProfile")}
          </button>
        ) : null}
        {canSave ? (
          <p className="mt-2 text-[10px] leading-4 text-og-fg-subtle">
            {t("browserViewer.savingRestartsThisBrowserSave")}
          </p>
        ) : null}
      </div>
    </details>
  );
}

function revisionMaterializationSummary(
  t: OpenGeniText,
  revision: BrowserRevision,
): { label: string } {
  const materializations = revision.components.map((component) => component.materialization);
  const placementBound = materializations.find(
    (materialization) => materialization.portability === "placement_bound",
  );
  if (placementBound) {
    return {
      label: placementBound.reason
        ? t("browserViewer.thisMachineOnlyReason", { reason: placementBound.reason })
        : t("browserViewer.thisMachineOnly"),
    };
  }
  const providerBound = materializations.find(
    (materialization) => materialization.portability === "provider_bound",
  );
  if (providerBound) {
    return {
      label: providerBound.reason
        ? t("browserViewer.providerBoundReason", { reason: providerBound.reason })
        : t("browserViewer.providerBound"),
    };
  }
  return { label: t("browserViewer.portableBrowserData") };
}

function siteAuthHealth(
  t: OpenGeniText,
  connection: SiteAuthConnection,
): {
  label: string;
  dotClass: string;
} {
  switch (connection.verificationState) {
    case "verified":
      return { label: t("browserViewer.verified"), dotClass: "bg-og-status-running" };
    case "needs_repair":
      return { label: t("browserViewer.signInNeedsAttention"), dotClass: "bg-og-status-waiting" };
    case "failed":
      return { label: t("browserViewer.verificationFailed"), dotClass: "bg-og-status-error" };
    case "unknown":
      return { label: t("browserViewer.notCheckedYet"), dotClass: "bg-og-muted" };
  }
}

function MenuButton(props: { children: ReactNode; onClick: () => 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 BrowserTabs(props: {
  targets: BrowserTarget[];
  selectedTargetId: string | null;
  mutating: boolean;
  tabControl: boolean;
  onSelect: (id: string) => void;
  onClose: (id: string) => void;
  onOpen: () => void;
}) {
  const t = useOpenGeniText();
  const pages = props.targets.filter((target) => target.kind === "page" || target.kind === "popup");
  return (
    <div className="flex h-9 shrink-0 items-end gap-px overflow-x-auto border-b border-og-border bg-og-surface-1 px-1 pt-1">
      {pages.map((target) => (
        <div
          key={target.id}
          className={cn(
            "group flex h-8 min-w-24 max-w-48 items-center rounded-t-og-sm border border-b-0 border-transparent px-2",
            target.id === props.selectedTargetId
              ? "border-og-border bg-og-bg text-og-fg"
              : "text-og-fg-muted hover:bg-og-surface-1",
          )}
        >
          <button
            type="button"
            onClick={() => props.onSelect(target.id)}
            className="min-w-0 flex-1 truncate text-left text-og-control"
          >
            {target.title || shortUrl(target.url)}
          </button>
          {props.tabControl ? (
            <button
              type="button"
              onClick={() => props.onClose(target.id)}
              disabled={props.mutating}
              className="ml-1 grid size-4 shrink-0 place-items-center rounded opacity-0 transition hover:bg-og-surface-3 group-hover:opacity-100 focus:opacity-100 disabled:opacity-30"
              aria-label={t("browserViewer.closeTitle", { title: target.title || "tab" })}
            >
              <XIcon className="size-3" />
            </button>
          ) : null}
        </div>
      ))}
      {props.tabControl ? (
        <button
          type="button"
          onClick={props.onOpen}
          disabled={props.mutating}
          className="mb-1 grid size-6 shrink-0 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-40"
          aria-label={t("browserViewer.newTab")}
        >
          <PlusIcon className="size-3.5" />
        </button>
      ) : null}
    </div>
  );
}

function BrowserAddressBar(props: {
  target: BrowserTarget | null;
  loading: boolean;
  onNavigate: (url: string) => void;
  onHistory: (direction: "back" | "forward") => Promise<void>;
  onReload: () => void;
}) {
  const t = useOpenGeniText();
  const [draft, setDraft] = useState(props.target?.url ?? "");
  const focusedRef = useRef(false);
  const historyPendingRef = useRef(false);
  const [historyPending, setHistoryPending] = useState(false);
  useEffect(() => {
    if (!focusedRef.current) setDraft(props.target?.url ?? "");
  }, [props.target?.id, props.target?.url]);
  const submit = (event: FormEvent) => {
    event.preventDefault();
    if (historyPendingRef.current) return;
    const normalized = normalizeBrowserAddress(draft);
    if (normalized) props.onNavigate(normalized);
  };
  const navigateHistory = async (direction: "back" | "forward") => {
    if (!props.target || props.loading || historyPendingRef.current) return;
    historyPendingRef.current = true;
    setHistoryPending(true);
    try {
      await props.onHistory(direction);
    } finally {
      historyPendingRef.current = false;
      setHistoryPending(false);
    }
  };
  return (
    <form
      onSubmit={submit}
      aria-busy={historyPending || undefined}
      className="flex h-10 shrink-0 items-center gap-1.5 border-b border-og-border bg-og-bg px-2"
    >
      {(["back", "forward"] as const).map((direction) => (
        <button
          key={direction}
          type="button"
          onClick={() => void navigateHistory(direction)}
          disabled={!props.target || props.loading}
          aria-disabled={historyPending || undefined}
          className={cn(
            "grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-35",
            historyPending && "opacity-50",
          )}
          aria-label={direction === "back" ? t("browserViewer.back") : t("browserViewer.forward")}
          title={direction === "back" ? t("browserViewer.back") : t("browserViewer.forward")}
        >
          {direction === "back" ? (
            <ArrowLeftIcon className="size-3.5" />
          ) : (
            <ArrowRightIcon className="size-3.5" />
          )}
        </button>
      ))}
      <button
        type="button"
        onClick={props.onReload}
        disabled={!props.target || props.loading || historyPending}
        className="grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-35"
        aria-label={t("browserViewer.reload")}
      >
        <RefreshCwIcon
          className={cn("size-3.5", (props.loading || historyPending) && "animate-spin")}
        />
      </button>
      <div className="flex h-7 min-w-0 flex-1 items-center gap-2 rounded-og-sm border border-og-border bg-og-surface-1 px-2 focus-within:border-og-accent/60">
        <Globe2Icon className="size-3 shrink-0 text-og-fg-subtle" />
        <input
          value={draft}
          onChange={(event) => setDraft(event.target.value)}
          onFocus={() => {
            focusedRef.current = true;
          }}
          onBlur={() => {
            focusedRef.current = false;
          }}
          onKeyDown={(event) => {
            if (event.key !== "Enter") return;
            event.preventDefault();
            if (historyPendingRef.current) return;
            const normalized = normalizeBrowserAddress(draft);
            if (normalized) props.onNavigate(normalized);
          }}
          disabled={!props.target}
          className="min-w-0 flex-1 bg-transparent text-og-control text-og-fg placeholder:text-og-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-50"
          aria-label={t("browserViewer.address")}
          spellCheck={false}
          placeholder={t("browserViewer.searchOrEnterAddress")}
        />
      </div>
    </form>
  );
}

function BrowserViewport(props: {
  focusHandoffRef: { current: string | null };
  focusScope: string;
  frame: BrowserViewportFrame | null;
  connectionState: string;
  supportsLiveFrames: boolean;
  connectionError: Error | null;
  controlUnavailable: boolean;
  observation: ReturnType<typeof useBrowserSession>["observation"];
  mutating: boolean;
  clipboardEnabled: boolean;
  inputBatchAttachment?: {
    browserSessionId: string;
    controllerGeneration: string;
    targetId: string;
    fencedInputBatches?: true | undefined;
    focusedInputObservations?: true | undefined;
    expiresAt: string;
  } | null;
  activityLabel?: string | undefined;
  onAction: (
    action: BrowserAction | BrowserActionBatch,
    frame: BrowserFrameInputFence | null,
  ) => Promise<BrowserActionReceipt>;
  onReadClipboard: () => Promise<{ text: string }>;
  onObserveForInput: () => Promise<BrowserObservation>;
  onSelectFromObservation: (
    action: BrowserAction,
    observation: BrowserObservation,
  ) => Promise<BrowserActionReceipt>;
  onReconnect: () => void;
  reconnectLabel?: string | undefined;
  reconnectMessage?: string | undefined;
  onError: (cause: unknown) => void;
}) {
  const t = useOpenGeniText();
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const inputRef = useRef<HTMLTextAreaElement | null>(null);
  const [selectPopup, setSelectPopup] = useState<{
    observation: BrowserObservation | null;
    anchor: { x: number; y: number } | null;
  } | null>(null);
  const inputSequenceRef = useRef(0);
  const dismissSelectPopup = useCallback(() => {
    inputSequenceRef.current += 1;
    setSelectPopup({ observation: null, anchor: null });
  }, []);
  const composingRef = useRef(false);
  const pointerStartRef = useRef<PointerStart | null>(null);
  const lastClickRef = useRef<{
    at: number;
    x: number;
    y: number;
    frame: BrowserViewportFrame;
  } | null>(null);
  const wheelRef = useRef<{
    x: number;
    y: number;
    deltaX: number;
    deltaY: number;
    frame: BrowserViewportFrame;
    timer: ReturnType<typeof setTimeout> | null;
  } | null>(null);
  const pendingTextRef = useRef<{
    text: string;
    frame: BrowserViewportFrame | null;
    timer: ReturnType<typeof setTimeout>;
  } | null>(null);
  const actionRef = useRef(props.onAction);
  const readClipboardRef = useRef(props.onReadClipboard);
  const observeInputRef = useRef(props.onObserveForInput);
  const errorRef = useRef(props.onError);
  const actionTailRef = useRef<Promise<void>>(Promise.resolve());
  const actionQueueEpochRef = useRef(0);
  const queuedTypingRef = useRef<{
    actions: BrowserAction[];
    frame: BrowserFrameInputFence;
    epoch: number;
  } | null>(null);
  const queuedFrameRef = useRef<BrowserViewportFrame | null>(null);
  const currentFrameRef = useRef<BrowserViewportFrame | null>(props.frame);
  const paintedFrameRef = useRef<BrowserViewportFrame | null>(null);
  const [paintedFrame, setPaintedFrame] = useState<BrowserViewportFrame | null>(null);
  const decodingFrameRef = useRef(false);
  const mountedRef = useRef(true);
  actionRef.current = props.onAction;
  readClipboardRef.current = props.onReadClipboard;
  observeInputRef.current = props.onObserveForInput;
  errorRef.current = props.onError;

  const clearBufferedInput = useCallback(() => {
    dismissSelectPopup();
    if (wheelRef.current?.timer) clearTimeout(wheelRef.current.timer);
    if (pendingTextRef.current?.timer) clearTimeout(pendingTextRef.current.timer);
    wheelRef.current = null;
    pendingTextRef.current = null;
    queuedTypingRef.current = null;
    pointerStartRef.current = null;
    lastClickRef.current = null;
    composingRef.current = false;
    if (inputRef.current) inputRef.current.value = "";
  }, [dismissSelectPopup]);

  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], {
              type: frame.mediaType,
            });
            if (typeof createImageBitmap === "function") {
              const bitmap = await createImageBitmap(blob);
              try {
                const canvas = canvasRef.current;
                if (
                  mountedRef.current &&
                  canvas &&
                  currentFrameRef.current &&
                  sameBrowserDocument(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 &&
              sameBrowserDocument(frame, currentFrameRef.current)
            ) {
              paintCanvas(canvas, image, frame.width, frame.height);
              paintedFrameRef.current = frame;
              setPaintedFrame(frame);
            }
          } catch (cause) {
            if (
              mountedRef.current &&
              currentFrameRef.current &&
              sameBrowserDocument(frame, currentFrameRef.current)
            )
              errorRef.current(cause);
          } finally {
            if (objectUrl) URL.revokeObjectURL(objectUrl);
          }
        }
      } finally {
        decodingFrameRef.current = false;
        if (mountedRef.current && queuedFrameRef.current) paintQueuedFrames();
      }
    })();
  }, []);

  useLayoutEffect(() => {
    const keyboardInput = inputRef.current;
    const focusHandoff = props.focusHandoffRef;
    mountedRef.current = true;
    if (focusHandoff.current === props.focusScope) {
      keyboardInput?.focus({ preventScroll: true });
    }
    focusHandoff.current = null;
    return () => {
      // Only a same-target replacement may inherit focus the keyboard sink owned.
      if (document.activeElement === keyboardInput) {
        focusHandoff.current = props.focusScope;
      }
      mountedRef.current = false;
      actionQueueEpochRef.current += 1;
      queuedFrameRef.current = null;
      clearBufferedInput();
    };
  }, [clearBufferedInput, props.focusHandoffRef, props.focusScope]);

  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]);

  const enqueue = useCallback(
    (
      action: BrowserAction,
      frame: BrowserFrameInputFence | null,
      after?: (receipt: BrowserActionReceipt) => Promise<void>,
      selectAnchor?: { x: number; y: number },
    ) => {
      const inputSequence = ++inputSequenceRef.current;
      setSelectPopup({ observation: null, anchor: null });
      // Detach image bytes even when the caller supplied a complete painted frame.
      frame = frame
        ? {
            browserSessionId: frame.browserSessionId,
            controllerGeneration: frame.controllerGeneration,
            targetId: frame.targetId,
            targetGeneration: frame.targetGeneration,
            documentGeneration: frame.documentGeneration,
            frameId: frame.frameId,
          }
        : null;
      const epoch = actionQueueEpochRef.current;
      const attachment = props.inputBatchAttachment;
      const canBatchTyping =
        action.type === "type" &&
        !after &&
        frame &&
        attachment?.fencedInputBatches === true &&
        attachment.browserSessionId === frame.browserSessionId &&
        attachment.controllerGeneration === frame.controllerGeneration &&
        attachment.targetId === frame.targetId &&
        Date.parse(attachment.expiresAt) > Date.now();
      const previous = queuedTypingRef.current;
      if (
        canBatchTyping &&
        frame &&
        previous &&
        previous.epoch === epoch &&
        sameFrameFence(previous.frame, frame) &&
        previous.actions.length < 16
      ) {
        // Keep every existing text/input event boundary. Only share transport.
        previous.actions.push(action);
        return;
      }
      const typing = canBatchTyping && frame ? { actions: [action], frame, epoch } : null;
      // Every non-typing action is an ordering barrier, including keys and paste.
      queuedTypingRef.current = typing;
      actionTailRef.current = actionTailRef.current
        .catch(() => undefined)
        .then(async () => {
          if (!mountedRef.current || epoch !== actionQueueEpochRef.current) return;
          if (queuedTypingRef.current === typing) queuedTypingRef.current = null;
          const dispatchedAction =
            typing && typing.actions.length > 1
              ? { type: "batch" as const, actions: typing.actions, fenceEachAction: true as const }
              : action;
          // Read after the epoch guard: a queued render callback can retain every
          // frame from that render even when its input fence contains no bytes.
          const receipt = await actionRef.current(dispatchedAction, frame);
          if (!mountedRef.current || epoch !== actionQueueEpochRef.current) return;
          // Alt+Down explicitly opens a native dropdown from the keyboard.
          // Existing controllers return focused-input metadata for clicks only,
          // so use the ordinary authorized read for this explicit gesture.
          const keyboardSelect =
            dispatchedAction.type === "press" && dispatchedAction.key === "Alt+ArrowDown";
          if ((selectAnchor || keyboardSelect) && inputSequence === inputSequenceRef.current) {
            const observation = keyboardSelect
              ? await observeInputRef.current()
              : receipt.observation;
            if (
              mountedRef.current &&
              epoch === actionQueueEpochRef.current &&
              inputSequence === inputSequenceRef.current &&
              observation
            ) {
              setSelectPopup({ observation, anchor: selectAnchor ?? null });
            }
          }
          await after?.(receipt);
        })
        .catch((cause) => {
          if (!mountedRef.current || epoch !== actionQueueEpochRef.current) return;
          // Do not replay or continue input collected behind a failed request.
          actionQueueEpochRef.current += 1;
          clearBufferedInput();
          errorRef.current(cause);
        });
    },
    [clearBufferedInput, props.inputBatchAttachment],
  );

  const point = useCallback(
    (frame: BrowserViewportFrame, clientX: number, clientY: number) =>
      browserPoint(canvasRef.current, frame, clientX, clientY),
    [],
  );

  const flushPendingText = useCallback(() => {
    const pending = pendingTextRef.current;
    if (!pending) return;
    clearTimeout(pending.timer);
    pendingTextRef.current = null;
    enqueue({ type: "type", text: pending.text }, pending.frame);
  }, [enqueue]);

  const flushPendingClick = useCallback(() => {
    lastClickRef.current = null;
  }, []);

  const flushPendingWheel = useCallback(() => {
    const batch = wheelRef.current;
    if (!batch) return;
    if (batch.timer) clearTimeout(batch.timer);
    wheelRef.current = null;
    enqueue(
      {
        type: "pointer",
        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 || event.button !== 0) return;
    // Keep the hidden keyboard sink focused after the browser performs the
    // pointerdown default action for the canvas. Without preventing that
    // default, Chrome immediately moves focus back to the document and all
    // subsequent typing/paste is silently lost.
    event.preventDefault();
    dismissSelectPopup();
    flushPendingWheel();
    flushPendingText();
    pointerStartRef.current = {
      x: event.clientX,
      y: event.clientY,
      pointerId: event.pointerId,
      frame,
    };
    event.currentTarget.setPointerCapture?.(event.pointerId);
    inputRef.current?.focus({ preventScroll: true });
  };

  const pointerUp = (event: PointerEvent<HTMLCanvasElement>) => {
    const start = pointerStartRef.current;
    pointerStartRef.current = null;
    if (!start || start.pointerId !== event.pointerId) return;
    const from = point(start.frame, start.x, start.y);
    const to = point(start.frame, event.clientX, event.clientY);
    if (!from || !to) return;
    if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > 5) {
      flushPendingClick();
      enqueue(
        {
          type: "pointer",
          action: "drag",
          x: from.x,
          y: from.y,
          endX: to.x,
          endY: to.y,
        },
        start.frame,
      );
      return;
    }
    const now = Date.now();
    const previous = lastClickRef.current;
    if (
      previous &&
      now - previous.at < 280 &&
      Math.hypot(previous.x - to.x, previous.y - to.y) < 6 &&
      sameFrameFence(previous.frame, start.frame)
    ) {
      lastClickRef.current = null;
      // The first click was already dispatched immediately. Tell CDP this is
      // the continuation (clickCount=2), so the page receives a true dblclick
      // without making every ordinary click wait for the double-click window.
      enqueue({ type: "pointer", action: "click", clickCount: 2, x: to.x, y: to.y }, start.frame);
      return;
    }
    lastClickRef.current = { at: now, x: to.x, y: to.y, frame: start.frame };
    const viewportBounds = canvasRef.current?.parentElement?.getBoundingClientRect();
    enqueue(
      { type: "pointer", action: "click", x: to.x, y: to.y },
      start.frame,
      undefined,
      viewportBounds
        ? { x: event.clientX - viewportBounds.left, y: event.clientY - viewportBounds.top + 8 }
        : undefined,
    );
  };

  const contextMenu = (event: MouseEvent<HTMLCanvasElement>) => {
    event.preventDefault();
    const frame = paintedFrameRef.current;
    if (!frame) return;
    flushPendingWheel();
    flushPendingText();
    flushPendingClick();
    const at = point(frame, event.clientX, event.clientY);
    if (at) enqueue({ type: "pointer", action: "click", x: at.x, y: at.y, button: "right" }, frame);
  };

  const wheel = (event: WheelEvent<HTMLCanvasElement>) => {
    dismissSelectPopup();
    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 &&
      (!sameBrowserDocument(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,
      // Retain the first event's deadline so a continuous gesture keeps moving.
      timer: pending?.timer ?? setTimeout(flushPendingWheel, 45),
    };
  };

  const keyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
    // Candidate selection/editing belongs to the local IME. Forward only the
    // committed text; Enter must not submit the remote page during composition.
    // Safari can end composition before keydown while retaining keyCode 229.
    if (
      composingRef.current ||
      event.nativeEvent.isComposing ||
      event.nativeEvent.keyCode === 229
    ) {
      return;
    }
    dismissSelectPopup();
    flushPendingWheel();
    const command = event.metaKey || event.ctrlKey;
    if (
      props.clipboardEnabled &&
      command &&
      !event.altKey &&
      ["c", "v"].includes(event.key.toLowerCase())
    ) {
      flushPendingText();
      return;
    }
    const key = browserKey(event);
    if (!key) return;
    event.preventDefault();
    flushPendingText();
    flushPendingClick();
    enqueue({ type: "press", key }, paintedFrameRef.current);
  };

  const finishCopy = useCallback(async () => {
    const clipboard = await readClipboardRef.current();
    if (!mountedRef.current) return;
    if (clipboard.text.length === 0) return;
    if (!(await copyTextToClipboard(clipboard.text))) {
      throw new Error(t("browserViewer.browserTextCouldNotBe"));
    }
  }, [t]);

  const copy = (event: ClipboardEvent<HTMLTextAreaElement>) => {
    if (!props.clipboardEnabled) return;
    event.preventDefault();
    flushPendingWheel();
    flushPendingText();
    flushPendingClick();
    enqueue({ type: "clipboard", operation: "copy" }, paintedFrameRef.current, finishCopy);
  };

  const paste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
    if (!props.clipboardEnabled) return;
    event.preventDefault();
    flushPendingWheel();
    flushPendingText();
    flushPendingClick();
    enqueue(
      {
        type: "clipboard",
        operation: "paste",
        text: event.clipboardData.getData("text/plain"),
      },
      paintedFrameRef.current,
    );
  };

  const input = (value: string, nativeComposing = false) => {
    dismissSelectPopup();
    if (composingRef.current || nativeComposing) return;
    if (!value) return;
    flushPendingWheel();
    flushPendingClick();
    const pending = pendingTextRef.current;
    if (pending && sameOptionalBrowserFrame(pending.frame, paintedFrameRef.current)) {
      clearTimeout(pending.timer);
      pending.text += value;
      pending.timer = setTimeout(flushPendingText, 16);
    } else {
      flushPendingText();
      pendingTextRef.current = {
        text: value,
        frame: paintedFrameRef.current,
        timer: setTimeout(flushPendingText, 16),
      };
    }
    if (inputRef.current) inputRef.current.value = "";
  };

  const compositionStart = () => {
    composingRef.current = true;
  };

  const compositionEnd = (event: CompositionEvent<HTMLTextAreaElement>) => {
    composingRef.current = false;
    input(event.currentTarget.value || event.data);
  };

  const showCanvas =
    !props.controlUnavailable &&
    props.frame !== null &&
    paintedFrame !== null &&
    sameBrowserDocument(props.frame, paintedFrame);
  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",
        )}
        onPointerDown={pointerDown}
        onPointerUp={pointerUp}
        onPointerCancel={() => {
          pointerStartRef.current = null;
        }}
        onContextMenu={contextMenu}
        onWheel={wheel}
        aria-label={t("browserViewer.interactiveBrowserPage")}
      />
      <textarea
        ref={inputRef}
        disabled={props.controlUnavailable}
        defaultValue=""
        onInput={(event) =>
          input(event.currentTarget.value, (event.nativeEvent as InputEvent).isComposing)
        }
        onCompositionStart={compositionStart}
        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("browserViewer.browserKeyboardInput")}
        aria-keyshortcuts="Alt+ArrowDown"
        autoCapitalize="off"
        autoCorrect="off"
        spellCheck={false}
      />
      {!showCanvas ? (
        <SemanticBrowserFallback
          observation={props.observation}
          connectionState={props.connectionState}
          supportsLiveFrames={props.supportsLiveFrames}
          error={props.connectionError}
          controlUnavailable={props.controlUnavailable}
          onAction={(action) => enqueue(action, null)}
          onReconnect={props.onReconnect}
          reconnectLabel={props.reconnectLabel}
          reconnectMessage={props.reconnectMessage}
        />
      ) : null}
      {showCanvas ? (
        <BrowserSelectControl
          manualFallback={props.inputBatchAttachment?.focusedInputObservations !== true}
          activation={selectPopup}
          onDismiss={() => inputRef.current?.focus({ preventScroll: true })}
          observe={async () => {
            flushPendingText();
            flushPendingWheel();
            await actionTailRef.current;
            if (!mountedRef.current) throw new Error(t("browserViewer.theBrowserPageChanged"));
            return await props.onObserveForInput();
          }}
          act={props.onSelectFromObservation}
        />
      ) : 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" />{" "}
          {props.activityLabel ?? t("browserViewer.acting")}
        </div>
      ) : null}
    </div>
  );
}

function SemanticBrowserFallback(props: {
  observation: ReturnType<typeof useBrowserSession>["observation"];
  connectionState: string;
  supportsLiveFrames: boolean;
  error: Error | null;
  controlUnavailable: boolean;
  onAction: (action: BrowserAction) => void;
  onReconnect: () => void;
  reconnectLabel?: string | undefined;
  reconnectMessage?: string | undefined;
}) {
  const t = useOpenGeniText();
  const controlFailure = interactionControlFailureFromError(props.error);
  const { controlUnavailable } = props;
  const generationLoss = Boolean(props.reconnectMessage);
  const nodes = semanticNodes(
    props.observation?.semantic?.kind === "snapshot" ? props.observation.semantic.roots : [],
  );
  const interactive = nodes.filter((node) => node.actions.includes("click")).slice(0, 8);
  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" />
          ) : props.connectionState === "semantic" ? (
            <ZapIcon 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">
            {generationLoss
              ? t("browserViewer.chromeReconnectedOpenAFresh")
              : controlUnavailable
                ? t("browserViewer.browserControlsUnavailable")
                : props.error
                  ? props.supportsLiveFrames
                    ? t("browserViewer.liveViewDisconnected")
                    : t("browserViewer.browserUnavailable")
                  : props.connectionState === "semantic"
                    ? t("browserViewer.semanticBrowser")
                    : browserConnectionLabel(t, props.connectionState)}
          </p>
        </div>
        {props.error || props.reconnectMessage ? (
          <p className="mt-2 text-og-control leading-5 text-og-fg-muted">
            {props.reconnectMessage ?? controlFailure?.message ?? props.error?.message}
          </p>
        ) : null}
        {interactive.length > 0 && !controlUnavailable ? (
          <div className="mt-3 border-t border-og-border pt-3">
            <p className="mb-2 text-og-xs text-og-fg-subtle">
              {props.supportsLiveFrames
                ? t("browserViewer.pageControlsRemainAvailable")
                : t("browserViewer.availablePageControls")}
            </p>
            <div className="flex flex-wrap gap-1.5">
              {interactive.map((node) => (
                <button
                  key={node.ref}
                  type="button"
                  onClick={() =>
                    props.onAction({
                      type: "click",
                      locator: { kind: "ref", ref: node.ref },
                    })
                  }
                  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 && (!generationLoss || props.reconnectLabel) ? (
          <button
            type="button"
            onClick={props.onReconnect}
            className="mt-3 text-og-control font-medium og-link"
          >
            {props.reconnectLabel ??
              (controlFailure?.retryable === false
                ? t("browserViewer.tryAgain")
                : t("browserViewer.reconnect"))}
          </button>
        ) : null}
      </div>
    </div>
  );
}

function BrowserStatusBar(props: {
  session: BrowserSession | null;
  profile: BrowserIdentity | null;
  target: BrowserTarget | null;
  observation: ReturnType<typeof useBrowserSession>["observation"];
  inputFailure: ReturnType<typeof useBrowserSession>["inputFailure"];
  connectionState: string;
  refreshing: boolean;
  diagnosticsOpen: boolean;
  onOpenComputer?: (() => void) | undefined;
  onDiagnostics: () => void;
}) {
  const t = useOpenGeniText();
  const errors =
    (props.observation?.diagnostics.consoleErrorCount ?? 0) +
    (props.observation?.diagnostics.pageErrorCount ?? 0);
  const failed = props.observation?.diagnostics.failedRequestCount ?? 0;
  return (
    <div className="flex h-7 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" || props.connectionState === "semantic"
            ? "bg-og-status-running"
            : "bg-og-muted",
        )}
      />
      <span>
        {props.connectionState === "live"
          ? t("browserViewer.live")
          : props.connectionState === "semantic"
            ? t("browserViewer.semantic")
            : browserConnectionLabel(t, props.connectionState)}
      </span>
      {props.inputFailure ? (
        <span className="text-og-status-failed">
          {props.inputFailure.state === "failed"
            ? t("browserViewer.inputFailed")
            : t("browserViewer.inputResultUnknown")}
        </span>
      ) : null}
      <span>{props.profile?.name ?? t("browserViewer.temporaryBrowser")}</span>
      <span className="min-w-0 flex-1 truncate">{props.target?.title}</span>
      {props.refreshing ? <LoaderCircleIcon className="size-3 animate-spin" /> : null}
      {props.onOpenComputer ? (
        <button
          type="button"
          onClick={props.onOpenComputer}
          className="flex items-center gap-1 rounded px-1.5 py-0.5 transition hover:bg-og-surface-2 hover:text-og-fg"
          aria-label={t("browserViewer.openThisBrowserWindowIn")}
        >
          <MonitorIcon className="size-3" />
          {t("browserViewer.desktop")}
        </button>
      ) : null}
      <button
        type="button"
        onClick={props.onDiagnostics}
        aria-expanded={props.diagnosticsOpen}
        aria-controls="browser-diagnostics-drawer"
        className={cn(
          "flex items-center gap-1 rounded px-1.5 py-0.5 transition hover:bg-og-surface-2 hover:text-og-fg",
          props.diagnosticsOpen && "bg-og-surface-2 text-og-fg",
        )}
      >
        <BugIcon className="size-3" />
        {errors + failed > 0 ? errors + failed : t("browserViewer.debug")}
      </button>
    </div>
  );
}

function BrowserDiagnosticsDrawer(props: {
  session: BrowserSession | null;
  profile: BrowserIdentity | null;
  target: BrowserTarget | null;
  observation: BrowserObservation | null;
  baseRevisionOrdinal: number | null;
  state: BrowserDiagnosticsView;
  downloads: BrowserDownload[];
  downloadsEnabled: boolean;
  downloadsLoading: boolean;
  downloadsRefreshing: boolean;
  downloadsError: Error | null;
  savingDownloadIds: string[];
  onSaveDownload: (
    downloadId: string,
    destinationPath: string,
    overwrite: boolean,
  ) => Promise<BrowserDownloadSaveResponse>;
  onRefreshDownloads: () => void;
  onRefresh: () => void;
  onClose: () => void;
}) {
  const t = useOpenGeniText();
  const session = props.session;
  const diagnostics = props.observation?.diagnostics;
  const semanticMode = props.observation?.semantic
    ? t("browserViewer.semanticPageStructureAvailable")
    : props.observation?.screenshot
      ? t("browserViewer.visualFallbackInUse")
      : t("browserViewer.waitingForPageObservation");
  return (
    <aside
      id="browser-diagnostics-drawer"
      role="region"
      aria-label={t("browserViewer.browserDiagnostics")}
      className="absolute inset-y-0 right-0 z-40 flex min-h-0 w-full max-w-md flex-col border-l border-og-border bg-og-surface-1 shadow-2xl"
    >
      <div className="flex min-h-11 shrink-0 items-center gap-2 border-b border-og-border px-3 py-2">
        <BugIcon className="size-4 shrink-0 text-og-fg-muted" />
        <div className="min-w-0 flex-1">
          <p className="text-og-control font-semibold text-og-fg">
            {t("browserViewer.browserDiagnostics")}
          </p>
          <p className="truncate text-og-xs text-og-fg-subtle">
            {props.target?.title ||
              shortUrl(props.target?.url ?? "") ||
              t("browserViewer.currentTab")}
          </p>
        </div>
        <button
          type="button"
          onClick={props.onRefresh}
          disabled={props.state.loading}
          className="grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-40"
          aria-label={t("browserViewer.refreshBrowserDiagnostics")}
        >
          <RefreshCwIcon className={cn("size-3.5", props.state.loading && "animate-spin")} />
        </button>
        <button
          type="button"
          onClick={props.onClose}
          className="grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg"
          aria-label={t("browserViewer.closeBrowserDiagnostics")}
        >
          <XIcon className="size-3.5" />
        </button>
      </div>

      <div className="min-h-0 flex-1 overflow-y-auto">
        <section className="border-b border-og-border p-3" aria-labelledby="browser-runtime-title">
          <h3
            id="browser-runtime-title"
            className="text-[10px] font-semibold uppercase tracking-[0.14em] text-og-fg-subtle"
          >
            {t("browserViewer.runtime")}
          </h3>
          <dl className="mt-2 grid grid-cols-[7rem_minmax(0,1fr)] gap-x-3 gap-y-1.5 text-og-xs">
            <DiagnosticFact
              label={t("browserViewer.engine")}
              value={browserEngineLabel(t, session)}
            />
            <DiagnosticFact
              label={t("browserViewer.driver")}
              value={session?.driverId ?? t("browserViewer.unavailable")}
            />
            <DiagnosticFact
              label={t("browserViewer.placement")}
              value={placementLabel(t, session ?? undefined)}
            />
            <DiagnosticFact
              label={t("browserViewer.profile")}
              value={
                props.profile
                  ? `${props.profile.name}${props.baseRevisionOrdinal ? ` · v${props.baseRevisionOrdinal}` : ""}`
                  : t("browserViewer.temporary")
              }
            />
            <DiagnosticFact
              label={t("browserViewer.controller")}
              value={shortGeneration(t, session?.controller?.controllerGeneration)}
            />
            <DiagnosticFact
              label={t("browserViewer.network")}
              value={
                session?.networkRouteId
                  ? t("browserViewer.customRoute")
                  : t("browserViewer.placementDefault")
              }
            />
            <DiagnosticFact label={t("browserViewer.observation")} value={semanticMode} />
          </dl>
        </section>

        <section className="border-b border-og-border p-3" aria-labelledby="browser-page-title">
          <h3
            id="browser-page-title"
            className="text-[10px] font-semibold uppercase tracking-[0.14em] text-og-fg-subtle"
          >
            {t("browserViewer.tabDiagnostics")}
          </h3>
          <p className="mt-1 text-og-xs text-og-fg-subtle">
            {t("browserViewer.includesEarlierPagesInThis")}
          </p>
          <dl className="mt-2 grid grid-cols-2 gap-2">
            <DiagnosticCount
              label={t("browserViewer.consoleErrors")}
              value={diagnostics?.consoleErrorCount}
            />
            <DiagnosticCount
              label={t("browserViewer.pageErrors")}
              value={diagnostics?.pageErrorCount}
            />
            <DiagnosticCount
              label={t("browserViewer.failedRequests")}
              value={diagnostics?.failedRequestCount}
            />
            <DiagnosticCount
              label={t("browserViewer.downloads")}
              value={diagnostics?.downloadCount}
            />
          </dl>
          {session?.failureCode ? (
            <p className="mt-2 rounded-og-sm border border-og-status-error/30 bg-og-status-error/5 px-2.5 py-2 text-og-xs text-og-danger">
              {t("browserViewer.browserStateFailurecode", { failureCode: session.failureCode })}
            </p>
          ) : null}
        </section>

        {props.downloadsEnabled ? (
          <BrowserDownloadsPanel
            downloads={props.downloads}
            loading={props.downloadsLoading}
            refreshing={props.downloadsRefreshing}
            error={props.downloadsError}
            savingDownloadIds={props.savingDownloadIds}
            onSave={props.onSaveDownload}
            onRefresh={props.onRefreshDownloads}
          />
        ) : null}

        <section className="p-3" aria-labelledby="browser-events-title">
          <div className="flex items-center justify-between gap-2">
            <h3
              id="browser-events-title"
              className="text-[10px] font-semibold uppercase tracking-[0.14em] text-og-fg-subtle"
            >
              {t("browserViewer.recentEvents")}
            </h3>
            {props.state.batch?.truncated ? (
              <span className="text-[10px] text-og-fg-subtle">{t("browserViewer.newest100")}</span>
            ) : null}
          </div>
          {props.state.loading && !props.state.batch ? (
            <div className="flex items-center gap-2 py-6 text-og-control text-og-fg-muted">
              <LoaderCircleIcon className="size-3.5 animate-spin" />{" "}
              {t("browserViewer.loadingDiagnostics")}
            </div>
          ) : props.state.error ? (
            <div className="py-5">
              <p className="text-og-control text-og-danger">{props.state.error.message}</p>
              <button
                type="button"
                onClick={props.onRefresh}
                className="mt-2 text-og-control font-medium og-link"
              >
                {t("browserViewer.tryAgain")}
              </button>
            </div>
          ) : props.state.batch?.entries.length ? (
            <ol className="mt-2 space-y-2">
              {props.state.batch.entries.map((entry) => (
                <li
                  key={entry.sequence}
                  className="rounded-og-sm border border-og-border bg-og-bg p-2.5"
                >
                  <div className="flex items-center gap-2 text-[10px] text-og-fg-subtle">
                    <span
                      className={cn(
                        "font-semibold uppercase tracking-wide",
                        diagnosticTone(entry.level),
                      )}
                    >
                      {diagnosticKindLabel(t, entry.kind)}
                    </span>
                    <span className="ml-auto">{formatDiagnosticTime(t, entry.occurredAt)}</span>
                  </div>
                  <p className="mt-1 whitespace-pre-wrap break-words text-og-xs leading-5 text-og-fg">
                    {entry.message}
                  </p>
                  {entry.url || entry.filename || entry.method || entry.status ? (
                    <p className="mt-1 truncate font-og-mono text-[10px] text-og-fg-subtle">
                      {[entry.method, entry.status, entry.filename, entry.url]
                        .filter((value) => value !== null)
                        .join(" · ")}
                    </p>
                  ) : null}
                </li>
              ))}
            </ol>
          ) : (
            <p className="py-6 text-og-control text-og-fg-muted">
              {t("browserViewer.noDiagnosticsForThisTab")}
            </p>
          )}
        </section>
      </div>
    </aside>
  );
}

function BrowserDownloadsPanel(props: {
  downloads: BrowserDownload[];
  loading: boolean;
  refreshing: boolean;
  error: Error | null;
  savingDownloadIds: string[];
  onSave: (
    downloadId: string,
    destinationPath: string,
    overwrite: boolean,
  ) => Promise<BrowserDownloadSaveResponse>;
  onRefresh: () => void;
}) {
  const t = useOpenGeniText();
  const [paths, setPaths] = useState<Record<string, string>>({});
  const [overwrite, setOverwrite] = useState<Record<string, boolean>>({});
  const [savedPaths, setSavedPaths] = useState<Record<string, string>>({});
  const [errors, setErrors] = useState<Record<string, string>>({});
  const saving = useMemo(() => new Set(props.savingDownloadIds), [props.savingDownloadIds]);

  const save = (download: BrowserDownload) => {
    const destinationPath = (paths[download.id] ?? defaultDownloadDestination(download)).trim();
    if (!destinationPath || saving.has(download.id)) return;
    setErrors((current) => ({ ...current, [download.id]: "" }));
    void props
      .onSave(download.id, destinationPath, overwrite[download.id] ?? false)
      .then((response) => {
        setSavedPaths((current) => ({ ...current, [download.id]: response.destinationPath }));
      })
      .catch((cause) => {
        setErrors((current) => ({
          ...current,
          [download.id]:
            cause instanceof Error ? cause.message : t("browserViewer.couldNotSaveThisDownload"),
        }));
      });
  };

  return (
    <section className="border-b border-og-border p-3" aria-labelledby="browser-downloads-title">
      <div className="flex items-center gap-2">
        <DownloadIcon className="size-3.5 text-og-fg-muted" />
        <h3
          id="browser-downloads-title"
          className="text-[10px] font-semibold uppercase tracking-[0.14em] text-og-fg-subtle"
        >
          {t("browserViewer.downloads")}
        </h3>
        {props.refreshing ? (
          <LoaderCircleIcon className="ml-auto size-3 animate-spin text-og-fg-muted" />
        ) : null}
      </div>

      {props.loading ? (
        <div className="flex items-center gap-2 py-5 text-og-control text-og-fg-muted">
          <LoaderCircleIcon className="size-3.5 animate-spin" />{" "}
          {t("browserViewer.loadingDownloads")}
        </div>
      ) : props.error ? (
        <div className="py-4">
          <p className="text-og-control text-og-danger">{props.error.message}</p>
          <button
            type="button"
            onClick={props.onRefresh}
            className="mt-2 text-og-control font-medium og-link"
          >
            {t("browserViewer.tryAgain")}
          </button>
        </div>
      ) : props.downloads.length === 0 ? (
        <p className="py-4 text-og-control text-og-fg-muted">
          {t("browserViewer.noFilesDownloadedYet")}
        </p>
      ) : (
        <ol className="mt-2 space-y-2">
          {props.downloads.map((download) => {
            const destinationPath = paths[download.id] ?? defaultDownloadDestination(download);
            const isSaving = saving.has(download.id);
            const isSaved = savedPaths[download.id] === destinationPath;
            return (
              <li
                key={download.id}
                className="rounded-og-sm border border-og-border bg-og-bg p-2.5"
              >
                <div className="flex min-w-0 items-start gap-2">
                  <span className="mt-0.5 grid size-6 shrink-0 place-items-center rounded bg-og-surface-2 text-og-fg-muted">
                    {isSaved ? (
                      <FileCheck2Icon className="size-3.5 text-og-status-idle" />
                    ) : (
                      <DownloadIcon className="size-3.5" />
                    )}
                  </span>
                  <div className="min-w-0 flex-1">
                    <p
                      className="truncate text-og-xs font-medium text-og-fg"
                      title={download.filename}
                    >
                      {download.filename}
                    </p>
                    <p className="mt-0.5 text-[10px] text-og-fg-subtle">
                      {downloadStatusLabel(t, download)}
                    </p>
                  </div>
                </div>

                {download.status === "completed" ? (
                  <div className="mt-2">
                    <div className="flex gap-1.5">
                      <input
                        type="text"
                        value={destinationPath}
                        onInput={(event) => {
                          const value = event.currentTarget.value;
                          setPaths((current) => ({ ...current, [download.id]: value }));
                          setErrors((current) => ({ ...current, [download.id]: "" }));
                        }}
                        onKeyDown={(event) => {
                          if (event.key === "Enter") save(download);
                        }}
                        disabled={isSaving}
                        aria-label={t("browserViewer.workspacePathForFilename", {
                          filename: download.filename,
                        })}
                        className="h-7 min-w-0 flex-1 rounded-og-sm border border-og-border bg-og-surface-1 px-2 font-og-mono text-[10px] text-og-fg transition focus:border-og-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-50"
                      />
                      <button
                        type="button"
                        onClick={() => save(download)}
                        disabled={
                          isSaving ||
                          !destinationPath.trim() ||
                          (isSaved && !overwrite[download.id])
                        }
                        className="inline-flex h-7 shrink-0 items-center gap-1 rounded-og-sm border border-og-border bg-og-surface-1 px-2 text-[10px] font-medium text-og-fg transition hover:bg-og-surface-2 disabled:opacity-40"
                      >
                        {isSaving ? (
                          <LoaderCircleIcon className="size-3 animate-spin" />
                        ) : (
                          <SaveIcon className="size-3" />
                        )}
                        {isSaving
                          ? t("browserViewer.saving")
                          : isSaved
                            ? t("browserViewer.saved")
                            : overwrite[download.id]
                              ? t("browserViewer.replace")
                              : t("browserViewer.save")}
                      </button>
                    </div>
                    <label className="mt-1.5 flex w-fit items-center gap-1.5 text-[10px] text-og-fg-subtle">
                      <input
                        type="checkbox"
                        checked={overwrite[download.id] ?? false}
                        onChange={(event) => {
                          setOverwrite((current) => ({
                            ...current,
                            [download.id]: event.currentTarget.checked,
                          }));
                          setErrors((current) => ({ ...current, [download.id]: "" }));
                        }}
                        disabled={isSaving}
                        className="size-3 accent-og-accent"
                      />
                      {t("browserViewer.replaceAnExistingWorkspaceFile")}
                    </label>
                    {errors[download.id] ? (
                      <p className="mt-1.5 break-words text-[10px] text-og-danger">
                        {errors[download.id]}
                      </p>
                    ) : null}
                  </div>
                ) : null}
              </li>
            );
          })}
        </ol>
      )}
    </section>
  );
}

function downloadStatusLabel(t: OpenGeniText, download: BrowserDownload): string {
  if (download.status === "completed") return formatBytes(download.receivedBytes);
  if (download.status === "in_progress") {
    const received = formatBytes(download.receivedBytes);
    return download.totalBytes === null
      ? t("browserViewer.downloadingReceived", { received })
      : t("browserViewer.downloadingReceivedOfBytes", {
          received,
          bytes: formatBytes(download.totalBytes),
        });
  }
  if (download.status === "cancelled") return t("browserViewer.cancelled");
  if (download.status === "unavailable") return t("browserViewer.noLongerAvailable");
  return t("browserViewer.downloadFailed");
}

function defaultDownloadDestination(download: BrowserDownload): string {
  const leaf = download.filename.split(/[\\/]/u).at(-1)?.trim() ?? "";
  const portable = leaf
    .normalize("NFC")
    .replace(/[<>:"|?*\u0000-\u001f\u007f]/gu, "-")
    .replace(/[ .]+$/u, "");
  if (portable.length === 0 || /^(?:con|prn|aux|nul|com[1-9]|lpt[1-9])(?:\.|$)/iu.test(portable)) {
    return `download-${download.id.slice(0, 8)}`;
  }
  return portable;
}

function DiagnosticFact(props: { label: string; value: string }) {
  return (
    <>
      <dt className="text-og-fg-subtle">{props.label}</dt>
      <dd className="min-w-0 truncate text-og-fg" title={props.value}>
        {props.value}
      </dd>
    </>
  );
}

function DiagnosticCount(props: { label: string; value: number | undefined }) {
  const t = useOpenGeniText();
  return (
    <div className="rounded-og-sm border border-og-border bg-og-bg px-2.5 py-2">
      <dt className="text-[10px] text-og-fg-subtle">{props.label}</dt>
      <dd
        className={cn(
          "mt-0.5 text-og-sm font-semibold",
          props.value ? "text-og-fg" : "text-og-fg-muted",
        )}
      >
        {props.value ?? t("browserViewer.unavailable")}
      </dd>
    </div>
  );
}

function browserEngineLabel(t: OpenGeniText, session: BrowserSession | null): string {
  if (!session) return t("browserViewer.unavailable");
  const version = session.engineVersion ? ` ${session.engineVersion}` : "";
  return `${session.engine}${version} · ${session.headless ? "headless" : "headed"}`;
}

function shortGeneration(t: OpenGeniText, value: string | null | undefined): string {
  if (!value) return t("browserViewer.unavailable");
  return value.length > 16 ? `${value.slice(0, 8)}…${value.slice(-6)}` : value;
}

function diagnosticKindLabel(
  t: OpenGeniText,
  kind: BrowserDiagnosticBatch["entries"][number]["kind"],
): string {
  switch (kind) {
    case "console":
      return t("browserViewer.console");
    case "page_error":
      return t("browserViewer.pageError");
    case "failed_request":
      return t("browserViewer.request");
    case "download":
      return t("browserViewer.download");
  }
}

function diagnosticTone(level: BrowserDiagnosticBatch["entries"][number]["level"]): string {
  if (level === "error") return "text-og-danger";
  if (level === "warning") return "text-og-status-waiting";
  return "text-og-fg-muted";
}

function formatDiagnosticTime(t: OpenGeniText, value: string): string {
  const date = new Date(value);
  return Number.isNaN(date.getTime())
    ? ""
    : date.toLocaleTimeString(t.locale, { hour: "2-digit", minute: "2-digit", second: "2-digit" });
}

function BrowserNotice(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>
  );
}

function paintCanvas(
  canvas: HTMLCanvasElement,
  image: CanvasImageSource,
  width: number,
  height: number,
): void {
  canvas.width = width;
  canvas.height = height;
  const context = canvas.getContext("2d", { alpha: false });
  if (!context) throw new Error("Browser canvas is unavailable.");
  context.drawImage(image, 0, 0, width, height);
}

function loadImage(url: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error("Browser frame image could not be decoded."));
    image.src = url;
  });
}

function browserPoint(
  canvas: HTMLCanvasElement | null,
  frame: BrowserViewportFrame | null,
  clientX: number,
  clientY: number,
): { x: number; y: number } | null {
  if (!canvas || !frame) return null;
  const rect = canvas.getBoundingClientRect();
  if (rect.width <= 0 || rect.height <= 0) return null;
  const pixelX = ((clientX - rect.left) / rect.width) * frame.width;
  const pixelY = ((clientY - rect.top) / rect.height) * frame.height;
  return {
    x: Math.max(0, pixelX / frame.deviceScaleFactor),
    y: Math.max(0, pixelY / frame.deviceScaleFactor),
  };
}

function semanticNodes(roots: readonly InteractionSemanticNode[]): InteractionSemanticNode[] {
  const result: InteractionSemanticNode[] = [];
  const stack = [...roots].reverse();
  while (stack.length > 0) {
    const node = stack.pop()!;
    result.push(node);
    if (node.children) stack.push(...[...node.children].reverse());
  }
  return result;
}

function frameMatchesSelectedTarget(
  frame: BrowserFrame | null,
  session: BrowserSession | null,
  target: BrowserTarget | null,
): frame is BrowserFrame {
  // The stream hook already validates the frame against the authenticated
  // attachment's controller generation. The separately-polled BrowserSession
  // can briefly carry the previous generation while an attachment is issued;
  // comparing against it here discarded valid frames and left the viewer on
  // "Connecting" indefinitely.
  return Boolean(
    frame &&
    session &&
    target &&
    frame.browserSessionId === session.id &&
    frame.targetId === target.id &&
    frame.targetGeneration === target.targetGeneration &&
    frame.documentGeneration === target.documentGeneration,
  );
}

function sameFrameFence(left: BrowserFrameInputFence, right: BrowserFrameInputFence): boolean {
  return sameBrowserDocument(left, right) && left.frameId === right.frameId;
}

function sameBrowserDocument(left: BrowserFrameInputFence, right: BrowserFrameInputFence): boolean {
  return (
    left.browserSessionId === right.browserSessionId &&
    left.controllerGeneration === right.controllerGeneration &&
    left.targetId === right.targetId &&
    left.targetGeneration === right.targetGeneration &&
    left.documentGeneration === right.documentGeneration
  );
}

function sameOptionalBrowserFrame(
  left: BrowserViewportFrame | null,
  right: BrowserViewportFrame | null,
): boolean {
  return left === null || right === null ? left === right : sameFrameFence(left, right);
}

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

function attachedChromeGenerationLoss(
  sessions: readonly BrowserSession[],
): { deviceId: string } | null {
  const lost = sessions.find(
    (session) =>
      session.lifecycle === "lost" &&
      session.failureCode === "controller_transition_expired" &&
      session.placement.kind === "attached_device",
  );
  return lost?.placement.kind === "attached_device" ? { deviceId: lost.placement.deviceId } : null;
}

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("browserViewer.signInNeeded");
    case "mfa":
      return t("browserViewer.verificationNeeded");
    case "external_action":
    case "confirmation":
      return t("browserViewer.actionNeeded");
    case "other":
      return t("browserViewer.browserNeedsYourHelp");
  }
}

function placementLabel(t: OpenGeniText, session: BrowserSession | undefined): string {
  if (!session) return "";
  switch (session.placement.kind) {
    case "sandbox_group":
      return t("browserViewer.agentSandbox");
    case "connected_machine":
      return t("browserViewer.connectedMachine");
    case "attached_device":
      return t("browserViewer.yourBrowser");
    case "external_provider":
      return t("browserViewer.cloudBrowser");
  }
}

function browserConnectionLabel(t: OpenGeniText, state: string): string {
  switch (state) {
    case "attaching":
      return t("browserViewer.openingBrowser");
    case "connecting":
      return t("browserViewer.connecting");
    case "reconnecting":
      return t("browserViewer.reconnecting");
    case "error":
      return t("browserViewer.disconnected");
    case "semantic":
      return t("browserViewer.semantic");
    default:
      return t("browserViewer.waitingForBrowser");
  }
}

function shortUrl(value: string): string {
  try {
    return new URL(value).hostname || value;
  } catch {
    return value;
  }
}