@nexface/tools 0.1.13-alpha.4 → 0.1.13-alpha.5

package/dist/browser/toolset.js

@@ -27,11 +27,7 @@ const DEFAULT_SNAPSHOT_LIMITS = {
     fullMaxVisitedNodes: 40_000,
 };
 function isIgnoredMutationNode(node) {
-    const element = node instanceof Element
-        ? node
-        : node instanceof Text
-            ? node.parentElement
-            : null;
+    const element = node instanceof Element ? node : node instanceof Text ? node.parentElement : null;
     return Boolean(element?.closest("[data-nexface-ignore]"));
 }
 function isRelevantMutation(record) {
@@ -40,8 +36,7 @@ function isRelevantMutation(record) {
     if (record.type !== "childList")
         return true;
     const changedNodes = [...record.addedNodes, ...record.removedNodes];
-    return (changedNodes.length === 0
-        || changedNodes.some((node) => !isIgnoredMutationNode(node)));
+    return changedNodes.length === 0 || changedNodes.some((node) => !isIgnoredMutationNode(node));
 }
 let activeHistoryPatch;
 function subscribeHistoryChanges(subscriber) {
@@ -223,12 +218,12 @@ function validateInput(definition, input) {
     }
 }
 export function browserToolsAvailable() {
-    return (typeof window !== "undefined"
-        && typeof document !== "undefined"
-        && typeof Worker !== "undefined"
-        && typeof Blob !== "undefined"
-        && typeof URL?.createObjectURL === "function"
-        && typeof MutationObserver !== "undefined");
+    return (typeof window !== "undefined" &&
+        typeof document !== "undefined" &&
+        typeof Worker !== "undefined" &&
+        typeof Blob !== "undefined" &&
+        typeof URL?.createObjectURL === "function" &&
+        typeof MutationObserver !== "undefined");
 }
 export function createBrowserToolset(options = {}) {
     if (!browserToolsAvailable()) {
@@ -236,19 +231,14 @@ export function createBrowserToolset(options = {}) {
     }
     const limits = {
         ...DEFAULT_EXECUTION_LIMITS,
-        maxDurationMs: options.limits?.maxDurationMs
-            ?? DEFAULT_EXECUTION_LIMITS.maxDurationMs,
-        maxResultChars: options.limits?.maxResultChars
-            ?? DEFAULT_EXECUTION_LIMITS.maxResultChars,
-        singleActionTimeoutMs: options.limits?.singleActionTimeoutMs
-            ?? DEFAULT_EXECUTION_LIMITS.singleActionTimeoutMs,
+        maxDurationMs: options.limits?.maxDurationMs ?? DEFAULT_EXECUTION_LIMITS.maxDurationMs,
+        maxResultChars: options.limits?.maxResultChars ?? DEFAULT_EXECUTION_LIMITS.maxResultChars,
+        singleActionTimeoutMs: options.limits?.singleActionTimeoutMs ?? DEFAULT_EXECUTION_LIMITS.singleActionTimeoutMs,
     };
     const snapshotLimits = {
         ...DEFAULT_SNAPSHOT_LIMITS,
-        viewportMaxChars: options.snapshotLimits?.viewportMaxChars
-            ?? DEFAULT_SNAPSHOT_LIMITS.viewportMaxChars,
-        fullMaxChars: options.snapshotLimits?.fullMaxChars
-            ?? DEFAULT_SNAPSHOT_LIMITS.fullMaxChars,
+        viewportMaxChars: options.snapshotLimits?.viewportMaxChars ?? DEFAULT_SNAPSHOT_LIMITS.viewportMaxChars,
+        fullMaxChars: options.snapshotLimits?.fullMaxChars ?? DEFAULT_SNAPSHOT_LIMITS.fullMaxChars,
     };
     const feedback = new ActionFeedback();
     const controller = new PageController(limits, feedback);
@@ -285,7 +275,8 @@ export function createBrowserToolset(options = {}) {
             const scope = normalizedInput.scope;
             const deadline = performance.now() + limits.maxDurationMs;
             signal.throwIfAborted();
-            return (await observe(scope, { deadline, signal }, pageDecision ? "actions" : "text")).snapshot;
+            return (await observe(scope, { deadline, signal }, pageDecision ? "actions" : "text"))
+                .snapshot;
         },
     };
     const executeObserved = async (signal, execute, cancel, mode = "code", onFeedback, assertActive) => {
@@ -316,7 +307,8 @@ export function createBrowserToolset(options = {}) {
             }
             result = await measurePagePhase("execution", () => execute(activeRegistry, workerBudget));
             signal.throwIfAborted();
-            if (result.error && ["EXECUTION_TIMEOUT", "WORKER_ERROR", "EXECUTION_OUTCOME_UNKNOWN"].includes(result.error.code)) {
+            if (result.error &&
+                ["EXECUTION_TIMEOUT", "WORKER_ERROR", "EXECUTION_OUTCOME_UNKNOWN"].includes(result.error.code)) {
                 result.error.code = "EXECUTION_OUTCOME_UNKNOWN";
             }
             if (!result.ok && result.completedActions.length === 0) {
@@ -325,9 +317,7 @@ export function createBrowserToolset(options = {}) {
             try {
                 const settled = await measurePagePhase("settle", () => tracker.waitForSettle({ deadline, signal }));
                 signal.throwIfAborted();
-                if (settled.timedOut
-                    && settled.urlChanged
-                    && !settled.mutationObservedAfterUrlChange) {
+                if (settled.timedOut && settled.urlChanged && !settled.mutationObservedAfterUrlChange) {
                     result.snapshotUnavailable = true;
                     return expireRefs(result);
                 }
@@ -382,7 +372,9 @@ export function createBrowserToolset(options = {}) {
             if (!bundle || bundle.snapshot.snapshotId !== input.snapshotId)
                 return undefined;
             const selected = bundle.actions?.get(input.actionId);
-            if (!selected || selected.command.method === "scrollBy" || selected.command.method === "waitForTimeout")
+            if (!selected ||
+                selected.command.method === "scrollBy" ||
+                selected.command.method === "waitForTimeout")
                 return undefined;
             const target = selected.command.target;
             const element = target?.type === "ref" ? bundle.registry.refs.get(target.ref)?.element : undefined;
@@ -396,14 +388,21 @@ export function createBrowserToolset(options = {}) {
             const selected = bundle.actions.get(input.actionId);
             if (!selected)
                 throw new AgentToolError("INVALID_INPUT", "Action is not a candidate of this observation.");
-            if (selected.command.method === "fill" ? typeof input.text !== "string" || !input.text.trim() : input.text !== undefined) {
+            if (selected.command.method === "fill"
+                ? typeof input.text !== "string" || !input.text.trim()
+                : input.text !== undefined) {
                 throw new AgentToolError("INVALID_INPUT", "Only fill actions require a non-empty text value.");
             }
             if (selected.command.method === "selectOption") {
                 const target = selected.command.target;
                 const element = target.type === "ref" ? bundle.registry.refs.get(target.ref)?.element : undefined;
-                const options = element instanceof HTMLSelectElement ? [...element.options].filter((option) => option.value === selected.command.args[0]) : [];
-                if (options.length !== 1 || options[0].disabled || options[0].closest("optgroup[disabled]") || options[0].label.slice(0, 500) !== selected.candidate.option) {
+                const options = element instanceof HTMLSelectElement
+                    ? [...element.options].filter((option) => option.value === selected.command.args[0])
+                    : [];
+                if (options.length !== 1 ||
+                    options[0].disabled ||
+                    options[0].closest("optgroup[disabled]") ||
+                    options[0].label.slice(0, 500) !== selected.candidate.option) {
                     throw new AgentToolError("INVALID_INPUT", "The observed option changed or is no longer available. Observe again.");
                 }
             }
@@ -413,7 +412,9 @@ export function createBrowserToolset(options = {}) {
                 let timer;
                 try {
                     const command = {
-                        ...selected.command, executionId, commandSeq: 1,
+                        ...selected.command,
+                        executionId,
+                        commandSeq: 1,
                         args: selected.command.method === "fill" ? [input.text] : selected.command.args,
                     };
                     const response = await Promise.race([
@@ -421,7 +422,8 @@ export function createBrowserToolset(options = {}) {
                             if (selected.optionElement) {
                                 const target = selected.command.target;
                                 const element = target.type === "ref" ? registry.refs.get(target.ref)?.element : undefined;
-                                if (!selected.optionElement.isConnected || selected.optionElement.closest("select") !== element) {
+                                if (!selected.optionElement.isConnected ||
+                                    selected.optionElement.closest("select") !== element) {
                                     throw new AgentToolError("INVALID_INPUT", "The observed option was replaced. Observe again.");
                                 }
                             }
@@ -434,7 +436,12 @@ export function createBrowserToolset(options = {}) {
                         }),
                     ]);
                     const receipt = controller.completeExecution(executionId);
-                    return { executionId, ...receipt, ok: response.ok, ...(response.error ? { error: response.error } : {}) };
+                    return {
+                        executionId,
+                        ...receipt,
+                        ok: response.ok,
+                        ...(response.error ? { error: response.error } : {}),
+                    };
                 }
                 finally {
                     clearTimeout(timer);

package/dist/browser/types.d.ts

@@ -1,6 +1,6 @@
 import type { ObservedAction } from "./actions.js";
 import type { PageSnapshot } from "../shared/page-protocol.js";
-export type { SnapshotScope, SnapshotFormat, SemanticState, PageActionCandidate, PageSnapshot } from "../shared/page-protocol.js";
+export type { SnapshotScope, SnapshotFormat, SemanticState, PageActionCandidate, PageSnapshot, } from "../shared/page-protocol.js";
 export interface RefTarget {
     element: Element;
     identity: string;

package/dist/definition.d.ts

@@ -8,7 +8,5 @@ export declare function isValidAgentContextName(name: string): boolean;
 export declare function defineAgentTool<TResult = unknown>(metadata: AgentToolMetadataInput): AgentToolDefinition<Record<string, never>, TResult>;
 export declare function defineAgentTool<TInput = never, TResult = unknown, const TSchema extends AgentToolInputSchema = AgentToolInputSchema>(metadata: AgentToolMetadataInput & {
     inputSchema: TSchema;
-}): AgentToolDefinition<[
-    TInput
-] extends [never] ? InferJsonSchema<TSchema> : TInput, TResult>;
+}): AgentToolDefinition<[TInput] extends [never] ? InferJsonSchema<TSchema> : TInput, TResult>;
 export {};

package/dist/definition.js

@@ -6,7 +6,8 @@ const emptyInputSchema = Object.freeze({
 });
 const agentNamePattern = /^[A-Za-z0-9_-]{1,64}$/;
 const reservedContextNames = new Set([
-    "nxf_applyAction", "nxf_delegatePageTask",
+    "nxf_applyAction",
+    "nxf_delegatePageTask",
     "nxf_callAppTool",
     "nxf_finish",
     "nxf_getSnapshot",

package/dist/internal-react.d.ts

@@ -3,7 +3,7 @@ import { type ToolRuntime, type InternalToolRuntime } from "./runtime.js";
 export interface InternalToolRuntimeHostProps {
     children: ReactNode;
 }
-export declare function InternalToolRuntimeHost({ children, }: InternalToolRuntimeHostProps): ReactElement;
+export declare function InternalToolRuntimeHost({ children }: InternalToolRuntimeHostProps): ReactElement;
 export declare function InternalToolRuntimeScope({ children, runtime, }: {
     children: ReactNode;
     runtime: ToolRuntime;

package/dist/internal-react.js

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { createContext, useContext, useMemo, } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { createToolRuntime, getInternalToolRuntime, } from "./runtime.js";
 const InternalToolRuntimeContext = createContext(null);
-export function InternalToolRuntimeHost({ children, }) {
+export function InternalToolRuntimeHost({ children }) {
     const runtime = useMemo(() => createToolRuntime(), []);
-    return (React.createElement(InternalToolRuntimeScope, { runtime: runtime }, children));
+    return React.createElement(InternalToolRuntimeScope, { runtime: runtime }, children);
 }
 export function InternalToolRuntimeScope({ children, runtime, }) {
     const internalRuntime = getInternalToolRuntime(runtime);

package/dist/operation-lock.js

@@ -30,7 +30,42 @@ export function lockOperationSurface(surface, redirectFocus) {
         event.stopImmediatePropagation();
     };
     // Wheel and touch defaults are blocked here: React delegates them passively.
-    const events = ["focus", "focusin", "mouseenter", "mouseleave", "pointerenter", "pointerleave", "pointerdown", "pointerup", "pointermove", "pointerover", "pointerout", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout", "click", "dblclick", "auxclick", "contextmenu", "keydown", "keyup", "beforeinput", "paste", "cut", "drop", "dragstart", "touchstart", "touchmove", "touchend", "touchcancel", "wheel", "submit", "reset"];
+    const events = [
+        "focus",
+        "focusin",
+        "mouseenter",
+        "mouseleave",
+        "pointerenter",
+        "pointerleave",
+        "pointerdown",
+        "pointerup",
+        "pointermove",
+        "pointerover",
+        "pointerout",
+        "mousedown",
+        "mouseup",
+        "mousemove",
+        "mouseover",
+        "mouseout",
+        "click",
+        "dblclick",
+        "auxclick",
+        "contextmenu",
+        "keydown",
+        "keyup",
+        "beforeinput",
+        "paste",
+        "cut",
+        "drop",
+        "dragstart",
+        "touchstart",
+        "touchmove",
+        "touchend",
+        "touchcancel",
+        "wheel",
+        "submit",
+        "reset",
+    ];
     lockedSurfaces.add(surface);
     surface.setAttribute("aria-busy", "true");
     for (const name of events)

package/dist/operation-runtime.js

@@ -4,17 +4,24 @@ export class OperationTracker {
     #unscoped = 0;
     #executions = new Map();
     #listeners = new Set();
-    #snapshot = Object.freeze({ operation: null, executions: Object.freeze([]) });
+    #snapshot = Object.freeze({
+        operation: null,
+        executions: Object.freeze([]),
+    });
     getSnapshot = () => this.#snapshot;
     subscribe = (listener) => {
         this.#listeners.add(listener);
-        return () => { this.#listeners.delete(listener); };
+        return () => {
+            this.#listeners.delete(listener);
+        };
     };
     begin(options = {}) {
         options.signal?.throwIfAborted();
         const previous = this.#operation;
-        const replacing = previous && previous.handle === options.replaceWaiting
-            && previous.snapshot.status === "waiting" && previous.pending === 0;
+        const replacing = previous &&
+            previous.handle === options.replaceWaiting &&
+            previous.snapshot.status === "waiting" &&
+            previous.pending === 0;
         if (this.#unscoped || (previous && !replacing)) {
             throw new AgentToolError("OPERATION_BUSY", "The Runtime already has an operation or outstanding tool calls.");
         }
@@ -23,11 +30,22 @@ export class OperationTracker {
             previous.resolveEnd();
         }
         let resolveEnd;
-        const endPromise = new Promise((resolve) => { resolveEnd = resolve; });
+        const endPromise = new Promise((resolve) => {
+            resolveEnd = resolve;
+        });
         const id = globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
         const operation = {
-            snapshot: Object.freeze({ id, source: options.source ?? "host", status: "running", hasExecuted: false, canCancel: Boolean(options.onCancel), ...(options.taskProgress ? { taskProgress: Object.freeze(options.taskProgress) } : {}) }),
-            handle: undefined, pending: 0, resolveEnd,
+            snapshot: Object.freeze({
+                id,
+                source: options.source ?? "host",
+                status: "running",
+                hasExecuted: false,
+                canCancel: Boolean(options.onCancel),
+                ...(options.taskProgress ? { taskProgress: Object.freeze(options.taskProgress) } : {}),
+            }),
+            handle: undefined,
+            pending: 0,
+            resolveEnd,
             ...(options.onCancel ? { onCancel: options.onCancel } : {}),
             removeAbort: () => options.signal?.removeEventListener("abort", onAbort),
         };
@@ -42,7 +60,11 @@ export class OperationTracker {
                 if (this.#operation !== operation || operation.snapshot.status === "ending")
                     return endPromise;
                 operation.removeAbort();
-                operation.snapshot = Object.freeze({ ...operation.snapshot, status: "ending", outcome: endOptions?.outcome ?? "completed" });
+                operation.snapshot = Object.freeze({
+                    ...operation.snapshot,
+                    status: "ending",
+                    outcome: endOptions?.outcome ?? "completed",
+                });
                 this.#publish();
                 if (this.#finish(operation))
                     this.#publish();
@@ -77,8 +99,11 @@ export class OperationTracker {
     }
     requestCancel(id) {
         const operation = this.#operation;
-        if (!operation || operation.snapshot.id !== id || !operation.onCancel
-            || operation.snapshot.status === "ending" || operation.snapshot.status === "cancelling")
+        if (!operation ||
+            operation.snapshot.id !== id ||
+            !operation.onCancel ||
+            operation.snapshot.status === "ending" ||
+            operation.snapshot.status === "cancelling")
             return;
         const previous = operation.snapshot.status;
         this.#update(operation, { status: "cancelling" });
@@ -123,7 +148,9 @@ export class OperationTracker {
         if (event.status === "running") {
             this.#executions.set(event.id, event);
             const operation = this.#operation;
-            if (operation && event.operationId === operation.snapshot.id && !operation.snapshot.hasExecuted) {
+            if (operation &&
+                event.operationId === operation.snapshot.id &&
+                !operation.snapshot.hasExecuted) {
                 operation.snapshot = Object.freeze({ ...operation.snapshot, hasExecuted: true });
             }
         }
@@ -132,7 +159,9 @@ export class OperationTracker {
         this.#publish();
     }
     #finish(operation) {
-        if (operation.pending || operation.snapshot.status !== "ending" || this.#operation !== operation)
+        if (operation.pending ||
+            operation.snapshot.status !== "ending" ||
+            this.#operation !== operation)
             return false;
         this.#operation = undefined;
         operation.resolveEnd();

package/dist/operation-surface.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { flushSync } from "react-dom";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useRef, useState, } from "react";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
 import { PageCommandError } from "./browser/locator.js";
 import { getInternalToolRuntime } from "./runtime.js";
@@ -9,7 +9,8 @@ import { isAgentActivation } from "./browser/focus.js";
 import { OperationOverlayView } from "./operation-view.js";
 const BROWSER_TOOL_NAMES = new Set(["nxf_getSnapshot", "nxf_executeAction", "nxf_applyAction"]);
 const belongsToOperation = (event, operation) => !operation || event.operationId === operation.id;
-const canPresentInOperation = (event, operation) => belongsToOperation(event, operation) && (!operation || operation.status === "running" || operation.status === "ending");
+const canPresentInOperation = (event, operation) => belongsToOperation(event, operation) &&
+    (!operation || operation.status === "running" || operation.status === "ending");
 const surfaces = new WeakSet();
 export function AgentOperationSurface(props) {
     const element = useRef(null);
@@ -21,28 +22,34 @@ export function AgentOperationSurface(props) {
         if (surfaces.has(props.toolRuntime))
             throw new Error("Only one AgentOperationSurface is supported per Runtime.");
         surfaces.add(props.toolRuntime);
-        return () => { surfaces.delete(props.toolRuntime); };
+        return () => {
+            surfaces.delete(props.toolRuntime);
+        };
     }, [props.toolRuntime]);
     const blockUserInput = useCallback((event) => {
         if ((event.type === "submit" || event.type === "reset") && isAgentActivation())
             return;
-        if (!element.current || !isOperationSurfaceLocked(element.current) || !event.nativeEvent.isTrusted)
+        if (!element.current ||
+            !isOperationSurfaceLocked(element.current) ||
+            !event.nativeEvent.isTrusted)
             return;
         event.preventDefault();
         event.stopPropagation();
     }, []);
     const blockPassiveUserInput = useCallback((event) => {
-        if (!element.current || !isOperationSurfaceLocked(element.current) || !event.nativeEvent.isTrusted)
+        if (!element.current ||
+            !isOperationSurfaceLocked(element.current) ||
+            !event.nativeEvent.isTrusted)
             return;
         // Stop React's capture dispatch, but let the native event reach our non-passive
         // surface listener. React's passive root listener cannot prevent scrolling.
         event.isPropagationStopped = () => true;
     }, []);
-    return React.createElement(React.Fragment, null,
+    return (React.createElement(React.Fragment, null,
         React.createElement("div", { ref: element, className: "nexface-operation-surface", onClickCapture: blockUserInput, onDoubleClickCapture: blockUserInput, onAuxClickCapture: blockUserInput, onPointerDownCapture: blockUserInput, onPointerUpCapture: blockUserInput, onPointerMoveCapture: blockUserInput, onPointerOverCapture: blockUserInput, onPointerOutCapture: blockUserInput, onMouseDownCapture: blockUserInput, onMouseUpCapture: blockUserInput, onContextMenuCapture: blockUserInput, onMouseMoveCapture: blockUserInput, onMouseOverCapture: blockUserInput, onMouseOutCapture: blockUserInput, onWheelCapture: blockPassiveUserInput, onTouchStartCapture: blockPassiveUserInput, onTouchMoveCapture: blockPassiveUserInput, onTouchEndCapture: blockUserInput, onTouchCancelCapture: blockUserInput, onKeyDownCapture: blockUserInput, onKeyUpCapture: blockUserInput, onKeyPressCapture: blockUserInput, onBeforeInputCapture: blockUserInput, onPasteCapture: blockUserInput, onCutCapture: blockUserInput, onDropCapture: blockUserInput, onDragStartCapture: blockUserInput, onSubmitCapture: blockUserInput, onResetCapture: blockUserInput }, props.children),
-        React.createElement(OperationSurfaceContent, { ...props, element: element }));
+        React.createElement(OperationSurfaceContent, { ...props, element: element })));
 }
-function OperationSurfaceContent({ toolRuntime, element }) {
+function OperationSurfaceContent({ toolRuntime, element, }) {
     const runtime = getInternalToolRuntime(toolRuntime);
     const activity = useSyncExternalStore(runtime.subscribeActivity, runtime.getActivitySnapshot, runtime.getActivitySnapshot);
     const cycle = activity.operation;
@@ -58,15 +65,24 @@ function OperationSurfaceContent({ toolRuntime, element }) {
     useLayoutEffect(() => runtime.setPageActionFeedback((event, feedback, signal) => {
         const operation = runtime.getActivitySnapshot().operation;
         if (signal?.aborted || !canPresentInOperation(event, operation))
-            throw new PageCommandError({ code: "EXECUTION_CANCELLED", message: "Page action presentation was interrupted." });
+            throw new PageCommandError({
+                code: "EXECUTION_CANCELLED",
+                message: "Page action presentation was interrupted.",
+            });
         const target = feedback.target;
-        if (!feedback.effect || (feedback.effect === "action" && (!target?.isConnected || !element.current?.contains(target)))) {
+        if (!feedback.effect ||
+            (feedback.effect === "action" &&
+                (!target?.isConnected || !element.current?.contains(target)))) {
             setVisual(undefined);
             return;
         }
         const next = {
-            id: crypto.randomUUID(), effect: feedback.effect, label: label(event),
-            centered: feedback.effect === "read", persistentCursor: true, requiresTarget: feedback.effect === "action",
+            id: crypto.randomUUID(),
+            effect: feedback.effect,
+            label: label(event),
+            centered: feedback.effect === "read",
+            persistentCursor: true,
+            requiresTarget: feedback.effect === "action",
             ...(target ? { target } : {}),
         };
         if (feedback.effect !== "action") {
@@ -98,32 +114,61 @@ function OperationSurfaceContent({ toolRuntime, element }) {
             const page = BROWSER_TOOL_NAMES.has(event.name);
             if (canDisplay && event.status === "running") {
                 if (page)
-                    setVisual(event.name === "nxf_getSnapshot" ? { event, feedback: {
-                            id: event.id, effect: "read", label: label(event), centered: true,
-                        } } : undefined);
+                    setVisual(event.name === "nxf_getSnapshot"
+                        ? {
+                            event,
+                            feedback: {
+                                id: event.id,
+                                effect: "read",
+                                label: label(event),
+                                centered: true,
+                            },
+                        }
+                        : undefined);
                 else {
-                    const target = event.tool.definition.effect === "navigate" ? element.current : runtime.resolveTarget(event.tool, event.input);
+                    const target = event.tool.definition.effect === "navigate"
+                        ? element.current
+                        : runtime.resolveTarget(event.tool, event.input);
                     if (target?.isConnected && element.current?.contains(target)) {
                         const rect = target.getBoundingClientRect();
-                        setVisual({ event, feedback: { id: event.id, effect: event.tool.definition.effect ?? "action", label: label(event),
-                                resolveTarget: () => event.tool.definition.effect === "navigate" ? element.current ?? undefined : runtime.resolveTarget(event.tool, event.input),
-                                position: { left: rect.left + rect.width / 2, top: rect.top + rect.height / 2 } } });
+                        setVisual({
+                            event,
+                            feedback: {
+                                id: event.id,
+                                effect: event.tool.definition.effect ?? "action",
+                                label: label(event),
+                                resolveTarget: () => event.tool.definition.effect === "navigate"
+                                    ? (element.current ?? undefined)
+                                    : runtime.resolveTarget(event.tool, event.input),
+                                position: { left: rect.left + rect.width / 2, top: rect.top + rect.height / 2 },
+                            },
+                        });
                     }
                 }
             }
             else if (canDisplay)
                 setVisual((current) => current?.event.id === event.id && current.event.operationId === event.operationId
-                    ? page ? undefined : { ...current, event } : current);
+                    ? page
+                        ? undefined
+                        : { ...current, event }
+                    : current);
             if (page && !operation && event.status === "error")
                 setOutcome({ id: scope, status: event.cancelled ? "cancelled" : "failed" });
             setHistory((current) => {
-                if (!belongsToOperation(event, operation) || (event.status !== "running" && current.scope !== scope))
+                if (!belongsToOperation(event, operation) ||
+                    (event.status !== "running" && current.scope !== scope))
                     return current;
                 const entries = current.scope === scope ? current.entries : [];
-                const entry = { toolCallId: event.id,
-                    progressLabel: `${event.progressLabel || "正在处理你的请求"} · ${event.cancelled ? "已取消" : event.status === "running" ? "执行中" : event.status === "success" ? "已完成" : "失败"}` };
-                return { scope, entries: entries.some((item) => item.toolCallId === event.id)
-                        ? entries.map((item) => item.toolCallId === event.id ? entry : item) : [...entries, entry] };
+                const entry = {
+                    toolCallId: event.id,
+                    progressLabel: `${event.progressLabel || "正在处理你的请求"} · ${event.cancelled ? "已取消" : event.status === "running" ? "执行中" : event.status === "success" ? "已完成" : "失败"}`,
+                };
+                return {
+                    scope,
+                    entries: entries.some((item) => item.toolCallId === event.id)
+                        ? entries.map((item) => (item.toolCallId === event.id ? entry : item))
+                        : [...entries, entry],
+                };
             });
         };
         const unsubscribe = toolRuntime.on("toolexecution", onExecution);
@@ -136,24 +181,57 @@ function OperationSurfaceContent({ toolRuntime, element }) {
     const waiting = cycle?.status === "waiting" && !executing;
     const running = executing || (activated && cycle?.status !== "waiting");
     const stopping = cycle?.status === "cancelling";
-    useLayoutEffect(() => { if (!running || waiting)
-        setVisual(undefined); }, [running, waiting]);
+    useLayoutEffect(() => {
+        if (!running || waiting)
+            setVisual(undefined);
+    }, [running, waiting]);
     const serverExecuting = cycle?.taskProgress?.phase === "tool";
     const visualExecuting = Boolean(visual && activity.executions.some((event) => event.id === visual.event.id));
-    const currentVisual = !stopping && !waiting && visual
-        && (!serverExecuting || (BROWSER_TOOL_NAMES.has(visual.event.name) && visualExecuting))
-        && canPresentInOperation(visual.event, cycle) && (cycle || visualExecuting) ? visual : undefined;
+    const currentVisual = !stopping &&
+        !waiting &&
+        visual &&
+        (!serverExecuting || (BROWSER_TOOL_NAMES.has(visual.event.name) && visualExecuting)) &&
+        canPresentInOperation(visual.event, cycle) &&
+        (cycle || visualExecuting)
+        ? visual
+        : undefined;
     const browserExecution = activity.executions.find((event) => BROWSER_TOOL_NAMES.has(event.name));
-    const progressLabel = currentVisual?.feedback.label ?? (waiting ? "等待你完成操作" : stopping ? "正在终止"
-        : browserExecution ? browserExecution.progressLabel || "正在浏览网页"
-            : cycle?.taskProgress?.phase === "tool" ? cycle.taskProgress.progressLabel || "正在执行工具"
-                : cycle?.taskProgress ? "正在处理" : "正在处理你的请求");
-    const operation = { progressLabel, status: currentVisual
-            ? currentVisual.event.status === "running" ? "running" : currentVisual.event.status === "success" ? "completed" : "failed"
-            : running || waiting ? "running" : outcome?.id === history.scope ? outcome.status : "completed" };
-    const feedback = currentVisual?.feedback ?? (serverExecuting && running && !waiting && !stopping
-        ? { id: cycle.taskProgress.toolCallId, effect: "read", label: progressLabel, centered: true } : undefined);
+    const progressLabel = currentVisual?.feedback.label ??
+        (waiting
+            ? "等待你完成操作"
+            : stopping
+                ? "正在终止"
+                : browserExecution
+                    ? browserExecution.progressLabel || "正在浏览网页"
+                    : cycle?.taskProgress?.phase === "tool"
+                        ? cycle.taskProgress.progressLabel || "正在执行工具"
+                        : cycle?.taskProgress
+                            ? "正在处理"
+                            : "正在处理你的请求");
+    const operation = {
+        progressLabel,
+        status: currentVisual
+            ? currentVisual.event.status === "running"
+                ? "running"
+                : currentVisual.event.status === "success"
+                    ? "completed"
+                    : "failed"
+            : running || waiting
+                ? "running"
+                : outcome?.id === history.scope
+                    ? outcome.status
+                    : "completed",
+    };
+    const feedback = currentVisual?.feedback ??
+        (serverExecuting && running && !waiting && !stopping
+            ? {
+                id: cycle.taskProgress.toolCallId,
+                effect: "read",
+                label: progressLabel,
+                centered: true,
+            }
+            : undefined);
     const resolveSurface = useCallback(() => element.current ?? undefined, [element]);
     const entries = !cycle || history.scope === cycle.id ? history.entries : [];
-    return activated || executing || entries.length ? React.createElement(OperationOverlayView, { key: cycle?.id ?? history.scope, operation: operation, progressHistory: entries, running: running, humanHasControl: waiting, cancelling: stopping, ...(feedback ? { feedback } : {}), ...(cycle?.canCancel ? { onCancel: () => runtime.requestOperationCancel(cycle.id) } : {}), resolveSurface: resolveSurface }) : null;
+    return activated || executing || entries.length ? (React.createElement(OperationOverlayView, { key: cycle?.id ?? history.scope, operation: operation, progressHistory: entries, running: running, humanHasControl: waiting, cancelling: stopping, ...(feedback ? { feedback } : {}), ...(cycle?.canCancel ? { onCancel: () => runtime.requestOperationCancel(cycle.id) } : {}), resolveSurface: resolveSurface })) : null;
 }

package/dist/operation-view.d.ts

@@ -10,4 +10,4 @@ export interface OperationOverlayViewProps {
     onCancel?(): void;
     resolveSurface?(): HTMLElement | undefined;
 }
-export declare function OperationOverlayView({ operation, feedback, progressHistory, running, humanHasControl, cancelling, onCancel: cancel, resolveSurface }: OperationOverlayViewProps): React.ReactPortal | null;
+export declare function OperationOverlayView({ operation, feedback, progressHistory, running, humanHasControl, cancelling, onCancel: cancel, resolveSurface, }: OperationOverlayViewProps): React.ReactPortal | null;