@nexface/tools 0.1.15-alpha.1 → 0.1.15-alpha.10

package/dist/operation-view.js

@@ -1,14 +1,33 @@
 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 { 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 center = (rect) => ({ left: rect.left + rect.width / 2, top: rect.top + rect.height / 2 });
+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,
+});
 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) {
+const interrupted = () => new PageCommandError({
+    code: "EXECUTION_CANCELLED",
+    message: "Page action presentation was interrupted.",
+});
+function presentPointer(pointer, target, resolvePosition, presentation) {
     let finished = false;
     const finish = (error) => {
         if (finished)
@@ -19,45 +38,112 @@ 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();
     };
     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);
+    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(); });
+    queueMicrotask(() => {
+        if (presentation.signal?.aborted)
+            onAbort();
+        else if (reached())
+            finish();
+    });
     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 }) {
+function FeedbackIndicator({ feedback, position, }) {
     const [lastPosition, setLastPosition] = useState(position ?? feedback.position);
-    useLayoutEffect(() => { if (position)
-        setLastPosition(position); }, [position?.left, position?.top]);
+    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;
+    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, 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));
@@ -75,8 +161,11 @@ function AgentPointer({ active, feedback, targetPosition, surfaceCenter }) {
             return;
         }
         if (!motion) {
-            setMotion({ position: feedback?.persistentCursor && surfaceCenter ? surfaceCenter : targetPosition,
-                durationMs: 0, persistent: Boolean(feedback?.persistentCursor) });
+            setMotion({
+                position: feedback?.persistentCursor && surfaceCenter ? surfaceCenter : targetPosition,
+                durationMs: 0,
+                persistent: Boolean(feedback?.persistentCursor),
+            });
             return;
         }
         if (distance(motion.position, targetPosition) < 1) {
@@ -85,9 +174,14 @@ function AgentPointer({ active, feedback, targetPosition, surfaceCenter }) {
             return;
         }
         const from = pointer.current?.getBoundingClientRect() ?? motion.position;
-        const durationMs = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0
+        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) });
+        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(() => {
@@ -98,20 +192,31 @@ 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 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` } },
+            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`,
+            "--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;
+        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("");
+export function OperationOverlayView({ operation, feedback, progressHistory = [], running, humanHasControl = false, cancelling = false, onCancel: cancel, resolveSurface, }) {
+    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 cancelButtonRef = useRef(null);
-    const controllerShouldBeVisible = operation.status !== "cancelled" && (running || humanHasControl || operation.status === "failed");
+    const controllerShouldBeVisible = operation.status !== "cancelled" &&
+        (running || humanHasControl || operation.status === "failed");
     const [controllerVisibility, setControllerVisibility] = useState(controllerShouldBeVisible ? "visible" : undefined);
     useEffect(() => {
         if (controllerShouldBeVisible) {
@@ -119,23 +224,27 @@ export function OperationOverlayView({ operation, feedback, progressHistory = []
             return;
         }
         setHistoryOpen(false);
-        setControllerVisibility((current) => current ? "exiting" : undefined);
+        setControllerVisibility((current) => (current ? "exiting" : undefined));
         const timer = setTimeout(() => setControllerVisibility(undefined), 300);
         return () => clearTimeout(timer);
     }, [controllerShouldBeVisible]);
-    useEffect(() => { if (!progressHistory.length)
-        setHistoryOpen(false); }, [progressHistory.length]);
+    useEffect(() => {
+        if (!progressHistory.length)
+            setHistoryOpen(false);
+    }, [progressHistory.length]);
+    const agentControlsSurface = running && !humanHasControl;
     useLayoutEffect(() => {
         const surface = resolveSurface?.();
-        if (!surface || !running || humanHasControl)
+        if (!surface || !agentControlsSurface)
             return;
-        return lockOperationSurface(surface, () => cancelButtonRef.current?.focus());
-    }, [humanHasControl, resolveSurface, running]);
+        return lockOperationSurface(surface);
+    }, [agentControlsSurface, resolveSurface]);
     const readGeometry = useCallback(() => {
         const surface = resolveSurface?.();
         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(),
@@ -143,56 +252,98 @@ 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)
             return;
-        let frame = requestAnimationFrame(function track() { update(); frame = requestAnimationFrame(track); });
+        let frame = requestAnimationFrame(function track() {
+            update();
+            frame = requestAnimationFrame(track);
+        });
         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 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 statusLabel = humanHasControl ? "等待你完成操作" : {
-        running: "Agent 正在控制", completed: running ? "工具已完成，任务继续中" : "操作已完成",
-        failed: running ? "Agent 正在处理错误" : "操作失败", cancelled: "任务已终止",
-    }[operation.status];
+    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`,
-                    "--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` } : {}),
-                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,
-        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 },
+        agentControlsSurface && surfaceRect ? (React.createElement("div", { "aria-hidden": true, className: "agent-operation__surface", style: {
+                ...(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`,
+                    }
+                    : {}),
+                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 && 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 && surfaceRect.width >= 240
+                ? {
+                    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,
                     React.createElement("strong", null, "\u64CD\u4F5C\u8BB0\u5F55"),
                     React.createElement("span", null, progressHistory.length)),
-                React.createElement("ol", null, progressHistory.map(({ progressLabel: label, toolCallId }, index) => React.createElement("li", { key: toolCallId },
+                React.createElement("ol", null, progressHistory.map(({ progressLabel: label, toolCallId }, index) => (React.createElement("li", { key: toolCallId },
                     React.createElement("span", { "aria-hidden": true }, index + 1),
-                    React.createElement("p", null, label))))) : null,
+                    React.createElement("p", null, label))))))) : null,
             React.createElement("span", { "aria-hidden": true, className: "agent-operation__edge-flow" }),
             React.createElement("span", { "aria-hidden": true, className: "agent-operation__pause-mark" },
                 React.createElement("i", null),
@@ -204,9 +355,8 @@ export function OperationOverlayView({ operation, feedback, progressHistory = []
             React.createElement("div", null,
                 React.createElement("span", { className: "agent-operation__heading" },
                     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);
+                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", { className: "agent-operation__stop", type: "button", disabled: cancelling, onClick: cancel }, cancelling ? "正在终止" : "终止任务")) : null)) : null), document.body);
 }
-//# sourceMappingURL=operation-view.js.map

package/dist/react.js

@@ -3,7 +3,7 @@ import { Children, Fragment, cloneElement, useCallback, useEffect, useLayoutEffe
 import { defineAgentTool } from "./definition.js";
 import { getAgentNavigationEntries, } from "./navigation.js";
 import { AgentToolError, getInternalToolRuntime } from "./runtime.js";
-import { InternalToolRuntimeScope, useInternalToolRuntime, } from "./internal-react.js";
+import { InternalToolRuntimeScope, useInternalToolRuntime } from "./internal-react.js";
 import { connectToolRuntimeToWebMcp } from "./webmcp.js";
 const bindingInternals = new WeakMap();
 export function getAgentToolBindingInternals(binding) {
@@ -55,10 +55,10 @@ function createAgentToolBinding(toolName) {
 function useAgentBinding(definition, execute, options) {
     const runtime = useInternalToolRuntime();
     const confirmation = options.requiresConfirmation;
-    if (confirmation !== undefined
-        && (!confirmation
-            || typeof confirmation !== "object"
-            || (confirmation.mode !== "chat" && confirmation.mode !== "page"))) {
+    if (confirmation !== undefined &&
+        (!confirmation ||
+            typeof confirmation !== "object" ||
+            (confirmation.mode !== "chat" && confirmation.mode !== "page"))) {
         throw new Error("requiresConfirmation must explicitly use chat or page mode.");
     }
     const executeRef = useRef(execute);
@@ -82,9 +82,7 @@ export function useAgentTool(definition, execute, options = {}) {
     return useAgentBinding(definition, execute, options);
 }
 function getAgentNavigationExecutor(executors, key) {
-    if (!executors
-        || typeof executors !== "object"
-        || !Object.hasOwn(executors, key)) {
+    if (!executors || typeof executors !== "object" || !Object.hasOwn(executors, key)) {
         throw new Error(`Missing navigation executor: ${key}.`);
     }
     const executor = executors[key];
@@ -203,9 +201,7 @@ function isHTMLElement(value) {
     return ElementConstructor !== undefined && value instanceof ElementConstructor;
 }
 function warnAgentUIAction(message) {
-    if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
-        console.warn(message);
-    }
+    console.warn(message);
 }
 const eventAdapters = {
     click: {
@@ -286,8 +282,8 @@ export function AgentUIAction({ name, description, event = "click", children, })
             if (warnedChildRef.current !== warningType) {
                 warnedChildRef.current = warningType;
                 warnAgentUIAction(isFragment
-                    ? `AgentUIAction "${name}" does not support React.Fragment children.`
-                    : `AgentUIAction "${name}" needs a child with onClick.`);
+                    ? `AgentUIAction "${name}" does not support React.Fragment children; the Tool is not registered.`
+                    : `AgentUIAction "${name}" needs a child with onClick; the Tool is not registered.`);
             }
             return;
         }
@@ -365,4 +361,3 @@ export function AgentUIAction({ name, description, event = "click", children, })
         ref: mergedRef,
     });
 }
-//# sourceMappingURL=react.js.map

package/dist/registration.js

@@ -1,15 +1,16 @@
 import { assertAgentToolInputSchema } from "./shared/schema.js";
 export function registerAgentTool(definition, options) {
     assertAgentToolRegistration(definition, options);
-    assertAgentToolInputSchema(definition.inputSchema, `Tool "${definition.name}".inputSchema`);
+    assertAgentToolInputSchema(definition.inputSchema, `Tool "${definition.name}" was not registered: inputSchema`);
     return Object.freeze({ definition, execute: options.execute });
 }
 export function assertAgentToolRegistration(definition, options) {
-    if (!definition || typeof definition.name !== "string" || typeof options?.execute !== "function") {
+    if (!definition ||
+        typeof definition.name !== "string" ||
+        typeof options?.execute !== "function") {
         throw new TypeError("registerAgentTool requires a definition and execute function.");
     }
     if ("requiresConfirmation" in options) {
         throw new TypeError("Registered Agent tools do not support requiresConfirmation.");
     }
 }
-//# sourceMappingURL=registration.js.map

package/dist/runtime.d.ts

@@ -8,13 +8,14 @@ import type { AgentContextEntry, AgentContextInput, AgentContextRegistration, Ag
 import type { AgentToolExecutionEvent } from "./internal-types.js";
 export interface ToolRuntimeOptions {
     readonly pageAutomation?: boolean;
+    readonly routeSearch?: boolean;
 }
 export interface ToolRuntimeToolChangeEvent {
     readonly toolName: string;
-    readonly change: "registered" | "unregistered";
+    readonly change: "registered" | "unregistered" | "visibility";
 }
 declare const CONTEXT_ERROR_CODES: readonly ["CONTEXT_DISPOSED", "CONTEXT_NAME_MISMATCH", "DUPLICATE_CONTEXT", "INVALID_CONTEXT"];
-type AgentContextErrorCode = typeof CONTEXT_ERROR_CODES[number];
+type AgentContextErrorCode = (typeof CONTEXT_ERROR_CODES)[number];
 export declare function isToolRuntimeError(error: unknown): error is {
     readonly type: "tool_runtime_error";
     readonly domain: "tool" | "context";
@@ -183,6 +184,7 @@ export declare class ToolRuntimeImplementation extends EventTarget implements To
     getContexts(options?: {
         signal?: AbortSignal;
     }): Promise<readonly AgentContextEntry[]>;
+    getRegisteredTools(): readonly RuntimeAgentTool[];
     getWebMcpTools(): readonly RuntimeAgentTool[];
     isRegistered(name: string): boolean;
     getTools(): readonly RuntimeAgentTool[];