misoai-web 1.6.0 → 1.6.2

package/dist/lib/index.js

@@ -349,8 +349,8 @@ var ScriptPlayer = class {
 var import_js_yaml = __toESM(require("js-yaml"));
 
 // src/yaml/utils.ts
-var import_utils2 = require("misoai-shared/utils");
 var import_js_yaml2 = __toESM(require("js-yaml"));
+var import_utils2 = require("misoai-shared/utils");
 function interpolateEnvVars(content) {
   return content.replace(/\$\{([^}]+)\}/g, (_, envVar) => {
     const value = process.env[envVar.trim()];
@@ -496,13 +496,13 @@ function paramStr(task) {
 }
 
 // src/common/utils.ts
+var import_dayjs = __toESM(require("dayjs"));
 var import_ai_model = require("misoai-core/ai-model");
 var import_utils3 = require("misoai-core/utils");
 var import_env = require("misoai-shared/env");
 var import_extractor = require("misoai-shared/extractor");
 var import_img = require("misoai-shared/img");
 var import_utils4 = require("misoai-shared/utils");
-var import_dayjs = __toESM(require("dayjs"));
 
 // src/web-element.ts
 var WebElementInfo = class {
@@ -671,8 +671,12 @@ var WorkflowMemory = class {
     const workflow = this.workflows.get(workflowId) || this.createEmptyWorkflowData(workflowId);
     workflow.memory = [...memory];
     workflow.metadata.totalSteps = workflow.steps.length;
-    workflow.metadata.completedSteps = workflow.steps.filter((s) => s.status === "completed").length;
-    workflow.metadata.failedSteps = workflow.steps.filter((s) => s.status === "failed").length;
+    workflow.metadata.completedSteps = workflow.steps.filter(
+      (s) => s.status === "completed"
+    ).length;
+    workflow.metadata.failedSteps = workflow.steps.filter(
+      (s) => s.status === "failed"
+    ).length;
     this.workflows.set(workflowId, workflow);
     this.enforceRetentionPolicy();
   }
@@ -683,7 +687,9 @@ var WorkflowMemory = class {
     const workflow = this.workflows.get(workflowId) || this.createEmptyWorkflowData(workflowId);
     workflow.context = { ...workflow.context, ...context };
     if (context.currentStep) {
-      const existingStep = workflow.steps.find((s) => s.stepName === context.currentStep);
+      const existingStep = workflow.steps.find(
+        (s) => s.stepName === context.currentStep
+      );
       if (!existingStep) {
         workflow.steps.push({
           stepId: `step_${workflow.steps.length + 1}`,
@@ -728,7 +734,9 @@ var WorkflowMemory = class {
   enforceRetentionPolicy() {
     const maxWorkflows = 10;
     if (this.workflows.size > maxWorkflows) {
-      const sortedWorkflows = Array.from(this.workflows.entries()).sort(([, a], [, b]) => (b.metadata.endTime || b.metadata.startTime) - (a.metadata.endTime || a.metadata.startTime));
+      const sortedWorkflows = Array.from(this.workflows.entries()).sort(
+        ([, a], [, b]) => (b.metadata.endTime || b.metadata.startTime) - (a.metadata.endTime || a.metadata.startTime)
+      );
       const toDelete = sortedWorkflows.slice(maxWorkflows);
       toDelete.forEach(([workflowId]) => this.workflows.delete(workflowId));
     }
@@ -1295,6 +1303,7 @@ var PageTaskExecutor = class {
             actions: [],
             more_actions_needed_by_instruction: false,
             log: "",
+            summary: "Loaded YAML workflow configuration",
             yamlString
           },
           cache: {
@@ -1396,6 +1405,7 @@ var PageTaskExecutor = class {
             actions: finalActions,
             more_actions_needed_by_instruction,
             log: log2,
+            summary: planResult.summary || "Generated action plan from user instruction",
             yamlFlow: planResult.yamlFlow
           },
           cache: {
@@ -1451,6 +1461,7 @@ var PageTaskExecutor = class {
             actionType: actions[0].type,
             more_actions_needed_by_instruction: true,
             log: "",
+            summary: action_summary || "Generated VLM action plan",
             yamlFlow: planResult.yamlFlow
           },
           cache: {
@@ -1467,7 +1478,9 @@ var PageTaskExecutor = class {
    */
   getPersistentExecutor() {
     if (!this.persistentExecutor || this.persistentExecutor.status === "error") {
-      const previousMemory = this.workflowMemory.getWorkflowMemory(this.sessionContext.workflowId);
+      const previousMemory = this.workflowMemory.getWorkflowMemory(
+        this.sessionContext.workflowId
+      );
       this.persistentExecutor = new import_misoai_core.Executor("Persistent Task Executor", {
         onTaskStart: this.onTaskStartCallback,
         initialMemory: previousMemory
@@ -1496,7 +1509,9 @@ var PageTaskExecutor = class {
     if (this.persistentExecutor) {
       this.persistentExecutor.clearMemory();
     }
-    this.workflowMemory.clearWorkflow(this.sessionContext.workflowId || "default");
+    this.workflowMemory.clearWorkflow(
+      this.sessionContext.workflowId || "default"
+    );
   }
   /**
    * Mevcut hafızayı döndürür
@@ -1508,7 +1523,9 @@ var PageTaskExecutor = class {
    * İş akışı hafızasını döndürür
    */
   getWorkflowMemory() {
-    return this.workflowMemory.getWorkflowData(this.sessionContext.workflowId || "default");
+    return this.workflowMemory.getWorkflowData(
+      this.sessionContext.workflowId || "default"
+    );
   }
   /**
    * Hafıza istatistiklerini döndürür
@@ -1516,7 +1533,13 @@ var PageTaskExecutor = class {
   getMemoryStats() {
     return this.persistentExecutor?.getMemoryStats() || {
       totalItems: 0,
-      analytics: { totalTasks: 0, memoryHits: 0, memoryMisses: 0, averageMemorySize: 0, memoryEffectiveness: 0 },
+      analytics: {
+        totalTasks: 0,
+        memoryHits: 0,
+        memoryMisses: 0,
+        averageMemorySize: 0,
+        memoryEffectiveness: 0
+      },
       config: this.memoryConfig
     };
   }
@@ -1552,11 +1575,14 @@ var PageTaskExecutor = class {
     let taskExecutor;
     if (useMemory) {
       taskExecutor = this.getPersistentExecutor();
-      this.workflowMemory.updateWorkflowContext({
-        currentStep: title,
-        pageInfo: this.sessionContext.pageInfo,
-        timestamp: Date.now()
-      }, this.sessionContext.workflowId || "default");
+      this.workflowMemory.updateWorkflowContext(
+        {
+          currentStep: title,
+          pageInfo: this.sessionContext.pageInfo,
+          timestamp: Date.now()
+        },
+        this.sessionContext.workflowId || "default"
+      );
     } else {
       taskExecutor = new import_misoai_core.Executor(title, {
         onTaskStart: this.onTaskStartCallback
@@ -1922,14 +1948,19 @@ var PageTaskExecutor = class {
    */
   addToMemory(memoryItem) {
     if (!this.persistentExecutor || this.persistentExecutor.status === "error") {
-      const previousMemory = this.workflowMemory.getWorkflowMemory(this.sessionContext.workflowId);
+      const previousMemory = this.workflowMemory.getWorkflowMemory(
+        this.sessionContext.workflowId
+      );
       this.persistentExecutor = new import_misoai_core.Executor("Persistent Task Executor", {
         onTaskStart: this.onTaskStartCallback,
         initialMemory: previousMemory
       });
     }
     this.persistentExecutor.memoryStore?.add(memoryItem);
-    this.persistentExecutor.memoryAnalytics?.recordMemoryOperation("add", memoryItem);
+    this.persistentExecutor.memoryAnalytics?.recordMemoryOperation(
+      "add",
+      memoryItem
+    );
   }
 };
 
@@ -2018,14 +2049,14 @@ function buildPlans(type, locateParam, param) {
 var import_node_assert = __toESM(require("assert"));
 var import_node_fs2 = require("fs");
 var import_node_path2 = require("path");
+var import_js_yaml3 = __toESM(require("js-yaml"));
 var import_common2 = require("misoai-shared/common");
 var import_logger3 = require("misoai-shared/logger");
 var import_utils9 = require("misoai-shared/utils");
-var import_js_yaml3 = __toESM(require("js-yaml"));
 var import_semver = __toESM(require("semver"));
 
 // package.json
-var version = "1.6.0";
+var version = "1.6.2";
 
 // src/common/task-cache.ts
 var debug3 = (0, import_logger3.getDebug)("cache");
@@ -2320,22 +2351,28 @@ var PageAgent = class {
     const allThoughts = executor.tasks.filter((task) => task.thought).map((task) => task.thought);
     const allLocates = executor.tasks.filter((task) => task.locate).map((task) => task.locate);
     const allPlans = executor.tasks.filter((task) => task.param?.plans).map((task) => task.param?.plans);
-    const planningTasks = executor.tasks.filter((task) => task.type === "Planning");
-    const insightTasks = executor.tasks.filter((task) => task.type === "Insight");
+    const planningTasks = executor.tasks.filter(
+      (task) => task.type === "Planning"
+    );
+    const insightTasks = executor.tasks.filter(
+      (task) => task.type === "Insight"
+    );
     const actionTasks = executor.tasks.filter((task) => task.type === "Action");
     const planning = planningTasks.length > 0 ? {
       type: "Planning",
-      description: `Planning for task execution`,
+      description: "Planning for task execution",
       steps: planningTasks.map((task) => task.thought || "Planning step")
     } : void 0;
     const insight = insightTasks.length > 0 ? {
       type: "Insight",
-      description: `Insight for task execution`,
-      elements: insightTasks.map((task) => task.thought || "Insight element")
+      description: "Insight for task execution",
+      elements: insightTasks.map(
+        (task) => task.thought || "Insight element"
+      )
     } : void 0;
     const action = actionTasks.length > 0 ? {
       type: "Action",
-      description: `Action for task execution`,
+      description: "Action for task execution",
       result: lastTask?.output
     } : void 0;
     const actionDetails = executor.tasks.map((task) => ({
@@ -2669,7 +2706,10 @@ ${memoryContext}` : void 0;
     }
     const memoryContext = this.getMemoryAsContext();
     const assertionWithContext = currentUrl ? `For the page at URL "${currentUrl}", ${assertion}` : assertion;
-    const { output, executor } = await this.taskExecutor.assert(assertionWithContext, memoryContext);
+    const { output, executor } = await this.taskExecutor.assert(
+      assertionWithContext,
+      memoryContext
+    );
     const metadata = this.afterTaskRunning(executor, true);
     if (output && opt?.keepRawResponse) {
       return {
@@ -2708,7 +2748,10 @@ A complex CAPTCHA typically has one or more of these characteristics:
 Return only "complex" or "simple" based on your analysis.
 `;
         const complexityMsgs = [
-          { role: "system", content: "You are an AI assistant that analyzes screenshots to determine CAPTCHA complexity." },
+          {
+            role: "system",
+            content: "You are an AI assistant that analyzes screenshots to determine CAPTCHA complexity."
+          },
           {
             role: "user",
             content: [
@@ -2732,7 +2775,12 @@ Return only "complex" or "simple" based on your analysis.
         );
         const responseText = typeof complexityResult.content === "string" ? complexityResult.content.toLowerCase() : JSON.stringify(complexityResult.content).toLowerCase();
         shouldUseDeepThink = responseText.includes("complex");
-        debug4("CAPTCHA complexity analysis:", responseText, "Using deep think:", shouldUseDeepThink);
+        debug4(
+          "CAPTCHA complexity analysis:",
+          responseText,
+          "Using deep think:",
+          shouldUseDeepThink
+        );
       } catch (error) {
         debug4("Failed to analyze CAPTCHA complexity:", error);
       }
@@ -2749,7 +2797,9 @@ Return only "complex" or "simple" based on your analysis.
           await this.aiTap(action.target, { deepThink: shouldUseDeepThink });
         } else if (action.type === "input" && action.value) {
           if (action.target) {
-            await this.aiInput(action.value, action.target, { deepThink: shouldUseDeepThink });
+            await this.aiInput(action.value, action.target, {
+              deepThink: shouldUseDeepThink
+            });
           }
         } else if (action.type === "verify" && action.target) {
           await this.aiTap(action.target, { deepThink: shouldUseDeepThink });
@@ -2761,7 +2811,9 @@ Return only "complex" or "simple" based on your analysis.
           if (action.coordinates) {
             const x = action.coordinates[0];
             const y = action.coordinates[1];
-            await this.aiTap(`element at coordinates (${x}, ${y})`, { deepThink: shouldUseDeepThink });
+            await this.aiTap(`element at coordinates (${x}, ${y})`, {
+              deepThink: shouldUseDeepThink
+            });
           } else if (action.target) {
             await this.aiTap(action.target, { deepThink: shouldUseDeepThink });
           }
@@ -2913,25 +2965,27 @@ ${errors}`);
       const executionDump = {
         name: screenshotTitle,
         description: content,
-        tasks: [{
-          type: "Screenshot",
-          subType: "log",
-          status: "finished",
-          executor: null,
-          param: {
-            title: screenshotTitle,
-            content
-          },
-          output: {
-            screenshot
-          },
-          thought: `Logged screenshot: ${screenshotTitle}`,
-          timing: {
-            start: Date.now(),
-            end: Date.now(),
-            cost: 0
+        tasks: [
+          {
+            type: "Screenshot",
+            subType: "log",
+            status: "finished",
+            executor: null,
+            param: {
+              title: screenshotTitle,
+              content
+            },
+            output: {
+              screenshot
+            },
+            thought: `Logged screenshot: ${screenshotTitle}`,
+            timing: {
+              start: Date.now(),
+              end: Date.now(),
+              cost: 0
+            }
           }
-        }],
+        ],
         sdkVersion: "1.0.0",
         logTime: Date.now(),
         model_name: "screenshot"
@@ -2983,7 +3037,9 @@ ${errors}`);
         totalTasks: stats.analytics.totalTasks,
         memoryHits: stats.analytics.memoryHits,
         memoryMisses: stats.analytics.memoryMisses,
-        memoryEffectiveness: Math.round(stats.analytics.memoryEffectiveness * 100),
+        memoryEffectiveness: Math.round(
+          stats.analytics.memoryEffectiveness * 100
+        ),
         averageMemorySize: Math.round(stats.analytics.averageMemorySize * 100) / 100
       },
       config: stats.config,
@@ -3047,7 +3103,9 @@ ${errors}`);
   calculateSuccessRate(memory) {
     if (memory.length === 0)
       return 0;
-    const successCount = memory.filter((item) => item.metadata?.success !== false).length;
+    const successCount = memory.filter(
+      (item) => item.metadata?.success !== false
+    ).length;
     return Math.round(successCount / memory.length * 100);
   }
   calculateAverageExecutionTime(memory) {
@@ -3083,13 +3141,236 @@ var import_extractor2 = require("misoai-shared/extractor");
 var import_fs = require("misoai-shared/fs");
 var import_logger5 = require("misoai-shared/logger");
 var import_utils16 = require("misoai-shared/utils");
+
+// src/common/mouse-utils.ts
+function generateHumanMousePath(from, to, options = {}) {
+  const {
+    steps = 20,
+    easing = "easeInOut"
+  } = options;
+  if (steps <= 1) {
+    return [to];
+  }
+  const path = [];
+  const controlPoint1 = {
+    x: from.x + (to.x - from.x) * 0.25 + (Math.random() - 0.5) * 50,
+    y: from.y + (to.y - from.y) * 0.25 + (Math.random() - 0.5) * 50
+  };
+  const controlPoint2 = {
+    x: from.x + (to.x - from.x) * 0.75 + (Math.random() - 0.5) * 50,
+    y: from.y + (to.y - from.y) * 0.75 + (Math.random() - 0.5) * 50
+  };
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const easedT = applyEasing(t, easing);
+    const point = calculateBezierPoint(from, controlPoint1, controlPoint2, to, easedT);
+    path.push(point);
+  }
+  return path;
+}
+function calculateBezierPoint(p0, p1, p2, p3, t) {
+  const oneMinusT = 1 - t;
+  const oneMinusTSquared = oneMinusT * oneMinusT;
+  const oneMinusTCubed = oneMinusTSquared * oneMinusT;
+  const tSquared = t * t;
+  const tCubed = tSquared * t;
+  return {
+    x: oneMinusTCubed * p0.x + 3 * oneMinusTSquared * t * p1.x + 3 * oneMinusT * tSquared * p2.x + tCubed * p3.x,
+    y: oneMinusTCubed * p0.y + 3 * oneMinusTSquared * t * p1.y + 3 * oneMinusT * tSquared * p2.y + tCubed * p3.y
+  };
+}
+function applyEasing(t, easing) {
+  switch (easing) {
+    case "linear":
+      return t;
+    case "easeIn":
+      return t * t;
+    case "easeOut":
+      return 1 - (1 - t) * (1 - t);
+    case "easeInOut":
+      return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+    default:
+      return t;
+  }
+}
+function calculateStepDelay(totalDuration, currentStep, totalSteps) {
+  const baseDelay = totalDuration / totalSteps;
+  const variation = 0.3;
+  const randomFactor = 1 + (Math.random() - 0.5) * variation;
+  return Math.max(1, baseDelay * randomFactor);
+}
+
+// src/common/visual-feedback.ts
+function getMousePointerScript(x, y, options = {}) {
+  const {
+    pointerSize = 20,
+    pointerColor = "#ff4444",
+    trailLength = 5,
+    showTrail = true,
+    animationDuration = 200
+  } = options;
+  return `
+    (() => {
+      // Create or update mouse pointer
+      if (!window.misoaiMousePointer) {
+        const pointer = document.createElement('div');
+        pointer.id = 'misoai-mouse-pointer';
+        pointer.style.cssText = \`
+          position: fixed;
+          width: ${pointerSize}px;
+          height: ${pointerSize}px;
+          background: ${pointerColor};
+          border: 2px solid white;
+          border-radius: 50%;
+          pointer-events: none;
+          z-index: 999999;
+          box-shadow: 0 0 10px rgba(0,0,0,0.3);
+          transition: all ${animationDuration}ms ease-out;
+          transform: translate(-50%, -50%);
+        \`;
+        document.body.appendChild(pointer);
+        window.misoaiMousePointer = pointer;
+        
+        // Initialize trail array
+        window.misoaiMouseTrail = [];
+      }
+      
+      const pointer = window.misoaiMousePointer;
+      pointer.style.left = ${x}px;
+      pointer.style.top = ${y}px;
+      
+      ${showTrail ? getTrailScript(x, y, trailLength, pointerColor) : ""}
+      
+      // Auto-hide after 3 seconds of inactivity
+      clearTimeout(window.misoaiMouseTimeout);
+      pointer.style.opacity = '1';
+      window.misoaiMouseTimeout = setTimeout(() => {
+        if (pointer) pointer.style.opacity = '0.3';
+      }, 3000);
+    })();
+  `;
+}
+function getTrailScript(x, y, trailLength, color) {
+  return `
+    // Add current position to trail
+    window.misoaiMouseTrail.push({ x: ${x}, y: ${y}, timestamp: Date.now() });
+    
+    // Keep only recent trail points
+    if (window.misoaiMouseTrail.length > ${trailLength}) {
+      window.misoaiMouseTrail.shift();
+    }
+    
+    // Remove old trail elements
+    document.querySelectorAll('.misoai-mouse-trail').forEach(el => el.remove());
+    
+    // Create new trail elements
+    window.misoaiMouseTrail.forEach((point, index) => {
+      if (index === window.misoaiMouseTrail.length - 1) return; // Skip current position
+      
+      const trailElement = document.createElement('div');
+      trailElement.className = 'misoai-mouse-trail';
+      const opacity = (index + 1) / window.misoaiMouseTrail.length * 0.6;
+      const size = 8 + (index + 1) / window.misoaiMouseTrail.length * 8;
+      
+      trailElement.style.cssText = \`
+        position: fixed;
+        width: \${size}px;
+        height: \${size}px;
+        background: ${color};
+        border-radius: 50%;
+        pointer-events: none;
+        z-index: 999998;
+        opacity: \${opacity};
+        transform: translate(-50%, -50%);
+        left: \${point.x}px;
+        top: \${point.y}px;
+      \`;
+      
+      document.body.appendChild(trailElement);
+      
+      // Auto-remove trail element after animation
+      setTimeout(() => {
+        if (trailElement.parentNode) {
+          trailElement.parentNode.removeChild(trailElement);
+        }
+      }, 1000);
+    });
+  `;
+}
+function getClickAnimationScript(x, y) {
+  return `
+    (() => {
+      const clickRipple = document.createElement('div');
+      clickRipple.style.cssText = \`
+        position: fixed;
+        left: ${x}px;
+        top: ${y}px;
+        width: 0;
+        height: 0;
+        border: 2px solid #ff4444;
+        border-radius: 50%;
+        pointer-events: none;
+        z-index: 999999;
+        transform: translate(-50%, -50%);
+        animation: misoai-click-ripple 0.6s ease-out forwards;
+      \`;
+      
+      // Add CSS animation if not exists
+      if (!document.getElementById('misoai-click-styles')) {
+        const style = document.createElement('style');
+        style.id = 'misoai-click-styles';
+        style.textContent = \`
+          @keyframes misoai-click-ripple {
+            0% {
+              width: 0;
+              height: 0;
+              opacity: 1;
+            }
+            100% {
+              width: 40px;
+              height: 40px;
+              opacity: 0;
+            }
+          }
+        \`;
+        document.head.appendChild(style);
+      }
+      
+      document.body.appendChild(clickRipple);
+      
+      // Remove after animation
+      setTimeout(() => {
+        if (clickRipple.parentNode) {
+          clickRipple.parentNode.removeChild(clickRipple);
+        }
+      }, 600);
+    })();
+  `;
+}
+
+// src/puppeteer/base-page.ts
 var debugPage = (0, import_logger5.getDebug)("web:page");
 var Page = class {
   constructor(underlyingPage, pageType, opts) {
+    this.currentMousePosition = { x: 0, y: 0 };
+    this.mouseMovementOptions = {
+      steps: 15,
+      duration: 300,
+      easing: "easeInOut",
+      showVisualFeedback: true
+    };
+    this.visualFeedbackOptions = {
+      pointerSize: 16,
+      pointerColor: "#ff4444",
+      trailLength: 4,
+      showTrail: true,
+      animationDuration: 150
+    };
     this.everMoved = false;
     this.underlyingPage = underlyingPage;
     this.pageType = pageType;
     this.waitForNavigationTimeout = opts?.waitForNavigationTimeout ?? import_constants3.DEFAULT_WAIT_FOR_NAVIGATION_TIMEOUT;
+    this.initializeMousePosition();
   }
   async evaluate(pageFunction, arg) {
     let result;
@@ -3108,9 +3389,76 @@ var Page = class {
     debugPage("evaluate function end");
     return result;
   }
+  /**
+   * Initialize mouse position to center of viewport
+   */
+  async initializeMousePosition() {
+    try {
+      const size = await this.size();
+      this.currentMousePosition = {
+        x: Math.floor(size.width / 2),
+        y: Math.floor(size.height / 2)
+      };
+    } catch (error) {
+      this.currentMousePosition = { x: 400, y: 300 };
+    }
+  }
   async evaluateJavaScript(script) {
     return this.evaluate(script);
   }
+  /**
+   * Show visual feedback for mouse pointer
+   */
+  async showMousePointer(x, y) {
+    if (!this.mouseMovementOptions.showVisualFeedback)
+      return;
+    const script = getMousePointerScript(x, y, this.visualFeedbackOptions);
+    try {
+      await this.evaluate(script);
+    } catch (error) {
+      debugPage("Visual feedback error:", error);
+    }
+  }
+  /**
+   * Show click animation
+   */
+  async showClickAnimation(x, y) {
+    if (!this.mouseMovementOptions.showVisualFeedback)
+      return;
+    const script = getClickAnimationScript(x, y);
+    try {
+      await this.evaluate(script);
+    } catch (error) {
+      debugPage("Click animation error:", error);
+    }
+  }
+  /**
+   * Move mouse with human-like movement and visual feedback
+   */
+  async moveMouseHumanLike(toX, toY, options) {
+    const moveOptions = { ...this.mouseMovementOptions, ...options };
+    const path = generateHumanMousePath(
+      this.currentMousePosition,
+      { x: toX, y: toY },
+      moveOptions
+    );
+    for (let i = 0; i < path.length; i++) {
+      const point = path[i];
+      if (moveOptions.showVisualFeedback) {
+        await this.showMousePointer(point.x, point.y);
+      }
+      await this.underlyingPage.mouse.move(point.x, point.y);
+      this.currentMousePosition = point;
+      if (i < path.length - 1) {
+        const delay = calculateStepDelay(
+          moveOptions.duration || 300,
+          i,
+          path.length
+        );
+        await (0, import_utils15.sleep)(delay);
+      }
+    }
+  }
   async waitForNavigation() {
     if (this.pageType === "puppeteer" || this.pageType === "playwright") {
       debugPage("waitForNavigation begin");
@@ -3200,7 +3548,8 @@ var Page = class {
     return {
       click: async (x, y, options) => {
         await this.mouse.move(x, y);
-        this.underlyingPage.mouse.click(x, y, {
+        await this.showClickAnimation(x, y);
+        await this.underlyingPage.mouse.click(x, y, {
           button: options?.button || "left",
           count: options?.count || 1
         });
@@ -3220,27 +3569,23 @@ var Page = class {
       },
       move: async (x, y) => {
         this.everMoved = true;
-        return this.underlyingPage.mouse.move(x, y);
+        await this.moveMouseHumanLike(x, y);
+        return Promise.resolve();
       },
       drag: async (from, to) => {
         if (this.pageType === "puppeteer") {
-          await this.underlyingPage.mouse.drag(
-            {
-              x: from.x,
-              y: from.y
-            },
-            {
-              x: to.x,
-              y: to.y
-            }
-          );
+          await this.mouse.move(from.x, from.y);
+          await this.underlyingPage.mouse.down();
+          await this.moveMouseHumanLike(to.x, to.y, {
+            duration: 500,
+            // Slower for drag operations
+            steps: 25
+          });
+          await this.underlyingPage.mouse.up();
         } else if (this.pageType === "playwright") {
-          await this.underlyingPage.mouse.move(
-            from.x,
-            from.y
-          );
+          await this.mouse.move(from.x, from.y);
           await this.underlyingPage.mouse.down();
-          await this.underlyingPage.mouse.move(to.x, to.y);
+          await this.mouse.move(to.x, to.y);
           await this.underlyingPage.mouse.up();
         }
       }
@@ -3303,6 +3648,18 @@ var Page = class {
       await this.mouse.move(targetX, targetY);
     }
   }
+  /**
+   * Configure mouse movement behavior
+   */
+  configureMouseMovement(options) {
+    this.mouseMovementOptions = { ...this.mouseMovementOptions, ...options };
+  }
+  /**
+   * Configure visual feedback
+   */
+  configureVisualFeedback(options) {
+    this.visualFeedbackOptions = { ...this.visualFeedbackOptions, ...options };
+  }
   async scrollUntilTop(startingPoint) {
     await this.moveToPointBeforeScroll(startingPoint);
     return this.mouse.wheel(0, -9999999);
@@ -3365,8 +3722,8 @@ var WebPage = class extends Page {
 
 // src/playwright/ai-fixture.ts
 var import_node_crypto = require("crypto");
-var import_logger6 = require("misoai-shared/logger");
 var import_test = require("@playwright/test");
+var import_logger6 = require("misoai-shared/logger");
 var debugPage2 = (0, import_logger6.getDebug)("web:playwright:ai-fixture");
 var groupAndCaseForTest = (testInfo) => {
   let taskFile;