@nexface/tools 0.1.10-alpha.0 → 0.1.11-alpha.0

package/dist/operation-view.js

@@ -1,190 +1,391 @@
 import { CursorIcon as Cursor } from "@phosphor-icons/react/Cursor";
 import { SparkleIcon as Sparkle } from "@phosphor-icons/react/Sparkle";
 import * as React from "react";
-import { useCallback, useLayoutEffect, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { PageCommandError } from "./browser/locator.js";
+import { useLayoutEffect, useEffect, useRef, useState } from "react";
+import { createPortal, flushSync } from "react-dom";
 import { lockOperationSurface } from "./operation-lock.js";
-const center = (rect) => ({ left: rect.left + rect.width / 2, top: rect.top + rect.height / 2 });
-const distance = (a, b) => Math.hypot(a.left - b.left, a.top - b.top);
-const interrupted = () => new PageCommandError({ code: "EXECUTION_CANCELLED", message: "Page action presentation was interrupted." });
-function presentPointer(pointer, target, presentation) {
-    let finished = false;
-    const finish = (error) => {
-        if (finished)
-            return;
-        finished = true;
-        clearTimeout(timer);
-        pointer.removeEventListener("transitionend", onTransition);
-        presentation.signal?.removeEventListener("abort", onAbort);
-        presentation.finish(error);
-    };
-    const reached = () => pointer.isConnected && target.isConnected && distance(pointer.getBoundingClientRect(), center(target.getBoundingClientRect())) < 2;
-    const onTransition = (event) => {
-        if (event.target === pointer && event.propertyName === "transform" && reached())
-            finish();
-    };
-    const onAbort = () => finish(interrupted());
-    const timer = setTimeout(() => reached() ? finish() : finish(new PageCommandError({
-        code: "ACTION_TIMEOUT", message: "Page action pointer did not reach its target in time.",
-    })), 750);
-    pointer.addEventListener("transitionend", onTransition);
-    presentation.signal?.addEventListener("abort", onAbort, { once: true });
-    queueMicrotask(() => { if (presentation.signal?.aborted)
-        onAbort();
-    else if (reached())
-        finish(); });
-    return () => finish(interrupted());
+const BROWSER_TOOL_NAMES = new Set(["nxf_getSnapshot", "nxf_executeAction", "nxf_applyAction"]);
+const CENTER_BROWSER_TOOL_NAMES = new Set(["nxf_getSnapshot", "nxf_executeAction"]);
+const POINTER_EXIT_DURATION_MS = 120;
+const CONTROLLER_EXIT_DURATION_MS = 300;
+function operationProgressLabel(operation) {
+    const progressLabel = operation.progressLabel?.trim().replace(/\s+/g, " ");
+    if (progressLabel)
+        return progressLabel.slice(0, 48);
+    return BROWSER_TOOL_NAMES.has(operation.name)
+        ? "正在浏览网页"
+        : "正在处理你的请求";
+}
+function operationEffect(operation) {
+    return operation.effect ?? "action";
 }
-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 normalizedLabel(label) {
+    const normalized = label?.trim().replace(/\s+/g, " ");
+    return normalized || undefined;
 }
-function FeedbackIndicator({ feedback, position }) {
-    const [lastPosition, setLastPosition] = useState(position ?? feedback.position);
-    useLayoutEffect(() => { if (position)
-        setLastPosition(position); }, [position?.left, position?.top]);
-    const current = position ?? lastPosition;
-    return current ? React.createElement("div", { "aria-hidden": true, className: "agent-operation__pointer-effect", "data-active": "true", "data-operation-effect": feedback.effect, style: { "--agent-operation-pointer-duration": "0ms", "--agent-operation-pointer-x": `${current.left}px`,
-            "--agent-operation-pointer-y": `${current.top}px` } },
-        React.createElement(FeedbackLabel, { feedback: feedback })) : null;
+function operationTargetLabel(operation, target) {
+    const label = target?.label;
+    if (!label || label === operation.name)
+        return undefined;
+    const rawNamePrefix = `${operation.name} · `;
+    return label.startsWith(rawNamePrefix) ? label.slice(rawNamePrefix.length) : label;
 }
-function AgentPointer({ active, feedback, targetPosition, surfaceCenter }) {
-    const pointer = useRef(null);
+function pointerMoveDuration(from, to) {
+    const distance = Math.hypot(to.left - from.left, to.top - from.top);
+    if (distance < 2)
+        return 0;
+    return Math.round(Math.min(360, Math.max(180, 180 + distance * 0.18)));
+}
+function pointerReachedTarget(element, target) {
+    const rect = element.getBoundingClientRect();
+    return Math.hypot(rect.left - target.left, rect.top - target.top) < 2;
+}
+function AgentPointer({ active, initialPosition, label, labelActive, operation, targetElement, targetPosition, visible, onPointerReady }) {
+    const pointerRef = useRef(null);
+    const activeOperationRef = useRef(undefined);
+    const activeTargetRef = useRef(undefined);
+    const exitTimerRef = useRef(undefined);
+    const movementTimerRef = useRef(undefined);
+    const motionRevisionRef = useRef(0);
+    const latestActiveRef = useRef(active);
+    const latestOperationRef = useRef(operation);
     const [motion, setMotion] = useState();
-    const action = feedback?.effect === "action" && (!feedback.requiresTarget || Boolean(targetPosition));
-    useLayoutEffect(() => {
-        if (!active) {
-            setMotion(undefined);
+    latestActiveRef.current = active;
+    latestOperationRef.current = operation;
+    const clearExitTimer = () => {
+        if (!exitTimerRef.current)
+            return;
+        clearTimeout(exitTimerRef.current);
+        exitTimerRef.current = undefined;
+    };
+    const clearMovementTimer = () => {
+        if (!movementTimerRef.current)
+            return;
+        clearTimeout(movementTimerRef.current);
+        movementTimerRef.current = undefined;
+    };
+    const finishMovement = (revision, toolCallId) => {
+        const latestOperation = latestOperationRef.current;
+        if (!latestActiveRef.current
+            || motionRevisionRef.current !== revision
+            || latestOperation.toolCallId !== toolCallId)
+            return;
+        clearMovementTimer();
+        const settle = () => setMotion((current) => current?.revision === revision ? { ...current, phase: "resting" } : current);
+        if (latestOperation.name !== "nxf_applyAction" || !onPointerReady) {
+            settle();
             return;
         }
-        if (!action || !targetPosition) {
-            if (action && !feedback?.requiresTarget && motion && pointer.current) {
-                const rect = pointer.current.getBoundingClientRect();
-                if (distance(rect, motion.position) >= 1)
-                    setMotion({ ...motion, position: rect, durationMs: 0 });
-            }
+        queueMicrotask(() => {
+            if (!latestActiveRef.current || motionRevisionRef.current !== revision || latestOperationRef.current.toolCallId !== toolCallId)
+                return;
+            flushSync(settle);
+            requestAnimationFrame(() => requestAnimationFrame(() => {
+                if (latestActiveRef.current && motionRevisionRef.current === revision
+                    && latestOperationRef.current.toolCallId === toolCallId && activeTargetRef.current?.isConnected)
+                    onPointerReady(toolCallId);
+            }));
+        });
+    };
+    useEffect(() => () => {
+        clearExitTimer();
+        clearMovementTimer();
+    }, []);
+    useEffect(() => {
+        if (!visible || !initialPosition) {
+            if (!motion || motion.phase === "hidden")
+                return;
+            activeOperationRef.current = undefined;
+            activeTargetRef.current = undefined;
+            clearMovementTimer();
+            const revision = ++motionRevisionRef.current;
+            setMotion((current) => current
+                ? { ...current, durationMs: POINTER_EXIT_DURATION_MS, phase: "hidden", revision }
+                : current);
+            clearExitTimer();
+            exitTimerRef.current = setTimeout(() => {
+                if (motionRevisionRef.current === revision)
+                    setMotion(undefined);
+            }, POINTER_EXIT_DURATION_MS);
             return;
         }
+        clearExitTimer();
         if (!motion) {
-            setMotion({ position: feedback?.persistentCursor && surfaceCenter ? surfaceCenter : targetPosition,
-                durationMs: 0, persistent: Boolean(feedback?.persistentCursor) });
+            activeOperationRef.current = operation.toolCallId;
+            activeTargetRef.current = undefined;
+            const revision = ++motionRevisionRef.current;
+            setMotion({
+                durationMs: 0,
+                phase: "resting",
+                position: initialPosition,
+                revision,
+                toolCallId: operation.toolCallId,
+            });
             return;
         }
-        if (distance(motion.position, targetPosition) < 1) {
-            if (feedback?.persistentCursor && !motion.persistent)
-                setMotion({ ...motion, persistent: true });
+        if (!active) {
+            activeOperationRef.current = undefined;
+            activeTargetRef.current = undefined;
+            clearMovementTimer();
+            if (motion.phase !== "resting") {
+                const revision = ++motionRevisionRef.current;
+                setMotion((current) => current
+                    ? { ...current, phase: "resting", revision }
+                    : current);
+            }
             return;
         }
-        const from = pointer.current?.getBoundingClientRect() ?? motion.position;
-        const durationMs = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0
-            : Math.round(Math.min(360, Math.max(180, 180 + distance(from, targetPosition) * 0.18)));
-        setMotion({ position: targetPosition, durationMs, persistent: motion.persistent || Boolean(feedback?.persistentCursor) });
-    }, [active, action, feedback?.id, targetPosition?.left, targetPosition?.top, motion]);
-    const show = Boolean(active && motion && (motion.persistent || action));
-    useLayoutEffect(() => {
-        if (!feedback?.presentation)
+        const operationChanged = activeOperationRef.current !== operation.toolCallId;
+        if (operationChanged) {
+            activeOperationRef.current = operation.toolCallId;
+            activeTargetRef.current = undefined;
+            clearMovementTimer();
+        }
+        else if (motion.phase === "hidden") {
+            setMotion((current) => current
+                ? { ...current, durationMs: 0, phase: "resting" }
+                : current);
+        }
+        if (!targetElement || !targetPosition) {
+            const positionChanged = CENTER_BROWSER_TOOL_NAMES.has(operation.name)
+                && (motion.position.left !== initialPosition.left || motion.position.top !== initialPosition.top);
+            if (operationChanged || activeTargetRef.current || positionChanged) {
+                activeTargetRef.current = undefined;
+                clearMovementTimer();
+                const revision = ++motionRevisionRef.current;
+                const pointerRect = pointerRef.current?.getBoundingClientRect();
+                setMotion((current) => current
+                    ? {
+                        ...current,
+                        durationMs: 0,
+                        phase: "resting",
+                        position: operationChanged || positionChanged ? initialPosition : pointerRect
+                            ? { left: pointerRect.left, top: pointerRect.top }
+                            : current.position,
+                        revision,
+                        toolCallId: operation.toolCallId,
+                    }
+                    : current);
+            }
             return;
-        if (!active || !feedback.target?.isConnected || !targetPosition) {
-            feedback.presentation.finish(interrupted());
+        }
+        const targetChanged = operationChanged || activeTargetRef.current !== targetElement;
+        if (!targetChanged) {
+            if (motion.position.left === targetPosition.left && motion.position.top === targetPosition.top)
+                return;
+            clearMovementTimer();
+            const revision = ++motionRevisionRef.current;
+            const durationMs = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : 180;
+            setMotion((current) => current
+                ? { ...current, durationMs, phase: "moving", position: targetPosition, revision }
+                : current);
+            if (durationMs === 0)
+                finishMovement(revision, operation.toolCallId);
+            else
+                movementTimerRef.current = setTimeout(() => finishMovement(revision, operation.toolCallId), durationMs + 50);
             return;
         }
-        if (show && pointer.current)
-            return presentPointer(pointer.current, feedback.target, feedback.presentation);
-    }, [active, show, feedback?.presentation, feedback?.target, Boolean(targetPosition)]);
-    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`, "--agent-operation-pointer-y": `${motion.position.top}px` } },
-        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;
+        activeTargetRef.current = targetElement;
+        clearMovementTimer();
+        const revision = ++motionRevisionRef.current;
+        const pointerRect = pointerRef.current?.getBoundingClientRect();
+        const currentPosition = pointerRect
+            ? { left: pointerRect.left, top: pointerRect.top }
+            : motion.position;
+        const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+        const durationMs = prefersReducedMotion ? 0 : pointerMoveDuration(currentPosition, targetPosition);
+        setMotion((current) => current
+            ? {
+                ...current,
+                durationMs,
+                phase: "moving",
+                position: targetPosition,
+                revision,
+                toolCallId: operation.toolCallId,
+            }
+            : current);
+        if (durationMs === 0)
+            finishMovement(revision, operation.toolCallId);
+        else {
+            // A first-frame position update may not dispatch transitionend.
+            movementTimerRef.current = setTimeout(() => finishMovement(revision, operation.toolCallId), durationMs + 50);
+        }
+    }, [
+        active,
+        initialPosition?.left,
+        initialPosition?.top,
+        motion,
+        operation.toolCallId,
+        targetElement,
+        targetPosition?.left,
+        targetPosition?.top,
+        visible,
+    ]);
+    if (!motion)
+        return null;
+    const effect = operationEffect(operation);
+    const activeEffect = active ? effect : undefined;
+    const browserTool = CENTER_BROWSER_TOOL_NAMES.has(operation.name);
+    return (React.createElement("div", { "aria-hidden": true, className: "agent-operation__pointer-effect", "data-active": active ? "true" : "false", "data-operation-effect": activeEffect, "data-phase": motion.phase, onTransitionEnd: (event) => {
+            if (event.currentTarget !== event.target
+                || event.propertyName !== "transform"
+                || motion.phase !== "moving"
+                || !pointerReachedTarget(event.currentTarget, motion.position))
+                return;
+            finishMovement(motion.revision, motion.toolCallId);
+        }, ref: pointerRef, style: {
+            "--agent-operation-pointer-duration": `${motion.durationMs}ms`,
+            "--agent-operation-pointer-x": `${motion.position.left}px`,
+            "--agent-operation-pointer-y": `${motion.position.top}px`,
+        } },
+        active && visible && motion.toolCallId === operation.toolCallId && browserTool && effect === "action" && motion.phase !== "hidden" ? (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: "agent-operation__browser-halo" }),
+            labelActive ? React.createElement("span", { className: "agent-operation__browser-label", title: label }, label) : null)) : null,
+        active && visible && motion.toolCallId === operation.toolCallId && !browserTool && effect === "action" && motion.phase !== "hidden" ? (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: "agent-operation__pointer-cursor" },
+                React.createElement(Cursor, { className: "agent-operation__pointer", size: 24, weight: "fill" })))) : null,
+        active && (!browserTool || (effect === "read" && visible && motion.toolCallId === operation.toolCallId))
+            && motion.phase !== "hidden" && (labelActive || effect !== "action") ? (React.createElement("span", { className: labelActive ? "agent-operation__pointer-label" : "agent-operation__pointer-indicator", "data-browser-tool": browserTool ? "true" : undefined, "data-operation-effect": activeEffect, title: labelActive ? label : undefined },
+            activeEffect === "processing" ? React.createElement("span", { className: "agent-operation__pointer-processing" }) : null,
+            activeEffect === "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,
+            activeEffect === "navigate" ? React.createElement("span", { className: "agent-operation__pointer-navigation-trail" }) : null,
+            labelActive ? React.createElement("span", { className: "agent-operation__pointer-label-text" }, label) : null)) : null));
 }
-export function OperationOverlayView({ operation, feedback, progressHistory = [], running, humanHasControl = false, cancelling = false, onCancel: cancel, resolveSurface }) {
+export function OperationOverlayView({ operation, progressHistory = [], running, feedbackActive = running, labelActive = feedbackActive, humanHasControl = false, cancelling = false, onCancel, resolveSurface, resolveTarget, fallbackPosition, onPointerReady }) {
     const [, setGeometry] = useState("");
+    useLayoutEffect(() => {
+        const rect = resolveSurface?.()?.getBoundingClientRect();
+        if (rect)
+            setGeometry([rect.left, rect.top, rect.width, rect.height].join(","));
+    }, [resolveSurface]);
     const [historyOpen, setHistoryOpen] = useState(false);
     const [historyId] = useState(() => `nexface-operation-history-${globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`}`);
+    const clearTimerRef = useRef(undefined);
     const cancelButtonRef = useRef(null);
-    const controllerShouldBeVisible = operation.status !== "cancelled" && (running || humanHasControl || operation.status === "failed");
-    const [controllerVisibility, setControllerVisibility] = useState(controllerShouldBeVisible ? "visible" : undefined);
+    const controllerTimerRef = useRef(undefined);
+    const [visibleOperation, setVisibleOperation] = useState(operation);
+    const [controllerMounted, setControllerMounted] = useState(Boolean(operation
+        && operation.status !== "cancelled"
+        && (running || humanHasControl || operation.status === "failed")));
+    const [controllerExiting, setControllerExiting] = useState(false);
+    useLayoutEffect(() => {
+        if (clearTimerRef.current)
+            clearTimeout(clearTimerRef.current);
+        if (operation)
+            setVisibleOperation(operation);
+        if (operation?.status === "cancelled") {
+            clearTimerRef.current = setTimeout(() => setVisibleOperation(undefined), 600);
+        }
+        return () => { if (clearTimerRef.current)
+            clearTimeout(clearTimerRef.current); };
+    }, [operation, running]);
+    useEffect(() => {
+        if ((!running && !feedbackActive && !humanHasControl) || !visibleOperation || visibleOperation.status === "cancelled")
+            return;
+        let frame = requestAnimationFrame(function update() {
+            const surface = resolveSurface?.();
+            const target = resolveTarget?.(visibleOperation)?.element;
+            const geometry = [surface, target].map((element) => {
+                if (!element?.isConnected)
+                    return "";
+                const rect = element.getBoundingClientRect();
+                return [rect.left, rect.top, rect.width, rect.height].join(",");
+            }).join(";");
+            setGeometry(geometry);
+            frame = requestAnimationFrame(update);
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [visibleOperation?.toolCallId, visibleOperation?.status, running, feedbackActive, humanHasControl, resolveSurface, resolveTarget]);
+    useEffect(() => {
+        if (progressHistory.length === 0)
+            setHistoryOpen(false);
+    }, [progressHistory.length]);
+    const controllerShouldBeVisible = Boolean(visibleOperation
+        && visibleOperation.status !== "cancelled"
+        && (running || humanHasControl || visibleOperation.status === "failed"));
     useEffect(() => {
+        if (controllerTimerRef.current)
+            clearTimeout(controllerTimerRef.current);
         if (controllerShouldBeVisible) {
-            setControllerVisibility("visible");
+            setControllerMounted(true);
+            setControllerExiting(false);
+            return;
+        }
+        if (!controllerMounted) {
+            setControllerExiting(false);
             return;
         }
         setHistoryOpen(false);
-        setControllerVisibility((current) => current ? "exiting" : undefined);
-        const timer = setTimeout(() => setControllerVisibility(undefined), 300);
-        return () => clearTimeout(timer);
-    }, [controllerShouldBeVisible]);
-    useEffect(() => { if (!progressHistory.length)
-        setHistoryOpen(false); }, [progressHistory.length]);
+        setControllerExiting(true);
+        controllerTimerRef.current = setTimeout(() => {
+            setControllerMounted(false);
+            setControllerExiting(false);
+        }, CONTROLLER_EXIT_DURATION_MS);
+        return () => {
+            if (controllerTimerRef.current)
+                clearTimeout(controllerTimerRef.current);
+        };
+    }, [controllerMounted, controllerShouldBeVisible]);
     useLayoutEffect(() => {
         const surface = resolveSurface?.();
         if (!surface || !running || humanHasControl)
             return;
         return lockOperationSurface(surface, () => cancelButtonRef.current?.focus());
     }, [humanHasControl, resolveSurface, running]);
-    const readGeometry = useCallback(() => {
-        const surface = resolveSurface?.();
-        const resolvedTarget = feedback?.resolveTarget ? feedback.resolveTarget() : feedback?.target;
-        const target = resolvedTarget?.isConnected && surface?.contains(resolvedTarget) ? resolvedTarget : undefined;
-        return {
-            surfaceRect: surface?.isConnected ? surface.getBoundingClientRect() : undefined,
-            target,
-            targetRect: target?.getBoundingClientRect(),
-        };
-    }, [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);
-        };
-        update();
-        if (!running && !humanHasControl)
-            return;
-        let frame = requestAnimationFrame(function track() { update(); frame = requestAnimationFrame(track); });
-        return () => cancelAnimationFrame(frame);
-    }, [readGeometry, operation, running, humanHasControl]);
-    if (typeof document === "undefined")
+    if (!visibleOperation || typeof document === "undefined")
         return null;
-    const { surfaceRect, target, targetRect: rect } = readGeometry();
-    const structuredTargetLost = Boolean(feedback?.requiresTarget && !target);
-    const activeFeedback = !cancelling && !humanHasControl && !structuredTargetLost ? feedback : undefined;
-    const effect = activeFeedback?.effect;
-    const highlightedRect = effect === "navigate" || activeFeedback?.centered ? undefined : rect;
-    const agentControlsSurface = running && !humanHasControl;
-    const operationFeedbackActive = Boolean(activeFeedback);
-    const controllerMounted = Boolean(controllerVisibility);
-    const controllerExiting = controllerVisibility === "exiting";
-    const controllerLabel = humanHasControl ? undefined : operation.progressLabel;
-    const compactStatusLabel = humanHasControl ? "等待你完成操作" : operation.progressLabel;
+    const resolvedTarget = resolveTarget?.(visibleOperation);
+    const surfaceElement = resolveSurface?.();
+    const target = resolvedTarget && (!surfaceElement || surfaceElement.contains(resolvedTarget.element))
+        ? resolvedTarget
+        : undefined;
+    const structuredTargetLost = visibleOperation.name === "nxf_applyAction" && !target;
+    const progressLabel = operationProgressLabel(visibleOperation);
+    const effect = operationEffect(visibleOperation);
+    const targetLabel = operationTargetLabel(visibleOperation, target);
+    const pointerLabel = normalizedLabel(visibleOperation.progressLabel) ?? targetLabel ?? progressLabel;
+    const controllerLabel = humanHasControl ? undefined : progressLabel;
     const statusLabel = humanHasControl ? "等待你完成操作" : {
-        running: "Agent 正在控制", completed: running ? "工具已完成，任务继续中" : "操作已完成",
-        failed: running ? "Agent 正在处理错误" : "操作失败", cancelled: "任务已终止",
-    }[operation.status];
-    const targetPosition = rect ? center(rect) : undefined;
-    return createPortal(React.createElement("div", { className: "agent-operation", "data-nexface-ignore": true, "data-feedback-active": operationFeedbackActive, "data-structured-target-lost": structuredTargetLost, "data-human-control": humanHasControl, "data-operation-effect": effect ?? "action", "data-run-active": running, "data-status": operation.status },
+        running: "Agent 正在控制",
+        completed: running ? "工具已完成，任务继续中" : "操作已完成",
+        failed: running ? "Agent 正在处理错误" : "操作失败",
+        cancelled: "任务已终止",
+    }[visibleOperation.status];
+    const compactStatusLabel = humanHasControl
+        ? "等待你完成操作"
+        : progressLabel;
+    const rect = target?.element.isConnected ? target.element.getBoundingClientRect() : undefined;
+    const highlightedRect = effect === "navigate" ? undefined : rect;
+    const surfaceRect = surfaceElement?.isConnected ? surfaceElement.getBoundingClientRect() : undefined;
+    const agentControlsSurface = running && !humanHasControl;
+    const operationFeedbackActive = feedbackActive && !structuredTargetLost && !humanHasControl && visibleOperation.status !== "cancelled";
+    const pointerVisible = Boolean(surfaceRect) && operationFeedbackActive;
+    const pointerPosition = rect ? {
+        left: rect.left + rect.width / 2,
+        top: rect.top + rect.height / 2,
+    } : undefined;
+    const cancel = onCancel ? () => {
+        onCancel();
+    } : undefined;
+    return createPortal(React.createElement("div", { className: "agent-operation", "data-nexface-ignore": true, "data-feedback-active": operationFeedbackActive, "data-structured-target-lost": structuredTargetLost, "data-human-control": humanHasControl, "data-operation-effect": effect, "data-run-active": running, "data-status": visibleOperation.status },
         agentControlsSurface && surfaceRect ? React.createElement("div", { "aria-hidden": true, className: "agent-operation__surface", style: {
-                ...(highlightedRect ? { "--agent-operation-cutout-height": `${highlightedRect.height}px`,
+                ...(highlightedRect ? {
+                    "--agent-operation-cutout-height": `${highlightedRect.height}px`,
                     "--agent-operation-cutout-left": `${highlightedRect.left - surfaceRect.left}px`,
-                    "--agent-operation-cutout-top": `${highlightedRect.top - surfaceRect.top}px`, "--agent-operation-cutout-width": `${highlightedRect.width}px` } : {}),
+                    "--agent-operation-cutout-top": `${highlightedRect.top - surfaceRect.top}px`,
+                    "--agent-operation-cutout-width": `${highlightedRect.width}px`,
+                } : {}),
                 height: surfaceRect.height, left: surfaceRect.left, top: surfaceRect.top, width: surfaceRect.width,
             } }) : null,
-        activeFeedback && highlightedRect ? React.createElement("div", { "aria-hidden": true, className: "agent-operation__target", "data-operation-effect": effect, style: { height: highlightedRect.height, left: highlightedRect.left, 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 }),
-        activeFeedback && effect !== "action" && surfaceRect ? React.createElement(FeedbackIndicator, { key: activeFeedback.id, feedback: activeFeedback, position: activeFeedback.centered ? center(surfaceRect) : targetPosition }) : null,
+        operationFeedbackActive && highlightedRect ? React.createElement("div", { "aria-hidden": true, className: "agent-operation__target", "data-operation-effect": effect, style: { height: highlightedRect.height, left: highlightedRect.left, top: highlightedRect.top, width: highlightedRect.width } }) : null,
+        React.createElement(AgentPointer, { active: operationFeedbackActive, initialPosition: visibleOperation.name === "nxf_applyAction" && surfaceRect
+                ? { left: surfaceRect.left + surfaceRect.width / 2, top: surfaceRect.top + surfaceRect.height / 2 }
+                : pointerPosition ?? fallbackPosition ?? (surfaceRect ? { left: surfaceRect.left + surfaceRect.width / 2, top: surfaceRect.top + surfaceRect.height / 2 } : undefined), label: pointerLabel, labelActive: labelActive, operation: visibleOperation, targetElement: target?.element, targetPosition: pointerPosition, visible: pointerVisible, ...(onPointerReady ? { onPointerReady } : {}) }),
         controllerMounted ? React.createElement("section", { "aria-live": "polite", className: "agent-operation__controller", "data-visibility": controllerExiting ? "exiting" : "visible", style: surfaceRect ? { left: surfaceRect.left + surfaceRect.width / 2, right: "auto", "--agent-operation-controller-x": "-50%", maxWidth: Math.max(0, surfaceRect.width - 32) } : undefined },
             historyOpen ? React.createElement("aside", { "aria-label": "\u672C\u6B21\u8FD0\u884C\u7684\u64CD\u4F5C\u8BB0\u5F55", className: "agent-operation__history", id: historyId },
                 React.createElement("header", null,
@@ -206,7 +407,7 @@ export function OperationOverlayView({ operation, feedback, progressHistory = []
                     React.createElement("strong", null, controllerLabel)),
                 statusLabel ? React.createElement("small", { className: "agent-operation__description" },
                     React.createElement("span", { className: "agent-operation__status" }, statusLabel)) : null),
-            (running || humanHasControl) && operation.status !== "cancelled" ? React.createElement("span", { className: "agent-operation__compact-status", title: compactStatusLabel }, compactStatusLabel) : null,
-            cancel && (running || humanHasControl) && operation.status !== "cancelled" ? React.createElement("button", { ref: cancelButtonRef, className: "agent-operation__stop", type: "button", disabled: cancelling, onClick: cancel }, cancelling ? "正在终止" : "终止任务") : null) : null), document.body);
+            (running || humanHasControl) && visibleOperation.status !== "cancelled" ? React.createElement("span", { className: "agent-operation__compact-status", title: compactStatusLabel }, compactStatusLabel) : null,
+            cancel && (running || humanHasControl) && visibleOperation.status !== "cancelled" ? React.createElement("button", { ref: cancelButtonRef, className: "agent-operation__stop", type: "button", disabled: cancelling, onClick: cancel }, cancelling ? "正在终止" : "终止任务") : null) : null), document.body);
 }
 //# sourceMappingURL=operation-view.js.map