@opengeni/react 0.52.1 → 1.0.1

package/dist/chunk-7I2KB3OK.js

@@ -1,3895 +0,0 @@
-import {
-  STREAM_KIND_BROWSER,
-  STREAM_KIND_COMPUTER,
-  STREAM_ROLE_CLIENT,
-  decodeStreamFrame,
-  decodeStreamOpenAck,
-  encodeStreamOpen
-} from "./chunk-6BBWWOOU.js";
-import {
-  usePageLiveActivity
-} from "./chunk-KZ73RL76.js";
-import {
-  useEmbeddedBrowserInteraction,
-  useEmbeddedComputerInteraction
-} from "./chunk-HDBG7XGO.js";
-import {
-  cn
-} from "./chunk-22KP6LR5.js";
-
-// src/hooks/use-attached-browsers.ts
-import { useCallback, useEffect, useRef, useState } from "react";
-function useAttachedBrowsers(options = {}) {
-  const { client, workspaceId } = useEmbeddedBrowserInteraction(options);
-  const enabled = options.enabled ?? true;
-  const includeDisconnected = options.includeDisconnected ?? false;
-  const pageLive = usePageLiveActivity();
-  const pollIntervalMs = Math.max(1e3, options.pollIntervalMs ?? 3e3);
-  const [state, setState] = useState(() => emptyState(workspaceId, enabled));
-  const requestRef = useRef({
-    id: 0,
-    controller: null
-  });
-  const mountedRef = useRef(true);
-  const visible = state.workspaceId === workspaceId ? state : emptyState(workspaceId, enabled);
-  const cancelLoad = useCallback(() => {
-    const id = requestRef.current.id + 1;
-    requestRef.current.controller?.abort();
-    requestRef.current = { id, controller: null };
-  }, []);
-  const load = useCallback(
-    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,
-          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 = useCallback(async () => await load(false), [load]);
-  useEffect(() => {
-    mountedRef.current = true;
-    if (!enabled) {
-      cancelLoad();
-      setState(emptyState(workspaceId, false));
-      return;
-    }
-    void load(true);
-    return () => {
-      mountedRef.current = false;
-      cancelLoad();
-    };
-  }, [cancelLoad, enabled, load, workspaceId]);
-  useEffect(() => {
-    if (!enabled || !pageLive) return;
-    const timer = setInterval(() => {
-      if (!requestRef.current.controller) void load(false);
-    }, pollIntervalMs);
-    return () => clearInterval(timer);
-  }, [enabled, load, pageLive, pollIntervalMs]);
-  return {
-    revision: visible.revision,
-    devices: visible.devices,
-    loading: visible.loading,
-    refreshing: visible.refreshing,
-    error: visible.error,
-    refresh
-  };
-}
-function emptyState(workspaceId, loading) {
-  return {
-    workspaceId,
-    revision: 0,
-    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-sessions.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
-function useBrowserSessions(options = {}) {
-  const { client, workspaceId, registerSessionReconciler } = useEmbeddedBrowserInteraction(options);
-  const enabled = options.enabled ?? true;
-  const pageLive = usePageLiveActivity();
-  const pollIntervalMs = Math.max(1e3, options.pollIntervalMs ?? 3e3);
-  const [state, setState] = useState2(() => emptyState2(workspaceId, enabled));
-  const requestRef = useRef2({
-    id: 0,
-    controller: null
-  });
-  const mountedRef = useRef2(true);
-  const visibleState = state.workspaceId === workspaceId ? state : emptyState2(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 : emptyState2(workspaceId, 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,
-          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 : emptyState2(workspaceId, true),
-          loading: false,
-          refreshing: false,
-          error
-        }));
-      } finally {
-        if (requestRef.current.id === id) {
-          requestRef.current = { id, controller: null };
-        }
-      }
-    },
-    [client, enabled, workspaceId]
-  );
-  const refresh = useCallback2(async () => await load(false), [load]);
-  useEffect2(() => {
-    mountedRef.current = true;
-    if (!enabled) {
-      cancelLoad();
-      setState(emptyState2(workspaceId, false));
-      return;
-    }
-    void load(true);
-    return () => {
-      mountedRef.current = false;
-      cancelLoad();
-    };
-  }, [cancelLoad, enabled, load, workspaceId]);
-  useEffect2(() => {
-    if (!enabled || !pageLive) return;
-    const timer = setInterval(() => {
-      if (!requestRef.current.controller) void load(false);
-    }, pollIntervalMs);
-    return () => clearInterval(timer);
-  }, [enabled, load, pageLive, pollIntervalMs]);
-  useEffect2(() => {
-    if (!enabled || !options.sessionId) return;
-    return registerSessionReconciler(options.sessionId, `browser-sessions:${workspaceId}`, refresh);
-  }, [enabled, options.sessionId, refresh, registerSessionReconciler, workspaceId]);
-  const create = useCallback2(
-    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 = useCallback2(
-    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 = useCallback2(
-    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 = useCallback2(
-    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,
-    loading: visibleState.loading,
-    refreshing: visibleState.refreshing,
-    error: visibleState.error,
-    refresh,
-    create,
-    suspend,
-    resume,
-    end
-  };
-}
-function emptyState2(workspaceId, loading) {
-  return {
-    workspaceId,
-    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 || timestamp2(right.lastUsedAt) - timestamp2(left.lastUsedAt) || left.id.localeCompare(right.id);
-  });
-}
-function isLiveBrowser(session) {
-  return !["ending", "ended", "failed", "lost"].includes(session.lifecycle);
-}
-function timestamp2(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-browser-identities.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
-function useBrowserIdentities(options = {}) {
-  const { client, workspaceId } = useEmbeddedBrowserInteraction(options);
-  const enabled = options.enabled ?? true;
-  const [state, setState] = useState3(() => emptyState3(workspaceId, enabled));
-  const [mutationCount, setMutationCount] = useState3(0);
-  const requestRef = useRef3({
-    id: 0,
-    controller: null
-  });
-  const mountedRef = useRef3(true);
-  const visibleState = state.workspaceId === workspaceId ? state : emptyState3(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 : emptyState3(workspaceId, true),
-        loading: foreground,
-        refreshing: !foreground,
-        error: foreground || current.workspaceId !== workspaceId ? null : current.error
-      }));
-      try {
-        const response = await client.listBrowserIdentities(workspaceId, {
-          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 : emptyState3(workspaceId, true),
-          loading: false,
-          refreshing: false,
-          error: cause instanceof Error ? cause : new Error(String(cause))
-        }));
-      } finally {
-        if (requestRef.current.id === id) requestRef.current = { id, controller: null };
-      }
-    },
-    [client, enabled, workspaceId]
-  );
-  const refresh = useCallback3(async () => await load(false), [load]);
-  useEffect3(() => {
-    mountedRef.current = true;
-    if (!enabled) {
-      cancelLoad();
-      setState(emptyState3(workspaceId, false));
-      return;
-    }
-    void load(true);
-    return () => {
-      mountedRef.current = false;
-      cancelLoad();
-    };
-  }, [cancelLoad, enabled, load, workspaceId]);
-  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 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,
-    revisions,
-    publish
-  };
-}
-function emptyState3(workspaceId, loading) {
-  return {
-    workspaceId,
-    revision: 0,
-    identities: [],
-    loading,
-    refreshing: false,
-    error: null
-  };
-}
-function sortIdentities(identities) {
-  return [...identities].sort(
-    (left, right) => timestamp3(right.updatedAt) - timestamp3(left.updatedAt) || left.name.localeCompare(right.name)
-  );
-}
-function timestamp3(value) {
-  const parsed = Date.parse(value);
-  return Number.isFinite(parsed) ? parsed : 0;
-}
-function mergeIdentity(current, workspaceId, identity) {
-  if (current.workspaceId !== workspaceId) return current;
-  return {
-    ...current,
-    identities: sortIdentities([
-      ...current.identities.filter((candidate) => candidate.id !== identity.id),
-      identity
-    ]),
-    error: null
-  };
-}
-
-// src/hooks/use-browser-session.ts
-import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4, useState as useState4 } 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] = useState4(() => emptyState4(browserSessionId, enabled));
-  const visible = state.browserSessionId === browserSessionId ? state : emptyState4(browserSessionId, enabled);
-  const selectedTargetIdRef = useRef4(visible.selectedTargetId);
-  selectedTargetIdRef.current = visible.selectedTargetId;
-  const observationRef = useRef4({ browserSessionId, observation: visible.observation });
-  if (observationRef.current.browserSessionId !== browserSessionId) {
-    observationRef.current = {
-      browserSessionId,
-      observation: visible.observation
-    };
-  } else {
-    observationRef.current.observation = visible.observation;
-  }
-  const requestRef = useRef4({
-    id: 0,
-    controller: null
-  });
-  const mutationRef = useRef4({
-    browserSessionId,
-    count: 0
-  });
-  const mountedRef = useRef4(true);
-  const invalidateRefresh = useCallback4(() => {
-    const id = requestRef.current.id + 1;
-    requestRef.current.controller?.abort();
-    requestRef.current = { id, controller: null };
-  }, []);
-  const refresh = useCallback4(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);
-      const observation = selected ? await client.observeBrowserTarget(workspaceId, browserSessionId, selected.id, {
-        signal: controller.signal
-      }) : null;
-      if (!mountedRef.current || requestRef.current.id !== id) return;
-      selectedTargetIdRef.current = selected?.id ?? null;
-      observationRef.current = { browserSessionId, observation };
-      setState(
-        (current) => current.browserSessionId === browserSessionId ? {
-          ...current,
-          session,
-          targets: targetResponse.targets,
-          selectedTargetId: selected?.id ?? null,
-          observation,
-          loading: false,
-          error: null
-        } : current
-      );
-    } 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]);
-  useEffect4(() => {
-    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]);
-  useEffect4(() => {
-    if (!enabled || !pageLive || visible.mutating) return;
-    const timer = setInterval(() => {
-      if (!requestRef.current.controller) void refresh();
-    }, pollIntervalMs);
-    return () => clearInterval(timer);
-  }, [enabled, pageLive, pollIntervalMs, refresh, visible.mutating]);
-  useEffect4(() => {
-    if (!enabled || !browserSessionId || !pageLive) 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, workspaceId]);
-  const runMutation = useCallback4(
-    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 = useCallback4(
-    async (targetId) => {
-      if (!browserSessionId) throw new Error("No BrowserSession is selected.");
-      return await runMutation(browserSessionId, async () => {
-        const target = await client.selectBrowserTarget(workspaceId, browserSessionId, targetId);
-        const observation = await client.observeBrowserTarget(
-          workspaceId,
-          browserSessionId,
-          target.id
-        );
-        selectedTargetIdRef.current = target.id;
-        observationRef.current = { browserSessionId, observation };
-        setState(
-          (current) => current.browserSessionId === browserSessionId ? {
-            ...current,
-            targets: current.targets.map((candidate) => ({
-              ...candidate,
-              selected: candidate.id === target.id
-            })),
-            selectedTargetId: target.id,
-            observation
-          } : current
-        );
-        return target;
-      });
-    },
-    [browserSessionId, client, runMutation, workspaceId]
-  );
-  const openTarget = useCallback4(
-    async (url) => {
-      if (!browserSessionId) throw new Error("No BrowserSession is selected.");
-      return await runMutation(browserSessionId, async () => {
-        const target = await client.openBrowserTarget(
-          workspaceId,
-          browserSessionId,
-          url === void 0 ? {} : { url }
-        );
-        const observation = await client.observeBrowserTarget(
-          workspaceId,
-          browserSessionId,
-          target.id
-        );
-        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 = useCallback4(
-    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 = useCallback4(
-    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.");
-      }
-      return await runMutation(browserSessionId, async () => {
-        const receipt = await client.actInBrowser(workspaceId, browserSessionId, {
-          operationId,
-          ...fence,
-          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
-          );
-        } else {
-          void refresh();
-        }
-        return receipt;
-      });
-    },
-    [browserSessionId, client, refresh, runMutation, workspaceId]
-  );
-  const act = useCallback4(
-    async (action, operationId = crypto.randomUUID()) => await dispatchAction(action, operationId, null),
-    [dispatchAction]
-  );
-  const actFromFrame = useCallback4(
-    async (action, frame, operationId = crypto.randomUUID()) => await dispatchAction(action, operationId, frame),
-    [dispatchAction]
-  );
-  const diagnostics = useCallback4(
-    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]
-  );
-  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,
-    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));
-}
-
-// src/hooks/use-browser-frame-stream.ts
-import {
-  browserFrameSocketUrl,
-  decodeBrowserFrameMessage
-} from "@opengeni/sdk/interaction";
-import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef5, useState as useState5 } from "react";
-var RELAY_TAG_OPEN = 1;
-var RELAY_TAG_OPEN_ACK = 2;
-var RELAY_TAG_FRAME = 3;
-function useBrowserFrameStream(options) {
-  const { client, workspaceId } = useEmbeddedBrowserInteraction(options);
-  const enabled = options.enabled ?? true;
-  const [nonce, setNonce] = useState5(0);
-  const [result, setResult] = useState5({
-    state: "idle",
-    frame: null,
-    attachment: null,
-    error: null
-  });
-  const latestRef = useRef5({
-    key: "",
-    sequence: -1
-  });
-  const factoryRef = useRef5(options.webSocketFactory);
-  const streamRef = useRef5(options.stream);
-  factoryRef.current = options.webSocketFactory;
-  streamRef.current = options.stream;
-  const reconnect = useCallback5(() => setNonce((value) => value + 1), []);
-  useEffect5(() => {
-    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 reconnectTimer = null;
-    let expiryTimer = null;
-    let failures = 0;
-    let controllerGeneration = null;
-    let activeStream = null;
-    let relayAccepted = false;
-    const attachmentAbort = new AbortController();
-    const clearSocket = () => {
-      if (!socket) return;
-      socket.removeEventListener("open", onOpen);
-      socket.removeEventListener("message", onMessage);
-      socket.removeEventListener("error", onError);
-      socket.removeEventListener("close", onClose);
-      if (socket.readyState === 0 || socket.readyState === 1) {
-        socket.close(1e3, "viewer detached");
-      }
-      socket = null;
-    };
-    const scheduleReconnect = () => {
-      if (disposed || reconnectTimer) return;
-      const delay = Math.min(5e3, 250 * 2 ** Math.min(failures, 5));
-      failures += 1;
-      setResult((current) => ({ ...current, state: "reconnecting" }));
-      reconnectTimer = setTimeout(() => {
-        reconnectTimer = null;
-        void connect();
-      }, delay);
-    };
-    const fail = (cause) => {
-      if (disposed) return;
-      const error = cause instanceof Error ? cause : new Error(String(cause));
-      setResult((current) => ({ ...current, state: "error", error }));
-      clearSocket();
-      scheduleReconnect();
-    };
-    const onOpen = () => {
-      if (disposed) return;
-      failures = 0;
-      if (activeStream?.kind === "relay") {
-        const body = encodeStreamOpen({
-          channel: {
-            ...activeStream.channel,
-            kind: STREAM_KIND_BROWSER
-          },
-          token: activeStream.token,
-          role: STREAM_ROLE_CLIENT,
-          resumeFromSeq: "0"
-        });
-        socket?.send(relayDatagram(RELAY_TAG_OPEN, body));
-        return;
-      }
-      setResult((current) => ({ ...current, state: "live", error: null }));
-    };
-    const onMessage = (event) => {
-      void (async () => {
-        try {
-          const bytes = await messageBytes(event.data);
-          if (disposed) 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) {
-                throw new Error(ack.error?.message ?? "browser stream was rejected by the relay");
-              }
-              relayAccepted = true;
-              return;
-            }
-            if (tag !== RELAY_TAG_FRAME || !relayAccepted) return;
-            frameBytes = decodeStreamFrame(body).data;
-          }
-          const frame = decodeBrowserFrameMessage(frameBytes);
-          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) return;
-          latestRef.current = { key, sequence: frame.sequence };
-          setResult((current) => ({
-            ...current,
-            state: "live",
-            frame,
-            error: null
-          }));
-        } catch (cause) {
-          fail(cause);
-        }
-      })();
-    };
-    const onError = () => fail(new Error("Browser view lost connection."));
-    const onClose = () => {
-      if (disposed) return;
-      clearSocket();
-      scheduleReconnect();
-    };
-    const connect = 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;
-        activeStream = attachment.stream;
-        relayAccepted = false;
-        setResult((current) => ({
-          ...current,
-          state: "connecting",
-          attachment: {
-            browserSessionId: attachment.browserSessionId,
-            controllerGeneration: attachment.controllerGeneration,
-            targetId: attachment.targetId,
-            expiresAt: attachment.expiresAt
-          },
-          error: null
-        }));
-        const createSocket = factoryRef.current ?? ((url, protocols) => new WebSocket(url, protocols));
-        socket = createSocket(
-          attachment.stream.kind === "relay" ? attachment.stream.url : browserFrameSocketUrl(attachment, streamRef.current),
-          attachment.stream.kind === "direct_websocket" ? [...attachment.stream.protocols] : []
-        );
-        socket.binaryType = "arraybuffer";
-        socket.addEventListener("open", onOpen);
-        socket.addEventListener("message", onMessage);
-        socket.addEventListener("error", onError);
-        socket.addEventListener("close", onClose);
-        const expiresAt = Date.parse(attachment.expiresAt);
-        const refreshIn = Number.isFinite(expiresAt) ? Math.max(1e3, expiresAt - Date.now() - 5e3) : 6e4;
-        expiryTimer = setTimeout(() => {
-          if (disposed) return;
-          clearSocket();
-          void connect();
-        }, refreshIn);
-      } catch (cause) {
-        if (attachmentAbort.signal.aborted || disposed) return;
-        fail(cause);
-      }
-    };
-    void connect();
-    return () => {
-      disposed = true;
-      attachmentAbort.abort();
-      if (reconnectTimer) clearTimeout(reconnectTimer);
-      if (expiryTimer) clearTimeout(expiryTimer);
-      clearSocket();
-    };
-  }, [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");
-}
-
-// src/components/browser-viewer.tsx
-import {
-  BugIcon,
-  ChevronDownIcon,
-  CircleAlertIcon,
-  Globe2Icon,
-  LoaderCircleIcon,
-  MonitorIcon,
-  PlusIcon,
-  RefreshCwIcon,
-  SaveIcon,
-  UserRoundIcon,
-  XIcon
-} from "lucide-react";
-import {
-  useCallback as useCallback6,
-  useEffect as useEffect6,
-  useId,
-  useMemo as useMemo2,
-  useRef as useRef6,
-  useState as useState6
-} from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function BrowserViewer({
-  sessionId,
-  enabled = true,
-  className,
-  onNotify,
-  webSocketFactory,
-  renderEmpty,
-  createLinkedComputer,
-  onOpenComputer,
-  ...override
-}) {
-  const registry = useBrowserSessions({ ...override, sessionId, enabled });
-  const attached = useAttachedBrowsers({ ...override, enabled });
-  const profiles = useBrowserIdentities({ ...override, enabled });
-  const createRegistryBrowser = registry.create;
-  const loadProfileRevisions = profiles.revisions;
-  const liveSessions = useMemo2(
-    () => registry.sessions.filter((session) => isLiveBrowser2(session)),
-    [registry.sessions]
-  );
-  const relevant = useMemo2(
-    () => registry.relevantSessions.filter((session) => isLiveBrowser2(session)),
-    [registry.relevantSessions]
-  );
-  const [selection, setSelection] = useState6(null);
-  const [creating, setCreating] = useState6(false);
-  const [savingProfile, setSavingProfile] = useState6(false);
-  const [baseRevisionOrdinal, setBaseRevisionOrdinal] = useState6(null);
-  const [resumeAttempt, setResumeAttempt] = useState6(null);
-  const resumeAttemptsRef = useRef6(/* @__PURE__ */ new Map());
-  const previousSessionIdRef = useRef6(sessionId);
-  const notifyError = useCallback6(
-    (cause, fallback) => {
-      const message = cause instanceof Error ? cause.message : fallback;
-      onNotify?.({ kind: "error", message });
-    },
-    [onNotify]
-  );
-  useEffect6(() => {
-    if (previousSessionIdRef.current !== sessionId) {
-      previousSessionIdRef.current = sessionId;
-      setSelection(null);
-    }
-  }, [sessionId]);
-  useEffect6(() => {
-    const selectedStillLive = liveSessions.some((session) => session.id === selection?.sessionId);
-    const preferred = relevant[0] ?? liveSessions[0] ?? null;
-    if (!preferred) {
-      if (selection) setSelection(null);
-      return;
-    }
-    if (!selectedStillLive || !selection?.pinned) {
-      if (selection?.sessionId !== preferred.id || selection.pinned) {
-        setSelection({ sessionId: preferred.id, pinned: false });
-      }
-    }
-  }, [liveSessions, relevant, selection]);
-  const selectedRegistrySession = useMemo2(
-    () => liveSessions.find((session) => session.id === selection?.sessionId) ?? null,
-    [liveSessions, selection?.sessionId]
-  );
-  const controllerReady = selectedRegistrySession?.lifecycle === "active";
-  const resumeSession = registry.resume;
-  const wakeBrowser = useCallback6(
-    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]
-  );
-  useEffect6(() => {
-    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
-  });
-  const frames = useBrowserFrameStream({
-    ...override,
-    browserSessionId: selection?.sessionId ?? null,
-    targetId: browser.selectedTarget?.id ?? null,
-    enabled: enabled && selection !== null && controllerReady && browser.selectedTarget !== null,
-    stream: { format: "jpeg", quality: 76, maxWidth: 1920, maxHeight: 1200 },
-    ...webSocketFactory ? { webSocketFactory } : {}
-  });
-  const displayedFrame = frameMatchesObservation(frames.frame, browser.observation) ? frames.frame : null;
-  const displayConnectionState = frames.state === "live" && !displayedFrame ? "connecting" : frames.state;
-  const selectedProfile = useMemo2(
-    () => profiles.identities.find(
-      (identity) => identity.id === (browser.session?.identityId ?? selectedRegistrySession?.identityId)
-    ) ?? null,
-    [browser.session?.identityId, profiles.identities, selectedRegistrySession?.identityId]
-  );
-  useEffect6(() => {
-    const identityId = browser.session?.identityId ?? selectedRegistrySession?.identityId;
-    const revisionId = browser.session?.baseRevisionId ?? selectedRegistrySession?.baseRevisionId;
-    if (!identityId || !revisionId) {
-      setBaseRevisionOrdinal(null);
-      return;
-    }
-    let disposed = false;
-    setBaseRevisionOrdinal(null);
-    void loadProfileRevisions(identityId).then((response) => {
-      if (!disposed) {
-        setBaseRevisionOrdinal(
-          response.revisions.find((revision) => revision.id === revisionId)?.ordinal ?? null
-        );
-      }
-    }).catch(() => void 0);
-    return () => {
-      disposed = true;
-    };
-  }, [
-    browser.session?.baseRevisionId,
-    browser.session?.identityId,
-    loadProfileRevisions,
-    selectedRegistrySession?.baseRevisionId,
-    selectedRegistrySession?.identityId
-  ]);
-  const createBrowser = useCallback6(
-    (choice = { kind: "clean" }) => {
-      if (creating) return;
-      const identity = choice.kind === "profile" ? profiles.identities.find((candidate) => candidate.id === choice.identityId) : null;
-      const device = choice.kind === "attached" ? choice.device : null;
-      const browserName = device?.profileLabel ?? device?.name ?? (identity ? `${identity.name} browser` : "Browser");
-      setCreating(true);
-      void (async () => {
-        const linkedComputer = !device && createLinkedComputer ? await createLinkedComputer(`${browserName} computer`) : null;
-        const response = await createRegistryBrowser({
-          sessionId,
-          name: browserName,
-          ...device ? {
-            headless: false,
-            placement: {
-              kind: "attached_device",
-              deviceId: device.id
-            }
-          } : {},
-          ...linkedComputer ? {
-            headless: false,
-            linkedComputerSessionId: linkedComputer.id,
-            placement: linkedComputer.placement
-          } : {},
-          ...identity ? { identityId: identity.id } : {}
-        });
-        setSelection({ sessionId: response.session.id, pinned: true });
-      })().catch((cause) => notifyError(cause, "Could not open a browser.")).finally(() => setCreating(false));
-    },
-    [
-      createLinkedComputer,
-      createRegistryBrowser,
-      creating,
-      notifyError,
-      profiles.identities,
-      sessionId
-    ]
-  );
-  const saveProfileVersion = useCallback6(
-    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 = (await profiles.create({ name })).identity;
-        }
-        const response = await profiles.publish(session.id, {
-          identityId: identity.id,
-          expectedHeadGeneration: identity.headGeneration,
-          advanceDefault: true
-        });
-        setBaseRevisionOrdinal(response.revision.ordinal);
-        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]
-  );
-  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: "No browser open" }),
-          /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-muted", children: "A browser appears here when this agent\u2014or another agent in the workspace\u2014opens one." }),
-          /* @__PURE__ */ jsx(
-            BrowserLaunchMenu,
-            {
-              attachedDevices: attached.devices,
-              identities: profiles.identities,
-              creating,
-              onCreate: createBrowser,
-              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("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,
-        attachedDevices: attached.devices,
-        selectedProfile,
-        baseRevisionOrdinal,
-        creating,
-        savingProfile,
-        refreshing: registry.refreshing || attached.refreshing,
-        onSelect: (browserSessionId) => setSelection({ sessionId: browserSessionId, pinned: true }),
-        onFollow: () => {
-          const preferred = relevant[0];
-          if (preferred) setSelection({ sessionId: preferred.id, pinned: false });
-        },
-        onCreate: createBrowser,
-        onSaveProfile: saveProfileVersion,
-        onRefresh: () => void Promise.all([registry.refresh(), attached.refresh()])
-      }
-    ),
-    selectedRegistrySession && !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: browser.mutating || savingProfile,
-          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().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,
-          connectionError: frames.error,
-          observation: browser.observation,
-          mutating: browser.mutating || savingProfile,
-          activityLabel: savingProfile ? "Saving browser version\u2026" : void 0,
-          onAction: (action, frame) => (frame ? browser.actFromFrame(action, frame) : browser.act(action)).then(
-            () => void 0
-          ),
-          onReconnect: frames.reconnect,
-          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,
-          onOpenComputer: browser.session?.linkedComputerSessionId && onOpenComputer ? () => {
-            const computerSessionId = browser.session?.linkedComputerSessionId;
-            if (computerSessionId) onOpenComputer(computerSessionId);
-          } : void 0,
-          onDiagnostics: () => void browser.diagnostics({ limit: 100 }).then((batch) => {
-            const errors = batch.entries.filter((entry) => entry.level === "error").length;
-            onNotify?.({
-              kind: "info",
-              message: batch.entries.length ? `${batch.entries.length} browser diagnostic${batch.entries.length === 1 ? "" : "s"} (${errors} errors).` : "No browser diagnostics."
-            });
-          }).catch((cause) => notifyError(cause, "Could not load browser diagnostics."))
-        }
-      )
-    ] })
-  ] });
-}
-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 = useRef6(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" }),
-        /* @__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,
-            onSelect: choose
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          BrowserSessionGroup,
-          {
-            label: "Other agents",
-            sessions: others,
-            identities: props.identities,
-            selectedId: props.selectedSessionId,
-            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,
-        saving: props.savingProfile,
-        onSave: props.onSaveProfile
-      }
-    ),
-    /* @__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,
-      {
-        attachedDevices: props.attachedDevices,
-        identities: props.identities,
-        creating: props.creating,
-        onCreate: props.onCreate
-      }
-    )
-  ] });
-}
-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);
-      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)
-              ] })
-            ] })
-          ]
-        },
-        session.id
-      );
-    })
-  ] });
-}
-function BrowserLaunchMenu(props) {
-  const detailsRef = useRef6(null);
-  const choose = (choice) => {
-    detailsRef.current?.removeAttribute("open");
-    props.onCreate(choice);
-  };
-  return /* @__PURE__ */ jsxs("details", { ref: detailsRef, className: cn("relative", props.prominent && "mt-4 inline-block"), children: [
-    /* @__PURE__ */ jsxs(
-      "summary",
-      {
-        onClick: (event) => {
-          if (props.creating) 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",
-          props.creating && "pointer-events-none opacity-50"
-        ),
-        "aria-label": "New browser",
-        children: [
-          props.creating ? /* @__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 ? /* @__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
-            ))
-          ] }) : 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 && "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: "Clean browser" }),
-                  /* @__PURE__ */ jsx("span", { className: "block text-og-xs text-og-subtle", children: "No saved profile" })
-                ] })
-              ]
-            }
-          ),
-          props.identities.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-1 border-t border-og-border pt-1", children: props.identities.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
-        ]
-      }
-    )
-  ] });
-}
-function BrowserProfileMenu(props) {
-  const detailsRef = useRef6(null);
-  const nameInputId = useId();
-  const [name, setName] = useState6("");
-  const attached = props.session?.placement.kind === "attached_device";
-  const canSave = props.session?.capabilities.identityPublication ?? false;
-  const save = async (newProfileName) => {
-    if (await props.onSave(newProfileName)) {
-      setName("");
-      detailsRef.current?.removeAttribute("open");
-    }
-  };
-  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 ? props.baseRevisionOrdinal ? `Started from version ${props.baseRevisionOrdinal}.` : "Not saved yet." : "This browser is not reusable yet." })
-        ] })
-      ] }),
-      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-none 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." : "This browser cannot save reusable profile state." }),
-      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 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)
-            }
-          ),
-          /* @__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" })
-            }
-          )
-        ]
-      },
-      target.id
-    )),
-    /* @__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" })
-      }
-    )
-  ] });
-}
-function BrowserAddressBar(props) {
-  const [draft, setDraft] = useState6(props.target?.url ?? "");
-  const focusedRef = useRef6(false);
-  useEffect6(() => {
-    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;
-              },
-              disabled: !props.target,
-              className: "min-w-0 flex-1 bg-transparent text-og-control text-og-fg placeholder:text-og-subtle focus-visible:outline-none 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 = useRef6(null);
-  const inputRef = useRef6(null);
-  const pointerStartRef = useRef6(null);
-  const clickTimerRef = useRef6(null);
-  const lastClickRef = useRef6(null);
-  const wheelRef = useRef6(null);
-  const actionRef = useRef6(props.onAction);
-  const errorRef = useRef6(props.onError);
-  const actionTailRef = useRef6(Promise.resolve());
-  actionRef.current = props.onAction;
-  errorRef.current = props.onError;
-  useEffect6(() => {
-    const frame = props.frame;
-    const canvas = canvasRef.current;
-    if (!frame || !canvas) return;
-    let cancelled = false;
-    let objectUrl = null;
-    void (async () => {
-      try {
-        const blob = new Blob([frame.data.slice().buffer], {
-          type: frame.mediaType
-        });
-        if (typeof createImageBitmap === "function") {
-          const bitmap = await createImageBitmap(blob);
-          if (cancelled) {
-            bitmap.close();
-            return;
-          }
-          paintCanvas(canvas, bitmap, frame.width, frame.height);
-          bitmap.close();
-          return;
-        }
-        objectUrl = URL.createObjectURL(blob);
-        const image = await loadImage(objectUrl);
-        if (!cancelled) paintCanvas(canvas, image, frame.width, frame.height);
-      } catch (cause) {
-        if (!cancelled) errorRef.current(cause);
-      }
-    })();
-    return () => {
-      cancelled = true;
-      if (objectUrl) URL.revokeObjectURL(objectUrl);
-    };
-  }, [props.frame]);
-  useEffect6(
-    () => () => {
-      if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
-      if (wheelRef.current?.timer) clearTimeout(wheelRef.current.timer);
-    },
-    []
-  );
-  const enqueue = useCallback6((action, frame) => {
-    actionTailRef.current = actionTailRef.current.catch(() => void 0).then(async () => await actionRef.current(action, frame)).catch((cause) => errorRef.current(cause));
-  }, []);
-  const point = useCallback6(
-    (frame, clientX, clientY) => browserPoint(canvasRef.current, frame, clientX, clientY),
-    []
-  );
-  const pointerDown = (event) => {
-    if (!props.frame || props.mutating) return;
-    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) {
-      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)) {
-      if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
-      clickTimerRef.current = null;
-      lastClickRef.current = null;
-      enqueue({ type: "pointer", action: "double_click", x: to.x, y: to.y }, start.frame);
-      return;
-    }
-    lastClickRef.current = { at: now, x: to.x, y: to.y, frame: start.frame };
-    clickTimerRef.current = setTimeout(() => {
-      clickTimerRef.current = null;
-      lastClickRef.current = null;
-      enqueue({ type: "pointer", action: "click", x: to.x, y: to.y }, start.frame);
-    }, 280);
-  };
-  const contextMenu = (event) => {
-    event.preventDefault();
-    const frame = props.frame;
-    if (!frame) return;
-    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;
-    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 key = browserKey(event);
-    if (!key) return;
-    event.preventDefault();
-    enqueue({ type: "press", key }, props.frame);
-  };
-  const input = (value) => {
-    if (!value) return;
-    enqueue({ type: "type", text: value }, props.frame);
-    if (inputRef.current) inputRef.current.value = "";
-  };
-  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-none 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),
-        onKeyDown: keyDown,
-        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,
-        error: props.connectionError,
-        onAction: (action) => enqueue(action, null),
-        onReconnect: props.onReconnect
-      }
-    ) : null,
-    props.mutating ? /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute right-3 top-3 flex items-center gap-1.5 rounded-full border border-white/10 bg-black/65 px-2.5 py-1 text-[11px] text-white/80 backdrop-blur", children: [
-      /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }),
-      " ",
-      props.activityLabel ?? "Acting"
-    ] }) : null
-  ] });
-}
-function SemanticBrowserFallback(props) {
-  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" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-4 animate-spin text-og-muted" }),
-      /* @__PURE__ */ jsx("p", { className: "text-og-menu font-medium text-og-fg", children: props.error ? "Live view disconnected" : browserConnectionLabel(props.connectionState) })
-    ] }),
-    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: "Page controls remain available" }),
-      /* @__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 ? /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: props.onReconnect,
-        className: "mt-3 text-og-control font-medium text-og-accent hover:underline",
-        children: "Reconnect"
-      }
-    ) : null
-  ] }) });
-}
-function BrowserStatusBar(props) {
-  const errors = props.observation?.diagnostics.consoleErrorCount ?? 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" ? "bg-og-status-running" : "bg-og-muted"
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx("span", { children: props.connectionState === "live" ? "Live" : 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 Computer",
-        children: [
-          /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3" }),
-          "Computer"
-        ]
-      }
-    ) : null,
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: props.onDiagnostics,
-        className: "flex items-center gap-1 rounded px-1.5 py-0.5 transition hover:bg-og-surface-2 hover:text-og-fg",
-        children: [
-          /* @__PURE__ */ jsx(BugIcon, { className: "size-3" }),
-          errors + failed > 0 ? errors + failed : "Debug"
-        ]
-      }
-    )
-  ] });
-}
-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 browserKey(event) {
-  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("Control");
-  if (event.altKey) parts.push("Alt");
-  if (event.metaKey) parts.push("Meta");
-  if (event.shiftKey) parts.push("Shift");
-  parts.push(event.key === " " ? "Space" : event.key);
-  return parts.join("+");
-}
-function normalizeBrowserAddress(value) {
-  const trimmed = value.trim();
-  if (!trimmed) return null;
-  const candidate = /^[a-z][a-z0-9+.-]*:/iu.test(trimmed) ? trimmed : `https://${trimmed}`;
-  try {
-    const url = new URL(candidate);
-    return ["http:", "https:", "about:"].includes(url.protocol) ? url.href : null;
-  } catch {
-    return null;
-  }
-}
-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 frameMatchesObservation(frame, observation) {
-  return Boolean(
-    frame && observation && frame.browserSessionId === observation.browserSessionId && frame.controllerGeneration === observation.target.controllerGeneration && frame.targetId === observation.target.id && frame.targetGeneration === observation.target.targetGeneration && frame.documentGeneration === observation.target.documentGeneration && frame.frameId === observation.frameId
-  );
-}
-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 isLiveBrowser2(session) {
-  return !["ending", "ended", "failed", "lost"].includes(session.lifecycle);
-}
-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";
-    default:
-      return "Waiting for browser\u2026";
-  }
-}
-function shortUrl(value) {
-  try {
-    return new URL(value).hostname || value;
-  } catch {
-    return value;
-  }
-}
-
-// src/hooks/use-computer-sessions.ts
-import { useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo3, useRef as useRef7, useState as useState7 } from "react";
-function useComputerSessions(options = {}) {
-  const { client, workspaceId, registerSessionReconciler } = useEmbeddedComputerInteraction(options);
-  const enabled = options.enabled ?? true;
-  const pageLive = usePageLiveActivity();
-  const pollIntervalMs = Math.max(1e3, options.pollIntervalMs ?? 3e3);
-  const [state, setState] = useState7(() => emptyState5(workspaceId, enabled));
-  const requestRef = useRef7({
-    id: 0,
-    controller: null
-  });
-  const mountedRef = useRef7(true);
-  const visible = state.workspaceId === workspaceId ? state : emptyState5(workspaceId, enabled);
-  const cancelLoad = useCallback7(() => {
-    const id = requestRef.current.id + 1;
-    requestRef.current.controller?.abort();
-    requestRef.current = { id, 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.workspaceId === workspaceId ? current : emptyState5(workspaceId, true),
-        loading: foreground,
-        refreshing: !foreground,
-        error: foreground || current.workspaceId !== workspaceId ? null : current.error
-      }));
-      try {
-        const response = await client.listComputerSessions(workspaceId, {
-          signal: controller.signal
-        });
-        if (!mountedRef.current || requestRef.current.id !== id) return;
-        setState({
-          workspaceId,
-          revision: response.revision,
-          sessions: sortComputerSessions(response.sessions),
-          loading: false,
-          refreshing: false,
-          error: null
-        });
-      } catch (cause) {
-        if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id)
-          return;
-        setState((current) => ({
-          ...current.workspaceId === workspaceId ? current : emptyState5(workspaceId, true),
-          loading: false,
-          refreshing: false,
-          error: cause instanceof Error ? cause : new Error(String(cause))
-        }));
-      } finally {
-        if (requestRef.current.id === id) requestRef.current = { id, controller: null };
-      }
-    },
-    [client, enabled, workspaceId]
-  );
-  const refresh = useCallback7(async () => await load(false), [load]);
-  useEffect7(() => {
-    mountedRef.current = true;
-    if (!enabled) {
-      cancelLoad();
-      setState(emptyState5(workspaceId, false));
-      return;
-    }
-    void load(true);
-    return () => {
-      mountedRef.current = false;
-      cancelLoad();
-    };
-  }, [cancelLoad, enabled, load, workspaceId]);
-  useEffect7(() => {
-    if (!enabled || !pageLive) return;
-    const timer = setInterval(() => {
-      if (!requestRef.current.controller) void load(false);
-    }, pollIntervalMs);
-    return () => clearInterval(timer);
-  }, [enabled, load, pageLive, pollIntervalMs]);
-  useEffect7(() => {
-    if (!enabled || !options.sessionId) return;
-    return registerSessionReconciler(
-      options.sessionId,
-      `computer-sessions:${workspaceId}`,
-      refresh
-    );
-  }, [enabled, options.sessionId, refresh, registerSessionReconciler, workspaceId]);
-  const create = useCallback7(
-    async (request) => {
-      const response = await client.createComputerSession(workspaceId, {
-        ...request,
-        operationId: request.operationId ?? crypto.randomUUID()
-      });
-      setState((current) => mergeSession2(current, workspaceId, response.session));
-      return response;
-    },
-    [client, workspaceId]
-  );
-  const end = useCallback7(
-    async (computerSessionId, operationId = crypto.randomUUID()) => {
-      const response = await client.endComputerSession(workspaceId, computerSessionId, {
-        operationId
-      });
-      setState((current) => mergeSession2(current, workspaceId, response.session));
-      return response;
-    },
-    [client, workspaceId]
-  );
-  const relevantSessions = useMemo3(
-    () => options.sessionId ? visible.sessions.filter(
-      (session) => session.associations.some((association) => association.sessionId === options.sessionId)
-    ) : [],
-    [options.sessionId, visible.sessions]
-  );
-  return {
-    revision: visible.revision,
-    sessions: visible.sessions,
-    relevantSessions,
-    loading: visible.loading,
-    refreshing: visible.refreshing,
-    error: visible.error,
-    refresh,
-    create,
-    end
-  };
-}
-function emptyState5(workspaceId, loading) {
-  return {
-    workspaceId,
-    revision: 0,
-    sessions: [],
-    loading,
-    refreshing: false,
-    error: null
-  };
-}
-function sortComputerSessions(sessions) {
-  return [...sessions].sort((left, right) => {
-    const live = Number(isLiveComputer(right)) - Number(isLiveComputer(left));
-    return live || timestamp4(right.lastUsedAt) - timestamp4(left.lastUsedAt) || left.id.localeCompare(right.id);
-  });
-}
-function isLiveComputer(session) {
-  return !["ending", "ended", "failed", "lost"].includes(session.lifecycle);
-}
-function timestamp4(value) {
-  const parsed = Date.parse(value);
-  return Number.isFinite(parsed) ? parsed : 0;
-}
-function mergeSession2(current, workspaceId, session) {
-  if (current.workspaceId !== workspaceId) return current;
-  const sessions = current.sessions.filter((candidate) => candidate.id !== session.id);
-  sessions.push(session);
-  return { ...current, sessions: sortComputerSessions(sessions), error: null };
-}
-
-// src/hooks/use-computer-session.ts
-import { useCallback as useCallback8, useEffect as useEffect8, useRef as useRef8, useState as useState8 } from "react";
-function useComputerSession(options) {
-  const { client, workspaceId } = useEmbeddedComputerInteraction(options);
-  const computerSessionId = options.computerSessionId;
-  const enabled = (options.enabled ?? true) && computerSessionId !== null;
-  const pageLive = usePageLiveActivity();
-  const pollIntervalMs = Math.max(750, options.pollIntervalMs ?? 2e3);
-  const [state, setState] = useState8(
-    () => emptyState6(computerSessionId, enabled)
-  );
-  const visible = state.computerSessionId === computerSessionId ? state : emptyState6(computerSessionId, enabled);
-  const selectedTargetIdRef = useRef8(visible.selectedTargetId);
-  selectedTargetIdRef.current = visible.selectedTargetId;
-  const targetsRef = useRef8({
-    computerSessionId,
-    targets: visible.targets
-  });
-  const observationRef = useRef8({ computerSessionId, observation: visible.observation });
-  if (targetsRef.current.computerSessionId !== computerSessionId) {
-    targetsRef.current = { computerSessionId, targets: visible.targets };
-    observationRef.current = {
-      computerSessionId,
-      observation: visible.observation
-    };
-  } else {
-    targetsRef.current.targets = visible.targets;
-    observationRef.current.observation = visible.observation;
-  }
-  const requestRef = useRef8({
-    id: 0,
-    controller: null
-  });
-  const mutationRef = useRef8({
-    computerSessionId,
-    count: 0
-  });
-  const mountedRef = useRef8(true);
-  const invalidateRefresh = useCallback8(() => {
-    const id = requestRef.current.id + 1;
-    requestRef.current.controller?.abort();
-    requestRef.current = { id, controller: null };
-  }, []);
-  const refresh = useCallback8(async () => {
-    if (!enabled || !computerSessionId) 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.getComputerSession(workspaceId, computerSessionId, {
-          signal: controller.signal
-        }),
-        client.listComputerTargets(workspaceId, computerSessionId, {
-          signal: controller.signal
-        })
-      ]);
-      if (!mountedRef.current || requestRef.current.id !== id) return;
-      const targets = sortComputerTargets(targetResponse.targets);
-      const selected = chooseTarget2(targets, selectedTargetIdRef.current);
-      const observation = selected ? await client.observeComputerTarget(workspaceId, computerSessionId, selected.id, {
-        signal: controller.signal
-      }) : null;
-      if (!mountedRef.current || requestRef.current.id !== id) return;
-      selectedTargetIdRef.current = selected?.id ?? null;
-      targetsRef.current = { computerSessionId, targets };
-      observationRef.current = { computerSessionId, observation };
-      setState(
-        (current) => current.computerSessionId === computerSessionId ? {
-          ...current,
-          session,
-          targets,
-          selectedTargetId: selected?.id ?? null,
-          observation,
-          loading: false,
-          error: null
-        } : current
-      );
-    } catch (cause) {
-      if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id) return;
-      setState(
-        (current) => current.computerSessionId === computerSessionId ? {
-          ...current,
-          loading: false,
-          error: cause instanceof Error ? cause : new Error(String(cause))
-        } : current
-      );
-    } finally {
-      if (requestRef.current.id === id) requestRef.current = { id, controller: null };
-    }
-  }, [client, computerSessionId, enabled, workspaceId]);
-  useEffect8(() => {
-    mountedRef.current = true;
-    if (!enabled) {
-      invalidateRefresh();
-      setState(emptyState6(computerSessionId, false));
-      return;
-    }
-    setState(
-      (current) => current.computerSessionId === computerSessionId ? { ...current, loading: true } : emptyState6(computerSessionId, true)
-    );
-    void refresh();
-    return () => {
-      mountedRef.current = false;
-      invalidateRefresh();
-    };
-  }, [computerSessionId, enabled, invalidateRefresh, refresh]);
-  useEffect8(() => {
-    if (!enabled || !pageLive || visible.mutating) return;
-    const timer = setInterval(() => {
-      if (!requestRef.current.controller) void refresh();
-    }, pollIntervalMs);
-    return () => clearInterval(timer);
-  }, [enabled, pageLive, pollIntervalMs, refresh, visible.mutating]);
-  useEffect8(() => {
-    if (!enabled || !computerSessionId || !pageLive) return;
-    let disposed = false;
-    const timer = setInterval(() => {
-      void client.heartbeatComputerSession(workspaceId, computerSessionId).catch(() => {
-        if (!disposed) void refresh();
-      });
-    }, 3e4);
-    return () => {
-      disposed = true;
-      clearInterval(timer);
-    };
-  }, [client, computerSessionId, enabled, pageLive, refresh, workspaceId]);
-  const runMutation = useCallback8(
-    async (scopeComputerSessionId, operation) => {
-      invalidateRefresh();
-      if (mutationRef.current.computerSessionId !== scopeComputerSessionId) {
-        mutationRef.current = {
-          computerSessionId: scopeComputerSessionId,
-          count: 0
-        };
-      }
-      mutationRef.current.count += 1;
-      setState(
-        (current) => current.computerSessionId === scopeComputerSessionId ? { ...current, mutating: true, error: null } : current
-      );
-      try {
-        return await operation();
-      } catch (cause) {
-        const error = cause instanceof Error ? cause : new Error(String(cause));
-        setState(
-          (current) => current.computerSessionId === scopeComputerSessionId ? { ...current, error } : current
-        );
-        throw error;
-      } finally {
-        if (mutationRef.current.computerSessionId === scopeComputerSessionId) {
-          mutationRef.current.count = Math.max(0, mutationRef.current.count - 1);
-          const mutating = mutationRef.current.count > 0;
-          setState(
-            (current) => current.computerSessionId === scopeComputerSessionId ? { ...current, mutating } : current
-          );
-        }
-      }
-    },
-    [invalidateRefresh]
-  );
-  const selectTarget = useCallback8(
-    async (targetId) => {
-      if (!computerSessionId) throw new Error("No ComputerSession is selected.");
-      const target = targetsRef.current.targets.find((candidate) => candidate.id === targetId);
-      if (!target) throw new Error("The selected computer target is no longer available.");
-      invalidateRefresh();
-      selectedTargetIdRef.current = target.id;
-      observationRef.current = { computerSessionId, observation: null };
-      setState(
-        (current) => current.computerSessionId === computerSessionId ? {
-          ...current,
-          selectedTargetId: target.id,
-          observation: null,
-          loading: true,
-          error: null
-        } : current
-      );
-      try {
-        const observation = await client.observeComputerTarget(
-          workspaceId,
-          computerSessionId,
-          target.id
-        );
-        if (selectedTargetIdRef.current !== target.id) return target;
-        observationRef.current = { computerSessionId, observation };
-        setState(
-          (current) => current.computerSessionId === computerSessionId && current.selectedTargetId === target.id ? { ...current, observation, loading: false, error: null } : current
-        );
-        return observation.target;
-      } catch (cause) {
-        const error = cause instanceof Error ? cause : new Error(String(cause));
-        setState(
-          (current) => current.computerSessionId === computerSessionId && current.selectedTargetId === target.id ? { ...current, loading: false, error } : current
-        );
-        throw error;
-      }
-    },
-    [client, computerSessionId, invalidateRefresh, workspaceId]
-  );
-  const dispatchAction = useCallback8(
-    async (action, operationId, frame) => {
-      if (!computerSessionId) throw new Error("No ComputerSession is selected.");
-      if (frame && frame.computerSessionId !== computerSessionId) {
-        throw new Error("The displayed computer frame belongs to another ComputerSession.");
-      }
-      const currentObservation = observationRef.current.computerSessionId === computerSessionId ? observationRef.current.observation : null;
-      const focusTarget = action.type === "focus" ? targetsRef.current.targets.find((candidate) => candidate.id === action.targetId) ?? null : null;
-      const frameTarget = frame ? targetsRef.current.targets.find((candidate) => candidate.id === frame.targetId) ?? (currentObservation?.target.id === frame.targetId ? currentObservation.target : null) : null;
-      const target = frameTarget ?? focusTarget ?? currentObservation?.target ?? null;
-      if (!target) throw new Error("The computer target is not ready for input.");
-      if (frame && frame.targetId !== selectedTargetIdRef.current) {
-        throw new Error("The displayed computer frame is no longer selected.");
-      }
-      if (action.type === "pointer") {
-        const expectedFrameId = frame?.frameId ?? currentObservation?.frameId ?? null;
-        if (!expectedFrameId || action.frameId !== expectedFrameId) {
-          throw new Error("Pointer input must reference the exact displayed computer frame.");
-        }
-      }
-      if (action.type === "semantic" && !currentObservation) {
-        throw new Error("The computer accessibility tree is not ready for input.");
-      }
-      return await runMutation(computerSessionId, async () => {
-        const receipt = await client.actInComputer(workspaceId, computerSessionId, {
-          operationId,
-          targetId: target.id,
-          expectedTargetGeneration: frame?.targetGeneration ?? target.targetGeneration,
-          expectedObservationId: action.type === "pointer" ? null : currentObservation?.observationId ?? null,
-          expectedFrameId: action.type === "pointer" ? action.frameId : null,
-          action
-        });
-        if (receipt.observation) {
-          const observation = receipt.observation;
-          observationRef.current = { computerSessionId, observation };
-          selectedTargetIdRef.current = observation.target.id;
-          setState(
-            (current) => current.computerSessionId === computerSessionId ? {
-              ...current,
-              observation,
-              selectedTargetId: observation.target.id,
-              targets: replaceTarget2(current.targets, observation.target)
-            } : current
-          );
-        } else {
-          void refresh();
-        }
-        return receipt;
-      });
-    },
-    [client, computerSessionId, refresh, runMutation, workspaceId]
-  );
-  const act = useCallback8(
-    async (action, operationId = crypto.randomUUID()) => await dispatchAction(action, operationId, null),
-    [dispatchAction]
-  );
-  const actFromFrame = useCallback8(
-    async (action, frame, operationId = crypto.randomUUID()) => await dispatchAction(action, operationId, frame),
-    [dispatchAction]
-  );
-  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,
-    act,
-    actFromFrame
-  };
-}
-function emptyState6(computerSessionId, loading) {
-  return {
-    computerSessionId,
-    session: null,
-    targets: [],
-    selectedTargetId: null,
-    observation: null,
-    loading,
-    mutating: false,
-    error: null
-  };
-}
-function chooseTarget2(targets, preferredId) {
-  return targets.find((target) => target.id === preferredId) ?? targets.find((target) => target.focused && target.kind === "window") ?? targets.find((target) => target.kind === "window") ?? targets.find((target) => target.focused && target.kind === "app") ?? targets.find((target) => target.kind === "app") ?? targets.find((target) => target.kind === "screen") ?? targets[0] ?? null;
-}
-function sortComputerTargets(targets) {
-  const rank = { window: 0, app: 1, screen: 2 };
-  return [...targets].sort(
-    (left, right) => Number(right.focused) - Number(left.focused) || rank[left.kind] - rank[right.kind] || left.title.localeCompare(right.title) || left.id.localeCompare(right.id)
-  );
-}
-function replaceTarget2(targets, target) {
-  return sortComputerTargets([
-    ...targets.filter((candidate) => candidate.id !== target.id),
-    target
-  ]);
-}
-
-// src/hooks/use-computer-frame-stream.ts
-import {
-  computerFrameSocketUrl,
-  decodeComputerFrameMessage
-} from "@opengeni/sdk/interaction";
-import { useCallback as useCallback9, useEffect as useEffect9, useRef as useRef9, useState as useState9 } from "react";
-var RELAY_TAG_OPEN2 = 1;
-var RELAY_TAG_OPEN_ACK2 = 2;
-var RELAY_TAG_FRAME2 = 3;
-function useComputerFrameStream(options) {
-  const { client, workspaceId } = useEmbeddedComputerInteraction(options);
-  const enabled = options.enabled ?? true;
-  const [nonce, setNonce] = useState9(0);
-  const [result, setResult] = useState9({
-    state: "idle",
-    frame: null,
-    attachment: null,
-    error: null
-  });
-  const latestRef = useRef9({
-    key: "",
-    sequence: -1
-  });
-  const factoryRef = useRef9(options.webSocketFactory);
-  const streamRef = useRef9(options.stream);
-  factoryRef.current = options.webSocketFactory;
-  streamRef.current = options.stream;
-  const reconnect = useCallback9(() => setNonce((value) => value + 1), []);
-  useEffect9(() => {
-    const computerSessionId = options.computerSessionId;
-    const targetId = options.targetId;
-    if (!enabled || !computerSessionId || !targetId || typeof window === "undefined") {
-      setResult({ state: "idle", frame: null, attachment: null, error: null });
-      return;
-    }
-    latestRef.current = { key: "", sequence: -1 };
-    setResult({
-      state: "attaching",
-      frame: null,
-      attachment: null,
-      error: null
-    });
-    let disposed = false;
-    let socket = null;
-    let reconnectTimer = null;
-    let expiryTimer = null;
-    let failures = 0;
-    let controllerGeneration = null;
-    let activeStream = null;
-    let relayAccepted = false;
-    const attachmentAbort = new AbortController();
-    const clearSocket = () => {
-      if (!socket) return;
-      socket.removeEventListener("open", onOpen);
-      socket.removeEventListener("message", onMessage);
-      socket.removeEventListener("error", onError);
-      socket.removeEventListener("close", onClose);
-      if (socket.readyState === 0 || socket.readyState === 1) {
-        socket.close(1e3, "viewer detached");
-      }
-      socket = null;
-    };
-    const scheduleReconnect = () => {
-      if (disposed || reconnectTimer) return;
-      const delay = Math.min(5e3, 250 * 2 ** Math.min(failures, 5));
-      failures += 1;
-      setResult((current) => ({ ...current, state: "reconnecting" }));
-      reconnectTimer = setTimeout(() => {
-        reconnectTimer = null;
-        void connect();
-      }, delay);
-    };
-    const fail = (cause) => {
-      if (disposed) return;
-      const error = cause instanceof Error ? cause : new Error(String(cause));
-      setResult((current) => ({ ...current, state: "error", error }));
-      clearSocket();
-      scheduleReconnect();
-    };
-    const onOpen = () => {
-      if (disposed) return;
-      failures = 0;
-      if (activeStream?.kind === "relay") {
-        const body = encodeStreamOpen({
-          channel: { ...activeStream.channel, kind: STREAM_KIND_COMPUTER },
-          token: activeStream.token,
-          role: STREAM_ROLE_CLIENT,
-          resumeFromSeq: "0"
-        });
-        socket?.send(relayDatagram2(RELAY_TAG_OPEN2, body));
-        return;
-      }
-      setResult((current) => ({ ...current, state: "live", error: null }));
-    };
-    const onMessage = (event) => {
-      void (async () => {
-        try {
-          const bytes = await messageBytes2(event.data);
-          if (disposed) return;
-          let frameBytes = bytes;
-          if (activeStream?.kind === "relay") {
-            if (bytes.length < 1) throw new Error("computer relay returned an empty message");
-            const tag = bytes[0];
-            const body = bytes.subarray(1);
-            if (tag === RELAY_TAG_OPEN_ACK2) {
-              const ack = decodeStreamOpenAck(body);
-              if (!ack.accepted) {
-                throw new Error(ack.error?.message ?? "computer stream was rejected by the relay");
-              }
-              relayAccepted = true;
-              return;
-            }
-            if (tag !== RELAY_TAG_FRAME2 || !relayAccepted) return;
-            frameBytes = decodeStreamFrame(body).data;
-          }
-          const frame = await decodeComputerFrameMessage(frameBytes);
-          if (disposed) return;
-          if (frame.computerSessionId !== computerSessionId || frame.targetId !== targetId) {
-            throw new Error("computer frame belongs to another resource");
-          }
-          if (!controllerGeneration || frame.controllerGeneration !== controllerGeneration) {
-            throw new Error("computer frame belongs to a stale controller");
-          }
-          const key = `${computerSessionId}:${targetId}:${frame.controllerGeneration}:${frame.targetGeneration}`;
-          if (latestRef.current.key === key && frame.sequence <= latestRef.current.sequence) return;
-          latestRef.current = { key, sequence: frame.sequence };
-          setResult((current) => ({
-            ...current,
-            state: "live",
-            frame,
-            error: null
-          }));
-        } catch (cause) {
-          fail(cause);
-        }
-      })();
-    };
-    const onError = () => fail(new Error("Computer view lost connection."));
-    const onClose = () => {
-      if (disposed) return;
-      clearSocket();
-      scheduleReconnect();
-    };
-    const connect = async () => {
-      if (disposed) return;
-      clearSocket();
-      if (expiryTimer) clearTimeout(expiryTimer);
-      setResult((current) => ({
-        ...current,
-        state: current.attachment ? "reconnecting" : "attaching",
-        error: null
-      }));
-      try {
-        const attachment = await client.attachComputerSession(
-          workspaceId,
-          computerSessionId,
-          {
-            targetId,
-            expiresInSeconds: 120,
-            ...streamRef.current ? { stream: streamRef.current } : {}
-          },
-          { signal: attachmentAbort.signal }
-        );
-        if (disposed) return;
-        if (attachment.computerSessionId !== computerSessionId || attachment.targetId !== targetId) {
-          throw new Error("computer attachment does not match the requested resource");
-        }
-        controllerGeneration = attachment.controllerGeneration;
-        activeStream = attachment.stream;
-        relayAccepted = false;
-        setResult((current) => ({
-          ...current,
-          state: "connecting",
-          attachment: {
-            computerSessionId: attachment.computerSessionId,
-            controllerGeneration: attachment.controllerGeneration,
-            targetId: attachment.targetId,
-            expiresAt: attachment.expiresAt
-          },
-          error: null
-        }));
-        const createSocket = factoryRef.current ?? ((url, protocols) => new WebSocket(url, protocols));
-        socket = createSocket(
-          attachment.stream.kind === "relay" ? attachment.stream.url : computerFrameSocketUrl(attachment, streamRef.current),
-          attachment.stream.kind === "direct_websocket" ? [...attachment.stream.protocols] : []
-        );
-        socket.binaryType = "arraybuffer";
-        socket.addEventListener("open", onOpen);
-        socket.addEventListener("message", onMessage);
-        socket.addEventListener("error", onError);
-        socket.addEventListener("close", onClose);
-        const expiresAt = Date.parse(attachment.expiresAt);
-        const refreshIn = Number.isFinite(expiresAt) ? Math.max(1e3, expiresAt - Date.now() - 5e3) : 6e4;
-        expiryTimer = setTimeout(() => {
-          if (disposed) return;
-          clearSocket();
-          void connect();
-        }, refreshIn);
-      } catch (cause) {
-        if (attachmentAbort.signal.aborted || disposed) return;
-        fail(cause);
-      }
-    };
-    void connect();
-    return () => {
-      disposed = true;
-      attachmentAbort.abort();
-      if (reconnectTimer) clearTimeout(reconnectTimer);
-      if (expiryTimer) clearTimeout(expiryTimer);
-      clearSocket();
-    };
-  }, [client, enabled, nonce, options.computerSessionId, options.targetId, workspaceId]);
-  return { ...result, reconnect };
-}
-function relayDatagram2(tag, body) {
-  const message = new Uint8Array(body.length + 1);
-  message[0] = tag;
-  message.set(body, 1);
-  return message.buffer;
-}
-async function messageBytes2(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("computer frame stream returned a non-binary message");
-}
-
-// src/components/computer-viewer.tsx
-import {
-  ChevronDownIcon as ChevronDownIcon2,
-  CircleAlertIcon as CircleAlertIcon2,
-  KeyboardIcon,
-  LoaderCircleIcon as LoaderCircleIcon2,
-  LockKeyholeIcon,
-  MonitorIcon as MonitorIcon2,
-  MousePointer2Icon,
-  PanelsTopLeftIcon,
-  PlusIcon as PlusIcon2,
-  RefreshCwIcon as RefreshCwIcon2,
-  RotateCcwIcon
-} from "lucide-react";
-import {
-  useCallback as useCallback10,
-  useEffect as useEffect10,
-  useMemo as useMemo4,
-  useRef as useRef10,
-  useState as useState10
-} from "react";
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function ComputerViewer({
-  sessionId,
-  enabled = true,
-  className,
-  onNotify,
-  webSocketFactory,
-  renderEmpty,
-  requestedComputerSessionId,
-  requestedComputerRequestId,
-  ...override
-}) {
-  const registry = useComputerSessions({ ...override, sessionId, enabled });
-  const createSession = registry.create;
-  const refreshRegistry = registry.refresh;
-  const liveSessions = useMemo4(
-    () => registry.sessions.filter((session) => isLiveComputer2(session)),
-    [registry.sessions]
-  );
-  const relevant = useMemo4(
-    () => registry.relevantSessions.filter((session) => isLiveComputer2(session)),
-    [registry.relevantSessions]
-  );
-  const [selection, setSelection] = useState10(null);
-  const [creating, setCreating] = useState10(false);
-  const [showControls, setShowControls] = useState10(false);
-  const previousSessionIdRef = useRef10(sessionId);
-  const handledRequestRef = useRef10(null);
-  const notifyError = useCallback10(
-    (cause, fallback) => {
-      onNotify?.({
-        kind: "error",
-        message: cause instanceof Error ? cause.message : fallback
-      });
-    },
-    [onNotify]
-  );
-  useEffect10(() => {
-    if (previousSessionIdRef.current === sessionId) return;
-    previousSessionIdRef.current = sessionId;
-    handledRequestRef.current = null;
-    setSelection(null);
-  }, [sessionId]);
-  useEffect10(() => {
-    const requested = requestedComputerSessionId ? liveSessions.find((session) => session.id === requestedComputerSessionId) ?? null : null;
-    const requestKey = requested ? `${requestedComputerRequestId ?? "default"}:${requested.id}` : null;
-    if (requested && requestKey && handledRequestRef.current !== requestKey) {
-      handledRequestRef.current = requestKey;
-      setSelection({ sessionId: requested.id, pinned: true });
-      return;
-    }
-    const selectedStillLive = liveSessions.some((session) => session.id === selection?.sessionId);
-    const preferred = relevant[0] ?? liveSessions[0] ?? null;
-    if (!preferred) {
-      if (selection) setSelection(null);
-      return;
-    }
-    if (!selectedStillLive || !selection) {
-      setSelection({ sessionId: preferred.id, pinned: false });
-      return;
-    }
-    if (!selection.pinned && relevant[0] && selection.sessionId !== relevant[0].id) {
-      setSelection({ sessionId: relevant[0].id, pinned: false });
-    }
-  }, [liveSessions, relevant, requestedComputerRequestId, requestedComputerSessionId, selection]);
-  const selectedRegistrySession = useMemo4(
-    () => liveSessions.find((session) => session.id === selection?.sessionId) ?? null,
-    [liveSessions, selection?.sessionId]
-  );
-  const controllerReady = selectedRegistrySession?.lifecycle === "active";
-  const computer = useComputerSession({
-    ...override,
-    computerSessionId: selection?.sessionId ?? null,
-    enabled: enabled && selection !== null && controllerReady
-  });
-  const act = computer.act;
-  const actFromFrame = computer.actFromFrame;
-  const refreshComputer = computer.refresh;
-  const frames = useComputerFrameStream({
-    ...override,
-    computerSessionId: selection?.sessionId ?? null,
-    targetId: computer.selectedTarget?.id ?? null,
-    enabled: enabled && selection !== null && controllerReady && computer.selectedTarget !== null,
-    stream: { format: "jpeg", quality: 82, maxWidth: 1920, maxHeight: 1200 },
-    ...webSocketFactory ? { webSocketFactory } : {}
-  });
-  const displayedFrame = frames.frame && frames.frame.computerSessionId === selection?.sessionId && frames.frame.targetId === computer.selectedTarget?.id ? frames.frame : null;
-  const machineLocked = selectedRegistrySession?.failureCode === "machine_locked";
-  const currentIds = useMemo4(() => new Set(relevant.map((session) => session.id)), [relevant]);
-  const createComputer = useCallback10(() => {
-    if (creating) return;
-    setCreating(true);
-    void createSession({ sessionId, name: "Computer" }).then((response) => {
-      setSelection({ sessionId: response.session.id, pinned: false });
-    }).catch((cause) => notifyError(cause, "Could not open a computer.")).finally(() => setCreating(false));
-  }, [createSession, creating, notifyError, sessionId]);
-  const perform = useCallback10(
-    async (action, frame) => {
-      if (action.type === "pointer") {
-        if (!frame) throw new Error("Computer view is not ready for pointer input.");
-        await actFromFrame(action, frame);
-      } else {
-        await act(action);
-      }
-    },
-    [act, actFromFrame]
-  );
-  if (!enabled) return null;
-  if (registry.loading && liveSessions.length === 0) {
-    return /* @__PURE__ */ jsx2(
-      ComputerNotice,
-      {
-        icon: /* @__PURE__ */ jsx2(LoaderCircleIcon2, { className: "size-4 animate-spin" }),
-        text: "Finding workspace computers\u2026",
-        ...className ? { className } : {}
-      }
-    );
-  }
-  if (liveSessions.length === 0) {
-    if (renderEmpty) return renderEmpty(createComputer, creating);
-    return /* @__PURE__ */ jsx2("div", { className: cn("grid h-full place-items-center bg-og-bg p-6", className), children: /* @__PURE__ */ jsxs2("div", { className: "max-w-sm text-center", children: [
-      /* @__PURE__ */ jsx2("span", { className: "mx-auto grid size-10 place-items-center rounded-og-lg border border-og-border bg-og-surface-1 text-og-muted", children: /* @__PURE__ */ jsx2(MonitorIcon2, { className: "size-5" }) }),
-      /* @__PURE__ */ jsx2("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: "No computer open" }),
-      /* @__PURE__ */ jsx2("p", { className: "mt-1 text-og-control leading-5 text-og-muted", children: "Open this agent's desktop, or switch to any computer another workspace agent uses." }),
-      /* @__PURE__ */ jsxs2(
-        "button",
-        {
-          type: "button",
-          onClick: createComputer,
-          disabled: creating,
-          className: "mt-4 inline-flex h-8 items-center gap-1.5 rounded-og-sm bg-og-accent-deep px-3 text-og-control font-medium text-og-accent-fg transition hover:brightness-110 disabled:opacity-50",
-          children: [
-            creating ? /* @__PURE__ */ jsx2(LoaderCircleIcon2, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx2(PlusIcon2, { className: "size-3.5" }),
-            "Open computer"
-          ]
-        }
-      ),
-      registry.error ? /* @__PURE__ */ jsx2("p", { className: "mt-3 text-og-control text-og-status-error", children: registry.error.message }) : null
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxs2("div", { className: cn("flex h-full min-h-0 flex-col overflow-hidden bg-og-bg", className), children: [
-    /* @__PURE__ */ jsx2(
-      ComputerToolbar,
-      {
-        sessions: liveSessions,
-        relevantSessionIds: currentIds,
-        selectedSessionId: selection?.sessionId ?? null,
-        creating,
-        refreshing: registry.refreshing,
-        onSelect: (computerSessionId) => setSelection({ sessionId: computerSessionId, pinned: true }),
-        onFollow: () => {
-          if (relevant[0]) setSelection({ sessionId: relevant[0].id, pinned: false });
-        },
-        onCreate: createComputer,
-        onRefresh: () => void Promise.all([refreshRegistry(), refreshComputer()])
-      }
-    ),
-    selectedRegistrySession && !controllerReady ? /* @__PURE__ */ jsx2(ComputerLifecyclePanel, { session: selectedRegistrySession, onRefresh: registry.refresh }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-      /* @__PURE__ */ jsx2(
-        ComputerTargetRail,
-        {
-          targets: computer.targets,
-          selectedTargetId: computer.selectedTarget?.id ?? null,
-          loading: computer.loading,
-          onSelect: (targetId) => void computer.selectTarget(targetId).catch((cause) => notifyError(cause, "Could not switch computer views."))
-        }
-      ),
-      /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-1", children: [
-        /* @__PURE__ */ jsx2(
-          ComputerViewport,
-          {
-            frame: machineLocked ? null : displayedFrame,
-            observation: computer.observation,
-            target: computer.selectedTarget,
-            machineLocked,
-            connectionState: frames.state,
-            connectionError: frames.error ?? computer.error,
-            mutating: computer.mutating,
-            onAction: perform,
-            onReconnect: frames.reconnect,
-            onError: (cause) => notifyError(cause, "Computer input failed.")
-          }
-        ),
-        showControls ? /* @__PURE__ */ jsx2(
-          ComputerSemanticPanel,
-          {
-            observation: computer.observation,
-            mutating: computer.mutating,
-            onAction: (action) => void perform(action, null).catch(
-              (cause) => notifyError(cause, "Computer action failed.")
-            )
-          }
-        ) : null
-      ] }),
-      /* @__PURE__ */ jsx2(
-        ComputerStatusBar,
-        {
-          session: computer.session,
-          target: computer.selectedTarget,
-          connectionState: frames.state,
-          refreshing: registry.refreshing,
-          showControls,
-          controlCount: semanticNodes2(computer.observation).length,
-          onToggleControls: () => setShowControls((current) => !current)
-        }
-      )
-    ] })
-  ] });
-}
-function ComputerToolbar(props) {
-  const detailsRef = useRef10(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__ */ jsxs2("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__ */ jsxs2("details", { ref: detailsRef, className: "relative min-w-0", children: [
-      /* @__PURE__ */ jsxs2("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__ */ jsx2(MonitorIcon2, { className: "size-3.5 shrink-0 text-og-muted" }),
-        /* @__PURE__ */ jsx2("span", { className: "truncate font-medium", children: selected?.name ?? "Computer" }),
-        /* @__PURE__ */ jsx2(ChevronDownIcon2, { className: "size-3 shrink-0 text-og-subtle" })
-      ] }),
-      /* @__PURE__ */ jsxs2("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__ */ jsx2(
-          ComputerSessionGroup,
-          {
-            label: "Current agent",
-            sessions: current,
-            selectedId: props.selectedSessionId,
-            onSelect: choose
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          ComputerSessionGroup,
-          {
-            label: "Other agents",
-            sessions: others,
-            selectedId: props.selectedSessionId,
-            onSelect: choose
-          }
-        ),
-        /* @__PURE__ */ jsxs2("div", { className: "mt-1 flex gap-1 border-t border-og-border pt-1", children: [
-          current.length > 0 ? /* @__PURE__ */ jsx2(MenuButton2, { onClick: props.onFollow, children: "Follow agent" }) : null,
-          /* @__PURE__ */ jsxs2(MenuButton2, { onClick: props.onCreate, disabled: props.creating, children: [
-            /* @__PURE__ */ jsx2(PlusIcon2, { className: "size-3.5" }),
-            " New computer"
-          ] })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate text-og-xs text-og-subtle", children: selected ? `${platformLabel(selected)} \xB7 ${placementLabel2(selected)}` : "" }),
-    /* @__PURE__ */ jsx2(
-      "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 computers",
-        children: /* @__PURE__ */ jsx2(RefreshCwIcon2, { className: cn("size-3.5", props.refreshing && "animate-spin") })
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        onClick: props.onCreate,
-        disabled: props.creating,
-        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": "Open a new computer",
-        children: props.creating ? /* @__PURE__ */ jsx2(LoaderCircleIcon2, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx2(PlusIcon2, { className: "size-3.5" })
-      }
-    )
-  ] });
-}
-function ComputerSessionGroup(props) {
-  if (props.sessions.length === 0) return null;
-  return /* @__PURE__ */ jsxs2("div", { className: "py-1", children: [
-    /* @__PURE__ */ jsx2("p", { className: "px-2 pb-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-subtle", children: props.label }),
-    props.sessions.map((session) => /* @__PURE__ */ jsxs2(
-      "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__ */ jsx2(
-            "span",
-            {
-              className: cn(
-                "size-1.5 rounded-full",
-                session.lifecycle === "active" ? "bg-og-status-running" : "bg-og-muted"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx2("span", { className: "block truncate text-og-control text-og-fg", children: session.name }),
-            /* @__PURE__ */ jsxs2("span", { className: "block truncate text-og-xs text-og-subtle", children: [
-              platformLabel(session),
-              " \xB7 ",
-              placementLabel2(session)
-            ] })
-          ] })
-        ]
-      },
-      session.id
-    ))
-  ] });
-}
-function MenuButton2(props) {
-  return /* @__PURE__ */ jsx2(
-    "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 ComputerTargetRail(props) {
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      className: "flex h-10 shrink-0 items-center gap-1 overflow-x-auto border-b border-og-border bg-og-surface-0 px-2",
-      "aria-label": "Computer views",
-      children: [
-        props.targets.map((target) => /* @__PURE__ */ jsxs2(
-          "button",
-          {
-            type: "button",
-            onClick: () => props.onSelect(target.id),
-            className: cn(
-              "flex h-7 max-w-56 shrink-0 items-center gap-1.5 rounded-og-sm border px-2 text-og-control transition",
-              target.id === props.selectedTargetId ? "border-og-border-strong bg-og-surface-2 text-og-fg" : "border-transparent text-og-muted hover:bg-og-surface-1 hover:text-og-fg"
-            ),
-            "aria-pressed": target.id === props.selectedTargetId,
-            children: [
-              target.kind === "screen" ? /* @__PURE__ */ jsx2(MonitorIcon2, { className: "size-3.5 shrink-0" }) : /* @__PURE__ */ jsx2(PanelsTopLeftIcon, { className: "size-3.5 shrink-0" }),
-              /* @__PURE__ */ jsx2("span", { className: "truncate", children: target.title || target.applicationId || target.kind }),
-              target.focused ? /* @__PURE__ */ jsx2(
-                "span",
-                {
-                  className: "size-1.5 shrink-0 rounded-full bg-og-status-running",
-                  "aria-label": "Focused"
-                }
-              ) : null
-            ]
-          },
-          target.id
-        )),
-        props.loading ? /* @__PURE__ */ jsx2(LoaderCircleIcon2, { className: "ml-1 size-3.5 animate-spin text-og-muted" }) : null,
-        !props.loading && props.targets.length === 0 ? /* @__PURE__ */ jsx2("span", { className: "text-og-xs text-og-subtle", children: "Waiting for apps and screens\u2026" }) : null
-      ]
-    }
-  );
-}
-function ComputerLifecyclePanel(props) {
-  const failed = ["failed", "lost", "repair_required"].includes(props.session.lifecycle);
-  return /* @__PURE__ */ jsx2("div", { className: "grid min-h-0 flex-1 place-items-center bg-og-bg p-6", children: /* @__PURE__ */ jsxs2("div", { className: "max-w-sm text-center", children: [
-    failed ? /* @__PURE__ */ jsx2(CircleAlertIcon2, { className: "mx-auto size-5 text-og-status-error" }) : /* @__PURE__ */ jsx2(LoaderCircleIcon2, { className: "mx-auto size-5 animate-spin text-og-muted" }),
-    /* @__PURE__ */ jsx2("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: failed ? "Computer needs attention" : lifecycleLabel(props.session.lifecycle) }),
-    /* @__PURE__ */ jsx2("p", { className: "mt-1 text-og-control leading-5 text-og-muted", children: props.session.failureCode ?? "The computer is being prepared on its placement. It will appear here when ready." }),
-    failed ? /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        type: "button",
-        onClick: () => void props.onRefresh(),
-        className: "mt-4 inline-flex h-8 items-center gap-1.5 rounded-og-sm border border-og-border bg-og-surface-1 px-3 text-og-control font-medium text-og-fg transition hover:bg-og-surface-2",
-        children: [
-          /* @__PURE__ */ jsx2(RotateCcwIcon, { className: "size-3.5" }),
-          " Check again"
-        ]
-      }
-    ) : null
-  ] }) });
-}
-function ComputerViewport(props) {
-  const canvasRef = useRef10(null);
-  const inputRef = useRef10(null);
-  const pointerStartRef = useRef10(null);
-  const clickTimerRef = useRef10(null);
-  const lastClickRef = useRef10(null);
-  const wheelRef = useRef10(null);
-  const actionRef = useRef10(props.onAction);
-  const errorRef = useRef10(props.onError);
-  const actionTailRef = useRef10(Promise.resolve());
-  actionRef.current = props.onAction;
-  errorRef.current = props.onError;
-  useEffect10(() => {
-    const frame = props.frame;
-    const canvas = canvasRef.current;
-    if (!frame || !canvas) return;
-    let cancelled = false;
-    let objectUrl = null;
-    void (async () => {
-      try {
-        const blob = new Blob([frame.data.slice().buffer], { type: frame.mediaType });
-        if (typeof createImageBitmap === "function") {
-          const bitmap = await createImageBitmap(blob);
-          if (cancelled) {
-            bitmap.close();
-            return;
-          }
-          paintCanvas2(canvas, bitmap, frame.width, frame.height);
-          bitmap.close();
-          return;
-        }
-        objectUrl = URL.createObjectURL(blob);
-        const image = await loadImage2(objectUrl);
-        if (!cancelled) paintCanvas2(canvas, image, frame.width, frame.height);
-      } catch (cause) {
-        if (!cancelled) errorRef.current(cause);
-      }
-    })();
-    return () => {
-      cancelled = true;
-      if (objectUrl) URL.revokeObjectURL(objectUrl);
-    };
-  }, [props.frame]);
-  useEffect10(
-    () => () => {
-      if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
-      if (wheelRef.current?.timer) clearTimeout(wheelRef.current.timer);
-    },
-    []
-  );
-  const enqueue = useCallback10((action, frame) => {
-    actionTailRef.current = actionTailRef.current.catch(() => void 0).then(async () => await actionRef.current(action, frame)).catch((cause) => errorRef.current(cause));
-  }, []);
-  const point = useCallback10(
-    (frame, clientX, clientY) => computerPoint(canvasRef.current, frame, clientX, clientY),
-    []
-  );
-  const pointerDown = (event) => {
-    if (!props.frame || props.mutating) return;
-    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) {
-      enqueue(
-        {
-          type: "pointer",
-          frameId: start.frame.frameId,
-          action: "drag",
-          x: from.x,
-          y: from.y,
-          endX: to.x,
-          endY: to.y
-        },
-        start.frame
-      );
-      return;
-    }
-    const now = Date.now();
-    const previous = lastClickRef.current;
-    if (previous && now - previous.at < 280 && Math.hypot(previous.x - to.x, previous.y - to.y) < 6 && sameFrameFence2(previous.frame, start.frame)) {
-      if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
-      clickTimerRef.current = null;
-      lastClickRef.current = null;
-      enqueue(
-        {
-          type: "pointer",
-          frameId: start.frame.frameId,
-          action: "double_click",
-          x: to.x,
-          y: to.y
-        },
-        start.frame
-      );
-      return;
-    }
-    lastClickRef.current = { at: now, x: to.x, y: to.y, frame: start.frame };
-    clickTimerRef.current = setTimeout(() => {
-      clickTimerRef.current = null;
-      lastClickRef.current = null;
-      enqueue(
-        {
-          type: "pointer",
-          frameId: start.frame.frameId,
-          action: "click",
-          x: to.x,
-          y: to.y
-        },
-        start.frame
-      );
-    }, 280);
-  };
-  const contextMenu = (event) => {
-    event.preventDefault();
-    const frame = props.frame;
-    if (!frame) return;
-    const at = point(frame, event.clientX, event.clientY);
-    if (at) {
-      enqueue(
-        {
-          type: "pointer",
-          frameId: frame.frameId,
-          action: "click",
-          x: at.x,
-          y: at.y,
-          button: "right"
-        },
-        frame
-      );
-    }
-  };
-  const wheel = (event) => {
-    const frame = props.frame;
-    if (!frame) return;
-    const at = point(frame, event.clientX, event.clientY);
-    if (!at) return;
-    event.preventDefault();
-    const pending = wheelRef.current;
-    if (pending?.timer) clearTimeout(pending.timer);
-    wheelRef.current = {
-      x: at.x,
-      y: at.y,
-      deltaX: (pending && sameFrameFence2(pending.frame, frame) ? pending.deltaX : 0) + event.deltaX,
-      deltaY: (pending && sameFrameFence2(pending.frame, frame) ? pending.deltaY : 0) + event.deltaY,
-      frame,
-      timer: setTimeout(() => {
-        const batch = wheelRef.current;
-        wheelRef.current = null;
-        if (batch) {
-          enqueue(
-            {
-              type: "pointer",
-              frameId: batch.frame.frameId,
-              action: "scroll",
-              x: batch.x,
-              y: batch.y,
-              deltaX: batch.deltaX,
-              deltaY: batch.deltaY
-            },
-            batch.frame
-          );
-        }
-      }, 45)
-    };
-  };
-  const keyDown = (event) => {
-    const key = computerKey(event);
-    if (!key) return;
-    event.preventDefault();
-    enqueue({ type: "keyboard", action: "press", value: key }, null);
-  };
-  const input = (value) => {
-    if (!value) return;
-    enqueue({ type: "keyboard", action: "type", value }, null);
-    if (inputRef.current) inputRef.current.value = "";
-  };
-  const showCanvas = props.frame !== null && !props.machineLocked;
-  return /* @__PURE__ */ jsxs2("div", { className: "relative min-h-0 flex-1 overflow-hidden bg-black", children: [
-    /* @__PURE__ */ jsx2(
-      "canvas",
-      {
-        ref: canvasRef,
-        className: cn(
-          "absolute inset-0 m-auto max-h-full max-w-full touch-none focus-visible:outline-none 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 ${props.target?.kind ?? "computer"} view`
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      "textarea",
-      {
-        ref: inputRef,
-        defaultValue: "",
-        onInput: (event) => input(event.currentTarget.value),
-        onKeyDown: keyDown,
-        className: "pointer-events-none absolute left-1/2 top-1/2 size-px resize-none overflow-hidden opacity-0",
-        "aria-label": "Computer keyboard input",
-        autoCapitalize: "off",
-        autoCorrect: "off",
-        spellCheck: false
-      }
-    ),
-    !showCanvas ? /* @__PURE__ */ jsx2(
-      ComputerViewportFallback,
-      {
-        observation: props.observation,
-        machineLocked: props.machineLocked,
-        connectionState: props.connectionState,
-        error: props.connectionError,
-        onAction: (action) => enqueue(action, null),
-        onReconnect: props.onReconnect
-      }
-    ) : null,
-    props.mutating ? /* @__PURE__ */ jsxs2("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__ */ jsx2(LoaderCircleIcon2, { className: "size-3 animate-spin" }),
-      " Acting"
-    ] }) : null
-  ] });
-}
-function ComputerViewportFallback(props) {
-  if (props.machineLocked) {
-    return /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 grid place-items-center bg-og-bg p-6", children: /* @__PURE__ */ jsxs2("div", { className: "max-w-sm text-center", children: [
-      /* @__PURE__ */ jsx2(LockKeyholeIcon, { className: "mx-auto size-6 text-og-muted" }),
-      /* @__PURE__ */ jsx2("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: "Machine locked" }),
-      /* @__PURE__ */ jsx2("p", { className: "mt-1 text-og-control leading-5 text-og-muted", children: "Live frames and input stay private until someone unlocks the machine." })
-    ] }) });
-  }
-  const interactive = semanticNodes2(props.observation).filter((node) => semanticAction(node) !== null).slice(0, 10);
-  return /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 grid place-items-center bg-og-bg p-6", children: /* @__PURE__ */ jsxs2("div", { className: "w-full max-w-md rounded-og-lg border border-og-border bg-og-surface-0 p-4 shadow-lg", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-      props.error ? /* @__PURE__ */ jsx2(CircleAlertIcon2, { className: "size-4 text-og-status-error" }) : /* @__PURE__ */ jsx2(LoaderCircleIcon2, { className: "size-4 animate-spin text-og-muted" }),
-      /* @__PURE__ */ jsx2("p", { className: "text-og-menu font-medium text-og-fg", children: props.error ? "Live view disconnected" : computerConnectionLabel(props.connectionState) })
-    ] }),
-    interactive.length > 0 ? /* @__PURE__ */ jsxs2("div", { className: "mt-3 border-t border-og-border pt-3", children: [
-      /* @__PURE__ */ jsx2("p", { className: "mb-2 text-og-xs text-og-subtle", children: "Native controls remain available" }),
-      /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-1.5", children: interactive.map((node) => /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            const action = semanticAction(node);
-            if (action) props.onAction(action);
-          },
-          className: "rounded-og-sm border border-og-border bg-og-surface-1 px-2 py-1 text-og-control text-og-fg transition hover:bg-og-surface-2",
-          children: node.name || node.role
-        },
-        node.ref
-      )) })
-    ] }) : null,
-    props.error ? /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        onClick: props.onReconnect,
-        className: "mt-3 text-og-control font-medium text-og-accent hover:underline",
-        children: "Reconnect"
-      }
-    ) : null
-  ] }) });
-}
-function ComputerSemanticPanel(props) {
-  const nodes = semanticNodes2(props.observation).slice(0, 100);
-  return /* @__PURE__ */ jsxs2("aside", { className: "w-64 shrink-0 overflow-y-auto border-l border-og-border bg-og-surface-0 p-2", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "mb-2 flex items-center gap-1.5 px-1 text-og-xs font-medium uppercase tracking-[0.1em] text-og-subtle", children: [
-      /* @__PURE__ */ jsx2(KeyboardIcon, { className: "size-3" }),
-      " Native controls"
-    ] }),
-    nodes.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "px-1 py-2 text-og-control leading-5 text-og-muted", children: "This view has no accessibility controls. Use the live image instead." }) : /* @__PURE__ */ jsx2("div", { className: "space-y-0.5", children: nodes.map((node) => {
-      const action = semanticAction(node);
-      return /* @__PURE__ */ jsxs2(
-        "button",
-        {
-          type: "button",
-          disabled: !action || props.mutating,
-          onClick: () => {
-            if (action) props.onAction(action);
-          },
-          className: "flex w-full items-start gap-2 rounded-og-sm px-2 py-1.5 text-left transition hover:bg-og-surface-2 disabled:cursor-default disabled:hover:bg-transparent",
-          children: [
-            /* @__PURE__ */ jsx2("span", { className: "mt-0.5 text-[10px] uppercase text-og-subtle", children: node.role }),
-            /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate text-og-control text-og-fg", children: node.name || semanticValue(node) || node.identifier || "Unnamed control" })
-          ]
-        },
-        node.ref
-      );
-    }) })
-  ] });
-}
-function ComputerStatusBar(props) {
-  const screen = props.target?.kind === "screen";
-  return /* @__PURE__ */ jsxs2("div", { className: "flex h-8 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__ */ jsx2(
-      "span",
-      {
-        className: cn(
-          "size-1.5 rounded-full",
-          props.connectionState === "live" ? "bg-og-status-running" : "bg-og-muted"
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx2("span", { children: props.connectionState === "live" ? "Live" : computerConnectionLabel(props.connectionState) }),
-    /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate", children: screen ? "Full screen \xB7 input may move pointer and focus" : props.session?.capabilities?.backgroundActions ? "Window \xB7 native actions can stay in the background" : props.target?.kind ?? "Computer" }),
-    screen ? /* @__PURE__ */ jsx2(MousePointer2Icon, { className: "size-3", "aria-hidden": true }) : null,
-    props.refreshing ? /* @__PURE__ */ jsx2(LoaderCircleIcon2, { className: "size-3 animate-spin" }) : null,
-    /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        type: "button",
-        onClick: props.onToggleControls,
-        "aria-pressed": props.showControls,
-        className: cn(
-          "rounded px-1.5 py-0.5 transition hover:bg-og-surface-2 hover:text-og-fg",
-          props.showControls && "bg-og-surface-2 text-og-fg"
-        ),
-        children: [
-          "Controls ",
-          props.controlCount
-        ]
-      }
-    )
-  ] });
-}
-function ComputerNotice(props) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      className: cn(
-        "grid h-full place-items-center bg-og-bg text-og-control text-og-muted",
-        props.className
-      ),
-      children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-        props.icon,
-        props.text
-      ] })
-    }
-  );
-}
-function semanticNodes2(observation) {
-  if (observation?.semantic?.kind !== "snapshot") return [];
-  const result = [];
-  const visit = (node) => {
-    result.push(node);
-    node.children?.forEach(visit);
-  };
-  observation.semantic.roots.forEach(visit);
-  return result;
-}
-function semanticAction(node) {
-  const invoke = ["invoke", "press", "click"].some((action) => node.actions.includes(action));
-  if (invoke) {
-    return {
-      type: "semantic",
-      locator: { kind: "ref", ref: node.ref },
-      action: "invoke"
-    };
-  }
-  if (node.actions.includes("focus")) {
-    return {
-      type: "semantic",
-      locator: { kind: "ref", ref: node.ref },
-      action: "focus"
-    };
-  }
-  return null;
-}
-function semanticValue(node) {
-  return typeof node.value === "string" ? node.value : null;
-}
-function paintCanvas2(canvas, image, width, height) {
-  canvas.width = width;
-  canvas.height = height;
-  const context = canvas.getContext("2d", { alpha: false });
-  if (!context) throw new Error("Computer canvas is unavailable.");
-  context.drawImage(image, 0, 0, width, height);
-}
-function loadImage2(url) {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.onload = () => resolve(image);
-    image.onerror = () => reject(new Error("Computer frame image could not be decoded."));
-    image.src = url;
-  });
-}
-function computerPoint(canvas, frame, clientX, clientY) {
-  if (!canvas) return null;
-  const rect = canvas.getBoundingClientRect();
-  if (rect.width <= 0 || rect.height <= 0) return null;
-  return {
-    x: Math.max(0, Math.min(frame.width - 1, (clientX - rect.left) / rect.width * frame.width)),
-    y: Math.max(0, Math.min(frame.height - 1, (clientY - rect.top) / rect.height * frame.height))
-  };
-}
-function computerKey(event) {
-  const special = /* @__PURE__ */ new Set([
-    "Enter",
-    "Tab",
-    "Escape",
-    "Backspace",
-    "Delete",
-    "ArrowUp",
-    "ArrowDown",
-    "ArrowLeft",
-    "ArrowRight",
-    "Home",
-    "End",
-    "PageUp",
-    "PageDown"
-  ]);
-  const modified = event.altKey || event.ctrlKey || event.metaKey;
-  if (!modified && !special.has(event.key)) return null;
-  const parts = [];
-  if (event.ctrlKey) parts.push("Control");
-  if (event.altKey) parts.push("Alt");
-  if (event.metaKey) parts.push("Meta");
-  if (event.shiftKey) parts.push("Shift");
-  parts.push(event.key === " " ? "Space" : event.key);
-  return parts.join("+");
-}
-function sameFrameFence2(left, right) {
-  return left.frameId === right.frameId && left.computerSessionId === right.computerSessionId && left.targetId === right.targetId && left.targetGeneration === right.targetGeneration;
-}
-function isLiveComputer2(session) {
-  return !["ending", "ended", "failed", "lost"].includes(session.lifecycle);
-}
-function platformLabel(session) {
-  switch (session.platform) {
-    case "macos":
-      return "Mac";
-    case "linux":
-      return "Linux";
-    case "windows":
-      return "Windows";
-    default:
-      return "Computer";
-  }
-}
-function placementLabel2(session) {
-  switch (session.placement.kind) {
-    case "sandbox_group":
-      return "Agent sandbox";
-    case "connected_machine":
-      return "Connected machine";
-    case "attached_device":
-      return "Your machine";
-    case "external_provider":
-      return "Cloud computer";
-  }
-}
-function lifecycleLabel(lifecycle) {
-  switch (lifecycle) {
-    case "starting":
-      return "Opening computer\u2026";
-    case "suspending":
-      return "Pausing computer\u2026";
-    case "suspended":
-      return "Computer paused";
-    case "restoring":
-      return "Restoring computer\u2026";
-    case "ending":
-      return "Closing computer\u2026";
-    default:
-      return "Connecting to computer\u2026";
-  }
-}
-function computerConnectionLabel(state) {
-  switch (state) {
-    case "attaching":
-      return "Opening computer view\u2026";
-    case "connecting":
-      return "Connecting\u2026";
-    case "reconnecting":
-      return "Reconnecting\u2026";
-    case "error":
-      return "Disconnected";
-    default:
-      return "Waiting for computer\u2026";
-  }
-}
-
-export {
-  useAttachedBrowsers,
-  useBrowserSessions,
-  useBrowserIdentities,
-  useBrowserSession,
-  useBrowserFrameStream,
-  BrowserViewer,
-  useComputerSessions,
-  useComputerSession,
-  useComputerFrameStream,
-  ComputerViewer
-};
-//# sourceMappingURL=chunk-7I2KB3OK.js.map