@opengeni/react 1.0.1 → 2.3.0-canary.0

package/dist/chunk-X4JAFD5R.js

@@ -0,0 +1,3907 @@
+import {
+  InteractionInterventionBanner,
+  isNonRetryableInteractionError,
+  isSourcePlacementChangedError,
+  useInteractionInterventions,
+  useInteractionInvalidation
+} from "./chunk-H5YGYNXS.js";
+import {
+  STREAM_CLOSE_REASON_NORMAL,
+  STREAM_KIND_BROWSER,
+  STREAM_ROLE_CLIENT,
+  decodeStreamFrame,
+  decodeStreamOpenAck,
+  encodeStreamClose,
+  encodeStreamOpen,
+  interactionHostPlatform
+} from "./chunk-5YK2ZDIG.js";
+import {
+  usePageLiveActivity
+} from "./chunk-KZ73RL76.js";
+import {
+  useEmbeddedBrowserInteraction
+} from "./chunk-NEXLLTP4.js";
+import {
+  formatBytes
+} from "./chunk-LAKLF4PA.js";
+import {
+  cn
+} from "./chunk-22KP6LR5.js";
+import {
+  copyTextToClipboard
+} from "./chunk-JVYQRRC4.js";
+
+// src/components/browser-viewer.tsx
+import { interactionControlFailureFromError } from "@opengeni/sdk/interaction";
+import {
+  BugIcon,
+  ArchiveIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  CircleAlertIcon,
+  DownloadIcon,
+  FileCheck2Icon,
+  Globe2Icon,
+  LoaderCircleIcon,
+  MonitorIcon,
+  PlusIcon,
+  RefreshCwIcon,
+  RotateCcwIcon,
+  SaveIcon,
+  UserRoundIcon,
+  XIcon,
+  ZapIcon
+} from "lucide-react";
+import {
+  useCallback as useCallback8,
+  useEffect as useEffect8,
+  useId,
+  useMemo as useMemo2,
+  useRef as useRef8,
+  useState as useState8
+} from "react";
+
+// src/hooks/use-browser-frame-stream.ts
+import {
+  browserFrameSocketUrl,
+  decodeBrowserFrameMessage
+} from "@opengeni/sdk/interaction";
+import { useCallback, useEffect, useRef, useState } from "react";
+var RELAY_TAG_OPEN = 1;
+var RELAY_TAG_OPEN_ACK = 2;
+var RELAY_TAG_FRAME = 3;
+var RELAY_TAG_CLOSE = 4;
+var MAX_AUTOMATIC_RECONNECTS_WITHOUT_A_FRAME = 2;
+function useBrowserFrameStream(options) {
+  const { client, workspaceId } = useEmbeddedBrowserInteraction(options);
+  const enabled = options.enabled ?? true;
+  const [nonce, setNonce] = useState(0);
+  const [result, setResult] = useState({
+    state: "idle",
+    frame: null,
+    attachment: null,
+    error: null
+  });
+  const latestRef = useRef({
+    key: "",
+    sequence: -1
+  });
+  const factoryRef = useRef(options.webSocketFactory);
+  const streamRef = useRef(options.stream);
+  factoryRef.current = options.webSocketFactory;
+  streamRef.current = options.stream;
+  const reconnect = useCallback(() => setNonce((value) => value + 1), []);
+  useEffect(() => {
+    const browserSessionId = options.browserSessionId;
+    const targetId = options.targetId;
+    if (!enabled || !browserSessionId || !targetId || typeof window === "undefined") {
+      setResult({ state: "idle", frame: null, attachment: null, error: null });
+      return;
+    }
+    latestRef.current = { key: "", sequence: -1 };
+    setResult({
+      state: "attaching",
+      frame: null,
+      attachment: null,
+      error: null
+    });
+    let disposed = false;
+    let socket = null;
+    let socketHandlers = null;
+    let reconnectTimer = null;
+    let expiryTimer = null;
+    let failures = 0;
+    let controllerGeneration = null;
+    let activeAttachment = null;
+    let activeStream = null;
+    let attachmentExpiresAt = 0;
+    let lastRelaySequence = null;
+    let relayAccepted = false;
+    let pendingFrame = null;
+    let decodingFrame = false;
+    const attachmentAbort = new AbortController();
+    const clearSocket = (terminateProducer = false) => {
+      if (!socket) return;
+      const current = socket;
+      const handlers = socketHandlers;
+      if (terminateProducer && activeStream?.kind === "relay" && socket.readyState === 1) {
+        try {
+          socket.send(
+            relayDatagram(
+              RELAY_TAG_CLOSE,
+              encodeStreamClose({
+                channelId: activeStream.channel.channelId,
+                reason: STREAM_CLOSE_REASON_NORMAL,
+                message: "viewer detached"
+              })
+            )
+          );
+        } catch {
+        }
+      }
+      if (handlers) {
+        current.removeEventListener("open", handlers.open);
+        current.removeEventListener("message", handlers.message);
+        current.removeEventListener("error", handlers.error);
+        current.removeEventListener("close", handlers.close);
+      }
+      if (current.readyState === 0 || current.readyState === 1) {
+        current.close(1e3, "viewer detached");
+      }
+      socket = null;
+      socketHandlers = null;
+      pendingFrame = null;
+    };
+    const scheduleReconnect = () => {
+      if (disposed || reconnectTimer) return;
+      if (failures >= MAX_AUTOMATIC_RECONNECTS_WITHOUT_A_FRAME) return;
+      const delay = Math.min(5e3, 250 * 2 ** Math.min(failures, 5));
+      failures += 1;
+      setResult((current) => ({ ...current, state: "reconnecting" }));
+      reconnectTimer = setTimeout(() => {
+        reconnectTimer = null;
+        connectSocket();
+      }, delay);
+    };
+    const fail = (cause, reconnectAutomatically = true) => {
+      if (disposed) return;
+      const error = cause instanceof Error ? cause : new Error(String(cause));
+      setResult((current) => ({ ...current, state: "error", error }));
+      clearSocket();
+      if (reconnectAutomatically) scheduleReconnect();
+    };
+    const onOpen = (source) => {
+      if (disposed || source !== socket) return;
+      if (activeStream?.kind === "relay") {
+        const body = encodeStreamOpen({
+          channel: {
+            ...activeStream.channel,
+            kind: STREAM_KIND_BROWSER
+          },
+          token: activeStream.token,
+          role: STREAM_ROLE_CLIENT,
+          resumeFromSeq: lastRelaySequence === null ? "0" : (BigInt(lastRelaySequence) + 1n).toString()
+        });
+        try {
+          source.send(relayDatagram(RELAY_TAG_OPEN, body));
+        } catch (error) {
+          fail(error);
+        }
+        return;
+      }
+      setResult((current) => ({ ...current, state: "live", error: null }));
+    };
+    const drainLatestFrame = async () => {
+      if (decodingFrame) return;
+      decodingFrame = true;
+      try {
+        while (pendingFrame) {
+          if (disposed) break;
+          const pending = pendingFrame;
+          pendingFrame = null;
+          const { bytes, source } = pending;
+          const frame = decodeBrowserFrameMessage(bytes);
+          if (disposed || source !== socket) continue;
+          if (frame.browserSessionId !== browserSessionId || frame.targetId !== targetId) {
+            throw new Error("browser frame belongs to another resource");
+          }
+          if (!controllerGeneration || frame.controllerGeneration !== controllerGeneration) {
+            throw new Error("browser frame belongs to a stale controller");
+          }
+          const key = `${browserSessionId}:${targetId}:${frame.controllerGeneration}:${frame.targetGeneration}:${frame.documentGeneration}`;
+          if (latestRef.current.key === key && frame.sequence <= latestRef.current.sequence)
+            continue;
+          latestRef.current = { key, sequence: frame.sequence };
+          failures = 0;
+          setResult((current) => ({
+            ...current,
+            state: "live",
+            frame,
+            error: null
+          }));
+        }
+      } catch (cause) {
+        fail(cause);
+      } finally {
+        decodingFrame = false;
+        if (!disposed && pendingFrame) void drainLatestFrame();
+      }
+    };
+    const onMessage = (source, event) => {
+      void (async () => {
+        try {
+          const bytes = await messageBytes(event.data);
+          if (disposed || source !== socket) return;
+          let frameBytes = bytes;
+          if (activeStream?.kind === "relay") {
+            if (bytes.length < 1) throw new Error("browser relay returned an empty message");
+            const tag = bytes[0];
+            const body = bytes.subarray(1);
+            if (tag === RELAY_TAG_OPEN_ACK) {
+              const ack = decodeStreamOpenAck(body);
+              if (!ack.accepted) {
+                activeAttachment = null;
+                activeStream = null;
+                attachmentExpiresAt = 0;
+                throw new Error(ack.error?.message ?? "browser stream was rejected by the relay");
+              }
+              relayAccepted = true;
+              return;
+            }
+            if (tag === RELAY_TAG_CLOSE) {
+              activeAttachment = null;
+              activeStream = null;
+              attachmentExpiresAt = 0;
+              lastRelaySequence = null;
+              relayAccepted = false;
+              fail(new Error("Browser frame source ended."), false);
+              return;
+            }
+            if (tag !== RELAY_TAG_FRAME || !relayAccepted) return;
+            const relayFrame = decodeStreamFrame(body);
+            lastRelaySequence = relayFrame.seq;
+            frameBytes = relayFrame.data;
+          }
+          pendingFrame = { bytes: frameBytes, source };
+          void drainLatestFrame();
+        } catch (cause) {
+          fail(cause);
+        }
+      })();
+    };
+    const onError = (source) => {
+      if (source !== socket) return;
+      fail(new Error("Browser view lost connection."));
+    };
+    const onClose = (source) => {
+      if (disposed || source !== socket) return;
+      clearSocket();
+      scheduleReconnect();
+    };
+    const connectSocket = () => {
+      if (disposed) return;
+      clearSocket();
+      if (!activeAttachment || !activeStream || attachmentExpiresAt <= Date.now() + 1e3) {
+        void attach();
+        return;
+      }
+      relayAccepted = false;
+      setResult((current) => ({
+        ...current,
+        state: "connecting",
+        error: null
+      }));
+      const createSocket = factoryRef.current ?? ((url, protocols) => new WebSocket(url, protocols));
+      const openedSocket = createSocket(
+        activeStream.kind === "relay" ? activeStream.url : browserFrameSocketUrl(activeAttachment, streamRef.current),
+        activeStream.kind === "direct_websocket" ? [...activeStream.protocols] : []
+      );
+      socket = openedSocket;
+      socketHandlers = {
+        open: () => onOpen(openedSocket),
+        message: (event) => onMessage(openedSocket, event),
+        error: () => onError(openedSocket),
+        close: () => onClose(openedSocket)
+      };
+      openedSocket.binaryType = "arraybuffer";
+      openedSocket.addEventListener("open", socketHandlers.open);
+      openedSocket.addEventListener("message", socketHandlers.message);
+      openedSocket.addEventListener("error", socketHandlers.error);
+      openedSocket.addEventListener("close", socketHandlers.close);
+    };
+    const attach = async () => {
+      if (disposed) return;
+      clearSocket();
+      if (expiryTimer) clearTimeout(expiryTimer);
+      setResult((current) => ({
+        ...current,
+        state: current.attachment ? "reconnecting" : "attaching",
+        error: null
+      }));
+      try {
+        const attachment = await client.attachBrowserSession(
+          workspaceId,
+          browserSessionId,
+          {
+            targetId,
+            expiresInSeconds: 120,
+            ...streamRef.current ? { stream: streamRef.current } : {}
+          },
+          { signal: attachmentAbort.signal }
+        );
+        if (disposed) return;
+        if (attachment.browserSessionId !== browserSessionId || attachment.targetId !== targetId) {
+          throw new Error("browser attachment does not match the requested resource");
+        }
+        controllerGeneration = attachment.controllerGeneration;
+        activeAttachment = attachment;
+        activeStream = attachment.stream;
+        attachmentExpiresAt = Date.parse(attachment.expiresAt);
+        lastRelaySequence = null;
+        relayAccepted = false;
+        setResult((current) => ({
+          ...current,
+          state: "connecting",
+          attachment: {
+            browserSessionId: attachment.browserSessionId,
+            controllerGeneration: attachment.controllerGeneration,
+            targetId: attachment.targetId,
+            expiresAt: attachment.expiresAt
+          },
+          error: null
+        }));
+        const refreshIn = Number.isFinite(attachmentExpiresAt) ? Math.max(1e3, attachmentExpiresAt - Date.now() - 5e3) : 6e4;
+        expiryTimer = setTimeout(() => {
+          if (disposed) return;
+          clearSocket(true);
+          activeAttachment = null;
+          activeStream = null;
+          attachmentExpiresAt = 0;
+          void attach();
+        }, refreshIn);
+        connectSocket();
+      } catch (cause) {
+        if (attachmentAbort.signal.aborted || disposed) return;
+        fail(cause, !isPlacementGenerationLossError(cause));
+      }
+    };
+    void attach();
+    return () => {
+      disposed = true;
+      attachmentAbort.abort();
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+      if (expiryTimer) clearTimeout(expiryTimer);
+      clearSocket(true);
+    };
+  }, [client, enabled, nonce, options.browserSessionId, options.targetId, workspaceId]);
+  return { ...result, reconnect };
+}
+function relayDatagram(tag, body) {
+  const message = new Uint8Array(body.length + 1);
+  message[0] = tag;
+  message.set(body, 1);
+  return message.buffer;
+}
+async function messageBytes(value) {
+  if (value instanceof ArrayBuffer) return new Uint8Array(value);
+  if (ArrayBuffer.isView(value)) {
+    return new Uint8Array(value.buffer, value.byteOffset, value.byteLength).slice();
+  }
+  if (typeof Blob !== "undefined" && value instanceof Blob) {
+    return new Uint8Array(await value.arrayBuffer());
+  }
+  throw new Error("browser frame stream returned a non-binary message");
+}
+function isPlacementGenerationLossError(cause) {
+  const message = cause instanceof Error ? cause.message : String(cause);
+  return /placement instance changed|controller authority changed/i.test(message);
+}
+
+// src/hooks/use-attached-browsers.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+function useAttachedBrowsers(options = {}) {
+  const { client, workspaceId, workspaceInteractionEvent, workspaceInteractionConnectionState } = useEmbeddedBrowserInteraction(options);
+  const enabled = options.enabled ?? true;
+  const includeDisconnected = options.includeDisconnected ?? false;
+  const [state, setState] = useState2(() => emptyState(workspaceId, enabled));
+  const requestRef = useRef2({
+    id: 0,
+    controller: null
+  });
+  const mountedRef = useRef2(true);
+  const visible = state.workspaceId === workspaceId ? state : emptyState(workspaceId, enabled);
+  const cancelLoad = useCallback2(() => {
+    const id = requestRef.current.id + 1;
+    requestRef.current.controller?.abort();
+    requestRef.current = { id, controller: null };
+  }, []);
+  const load = useCallback2(
+    async (foreground) => {
+      if (!enabled) return;
+      const id = requestRef.current.id + 1;
+      requestRef.current.controller?.abort();
+      const controller = new AbortController();
+      requestRef.current = { id, controller };
+      setState((current) => ({
+        ...current.workspaceId === workspaceId ? current : emptyState(workspaceId, true),
+        loading: foreground,
+        refreshing: !foreground,
+        error: foreground || current.workspaceId !== workspaceId ? null : current.error
+      }));
+      try {
+        const response = await client.listAttachedBrowsers(workspaceId, {
+          includeDisconnected,
+          signal: controller.signal
+        });
+        if (!mountedRef.current || requestRef.current.id !== id) return;
+        setState({
+          workspaceId,
+          revision: response.revision,
+          bridges: response.bridges,
+          devices: sortDevices(response.devices),
+          loading: false,
+          refreshing: false,
+          error: null
+        });
+      } catch (cause) {
+        if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id)
+          return;
+        setState((current) => ({
+          ...current.workspaceId === workspaceId ? current : emptyState(workspaceId, true),
+          loading: false,
+          refreshing: false,
+          error: cause instanceof Error ? cause : new Error(String(cause))
+        }));
+      } finally {
+        if (requestRef.current.id === id) requestRef.current = { id, controller: null };
+      }
+    },
+    [client, enabled, includeDisconnected, workspaceId]
+  );
+  const refresh = useCallback2(async () => await load(false), [load]);
+  useEffect2(() => {
+    mountedRef.current = true;
+    if (!enabled) {
+      cancelLoad();
+      setState(emptyState(workspaceId, false));
+      return;
+    }
+    void load(true);
+    return () => {
+      mountedRef.current = false;
+      cancelLoad();
+    };
+  }, [cancelLoad, enabled, load, workspaceId]);
+  useInteractionInvalidation({
+    workspaceId,
+    key: `${workspaceId}:${includeDisconnected}`,
+    enabled,
+    event: workspaceInteractionEvent,
+    connectionState: workspaceInteractionConnectionState,
+    knownRevision: visible.revision,
+    refresh,
+    fallbackPollIntervalMs: options.pollIntervalMs
+  });
+  return {
+    revision: visible.revision,
+    bridges: visible.bridges,
+    devices: visible.devices,
+    loading: visible.loading,
+    refreshing: visible.refreshing,
+    error: visible.error,
+    refresh
+  };
+}
+function emptyState(workspaceId, loading) {
+  return {
+    workspaceId,
+    revision: 0,
+    bridges: [],
+    devices: [],
+    loading,
+    refreshing: false,
+    error: null
+  };
+}
+function sortDevices(devices) {
+  return [...devices].sort(
+    (left, right) => Number(right.state === "connected") - Number(left.state === "connected") || timestamp(right.lastSeenAt) - timestamp(left.lastSeenAt) || left.name.localeCompare(right.name)
+  );
+}
+function timestamp(value) {
+  const parsed = Date.parse(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+// src/hooks/use-browser-identities.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+function useBrowserIdentities(options = {}) {
+  const { client, workspaceId, workspaceInteractionEvent, workspaceInteractionConnectionState } = useEmbeddedBrowserInteraction(options);
+  const enabled = options.enabled ?? true;
+  const includeArchived = options.includeArchived ?? false;
+  const [state, setState] = useState3(() => emptyState2(workspaceId, enabled));
+  const [mutationCount, setMutationCount] = useState3(0);
+  const requestRef = useRef3({
+    id: 0,
+    controller: null
+  });
+  const mountedRef = useRef3(true);
+  const visibleState = state.workspaceId === workspaceId ? state : emptyState2(workspaceId, enabled);
+  const cancelLoad = useCallback3(() => {
+    const id = requestRef.current.id + 1;
+    requestRef.current.controller?.abort();
+    requestRef.current = { id, controller: null };
+  }, []);
+  const load = useCallback3(
+    async (foreground) => {
+      if (!enabled) return;
+      const id = requestRef.current.id + 1;
+      requestRef.current.controller?.abort();
+      const controller = new AbortController();
+      requestRef.current = { id, controller };
+      setState((current) => ({
+        ...current.workspaceId === workspaceId ? current : emptyState2(workspaceId, true),
+        loading: foreground,
+        refreshing: !foreground,
+        error: foreground || current.workspaceId !== workspaceId ? null : current.error
+      }));
+      try {
+        const response = await client.listBrowserIdentities(workspaceId, {
+          includeArchived,
+          signal: controller.signal
+        });
+        if (!mountedRef.current || requestRef.current.id !== id) return;
+        setState({
+          workspaceId,
+          revision: response.revision,
+          identities: sortIdentities(response.identities),
+          loading: false,
+          refreshing: false,
+          error: null
+        });
+      } catch (cause) {
+        if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id)
+          return;
+        setState((current) => ({
+          ...current.workspaceId === workspaceId ? current : emptyState2(workspaceId, true),
+          loading: false,
+          refreshing: false,
+          error: cause instanceof Error ? cause : new Error(String(cause))
+        }));
+      } finally {
+        if (requestRef.current.id === id) requestRef.current = { id, controller: null };
+      }
+    },
+    [client, enabled, includeArchived, workspaceId]
+  );
+  const refresh = useCallback3(async () => await load(false), [load]);
+  useEffect3(() => {
+    mountedRef.current = true;
+    if (!enabled) {
+      cancelLoad();
+      setState(emptyState2(workspaceId, false));
+      return;
+    }
+    void load(true);
+    return () => {
+      mountedRef.current = false;
+      cancelLoad();
+    };
+  }, [cancelLoad, enabled, load, workspaceId]);
+  useInteractionInvalidation({
+    workspaceId,
+    key: workspaceId,
+    enabled,
+    event: workspaceInteractionEvent,
+    connectionState: workspaceInteractionConnectionState,
+    knownRevision: visibleState.revision,
+    refresh
+  });
+  const mutate = useCallback3(async (operation) => {
+    setMutationCount((count) => count + 1);
+    try {
+      return await operation();
+    } finally {
+      if (mountedRef.current) setMutationCount((count) => Math.max(0, count - 1));
+    }
+  }, []);
+  const create = useCallback3(
+    async (request) => await mutate(async () => {
+      const response = await client.createBrowserIdentity(workspaceId, {
+        ...request,
+        operationId: request.operationId ?? crypto.randomUUID()
+      });
+      setState((current) => mergeIdentity(current, workspaceId, response.identity));
+      return response;
+    }),
+    [client, mutate, workspaceId]
+  );
+  const revisions = useCallback3(
+    async (identityId) => await client.listBrowserRevisions(workspaceId, identityId),
+    [client, workspaceId]
+  );
+  const update = useCallback3(
+    async (identityId, request) => await mutate(async () => {
+      const response = await client.updateBrowserIdentity(workspaceId, identityId, {
+        ...request,
+        operationId: request.operationId ?? crypto.randomUUID()
+      });
+      setState(
+        (current) => mergeIdentity(current, workspaceId, response.identity, includeArchived)
+      );
+      return response;
+    }),
+    [client, includeArchived, mutate, workspaceId]
+  );
+  const publish = useCallback3(
+    async (browserSessionId, request) => await mutate(async () => {
+      const response = await client.publishBrowserRevision(workspaceId, browserSessionId, {
+        ...request,
+        operationId: request.operationId ?? crypto.randomUUID()
+      });
+      setState((current) => mergeIdentity(current, workspaceId, response.identity));
+      return response;
+    }),
+    [client, mutate, workspaceId]
+  );
+  return {
+    revision: visibleState.revision,
+    identities: visibleState.identities,
+    loading: visibleState.loading,
+    refreshing: visibleState.refreshing,
+    mutating: mutationCount > 0,
+    error: visibleState.error,
+    refresh,
+    create,
+    update,
+    revisions,
+    publish
+  };
+}
+function emptyState2(workspaceId, loading) {
+  return {
+    workspaceId,
+    revision: 0,
+    identities: [],
+    loading,
+    refreshing: false,
+    error: null
+  };
+}
+function sortIdentities(identities) {
+  return [...identities].sort(
+    (left, right) => timestamp2(right.updatedAt) - timestamp2(left.updatedAt) || left.name.localeCompare(right.name)
+  );
+}
+function timestamp2(value) {
+  const parsed = Date.parse(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function mergeIdentity(current, workspaceId, identity, includeArchived = false) {
+  if (current.workspaceId !== workspaceId) return current;
+  return {
+    ...current,
+    identities: sortIdentities(
+      identity.status === "archived" && !includeArchived ? current.identities.filter((candidate) => candidate.id !== identity.id) : [...current.identities.filter((candidate) => candidate.id !== identity.id), identity]
+    ),
+    error: null
+  };
+}
+
+// src/hooks/use-browser-downloads.ts
+import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+function useBrowserDownloads(options) {
+  const { client, workspaceId } = useEmbeddedBrowserInteraction(options);
+  const browserSessionId = options.browserSessionId;
+  const enabled = (options.enabled ?? true) && browserSessionId !== null;
+  const pageLive = usePageLiveActivity();
+  const pollIntervalMs = Math.max(750, options.pollIntervalMs ?? 2e3);
+  const scope = browserSessionId ?? "none";
+  const [state, setState] = useState4(() => emptyState3(scope, enabled));
+  const [saving, setSaving] = useState4({});
+  const visible = state.scope === scope ? state : emptyState3(scope, enabled);
+  const requestRef = useRef4({
+    id: 0,
+    controller: null
+  });
+  const mountedRef = useRef4(true);
+  const retryOperationsRef = useRef4(/* @__PURE__ */ new Map());
+  const cancelLoad = useCallback4(() => {
+    requestRef.current.controller?.abort();
+    requestRef.current = { id: requestRef.current.id + 1, controller: null };
+  }, []);
+  const load = useCallback4(
+    async (foreground) => {
+      if (!enabled || !browserSessionId) return;
+      const id = requestRef.current.id + 1;
+      requestRef.current.controller?.abort();
+      const controller = new AbortController();
+      requestRef.current = { id, controller };
+      setState((current) => ({
+        ...current.scope === scope ? current : emptyState3(scope, true),
+        loading: foreground,
+        refreshing: !foreground,
+        error: foreground || current.scope !== scope ? null : current.error
+      }));
+      try {
+        const response = await client.listBrowserDownloads(workspaceId, browserSessionId, {
+          signal: controller.signal
+        });
+        if (!mountedRef.current || requestRef.current.id !== id) return;
+        setState({
+          scope,
+          downloads: sortDownloads(response.downloads),
+          loading: false,
+          refreshing: false,
+          error: null
+        });
+      } catch (cause) {
+        if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id)
+          return;
+        setState((current) => ({
+          ...current.scope === scope ? current : emptyState3(scope, true),
+          loading: false,
+          refreshing: false,
+          error: asError(cause)
+        }));
+      } finally {
+        if (requestRef.current.id === id) requestRef.current = { id, controller: null };
+      }
+    },
+    [browserSessionId, client, enabled, scope, workspaceId]
+  );
+  const refresh = useCallback4(async () => await load(false), [load]);
+  useEffect4(() => {
+    retryOperationsRef.current.clear();
+    setSaving({});
+  }, [scope]);
+  useEffect4(() => {
+    mountedRef.current = true;
+    if (!enabled) {
+      cancelLoad();
+      setState(emptyState3(scope, false));
+      return () => {
+        mountedRef.current = false;
+        cancelLoad();
+      };
+    }
+    void load(true);
+    return () => {
+      mountedRef.current = false;
+      cancelLoad();
+    };
+  }, [cancelLoad, enabled, load, scope]);
+  useEffect4(() => {
+    if (!enabled || !pageLive || Object.keys(saving).length > 0) return;
+    const timer = setInterval(() => {
+      if (!requestRef.current.controller) void refresh();
+    }, pollIntervalMs);
+    return () => clearInterval(timer);
+  }, [enabled, pageLive, pollIntervalMs, refresh, saving]);
+  const saveToWorkspace = useCallback4(
+    async (downloadId, destinationPath, saveOptions = {}) => {
+      if (!browserSessionId) throw new Error("No BrowserSession is selected.");
+      const overwrite = saveOptions.overwrite ?? false;
+      const attemptKey = `${browserSessionId}\0${downloadId}\0${destinationPath}\0${overwrite}`;
+      const operationId = saveOptions.operationId ?? retryOperationsRef.current.get(attemptKey) ?? crypto.randomUUID();
+      retryOperationsRef.current.set(attemptKey, operationId);
+      setSaving((current) => ({ ...current, [downloadId]: (current[downloadId] ?? 0) + 1 }));
+      try {
+        const response = await client.saveBrowserDownload(
+          workspaceId,
+          browserSessionId,
+          downloadId,
+          { operationId, destinationPath, overwrite }
+        );
+        retryOperationsRef.current.delete(attemptKey);
+        if (mountedRef.current) {
+          setState(
+            (current) => current.scope === scope ? {
+              ...current,
+              downloads: sortDownloads([
+                ...current.downloads.filter((download) => download.id !== response.download.id),
+                response.download
+              ]),
+              error: null
+            } : current
+          );
+        }
+        return response;
+      } finally {
+        if (mountedRef.current) {
+          setSaving((current) => {
+            const count = (current[downloadId] ?? 1) - 1;
+            if (count > 0) return { ...current, [downloadId]: count };
+            const { [downloadId]: _removed, ...rest } = current;
+            return rest;
+          });
+        }
+      }
+    },
+    [browserSessionId, client, scope, workspaceId]
+  );
+  return {
+    downloads: visible.downloads,
+    loading: visible.loading,
+    refreshing: visible.refreshing,
+    savingDownloadIds: Object.keys(saving),
+    error: visible.error,
+    refresh,
+    saveToWorkspace
+  };
+}
+function emptyState3(scope, loading) {
+  return {
+    scope,
+    downloads: [],
+    loading,
+    refreshing: false,
+    error: null
+  };
+}
+function sortDownloads(downloads) {
+  return [...downloads].sort(
+    (left, right) => right.startedAt.localeCompare(left.startedAt) || left.id.localeCompare(right.id)
+  );
+}
+function asError(cause) {
+  return cause instanceof Error ? cause : new Error(String(cause));
+}
+
+// src/hooks/use-browser-session.ts
+import { OpenGeniApiError } from "@opengeni/sdk";
+import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef5, useState as useState5 } from "react";
+function useBrowserSession(options) {
+  const { client, workspaceId } = useEmbeddedBrowserInteraction(options);
+  const browserSessionId = options.browserSessionId;
+  const enabled = (options.enabled ?? true) && browserSessionId !== null;
+  const pageLive = usePageLiveActivity();
+  const pollIntervalMs = Math.max(750, options.pollIntervalMs ?? 2e3);
+  const [state, setState] = useState5(() => emptyState4(browserSessionId, enabled));
+  const visible = state.browserSessionId === browserSessionId ? state : emptyState4(browserSessionId, enabled);
+  const refreshBlocked = isNonRetryableInteractionError(visible.error);
+  const selectedTargetIdRef = useRef5(visible.selectedTargetId);
+  selectedTargetIdRef.current = visible.selectedTargetId;
+  const observationRef = useRef5({ browserSessionId, observation: visible.observation });
+  if (observationRef.current.browserSessionId !== browserSessionId) {
+    observationRef.current = {
+      browserSessionId,
+      observation: visible.observation
+    };
+  } else {
+    observationRef.current.observation = visible.observation;
+  }
+  const requestRef = useRef5({
+    id: 0,
+    controller: null
+  });
+  const mutationRef = useRef5({
+    browserSessionId,
+    count: 0
+  });
+  const mountedRef = useRef5(true);
+  const invalidateRefresh = useCallback5(() => {
+    const id = requestRef.current.id + 1;
+    requestRef.current.controller?.abort();
+    requestRef.current = { id, controller: null };
+  }, []);
+  const refresh = useCallback5(async () => {
+    if (!enabled || !browserSessionId) return;
+    const id = requestRef.current.id + 1;
+    requestRef.current.controller?.abort();
+    const controller = new AbortController();
+    requestRef.current = { id, controller };
+    try {
+      const [session, targetResponse] = await Promise.all([
+        client.getBrowserSession(workspaceId, browserSessionId, {
+          signal: controller.signal
+        }),
+        client.listBrowserTargets(workspaceId, browserSessionId, {
+          signal: controller.signal
+        })
+      ]);
+      if (!mountedRef.current || requestRef.current.id !== id) return;
+      const selected = chooseTarget(targetResponse.targets, selectedTargetIdRef.current);
+      selectedTargetIdRef.current = selected?.id ?? null;
+      observationRef.current = { browserSessionId, observation: null };
+      setState(
+        (current) => current.browserSessionId === browserSessionId ? {
+          ...current,
+          session,
+          targets: targetResponse.targets,
+          selectedTargetId: selected?.id ?? null,
+          observation: null,
+          loading: false,
+          error: null
+        } : current
+      );
+      if (!selected) return;
+      try {
+        const observation = await client.observeBrowserTarget(
+          workspaceId,
+          browserSessionId,
+          selected.id,
+          { signal: controller.signal }
+        );
+        if (!mountedRef.current || requestRef.current.id !== id) return;
+        observationRef.current = { browserSessionId, observation };
+        setState(
+          (current) => current.browserSessionId === browserSessionId && current.selectedTargetId === observation.target.id ? { ...current, observation } : current
+        );
+      } catch (cause) {
+        if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id)
+          return;
+        void cause;
+      }
+    } catch (cause) {
+      if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id) return;
+      setState(
+        (current) => current.browserSessionId === browserSessionId ? {
+          ...current,
+          loading: false,
+          error: cause instanceof Error ? cause : new Error(String(cause))
+        } : current
+      );
+    } finally {
+      if (requestRef.current.id === id) {
+        requestRef.current = { id, controller: null };
+      }
+    }
+  }, [browserSessionId, client, enabled, workspaceId]);
+  useEffect5(() => {
+    mountedRef.current = true;
+    if (!enabled) {
+      invalidateRefresh();
+      setState(emptyState4(browserSessionId, false));
+      return;
+    }
+    setState(
+      (current) => current.browserSessionId === browserSessionId ? { ...current, loading: true } : emptyState4(browserSessionId, true)
+    );
+    void refresh();
+    return () => {
+      mountedRef.current = false;
+      invalidateRefresh();
+    };
+  }, [browserSessionId, enabled, invalidateRefresh, refresh]);
+  useEffect5(() => {
+    if (!enabled || !pageLive || visible.mutating || refreshBlocked) return;
+    const timer = setInterval(() => {
+      if (!requestRef.current.controller) void refresh();
+    }, pollIntervalMs);
+    return () => clearInterval(timer);
+  }, [enabled, pageLive, pollIntervalMs, refresh, refreshBlocked, visible.mutating]);
+  useEffect5(() => {
+    if (!enabled || !browserSessionId || !pageLive || refreshBlocked) return;
+    let disposed = false;
+    const heartbeat = () => {
+      void client.heartbeatBrowserSession(workspaceId, browserSessionId).catch(() => {
+        if (!disposed) void refresh();
+      });
+    };
+    const timer = setInterval(heartbeat, 3e4);
+    return () => {
+      disposed = true;
+      clearInterval(timer);
+    };
+  }, [browserSessionId, client, enabled, pageLive, refresh, refreshBlocked, workspaceId]);
+  const runMutation = useCallback5(
+    async (scopeBrowserSessionId, operation) => {
+      invalidateRefresh();
+      if (mutationRef.current.browserSessionId !== scopeBrowserSessionId) {
+        mutationRef.current = {
+          browserSessionId: scopeBrowserSessionId,
+          count: 0
+        };
+      }
+      mutationRef.current.count += 1;
+      setState(
+        (current) => current.browserSessionId === scopeBrowserSessionId ? { ...current, mutating: true, error: null } : current
+      );
+      try {
+        return await operation();
+      } catch (cause) {
+        const error = cause instanceof Error ? cause : new Error(String(cause));
+        setState(
+          (current) => current.browserSessionId === scopeBrowserSessionId ? { ...current, error } : current
+        );
+        throw error;
+      } finally {
+        if (mutationRef.current.browserSessionId === scopeBrowserSessionId) {
+          mutationRef.current.count = Math.max(0, mutationRef.current.count - 1);
+          const mutating = mutationRef.current.count > 0;
+          setState(
+            (current) => current.browserSessionId === scopeBrowserSessionId ? { ...current, mutating } : current
+          );
+        }
+      }
+    },
+    [invalidateRefresh]
+  );
+  const selectTarget = useCallback5(
+    async (targetId) => {
+      if (!browserSessionId) throw new Error("No BrowserSession is selected.");
+      return await runMutation(browserSessionId, async () => {
+        let targets = visible.targets;
+        let target;
+        let observation;
+        try {
+          observation = await client.selectBrowserTarget(workspaceId, browserSessionId, targetId);
+          target = observation.target;
+        } catch (cause) {
+          if (!isMissingBrowserTarget(cause)) throw cause;
+          const response = await client.listBrowserTargets(workspaceId, browserSessionId);
+          targets = response.targets;
+          const fallback = chooseTarget(targets, null);
+          if (!fallback) {
+            selectedTargetIdRef.current = null;
+            observationRef.current = { browserSessionId, observation: null };
+            setState(
+              (current) => current.browserSessionId === browserSessionId ? {
+                ...current,
+                targets,
+                selectedTargetId: null,
+                observation: null
+              } : current
+            );
+            throw cause;
+          }
+          observation = await client.selectBrowserTarget(
+            workspaceId,
+            browserSessionId,
+            fallback.id
+          );
+          target = observation.target;
+        }
+        selectedTargetIdRef.current = target.id;
+        observationRef.current = { browserSessionId, observation };
+        setState(
+          (current) => current.browserSessionId === browserSessionId ? {
+            ...current,
+            targets: targets.map((candidate) => ({
+              ...candidate,
+              selected: candidate.id === target.id
+            })),
+            selectedTargetId: target.id,
+            observation
+          } : current
+        );
+        return target;
+      });
+    },
+    [browserSessionId, client, runMutation, visible.targets, workspaceId]
+  );
+  const openTarget = useCallback5(
+    async (url) => {
+      if (!browserSessionId) throw new Error("No BrowserSession is selected.");
+      return await runMutation(browserSessionId, async () => {
+        const observation = await client.openBrowserTarget(
+          workspaceId,
+          browserSessionId,
+          url === void 0 ? {} : { url }
+        );
+        const target = observation.target;
+        selectedTargetIdRef.current = target.id;
+        observationRef.current = { browserSessionId, observation };
+        setState(
+          (current) => current.browserSessionId === browserSessionId ? {
+            ...current,
+            targets: [
+              ...current.targets.map((candidate) => ({
+                ...candidate,
+                selected: false
+              })),
+              target
+            ],
+            selectedTargetId: target.id,
+            observation
+          } : current
+        );
+        return target;
+      });
+    },
+    [browserSessionId, client, runMutation, workspaceId]
+  );
+  const closeTarget = useCallback5(
+    async (targetId) => {
+      if (!browserSessionId) throw new Error("No BrowserSession is selected.");
+      await runMutation(browserSessionId, async () => {
+        const response = await client.closeBrowserTarget(workspaceId, browserSessionId, targetId);
+        const selected = chooseTarget(response.targets, null);
+        const observation = selected ? await client.observeBrowserTarget(workspaceId, browserSessionId, selected.id) : null;
+        selectedTargetIdRef.current = selected?.id ?? null;
+        observationRef.current = { browserSessionId, observation };
+        setState(
+          (current) => current.browserSessionId === browserSessionId ? {
+            ...current,
+            targets: response.targets,
+            selectedTargetId: selected?.id ?? null,
+            observation
+          } : current
+        );
+      });
+    },
+    [browserSessionId, client, runMutation, workspaceId]
+  );
+  const dispatchAction = useCallback5(
+    async (action, operationId, frame) => {
+      if (!browserSessionId) throw new Error("No BrowserSession is selected.");
+      if (frame && frame.browserSessionId !== browserSessionId) {
+        throw new Error("The displayed browser frame belongs to another BrowserSession.");
+      }
+      const currentObservation = observationRef.current.browserSessionId === browserSessionId ? observationRef.current.observation : null;
+      const fence = frame ? {
+        targetId: frame.targetId,
+        expectedTargetGeneration: frame.targetGeneration,
+        expectedDocumentGeneration: frame.documentGeneration,
+        expectedFrameId: frame.frameId
+      } : currentObservation ? {
+        targetId: currentObservation.target.id,
+        expectedTargetGeneration: currentObservation.target.targetGeneration,
+        expectedDocumentGeneration: currentObservation.target.documentGeneration,
+        expectedFrameId: currentObservation.frameId
+      } : null;
+      if (!fence) {
+        throw new Error("The browser page is not ready for input.");
+      }
+      try {
+        const receipt = await client.actInBrowser(workspaceId, browserSessionId, {
+          operationId,
+          ...fence,
+          observationMode: "none",
+          action
+        });
+        if (receipt.observation) {
+          observationRef.current = {
+            browserSessionId,
+            observation: receipt.observation
+          };
+          setState(
+            (current) => current.browserSessionId === browserSessionId ? {
+              ...current,
+              observation: receipt.observation,
+              targets: replaceTarget(current.targets, receipt.observation.target)
+            } : current
+          );
+        }
+        return receipt;
+      } catch (cause) {
+        const error = cause instanceof Error ? cause : new Error(String(cause));
+        setState(
+          (current) => current.browserSessionId === browserSessionId ? { ...current, error } : current
+        );
+        throw error;
+      }
+    },
+    [browserSessionId, client, workspaceId]
+  );
+  const act = useCallback5(
+    async (action, operationId = crypto.randomUUID()) => await dispatchAction(action, operationId, null),
+    [dispatchAction]
+  );
+  const actFromFrame = useCallback5(
+    async (action, frame, operationId = crypto.randomUUID()) => await dispatchAction(action, operationId, frame),
+    [dispatchAction]
+  );
+  const diagnostics = useCallback5(
+    async (diagnosticOptions = {}) => {
+      const targetId = selectedTargetIdRef.current;
+      if (!browserSessionId || !targetId) {
+        throw new Error("No browser tab is selected.");
+      }
+      return await client.listBrowserDiagnostics(
+        workspaceId,
+        browserSessionId,
+        targetId,
+        diagnosticOptions
+      );
+    },
+    [browserSessionId, client, workspaceId]
+  );
+  const readClipboard = useCallback5(async () => {
+    if (!browserSessionId) throw new Error("No BrowserSession is selected.");
+    const clipboard = await client.readBrowserClipboard(workspaceId, browserSessionId);
+    if (clipboard.browserSessionId !== browserSessionId) {
+      throw new Error("Browser clipboard belongs to another BrowserSession.");
+    }
+    return clipboard;
+  }, [browserSessionId, client, workspaceId]);
+  return {
+    session: visible.session,
+    targets: visible.targets,
+    selectedTarget: visible.targets.find((target) => target.id === visible.selectedTargetId) ?? null,
+    observation: visible.observation,
+    loading: visible.loading,
+    mutating: visible.mutating,
+    error: visible.error,
+    refresh,
+    selectTarget,
+    openTarget,
+    closeTarget,
+    act,
+    actFromFrame,
+    readClipboard,
+    diagnostics
+  };
+}
+function emptyState4(browserSessionId, loading) {
+  return {
+    browserSessionId,
+    session: null,
+    targets: [],
+    selectedTargetId: null,
+    observation: null,
+    loading,
+    mutating: false,
+    error: null
+  };
+}
+function chooseTarget(targets, preferredId) {
+  return targets.find((target) => target.id === preferredId) ?? targets.find((target) => target.selected && target.kind === "page") ?? targets.find((target) => target.kind === "page") ?? targets[0] ?? null;
+}
+function replaceTarget(targets, target) {
+  const next = targets.filter((candidate) => candidate.id !== target.id);
+  next.push(target);
+  return next.sort((left, right) => left.createdAt.localeCompare(right.createdAt));
+}
+function isMissingBrowserTarget(error) {
+  return error instanceof OpenGeniApiError && error.code === "target_not_found";
+}
+
+// src/hooks/use-browser-sessions.ts
+import { useCallback as useCallback6, useEffect as useEffect6, useMemo, useRef as useRef6, useState as useState6 } from "react";
+function useBrowserSessions(options = {}) {
+  const {
+    client,
+    workspaceId,
+    registerSessionReconciler,
+    workspaceInteractionEvent,
+    workspaceInteractionConnectionState
+  } = useEmbeddedBrowserInteraction(options);
+  const enabled = options.enabled ?? true;
+  const [state, setState] = useState6(() => emptyState5(workspaceId, enabled));
+  const requestRef = useRef6({
+    id: 0,
+    controller: null
+  });
+  const mountedRef = useRef6(true);
+  const visibleState = state.workspaceId === workspaceId ? state : emptyState5(workspaceId, enabled);
+  const cancelLoad = useCallback6(() => {
+    const id = requestRef.current.id + 1;
+    requestRef.current.controller?.abort();
+    requestRef.current = { id, controller: null };
+  }, []);
+  const load = useCallback6(
+    async (foreground) => {
+      if (!enabled) return;
+      const id = requestRef.current.id + 1;
+      requestRef.current.controller?.abort();
+      const controller = new AbortController();
+      requestRef.current = { id, controller };
+      setState((current) => ({
+        ...current.workspaceId === workspaceId ? current : emptyState5(workspaceId, true),
+        active: true,
+        loading: foreground,
+        refreshing: !foreground,
+        error: foreground || current.workspaceId !== workspaceId ? null : current.error
+      }));
+      try {
+        const response = await client.listBrowserSessions(workspaceId, {
+          signal: controller.signal
+        });
+        if (!mountedRef.current || requestRef.current.id !== id) return;
+        setState({
+          workspaceId,
+          active: true,
+          revision: response.revision,
+          sessions: sortBrowserSessions(response.sessions),
+          loading: false,
+          refreshing: false,
+          error: null
+        });
+      } catch (cause) {
+        if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id)
+          return;
+        const error = cause instanceof Error ? cause : new Error(String(cause));
+        setState((current) => ({
+          ...current.workspaceId === workspaceId ? current : emptyState5(workspaceId, true),
+          loading: false,
+          refreshing: false,
+          error
+        }));
+      } finally {
+        if (requestRef.current.id === id) {
+          requestRef.current = { id, controller: null };
+        }
+      }
+    },
+    [client, enabled, workspaceId]
+  );
+  const refresh = useCallback6(async () => await load(false), [load]);
+  useEffect6(() => {
+    mountedRef.current = true;
+    if (!enabled) {
+      cancelLoad();
+      setState(emptyState5(workspaceId, false));
+      return;
+    }
+    void load(true);
+    return () => {
+      mountedRef.current = false;
+      cancelLoad();
+    };
+  }, [cancelLoad, enabled, load, workspaceId]);
+  useInteractionInvalidation({
+    workspaceId,
+    key: workspaceId,
+    enabled,
+    event: workspaceInteractionEvent,
+    connectionState: workspaceInteractionConnectionState,
+    knownRevision: visibleState.revision,
+    refresh,
+    fallbackPollIntervalMs: options.pollIntervalMs
+  });
+  useEffect6(() => {
+    if (!enabled || !options.sessionId) return;
+    return registerSessionReconciler(options.sessionId, `browser-sessions:${workspaceId}`, refresh);
+  }, [enabled, options.sessionId, refresh, registerSessionReconciler, workspaceId]);
+  const create = useCallback6(
+    async (request) => {
+      const response = await client.createBrowserSession(workspaceId, {
+        ...request,
+        operationId: request.operationId ?? crypto.randomUUID()
+      });
+      setState((current) => mergeSession(current, workspaceId, response.session));
+      return response;
+    },
+    [client, workspaceId]
+  );
+  const end = useCallback6(
+    async (browserSessionId, operationId = crypto.randomUUID()) => {
+      const response = await client.endBrowserSession(workspaceId, browserSessionId, {
+        operationId
+      });
+      setState((current) => mergeSession(current, workspaceId, response.session));
+      return response;
+    },
+    [client, workspaceId]
+  );
+  const suspend = useCallback6(
+    async (browserSessionId, operationId = crypto.randomUUID()) => {
+      const response = await client.suspendBrowserSession(workspaceId, browserSessionId, {
+        operationId
+      });
+      setState((current) => mergeSession(current, workspaceId, response.session));
+      return response;
+    },
+    [client, workspaceId]
+  );
+  const resume = useCallback6(
+    async (browserSessionId, operationId = crypto.randomUUID()) => {
+      const response = await client.resumeBrowserSession(workspaceId, browserSessionId, {
+        operationId
+      });
+      setState((current) => mergeSession(current, workspaceId, response.session));
+      return response;
+    },
+    [client, workspaceId]
+  );
+  const relevantSessions = useMemo(
+    () => options.sessionId ? visibleState.sessions.filter(
+      (session) => session.associations.some((association) => association.sessionId === options.sessionId)
+    ) : [],
+    [options.sessionId, visibleState.sessions]
+  );
+  return {
+    revision: visibleState.revision,
+    sessions: visibleState.sessions,
+    relevantSessions,
+    // A disabled registry is deliberately empty. Expose the first re-enabled
+    // render as loading so consumers do not reconcile against that empty gap.
+    loading: enabled ? !visibleState.active || visibleState.loading : false,
+    refreshing: visibleState.refreshing,
+    error: visibleState.error,
+    refresh,
+    create,
+    suspend,
+    resume,
+    end
+  };
+}
+function emptyState5(workspaceId, loading) {
+  return {
+    workspaceId,
+    active: false,
+    revision: 0,
+    sessions: [],
+    loading,
+    refreshing: false,
+    error: null
+  };
+}
+function sortBrowserSessions(sessions) {
+  return [...sessions].sort((left, right) => {
+    const live = Number(isLiveBrowser(right)) - Number(isLiveBrowser(left));
+    return live || timestamp3(right.lastUsedAt) - timestamp3(left.lastUsedAt) || left.id.localeCompare(right.id);
+  });
+}
+function isLiveBrowser(session) {
+  return !["ending", "ended", "failed", "lost"].includes(session.lifecycle);
+}
+function timestamp3(value) {
+  const parsed = Date.parse(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function mergeSession(current, workspaceId, session) {
+  if (current.workspaceId !== workspaceId) return current;
+  const sessions = current.sessions.filter((candidate) => candidate.id !== session.id);
+  sessions.push(session);
+  return { ...current, sessions: sortBrowserSessions(sessions), error: null };
+}
+
+// src/hooks/use-site-auth-connections.ts
+import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef7, useState as useState7 } from "react";
+function useSiteAuthConnections(options = {}) {
+  const { client, workspaceId, workspaceInteractionEvent, workspaceInteractionConnectionState } = useEmbeddedBrowserInteraction(options);
+  const enabled = options.enabled ?? true;
+  const includeArchived = options.includeArchived ?? false;
+  const key = `${workspaceId}:${includeArchived ? "all" : "active"}`;
+  const [state, setState] = useState7(() => emptyState6(key, enabled));
+  const [mutationCount, setMutationCount] = useState7(0);
+  const requestRef = useRef7({
+    id: 0,
+    controller: null
+  });
+  const mountedRef = useRef7(true);
+  const visible = state.key === key ? state : emptyState6(key, enabled);
+  const cancelLoad = useCallback7(() => {
+    requestRef.current.controller?.abort();
+    requestRef.current = { id: requestRef.current.id + 1, controller: null };
+  }, []);
+  const load = useCallback7(
+    async (foreground) => {
+      if (!enabled) return;
+      const id = requestRef.current.id + 1;
+      requestRef.current.controller?.abort();
+      const controller = new AbortController();
+      requestRef.current = { id, controller };
+      setState((current) => ({
+        ...current.key === key ? current : emptyState6(key, true),
+        loading: foreground,
+        refreshing: !foreground,
+        error: foreground || current.key !== key ? null : current.error
+      }));
+      try {
+        const response = await client.listSiteAuthConnections(workspaceId, {
+          includeArchived,
+          signal: controller.signal
+        });
+        if (!mountedRef.current || requestRef.current.id !== id) return;
+        setState({
+          key,
+          revision: response.revision,
+          connections: sortConnections(response.connections),
+          loading: false,
+          refreshing: false,
+          error: null
+        });
+      } catch (cause) {
+        if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id)
+          return;
+        setState((current) => ({
+          ...current.key === key ? current : emptyState6(key, true),
+          loading: false,
+          refreshing: false,
+          error: asError2(cause)
+        }));
+      } finally {
+        if (requestRef.current.id === id) requestRef.current = { id, controller: null };
+      }
+    },
+    [client, enabled, includeArchived, key, workspaceId]
+  );
+  const refresh = useCallback7(async () => await load(false), [load]);
+  useEffect7(() => {
+    mountedRef.current = true;
+    if (!enabled) {
+      cancelLoad();
+      setState(emptyState6(key, false));
+      return;
+    }
+    void load(true);
+    return () => {
+      mountedRef.current = false;
+      cancelLoad();
+    };
+  }, [cancelLoad, enabled, key, load]);
+  useInteractionInvalidation({
+    workspaceId,
+    key,
+    enabled,
+    event: workspaceInteractionEvent,
+    connectionState: workspaceInteractionConnectionState,
+    knownRevision: visible.revision,
+    refresh
+  });
+  const mutate = useCallback7(async (operation) => {
+    setMutationCount((count) => count + 1);
+    try {
+      return await operation();
+    } finally {
+      if (mountedRef.current) setMutationCount((count) => Math.max(0, count - 1));
+    }
+  }, []);
+  const merge = useCallback7(
+    (connection) => {
+      setState((current) => {
+        if (current.key !== key) return current;
+        const connections = current.connections.filter(
+          (candidate) => candidate.id !== connection.id
+        );
+        if (includeArchived || connection.status !== "archived") connections.push(connection);
+        return { ...current, connections: sortConnections(connections), error: null };
+      });
+    },
+    [includeArchived, key]
+  );
+  const create = useCallback7(
+    async (request) => await mutate(async () => {
+      const response = await client.createSiteAuthConnection(workspaceId, {
+        ...request,
+        operationId: request.operationId ?? crypto.randomUUID()
+      });
+      merge(response.connection);
+      return response;
+    }),
+    [client, merge, mutate, workspaceId]
+  );
+  const update = useCallback7(
+    async (connectionId, request) => await mutate(async () => {
+      const response = await client.updateSiteAuthConnection(workspaceId, connectionId, {
+        ...request,
+        operationId: request.operationId ?? crypto.randomUUID()
+      });
+      merge(response.connection);
+      return response;
+    }),
+    [client, merge, mutate, workspaceId]
+  );
+  return {
+    revision: visible.revision,
+    connections: visible.connections,
+    loading: visible.loading,
+    refreshing: visible.refreshing,
+    mutating: mutationCount > 0,
+    error: visible.error,
+    refresh,
+    create,
+    update
+  };
+}
+function emptyState6(key, loading) {
+  return {
+    key,
+    revision: 0,
+    connections: [],
+    loading,
+    refreshing: false,
+    error: null
+  };
+}
+function sortConnections(connections) {
+  return [...connections].sort(
+    (left, right) => Number(left.status === "archived") - Number(right.status === "archived") || left.name.localeCompare(right.name) || left.accountLabel.localeCompare(right.accountLabel)
+  );
+}
+function asError2(cause) {
+  return cause instanceof Error ? cause : new Error(String(cause));
+}
+
+// src/components/browser-input.ts
+var HUMAN_BROWSER_HOME_URL = "https://www.google.com/";
+var HUMAN_BROWSER_SEARCH_URL = "https://www.google.com/search?q=";
+function normalizeBrowserAddress(value) {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (/^(?:https?|about):/iu.test(trimmed)) {
+    try {
+      const url = new URL(trimmed);
+      return ["http:", "https:", "about:"].includes(url.protocol) ? url.href : null;
+    } catch {
+      return `${HUMAN_BROWSER_SEARCH_URL}${encodeURIComponent(trimmed)}`;
+    }
+  }
+  const isLocal = /^(?:localhost|127(?:\.\d{1,3}){3}|\[::1\])(?::\d+)?(?:[/?#]|$)/iu.test(trimmed);
+  const looksLikeHost = !/\s/u.test(trimmed) && (isLocal || /^(?:[^./\s]+\.)+[^./\s]+(?::\d+)?(?:[/?#]|$)/u.test(trimmed));
+  if (!looksLikeHost) return `${HUMAN_BROWSER_SEARCH_URL}${encodeURIComponent(trimmed)}`;
+  try {
+    return new URL(`${isLocal ? "http" : "https"}://${trimmed}`).href;
+  } catch {
+    return `${HUMAN_BROWSER_SEARCH_URL}${encodeURIComponent(trimmed)}`;
+  }
+}
+function browserKey(event, hostPlatform = interactionHostPlatform()) {
+  if (["Alt", "AltGraph", "Control", "Meta", "Shift"].includes(event.key)) return null;
+  const special = /* @__PURE__ */ new Set([
+    "Enter",
+    "Tab",
+    "Escape",
+    "Backspace",
+    "Delete",
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight"
+  ]);
+  const modified = event.altKey || event.ctrlKey || event.metaKey;
+  if (!modified && !special.has(event.key)) return null;
+  const parts = [];
+  if (event.ctrlKey) parts.push(hostPlatform === "mac" ? "Control" : "Mod");
+  if (event.altKey) parts.push("Alt");
+  if (event.metaKey) parts.push(hostPlatform === "mac" ? "Mod" : "Meta");
+  if (event.shiftKey) parts.push("Shift");
+  parts.push(event.key === " " ? "Space" : event.key);
+  return parts.join("+");
+}
+
+// src/components/browser-viewer.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function BrowserViewer({
+  sessionId,
+  enabled = true,
+  className,
+  onNotify,
+  webSocketFactory,
+  renderEmpty,
+  createLinkedComputer,
+  onOpenComputer,
+  initialBrowserSessionId,
+  onBrowserSessionIdChange,
+  browserExtensionSetupUrl,
+  ...override
+}) {
+  const registry = useBrowserSessions({ ...override, sessionId, enabled });
+  const attached = useAttachedBrowsers({ ...override, enabled });
+  const onlineAttachedBridges = useMemo2(
+    () => 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 = useMemo2(
+    () => registry.sessions.filter((session) => isLiveBrowser2(session)),
+    [registry.sessions]
+  );
+  const attachedGenerationLoss = useMemo2(
+    () => attachedChromeGenerationLoss(registry.sessions),
+    [registry.sessions]
+  );
+  const endedGenerationLossRef = useRef8(/* @__PURE__ */ new Set());
+  const endStaleBrowser = registry.end;
+  useEffect8(() => {
+    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(() => {
+        endedGenerationLossRef.current.delete(session.id);
+      });
+    }
+  }, [enabled, endStaleBrowser, registry.sessions]);
+  const replacementChromeDevice = useMemo2(() => {
+    if (!attachedGenerationLoss) return null;
+    return attached.devices.find((candidate) => candidate.id === attachedGenerationLoss.deviceId) ?? null;
+  }, [attached.devices, attachedGenerationLoss]);
+  const relevant = useMemo2(
+    () => registry.relevantSessions.filter((session) => isLiveBrowser2(session)),
+    [registry.relevantSessions]
+  );
+  const [selection, setSelection] = useState8(
+    () => initialBrowserSessionId ? { sessionId: initialBrowserSessionId, pinned: true } : null
+  );
+  const selectBrowserSession = useCallback8(
+    (next) => {
+      setSelection(next);
+      onBrowserSessionIdChange?.(next?.sessionId ?? null);
+    },
+    [onBrowserSessionIdChange]
+  );
+  const interventions = useInteractionInterventions({
+    ...override,
+    enabled,
+    resourceKind: "browser_session"
+  });
+  const [creating, setCreating] = useState8(false);
+  const [savingProfile, setSavingProfile] = useState8(false);
+  const [baseRevisionOrdinal, setBaseRevisionOrdinal] = useState8(null);
+  const [profileHistory, setProfileHistory] = useState8(null);
+  const [resumeAttempt, setResumeAttempt] = useState8(null);
+  const resumeAttemptsRef = useRef8(/* @__PURE__ */ new Map());
+  const previousSessionIdRef = useRef8(sessionId);
+  const seenInterventionIdsRef = useRef8(/* @__PURE__ */ new Set());
+  const diagnosticRequestRef = useRef8(0);
+  const [diagnosticsView, setDiagnosticsView] = useState8(null);
+  const notifyError = useCallback8(
+    (cause, fallback) => {
+      const message = cause instanceof Error ? cause.message : fallback;
+      onNotify?.({ kind: "error", message });
+    },
+    [onNotify]
+  );
+  useEffect8(() => {
+    if (previousSessionIdRef.current !== sessionId) {
+      previousSessionIdRef.current = sessionId;
+      setSelection(
+        initialBrowserSessionId ? { sessionId: initialBrowserSessionId, pinned: true } : null
+      );
+    }
+  }, [initialBrowserSessionId, sessionId]);
+  useEffect8(() => {
+    if (!enabled || registry.loading) return;
+    const selectedStillLive = liveSessions.some((session) => session.id === selection?.sessionId);
+    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 = useMemo2(
+    () => liveSessions.find((session) => session.id === selection?.sessionId) ?? null,
+    [liveSessions, selection?.sessionId]
+  );
+  const interventionCounts = useMemo2(
+    () => countInterventions(interventions.interventions),
+    [interventions.interventions]
+  );
+  const selectedInterventions = useMemo2(
+    () => interventions.interventions.filter(
+      (intervention) => intervention.resourceId === selection?.sessionId
+    ),
+    [interventions.interventions, selection?.sessionId]
+  );
+  const controllerReady = selectedRegistrySession?.lifecycle === "active";
+  const resumeSession = registry.resume;
+  const wakeBrowser = useCallback8(
+    async (session, retry = false) => {
+      const current = resumeAttemptsRef.current.get(session.id);
+      if (current?.running || !retry && current) return;
+      const operationId = current && !current.terminal ? current.operationId : crypto.randomUUID();
+      const attempt = {
+        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 ?? "Browser could not reopen."),
+            { 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 = {
+          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, "Could not reopen this browser.");
+      }
+    },
+    [notifyError, resumeSession]
+  );
+  useEffect8(() => {
+    if (!selectedRegistrySession) return;
+    if (selectedRegistrySession.lifecycle === "active") {
+      resumeAttemptsRef.current.delete(selectedRegistrySession.id);
+      setResumeAttempt(
+        (visible) => visible?.sessionId === selectedRegistrySession.id ? null : visible
+      );
+      return;
+    }
+    if (selectedRegistrySession.lifecycle === "suspended") {
+      void wakeBrowser(selectedRegistrySession);
+    }
+  }, [selectedRegistrySession, wakeBrowser]);
+  const browser = useBrowserSession({
+    ...override,
+    browserSessionId: selection?.sessionId ?? null,
+    enabled: enabled && selection !== null && controllerReady
+  });
+  useEffect8(() => {
+    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;
+  useEffect8(() => {
+    for (const intervention of interventions.interventions) {
+      if (seenInterventionIdsRef.current.has(intervention.id)) continue;
+      seenInterventionIdsRef.current.add(intervention.id);
+      onNotify?.({
+        kind: "info",
+        message: `${interventionTitle(intervention)}: ${intervention.reason}`
+      });
+    }
+  }, [interventions.interventions, onNotify]);
+  const resolveIntervention = useCallback8(
+    (intervention, outcome) => {
+      void interventions.resolve(intervention.id, {
+        expectedVersion: intervention.version,
+        outcome
+      }).then(() => {
+        onNotify?.({
+          kind: "info",
+          message: outcome === "completed" ? "Agent notified. Continuing work." : "Request cancelled."
+        });
+      }).catch((cause) => notifyError(cause, "Could not update the browser request."));
+    },
+    [interventions, notifyError, onNotify]
+  );
+  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: 1920, maxHeight: 1200 },
+    ...webSocketFactory ? { webSocketFactory } : {}
+  });
+  const displayedFrame = frameMatchesSelectedTarget(
+    frames.frame,
+    browser.session,
+    browser.selectedTarget
+  ) ? frames.frame : null;
+  const supportsLiveFrames = browser.session?.capabilities.liveFrames === true;
+  const displayConnectionState = supportsLiveFrames ? frames.state === "live" && !displayedFrame ? "connecting" : frames.state : "semantic";
+  const selectedProfile = useMemo2(
+    () => profiles.identities.find(
+      (identity) => identity.id === (browser.session?.identityId ?? selectedRegistrySession?.identityId)
+    ) ?? null,
+    [browser.session?.identityId, profiles.identities, selectedRegistrySession?.identityId]
+  );
+  const selectedProfileAuth = useMemo2(
+    () => selectedProfile ? siteAuth.connections.filter(
+      (connection) => connection.preferredIdentityId === selectedProfile.id
+    ) : [],
+    [selectedProfile, siteAuth.connections]
+  );
+  useEffect8(() => {
+    diagnosticRequestRef.current += 1;
+    setDiagnosticsView(null);
+  }, [browser.session?.id, browser.selectedTarget?.id]);
+  const loadDiagnostics = useCallback8(() => {
+    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 = useCallback8(() => {
+    diagnosticRequestRef.current += 1;
+    setDiagnosticsView(null);
+  }, []);
+  const refreshDiagnostics = useCallback8(() => {
+    loadDiagnostics();
+    if (browser.session?.capabilities.downloads) void downloads.refresh();
+  }, [browser.session?.capabilities.downloads, downloads, loadDiagnostics]);
+  const saveDownload = useCallback8(
+    async (downloadId, destinationPath, overwrite) => {
+      const response = await downloads.saveToWorkspace(downloadId, destinationPath, { overwrite });
+      onNotify?.({
+        kind: "info",
+        message: `${response.download.filename} saved to ${response.destinationPath}.`
+      });
+      return response;
+    },
+    [downloads, onNotify]
+  );
+  useEffect8(() => {
+    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 = useCallback8(
+    (choice = { 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: "This browser profile is no longer available. Refresh and choose another."
+        });
+        return;
+      }
+      const device = choice.kind === "attached" ? choice.device : null;
+      const browserName = device?.profileLabel ?? device?.name ?? (identity ? `${identity.name} browser` : "Browser");
+      setCreating(true);
+      void (async () => {
+        let linkedComputer = null;
+        let computerViewUnavailable = false;
+        if (createLinkedComputer) {
+          try {
+            linkedComputer = await createLinkedComputer(
+              `${browserName} desktop`,
+              device ? { kind: "attached_device", deviceId: device.id } : void 0
+            );
+          } catch {
+            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",
+              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: "Browser opened. Desktop view is unavailable on this placement."
+          });
+        }
+      })().catch((cause) => notifyError(cause, "Could not open a browser.")).finally(() => setCreating(false));
+    },
+    [
+      createLinkedComputer,
+      createRegistryBrowser,
+      creating,
+      notifyError,
+      onNotify,
+      selectBrowserSession,
+      profiles.identities,
+      sessionId
+    ]
+  );
+  const saveProfileVersion = useCallback8(
+    async (newProfileName) => {
+      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;
+          identity = profiles.identities.find(
+            (candidate) => candidate.status === "active" && candidate.revisionCount === 0 && candidate.name.localeCompare(name, void 0, { 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" ? `${response.identity.name} version ${response.revision.ordinal} saved for future browsers.` : `${response.identity.name} version ${response.revision.ordinal} saved. Another version remains the default.`
+        });
+        return true;
+      } catch (cause) {
+        notifyError(cause, "Could not save this browser profile.");
+        return false;
+      } finally {
+        setSavingProfile(false);
+      }
+    },
+    [browser, notifyError, onNotify, profiles, registry, savingProfile, selectedProfile]
+  );
+  const updateProfile = useCallback8(
+    async (identity, update) => {
+      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: `${response.identity.name}${ordinal ? ` version ${ordinal}` : ""} will open by default in future browsers.`
+          });
+        } else if (update.status === "archived") {
+          onNotify?.({
+            kind: "info",
+            message: `${response.identity.name} hidden from new browsers. Existing browsers are unchanged.`
+          });
+        } else if (update.status === "active") {
+          onNotify?.({ kind: "info", message: `${response.identity.name} restored.` });
+        }
+        return true;
+      } catch (cause) {
+        notifyError(cause, "Could not update this browser profile.");
+        await profiles.refresh().catch(() => void 0);
+        return false;
+      } finally {
+        setSavingProfile(false);
+      }
+    },
+    [notifyError, onNotify, profileHistory?.revisions, profiles, savingProfile]
+  );
+  if (!enabled) return null;
+  if (registry.loading && liveSessions.length === 0) {
+    return /* @__PURE__ */ jsx(
+      BrowserNotice,
+      {
+        icon: /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "animate-spin" }),
+        text: "Finding browsers\u2026",
+        ...className ? { className } : {}
+      }
+    );
+  }
+  if (liveSessions.length === 0) {
+    if (renderEmpty) return /* @__PURE__ */ jsx(Fragment, { children: renderEmpty(() => createBrowser(), creating) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("flex h-full min-h-0 items-center justify-center bg-og-bg p-6", className),
+        children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm text-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "mx-auto grid size-10 place-items-center rounded-og-md border border-og-border bg-og-surface-1 text-og-muted", children: /* @__PURE__ */ jsx(Globe2Icon, { className: "size-4.5" }) }),
+          /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: attachedGenerationLoss ? "Chrome reconnected\u2014open a fresh browser/desktop." : "No browser open" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-muted", children: attachedGenerationLoss ? "This Chrome profile is live again, but the previous browser cannot move to the new connection. Use Browser \u2192 New browser \u2192 Connected Chrome." : "A browser appears here when this agent\u2014or another agent in the workspace\u2014opens one." }),
+          /* @__PURE__ */ jsx(
+            BrowserLaunchMenu,
+            {
+              attachedBridges: onlineAttachedBridges,
+              attachedDevices: attached.devices,
+              identities: profiles.identities,
+              creating,
+              mutatingProfile: savingProfile,
+              onCreate: createBrowser,
+              onRestore: (identity) => updateProfile(identity, { status: "active" }),
+              setupUrl: browserExtensionSetupUrl,
+              prominent: true
+            }
+          ),
+          registry.error ? /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-control text-og-status-error", children: registry.error.message }) : null
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative flex h-full min-h-0 flex-col overflow-hidden bg-og-bg", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          BrowserToolbar,
+          {
+            sessions: liveSessions,
+            relevantSessionIds: new Set(relevant.map((session) => session.id)),
+            selectedSessionId: selection?.sessionId ?? null,
+            identities: profiles.identities,
+            attachedBridges: onlineAttachedBridges,
+            attachedDevices: attached.devices,
+            selectedProfile,
+            baseRevisionOrdinal,
+            profileHistory,
+            authConnections: selectedProfileAuth,
+            creating,
+            savingProfile,
+            refreshing: registry.refreshing || attached.refreshing,
+            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
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          InteractionInterventionBanner,
+          {
+            interventions: selectedInterventions,
+            activeTargetId: browser.selectedTarget?.id ?? null,
+            mutating: interventions.mutating,
+            onOpen: (intervention) => void browser.selectTarget(intervention.targetId).catch((cause) => notifyError(cause, "Could not open the requested browser tab.")),
+            onResolve: resolveIntervention
+          }
+        ),
+        !selectedRegistrySession ? /* @__PURE__ */ jsx(
+          BrowserUnselectedPanel,
+          {
+            peerCount: liveSessions.length,
+            creating,
+            onCreate: () => createBrowser()
+          }
+        ) : !controllerReady ? /* @__PURE__ */ jsx(
+          BrowserLifecyclePanel,
+          {
+            session: selectedRegistrySession,
+            attempt: resumeAttempt?.sessionId === selectedRegistrySession.id ? resumeAttempt.attempt : null,
+            onResume: () => void wakeBrowser(selectedRegistrySession, true)
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            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, "Could not switch tabs.")),
+              onClose: (targetId) => void browser.closeTarget(targetId).catch((cause) => notifyError(cause, "Could not close the tab.")),
+              onOpen: () => void browser.openTarget(HUMAN_BROWSER_HOME_URL).catch((cause) => notifyError(cause, "Could not open a tab."))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BrowserAddressBar,
+            {
+              target: browser.selectedTarget,
+              loading: browser.loading || browser.mutating || savingProfile,
+              onNavigate: (url) => void browser.act({ type: "navigate", url }).catch((cause) => notifyError(cause, "Could not navigate.")),
+              onReload: () => {
+                const url = browser.selectedTarget?.url;
+                if (url)
+                  void browser.act({ type: "navigate", url }).catch((cause) => notifyError(cause, "Could not reload."));
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BrowserViewport,
+            {
+              frame: displayedFrame,
+              connectionState: displayConnectionState,
+              supportsLiveFrames,
+              connectionError: frames.error,
+              observation: browser.observation,
+              mutating: browser.mutating || savingProfile,
+              activityLabel: savingProfile ? "Saving browser version\u2026" : void 0,
+              clipboardEnabled: browser.session?.capabilities.clipboard === true,
+              onAction: async (action, frame) => {
+                const receipt = frame ? await browser.actFromFrame(action, frame) : await browser.act(action);
+                if (receipt.state !== "completed") {
+                  throw new Error(receipt.error?.message ?? "Browser input did not complete.");
+                }
+                return receipt;
+              },
+              onReadClipboard: browser.readClipboard,
+              onReconnect: attachedGenerationLoss || isAttachedChromeGenerationLossError(frames.error) ? () => {
+                if (replacementChromeDevice) {
+                  createBrowser({ kind: "attached", device: replacementChromeDevice });
+                }
+              } : frames.reconnect,
+              reconnectLabel: (attachedGenerationLoss || isAttachedChromeGenerationLossError(frames.error)) && replacementChromeDevice ? "Open a fresh Connected Chrome" : void 0,
+              reconnectMessage: attachedGenerationLoss || isAttachedChromeGenerationLossError(frames.error) ? "Chrome reconnected\u2014open a fresh browser/desktop." : void 0,
+              onError: (cause) => notifyError(cause, "Browser input failed.")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BrowserStatusBar,
+            {
+              session: browser.session,
+              profile: selectedProfile,
+              target: browser.selectedTarget,
+              observation: browser.observation,
+              connectionState: displayConnectionState,
+              refreshing: registry.refreshing,
+              diagnosticsOpen: diagnosticsView !== null,
+              onOpenComputer: browser.session?.linkedComputerSessionId && onOpenComputer ? () => {
+                const computerSessionId = browser.session?.linkedComputerSessionId;
+                if (computerSessionId) onOpenComputer(computerSessionId);
+              } : void 0,
+              onDiagnostics: diagnosticsView ? closeDiagnostics : loadDiagnostics
+            }
+          )
+        ] }),
+        diagnosticsView ? /* @__PURE__ */ jsx(
+          BrowserDiagnosticsDrawer,
+          {
+            session: browser.session,
+            profile: selectedProfile,
+            target: browser.selectedTarget,
+            observation: browser.observation,
+            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
+      ]
+    }
+  );
+}
+function BrowserLifecyclePanel(props) {
+  const failed = props.attempt?.error ?? null;
+  const label = failed ? "Browser could not reopen" : props.session.lifecycle === "suspending" ? "Saving browser state\u2026" : props.session.lifecycle === "restoring" || props.attempt?.running ? "Opening browser\u2026" : props.session.lifecycle === "starting" ? "Starting browser\u2026" : "Browser is sleeping";
+  const detail = failed ? failed.message : props.session.lifecycle === "suspended" ? "Its private state is saved. Opening it creates a fresh, isolated browser process." : "The browser will reconnect here when it is ready.";
+  return /* @__PURE__ */ jsx("div", { className: "grid min-h-0 flex-1 place-items-center bg-og-bg p-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "mx-auto grid size-10 place-items-center rounded-og-md border border-og-border bg-og-surface-1 text-og-muted", children: failed ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-4.5 text-og-status-error" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-4.5 animate-spin" }) }),
+    /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: label }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-muted", children: detail }),
+    failed || props.session.lifecycle === "suspended" && !props.attempt?.running ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: props.onResume,
+        className: "mt-4 inline-flex h-8 items-center rounded-og-sm border border-og-border bg-og-surface-1 px-3 text-og-control font-medium text-og-fg transition hover:bg-og-surface-2",
+        children: "Open browser"
+      }
+    ) : null
+  ] }) });
+}
+function BrowserToolbar(props) {
+  const detailsRef = useRef8(null);
+  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) => {
+    props.onSelect(id);
+    detailsRef.current?.removeAttribute("open");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-10 shrink-0 items-center gap-1.5 border-b border-og-border bg-og-surface-0 px-2", children: [
+    /* @__PURE__ */ jsxs("details", { ref: detailsRef, className: "relative min-w-0", children: [
+      /* @__PURE__ */ jsxs("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", children: [
+        /* @__PURE__ */ jsx(Globe2Icon, { className: "size-3.5 shrink-0 text-og-muted" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: selected?.name ?? "Browser" }),
+        (props.interventionCounts.get(selected?.id ?? "") ?? 0) > 0 ? /* @__PURE__ */ jsx("span", { className: "size-1.5 shrink-0 rounded-full bg-og-status-waiting" }) : null,
+        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3 shrink-0 text-og-subtle" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "absolute left-0 top-8 z-30 w-72 overflow-hidden rounded-og-md border border-og-border bg-og-surface-1 p-1 shadow-xl", children: [
+        /* @__PURE__ */ jsx(
+          BrowserSessionGroup,
+          {
+            label: "Current agent",
+            sessions: current,
+            identities: props.identities,
+            selectedId: props.selectedSessionId,
+            interventionCounts: props.interventionCounts,
+            onSelect: choose
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BrowserSessionGroup,
+          {
+            label: "Workspace browsers",
+            sessions: others,
+            identities: props.identities,
+            selectedId: props.selectedSessionId,
+            interventionCounts: props.interventionCounts,
+            onSelect: choose
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mt-1 flex gap-1 border-t border-og-border pt-1", children: [
+          current.length > 0 ? /* @__PURE__ */ jsx(MenuButton, { onClick: props.onFollow, children: "Follow agent" }) : null,
+          /* @__PURE__ */ jsxs(MenuButton, { onClick: () => props.onCreate(), disabled: props.creating, children: [
+            /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" }),
+            " New browser"
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-og-xs text-og-subtle", children: placementLabel(selected) }),
+    /* @__PURE__ */ jsx(
+      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
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: props.onRefresh,
+        className: "grid size-7 place-items-center rounded-og-sm text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg",
+        "aria-label": "Refresh browsers",
+        children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: cn("size-3.5", props.refreshing && "animate-spin") })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      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
+      }
+    )
+  ] });
+}
+function BrowserUnselectedPanel(props) {
+  return /* @__PURE__ */ jsx("div", { className: "grid min-h-0 flex-1 place-items-center bg-og-bg p-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "mx-auto grid size-10 place-items-center rounded-og-md border border-og-border bg-og-surface-1 text-og-muted", children: /* @__PURE__ */ jsx(Globe2Icon, { className: "size-4.5" }) }),
+    /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: "No browser for this agent" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-muted", children: props.peerCount === 1 ? "One workspace browser is available from the browser menu." : `${props.peerCount} workspace browsers are available from the browser menu.` }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled: props.creating,
+        onClick: props.onCreate,
+        className: "mt-4 inline-flex h-8 items-center gap-1.5 rounded-og-sm border border-og-border bg-og-surface-1 px-3 text-og-control font-medium text-og-fg transition hover:bg-og-surface-2 disabled:cursor-not-allowed disabled:opacity-50",
+        children: [
+          /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" }),
+          props.creating ? "Opening\u2026" : "New browser"
+        ]
+      }
+    )
+  ] }) });
+}
+function BrowserSessionGroup(props) {
+  if (props.sessions.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
+    /* @__PURE__ */ jsx("p", { className: "px-2 pb-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-subtle", children: props.label }),
+    props.sessions.map((session) => {
+      const identity = props.identities.find((candidate) => candidate.id === session.identityId);
+      const interventionCount = props.interventionCounts.get(session.id) ?? 0;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          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"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "size-1.5 rounded-full",
+                  session.lifecycle === "active" ? "bg-og-status-running" : "bg-og-muted"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "block truncate text-og-control text-og-fg", children: session.name }),
+              /* @__PURE__ */ jsxs("span", { className: "block truncate text-og-xs text-og-subtle", children: [
+                identity ? `${identity.name} \xB7 ` : "",
+                placementLabel(session)
+              ] })
+            ] }),
+            interventionCount > 0 ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-og-status-waiting/12 px-1.5 py-0.5 text-[10px] font-medium text-og-status-waiting", children: interventionCount }) : null
+          ]
+        },
+        session.id
+      );
+    })
+  ] });
+}
+function BrowserLaunchMenu(props) {
+  const detailsRef = useRef8(null);
+  const choose = (choice) => {
+    detailsRef.current?.removeAttribute("open");
+    props.onCreate(choice);
+  };
+  const restore = async (identity) => {
+    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 /* @__PURE__ */ jsxs("details", { ref: detailsRef, className: cn("relative", props.prominent && "mt-4 inline-block"), children: [
+    /* @__PURE__ */ jsxs(
+      "summary",
+      {
+        onClick: (event) => {
+          if (busy) event.preventDefault();
+        },
+        className: cn(
+          "cursor-pointer list-none items-center justify-center gap-1.5 text-og-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": "New browser",
+        children: [
+          busy ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" }),
+          props.prominent ? "New browser" : null,
+          props.prominent ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "absolute z-40 w-72 overflow-hidden rounded-og-md border border-og-border bg-og-surface-1 p-1 text-left shadow-xl",
+          props.prominent ? "left-1/2 top-10 -translate-x-1/2" : "right-0 top-8"
+        ),
+        children: [
+          props.attachedDevices.length > 0 || props.attachedBridges.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "pb-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "px-2 pb-1 pt-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-subtle", children: "Connected Chrome" }),
+            props.attachedDevices.map((device) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                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",
+                children: [
+                  /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3.5 shrink-0 text-og-muted" }),
+                  /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx("span", { className: "block truncate text-og-control text-og-fg", children: device.profileLabel ?? device.name }),
+                    /* @__PURE__ */ jsxs("span", { className: "block truncate text-og-xs text-og-subtle", children: [
+                      device.browserName,
+                      " \xB7 ",
+                      device.tabCount,
+                      " open",
+                      " ",
+                      device.tabCount === 1 ? "tab" : "tabs"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "size-1.5 shrink-0 rounded-full bg-og-status-running" })
+                ]
+              },
+              device.id
+            )),
+            props.attachedBridges.length > 0 ? props.setupUrl ? /* @__PURE__ */ jsxs(
+              "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",
+                children: [
+                  /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5 shrink-0 text-og-muted" }),
+                  /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx("span", { className: "block truncate text-og-control text-og-fg", children: props.attachedDevices.length > 0 ? "Connect another Chrome profile" : "Connect this Chrome profile" }),
+                    /* @__PURE__ */ jsx("span", { className: "block truncate text-og-xs text-og-subtle", children: "Machine connected \xB7 Chrome extension missing" })
+                  ] })
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2 px-2 py-2 text-left", children: [
+              /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3.5 shrink-0 text-og-muted" }),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "block truncate text-og-control text-og-fg", children: "Chrome connection ready" }),
+                /* @__PURE__ */ jsx("span", { className: "block text-og-xs leading-4 text-og-subtle", children: "Install the OpenGeni Browser extension in the profile you want to use." })
+              ] })
+            ] }) : null
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "px-2 pb-1 pt-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-subtle",
+                (props.attachedDevices.length > 0 || props.attachedBridges.length > 0) && "border-t border-og-border"
+              ),
+              children: "Open isolated browser"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "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",
+              children: [
+                /* @__PURE__ */ jsx(Globe2Icon, { className: "size-3.5 text-og-muted" }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("span", { className: "block text-og-control text-og-fg", children: "Fresh browser" }),
+                  /* @__PURE__ */ jsx("span", { className: "block text-og-xs text-og-subtle", children: "Visual browser \xB7 no saved state" })
+                ] })
+              ]
+            }
+          ),
+          activeIdentities.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-1 border-t border-og-border pt-1", children: activeIdentities.map((identity) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              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",
+              children: [
+                /* @__PURE__ */ jsx(UserRoundIcon, { className: "size-3.5 text-og-muted" }),
+                /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("span", { className: "block truncate text-og-control text-og-fg", children: identity.name }),
+                  /* @__PURE__ */ jsx("span", { className: "block text-og-xs text-og-subtle", children: identity.defaultRevisionId ? `${identity.revisionCount} saved version${identity.revisionCount === 1 ? "" : "s"}` : "Ready for first sign-in" })
+                ] })
+              ]
+            },
+            identity.id
+          )) }) : null,
+          archivedIdentities.length > 0 ? /* @__PURE__ */ jsxs("details", { className: "mt-1 border-t border-og-border pt-1", children: [
+            /* @__PURE__ */ jsxs("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-subtle transition hover:bg-og-surface-2 hover:text-og-fg [&::-webkit-details-marker]:hidden", children: [
+              /* @__PURE__ */ jsx(ArchiveIcon, { className: "size-3" }),
+              " Hidden profiles \xB7 ",
+              archivedIdentities.length,
+              /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ml-auto size-3" })
+            ] }),
+            archivedIdentities.map((identity) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                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",
+                children: [
+                  /* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-3.5 text-og-muted" }),
+                  /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate text-og-control text-og-fg", children: [
+                    "Restore ",
+                    identity.name
+                  ] })
+                ]
+              },
+              identity.id
+            ))
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+function BrowserProfileMenu(props) {
+  const detailsRef = useRef8(null);
+  const nameInputId = useId();
+  const [name, setName] = useState8("");
+  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) => {
+    if (await props.onSave(newProfileName)) {
+      setName("");
+      detailsRef.current?.removeAttribute("open");
+    }
+  };
+  const openVersion = (identityId, baseRevisionId) => {
+    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 /* @__PURE__ */ jsxs("details", { ref: detailsRef, className: "relative min-w-0", children: [
+    /* @__PURE__ */ jsxs("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-muted transition hover:bg-og-surface-2 hover:text-og-fg [&::-webkit-details-marker]:hidden", children: [
+      props.saving ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }) : attached ? /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3" }) : /* @__PURE__ */ jsx(UserRoundIcon, { className: "size-3" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: attached ? props.session?.name : props.identity?.name ?? "Temporary" }),
+      attached || props.identity ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-og-subtle", children: [
+        "\xB7 ",
+        versionLabel
+      ] }) : null,
+      /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3 shrink-0 text-og-subtle" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-8 z-40 w-72 rounded-og-md border border-og-border bg-og-surface-1 p-3 shadow-xl", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "grid size-7 shrink-0 place-items-center rounded-og-sm bg-og-surface-2 text-og-muted", children: attached ? /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(UserRoundIcon, { className: "size-3.5" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-og-control font-medium text-og-fg", children: attached ? props.session?.name : props.identity?.name ?? "Temporary browser" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-og-xs leading-4 text-og-subtle", children: attached ? "This session drives the existing Chrome profile and its current login state." : props.identity?.status === "archived" ? "Hidden from new browsers. This already-open browser is unchanged." : props.identity ? props.baseRevisionOrdinal ? `Started from version ${props.baseRevisionOrdinal}.` : "Not saved yet." : "This browser is not reusable yet." })
+        ] })
+      ] }),
+      props.identity && revisions.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t border-og-border pt-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "px-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-subtle", children: "Saved versions" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 max-h-40 overflow-y-auto", children: revisions.map((revision) => {
+          const isDefault = revision.id === props.identity?.defaultRevisionId;
+          const isCurrent = revision.ordinal === props.baseRevisionOrdinal;
+          const materialization = revisionMaterializationSummary(revision);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex w-full items-center gap-1 rounded-og-sm transition hover:bg-og-surface-2",
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: props.saving || props.identity?.status === "archived",
+                    "aria-label": `Open ${props.identity.name} version ${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",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "grid size-4 place-items-center text-og-muted", children: isCurrent ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 text-og-accent" }) : null }),
+                      /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxs("span", { className: "block text-og-control text-og-fg", children: [
+                          "Version ",
+                          revision.ordinal
+                        ] }),
+                        /* @__PURE__ */ jsx("span", { className: "block truncate text-[10px] text-og-subtle", children: materialization.label })
+                      ] }),
+                      isCurrent ? /* @__PURE__ */ jsx("span", { className: "text-[10px] text-og-subtle", children: "Current" }) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: isDefault || props.saving || props.identity?.status === "archived",
+                    "aria-label": isDefault ? `${props.identity.name} version ${revision.ordinal} is the default` : `Use ${props.identity.name} version ${revision.ordinal} by default`,
+                    title: isDefault ? "Default version" : "Use by default",
+                    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-subtle transition hover:bg-og-surface-3 hover:text-og-fg disabled:cursor-default disabled:opacity-70",
+                    children: isDefault ? "Default" : "Make default"
+                  }
+                )
+              ]
+            },
+            revision.id
+          );
+        }) }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 px-2 text-[10px] leading-4 text-og-subtle", children: "Changing the default affects only browsers opened later. Saved browser data can be copied; a website may still expire or re-verify its own session." })
+      ] }) : props.identity && props.history?.identityId === props.identity.id && props.history.loading ? /* @__PURE__ */ jsxs("p", { className: "mt-3 flex items-center gap-1.5 border-t border-og-border px-2 pt-2 text-og-xs text-og-subtle", children: [
+        /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }),
+        " Loading saved versions\u2026"
+      ] }) : null,
+      props.identity && props.authConnections.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t border-og-border pt-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "px-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-subtle", children: "Login health" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 space-y-1", children: props.authConnections.map((connection) => {
+          const health = siteAuthHealth(connection);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-start gap-2 rounded-og-sm px-2 py-1.5",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: cn("mt-1 size-1.5 shrink-0 rounded-full", health.dotClass) }),
+                /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "block truncate text-og-control text-og-fg", children: connection.name }),
+                  /* @__PURE__ */ jsxs("span", { className: "block truncate text-[10px] text-og-subtle", children: [
+                    connection.accountLabel,
+                    " \xB7 ",
+                    health.label
+                  ] })
+                ] })
+              ]
+            },
+            connection.id
+          );
+        }) })
+      ] }) : null,
+      canSave ? props.identity ? /* @__PURE__ */ jsxs(
+        "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",
+          children: [
+            props.saving ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(SaveIcon, { className: "size-3.5" }),
+            props.saving ? "Saving browser version\u2026" : "Save new version"
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
+        "form",
+        {
+          className: "mt-3",
+          onSubmit: (event) => {
+            event.preventDefault();
+            if (name.trim()) void save(name);
+          },
+          children: [
+            /* @__PURE__ */ jsx("label", { className: "text-og-xs font-medium text-og-muted", htmlFor: nameInputId, children: "Profile name" }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-1 flex gap-1.5", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: nameInputId,
+                  value: name,
+                  onInput: (event) => setName(event.currentTarget.value),
+                  maxLength: 200,
+                  placeholder: "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-subtle focus:border-og-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "submit",
+                  disabled: !name.trim() || props.saving,
+                  className: "inline-flex h-8 items-center gap-1 rounded-og-sm bg-og-accent px-2.5 text-og-control font-medium text-white transition hover:opacity-90 disabled:opacity-40",
+                  children: [
+                    props.saving ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(SaveIcon, { className: "size-3.5" }),
+                    "Save"
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      ) : /* @__PURE__ */ jsx("p", { className: "mt-3 rounded-og-sm bg-og-surface-2 px-2.5 py-2 text-og-xs text-og-subtle", children: attached ? "Chrome keeps this profile's state directly; OpenGeni does not copy it automatically." : props.identity?.status === "archived" ? "Restore this profile before saving another version." : "This browser cannot save reusable profile state." }),
+      !attached && props.identity ? /* @__PURE__ */ jsxs(
+        "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-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-50",
+          children: [
+            props.identity.status === "active" ? /* @__PURE__ */ jsx(ArchiveIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-3.5" }),
+            props.identity.status === "active" ? "Hide from new browsers" : "Restore profile"
+          ]
+        }
+      ) : null,
+      canSave ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-[10px] leading-4 text-og-subtle", children: "Saving briefly restarts this browser. Other open browsers are unchanged." }) : null
+    ] })
+  ] });
+}
+function revisionMaterializationSummary(revision) {
+  const materializations = revision.components.map((component) => component.materialization);
+  const placementBound = materializations.find(
+    (materialization) => materialization.portability === "placement_bound"
+  );
+  if (placementBound) {
+    return {
+      label: placementBound.reason ? `This machine only \xB7 ${placementBound.reason}` : "This machine only"
+    };
+  }
+  const providerBound = materializations.find(
+    (materialization) => materialization.portability === "provider_bound"
+  );
+  if (providerBound) {
+    return {
+      label: providerBound.reason ? `Provider-bound \xB7 ${providerBound.reason}` : "Provider-bound"
+    };
+  }
+  return { label: "Portable browser data" };
+}
+function siteAuthHealth(connection) {
+  switch (connection.verificationState) {
+    case "verified":
+      return { label: "Verified", dotClass: "bg-og-status-running" };
+    case "needs_repair":
+      return { label: "Sign-in needs attention", dotClass: "bg-og-status-waiting" };
+    case "failed":
+      return { label: "Verification failed", dotClass: "bg-og-status-error" };
+    case "unknown":
+      return { label: "Not checked yet", dotClass: "bg-og-muted" };
+  }
+}
+function MenuButton(props) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: props.onClick,
+      disabled: props.disabled,
+      className: "flex h-7 flex-1 items-center justify-center gap-1 rounded-og-sm px-2 text-og-control text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-50",
+      children: props.children
+    }
+  );
+}
+function BrowserTabs(props) {
+  const pages = props.targets.filter((target) => target.kind === "page" || target.kind === "popup");
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-9 shrink-0 items-end gap-px overflow-x-auto border-b border-og-border bg-og-surface-0 px-1 pt-1", children: [
+    pages.map((target) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        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-muted hover:bg-og-surface-1"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => props.onSelect(target.id),
+              className: "min-w-0 flex-1 truncate text-left text-og-control",
+              children: target.title || shortUrl(target.url)
+            }
+          ),
+          props.tabControl ? /* @__PURE__ */ jsx(
+            "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": `Close ${target.title || "tab"}`,
+              children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+            }
+          ) : null
+        ]
+      },
+      target.id
+    )),
+    props.tabControl ? /* @__PURE__ */ jsx(
+      "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-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-40",
+        "aria-label": "New tab",
+        children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" })
+      }
+    ) : null
+  ] });
+}
+function BrowserAddressBar(props) {
+  const [draft, setDraft] = useState8(props.target?.url ?? "");
+  const focusedRef = useRef8(false);
+  useEffect8(() => {
+    if (!focusedRef.current) setDraft(props.target?.url ?? "");
+  }, [props.target?.id, props.target?.url]);
+  const submit = (event) => {
+    event.preventDefault();
+    const normalized = normalizeBrowserAddress(draft);
+    if (normalized) props.onNavigate(normalized);
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: submit,
+      className: "flex h-10 shrink-0 items-center gap-1.5 border-b border-og-border bg-og-bg px-2",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: props.onReload,
+            disabled: !props.target || props.loading,
+            className: "grid size-7 place-items-center rounded-og-sm text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-35",
+            "aria-label": "Reload",
+            children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: cn("size-3.5", props.loading && "animate-spin") })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex h-7 min-w-0 flex-1 items-center gap-2 rounded-og-sm border border-og-border bg-og-surface-0 px-2 focus-within:border-og-accent/60", children: [
+          /* @__PURE__ */ jsx(Globe2Icon, { className: "size-3 shrink-0 text-og-subtle" }),
+          /* @__PURE__ */ jsx(
+            "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();
+                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-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-50",
+              "aria-label": "Address",
+              spellCheck: false,
+              placeholder: "Search or enter address"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function BrowserViewport(props) {
+  const canvasRef = useRef8(null);
+  const inputRef = useRef8(null);
+  const composingRef = useRef8(false);
+  const pointerStartRef = useRef8(null);
+  const lastClickRef = useRef8(null);
+  const wheelRef = useRef8(null);
+  const pendingTextRef = useRef8(null);
+  const actionRef = useRef8(props.onAction);
+  const readClipboardRef = useRef8(props.onReadClipboard);
+  const errorRef = useRef8(props.onError);
+  const actionTailRef = useRef8(Promise.resolve());
+  const actionQueueEpochRef = useRef8(0);
+  const queuedFrameRef = useRef8(null);
+  const decodingFrameRef = useRef8(false);
+  const mountedRef = useRef8(true);
+  actionRef.current = props.onAction;
+  readClipboardRef.current = props.onReadClipboard;
+  errorRef.current = props.onError;
+  const paintQueuedFrames = useCallback8(() => {
+    if (decodingFrameRef.current) return;
+    decodingFrameRef.current = true;
+    void (async () => {
+      try {
+        while (mountedRef.current) {
+          const frame = queuedFrameRef.current;
+          queuedFrameRef.current = null;
+          if (!frame) break;
+          let objectUrl = null;
+          try {
+            const blob = new Blob([frame.data.slice().buffer], {
+              type: frame.mediaType
+            });
+            if (typeof createImageBitmap === "function") {
+              const bitmap = await createImageBitmap(blob);
+              try {
+                const canvas2 = canvasRef.current;
+                if (mountedRef.current && canvas2) {
+                  paintCanvas(canvas2, bitmap, frame.width, frame.height);
+                }
+              } finally {
+                bitmap.close();
+              }
+              continue;
+            }
+            objectUrl = URL.createObjectURL(blob);
+            const image = await loadImage(objectUrl);
+            const canvas = canvasRef.current;
+            if (mountedRef.current && canvas) {
+              paintCanvas(canvas, image, frame.width, frame.height);
+            }
+          } catch (cause) {
+            if (mountedRef.current) errorRef.current(cause);
+          } finally {
+            if (objectUrl) URL.revokeObjectURL(objectUrl);
+          }
+        }
+      } finally {
+        decodingFrameRef.current = false;
+        if (mountedRef.current && queuedFrameRef.current) paintQueuedFrames();
+      }
+    })();
+  }, []);
+  useEffect8(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      queuedFrameRef.current = null;
+    };
+  }, []);
+  useEffect8(() => {
+    if (!props.frame) return;
+    queuedFrameRef.current = props.frame;
+    paintQueuedFrames();
+  }, [paintQueuedFrames, props.frame]);
+  useEffect8(
+    () => () => {
+      if (wheelRef.current?.timer) clearTimeout(wheelRef.current.timer);
+      if (pendingTextRef.current?.timer) clearTimeout(pendingTextRef.current.timer);
+    },
+    []
+  );
+  const enqueue = useCallback8(
+    (action, frame, after) => {
+      const epoch = actionQueueEpochRef.current;
+      actionTailRef.current = actionTailRef.current.catch(() => void 0).then(async () => {
+        if (epoch !== actionQueueEpochRef.current) return;
+        const receipt = await actionRef.current(action, frame);
+        await after?.(receipt);
+      }).catch((cause) => {
+        actionQueueEpochRef.current += 1;
+        errorRef.current(cause);
+      });
+    },
+    []
+  );
+  const point = useCallback8(
+    (frame, clientX, clientY) => browserPoint(canvasRef.current, frame, clientX, clientY),
+    []
+  );
+  const flushPendingText = useCallback8(() => {
+    const pending = pendingTextRef.current;
+    if (!pending) return;
+    clearTimeout(pending.timer);
+    pendingTextRef.current = null;
+    enqueue({ type: "type", text: pending.text }, pending.frame);
+  }, [enqueue]);
+  const flushPendingClick = useCallback8(() => {
+    lastClickRef.current = null;
+  }, []);
+  const pointerDown = (event) => {
+    if (!props.frame || event.button !== 0) return;
+    event.preventDefault();
+    flushPendingText();
+    pointerStartRef.current = {
+      x: event.clientX,
+      y: event.clientY,
+      pointerId: event.pointerId,
+      frame: props.frame
+    };
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    inputRef.current?.focus({ preventScroll: true });
+  };
+  const pointerUp = (event) => {
+    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;
+      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 };
+    enqueue({ type: "pointer", action: "click", x: to.x, y: to.y }, start.frame);
+  };
+  const contextMenu = (event) => {
+    event.preventDefault();
+    const frame = props.frame;
+    if (!frame) return;
+    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) => {
+    const frame = props.frame;
+    if (!frame) return;
+    const at = point(frame, event.clientX, event.clientY);
+    if (!at) return;
+    flushPendingText();
+    flushPendingClick();
+    event.preventDefault();
+    const pending = wheelRef.current;
+    if (pending?.timer) clearTimeout(pending.timer);
+    wheelRef.current = {
+      x: at.x,
+      y: at.y,
+      deltaX: (pending && sameFrameFence(pending.frame, frame) ? pending.deltaX : 0) + event.deltaX,
+      deltaY: (pending && sameFrameFence(pending.frame, frame) ? pending.deltaY : 0) + event.deltaY,
+      frame,
+      timer: setTimeout(() => {
+        const batch = wheelRef.current;
+        wheelRef.current = null;
+        if (batch)
+          enqueue(
+            {
+              type: "pointer",
+              action: "scroll",
+              x: batch.x,
+              y: batch.y,
+              deltaX: batch.deltaX,
+              deltaY: batch.deltaY
+            },
+            batch.frame
+          );
+      }, 45)
+    };
+  };
+  const keyDown = (event) => {
+    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 }, props.frame);
+  };
+  const copy = (event) => {
+    if (!props.clipboardEnabled) return;
+    event.preventDefault();
+    flushPendingText();
+    flushPendingClick();
+    enqueue({ type: "clipboard", operation: "copy" }, props.frame, async () => {
+      const clipboard = await readClipboardRef.current();
+      if (clipboard.text.length === 0) return;
+      if (!await copyTextToClipboard(clipboard.text)) {
+        throw new Error("Browser text could not be copied to the local clipboard");
+      }
+    });
+  };
+  const paste = (event) => {
+    if (!props.clipboardEnabled) return;
+    event.preventDefault();
+    flushPendingText();
+    flushPendingClick();
+    enqueue(
+      {
+        type: "clipboard",
+        operation: "paste",
+        text: event.clipboardData.getData("text/plain")
+      },
+      props.frame
+    );
+  };
+  const input = (value, nativeComposing = false) => {
+    if (composingRef.current || nativeComposing) return;
+    if (!value) return;
+    flushPendingClick();
+    const pending = pendingTextRef.current;
+    if (pending && sameOptionalBrowserFrame(pending.frame, props.frame)) {
+      clearTimeout(pending.timer);
+      pending.text += value;
+      pending.timer = setTimeout(flushPendingText, 16);
+    } else {
+      flushPendingText();
+      pendingTextRef.current = {
+        text: value,
+        frame: props.frame,
+        timer: setTimeout(flushPendingText, 16)
+      };
+    }
+    if (inputRef.current) inputRef.current.value = "";
+  };
+  const compositionStart = () => {
+    composingRef.current = true;
+  };
+  const compositionEnd = (event) => {
+    composingRef.current = false;
+    input(event.currentTarget.value || event.data);
+  };
+  const showCanvas = props.frame !== null;
+  return /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden bg-black", children: [
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        className: cn(
+          "absolute inset-0 m-auto max-h-full max-w-full touch-none focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent",
+          !showCanvas && "invisible"
+        ),
+        onPointerDown: pointerDown,
+        onPointerUp: pointerUp,
+        onPointerCancel: () => {
+          pointerStartRef.current = null;
+        },
+        onContextMenu: contextMenu,
+        onWheel: wheel,
+        "aria-label": "Interactive browser page"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: inputRef,
+        defaultValue: "",
+        onInput: (event) => input(event.currentTarget.value, event.nativeEvent.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": "Browser keyboard input",
+        autoCapitalize: "off",
+        autoCorrect: "off",
+        spellCheck: false
+      }
+    ),
+    !showCanvas ? /* @__PURE__ */ jsx(
+      SemanticBrowserFallback,
+      {
+        observation: props.observation,
+        connectionState: props.connectionState,
+        supportsLiveFrames: props.supportsLiveFrames,
+        error: props.connectionError,
+        onAction: (action) => enqueue(action, null),
+        onReconnect: props.onReconnect,
+        reconnectLabel: props.reconnectLabel,
+        reconnectMessage: props.reconnectMessage
+      }
+    ) : null,
+    props.mutating ? /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute right-3 top-3 flex items-center gap-1.5 rounded-full border border-white/10 bg-black/65 px-2.5 py-1 text-[11px] text-white/80 backdrop-blur", children: [
+      /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }),
+      " ",
+      props.activityLabel ?? "Acting"
+    ] }) : null
+  ] });
+}
+function SemanticBrowserFallback(props) {
+  const controlFailure = interactionControlFailureFromError(props.error);
+  const generationLoss = Boolean(props.reconnectMessage) || isAttachedChromeGenerationLossError(props.error);
+  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 /* @__PURE__ */ jsx("div", { className: "absolute inset-0 grid place-items-center bg-og-bg p-6", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md rounded-og-lg border border-og-border bg-og-surface-0 p-4 shadow-lg", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      props.error ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-4 text-og-status-error" }) : !props.supportsLiveFrames ? /* @__PURE__ */ jsx(ZapIcon, { className: "size-4 text-og-muted" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-4 animate-spin text-og-muted" }),
+      /* @__PURE__ */ jsx("p", { className: "text-og-menu font-medium text-og-fg", children: generationLoss ? "Chrome reconnected\u2014open a fresh browser/desktop." : props.error ? "Live view disconnected" : props.supportsLiveFrames ? browserConnectionLabel(props.connectionState) : "Semantic browser" })
+    ] }),
+    props.error || props.reconnectMessage ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-og-control leading-5 text-og-muted", children: props.reconnectMessage ?? controlFailure?.message ?? props.error?.message }) : null,
+    interactive.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t border-og-border pt-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-og-xs text-og-subtle", children: props.supportsLiveFrames ? "Page controls remain available" : "Available page controls" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: interactive.map((node) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          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",
+          children: node.name || node.role
+        },
+        node.ref
+      )) })
+    ] }) : null,
+    props.error && props.supportsLiveFrames && (!generationLoss || props.reconnectLabel) ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: props.onReconnect,
+        className: "mt-3 text-og-control font-medium text-og-accent hover:underline",
+        children: props.reconnectLabel ?? (controlFailure?.retryable === false ? "Try again" : "Reconnect")
+      }
+    ) : null
+  ] }) });
+}
+function BrowserStatusBar(props) {
+  const errors = (props.observation?.diagnostics.consoleErrorCount ?? 0) + (props.observation?.diagnostics.pageErrorCount ?? 0);
+  const failed = props.observation?.diagnostics.failedRequestCount ?? 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-7 shrink-0 items-center gap-2 border-t border-og-border bg-og-surface-0 px-2 text-og-xs text-og-subtle", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "size-1.5 rounded-full",
+          props.connectionState === "live" || props.connectionState === "semantic" ? "bg-og-status-running" : "bg-og-muted"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children: props.connectionState === "live" ? "Live" : props.connectionState === "semantic" ? "Semantic" : browserConnectionLabel(props.connectionState) }),
+    /* @__PURE__ */ jsx("span", { children: props.profile?.name ?? "Temporary browser" }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: props.target?.title }),
+    props.refreshing ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }) : null,
+    props.onOpenComputer ? /* @__PURE__ */ jsxs(
+      "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": "Open this browser window in Desktop",
+        children: [
+          /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3" }),
+          "Desktop"
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      "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"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(BugIcon, { className: "size-3" }),
+          errors + failed > 0 ? errors + failed : "Debug"
+        ]
+      }
+    )
+  ] });
+}
+function BrowserDiagnosticsDrawer(props) {
+  const session = props.session;
+  const diagnostics = props.observation?.diagnostics;
+  const semanticMode = props.observation?.semantic ? "Semantic page structure available" : props.observation?.screenshot ? "Visual fallback in use" : "Waiting for page observation";
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      id: "browser-diagnostics-drawer",
+      role: "region",
+      "aria-label": "Browser diagnostics",
+      className: "absolute bottom-7 right-0 top-10 z-40 flex w-full max-w-md flex-col border-l border-og-border bg-og-surface-0 shadow-2xl",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex h-11 shrink-0 items-center gap-2 border-b border-og-border px-3", children: [
+          /* @__PURE__ */ jsx(BugIcon, { className: "size-4 text-og-muted" }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-og-control font-semibold text-og-fg", children: "Browser diagnostics" }),
+            /* @__PURE__ */ jsx("p", { className: "truncate text-og-xs text-og-subtle", children: props.target?.title || shortUrl(props.target?.url ?? "") || "Current tab" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: props.onRefresh,
+              disabled: props.state.loading,
+              className: "grid size-7 place-items-center rounded-og-sm text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-40",
+              "aria-label": "Refresh browser diagnostics",
+              children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: cn("size-3.5", props.state.loading && "animate-spin") })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: props.onClose,
+              className: "grid size-7 place-items-center rounded-og-sm text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg",
+              "aria-label": "Close browser diagnostics",
+              children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
+          /* @__PURE__ */ jsxs("section", { className: "border-b border-og-border p-3", "aria-labelledby": "browser-runtime-title", children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                id: "browser-runtime-title",
+                className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-og-subtle",
+                children: "Runtime"
+              }
+            ),
+            /* @__PURE__ */ jsxs("dl", { className: "mt-2 grid grid-cols-[7rem_minmax(0,1fr)] gap-x-3 gap-y-1.5 text-og-xs", children: [
+              /* @__PURE__ */ jsx(DiagnosticFact, { label: "Engine", value: browserEngineLabel(session) }),
+              /* @__PURE__ */ jsx(DiagnosticFact, { label: "Driver", value: session?.driverId ?? "Unavailable" }),
+              /* @__PURE__ */ jsx(DiagnosticFact, { label: "Placement", value: placementLabel(session ?? void 0) }),
+              /* @__PURE__ */ jsx(
+                DiagnosticFact,
+                {
+                  label: "Profile",
+                  value: props.profile ? `${props.profile.name}${props.baseRevisionOrdinal ? ` \xB7 v${props.baseRevisionOrdinal}` : ""}` : "Temporary"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                DiagnosticFact,
+                {
+                  label: "Controller",
+                  value: shortGeneration(session?.controller?.controllerGeneration)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                DiagnosticFact,
+                {
+                  label: "Network",
+                  value: session?.networkRouteId ? "Custom route" : "Placement default"
+                }
+              ),
+              /* @__PURE__ */ jsx(DiagnosticFact, { label: "Observation", value: semanticMode })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("section", { className: "border-b border-og-border p-3", "aria-labelledby": "browser-page-title", children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                id: "browser-page-title",
+                className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-og-subtle",
+                children: "Current page"
+              }
+            ),
+            /* @__PURE__ */ jsxs("dl", { className: "mt-2 grid grid-cols-2 gap-2", children: [
+              /* @__PURE__ */ jsx(DiagnosticCount, { label: "Console errors", value: diagnostics?.consoleErrorCount ?? 0 }),
+              /* @__PURE__ */ jsx(DiagnosticCount, { label: "Page errors", value: diagnostics?.pageErrorCount ?? 0 }),
+              /* @__PURE__ */ jsx(DiagnosticCount, { label: "Failed requests", value: diagnostics?.failedRequestCount ?? 0 }),
+              /* @__PURE__ */ jsx(DiagnosticCount, { label: "Downloads", value: diagnostics?.downloadCount ?? 0 })
+            ] }),
+            session?.failureCode ? /* @__PURE__ */ jsxs("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-status-error", children: [
+              "Browser state: ",
+              session.failureCode
+            ] }) : null
+          ] }),
+          props.downloadsEnabled ? /* @__PURE__ */ jsx(
+            BrowserDownloadsPanel,
+            {
+              downloads: props.downloads,
+              loading: props.downloadsLoading,
+              refreshing: props.downloadsRefreshing,
+              error: props.downloadsError,
+              savingDownloadIds: props.savingDownloadIds,
+              onSave: props.onSaveDownload,
+              onRefresh: props.onRefreshDownloads
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("section", { className: "p-3", "aria-labelledby": "browser-events-title", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  id: "browser-events-title",
+                  className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-og-subtle",
+                  children: "Recent events"
+                }
+              ),
+              props.state.batch?.truncated ? /* @__PURE__ */ jsx("span", { className: "text-[10px] text-og-subtle", children: "Newest 100" }) : null
+            ] }),
+            props.state.loading && !props.state.batch ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-6 text-og-control text-og-muted", children: [
+              /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }),
+              " Loading diagnostics\u2026"
+            ] }) : props.state.error ? /* @__PURE__ */ jsxs("div", { className: "py-5", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-og-control text-og-status-error", children: props.state.error.message }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: props.onRefresh,
+                  className: "mt-2 text-og-control font-medium text-og-accent hover:underline",
+                  children: "Try again"
+                }
+              )
+            ] }) : props.state.batch?.entries.length ? /* @__PURE__ */ jsx("ol", { className: "mt-2 space-y-2", children: props.state.batch.entries.map((entry) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "rounded-og-sm border border-og-border bg-og-bg p-2.5",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[10px] text-og-subtle", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "font-semibold uppercase tracking-wide",
+                          diagnosticTone(entry.level)
+                        ),
+                        children: diagnosticKindLabel(entry.kind)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "ml-auto", children: formatDiagnosticTime(entry.occurredAt) })
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 whitespace-pre-wrap break-words text-og-xs leading-5 text-og-fg", children: entry.message }),
+                  entry.url || entry.filename || entry.method || entry.status ? /* @__PURE__ */ jsx("p", { className: "mt-1 truncate font-og-mono text-[10px] text-og-subtle", children: [entry.method, entry.status, entry.filename, entry.url].filter((value) => value !== null).join(" \xB7 ") }) : null
+                ]
+              },
+              entry.sequence
+            )) }) : /* @__PURE__ */ jsx("p", { className: "py-6 text-og-control text-og-muted", children: "No diagnostics for this tab." })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function BrowserDownloadsPanel(props) {
+  const [paths, setPaths] = useState8({});
+  const [overwrite, setOverwrite] = useState8({});
+  const [savedPaths, setSavedPaths] = useState8({});
+  const [errors, setErrors] = useState8({});
+  const saving = useMemo2(() => new Set(props.savingDownloadIds), [props.savingDownloadIds]);
+  const save = (download) => {
+    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 : "Could not save this download."
+      }));
+    });
+  };
+  return /* @__PURE__ */ jsxs("section", { className: "border-b border-og-border p-3", "aria-labelledby": "browser-downloads-title", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(DownloadIcon, { className: "size-3.5 text-og-muted" }),
+      /* @__PURE__ */ jsx(
+        "h3",
+        {
+          id: "browser-downloads-title",
+          className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-og-subtle",
+          children: "Downloads"
+        }
+      ),
+      props.refreshing ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "ml-auto size-3 animate-spin text-og-muted" }) : null
+    ] }),
+    props.loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-5 text-og-control text-og-muted", children: [
+      /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }),
+      " Loading downloads\u2026"
+    ] }) : props.error ? /* @__PURE__ */ jsxs("div", { className: "py-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-og-control text-og-status-error", children: props.error.message }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: props.onRefresh,
+          className: "mt-2 text-og-control font-medium text-og-accent hover:underline",
+          children: "Try again"
+        }
+      )
+    ] }) : props.downloads.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-4 text-og-control text-og-muted", children: "No files downloaded yet." }) : /* @__PURE__ */ jsx("ol", { className: "mt-2 space-y-2", children: props.downloads.map((download) => {
+      const destinationPath = paths[download.id] ?? defaultDownloadDestination(download);
+      const isSaving = saving.has(download.id);
+      const isSaved = savedPaths[download.id] === destinationPath;
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "rounded-og-sm border border-og-border bg-og-bg p-2.5",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "mt-0.5 grid size-6 shrink-0 place-items-center rounded bg-og-surface-2 text-og-muted", children: isSaved ? /* @__PURE__ */ jsx(FileCheck2Icon, { className: "size-3.5 text-og-status-success" }) : /* @__PURE__ */ jsx(DownloadIcon, { className: "size-3.5" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "truncate text-og-xs font-medium text-og-fg",
+                    title: download.filename,
+                    children: download.filename
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[10px] text-og-subtle", children: downloadStatusLabel(download) })
+              ] })
+            ] }),
+            download.status === "completed" ? /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+                /* @__PURE__ */ jsx(
+                  "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": `Workspace path for ${download.filename}`,
+                    className: "h-7 min-w-0 flex-1 rounded-og-sm border border-og-border bg-og-surface-0 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"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "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",
+                    children: [
+                      isSaving ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }) : /* @__PURE__ */ jsx(SaveIcon, { className: "size-3" }),
+                      isSaving ? "Saving" : isSaved ? "Saved" : overwrite[download.id] ? "Replace" : "Save"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("label", { className: "mt-1.5 flex w-fit items-center gap-1.5 text-[10px] text-og-subtle", children: [
+                /* @__PURE__ */ jsx(
+                  "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"
+                  }
+                ),
+                "Replace an existing workspace file"
+              ] }),
+              errors[download.id] ? /* @__PURE__ */ jsx("p", { className: "mt-1.5 break-words text-[10px] text-og-status-error", children: errors[download.id] }) : null
+            ] }) : null
+          ]
+        },
+        download.id
+      );
+    }) })
+  ] });
+}
+function downloadStatusLabel(download) {
+  if (download.status === "completed") return formatBytes(download.receivedBytes);
+  if (download.status === "in_progress") {
+    const received = formatBytes(download.receivedBytes);
+    return download.totalBytes === null ? `Downloading \xB7 ${received}` : `Downloading \xB7 ${received} of ${formatBytes(download.totalBytes)}`;
+  }
+  if (download.status === "cancelled") return "Cancelled";
+  if (download.status === "unavailable") return "No longer available";
+  return "Download failed";
+}
+function defaultDownloadDestination(download) {
+  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) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-og-subtle", children: props.label }),
+    /* @__PURE__ */ jsx("dd", { className: "min-w-0 truncate text-og-fg", title: props.value, children: props.value })
+  ] });
+}
+function DiagnosticCount(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-og-sm border border-og-border bg-og-bg px-2.5 py-2", children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-[10px] text-og-subtle", children: props.label }),
+    /* @__PURE__ */ jsx(
+      "dd",
+      {
+        className: cn(
+          "mt-0.5 text-og-sm font-semibold",
+          props.value ? "text-og-fg" : "text-og-muted"
+        ),
+        children: props.value
+      }
+    )
+  ] });
+}
+function browserEngineLabel(session) {
+  if (!session) return "Unavailable";
+  const version = session.engineVersion ? ` ${session.engineVersion}` : "";
+  return `${session.engine}${version} \xB7 ${session.headless ? "headless" : "headed"}`;
+}
+function shortGeneration(value) {
+  if (!value) return "Unavailable";
+  return value.length > 16 ? `${value.slice(0, 8)}\u2026${value.slice(-6)}` : value;
+}
+function diagnosticKindLabel(kind) {
+  switch (kind) {
+    case "console":
+      return "Console";
+    case "page_error":
+      return "Page error";
+    case "failed_request":
+      return "Request";
+    case "download":
+      return "Download";
+  }
+}
+function diagnosticTone(level) {
+  if (level === "error") return "text-og-status-error";
+  if (level === "warning") return "text-og-status-waiting";
+  return "text-og-muted";
+}
+function formatDiagnosticTime(value) {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "" : date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+function BrowserNotice(props) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid h-full place-items-center bg-og-bg text-og-control text-og-muted",
+        props.className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        props.icon,
+        props.text
+      ] })
+    }
+  );
+}
+function paintCanvas(canvas, image, width, height) {
+  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) {
+  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, frame, clientX, clientY) {
+  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) {
+  const result = [];
+  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, session, target) {
+  return Boolean(
+    frame && session && target && frame.browserSessionId === session.id && frame.targetId === target.id && frame.targetGeneration === target.targetGeneration && frame.documentGeneration === target.documentGeneration
+  );
+}
+function sameFrameFence(left, right) {
+  return left.browserSessionId === right.browserSessionId && left.controllerGeneration === right.controllerGeneration && left.targetId === right.targetId && left.targetGeneration === right.targetGeneration && left.documentGeneration === right.documentGeneration && left.frameId === right.frameId;
+}
+function sameOptionalBrowserFrame(left, right) {
+  return left === null || right === null ? left === right : sameFrameFence(left, right);
+}
+function isLiveBrowser2(session) {
+  return !["ending", "ended", "failed", "lost"].includes(session.lifecycle);
+}
+function attachedChromeGenerationLoss(sessions) {
+  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) {
+  if (!error) return false;
+  return /placement instance changed|controller authority changed/i.test(error.message);
+}
+function countInterventions(interventions) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const intervention of interventions) {
+    counts.set(intervention.resourceId, (counts.get(intervention.resourceId) ?? 0) + 1);
+  }
+  return counts;
+}
+function interventionTitle(intervention) {
+  switch (intervention.kind) {
+    case "manual_login":
+      return "Sign in needed";
+    case "mfa":
+      return "Verification needed";
+    case "external_action":
+    case "confirmation":
+      return "Action needed";
+    case "other":
+      return "Browser needs your help";
+  }
+}
+function placementLabel(session) {
+  if (!session) return "";
+  switch (session.placement.kind) {
+    case "sandbox_group":
+      return "Agent sandbox";
+    case "connected_machine":
+      return "Connected machine";
+    case "attached_device":
+      return "Your browser";
+    case "external_provider":
+      return "Cloud browser";
+  }
+}
+function browserConnectionLabel(state) {
+  switch (state) {
+    case "attaching":
+      return "Opening browser\u2026";
+    case "connecting":
+      return "Connecting\u2026";
+    case "reconnecting":
+      return "Reconnecting\u2026";
+    case "error":
+      return "Disconnected";
+    case "semantic":
+      return "Semantic";
+    default:
+      return "Waiting for browser\u2026";
+  }
+}
+function shortUrl(value) {
+  try {
+    return new URL(value).hostname || value;
+  } catch {
+    return value;
+  }
+}
+
+export {
+  useBrowserFrameStream,
+  useAttachedBrowsers,
+  useBrowserIdentities,
+  useBrowserDownloads,
+  useBrowserSession,
+  useBrowserSessions,
+  useSiteAuthConnections,
+  BrowserViewer
+};
+//# sourceMappingURL=chunk-X4JAFD5R.js.map