@nexface/tools 0.1.15-alpha.6 → 0.1.15-alpha.8

package/dist/operation-view.js

@@ -5,6 +5,19 @@ import { useCallback, useLayoutEffect, useEffect, useRef, useState, } from "reac
 import { createPortal } from "react-dom";
 import { PageCommandError } from "./browser/locator.js";
 import { lockOperationSurface } from "./operation-lock.js";
+const intersect = (a, b) => {
+    if (!a)
+        return undefined;
+    const left = Math.max(a.left, b.left);
+    const top = Math.max(a.top, b.top);
+    const right = Math.min(a.left + a.width, b.left + b.width);
+    const bottom = Math.min(a.top + a.height, b.top + b.height);
+    return right > left && bottom > top
+        ? { left, top, width: right - left, height: bottom - top }
+        : undefined;
+};
+const sameRect = (a, b) => a === b ||
+    Boolean(a && b && a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height);
 const center = (rect) => ({
     left: rect.left + rect.width / 2,
     top: rect.top + rect.height / 2,
@@ -14,7 +27,7 @@ const interrupted = () => new PageCommandError({
     code: "EXECUTION_CANCELLED",
     message: "Page action presentation was interrupted.",
 });
-function presentPointer(pointer, target, presentation) {
+function presentPointer(pointer, target, resolvePosition, presentation) {
     let finished = false;
     const finish = (error) => {
         if (finished)
@@ -25,9 +38,13 @@ function presentPointer(pointer, target, presentation) {
         presentation.signal?.removeEventListener("abort", onAbort);
         presentation.finish(error);
     };
-    const reached = () => pointer.isConnected &&
-        target.isConnected &&
-        distance(pointer.getBoundingClientRect(), center(target.getBoundingClientRect())) < 2;
+    const reached = () => {
+        const position = resolvePosition();
+        return Boolean(position &&
+            pointer.isConnected &&
+            target.isConnected &&
+            distance(pointer.getBoundingClientRect(), position) < 2);
+    };
     const onTransition = (event) => {
         if (event.target === pointer && event.propertyName === "transform" && reached())
             finish();
@@ -49,17 +66,68 @@ function presentPointer(pointer, target, presentation) {
     });
     return () => finish(interrupted());
 }
-function FeedbackLabel({ feedback }) {
-    return (React.createElement("span", { className: "agent-operation__pointer-label", "data-browser-tool": feedback.centered ? "true" : undefined, "data-operation-effect": feedback.effect, title: feedback.label },
-        feedback.effect === "processing" ? (React.createElement("span", { className: "agent-operation__pointer-processing" })) : null,
-        feedback.effect === "read" ? (React.createElement("span", { className: "agent-operation__pointer-read-scan" },
-            React.createElement("i", null),
-            React.createElement("i", null),
-            React.createElement("i", null),
-            React.createElement("i", null),
-            React.createElement("i", null))) : null,
-        feedback.effect === "navigate" ? (React.createElement("span", { className: "agent-operation__pointer-navigation-trail" })) : null,
-        React.createElement("span", { className: "agent-operation__pointer-label-text" }, feedback.label)));
+function FeedbackLabel({ feedback, position, durationMs = 0, }) {
+    const label = useRef(null);
+    const measured = useRef(undefined);
+    const [placement, setPlacement] = useState();
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    useLayoutEffect(() => {
+        const element = label.current;
+        if (!element)
+            return;
+        const key = [feedback.label, feedback.effect, feedback.centered, width, height].join(";");
+        const resized = measured.current?.key !== key;
+        if (resized) {
+            const labelWidth = element.offsetWidth;
+            const labelHeight = element.offsetHeight;
+            measured.current = {
+                key,
+                width: labelWidth,
+                height: labelHeight,
+                left: element.offsetLeft - (feedback.centered ? labelWidth / 2 : 0),
+                top: element.offsetTop - (feedback.centered ? labelHeight / 2 : 0),
+            };
+        }
+        const size = measured.current;
+        const left = position.left + size.left;
+        const top = position.top + size.top;
+        const next = {
+            left: position.left + Math.max(12, Math.min(left, width - 12 - size.width)) - left,
+            top: position.top + Math.max(12, Math.min(top, height - 12 - size.height)) - top,
+            durationMs: resized ? 0 : durationMs,
+        };
+        setPlacement((current) => current?.left === next.left &&
+            current.top === next.top &&
+            (!resized || current.durationMs === next.durationMs)
+            ? current
+            : next);
+    }, [
+        feedback.label,
+        feedback.effect,
+        feedback.centered,
+        position.left,
+        position.top,
+        width,
+        height,
+        durationMs,
+    ]);
+    const current = placement ?? { ...position, durationMs: 0 };
+    return createPortal(React.createElement("div", { "aria-hidden": true, "data-nexface-ignore": true, className: "agent-operation__floating-label", style: {
+            "--agent-operation-pointer-x": `${current.left}px`,
+            "--agent-operation-pointer-y": `${current.top}px`,
+            "--agent-operation-pointer-duration": `${current.durationMs}ms`,
+        } },
+        React.createElement("span", { ref: label, style: { maxWidth: Math.max(0, Math.min(300, width * 0.48, width - 24)) }, className: "agent-operation__pointer-label", "data-browser-tool": feedback.centered ? "true" : undefined, "data-operation-effect": feedback.effect, title: feedback.label },
+            feedback.effect === "processing" ? (React.createElement("span", { className: "agent-operation__pointer-processing" })) : null,
+            feedback.effect === "read" ? (React.createElement("span", { className: "agent-operation__pointer-read-scan" },
+                React.createElement("i", null),
+                React.createElement("i", null),
+                React.createElement("i", null),
+                React.createElement("i", null),
+                React.createElement("i", null))) : null,
+            feedback.effect === "navigate" ? (React.createElement("span", { className: "agent-operation__pointer-navigation-trail" })) : null,
+            React.createElement("span", { className: "agent-operation__pointer-label-text" }, feedback.label))), document.body);
 }
 function FeedbackIndicator({ feedback, position, }) {
     const [lastPosition, setLastPosition] = useState(position ?? feedback.position);
@@ -73,9 +141,9 @@ function FeedbackIndicator({ feedback, position, }) {
             "--agent-operation-pointer-x": `${current.left}px`,
             "--agent-operation-pointer-y": `${current.top}px`,
         } },
-        React.createElement(FeedbackLabel, { feedback: feedback }))) : null;
+        React.createElement(FeedbackLabel, { feedback: feedback, position: current }))) : null;
 }
-function AgentPointer({ active, feedback, targetPosition, surfaceCenter, }) {
+function AgentPointer({ active, feedback, targetPosition, surfaceCenter, resolvePosition, }) {
     const pointer = useRef(null);
     const [motion, setMotion] = useState();
     const action = feedback?.effect === "action" && (!feedback.requiresTarget || Boolean(targetPosition));
@@ -124,8 +192,15 @@ function AgentPointer({ active, feedback, targetPosition, surfaceCenter, }) {
             return;
         }
         if (show && pointer.current)
-            return presentPointer(pointer.current, feedback.target, feedback.presentation);
-    }, [active, show, feedback?.presentation, feedback?.target, Boolean(targetPosition)]);
+            return presentPointer(pointer.current, feedback.target, resolvePosition, feedback.presentation);
+    }, [
+        active,
+        show,
+        feedback?.presentation,
+        feedback?.target,
+        Boolean(targetPosition),
+        resolvePosition,
+    ]);
     return show && motion ? (React.createElement("div", { "aria-hidden": true, ref: pointer, className: "agent-operation__pointer-effect", "data-active": action, "data-operation-effect": action ? "action" : undefined, style: {
             "--agent-operation-pointer-duration": `${motion.durationMs}ms`,
             "--agent-operation-pointer-x": `${motion.position.left}px`,
@@ -133,10 +208,11 @@ function AgentPointer({ active, feedback, targetPosition, surfaceCenter, }) {
         } },
         React.createElement("span", { className: "agent-operation__pointer-cursor" },
             React.createElement(Cursor, { className: "agent-operation__pointer", size: 24, weight: "fill" })),
-        action && feedback ? React.createElement(FeedbackLabel, { feedback: feedback }) : null)) : null;
+        action && feedback ? (React.createElement(FeedbackLabel, { feedback: feedback, position: motion.position, durationMs: motion.durationMs })) : null)) : null;
 }
 export function OperationOverlayView({ operation, feedback, progressHistory = [], running, humanHasControl = false, cancelling = false, onCancel: cancel, resolveSurface, }) {
-    const [, setGeometry] = useState("");
+    const [geometry, setGeometry] = useState();
+    const geometryCache = useRef(undefined);
     const [historyOpen, setHistoryOpen] = useState(false);
     const [historyId] = useState(() => `nexface-operation-history-${globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`}`);
     const controllerShouldBeVisible = operation.status !== "cancelled" &&
@@ -168,6 +244,7 @@ export function OperationOverlayView({ operation, feedback, progressHistory = []
         const resolvedTarget = feedback?.resolveTarget ? feedback.resolveTarget() : feedback?.target;
         const target = resolvedTarget?.isConnected && surface?.contains(resolvedTarget) ? resolvedTarget : undefined;
         return {
+            viewport: { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight },
             surfaceRect: surface?.isConnected ? surface.getBoundingClientRect() : undefined,
             target,
             targetRect: target?.getBoundingClientRect(),
@@ -175,15 +252,17 @@ export function OperationOverlayView({ operation, feedback, progressHistory = []
     }, [resolveSurface, feedback?.target, feedback?.resolveTarget]);
     useLayoutEffect(() => {
         const update = () => {
-            const { surfaceRect, targetRect } = readGeometry();
-            const geometry = [surfaceRect, targetRect]
-                .map((rect) => {
-                if (!rect)
-                    return "";
-                return [rect.left, rect.top, rect.width, rect.height].join(",");
-            })
-                .join(";");
-            setGeometry(geometry);
+            const next = readGeometry();
+            const previous = geometryCache.current;
+            if (previous?.source === readGeometry &&
+                previous.target === next.target &&
+                sameRect(previous.surfaceRect, next.surfaceRect) &&
+                sameRect(previous.targetRect, next.targetRect) &&
+                sameRect(previous.viewport, next.viewport))
+                return;
+            const measured = { ...next, source: readGeometry };
+            geometryCache.current = measured;
+            setGeometry(measured);
         };
         update();
         if (!running && !humanHasControl)
@@ -194,11 +273,23 @@ export function OperationOverlayView({ operation, feedback, progressHistory = []
         });
         return () => cancelAnimationFrame(frame);
     }, [readGeometry, operation, running, humanHasControl]);
+    const resolvePosition = useCallback(() => {
+        const current = readGeometry();
+        const surface = intersect(current.surfaceRect, current.viewport);
+        const visible = surface ? intersect(current.targetRect, surface) : undefined;
+        return visible ? center(visible) : undefined;
+    }, [readGeometry]);
     if (typeof document === "undefined")
         return null;
-    const { surfaceRect, target, targetRect: rect } = readGeometry();
+    const measured = geometry?.source === readGeometry ? geometry : readGeometry();
+    const surfaceRect = intersect(measured.surfaceRect, measured.viewport);
+    const { target } = measured;
+    const rect = surfaceRect ? intersect(measured.targetRect, surfaceRect) : undefined;
+    const targetInvisible = Boolean(target && !rect);
     const structuredTargetLost = Boolean(feedback?.requiresTarget && !target);
-    const activeFeedback = !cancelling && !humanHasControl && !structuredTargetLost ? feedback : undefined;
+    const activeFeedback = !cancelling && !humanHasControl && !structuredTargetLost && !targetInvisible && surfaceRect
+        ? feedback
+        : undefined;
     const effect = activeFeedback?.effect;
     const highlightedRect = effect === "navigate" || activeFeedback?.centered ? undefined : rect;
     const operationFeedbackActive = Boolean(activeFeedback);
@@ -236,9 +327,9 @@ export function OperationOverlayView({ operation, feedback, progressHistory = []
                 top: highlightedRect.top,
                 width: highlightedRect.width,
             } })) : null,
-        React.createElement(AgentPointer, { active: agentControlsSurface && !cancelling, feedback: feedback?.presentation ? feedback : activeFeedback, targetPosition: targetPosition, surfaceCenter: surfaceRect ? center(surfaceRect) : undefined }),
+        React.createElement(AgentPointer, { active: agentControlsSurface && !cancelling && Boolean(surfaceRect) && !targetInvisible, feedback: feedback?.presentation ? feedback : activeFeedback, targetPosition: targetPosition, surfaceCenter: surfaceRect ? center(surfaceRect) : undefined, resolvePosition: resolvePosition }),
         activeFeedback && effect !== "action" && surfaceRect ? (React.createElement(FeedbackIndicator, { key: activeFeedback.id, feedback: activeFeedback, position: activeFeedback.centered ? center(surfaceRect) : targetPosition })) : null,
-        controllerMounted ? (React.createElement("section", { "aria-live": "polite", className: "agent-operation__controller", "data-visibility": controllerExiting ? "exiting" : "visible", style: surfaceRect
+        controllerMounted ? (React.createElement("section", { "aria-live": "polite", className: "agent-operation__controller", "data-visibility": controllerExiting ? "exiting" : "visible", style: surfaceRect && surfaceRect.width >= 240
                 ? {
                     left: surfaceRect.left + surfaceRect.width / 2,
                     right: "auto",

package/dist/styles.css

@@ -108,13 +108,10 @@
     0 0 0 4px rgba(99, 102, 241, 0.16),
     0 0 22px rgba(34, 211, 238, 0.34),
     0 0 48px rgba(79, 70, 229, 0.2);
-  transition:
-    inset 0.12s ease,
-    width 0.12s ease,
-    height 0.12s ease;
   animation: agent-operation-pulse 2.6s ease-in-out infinite;
 }
-.agent-operation__pointer-effect {
+.agent-operation__pointer-effect,
+.agent-operation__floating-label {
   position: fixed;
   z-index: 2;
   top: 0;
@@ -129,6 +126,9 @@
     opacity 0.12s ease-out;
   will-change: transform, opacity;
 }
+.agent-operation__floating-label {
+  z-index: 10001;
+}
 .agent-operation__pointer-cursor {
   position: absolute;
   z-index: 1;
@@ -152,7 +152,8 @@
   top: 27px;
   left: 19px;
   display: flex;
-  max-width: min(300px, 48vw);
+  max-width: min(300px, 48vw, calc(100vw - 24px));
+  box-sizing: border-box;
   overflow: hidden;
   align-items: center;
   gap: 9px;
@@ -188,6 +189,7 @@
   transform: translate(-50%, -50%);
 }
 .agent-operation__pointer-label-text {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -196,6 +198,7 @@
     [data-operation-effect="navigate"]
   )
   .agent-operation__pointer-label-text {
+  min-width: 0;
   display: flex;
   box-sizing: border-box;
   height: 32px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexface/tools",
-  "version": "0.1.15-alpha.6",
+  "version": "0.1.15-alpha.8",
   "type": "module",
   "exports": {
     ".": {