musubi-sdd 2.2.0 → 3.0.0

package/src/agents/browser/ai-comparator.js

@@ -0,0 +1,255 @@
+/**
+ * @fileoverview AI Comparator for Screenshot Comparison
+ * @module agents/browser/ai-comparator
+ */
+
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * @typedef {Object} ComparisonResult
+ * @property {boolean} passed - Whether comparison passed
+ * @property {number} similarity - Similarity percentage (0-100)
+ * @property {Array<string>} differences - List of differences found
+ * @property {Object} details - Detailed comparison info
+ */
+
+/**
+ * AI Comparator - Compares screenshots using AI vision models
+ */
+class AIComparator {
+  /**
+   * Create a new AIComparator instance
+   * @param {Object} options - Configuration options
+   * @param {string} [options.model='gpt-4-vision-preview'] - Vision model to use
+   * @param {number} [options.threshold=0.95] - Similarity threshold (0-1)
+   * @param {string} [options.apiKey] - API key for the vision service
+   */
+  constructor(options = {}) {
+    this.model = options.model || 'gpt-4-vision-preview';
+    this.threshold = options.threshold || 0.95;
+    this.apiKey = options.apiKey || process.env.OPENAI_API_KEY;
+  }
+
+  /**
+   * Compare two screenshots
+   * @param {string} expectedPath - Path to expected screenshot
+   * @param {string} actualPath - Path to actual screenshot
+   * @param {Object} options - Comparison options
+   * @param {number} [options.threshold] - Override threshold
+   * @param {string} [options.description] - What to verify
+   * @returns {Promise<ComparisonResult>}
+   */
+  async compare(expectedPath, actualPath, options = {}) {
+    const threshold = options.threshold || this.threshold;
+    const description = options.description || 'Compare visual appearance';
+
+    // Check if files exist
+    if (!await fs.pathExists(expectedPath)) {
+      throw new Error(`Expected screenshot not found: ${expectedPath}`);
+    }
+    if (!await fs.pathExists(actualPath)) {
+      throw new Error(`Actual screenshot not found: ${actualPath}`);
+    }
+
+    // If no API key, use fallback comparison
+    if (!this.apiKey) {
+      return this.fallbackCompare(expectedPath, actualPath, threshold);
+    }
+
+    try {
+      // Read images as base64
+      const expectedBase64 = await this.imageToBase64(expectedPath);
+      const actualBase64 = await this.imageToBase64(actualPath);
+
+      // Call Vision API
+      const result = await this.callVisionAPI(expectedBase64, actualBase64, description);
+      
+      return {
+        passed: result.similarity >= threshold * 100,
+        similarity: result.similarity,
+        differences: result.differences || [],
+        details: result.details || {},
+        threshold: threshold * 100,
+      };
+    } catch (error) {
+      console.warn(`Vision API error, using fallback: ${error.message}`);
+      return this.fallbackCompare(expectedPath, actualPath, threshold);
+    }
+  }
+
+  /**
+   * Convert image file to base64
+   * @param {string} imagePath
+   * @returns {Promise<string>}
+   */
+  async imageToBase64(imagePath) {
+    const buffer = await fs.readFile(imagePath);
+    return buffer.toString('base64');
+  }
+
+  /**
+   * Call the Vision API for comparison
+   * @param {string} expectedBase64
+   * @param {string} actualBase64
+   * @param {string} description
+   * @returns {Promise<Object>}
+   */
+  async callVisionAPI(expectedBase64, actualBase64, description) {
+    // OpenAI API call
+    const response = await fetch('https://api.openai.com/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${this.apiKey}`,
+      },
+      body: JSON.stringify({
+        model: this.model,
+        messages: [
+          {
+            role: 'system',
+            content: `You are an expert at comparing web page screenshots. 
+            Analyze the two images and provide:
+            1. A similarity score from 0-100
+            2. A list of visual differences
+            3. Whether this is a critical difference
+            
+            Respond in JSON format:
+            {
+              "similarity": <number 0-100>,
+              "differences": ["difference 1", "difference 2"],
+              "critical": <boolean>,
+              "details": { "layout": "...", "content": "...", "style": "..." }
+            }`,
+          },
+          {
+            role: 'user',
+            content: [
+              {
+                type: 'text',
+                text: `Compare these two screenshots. ${description}`,
+              },
+              {
+                type: 'image_url',
+                image_url: {
+                  url: `data:image/png;base64,${expectedBase64}`,
+                  detail: 'high',
+                },
+              },
+              {
+                type: 'image_url',
+                image_url: {
+                  url: `data:image/png;base64,${actualBase64}`,
+                  detail: 'high',
+                },
+              },
+            ],
+          },
+        ],
+        max_tokens: 1000,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Vision API error: ${response.status}`);
+    }
+
+    const data = await response.json();
+    const content = data.choices[0]?.message?.content;
+
+    try {
+      // Try to parse JSON from the response
+      const jsonMatch = content.match(/\{[\s\S]*\}/);
+      if (jsonMatch) {
+        return JSON.parse(jsonMatch[0]);
+      }
+    } catch (e) {
+      // Parsing failed
+    }
+
+    // Return a default result if parsing failed
+    return {
+      similarity: 50,
+      differences: ['Unable to parse comparison result'],
+      critical: true,
+      details: { raw: content },
+    };
+  }
+
+  /**
+   * Fallback comparison when Vision API is not available
+   * Uses file size comparison as a basic heuristic
+   * @param {string} expectedPath
+   * @param {string} actualPath
+   * @param {number} threshold
+   * @returns {Promise<ComparisonResult>}
+   */
+  async fallbackCompare(expectedPath, actualPath, threshold) {
+    const [expectedStat, actualStat] = await Promise.all([
+      fs.stat(expectedPath),
+      fs.stat(actualPath),
+    ]);
+
+    // Calculate size difference
+    const sizeDiff = Math.abs(expectedStat.size - actualStat.size);
+    const maxSize = Math.max(expectedStat.size, actualStat.size);
+    const sizeRatio = 1 - (sizeDiff / maxSize);
+
+    // Simple heuristic: if sizes are similar, likely similar images
+    // This is a rough approximation and should be replaced with actual image comparison
+    const similarity = Math.round(sizeRatio * 100);
+
+    return {
+      passed: similarity >= threshold * 100,
+      similarity,
+      differences: similarity < threshold * 100 
+        ? [`File size differs by ${sizeDiff} bytes (${((1 - sizeRatio) * 100).toFixed(1)}%)`]
+        : [],
+      details: {
+        method: 'fallback-size-comparison',
+        expectedSize: expectedStat.size,
+        actualSize: actualStat.size,
+        note: 'Using fallback comparison. Set OPENAI_API_KEY for AI-powered comparison.',
+      },
+      threshold: threshold * 100,
+    };
+  }
+
+  /**
+   * Generate a comparison report
+   * @param {ComparisonResult} result
+   * @param {Object} options
+   * @returns {string}
+   */
+  generateReport(result, options = {}) {
+    const lines = [
+      '# Screenshot Comparison Report',
+      '',
+      `**Status**: ${result.passed ? '✅ PASSED' : '❌ FAILED'}`,
+      `**Similarity**: ${result.similarity}%`,
+      `**Threshold**: ${result.threshold}%`,
+      '',
+    ];
+
+    if (result.differences.length > 0) {
+      lines.push('## Differences Found');
+      lines.push('');
+      for (const diff of result.differences) {
+        lines.push(`- ${diff}`);
+      }
+      lines.push('');
+    }
+
+    if (result.details) {
+      lines.push('## Details');
+      lines.push('');
+      lines.push('```json');
+      lines.push(JSON.stringify(result.details, null, 2));
+      lines.push('```');
+    }
+
+    return lines.join('\n');
+  }
+}
+
+module.exports = AIComparator;

package/src/agents/browser/context-manager.js

@@ -0,0 +1,207 @@
+/**
+ * @fileoverview Context Manager for Browser Automation
+ * @module agents/browser/context-manager
+ */
+
+/**
+ * Context Manager - Manages browser contexts, pages, and action history
+ */
+class ContextManager {
+  constructor() {
+    this.browser = null;
+    this.contexts = new Map();
+    this.pages = new Map();
+    this.activeContextName = 'default';
+    this.actionHistory = [];
+  }
+
+  /**
+   * Initialize the context manager with a browser instance
+   * @param {import('playwright').Browser} browser
+   */
+  async initialize(browser) {
+    this.browser = browser;
+    await this.createContext('default');
+  }
+
+  /**
+   * Create a new browser context
+   * @param {string} name - Context name
+   * @param {Object} options - Context options
+   * @returns {Promise<import('playwright').BrowserContext>}
+   */
+  async createContext(name, options = {}) {
+    if (!this.browser) {
+      throw new Error('Browser not initialized');
+    }
+
+    const context = await this.browser.newContext({
+      viewport: options.viewport || { width: 1280, height: 720 },
+      userAgent: options.userAgent,
+      locale: options.locale || 'ja-JP',
+      timezoneId: options.timezoneId || 'Asia/Tokyo',
+      ...options,
+    });
+
+    this.contexts.set(name, context);
+    return context;
+  }
+
+  /**
+   * Get an existing context or create a new one
+   * @param {string} name - Context name
+   * @returns {Promise<import('playwright').BrowserContext>}
+   */
+  async getOrCreateContext(name = 'default') {
+    if (this.contexts.has(name)) {
+      return this.contexts.get(name);
+    }
+    return this.createContext(name);
+  }
+
+  /**
+   * Get an existing page or create a new one
+   * @param {string} contextName - Context name
+   * @returns {Promise<import('playwright').Page>}
+   */
+  async getOrCreatePage(contextName = 'default') {
+    const pageKey = `${contextName}:main`;
+    
+    if (this.pages.has(pageKey)) {
+      return this.pages.get(pageKey);
+    }
+
+    const context = await this.getOrCreateContext(contextName);
+    const page = await context.newPage();
+    
+    this.pages.set(pageKey, page);
+    return page;
+  }
+
+  /**
+   * Create a new page in a context
+   * @param {string} contextName - Context name
+   * @param {string} pageName - Page name
+   * @returns {Promise<import('playwright').Page>}
+   */
+  async createPage(contextName = 'default', pageName) {
+    const context = await this.getOrCreateContext(contextName);
+    const page = await context.newPage();
+    
+    const pageKey = `${contextName}:${pageName}`;
+    this.pages.set(pageKey, page);
+    
+    return page;
+  }
+
+  /**
+   * Get a specific page
+   * @param {string} contextName - Context name
+   * @param {string} pageName - Page name
+   * @returns {import('playwright').Page|undefined}
+   */
+  getPage(contextName = 'default', pageName = 'main') {
+    const pageKey = `${contextName}:${pageName}`;
+    return this.pages.get(pageKey);
+  }
+
+  /**
+   * Switch active context
+   * @param {string} name - Context name
+   */
+  setActiveContext(name) {
+    if (!this.contexts.has(name)) {
+      throw new Error(`Context "${name}" does not exist`);
+    }
+    this.activeContextName = name;
+  }
+
+  /**
+   * Get the active context name
+   * @returns {string}
+   */
+  getActiveContextName() {
+    return this.activeContextName;
+  }
+
+  /**
+   * Record an action to history
+   * @param {Object} action - Action object
+   * @param {Object} result - Action result
+   */
+  recordAction(action, result) {
+    this.actionHistory.push({
+      action,
+      result,
+      timestamp: Date.now(),
+      context: this.activeContextName,
+    });
+  }
+
+  /**
+   * Get action history
+   * @returns {Array}
+   */
+  getActionHistory() {
+    return [...this.actionHistory];
+  }
+
+  /**
+   * Clear action history
+   */
+  clearHistory() {
+    this.actionHistory = [];
+  }
+
+  /**
+   * Close a specific context
+   * @param {string} name - Context name
+   */
+  async closeContext(name) {
+    const context = this.contexts.get(name);
+    if (context) {
+      await context.close();
+      this.contexts.delete(name);
+      
+      // Remove associated pages
+      for (const [key, page] of this.pages.entries()) {
+        if (key.startsWith(`${name}:`)) {
+          this.pages.delete(key);
+        }
+      }
+    }
+  }
+
+  /**
+   * Reset the context manager
+   */
+  reset() {
+    this.contexts.clear();
+    this.pages.clear();
+    this.activeContextName = 'default';
+    this.actionHistory = [];
+    this.browser = null;
+  }
+
+  /**
+   * Get all context names
+   * @returns {string[]}
+   */
+  getContextNames() {
+    return [...this.contexts.keys()];
+  }
+
+  /**
+   * Get all page names for a context
+   * @param {string} contextName
+   * @returns {string[]}
+   */
+  getPageNames(contextName = 'default') {
+    const prefix = `${contextName}:`;
+    return [...this.pages.keys()]
+      .filter(key => key.startsWith(prefix))
+      .map(key => key.slice(prefix.length));
+  }
+}
+
+module.exports = ContextManager;