@nexface/tools 0.1.11-alpha.0 → 0.1.11

package/dist/operation-view.js

@@ -1,391 +1,190 @@
 import { CursorIcon as Cursor } from "@phosphor-icons/react/Cursor";
 import { SparkleIcon as Sparkle } from "@phosphor-icons/react/Sparkle";
 import * as React from "react";
-import { useLayoutEffect, useEffect, useRef, useState } from "react";
-import { createPortal, flushSync } from "react-dom";
+import { useCallback, useLayoutEffect, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { PageCommandError } from "./browser/locator.js";
 import { lockOperationSurface } from "./operation-lock.js";
-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 normalizedLabel(label) {
-    const normalized = label?.trim().replace(/\s+/g, " ");
-    return normalized || undefined;
-}
-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;
+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());
 }
-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 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 pointerReachedTarget(element, target) {
-    const rect = element.getBoundingClientRect();
-    return Math.hypot(rect.left - target.left, rect.top - target.top) < 2;
+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 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);
+function AgentPointer({ active, feedback, targetPosition, surfaceCenter }) {
+    const pointer = useRef(null);
     const [motion, setMotion] = useState();
-    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();
+    const action = feedback?.effect === "action" && (!feedback.requiresTarget || Boolean(targetPosition));
+    useLayoutEffect(() => {
+        if (!active) {
+            setMotion(undefined);
             return;
         }
-        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);
+        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 });
+            }
             return;
         }
-        clearExitTimer();
         if (!motion) {
-            activeOperationRef.current = operation.toolCallId;
-            activeTargetRef.current = undefined;
-            const revision = ++motionRevisionRef.current;
-            setMotion({
-                durationMs: 0,
-                phase: "resting",
-                position: initialPosition,
-                revision,
-                toolCallId: operation.toolCallId,
-            });
+            setMotion({ position: feedback?.persistentCursor && surfaceCenter ? surfaceCenter : targetPosition,
+                durationMs: 0, persistent: Boolean(feedback?.persistentCursor) });
             return;
         }
-        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);
-            }
+        if (distance(motion.position, targetPosition) < 1) {
+            if (feedback?.persistentCursor && !motion.persistent)
+                setMotion({ ...motion, persistent: true });
             return;
         }
-        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);
-            }
+        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)
             return;
-        }
-        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);
+        if (!active || !feedback.target?.isConnected || !targetPosition) {
+            feedback.presentation.finish(interrupted());
             return;
         }
-        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));
+        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;
 }
-export function OperationOverlayView({ operation, progressHistory = [], running, feedbackActive = running, labelActive = feedbackActive, humanHasControl = false, cancelling = false, onCancel, resolveSurface, resolveTarget, fallbackPosition, onPointerReady }) {
+export function OperationOverlayView({ operation, feedback, progressHistory = [], running, humanHasControl = false, cancelling = false, onCancel: cancel, resolveSurface }) {
     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 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"));
+    const controllerShouldBeVisible = operation.status !== "cancelled" && (running || humanHasControl || operation.status === "failed");
+    const [controllerVisibility, setControllerVisibility] = useState(controllerShouldBeVisible ? "visible" : undefined);
     useEffect(() => {
-        if (controllerTimerRef.current)
-            clearTimeout(controllerTimerRef.current);
         if (controllerShouldBeVisible) {
-            setControllerMounted(true);
-            setControllerExiting(false);
-            return;
-        }
-        if (!controllerMounted) {
-            setControllerExiting(false);
+            setControllerVisibility("visible");
             return;
         }
         setHistoryOpen(false);
-        setControllerExiting(true);
-        controllerTimerRef.current = setTimeout(() => {
-            setControllerMounted(false);
-            setControllerExiting(false);
-        }, CONTROLLER_EXIT_DURATION_MS);
-        return () => {
-            if (controllerTimerRef.current)
-                clearTimeout(controllerTimerRef.current);
-        };
-    }, [controllerMounted, controllerShouldBeVisible]);
+        setControllerVisibility((current) => current ? "exiting" : undefined);
+        const timer = setTimeout(() => setControllerVisibility(undefined), 300);
+        return () => clearTimeout(timer);
+    }, [controllerShouldBeVisible]);
+    useEffect(() => { if (!progressHistory.length)
+        setHistoryOpen(false); }, [progressHistory.length]);
     useLayoutEffect(() => {
         const surface = resolveSurface?.();
         if (!surface || !running || humanHasControl)
             return;
         return lockOperationSurface(surface, () => cancelButtonRef.current?.focus());
     }, [humanHasControl, resolveSurface, running]);
-    if (!visibleOperation || typeof document === "undefined")
+    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")
         return null;
-    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: "任务已终止",
-    }[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 { 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 = 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 },
+    const operationFeedbackActive = Boolean(activeFeedback);
+    const controllerMounted = Boolean(controllerVisibility);
+    const controllerExiting = controllerVisibility === "exiting";
+    const controllerLabel = humanHasControl ? undefined : operation.progressLabel;
+    const compactStatusLabel = humanHasControl ? "等待你完成操作" : operation.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 },
         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,
-        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 } : {}) }),
+        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,
         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,
@@ -407,7 +206,7 @@ export function OperationOverlayView({ operation, progressHistory = [], running,
                     React.createElement("strong", null, controllerLabel)),
                 statusLabel ? React.createElement("small", { className: "agent-operation__description" },
                     React.createElement("span", { className: "agent-operation__status" }, statusLabel)) : null),
-            (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);
+            (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);
 }
 //# sourceMappingURL=operation-view.js.map