@opengeni/react 1.4.2 → 1.4.4

package/dist/interaction.js

@@ -8,13 +8,13 @@ import {
   useBrowserSession,
   useBrowserSessions,
   useSiteAuthConnections
-} from "./chunk-VCSERYXH.js";
+} from "./chunk-2OQA3CPB.js";
 import {
   ComputerViewer,
   useComputerFrameStream,
   useComputerSession,
   useComputerSessions
-} from "./chunk-MDIXFKA3.js";
+} from "./chunk-I6OY3MWC.js";
 import {
   useInteractionInterventions,
   useInteractionInvalidation

package/dist/session-ui.js

@@ -28,7 +28,7 @@ import {
   setStartupDetails,
   useStartupDetails,
   userMessageLikelyNeedsDisclosure
-} from "./chunk-CREMJMVN.js";
+} from "./chunk-EAOSEIXB.js";
 import "./chunk-B27E3V37.js";
 import "./chunk-JH7V627O.js";
 import "./chunk-2HVLQ26H.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "React hooks and styled components for OpenGeni: live session streaming, chat composer, message timeline, session status, and fleet views — token-themed (CSS variables), dark-first, built on Tailwind v4 + Radix + Motion.",
   "license": "Apache-2.0",
   "repository": {
@@ -153,8 +153,8 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/connect": "1.4.2",
-    "@opengeni/sdk": "1.4.2",
+    "@opengeni/connect": "1.4.4",
+    "@opengeni/sdk": "1.4.4",
     "clsx": "^2.1.1",
     "dequal": "2.0.3",
     "lucide-react": "^1.8.0",

package/src/components/computer-viewer.tsx

@@ -1,5 +1,6 @@
 import type {
   ComputerAction,
+  ComputerActionReceipt,
   ComputerClipboard,
   ComputerFrame,
   ComputerObservation,
@@ -42,7 +43,11 @@ import {
   type ComputerFrameWebSocketFactory,
   useComputerFrameStream,
 } from "../hooks/use-computer-frame-stream";
-import { useComputerSession } from "../hooks/use-computer-session";
+import {
+  computerActionReceiptError,
+  isStaleComputerActionResult,
+  useComputerSession,
+} from "../hooks/use-computer-session";
 import { useComputerInputPosture } from "../hooks/use-computer-input-posture";
 import { useComputerSessions } from "../hooks/use-computer-sessions";
 import { useInteractionInterventions } from "../hooks/use-interaction-interventions";
@@ -174,6 +179,7 @@ export function ComputerViewer({
 
   const notifyError = useCallback(
     (cause: unknown, fallback: string) => {
+      if (isStaleComputerActionResult(cause)) return;
       onNotify?.({
         kind: "error",
         message: cause instanceof Error ? cause.message : fallback,
@@ -490,19 +496,24 @@ export function ComputerViewer({
   ]);
 
   const perform = useCallback(
-    async (action: ComputerAction, frame: ComputerFrame | null): Promise<void> => {
+    async (
+      action: ComputerAction,
+      frame: ComputerFrame | null,
+      operationId?: string,
+    ): Promise<ComputerActionReceipt> => {
       if (computer.controlError) throw computer.controlError;
       if (inputDenied) throw new Error("Desktop is view only. Refresh to check desktop controls.");
       let receipt;
       if (action.type === "pointer") {
         if (!frame) throw new Error("Desktop view is not ready for pointer input.");
-        receipt = await actFromFrame(action, frame);
+        receipt = await actFromFrame(action, frame, operationId);
       } else {
-        receipt = await act(action);
+        receipt = await act(action, operationId);
       }
-      if (receipt.state !== "completed") {
-        throw new Error(receipt.error?.message ?? "Desktop input did not complete.");
+      if (!isStaleComputerActionResult(receipt) && receipt.state !== "completed") {
+        throw computerActionReceiptError(receipt);
       }
+      return receipt;
     },
     [act, actFromFrame, computer.controlError, inputDenied],
   );
@@ -519,14 +530,15 @@ export function ComputerViewer({
         return;
       event.preventDefault();
       event.stopPropagation();
-      void perform({ type: "clipboard", operation: "copy" }, null)
-        .then(() => computer.readClipboard())
-        .then(async (clipboard) => {
-          if (clipboard.text && !(await copyTextToClipboard(clipboard.text))) {
-            throw new Error("Desktop text could not be copied to the local clipboard");
-          }
-        })
-        .catch((cause) => notifyError(cause, "Could not copy from the desktop."));
+      void (async () => {
+        const receipt = await perform({ type: "clipboard", operation: "copy" }, null);
+        if (isStaleComputerActionResult(receipt)) return;
+        const clipboard = await computer.readClipboard();
+        if (isStaleComputerActionResult(receipt) || isStaleComputerActionResult(clipboard)) return;
+        if (clipboard.text && !(await copyTextToClipboard(clipboard.text))) {
+          throw new Error("Desktop text could not be copied to the local clipboard");
+        }
+      })().catch((cause) => notifyError(cause, "Could not copy from the desktop."));
     },
     [computer, notifyError, perform, rfbInputEnabled, rfbStream],
   );
@@ -543,8 +555,11 @@ export function ComputerViewer({
       // ownership is asynchronous, so a successful write response alone does
       // not prove that the graphical seat can already serve the selection.
       void (async () => {
-        await perform({ type: "clipboard", operation: "write", text }, null);
-        assertExactComputerClipboard(await computer.readClipboard(), text);
+        const receipt = await perform({ type: "clipboard", operation: "write", text }, null);
+        if (isStaleComputerActionResult(receipt)) return;
+        const clipboard = await computer.readClipboard();
+        if (isStaleComputerActionResult(receipt) || isStaleComputerActionResult(clipboard)) return;
+        assertExactComputerClipboard(clipboard, text);
         await perform({ type: "clipboard", operation: "paste" }, null);
       })().catch((cause) => notifyError(cause, "Could not paste into the desktop."));
       return true;
@@ -750,6 +765,10 @@ export function ComputerViewer({
                 pointerInput={
                   attachmentInputAllowed && computer.session?.capabilities?.pointerInput === true
                 }
+                pointerClickContinuation={
+                  attachmentInputAllowed &&
+                  computer.session?.capabilities?.pointerClickContinuation === true
+                }
                 keyboardInput={
                   attachmentInputAllowed && computer.session?.capabilities?.keyboardInput === true
                 }
@@ -1194,6 +1213,12 @@ function ComputerLifecyclePanel(props: {
   );
 }
 
+type ComputerQueuedAction = {
+  operationId: string;
+  started: Promise<boolean>;
+  completion: Promise<void>;
+};
+
 function ComputerViewport(props: {
   frame: ComputerFrame | null;
   observation: ComputerObservation | null;
@@ -1208,8 +1233,13 @@ function ComputerViewport(props: {
   backgroundInput: boolean;
   clipboardEnabled: boolean;
   pointerInput: boolean;
+  pointerClickContinuation: boolean;
   keyboardInput: boolean;
-  onAction: (action: ComputerAction, frame: ComputerFrame | null) => Promise<void>;
+  onAction: (
+    action: ComputerAction,
+    frame: ComputerFrame | null,
+    operationId?: string,
+  ) => Promise<ComputerActionReceipt>;
   onReadClipboard: () => Promise<ComputerClipboard>;
   onReconnect: () => void;
   onError: (cause: unknown) => void;
@@ -1224,6 +1254,11 @@ function ComputerViewport(props: {
     x: number;
     y: number;
     frame: ComputerFrame;
+    clientX: number;
+    clientY: number;
+    canvasRect: Pick<DOMRect, "left" | "top" | "width" | "height">;
+    pending: boolean;
+    delivery: ComputerQueuedAction | null;
   } | null>(null);
   const wheelRef = useRef<{
     x: number;
@@ -1394,24 +1429,48 @@ function ComputerViewport(props: {
       action: ComputerAction,
       frame: ComputerFrame | null,
       after?: (isCurrent: () => boolean) => Promise<void>,
+      continuation?: ComputerQueuedAction,
     ) => {
       const epoch = actionQueueEpochRef.current;
       const dispatch = actionRef.current;
       const isCurrent = () => mountedRef.current && epoch === actionQueueEpochRef.current;
-      actionTailRef.current = actionTailRef.current
-        .catch(() => undefined)
-        .then(async () => {
-          if (!isCurrent()) return;
-          await dispatch(action, frame);
-          if (!isCurrent()) return;
-          await after?.(isCurrent);
+      const operationId = crypto.randomUUID();
+      let markStarted!: (value: boolean) => void;
+      const started = new Promise<boolean>((resolve) => {
+        markStarted = resolve;
+      });
+      const previous = actionTailRef.current;
+      // Only the real second click may start before its first HTTP receipt.
+      // The controller queue and native causal proof still serialize delivery.
+      const ready =
+        continuation && previous === continuation.completion
+          ? continuation.started
+          : previous.then(() => true);
+      const delivery = ready
+        .then(async (firstStarted) => {
+          if (!firstStarted || !isCurrent()) {
+            markStarted(false);
+            return;
+          }
+          const pending = dispatch(action, frame, operationId);
+          markStarted(true);
+          const receipt = await pending;
+          const isCurrentResult = () => isCurrent() && !isStaleComputerActionResult(receipt);
+          if (!isCurrentResult()) return;
+          await after?.(isCurrentResult);
         })
         .catch((cause) => {
-          if (!isCurrent()) return;
+          markStarted(false);
+          if (!isCurrent() || isStaleComputerActionResult(cause)) return;
           actionQueueEpochRef.current += 1;
           clearBufferedInput();
           errorRef.current(cause);
         });
+      const completion = continuation
+        ? Promise.all([previous, delivery]).then(() => undefined)
+        : delivery;
+      actionTailRef.current = completion;
+      return { operationId, started, completion };
     },
     [clearBufferedInput],
   );
@@ -1436,6 +1495,7 @@ function ComputerViewport(props: {
     if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
     clickTimerRef.current = null;
     lastClickRef.current = null;
+    if (!pending.pending) return;
     enqueue(
       {
         type: "pointer",
@@ -1469,7 +1529,13 @@ function ComputerViewport(props: {
 
   const pointerDown = (event: PointerEvent<HTMLCanvasElement>) => {
     const frame = paintedFrameRef.current;
-    if (!frame || props.mutating || !rawInputEnabled || event.button !== 0) return;
+    if (
+      !frame ||
+      (!props.pointerClickContinuation && props.mutating) ||
+      !rawInputEnabled ||
+      event.button !== 0
+    )
+      return;
     // Preserve the keyboard sink's focus through the canvas pointer default action.
     event.preventDefault();
     if (keyboardInputEnabled) inputRef.current?.focus({ preventScroll: true });
@@ -1490,6 +1556,7 @@ function ComputerViewport(props: {
     const start = pointerStartRef.current;
     pointerStartRef.current = null;
     if (!start || start.pointerId !== event.pointerId) return;
+    const canvasRect = event.currentTarget.getBoundingClientRect();
     const from = point(start.frame, start.x, start.y);
     const to = point(start.frame, event.clientX, event.clientY);
     if (!from || !to) return;
@@ -1514,8 +1581,18 @@ function ComputerViewport(props: {
     if (
       previous &&
       now - previous.at < 280 &&
-      Math.hypot(previous.x - to.x, previous.y - to.y) < 6 &&
-      sameFrameFence(previous.frame, start.frame)
+      previous.pending === !props.pointerClickContinuation &&
+      (props.pointerClickContinuation
+        ? Math.hypot(previous.clientX - event.clientX, previous.clientY - event.clientY) < 6 &&
+          previous.canvasRect.left === canvasRect.left &&
+          previous.canvasRect.top === canvasRect.top &&
+          previous.canvasRect.width === canvasRect.width &&
+          previous.canvasRect.height === canvasRect.height &&
+          sameComputerTarget(previous.frame, start.frame) &&
+          previous.frame.width === start.frame.width &&
+          previous.frame.height === start.frame.height
+        : Math.hypot(previous.x - to.x, previous.y - to.y) < 6 &&
+          sameFrameFence(previous.frame, start.frame))
     ) {
       if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
       clickTimerRef.current = null;
@@ -1524,15 +1601,47 @@ function ComputerViewport(props: {
         {
           type: "pointer",
           frameId: start.frame.frameId,
-          action: "double_click",
+          action: props.pointerClickContinuation ? "click" : "double_click",
+          ...(props.pointerClickContinuation ? { clickCount: 2 as const } : {}),
+          ...(previous.delivery
+            ? { continuationOfOperationId: previous.delivery.operationId }
+            : {}),
+          x: to.x,
+          y: to.y,
+        },
+        start.frame,
+        undefined,
+        previous.delivery ?? undefined,
+      );
+      return;
+    }
+    flushPendingClick();
+    lastClickRef.current = {
+      at: now,
+      x: to.x,
+      y: to.y,
+      frame: start.frame,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      canvasRect,
+      pending: !props.pointerClickContinuation,
+      delivery: null,
+    };
+    if (props.pointerClickContinuation) {
+      const delivery = enqueue(
+        {
+          type: "pointer",
+          frameId: start.frame.frameId,
+          action: "click",
+          clickCount: 1,
           x: to.x,
           y: to.y,
         },
         start.frame,
       );
+      if (lastClickRef.current) lastClickRef.current.delivery = delivery;
       return;
     }
-    lastClickRef.current = { at: now, x: to.x, y: to.y, frame: start.frame };
     clickTimerRef.current = setTimeout(() => {
       clickTimerRef.current = null;
       lastClickRef.current = null;

package/src/components/session-list.tsx

@@ -215,7 +215,7 @@ export function SessionList({
                   {formatRelativeTime(session.updatedAt)}
                 </span>
               </button>
-              <span className="absolute right-1 top-1.5 hidden gap-0.5 group-focus-within:flex group-hover:flex">
+              <span className="absolute right-1 top-1.5 hidden gap-0.5 group-focus-within:flex group-hover:flex pointer-coarse:flex">
                 {rename ? (
                   <button
                     type="button"