@opengeni/react 0.52.1 → 1.0.1

package/dist/chunk-R3AZOAB5.js

@@ -0,0 +1,933 @@
+import {
+  cn
+} from "./chunk-22KP6LR5.js";
+
+// src/lib/relay-wire.ts
+import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
+var STREAM_KIND_DESKTOP = 2;
+var STREAM_KIND_PTY = 1;
+var STREAM_KIND_BROWSER = 3;
+var STREAM_KIND_COMPUTER = 4;
+var STREAM_ROLE_CLIENT = 2;
+var STREAM_CLOSE_REASON_NORMAL = 1;
+function encodeChannel(message, writer) {
+  if (message.channelId !== "") writer.uint32(10).string(message.channelId);
+  if (message.workspaceId !== "") writer.uint32(18).string(message.workspaceId);
+  if (message.agentId !== "") writer.uint32(26).string(message.agentId);
+  if (message.kind !== 0) writer.uint32(32).int32(message.kind);
+  if (message.port !== 0) writer.uint32(40).uint32(message.port);
+  return writer;
+}
+function encodeStreamOpen(message) {
+  const writer = new BinaryWriter();
+  encodeChannel(message.channel, writer.uint32(10).fork()).join();
+  if (message.token !== "") writer.uint32(18).string(message.token);
+  if (message.role !== 0) writer.uint32(24).int32(message.role);
+  if (message.resumeFromSeq !== "0") writer.uint32(32).uint64(message.resumeFromSeq);
+  return writer.finish();
+}
+function encodeStreamClose(message) {
+  const writer = new BinaryWriter();
+  if (message.channelId !== "") writer.uint32(10).string(message.channelId);
+  if (message.reason !== 0) writer.uint32(16).int32(message.reason);
+  if (message.message !== "") writer.uint32(26).string(message.message);
+  return writer.finish();
+}
+function encodeStreamFrame(message) {
+  const writer = new BinaryWriter();
+  if (message.channelId !== "") writer.uint32(10).string(message.channelId);
+  if (message.seq !== "0") writer.uint32(16).uint64(message.seq);
+  if (message.data.length > 0) writer.uint32(26).bytes(message.data);
+  if (message.producedAtMs !== "0") writer.uint32(32).uint64(message.producedAtMs);
+  return writer.finish();
+}
+function decodeAgentErrorMessage(reader, length) {
+  const end = reader.pos + length;
+  let message;
+  while (reader.pos < end) {
+    const tag = reader.uint32();
+    if (tag >>> 3 === 2 && tag === 18) {
+      message = reader.string();
+      continue;
+    }
+    if ((tag & 7) === 4 || tag === 0) break;
+    reader.skip(tag & 7);
+  }
+  return message !== void 0 ? { message } : {};
+}
+function decodeStreamOpenAck(bytes) {
+  const reader = new BinaryReader(bytes);
+  const end = reader.len;
+  let accepted = false;
+  let error;
+  while (reader.pos < end) {
+    const tag = reader.uint32();
+    if (tag >>> 3 === 1 && tag === 8) {
+      accepted = reader.bool();
+      continue;
+    }
+    if (tag >>> 3 === 2 && tag === 18) {
+      error = decodeAgentErrorMessage(reader, reader.uint32());
+      continue;
+    }
+    if ((tag & 7) === 4 || tag === 0) break;
+    reader.skip(tag & 7);
+  }
+  return error !== void 0 ? { accepted, error } : { accepted };
+}
+function decodeStreamFrame(bytes) {
+  const reader = new BinaryReader(bytes);
+  const end = reader.len;
+  let seq = "0";
+  let data = new Uint8Array(0);
+  while (reader.pos < end) {
+    const tag = reader.uint32();
+    if (tag >>> 3 === 2 && tag === 16) {
+      seq = reader.uint64().toString();
+      continue;
+    }
+    if (tag >>> 3 === 3 && tag === 26) {
+      data = new Uint8Array(reader.bytes());
+      continue;
+    }
+    if ((tag & 7) === 4 || tag === 0) break;
+    reader.skip(tag & 7);
+  }
+  return { seq, data };
+}
+
+// src/hooks/use-relay-frame-stream.ts
+import { useEffect, useRef, useState } from "react";
+var TAG_OPEN = 1;
+var TAG_OPENACK = 2;
+var TAG_FRAME = 3;
+function datagram(tag, body) {
+  const out = new Uint8Array(body.length + 1);
+  out[0] = tag;
+  out.set(body, 1);
+  return out;
+}
+function defaultWebSocketFactory(url) {
+  return new WebSocket(url);
+}
+function useRelayFrameStream(options) {
+  const { capability, containerRef, webSocketFactory } = options;
+  const [state, setState] = useState("idle");
+  const [error, setError] = useState(null);
+  const [nonce, setNonce] = useState(0);
+  const stateRef = useRef("idle");
+  const setBoth = (next) => {
+    stateRef.current = next;
+    setState(next);
+  };
+  const reconnect = () => setNonce((n) => n + 1);
+  const transport = capability?.transport ?? null;
+  const url = capability?.url ?? null;
+  const token = capability?.token ?? null;
+  const factoryRef = useRef(webSocketFactory);
+  factoryRef.current = webSocketFactory;
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (transport !== "relay-frames" || !url) {
+      setBoth("idle");
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) {
+      setBoth("idle");
+      return;
+    }
+    let channel;
+    try {
+      const u = new URL(url);
+      channel = {
+        channelId: u.searchParams.get("channel") ?? "",
+        workspaceId: u.searchParams.get("ws") ?? "",
+        agentId: u.searchParams.get("agent") ?? "",
+        kind: STREAM_KIND_DESKTOP,
+        port: Number(u.searchParams.get("port") ?? "0")
+      };
+    } catch (cause) {
+      setError(cause instanceof Error ? cause : new Error(String(cause)));
+      setBoth("error");
+      return;
+    }
+    setError(null);
+    setBoth("connecting");
+    const canvas = document.createElement("canvas");
+    canvas.setAttribute("data-opengeni-desktop-frames", "");
+    const style = canvas.style;
+    style.position = "absolute";
+    style.top = "0";
+    style.left = "0";
+    style.right = "0";
+    style.bottom = "0";
+    style.margin = "auto";
+    style.maxWidth = "100%";
+    style.maxHeight = "100%";
+    style.width = "auto";
+    style.height = "auto";
+    style.display = "block";
+    style.imageRendering = "auto";
+    container.appendChild(canvas);
+    const ctx = canvas.getContext("2d");
+    let disposed = false;
+    let acked = false;
+    let decoding = false;
+    let pending = null;
+    const drainLatest = async () => {
+      if (decoding) return;
+      decoding = true;
+      try {
+        while (pending) {
+          if (disposed) break;
+          const data = pending;
+          pending = null;
+          let bmp;
+          try {
+            bmp = await createImageBitmap(new Blob([new Uint8Array(data)], { type: "image/png" }));
+          } catch {
+            continue;
+          }
+          if (disposed) {
+            bmp.close();
+            break;
+          }
+          if (canvas.width !== bmp.width || canvas.height !== bmp.height) {
+            canvas.width = bmp.width;
+            canvas.height = bmp.height;
+          }
+          ctx?.drawImage(bmp, 0, 0, canvas.width, canvas.height);
+          bmp.close();
+          if (!disposed && stateRef.current !== "connected") setBoth("connected");
+        }
+      } finally {
+        decoding = false;
+      }
+    };
+    let ws;
+    try {
+      ws = (factoryRef.current ?? defaultWebSocketFactory)(url);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause : new Error(String(cause)));
+      setBoth("error");
+      canvas.remove();
+      return;
+    }
+    ws.binaryType = "arraybuffer";
+    const onOpen = () => {
+      if (disposed) return;
+      const body = encodeStreamOpen({
+        channel,
+        token: token ?? "",
+        role: STREAM_ROLE_CLIENT,
+        resumeFromSeq: "0"
+      });
+      try {
+        ws.send(datagram(TAG_OPEN, body).buffer);
+      } catch {
+      }
+    };
+    const onMessage = (ev) => {
+      if (disposed) return;
+      const data = ev.data;
+      if (!(data instanceof ArrayBuffer)) return;
+      const buf = new Uint8Array(data);
+      if (buf.length === 0) return;
+      const tag = buf[0];
+      const rest = buf.subarray(1);
+      if (tag === TAG_OPENACK) {
+        let ack;
+        try {
+          ack = decodeStreamOpenAck(rest);
+        } catch {
+          return;
+        }
+        if (!ack.accepted) {
+          setError(
+            new Error(
+              ack.error?.message ? `desktop stream rejected: ${ack.error.message}` : "desktop stream rejected by the relay"
+            )
+          );
+          setBoth("error");
+          try {
+            ws.close();
+          } catch {
+          }
+          return;
+        }
+        acked = true;
+      } else if (tag === TAG_FRAME) {
+        let fr;
+        try {
+          fr = decodeStreamFrame(rest);
+        } catch {
+          return;
+        }
+        if (fr.data && fr.data.length > 0) {
+          pending = fr.data;
+          void drainLatest();
+        }
+      }
+    };
+    const onError = () => {
+      if (disposed) return;
+      setError((prev) => prev ?? new Error("desktop stream connection error"));
+      setBoth("error");
+    };
+    const onClose = () => {
+      if (disposed) return;
+      setError(
+        (prev) => prev ?? new Error(acked ? "desktop stream closed" : "desktop stream closed before it opened")
+      );
+      setBoth("error");
+    };
+    ws.addEventListener("open", onOpen);
+    ws.addEventListener("message", onMessage);
+    ws.addEventListener("error", onError);
+    ws.addEventListener("close", onClose);
+    return () => {
+      disposed = true;
+      pending = null;
+      ws.removeEventListener("open", onOpen);
+      ws.removeEventListener("message", onMessage);
+      ws.removeEventListener("error", onError);
+      ws.removeEventListener("close", onClose);
+      try {
+        ws.close();
+      } catch {
+      }
+      canvas.remove();
+    };
+  }, [url, token, transport, nonce]);
+  return { state, error, reconnect };
+}
+
+// src/hooks/use-desktop-stream.ts
+import {
+  desktopSocketUrl,
+  nextDesktopState
+} from "@opengeni/sdk";
+import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+async function defaultRfbFactory() {
+  const mod = await import("@novnc/novnc");
+  const RFB = mod.default;
+  return (target, url, opts) => new RFB(target, url, opts);
+}
+function useDesktopStream(options) {
+  const {
+    capability,
+    containerRef,
+    interactive,
+    scaleViewport,
+    rfbFactory,
+    webSocketProtocols,
+    webSocketFactory
+  } = options;
+  const frameStream = useRelayFrameStream({
+    capability,
+    containerRef,
+    ...webSocketFactory ? { webSocketFactory } : {}
+  });
+  const [state, setState] = useState2("idle");
+  const [error, setError] = useState2(null);
+  const [nonce, setNonce] = useState2(0);
+  const stateRef = useRef2("idle");
+  const setBoth = (next) => {
+    stateRef.current = next;
+    setState(next);
+  };
+  const reconnect = () => setNonce((n) => n + 1);
+  const sendKey = useCallback((keysym, code, down) => {
+    const rfb = rfbRef.current;
+    if (!rfb?.sendKey || rfb.viewOnly || stateRef.current !== "connected") return false;
+    rfb.sendKey(keysym, code, down);
+    return true;
+  }, []);
+  const url = capability?.url ?? null;
+  const token = capability?.token ?? null;
+  const transport = capability?.transport ?? null;
+  const mode = capability?.mode ?? "read-only";
+  const webSocketProtocolsKey = webSocketProtocols?.join("\0") ?? "";
+  const rfbRef = useRef2(null);
+  const interactiveRef = useRef2(interactive);
+  const scaleViewportRef = useRef2(scaleViewport);
+  const modeRef = useRef2(mode);
+  const rfbFactoryRef = useRef2(rfbFactory);
+  const webSocketProtocolsRef = useRef2(webSocketProtocols);
+  interactiveRef.current = interactive;
+  scaleViewportRef.current = scaleViewport;
+  modeRef.current = mode;
+  rfbFactoryRef.current = rfbFactory;
+  webSocketProtocolsRef.current = webSocketProtocols;
+  const viewOnlyFor = (m, want) => m === "read-only" || !want;
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    if (transport !== "vnc-ws" || !url) {
+      setBoth("idle");
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) {
+      setBoth("idle");
+      return;
+    }
+    let rfb = null;
+    let disposed = false;
+    setError(null);
+    setBoth("negotiating");
+    const onConnect = () => {
+      if (!disposed) setBoth(nextDesktopState(stateRef.current, { type: "connected" }));
+    };
+    const onDisconnect = () => {
+      if (!disposed) setBoth(nextDesktopState(stateRef.current, { type: "disconnected" }));
+    };
+    const onSecurityFailure = () => {
+      if (disposed) return;
+      setError(new Error("desktop authentication failed (token expired or revoked)"));
+      setBoth(nextDesktopState(stateRef.current, { type: "fail" }));
+    };
+    void (async () => {
+      try {
+        const factory = rfbFactoryRef.current ?? await defaultRfbFactory();
+        if (disposed) return;
+        const socketUrl = desktopSocketUrl({ url });
+        setBoth(nextDesktopState(stateRef.current, { type: "negotiated" }));
+        rfb = factory(container, socketUrl, {
+          credentials: token ? { password: token } : void 0,
+          ...webSocketProtocolsRef.current ? { wsProtocols: webSocketProtocolsRef.current } : {}
+        });
+        rfb.viewOnly = viewOnlyFor(modeRef.current, interactiveRef.current);
+        rfb.clipViewport = false;
+        rfb.scaleViewport = scaleViewportRef.current ?? true;
+        rfb.addEventListener("connect", onConnect);
+        rfb.addEventListener("disconnect", onDisconnect);
+        rfb.addEventListener("securityfailure", onSecurityFailure);
+        rfbRef.current = rfb;
+      } catch (cause) {
+        if (!disposed) {
+          setError(cause instanceof Error ? cause : new Error(String(cause)));
+          setBoth("error");
+        }
+      }
+    })();
+    return () => {
+      disposed = true;
+      if (rfbRef.current === rfb) rfbRef.current = null;
+      if (rfb) {
+        rfb.removeEventListener?.("connect", onConnect);
+        rfb.removeEventListener?.("disconnect", onDisconnect);
+        rfb.removeEventListener?.("securityfailure", onSecurityFailure);
+        try {
+          rfb.disconnect();
+        } catch {
+        }
+      }
+    };
+  }, [url, token, transport, webSocketProtocolsKey, nonce]);
+  useEffect2(() => {
+    const rfb = rfbRef.current;
+    if (rfb) rfb.viewOnly = viewOnlyFor(mode, interactive);
+  }, [interactive, mode, state]);
+  useEffect2(() => {
+    const rfb = rfbRef.current;
+    if (rfb) {
+      rfb.clipViewport = false;
+      rfb.scaleViewport = scaleViewport ?? true;
+    }
+  }, [scaleViewport, state]);
+  if (transport === "relay-frames") return frameStream;
+  return { state, error, reconnect, sendKey };
+}
+
+// src/components/desktop-viewer.tsx
+import { LoaderCircleIcon, MonitorIcon, MousePointerClickIcon, WifiOffIcon } from "lucide-react";
+import {
+  useEffect as useEffect3,
+  useRef as useRef3,
+  useState as useState3
+} from "react";
+
+// src/lib/host-platform.ts
+function interactionHostPlatform() {
+  if (typeof navigator === "undefined") return "other";
+  const platform = navigator.platform || navigator.userAgent;
+  return /Mac|iPhone|iPad|iPod/u.test(platform) ? "mac" : "other";
+}
+
+// src/components/desktop-viewer.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DESKTOP_MEDIA_BACKGROUND = "#000";
+function isHardUnavailable(reason) {
+  switch (reason) {
+    case "backend_unsupported":
+    case "os_unsupported":
+    case "not_provisioned":
+    case "disabled_by_policy":
+    case "tier_headless":
+      return true;
+    default:
+      return false;
+  }
+}
+function DesktopViewer({
+  capability,
+  interactive,
+  showControlToggle = true,
+  scaleViewport,
+  rfbFactory,
+  webSocketProtocols,
+  webSocketFactory,
+  onPasteText,
+  targetPlatform,
+  onActivate,
+  onAcknowledge,
+  watching,
+  onWarm,
+  renderUnavailable,
+  renderWarming,
+  renderViewerCap,
+  viewerCapReached,
+  connectTimeoutMs = 13e3,
+  className
+}) {
+  const containerRef = useRef3(null);
+  const onActivateRef = useRef3(onActivate);
+  const onAcknowledgeRef = useRef3(onAcknowledge);
+  onActivateRef.current = onActivate;
+  onAcknowledgeRef.current = onAcknowledge;
+  const acknowledgmentAttemptedRef = useRef3(false);
+  const [acknowledgmentError, setAcknowledgmentError] = useState3(null);
+  const [acknowledgmentRetryNonce, setAcknowledgmentRetryNonce] = useState3(0);
+  const [takeControl, setTakeControl] = useState3(interactive ?? false);
+  const externallyControlled = interactive !== void 0;
+  const serverAllowsControl = capability?.mode !== "read-only";
+  const wantControl = externallyControlled ? interactive : takeControl;
+  const inControl = Boolean(wantControl) && serverAllowsControl;
+  const isWatching = watching ?? true;
+  const transportNull = !capability || capability.transport === null;
+  const reason = capability?.reason ?? null;
+  const needsAcknowledgment = capability?.requiresAcknowledgment === true && capability.acknowledged !== true;
+  const noLiveAddress = Boolean(capability) && !transportNull && !capability.url;
+  const coldWarmable = transportNull && reason === "lease_cold" || !transportNull && noLiveAddress;
+  const hardUnavailable = transportNull && isHardUnavailable(reason);
+  useEffect3(() => {
+    onActivateRef.current?.();
+  }, []);
+  useEffect3(() => {
+    if (!needsAcknowledgment) {
+      acknowledgmentAttemptedRef.current = false;
+      setAcknowledgmentError(null);
+      return;
+    }
+    if (acknowledgmentAttemptedRef.current) return;
+    acknowledgmentAttemptedRef.current = true;
+    setAcknowledgmentError(null);
+    const acknowledge = onAcknowledgeRef.current;
+    if (!acknowledge) {
+      setAcknowledgmentError(new Error("Desktop acknowledgment is not configured."));
+      return;
+    }
+    let active = true;
+    void Promise.resolve().then(() => acknowledge()).catch((cause) => {
+      if (!active) return;
+      setAcknowledgmentError(cause instanceof Error ? cause : new Error(String(cause)));
+    });
+    return () => {
+      active = false;
+    };
+  }, [needsAcknowledgment, acknowledgmentRetryNonce]);
+  const retryAcknowledgment = () => {
+    acknowledgmentAttemptedRef.current = false;
+    setAcknowledgmentError(null);
+    setAcknowledgmentRetryNonce((nonce) => nonce + 1);
+  };
+  useEffect3(() => {
+    if (!inControl || externallyControlled) return;
+    const onKey = (event) => {
+      if (event.ctrlKey && event.altKey && event.shiftKey && (event.key === "Control" || event.key === "Alt" || event.key === "Shift")) {
+        event.preventDefault();
+        setTakeControl(false);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [inControl, externallyControlled]);
+  const connectCapability = !transportNull && !needsAcknowledgment && !viewerCapReached ? capability : null;
+  const stream = useDesktopStream({
+    capability: connectCapability,
+    containerRef,
+    interactive: inControl,
+    ...scaleViewport !== void 0 ? { scaleViewport } : {},
+    ...rfbFactory ? { rfbFactory } : {},
+    ...webSocketProtocols ? { webSocketProtocols } : {},
+    ...webSocketFactory ? { webSocketFactory } : {}
+  });
+  const connected = stream.state === "connected";
+  const hasLiveUrl = Boolean(connectCapability?.url);
+  const streamStateRef = useRef3(stream.state);
+  streamStateRef.current = stream.state;
+  const warmKeyRef = useRef3(null);
+  useEffect3(() => {
+    if (!isWatching || !coldWarmable || needsAcknowledgment || viewerCapReached) {
+      if (!coldWarmable) warmKeyRef.current = null;
+      return;
+    }
+    if (!onWarm) return;
+    const key = `${capability?.reason ?? ""}:${capability?.url ?? ""}:${capability?.expiresAt ?? ""}`;
+    if (warmKeyRef.current === key) return;
+    warmKeyRef.current = key;
+    onWarm();
+  }, [isWatching, coldWarmable, needsAcknowledgment, viewerCapReached, capability, onWarm]);
+  useEffect3(() => {
+    if (!hasLiveUrl || typeof document === "undefined") return;
+    const maybeReattach = () => {
+      if (document.visibilityState !== "visible") return;
+      if (streamStateRef.current === "idle") stream.reconnect();
+    };
+    document.addEventListener("visibilitychange", maybeReattach);
+    return () => document.removeEventListener("visibilitychange", maybeReattach);
+  }, [hasLiveUrl, connectCapability?.url]);
+  const [connectTimedOut, setConnectTimedOut] = useState3(false);
+  const [reconnectNonce, setReconnectNonce] = useState3(0);
+  useEffect3(() => {
+    setConnectTimedOut(false);
+    if (!hasLiveUrl || connected || stream.error || connectTimeoutMs <= 0) return;
+    const timer = setTimeout(() => setConnectTimedOut(true), connectTimeoutMs);
+    return () => clearTimeout(timer);
+  }, [
+    hasLiveUrl,
+    connected,
+    connectTimeoutMs,
+    connectCapability?.url,
+    stream.error,
+    reconnectNonce
+  ]);
+  const reconnect = () => {
+    setConnectTimedOut(false);
+    setReconnectNonce((n) => n + 1);
+    stream.reconnect();
+  };
+  const paste = (event) => {
+    if (!inControl) return;
+    const text = event.clipboardData.getData("text/plain");
+    if (!text && !event.clipboardData.types.includes("text/plain")) return;
+    if (!onPasteText?.(text)) return;
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const primaryShortcut = (event) => {
+    if (!inControl || !targetPlatform) return;
+    const hostPlatform = interactionHostPlatform();
+    if (isHostPrimaryModifier(event, hostPlatform)) {
+      event.stopPropagation();
+      return;
+    }
+    const chord = desktopPrimaryShortcut(event, hostPlatform, targetPlatform);
+    if (!chord) return;
+    if (chord === "clipboard") {
+      event.stopPropagation();
+      return;
+    }
+    const sent = chord.every(({ keysym, code, down }) => stream.sendKey?.(keysym, code, down));
+    if (!sent) return;
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const primaryModifierUp = (event) => {
+    if (inControl && isHostPrimaryModifier(event, interactionHostPlatform())) {
+      event.stopPropagation();
+    }
+  };
+  let uiState;
+  if (viewerCapReached) uiState = "viewer_cap";
+  else if (hardUnavailable) uiState = "unavailable";
+  else if (acknowledgmentError) uiState = "acknowledgment_error";
+  else if (needsAcknowledgment) uiState = "opening";
+  else if (coldWarmable) uiState = "warming";
+  else if (connected) uiState = "connected";
+  else if (stream.error) uiState = "error";
+  else if (connectTimedOut) uiState = "connect_failed";
+  else uiState = "connecting";
+  const overlayShown = uiState !== "connected" && uiState !== "connecting" && uiState !== "opening";
+  const showToggle = showControlToggle && !overlayShown;
+  let overlay = null;
+  switch (uiState) {
+    case "viewer_cap":
+      overlay = renderViewerCap?.() ?? defaultNotice(
+        "Too many viewers",
+        "This session has reached its live-viewer limit. Try again shortly."
+      );
+      break;
+    case "unavailable":
+      overlay = renderUnavailable?.(reason) ?? defaultNotice("Desktop unavailable", unavailableCopy(reason));
+      break;
+    case "acknowledgment_error":
+      overlay = defaultNotice(
+        "Couldn\u2019t open desktop",
+        acknowledgmentError?.message ?? "The desktop acknowledgment failed.",
+        retryAcknowledgment
+      );
+      break;
+    case "warming":
+      overlay = renderWarming?.() ?? /* @__PURE__ */ jsx(WarmingNotice, {});
+      break;
+    case "connect_failed":
+      overlay = defaultNotice(
+        "Couldn\u2019t connect",
+        "The desktop is warm but the live stream didn\u2019t come up. This usually clears on a retry.",
+        reconnect
+      );
+      break;
+    case "error":
+      overlay = defaultNotice(
+        "Desktop disconnected",
+        stream.error?.message ?? "The stream dropped.",
+        reconnect
+      );
+      break;
+    case "opening":
+    case "connecting":
+    case "connected":
+      overlay = null;
+      break;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative h-full w-full overflow-hidden",
+        inControl && "ring-2 ring-inset ring-og-accent",
+        className
+      ),
+      style: { backgroundColor: DESKTOP_MEDIA_BACKGROUND },
+      "data-opengeni-desktop": true,
+      "data-state": stream.state,
+      "data-ui-state": uiState,
+      "data-in-control": inControl ? "true" : void 0,
+      "data-target-platform": targetPlatform ?? void 0,
+      onKeyDownCapture: primaryShortcut,
+      onKeyUpCapture: primaryModifierUp,
+      onPasteCapture: paste,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: containerRef,
+            className: "absolute inset-0 overflow-hidden",
+            "data-opengeni-desktop-canvas": true,
+            "data-state": stream.state
+          }
+        ),
+        (uiState === "opening" || uiState === "connecting") && /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 text-og-fg-subtle", children: [
+          /* @__PURE__ */ jsxs("span", { className: "relative flex items-center justify-center", children: [
+            /* @__PURE__ */ jsx(MonitorIcon, { className: "size-8 opacity-30", strokeWidth: 1.5 }),
+            /* @__PURE__ */ jsx(
+              LoaderCircleIcon,
+              {
+                className: "absolute size-12 animate-og-spin text-og-accent opacity-70",
+                strokeWidth: 1.25
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-og-sm", children: uiState === "opening" ? "Opening the desktop\u2026" : "Connecting to the desktop\u2026" })
+        ] }),
+        showToggle && !externallyControlled && inControl && /* @__PURE__ */ jsx(
+          InControlBar,
+          {
+            shared: capability?.shared ?? false,
+            onRelease: () => setTakeControl(false)
+          }
+        ),
+        showToggle && !externallyControlled && !inControl && connected && /* @__PURE__ */ jsx(
+          TakeControlCallToAction,
+          {
+            disabled: !serverAllowsControl,
+            disabledReason: !serverAllowsControl ? capability?.client === "frames" ? "View-only \u2014 live control isn't available for this machine yet." : "This deployment streams the desktop read-only." : void 0,
+            onTakeControl: () => setTakeControl(true)
+          }
+        ),
+        overlay && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center p-4", children: overlay })
+      ]
+    }
+  );
+}
+function isHostPrimaryModifier(event, hostPlatform) {
+  return event.key === (hostPlatform === "mac" ? "Meta" : "Control");
+}
+function desktopPrimaryShortcut(event, hostPlatform, targetPlatform) {
+  const primaryHeld = hostPlatform === "mac" ? event.metaKey : event.ctrlKey;
+  if (!primaryHeld || [...event.key].length !== 1) return null;
+  const key = event.key.toLowerCase();
+  if (!event.altKey && (key === "c" || key === "v")) return "clipboard";
+  const primary = targetPlatform === "macos" ? { keysym: 65515, code: "MetaLeft" } : { keysym: 65507, code: "ControlLeft" };
+  const modifiers = [
+    primary,
+    ...event.altKey ? [{ keysym: 65513, code: "AltLeft" }] : [],
+    ...event.shiftKey ? [{ keysym: 65505, code: "ShiftLeft" }] : []
+  ];
+  const keyEvent = {
+    keysym: key.codePointAt(0),
+    code: event.code || (/^[a-z]$/u.test(key) ? `Key${key.toUpperCase()}` : key)
+  };
+  return [
+    ...modifiers.map((modifier) => ({ ...modifier, down: true })),
+    { ...keyEvent, down: true },
+    { ...keyEvent, down: false },
+    ...modifiers.reverse().map((modifier) => ({ ...modifier, down: false }))
+  ];
+}
+function TakeControlCallToAction({
+  disabled,
+  disabledReason,
+  onTakeControl
+}) {
+  return (
+    // The wrapper spans the surface but is click-through (pointer-events-none); only
+    // the button itself is interactive, so watchers can still see the desktop.
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-end justify-center pb-[8%]", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        "aria-label": "Take control of the desktop",
+        title: disabled ? disabledReason : "Take control of the desktop",
+        onClick: onTakeControl,
+        className: cn(
+          "group pointer-events-auto flex items-center gap-3 rounded-og-lg border px-5 py-3",
+          "border-og-border",
+          "bg-og-bg/85 backdrop-blur-md",
+          "shadow-og-lg",
+          "outline-hidden transition-all duration-150 ease-out",
+          "focus-visible:ring-2 focus-visible:ring-og-accent focus-visible:ring-offset-2 focus-visible:ring-offset-og-bg",
+          disabled ? "cursor-not-allowed opacity-60" : cn(
+            "cursor-pointer opacity-90 hover:-translate-y-0.5 hover:opacity-100",
+            "hover:border-og-accent",
+            "hover:bg-og-accent/10"
+          )
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex size-9 shrink-0 items-center justify-center rounded-full transition-colors",
+                "bg-og-accent",
+                "text-og-accent-fg",
+                disabled ? "" : "group-hover:scale-105"
+              ),
+              children: /* @__PURE__ */ jsx(MousePointerClickIcon, { className: "size-5", strokeWidth: 2 })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start leading-tight", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-og-base font-semibold text-og-fg", children: "Take control" }),
+            /* @__PURE__ */ jsx("span", { className: "text-og-xs text-og-fg-subtle", children: disabled && disabledReason ? disabledReason : "Drive the mouse & keyboard" })
+          ] })
+        ]
+      }
+    ) })
+  );
+}
+function InControlBar({ shared, onRelease }) {
+  return /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-x-0 top-0 flex items-center justify-between gap-2 p-2", children: [
+    /* @__PURE__ */ jsxs("span", { className: "pointer-events-auto inline-flex items-center gap-2 rounded-og-sm bg-og-accent px-2.5 py-1 text-og-xs font-medium text-og-accent-fg shadow-og-md", children: [
+      /* @__PURE__ */ jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-current", "aria-hidden": true }),
+      "You're in control",
+      /* @__PURE__ */ jsx("span", { className: "opacity-75", children: "\xB7 click Return control (or Ctrl+Alt+Shift)" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto flex items-center gap-1.5", children: [
+      shared && /* @__PURE__ */ jsx("span", { className: "rounded-og-sm bg-og-status-failed/85 px-2 py-0.5 text-og-xs text-og-accent-fg", children: "Shared sandbox \u2014 others are watching" }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onRelease,
+          title: "Return control (or press Ctrl+Alt+Shift)",
+          className: cn(
+            "inline-flex items-center gap-1.5 rounded-og-sm border px-2.5 py-1 text-og-xs font-semibold shadow-og-md transition-colors",
+            "border-og-accent bg-og-bg/90 text-og-fg backdrop-blur-sm",
+            "outline-hidden hover:bg-og-accent hover:text-og-accent-fg focus-visible:ring-2 focus-visible:ring-og-accent"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3.5", strokeWidth: 2, "aria-hidden": true }),
+            "Return control"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function unavailableCopy(reason) {
+  switch (reason) {
+    case "backend_unsupported":
+      return "This sandbox backend cannot stream a desktop.";
+    case "tier_headless":
+      return "This deployment is headless \u2014 terminal, files, and diff only.";
+    case "os_unsupported":
+      return "The sandbox OS does not support a desktop stream.";
+    case "not_provisioned":
+      return "This sandbox doesn't have a desktop yet.";
+    case "disabled_by_policy":
+      return "Desktop streaming is disabled on this deployment.";
+    case "lease_cold":
+      return "Waiting for the sandbox to start\u2026";
+    default:
+      return "The desktop isn\u2019t available for this sandbox.";
+  }
+}
+function WarmingNotice({ onRetry }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex max-w-sm flex-col items-center gap-3 rounded-og-lg border border-og-border bg-og-bg/90 p-5 text-center text-og-base text-og-fg backdrop-blur-sm", children: [
+    /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-7 animate-og-spin text-og-accent", strokeWidth: 1.5 }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "font-medium", children: "Warming the sandbox\u2026" }),
+      /* @__PURE__ */ jsx("p", { className: "text-og-sm text-og-fg-subtle", children: "Spinning up the desktop \u2014 this takes a few seconds." })
+    ] }),
+    onRetry && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onRetry,
+        className: "rounded-og-sm border border-og-border px-3 py-1.5 text-og-sm text-og-fg-muted transition-colors hover:text-og-fg pointer-coarse:min-h-11",
+        children: "Taking too long? Retry"
+      }
+    )
+  ] });
+}
+function defaultNotice(title, body, onRetry) {
+  return /* @__PURE__ */ jsxs("div", { className: "max-w-sm rounded-og-lg border border-og-border bg-og-bg p-4 text-center text-og-base text-og-fg", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-center gap-1.5 font-medium", children: [
+      onRetry && /* @__PURE__ */ jsx(WifiOffIcon, { className: "size-4 opacity-70", strokeWidth: 1.75 }),
+      title
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-og-sm text-og-fg-subtle", children: body }),
+    onRetry && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onRetry,
+        className: "mt-3 rounded-og-sm border border-og-border px-3 py-1.5 text-og-sm transition-colors hover:border-og-accent pointer-coarse:min-h-11",
+        children: "Reconnect"
+      }
+    )
+  ] });
+}
+
+export {
+  STREAM_KIND_PTY,
+  STREAM_KIND_BROWSER,
+  STREAM_KIND_COMPUTER,
+  STREAM_ROLE_CLIENT,
+  STREAM_CLOSE_REASON_NORMAL,
+  encodeStreamOpen,
+  encodeStreamClose,
+  encodeStreamFrame,
+  decodeStreamOpenAck,
+  decodeStreamFrame,
+  useRelayFrameStream,
+  useDesktopStream,
+  interactionHostPlatform,
+  DesktopViewer
+};
+//# sourceMappingURL=chunk-R3AZOAB5.js.map