@elizaos/plugin-screenshare 2.0.3-beta.6 → 2.0.3-beta.7

package/dist/ui/ScreenshareOperatorSurface.js

@@ -0,0 +1,746 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Button,
+  client,
+  Input,
+  SurfaceEmptyState,
+  SurfaceSection,
+  selectLatestRunForApp,
+  useAppSelector
+} from "@elizaos/ui";
+import { useAgentElement } from "@elizaos/ui/agent-surface";
+import {
+  CheckCircle2,
+  Copy,
+  ExternalLink,
+  MonitorUp,
+  PlugZap,
+  Power,
+  RefreshCw,
+  XCircle
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  buildViewerUrl,
+  fetchJson,
+  loadScreenshareTuiState
+} from "./ScreenshareOperatorSurface.helpers";
+const APP_NAME = "@elizaos/plugin-screenshare";
+function parseViewerSession(viewerUrl) {
+  if (!viewerUrl) {
+    return null;
+  }
+  try {
+    const url = new URL(viewerUrl, window.location.origin);
+    const sessionId = url.searchParams.get("sessionId")?.trim();
+    const token = url.searchParams.get("token")?.trim();
+    return sessionId && token ? { sessionId, token } : null;
+  } catch {
+    return null;
+  }
+}
+function formatTime(value) {
+  if (!value) {
+    return "Not yet";
+  }
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "Not yet" : date.toLocaleTimeString();
+}
+function ScreenshareMetric({
+  icon: Icon,
+  label,
+  value,
+  active
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-16 flex-col items-center justify-center gap-1.5 px-3 py-2",
+      title: label,
+      role: "status",
+      "aria-label": `${label}: ${value}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `h-1.5 w-1.5 shrink-0 rounded-full ${active ? "bg-accent" : "bg-muted/40"}`,
+              "aria-hidden": true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              className: `h-3.5 w-3.5 ${active ? "text-accent" : "text-muted"}`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `truncate text-sm font-semibold ${active ? "text-txt" : "text-muted-strong"}`,
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
+function ScreenshareActionButton({
+  agentId,
+  label,
+  group,
+  description,
+  status,
+  ...buttonProps
+}) {
+  const { ref, agentProps } = useAgentElement({
+    id: agentId,
+    role: "button",
+    label,
+    group,
+    description,
+    ...status ? { status } : {}
+  });
+  return /* @__PURE__ */ jsx(Button, { ref, "aria-label": label, ...agentProps, ...buttonProps });
+}
+function ScreenshareField({
+  agentId,
+  label,
+  group,
+  description,
+  role = "text-input",
+  ...inputProps
+}) {
+  const { ref, agentProps } = useAgentElement({
+    id: agentId,
+    role,
+    label,
+    group,
+    description,
+    fillable: !inputProps.readOnly
+  });
+  return /* @__PURE__ */ jsx(Input, { ref, "aria-label": label, ...agentProps, ...inputProps });
+}
+function ScreenshareOperatorSurface({
+  appName,
+  focus = "all"
+}) {
+  const appRuns = useAppSelector((s) => s.appRuns);
+  const setActionNotice = useAppSelector((s) => s.setActionNotice);
+  const { run } = useMemo(
+    () => selectLatestRunForApp(appName || APP_NAME, appRuns),
+    [appName, appRuns]
+  );
+  const launchedSession = useMemo(
+    () => parseViewerSession(run?.viewer?.url),
+    [run?.viewer?.url]
+  );
+  const [capabilities, setCapabilities] = useState(
+    null
+  );
+  const [hostSession, setHostSession] = useState(null);
+  const [hostToken, setHostToken] = useState(
+    launchedSession?.token ?? ""
+  );
+  const [remoteBase, setRemoteBase] = useState("");
+  const [remoteSessionId, setRemoteSessionId] = useState("");
+  const [remoteToken, setRemoteToken] = useState("");
+  const [busy, setBusy] = useState(null);
+  const loadCapabilities = useCallback(async () => {
+    const next = await fetchJson(
+      "/api/apps/screenshare/capabilities"
+    );
+    setCapabilities(next);
+  }, []);
+  const loadLaunchedSession = useCallback(async () => {
+    if (!launchedSession) {
+      return;
+    }
+    setHostToken(launchedSession.token);
+    const next = await fetchJson(
+      `/api/apps/screenshare/session/${encodeURIComponent(
+        launchedSession.sessionId
+      )}?token=${encodeURIComponent(launchedSession.token)}`
+    );
+    setHostSession(next.session);
+  }, [launchedSession]);
+  useEffect(() => {
+    void loadCapabilities().catch((error) => {
+      setActionNotice(
+        error instanceof Error ? error.message : "Failed to load capabilities.",
+        "error",
+        3200
+      );
+    });
+  }, [loadCapabilities, setActionNotice]);
+  useEffect(() => {
+    void loadLaunchedSession().catch((error) => {
+      setActionNotice(
+        error instanceof Error ? error.message : "Failed to load screen share session.",
+        "error",
+        3200
+      );
+    });
+  }, [loadLaunchedSession, setActionNotice]);
+  const startHostSession = useCallback(async () => {
+    setBusy("start");
+    try {
+      const response = await fetchJson(
+        "/api/apps/screenshare/session",
+        {
+          method: "POST",
+          body: JSON.stringify({ label: "This machine" })
+        }
+      );
+      setHostSession(response.session);
+      setHostToken(response.token);
+      setActionNotice("Screen share session started.", "success", 2400);
+    } catch (error) {
+      setActionNotice(
+        error instanceof Error ? error.message : "Failed to start session.",
+        "error",
+        3600
+      );
+    } finally {
+      setBusy(null);
+    }
+  }, [setActionNotice]);
+  const stopHostSession = useCallback(async () => {
+    if (!hostSession || !hostToken) {
+      return;
+    }
+    setBusy("stop");
+    try {
+      const response = await fetchJson(
+        `/api/apps/screenshare/session/${encodeURIComponent(hostSession.id)}/stop`,
+        {
+          method: "POST",
+          body: JSON.stringify({ token: hostToken }),
+          headers: { "X-Screenshare-Token": hostToken }
+        }
+      );
+      setHostSession(response.session);
+      setActionNotice("Screen share session stopped.", "success", 2400);
+    } catch (error) {
+      setActionNotice(
+        error instanceof Error ? error.message : "Failed to stop session.",
+        "error",
+        3600
+      );
+    } finally {
+      setBusy(null);
+    }
+  }, [hostSession, hostToken, setActionNotice]);
+  const copyHostDetails = useCallback(async () => {
+    if (!hostSession || !hostToken) {
+      return;
+    }
+    const url = buildViewerUrl({
+      sessionId: hostSession.id,
+      token: hostToken
+    });
+    try {
+      await navigator.clipboard.writeText(
+        JSON.stringify(
+          {
+            serverUrl: client.getBaseUrl() || window.location.origin,
+            sessionId: hostSession.id,
+            token: hostToken,
+            viewerUrl: url
+          },
+          null,
+          2
+        )
+      );
+      setActionNotice("Screen share details copied.", "success", 1800);
+    } catch (error) {
+      setActionNotice(
+        error instanceof Error ? error.message : "Clipboard write failed.",
+        "error",
+        3200
+      );
+    }
+  }, [hostSession, hostToken, setActionNotice]);
+  const openViewer = useCallback((url) => {
+    window.open(url, "_blank", "noopener,noreferrer");
+  }, []);
+  const hostViewerUrl = hostSession && hostToken ? buildViewerUrl({ sessionId: hostSession.id, token: hostToken }) : null;
+  const remoteViewerUrl = remoteSessionId.trim() && remoteToken.trim() ? buildViewerUrl({
+    baseUrl: remoteBase,
+    sessionId: remoteSessionId.trim(),
+    token: remoteToken.trim()
+  }) : null;
+  if (focus === "chat") {
+    return /* @__PURE__ */ jsx(SurfaceEmptyState, { title: "Screen Share", body: "" });
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "flex min-h-0 flex-col gap-3 p-3", children: [
+    /* @__PURE__ */ jsxs(SurfaceSection, { title: "Host", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
+        /* @__PURE__ */ jsx(
+          ScreenshareMetric,
+          {
+            icon: MonitorUp,
+            label: "Session",
+            value: hostSession?.status ?? "idle",
+            active: hostSession?.status === "active"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ScreenshareMetric,
+          {
+            icon: PlugZap,
+            label: "Platform",
+            value: capabilities?.platform ?? hostSession?.platform ?? "desktop",
+            active: Boolean(capabilities?.platform || hostSession?.platform)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ScreenshareMetric,
+          {
+            icon: capabilities?.capabilities.headfulGui?.available ? CheckCircle2 : XCircle,
+            label: "GUI",
+            value: "GUI",
+            active: capabilities?.capabilities.headfulGui?.available
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          ScreenshareActionButton,
+          {
+            agentId: "action-start-host",
+            label: hostSession?.status === "active" ? "Rotate host session" : "Start host session",
+            group: "host",
+            description: "Start or rotate the screen share session for this machine",
+            type: "button",
+            size: "sm",
+            variant: "default",
+            className: "h-10 w-full justify-center gap-2",
+            onClick: () => void startHostSession(),
+            disabled: busy === "start",
+            children: [
+              /* @__PURE__ */ jsx(MonitorUp, { className: "h-4 w-4" }),
+              hostSession?.status === "active" ? "Rotate session" : "Start session"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            ScreenshareActionButton,
+            {
+              agentId: "action-open-host-viewer",
+              label: "Open host viewer",
+              group: "host",
+              description: "Open the viewer for the host screen share session",
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              className: "h-9 justify-center gap-1.5",
+              onClick: () => hostViewerUrl && openViewer(hostViewerUrl),
+              disabled: !hostViewerUrl,
+              children: [
+                /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" }),
+                "Open"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            ScreenshareActionButton,
+            {
+              agentId: "action-copy-host-details",
+              label: "Copy host details",
+              group: "host",
+              description: "Copy the host session connection details to the clipboard",
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              className: "h-9 justify-center gap-1.5",
+              onClick: () => void copyHostDetails(),
+              disabled: !hostSession || !hostToken,
+              children: [
+                /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" }),
+                "Copy"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            ScreenshareActionButton,
+            {
+              agentId: "action-stop-host",
+              label: "Stop host session",
+              group: "host",
+              description: "Stop the active host screen share session",
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              className: "h-9 justify-center gap-1.5",
+              onClick: () => void stopHostSession(),
+              disabled: hostSession?.status !== "active",
+              children: [
+                /* @__PURE__ */ jsx(Power, { className: "h-4 w-4" }),
+                "Stop"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      hostSession ? /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsx(
+          ScreenshareMetric,
+          {
+            icon: MonitorUp,
+            label: "Frames",
+            value: hostSession.frameCount,
+            active: hostSession.frameCount > 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ScreenshareMetric,
+          {
+            icon: PlugZap,
+            label: "Inputs",
+            value: hostSession.inputCount,
+            active: hostSession.inputCount > 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ScreenshareMetric,
+          {
+            icon: RefreshCw,
+            label: "Last frame",
+            value: formatTime(hostSession.lastFrameAt),
+            active: hostSession.lastFrameAt !== null
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ScreenshareMetric,
+          {
+            icon: Power,
+            label: "Last input",
+            value: formatTime(hostSession.lastInputAt),
+            active: hostSession.lastInputAt !== null
+          }
+        )
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(SurfaceSection, { title: "Connect", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsx(
+          ScreenshareField,
+          {
+            agentId: "input-remote-base",
+            label: "Remote server URL",
+            group: "connect",
+            description: "Server URL of the remote machine to connect to",
+            value: remoteBase,
+            onChange: (event) => setRemoteBase(event.target.value),
+            placeholder: "Server URL",
+            className: "h-9 border-0 bg-transparent text-xs"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ScreenshareField,
+          {
+            agentId: "input-remote-session",
+            label: "Remote session id",
+            group: "connect",
+            description: "Session id of the remote screen share to connect to",
+            value: remoteSessionId,
+            onChange: (event) => setRemoteSessionId(event.target.value),
+            placeholder: "Session",
+            className: "h-9 border-0 bg-transparent text-xs"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ScreenshareField,
+          {
+            agentId: "input-remote-token",
+            label: "Remote session token",
+            group: "connect",
+            description: "Token of the remote screen share to connect to",
+            value: remoteToken,
+            onChange: (event) => setRemoteToken(event.target.value),
+            placeholder: "Token",
+            className: "h-9 border-0 bg-transparent text-xs"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 flex gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          ScreenshareActionButton,
+          {
+            agentId: "action-connect-remote",
+            label: "Connect to remote",
+            group: "connect",
+            description: "Open the viewer for the entered remote screen share",
+            type: "button",
+            size: "sm",
+            variant: remoteViewerUrl ? "default" : "outline",
+            className: "h-10 flex-1 justify-center gap-2",
+            onClick: () => remoteViewerUrl && openViewer(remoteViewerUrl),
+            disabled: !remoteViewerUrl,
+            children: [
+              /* @__PURE__ */ jsx(PlugZap, { className: "h-4 w-4" }),
+              "Connect"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ScreenshareActionButton,
+          {
+            agentId: "action-refresh-capabilities",
+            label: "Refresh capabilities",
+            group: "connect",
+            description: "Reload the host screen share capabilities",
+            type: "button",
+            size: "sm",
+            variant: "outline",
+            className: "h-10 w-10 justify-center gap-2 px-0",
+            onClick: () => void loadCapabilities(),
+            title: "Refresh capabilities",
+            children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ] }),
+    capabilities ? /* @__PURE__ */ jsx(SurfaceSection, { title: "Capabilities", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: Object.entries(capabilities.capabilities).map(
+      ([name, capability]) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex min-h-14 items-center justify-center gap-2 px-3 py-2",
+          title: `${name}: ${capability.tool}`,
+          children: [
+            capability.available ? /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-accent" }) : /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4 text-muted" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: capability.available ? "truncate text-xs font-semibold text-txt" : "truncate text-xs font-semibold text-muted-strong",
+                children: name
+              }
+            )
+          ]
+        },
+        name
+      )
+    ) }) }) : null
+  ] });
+}
+function ScreenshareTuiView() {
+  const [state, setState] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [lastAction, setLastAction] = useState("boot");
+  const [error, setError] = useState(null);
+  const refreshElement = useAgentElement({
+    id: "tui-refresh-sessions",
+    role: "button",
+    label: "Refresh sessions",
+    group: "tui-sessions",
+    description: "Reload the screen share sessions and capabilities",
+    status: loading ? "loading" : "idle"
+  });
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const next = await loadScreenshareTuiState();
+      setState(next);
+      setLastAction("refresh");
+    } catch (caught) {
+      setState(null);
+      setError(
+        caught instanceof Error ? caught.message : "Screen share refresh failed"
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  const activeSessions = state?.sessions.sessions.filter((session) => session.status === "active") ?? [];
+  const viewState = {
+    viewType: "tui",
+    viewId: "screenshare",
+    platform: state?.capabilities.platform ?? null,
+    sessionCount: state?.sessions.sessions.length ?? 0,
+    activeSessionCount: activeSessions.length,
+    capabilities: state ? Object.fromEntries(
+      Object.entries(state.capabilities.capabilities).map(
+        ([name, capability]) => [name, capability.available]
+      )
+    ) : {},
+    loading,
+    lastAction,
+    error
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-view-state": JSON.stringify(viewState),
+      style: {
+        minHeight: "100vh",
+        background: "#020617",
+        color: "#cbd5e1",
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+        padding: 20
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-status": loading ? "loading" : "ready",
+            style: { color: "#94a3b8", marginBottom: 16 },
+            children: [
+              loading ? "loading" : state?.capabilities.platform ?? "unknown",
+              " |",
+              " ",
+              activeSessions.length,
+              " active sessions | ",
+              lastAction
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "1fr",
+              gap: 16
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "section",
+                {
+                  "aria-label": "Screen share sessions",
+                  style: {
+                    padding: "8px 0"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          marginBottom: 10
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("strong", { style: { color: "#e2e8f0" }, children: "sessions" }),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              ref: refreshElement.ref,
+                              type: "button",
+                              "aria-label": "Refresh sessions",
+                              onClick: () => void refresh(),
+                              disabled: loading,
+                              style: {
+                                background: "transparent",
+                                color: "#a7f3d0",
+                                border: 0,
+                                padding: "4px 8px",
+                                cursor: loading ? "not-allowed" : "pointer",
+                                fontFamily: "inherit"
+                              },
+                              ...refreshElement.agentProps,
+                              children: "refresh"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    error && /* @__PURE__ */ jsx("div", { style: { color: "#fca5a5" }, children: error }),
+                    (state?.sessions.sessions ?? []).map((session) => /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          padding: "8px 0"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs("div", { style: { color: "#e2e8f0" }, children: [
+                            session.id,
+                            " / ",
+                            session.status
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { style: { color: "#94a3b8" }, children: [
+                            session.label,
+                            " frames ",
+                            session.frameCount,
+                            " inputs",
+                            " ",
+                            session.inputCount
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { style: { color: "#64748b" }, children: [
+                            "last frame ",
+                            formatTime(session.lastFrameAt),
+                            " / last input",
+                            " ",
+                            formatTime(session.lastInputAt)
+                          ] })
+                        ]
+                      },
+                      session.id
+                    ))
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "section",
+                {
+                  "aria-label": "Screen share capabilities",
+                  style: {
+                    padding: "8px 0"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("strong", { style: { color: "#e2e8f0" }, children: "capabilities" }),
+                    /* @__PURE__ */ jsxs("div", { style: { color: "#64748b", margin: "6px 0 14px" }, children: [
+                      Object.values(state?.capabilities.capabilities ?? {}).filter(
+                        (capability) => capability.available
+                      ).length,
+                      " ",
+                      "live / ",
+                      state?.sessions.sessions.length ?? 0,
+                      " sessions"
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("span", { style: { color: "#64748b" }, children: "platform" }),
+                      " ",
+                      state?.capabilities.platform ?? "unknown"
+                    ] }),
+                    Object.entries(state?.capabilities.capabilities ?? {}).map(
+                      ([name, capability]) => /* @__PURE__ */ jsxs("div", { style: { padding: "6px 0" }, children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              color: capability.available ? "#a7f3d0" : "#fca5a5"
+                            },
+                            children: capability.available ? "ok" : "off"
+                          }
+                        ),
+                        " ",
+                        name,
+                        " via ",
+                        capability.tool
+                      ] }, name)
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+import { ScreenshareView } from "../components/ScreenshareView.js";
+export {
+  ScreenshareOperatorSurface,
+  ScreenshareTuiView,
+  ScreenshareView
+};
+//# sourceMappingURL=ScreenshareOperatorSurface.js.map