@athenaintel/react 0.38.0 → 0.39.0

package/dist/workbench/ComputerLiveDesktop.cjs

@@ -0,0 +1,287 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactQuery = require("@tanstack/react-query");
+const lucideReact = require("lucide-react");
+const react = require("react");
+const useAthenaRestQuery = require("../lib/use-athena-rest-query.cjs");
+const AthenaContext = require("../provider/AthenaContext.cjs");
+const liveDesktopApi = require("./live-desktop-api.cjs");
+const sessionWorkbenchContext = require("./session-workbench-context.cjs");
+const useSessionWorkspace = require("./use-session-workspace.cjs");
+const cnfast = require("cnfast");
+const LIVE_DESKTOP_READY_TIMEOUT_MS = 3e4;
+const RUNNING_STATES = /* @__PURE__ */ new Set(["started", "running", "ready"]);
+const BUTTON_CLASS = "inline-flex shrink-0 items-center gap-1 rounded-md border border-border bg-background px-2 py-1 font-medium text-xs transition-colors hover:bg-muted outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:opacity-60";
+const Placeholder = ({
+  icon,
+  children,
+  action
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center gap-2 p-4 text-center", children: [
+  icon,
+  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-72 text-muted-foreground text-xs leading-snug", children }),
+  action
+] });
+const ComputerLiveDesktop = (props) => /* @__PURE__ */ jsxRuntime.jsx(ComputerLiveDesktopView, { ...props }, props.assetId);
+const ComputerLiveDesktopView = ({
+  assetId,
+  className,
+  readyTimeoutMs = LIVE_DESKTOP_READY_TIMEOUT_MS
+}) => {
+  var _a, _b, _c;
+  const config = AthenaContext.useAthenaConfig();
+  const { backendUrl, apiKey, getToken } = config;
+  const queryClient = useAthenaRestQuery.useAthenaQueryClient();
+  const status = useSessionWorkspace.useAthenaComputerStatus({ assetId });
+  const state = ((_a = status.data) == null ? void 0 : _a.state.toLowerCase()) ?? null;
+  const running = state !== null && RUNNING_STATES.has(state) && ((_b = status.data) == null ? void 0 : _b.explicitStop) !== "stopping";
+  const visible = ((_c = react.useContext(sessionWorkbenchContext.SessionWorkbenchContext)) == null ? void 0 : _c.isVisible) ?? true;
+  const [viewer, setViewer] = react.useState(null);
+  const [notice, setNotice] = react.useState(null);
+  const [switchError, setSwitchError] = react.useState(null);
+  const frameRef = react.useRef(null);
+  const viewerRef = react.useRef(null);
+  viewerRef.current = viewer;
+  const session = reactQuery.useMutation(
+    {
+      mutationFn: ({ mode, start }) => liveDesktopApi.createComputerLiveDesktopSession({
+        backendUrl,
+        // `config.token` is read at request time: the provider serves the
+        // latest token through a getter.
+        auth: { apiKey, token: config.token, getToken },
+        assetId,
+        mode,
+        start,
+        embedOrigin: typeof window === "undefined" ? null : window.location.origin
+      }),
+      onSuccess: (answer) => {
+        setSwitchError(null);
+        if (answer.status !== "ready") {
+          setViewer(null);
+          setNotice({ kind: answer.status, text: answer.detail });
+          return;
+        }
+        let url;
+        try {
+          url = liveDesktopApi.liveDesktopViewerUrl({ backendUrl, viewerPath: answer.viewerPath });
+        } catch {
+          setViewer(null);
+          setNotice({
+            kind: "failed",
+            text: "The computer’s desktop answered with a page this app will not open."
+          });
+          return;
+        }
+        setViewer({ url, mode: answer.mode, display: answer.display, state: "connecting" });
+        setNotice(null);
+      },
+      onError: (error) => {
+        if (viewerRef.current) {
+          setSwitchError(error.message);
+          return;
+        }
+        setNotice({ kind: "failed", text: error.message });
+      }
+    },
+    queryClient
+  );
+  const { mutate, reset } = session;
+  const opened = react.useRef(false);
+  const disconnectedByPerson = react.useRef(false);
+  react.useEffect(() => {
+    if (running && visible) return;
+    reset();
+    setViewer(null);
+    setSwitchError(null);
+    opened.current = false;
+  }, [running, visible, reset]);
+  react.useEffect(() => {
+    if (!running || !visible || opened.current || disconnectedByPerson.current) return;
+    opened.current = true;
+    mutate({ mode: liveDesktopApi.LiveDesktopMode.WATCH, start: false });
+  }, [running, visible, mutate]);
+  const viewerUrl = (viewer == null ? void 0 : viewer.url) ?? null;
+  const viewerState = (viewer == null ? void 0 : viewer.state) ?? null;
+  react.useEffect(() => {
+    if (!viewerUrl) return void 0;
+    const origin = new URL(viewerUrl).origin;
+    const end = (text) => {
+      setViewer((current) => (current == null ? void 0 : current.url) === viewerUrl ? null : current);
+      setNotice({ kind: "ended", text });
+    };
+    const onMessage = (event) => {
+      var _a2;
+      if (event.origin !== origin || event.source !== ((_a2 = frameRef.current) == null ? void 0 : _a2.contentWindow)) return;
+      const message = liveDesktopApi.readLiveDesktopViewerMessage(event.data);
+      if (!message) return;
+      if (message.status === "ready") {
+        setViewer(
+          (current) => (current == null ? void 0 : current.url) === viewerUrl ? { ...current, state: "connected" } : current
+        );
+      } else if (message.status === "error") {
+        end(message.detail);
+      } else if (message.status === "closed") {
+        const final = liveDesktopApi.finalLiveDesktopCloseNotice(message.code);
+        if (final) end(final);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [viewerUrl]);
+  react.useEffect(() => {
+    if (!viewerUrl || viewerState !== "connecting") return void 0;
+    const timer = setTimeout(() => {
+      setViewer((current) => (current == null ? void 0 : current.url) === viewerUrl ? null : current);
+      setNotice({
+        kind: "ended",
+        text: "The desktop did not start streaming here. Reconnect to try again."
+      });
+    }, readyTimeoutMs);
+    return () => clearTimeout(timer);
+  }, [viewerUrl, viewerState, readyTimeoutMs]);
+  const watch = (start = false) => {
+    disconnectedByPerson.current = false;
+    opened.current = true;
+    mutate({ mode: liveDesktopApi.LiveDesktopMode.WATCH, start });
+  };
+  const control = () => mutate({ mode: liveDesktopApi.LiveDesktopMode.CONTROL, start: false });
+  const disconnect = () => {
+    disconnectedByPerson.current = true;
+    reset();
+    setViewer(null);
+    setNotice(null);
+    setSwitchError(null);
+  };
+  const aspect = (viewer == null ? void 0 : viewer.display) ? `${viewer.display.width} / ${viewer.display.height}` : "16 / 10";
+  let body;
+  if (!running) {
+    body = /* @__PURE__ */ jsxRuntime.jsx(Placeholder, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorOffIcon, { className: "size-5 text-muted-foreground/70", "aria-hidden": true }), children: status.isPending ? "Checking the computer…" : "The computer is not running. Its desktop shows here once it is." });
+  } else if (viewer) {
+    body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "iframe",
+        {
+          ref: frameRef,
+          src: viewer.url,
+          title: "Live desktop",
+          className: "h-full w-full border-0 bg-black",
+          sandbox: "allow-scripts allow-same-origin allow-pointer-lock",
+          allow: "fullscreen; keyboard-map; autoplay; clipboard-write",
+          referrerPolicy: "no-referrer",
+          "data-live-desktop-frame": ""
+        },
+        viewer.url
+      ),
+      viewer.state === "connecting" || session.isPending ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/40", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderIcon, { className: "size-5 animate-spin text-white", "aria-label": "Connecting" }) }) : null,
+      switchError ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "alert",
+          className: "absolute inset-x-2 bottom-2 flex items-start gap-2 rounded-md border border-red-200 bg-red-50 px-2 py-1.5 text-red-900 text-xs",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": true }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children: switchError }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setSwitchError(null),
+                "aria-label": "Dismiss",
+                className: "shrink-0 rounded p-0.5 hover:bg-red-100",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3", "aria-hidden": true })
+              }
+            )
+          ]
+        }
+      ) : null
+    ] });
+  } else if (session.isPending) {
+    body = /* @__PURE__ */ jsxRuntime.jsx(Placeholder, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderIcon, { className: "size-5 animate-spin text-muted-foreground", "aria-hidden": true }), children: "Connecting to the desktop…" });
+  } else if ((notice == null ? void 0 : notice.kind) === "display_not_running") {
+    body = /* @__PURE__ */ jsxRuntime.jsx(
+      Placeholder,
+      {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorOffIcon, { className: "size-5 text-muted-foreground/70", "aria-hidden": true }),
+        action: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => watch(true), className: BUTTON_CLASS, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlayIcon, { className: "size-3.5", "aria-hidden": true }),
+          "Start the display"
+        ] }),
+        children: notice.text
+      }
+    );
+  } else if ((notice == null ? void 0 : notice.kind) === "unsupported") {
+    body = /* @__PURE__ */ jsxRuntime.jsx(Placeholder, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorOffIcon, { className: "size-5 text-muted-foreground/70", "aria-hidden": true }), children: notice.text });
+  } else if (notice) {
+    body = /* @__PURE__ */ jsxRuntime.jsx(
+      Placeholder,
+      {
+        icon: notice.kind === "failed" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, { className: "size-5 text-red-600", "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorOffIcon, { className: "size-5 text-muted-foreground/70", "aria-hidden": true }),
+        action: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => watch(), className: BUTTON_CLASS, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCwIcon, { className: "size-3.5", "aria-hidden": true }),
+          notice.kind === "failed" ? "Try again" : "Reconnect"
+        ] }),
+        children: notice.text
+      }
+    );
+  } else {
+    body = /* @__PURE__ */ jsxRuntime.jsx(
+      Placeholder,
+      {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, { className: "size-5 text-muted-foreground/70", "aria-hidden": true }),
+        action: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => watch(), className: BUTTON_CLASS, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, { className: "size-3.5", "aria-hidden": true }),
+          "Watch live"
+        ] }),
+        children: "Watch the computer’s screen as the agent works."
+      }
+    );
+  }
+  const liveMode = running && viewer ? viewer.mode : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": "Live desktop", className: cnfast.cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium text-[11px] text-muted-foreground uppercase tracking-wide", children: "Live desktop" }),
+      liveMode ? /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "data-mode": liveMode,
+          className: cnfast.cn(
+            "rounded-full px-1.5 py-px text-[10px]",
+            liveMode === liveDesktopApi.LiveDesktopMode.CONTROL ? "bg-amber-100 text-amber-900" : "bg-muted text-muted-foreground"
+          ),
+          children: liveMode === liveDesktopApi.LiveDesktopMode.CONTROL ? "In control" : "Watching"
+        }
+      ) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1" }),
+      liveMode === liveDesktopApi.LiveDesktopMode.WATCH ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: control, disabled: session.isPending, className: BUTTON_CLASS, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MousePointer2Icon, { className: "size-3.5", "aria-hidden": true }),
+        "Take control"
+      ] }) : null,
+      liveMode === liveDesktopApi.LiveDesktopMode.CONTROL ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => watch(), disabled: session.isPending, className: BUTTON_CLASS, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, { className: "size-3.5", "aria-hidden": true }),
+        "Stop controlling"
+      ] }) : null,
+      liveMode ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: disconnect,
+          "aria-label": "Disconnect from the desktop",
+          title: "Disconnect",
+          className: cnfast.cn(BUTTON_CLASS, "px-1.5"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3.5", "aria-hidden": true })
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "relative w-full overflow-hidden rounded-lg border border-border bg-muted/40",
+        style: { aspectRatio: aspect },
+        children: body
+      }
+    )
+  ] });
+};
+exports.ComputerLiveDesktop = ComputerLiveDesktop;
+exports.LIVE_DESKTOP_READY_TIMEOUT_MS = LIVE_DESKTOP_READY_TIMEOUT_MS;
+//# sourceMappingURL=ComputerLiveDesktop.cjs.map

package/dist/workbench/ComputerLiveDesktop.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComputerLiveDesktop.cjs","sources":["../../src/workbench/ComputerLiveDesktop.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMutation } from '@tanstack/react-query';\nimport {\n  AlertCircleIcon,\n  EyeIcon,\n  LoaderIcon,\n  MonitorOffIcon,\n  MousePointer2Icon,\n  PlayIcon,\n  RefreshCwIcon,\n  XIcon,\n} from 'lucide-react';\nimport { type FC, type ReactNode, useContext, useEffect, useRef, useState } from 'react';\nimport { useAthenaQueryClient } from '../lib/use-athena-rest-query';\nimport { cn } from '../lib/utils';\nimport { useAthenaConfig } from '../provider/AthenaContext';\nimport {\n  createComputerLiveDesktopSession,\n  finalLiveDesktopCloseNotice,\n  LiveDesktopMode,\n  type LiveDesktopSession,\n  liveDesktopViewerUrl,\n  readLiveDesktopViewerMessage,\n} from './live-desktop-api';\nimport { SessionWorkbenchContext } from './session-workbench-context';\nimport { useAthenaComputerStatus } from './use-session-workspace';\n\n/** How long a viewer may take to show video before the pane calls it failed. */\nexport const LIVE_DESKTOP_READY_TIMEOUT_MS = 30_000;\n\nconst RUNNING_STATES: ReadonlySet<string> = new Set(['started', 'running', 'ready']);\n\nconst BUTTON_CLASS =\n  'inline-flex shrink-0 items-center gap-1 rounded-md border border-border bg-background px-2 py-1 font-medium text-xs transition-colors hover:bg-muted outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:opacity-60';\n\n/** The viewer page the pane frames: one per ticket, its own messages move it on. */\ninterface MountedViewer {\n  url: string;\n  mode: LiveDesktopMode;\n  display: { width: number; height: number } | null;\n  /** `connected` once the page reports video (`ready`); never on a socket alone. */\n  state: 'connecting' | 'connected';\n}\n\n/** Why the pane shows no viewer, when it has something to say. */\ntype Notice =\n  | { kind: 'display_not_running'; text: string }\n  | { kind: 'unsupported'; text: string }\n  | { kind: 'ended'; text: string }\n  | { kind: 'failed'; text: string };\n\ninterface SessionRequest {\n  mode: LiveDesktopMode;\n  start: boolean;\n}\n\nconst Placeholder: FC<{ icon?: ReactNode; children: ReactNode; action?: ReactNode }> = ({\n  icon,\n  children,\n  action,\n}) => (\n  <div className=\"flex h-full w-full flex-col items-center justify-center gap-2 p-4 text-center\">\n    {icon}\n    <p className=\"max-w-72 text-muted-foreground text-xs leading-snug\">{children}</p>\n    {action}\n  </div>\n);\n\nexport interface ComputerLiveDesktopProps {\n  assetId: string;\n  className?: string;\n  /** How long a viewer may take to show video ({@link LIVE_DESKTOP_READY_TIMEOUT_MS}). */\n  readyTimeoutMs?: number;\n}\n\n/**\n * The computer's screen, live — watch it, or take control and use it — framed\n * from agora's Selkies viewer (agora `web/api/computer/live_desktop_viewer.py`).\n *\n * Opens watching as soon as it mounts on a running computer, and ends when it\n * unmounts, its workbench collapses to the rail, or the computer stops (an open\n * view keeps the computer awake, up to agora's 30-minute cap). Needs EDIT on\n * the computer, in its own workspace, and an app the computer serves on Athena\n * (agora binds the viewer to this page's origin). A computer without a display\n * (one not made from the Browser template) says so instead.\n *\n * The frame runs Selkies' page from the guest, sandboxed as Olympus frames it:\n * scripts on agora's origin, no popups, forms or top navigation. Its messages\n * only move this pane between connecting, connected and ended. Each computer\n * is its own instance (keyed by `assetId`), so a switch never shows or drives\n * the previous computer's screen.\n */\nexport const ComputerLiveDesktop: FC<ComputerLiveDesktopProps> = (props) => (\n  <ComputerLiveDesktopView key={props.assetId} {...props} />\n);\n\nconst ComputerLiveDesktopView: FC<ComputerLiveDesktopProps> = ({\n  assetId,\n  className,\n  readyTimeoutMs = LIVE_DESKTOP_READY_TIMEOUT_MS,\n}) => {\n  const config = useAthenaConfig();\n  const { backendUrl, apiKey, getToken } = config;\n  const queryClient = useAthenaQueryClient();\n  const status = useAthenaComputerStatus({ assetId });\n  const state = status.data?.state.toLowerCase() ?? null;\n  const running =\n    state !== null && RUNNING_STATES.has(state) && status.data?.explicitStop !== 'stopping';\n  // Hidden in a collapsed workbench, the pane stops its stream.\n  const visible = useContext(SessionWorkbenchContext)?.isVisible ?? true;\n\n  const [viewer, setViewer] = useState<MountedViewer | null>(null);\n  const [notice, setNotice] = useState<Notice | null>(null);\n  // A mode switch that failed while a viewer stayed on screen.\n  const [switchError, setSwitchError] = useState<string | null>(null);\n  const frameRef = useRef<HTMLIFrameElement>(null);\n  const viewerRef = useRef<MountedViewer | null>(null);\n  viewerRef.current = viewer;\n\n  const session = useMutation<LiveDesktopSession, Error, SessionRequest>(\n    {\n      mutationFn: ({ mode, start }) =>\n        createComputerLiveDesktopSession({\n          backendUrl,\n          // `config.token` is read at request time: the provider serves the\n          // latest token through a getter.\n          auth: { apiKey, token: config.token, getToken },\n          assetId,\n          mode,\n          start,\n          embedOrigin: typeof window === 'undefined' ? null : window.location.origin,\n        }),\n      onSuccess: (answer) => {\n        setSwitchError(null);\n        if (answer.status !== 'ready') {\n          setViewer(null);\n          setNotice({ kind: answer.status, text: answer.detail });\n          return;\n        }\n        let url: string;\n        try {\n          url = liveDesktopViewerUrl({ backendUrl, viewerPath: answer.viewerPath });\n        } catch {\n          setViewer(null);\n          setNotice({\n            kind: 'failed',\n            text: 'The computer’s desktop answered with a page this app will not open.',\n          });\n          return;\n        }\n        // The new page replaces the one on screen only now that it exists.\n        setViewer({ url, mode: answer.mode, display: answer.display, state: 'connecting' });\n        setNotice(null);\n      },\n      onError: (error) => {\n        // A failed switch leaves the working viewer where it is.\n        if (viewerRef.current) {\n          setSwitchError(error.message);\n          return;\n        }\n        setNotice({ kind: 'failed', text: error.message });\n      },\n    },\n    queryClient,\n  );\n  const { mutate, reset } = session;\n\n  const opened = useRef(false);\n  const disconnectedByPerson = useRef(false);\n\n  // Hidden, or the computer stopped: drop the view. Its ticket is spent, so\n  // showing again (or the computer starting again) asks for a fresh one.\n  useEffect(() => {\n    if (running && visible) return;\n    reset();\n    setViewer(null);\n    setSwitchError(null);\n    opened.current = false;\n  }, [running, visible, reset]);\n  // Watch once the computer is known to be running; never wake one.\n  useEffect(() => {\n    if (!running || !visible || opened.current || disconnectedByPerson.current) return;\n    opened.current = true;\n    mutate({ mode: LiveDesktopMode.WATCH, start: false });\n  }, [running, visible, mutate]);\n\n  // The viewer page's own messages move it on; a page agora ended takes the\n  // frame down (an unseen stream would keep the computer awake).\n  const viewerUrl = viewer?.url ?? null;\n  const viewerState = viewer?.state ?? null;\n  useEffect(() => {\n    if (!viewerUrl) return undefined;\n    const origin = new URL(viewerUrl).origin;\n    const end = (text: string) => {\n      setViewer((current) => (current?.url === viewerUrl ? null : current));\n      setNotice({ kind: 'ended', text });\n    };\n    const onMessage = (event: MessageEvent) => {\n      if (event.origin !== origin || event.source !== frameRef.current?.contentWindow) return;\n      const message = readLiveDesktopViewerMessage(event.data);\n      if (!message) return;\n      if (message.status === 'ready') {\n        setViewer((current) =>\n          current?.url === viewerUrl ? { ...current, state: 'connected' } : current,\n        );\n      } else if (message.status === 'error') {\n        end(message.detail);\n      } else if (message.status === 'closed') {\n        const final = finalLiveDesktopCloseNotice(message.code);\n        if (final) end(final);\n      }\n    };\n    window.addEventListener('message', onMessage);\n    return () => window.removeEventListener('message', onMessage);\n  }, [viewerUrl]);\n  // No video within the timeout takes the frame down too.\n  useEffect(() => {\n    if (!viewerUrl || viewerState !== 'connecting') return undefined;\n    const timer = setTimeout(() => {\n      setViewer((current) => (current?.url === viewerUrl ? null : current));\n      setNotice({\n        kind: 'ended',\n        text: 'The desktop did not start streaming here. Reconnect to try again.',\n      });\n    }, readyTimeoutMs);\n    return () => clearTimeout(timer);\n  }, [viewerUrl, viewerState, readyTimeoutMs]);\n\n  const watch = (start = false) => {\n    disconnectedByPerson.current = false;\n    opened.current = true;\n    mutate({ mode: LiveDesktopMode.WATCH, start });\n  };\n  const control = () => mutate({ mode: LiveDesktopMode.CONTROL, start: false });\n  const disconnect = () => {\n    disconnectedByPerson.current = true;\n    reset();\n    setViewer(null);\n    setNotice(null);\n    setSwitchError(null);\n  };\n\n  const aspect = viewer?.display ? `${viewer.display.width} / ${viewer.display.height}` : '16 / 10';\n  let body: ReactNode;\n  if (!running) {\n    body = (\n      <Placeholder icon={<MonitorOffIcon className=\"size-5 text-muted-foreground/70\" aria-hidden />}>\n        {status.isPending\n          ? 'Checking the computer…'\n          : 'The computer is not running. Its desktop shows here once it is.'}\n      </Placeholder>\n    );\n  } else if (viewer) {\n    body = (\n      <>\n        <iframe\n          ref={frameRef}\n          key={viewer.url}\n          src={viewer.url}\n          title=\"Live desktop\"\n          className=\"h-full w-full border-0 bg-black\"\n          sandbox=\"allow-scripts allow-same-origin allow-pointer-lock\"\n          allow=\"fullscreen; keyboard-map; autoplay; clipboard-write\"\n          referrerPolicy=\"no-referrer\"\n          data-live-desktop-frame=\"\"\n        />\n        {viewer.state === 'connecting' || session.isPending ? (\n          <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center bg-black/40\">\n            <LoaderIcon className=\"size-5 animate-spin text-white\" aria-label=\"Connecting\" />\n          </div>\n        ) : null}\n        {switchError ? (\n          <div\n            role=\"alert\"\n            className=\"absolute inset-x-2 bottom-2 flex items-start gap-2 rounded-md border border-red-200 bg-red-50 px-2 py-1.5 text-red-900 text-xs\"\n          >\n            <AlertCircleIcon className=\"mt-0.5 size-3.5 shrink-0\" aria-hidden />\n            <span className=\"min-w-0 flex-1\">{switchError}</span>\n            <button\n              type=\"button\"\n              onClick={() => setSwitchError(null)}\n              aria-label=\"Dismiss\"\n              className=\"shrink-0 rounded p-0.5 hover:bg-red-100\"\n            >\n              <XIcon className=\"size-3\" aria-hidden />\n            </button>\n          </div>\n        ) : null}\n      </>\n    );\n  } else if (session.isPending) {\n    body = (\n      <Placeholder icon={<LoaderIcon className=\"size-5 animate-spin text-muted-foreground\" aria-hidden />}>\n        Connecting to the desktop…\n      </Placeholder>\n    );\n  } else if (notice?.kind === 'display_not_running') {\n    body = (\n      <Placeholder\n        icon={<MonitorOffIcon className=\"size-5 text-muted-foreground/70\" aria-hidden />}\n        action={\n          <button type=\"button\" onClick={() => watch(true)} className={BUTTON_CLASS}>\n            <PlayIcon className=\"size-3.5\" aria-hidden />\n            Start the display\n          </button>\n        }\n      >\n        {notice.text}\n      </Placeholder>\n    );\n  } else if (notice?.kind === 'unsupported') {\n    body = (\n      <Placeholder icon={<MonitorOffIcon className=\"size-5 text-muted-foreground/70\" aria-hidden />}>\n        {notice.text}\n      </Placeholder>\n    );\n  } else if (notice) {\n    body = (\n      <Placeholder\n        icon={\n          notice.kind === 'failed' ? (\n            <AlertCircleIcon className=\"size-5 text-red-600\" aria-hidden />\n          ) : (\n            <MonitorOffIcon className=\"size-5 text-muted-foreground/70\" aria-hidden />\n          )\n        }\n        action={\n          <button type=\"button\" onClick={() => watch()} className={BUTTON_CLASS}>\n            <RefreshCwIcon className=\"size-3.5\" aria-hidden />\n            {notice.kind === 'failed' ? 'Try again' : 'Reconnect'}\n          </button>\n        }\n      >\n        {notice.text}\n      </Placeholder>\n    );\n  } else {\n    body = (\n      <Placeholder\n        icon={<EyeIcon className=\"size-5 text-muted-foreground/70\" aria-hidden />}\n        action={\n          <button type=\"button\" onClick={() => watch()} className={BUTTON_CLASS}>\n            <EyeIcon className=\"size-3.5\" aria-hidden />\n            Watch live\n          </button>\n        }\n      >\n        Watch the computer’s screen as the agent works.\n      </Placeholder>\n    );\n  }\n\n  const liveMode = running && viewer ? viewer.mode : null;\n  return (\n    <section aria-label=\"Live desktop\" className={cn('flex flex-col gap-1.5', className)}>\n      <div className=\"flex items-center gap-2\">\n        <h3 className=\"font-medium text-[11px] text-muted-foreground uppercase tracking-wide\">\n          Live desktop\n        </h3>\n        {liveMode ? (\n          <span\n            data-mode={liveMode}\n            className={cn(\n              'rounded-full px-1.5 py-px text-[10px]',\n              liveMode === LiveDesktopMode.CONTROL\n                ? 'bg-amber-100 text-amber-900'\n                : 'bg-muted text-muted-foreground',\n            )}\n          >\n            {liveMode === LiveDesktopMode.CONTROL ? 'In control' : 'Watching'}\n          </span>\n        ) : null}\n        <div className=\"min-w-0 flex-1\" />\n        {liveMode === LiveDesktopMode.WATCH ? (\n          <button type=\"button\" onClick={control} disabled={session.isPending} className={BUTTON_CLASS}>\n            <MousePointer2Icon className=\"size-3.5\" aria-hidden />\n            Take control\n          </button>\n        ) : null}\n        {liveMode === LiveDesktopMode.CONTROL ? (\n          <button type=\"button\" onClick={() => watch()} disabled={session.isPending} className={BUTTON_CLASS}>\n            <EyeIcon className=\"size-3.5\" aria-hidden />\n            Stop controlling\n          </button>\n        ) : null}\n        {liveMode ? (\n          <button\n            type=\"button\"\n            onClick={disconnect}\n            aria-label=\"Disconnect from the desktop\"\n            title=\"Disconnect\"\n            className={cn(BUTTON_CLASS, 'px-1.5')}\n          >\n            <XIcon className=\"size-3.5\" aria-hidden />\n          </button>\n        ) : null}\n      </div>\n      {/* The remote screen's aspect is a runtime value no static utility expresses. */}\n      <div\n        className=\"relative w-full overflow-hidden rounded-lg border border-border bg-muted/40\"\n        style={{ aspectRatio: aspect }}\n      >\n        {body}\n      </div>\n    </section>\n  );\n};\n"],"names":["jsxs","jsx","useAthenaConfig","useAthenaQueryClient","useAthenaComputerStatus","useContext","SessionWorkbenchContext","useState","useRef","useMutation","createComputerLiveDesktopSession","liveDesktopViewerUrl","useEffect","LiveDesktopMode","_a","readLiveDesktopViewerMessage","finalLiveDesktopCloseNotice","MonitorOffIcon","Fragment","LoaderIcon","AlertCircleIcon","XIcon","PlayIcon","RefreshCwIcon","EyeIcon","cn","MousePointer2Icon"],"mappings":"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"}

package/dist/workbench/ComputerLiveDesktop.d.ts

@@ -0,0 +1,27 @@
+import { type FC } from 'react';
+/** How long a viewer may take to show video before the pane calls it failed. */
+export declare const LIVE_DESKTOP_READY_TIMEOUT_MS = 30000;
+export interface ComputerLiveDesktopProps {
+    assetId: string;
+    className?: string;
+    /** How long a viewer may take to show video ({@link LIVE_DESKTOP_READY_TIMEOUT_MS}). */
+    readyTimeoutMs?: number;
+}
+/**
+ * The computer's screen, live — watch it, or take control and use it — framed
+ * from agora's Selkies viewer (agora `web/api/computer/live_desktop_viewer.py`).
+ *
+ * Opens watching as soon as it mounts on a running computer, and ends when it
+ * unmounts, its workbench collapses to the rail, or the computer stops (an open
+ * view keeps the computer awake, up to agora's 30-minute cap). Needs EDIT on
+ * the computer, in its own workspace, and an app the computer serves on Athena
+ * (agora binds the viewer to this page's origin). A computer without a display
+ * (one not made from the Browser template) says so instead.
+ *
+ * The frame runs Selkies' page from the guest, sandboxed as Olympus frames it:
+ * scripts on agora's origin, no popups, forms or top navigation. Its messages
+ * only move this pane between connecting, connected and ended. Each computer
+ * is its own instance (keyed by `assetId`), so a switch never shows or drives
+ * the previous computer's screen.
+ */
+export declare const ComputerLiveDesktop: FC<ComputerLiveDesktopProps>;

package/dist/workbench/ComputerLiveDesktop.js

@@ -0,0 +1,287 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
+import { MonitorOffIcon, LoaderIcon, AlertCircleIcon, XIcon, PlayIcon, RefreshCwIcon, MousePointer2Icon, EyeIcon } from "lucide-react";
+import { useContext, useState, useRef, useEffect } from "react";
+import { useAthenaQueryClient } from "../lib/use-athena-rest-query.js";
+import { useAthenaConfig } from "../provider/AthenaContext.js";
+import { liveDesktopViewerUrl, createComputerLiveDesktopSession, LiveDesktopMode, readLiveDesktopViewerMessage, finalLiveDesktopCloseNotice } from "./live-desktop-api.js";
+import { SessionWorkbenchContext } from "./session-workbench-context.js";
+import { useAthenaComputerStatus } from "./use-session-workspace.js";
+import { cn } from "cnfast";
+const LIVE_DESKTOP_READY_TIMEOUT_MS = 3e4;
+const RUNNING_STATES = /* @__PURE__ */ new Set(["started", "running", "ready"]);
+const BUTTON_CLASS = "inline-flex shrink-0 items-center gap-1 rounded-md border border-border bg-background px-2 py-1 font-medium text-xs transition-colors hover:bg-muted outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:opacity-60";
+const Placeholder = ({
+  icon,
+  children,
+  action
+}) => /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center gap-2 p-4 text-center", children: [
+  icon,
+  /* @__PURE__ */ jsx("p", { className: "max-w-72 text-muted-foreground text-xs leading-snug", children }),
+  action
+] });
+const ComputerLiveDesktop = (props) => /* @__PURE__ */ jsx(ComputerLiveDesktopView, { ...props }, props.assetId);
+const ComputerLiveDesktopView = ({
+  assetId,
+  className,
+  readyTimeoutMs = LIVE_DESKTOP_READY_TIMEOUT_MS
+}) => {
+  var _a, _b, _c;
+  const config = useAthenaConfig();
+  const { backendUrl, apiKey, getToken } = config;
+  const queryClient = useAthenaQueryClient();
+  const status = useAthenaComputerStatus({ assetId });
+  const state = ((_a = status.data) == null ? void 0 : _a.state.toLowerCase()) ?? null;
+  const running = state !== null && RUNNING_STATES.has(state) && ((_b = status.data) == null ? void 0 : _b.explicitStop) !== "stopping";
+  const visible = ((_c = useContext(SessionWorkbenchContext)) == null ? void 0 : _c.isVisible) ?? true;
+  const [viewer, setViewer] = useState(null);
+  const [notice, setNotice] = useState(null);
+  const [switchError, setSwitchError] = useState(null);
+  const frameRef = useRef(null);
+  const viewerRef = useRef(null);
+  viewerRef.current = viewer;
+  const session = useMutation(
+    {
+      mutationFn: ({ mode, start }) => createComputerLiveDesktopSession({
+        backendUrl,
+        // `config.token` is read at request time: the provider serves the
+        // latest token through a getter.
+        auth: { apiKey, token: config.token, getToken },
+        assetId,
+        mode,
+        start,
+        embedOrigin: typeof window === "undefined" ? null : window.location.origin
+      }),
+      onSuccess: (answer) => {
+        setSwitchError(null);
+        if (answer.status !== "ready") {
+          setViewer(null);
+          setNotice({ kind: answer.status, text: answer.detail });
+          return;
+        }
+        let url;
+        try {
+          url = liveDesktopViewerUrl({ backendUrl, viewerPath: answer.viewerPath });
+        } catch {
+          setViewer(null);
+          setNotice({
+            kind: "failed",
+            text: "The computer’s desktop answered with a page this app will not open."
+          });
+          return;
+        }
+        setViewer({ url, mode: answer.mode, display: answer.display, state: "connecting" });
+        setNotice(null);
+      },
+      onError: (error) => {
+        if (viewerRef.current) {
+          setSwitchError(error.message);
+          return;
+        }
+        setNotice({ kind: "failed", text: error.message });
+      }
+    },
+    queryClient
+  );
+  const { mutate, reset } = session;
+  const opened = useRef(false);
+  const disconnectedByPerson = useRef(false);
+  useEffect(() => {
+    if (running && visible) return;
+    reset();
+    setViewer(null);
+    setSwitchError(null);
+    opened.current = false;
+  }, [running, visible, reset]);
+  useEffect(() => {
+    if (!running || !visible || opened.current || disconnectedByPerson.current) return;
+    opened.current = true;
+    mutate({ mode: LiveDesktopMode.WATCH, start: false });
+  }, [running, visible, mutate]);
+  const viewerUrl = (viewer == null ? void 0 : viewer.url) ?? null;
+  const viewerState = (viewer == null ? void 0 : viewer.state) ?? null;
+  useEffect(() => {
+    if (!viewerUrl) return void 0;
+    const origin = new URL(viewerUrl).origin;
+    const end = (text) => {
+      setViewer((current) => (current == null ? void 0 : current.url) === viewerUrl ? null : current);
+      setNotice({ kind: "ended", text });
+    };
+    const onMessage = (event) => {
+      var _a2;
+      if (event.origin !== origin || event.source !== ((_a2 = frameRef.current) == null ? void 0 : _a2.contentWindow)) return;
+      const message = readLiveDesktopViewerMessage(event.data);
+      if (!message) return;
+      if (message.status === "ready") {
+        setViewer(
+          (current) => (current == null ? void 0 : current.url) === viewerUrl ? { ...current, state: "connected" } : current
+        );
+      } else if (message.status === "error") {
+        end(message.detail);
+      } else if (message.status === "closed") {
+        const final = finalLiveDesktopCloseNotice(message.code);
+        if (final) end(final);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [viewerUrl]);
+  useEffect(() => {
+    if (!viewerUrl || viewerState !== "connecting") return void 0;
+    const timer = setTimeout(() => {
+      setViewer((current) => (current == null ? void 0 : current.url) === viewerUrl ? null : current);
+      setNotice({
+        kind: "ended",
+        text: "The desktop did not start streaming here. Reconnect to try again."
+      });
+    }, readyTimeoutMs);
+    return () => clearTimeout(timer);
+  }, [viewerUrl, viewerState, readyTimeoutMs]);
+  const watch = (start = false) => {
+    disconnectedByPerson.current = false;
+    opened.current = true;
+    mutate({ mode: LiveDesktopMode.WATCH, start });
+  };
+  const control = () => mutate({ mode: LiveDesktopMode.CONTROL, start: false });
+  const disconnect = () => {
+    disconnectedByPerson.current = true;
+    reset();
+    setViewer(null);
+    setNotice(null);
+    setSwitchError(null);
+  };
+  const aspect = (viewer == null ? void 0 : viewer.display) ? `${viewer.display.width} / ${viewer.display.height}` : "16 / 10";
+  let body;
+  if (!running) {
+    body = /* @__PURE__ */ jsx(Placeholder, { icon: /* @__PURE__ */ jsx(MonitorOffIcon, { className: "size-5 text-muted-foreground/70", "aria-hidden": true }), children: status.isPending ? "Checking the computer…" : "The computer is not running. Its desktop shows here once it is." });
+  } else if (viewer) {
+    body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          ref: frameRef,
+          src: viewer.url,
+          title: "Live desktop",
+          className: "h-full w-full border-0 bg-black",
+          sandbox: "allow-scripts allow-same-origin allow-pointer-lock",
+          allow: "fullscreen; keyboard-map; autoplay; clipboard-write",
+          referrerPolicy: "no-referrer",
+          "data-live-desktop-frame": ""
+        },
+        viewer.url
+      ),
+      viewer.state === "connecting" || session.isPending ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/40", children: /* @__PURE__ */ jsx(LoaderIcon, { className: "size-5 animate-spin text-white", "aria-label": "Connecting" }) }) : null,
+      switchError ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "alert",
+          className: "absolute inset-x-2 bottom-2 flex items-start gap-2 rounded-md border border-red-200 bg-red-50 px-2 py-1.5 text-red-900 text-xs",
+          children: [
+            /* @__PURE__ */ jsx(AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": true }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: switchError }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setSwitchError(null),
+                "aria-label": "Dismiss",
+                className: "shrink-0 rounded p-0.5 hover:bg-red-100",
+                children: /* @__PURE__ */ jsx(XIcon, { className: "size-3", "aria-hidden": true })
+              }
+            )
+          ]
+        }
+      ) : null
+    ] });
+  } else if (session.isPending) {
+    body = /* @__PURE__ */ jsx(Placeholder, { icon: /* @__PURE__ */ jsx(LoaderIcon, { className: "size-5 animate-spin text-muted-foreground", "aria-hidden": true }), children: "Connecting to the desktop…" });
+  } else if ((notice == null ? void 0 : notice.kind) === "display_not_running") {
+    body = /* @__PURE__ */ jsx(
+      Placeholder,
+      {
+        icon: /* @__PURE__ */ jsx(MonitorOffIcon, { className: "size-5 text-muted-foreground/70", "aria-hidden": true }),
+        action: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => watch(true), className: BUTTON_CLASS, children: [
+          /* @__PURE__ */ jsx(PlayIcon, { className: "size-3.5", "aria-hidden": true }),
+          "Start the display"
+        ] }),
+        children: notice.text
+      }
+    );
+  } else if ((notice == null ? void 0 : notice.kind) === "unsupported") {
+    body = /* @__PURE__ */ jsx(Placeholder, { icon: /* @__PURE__ */ jsx(MonitorOffIcon, { className: "size-5 text-muted-foreground/70", "aria-hidden": true }), children: notice.text });
+  } else if (notice) {
+    body = /* @__PURE__ */ jsx(
+      Placeholder,
+      {
+        icon: notice.kind === "failed" ? /* @__PURE__ */ jsx(AlertCircleIcon, { className: "size-5 text-red-600", "aria-hidden": true }) : /* @__PURE__ */ jsx(MonitorOffIcon, { className: "size-5 text-muted-foreground/70", "aria-hidden": true }),
+        action: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => watch(), className: BUTTON_CLASS, children: [
+          /* @__PURE__ */ jsx(RefreshCwIcon, { className: "size-3.5", "aria-hidden": true }),
+          notice.kind === "failed" ? "Try again" : "Reconnect"
+        ] }),
+        children: notice.text
+      }
+    );
+  } else {
+    body = /* @__PURE__ */ jsx(
+      Placeholder,
+      {
+        icon: /* @__PURE__ */ jsx(EyeIcon, { className: "size-5 text-muted-foreground/70", "aria-hidden": true }),
+        action: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => watch(), className: BUTTON_CLASS, children: [
+          /* @__PURE__ */ jsx(EyeIcon, { className: "size-3.5", "aria-hidden": true }),
+          "Watch live"
+        ] }),
+        children: "Watch the computer’s screen as the agent works."
+      }
+    );
+  }
+  const liveMode = running && viewer ? viewer.mode : null;
+  return /* @__PURE__ */ jsxs("section", { "aria-label": "Live desktop", className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "font-medium text-[11px] text-muted-foreground uppercase tracking-wide", children: "Live desktop" }),
+      liveMode ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-mode": liveMode,
+          className: cn(
+            "rounded-full px-1.5 py-px text-[10px]",
+            liveMode === LiveDesktopMode.CONTROL ? "bg-amber-100 text-amber-900" : "bg-muted text-muted-foreground"
+          ),
+          children: liveMode === LiveDesktopMode.CONTROL ? "In control" : "Watching"
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1" }),
+      liveMode === LiveDesktopMode.WATCH ? /* @__PURE__ */ jsxs("button", { type: "button", onClick: control, disabled: session.isPending, className: BUTTON_CLASS, children: [
+        /* @__PURE__ */ jsx(MousePointer2Icon, { className: "size-3.5", "aria-hidden": true }),
+        "Take control"
+      ] }) : null,
+      liveMode === LiveDesktopMode.CONTROL ? /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => watch(), disabled: session.isPending, className: BUTTON_CLASS, children: [
+        /* @__PURE__ */ jsx(EyeIcon, { className: "size-3.5", "aria-hidden": true }),
+        "Stop controlling"
+      ] }) : null,
+      liveMode ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: disconnect,
+          "aria-label": "Disconnect from the desktop",
+          title: "Disconnect",
+          className: cn(BUTTON_CLASS, "px-1.5"),
+          children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5", "aria-hidden": true })
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "relative w-full overflow-hidden rounded-lg border border-border bg-muted/40",
+        style: { aspectRatio: aspect },
+        children: body
+      }
+    )
+  ] });
+};
+export {
+  ComputerLiveDesktop,
+  LIVE_DESKTOP_READY_TIMEOUT_MS
+};
+//# sourceMappingURL=ComputerLiveDesktop.js.map