@zibby/core 0.1.0

package/src/utils/ripple-effect.js

@@ -0,0 +1,84 @@
+export const RIPPLE_EFFECT_SCRIPT = `
+  const style = document.createElement('style');
+  style.textContent = \`
+    @keyframes zibby-ripple {
+      0% {
+        transform: scale(0);
+        opacity: 0.7;
+      }
+      100% {
+        transform: scale(4);
+        opacity: 0;
+      }
+    }
+    .zibby-ripple {
+      position: absolute;
+      border-radius: 50%;
+      background: rgba(59, 130, 246, 0.7);
+      pointer-events: none;
+      animation: zibby-ripple 0.6s ease-out;
+      z-index: 999999;
+    }
+    .zibby-typing-indicator {
+      position: absolute;
+      border-radius: 50%;
+      border: 2px solid rgba(59, 130, 246, 0.8);
+      background: rgba(59, 130, 246, 0.1);
+      pointer-events: none;
+      z-index: 999999;
+      animation: zibby-pulse 1s ease-in-out infinite;
+    }
+    @keyframes zibby-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+  \`;
+  
+  document.addEventListener('DOMContentLoaded', () => {
+    if (document.head && !document.getElementById('zibby-ripple-style')) {
+      style.id = 'zibby-ripple-style';
+      document.head.appendChild(style);
+    }
+  });
+  
+  if (document.head && !document.getElementById('zibby-ripple-style')) {
+    style.id = 'zibby-ripple-style';
+    document.head.appendChild(style);
+  }
+
+  window.__zibbyShowRipple = function(x, y, isTyping = false) {
+    const ripple = document.createElement('div');
+    ripple.className = 'zibby-ripple';
+    ripple.style.left = (x - 10) + 'px';
+    ripple.style.top = (y - 10) + 'px';
+    ripple.style.width = '20px';
+    ripple.style.height = '20px';
+    
+    if (document.body) {
+      document.body.appendChild(ripple);
+      setTimeout(() => ripple.remove(), 600);
+    }
+  };
+`;
+
+export function injectRippleEffect(page) {
+  return page.addInitScript(RIPPLE_EFFECT_SCRIPT);
+}
+
+export function generateRippleHelperCode() {
+  return `
+async function showRipple(page, locator) {
+  const box = await locator.boundingBox().catch(() => null);
+  if (box) {
+    const x = box.x + box.width / 2;
+    const y = box.y + box.height / 2;
+    await page.evaluate((coords) => {
+      if (window.__zibbyShowRipple) {
+        window.__zibbyShowRipple(coords.x, coords.y, false);
+      }
+    }, { x, y }).catch(() => {});
+  }
+}
+`.trim();
+}
+

package/src/utils/selector-generator.js

@@ -0,0 +1,239 @@
+/**
+ * Generates robust Playwright selector code with .or() fallback chains
+ * @module SelectorGenerator
+ */
+
+export class SelectorGenerator {
+  /**
+   * Generate multi-strategy selector code from captured selectors
+   * @param {Object} action - Action object from execute_live with selectors
+   * @param {string} variableName - Variable name for the locator
+   * @returns {string} Generated code with .or() fallback chain
+   */
+  static generate(action, variableName = 'element') {
+    const { selectors } = action;
+    
+    if (!selectors || typeof selectors !== 'object') {
+      return this.generateFallbackSelector(action, variableName);
+    }
+
+    const strategies = [];
+
+    // Priority 1: Role-based (most robust)
+    if (selectors.role) {
+      strategies.push(this.generateRoleSelector(selectors.role));
+    }
+
+    // Priority 2: Stable attributes
+    if (selectors.attributes) {
+      strategies.push(this.generateAttributeSelector(selectors.attributes));
+    }
+
+    // Priority 3: Partial match (for dynamic elements)
+    if (selectors.partialMatch) {
+      strategies.push(this.generatePartialMatchSelector(selectors.partialMatch));
+    }
+
+    // Priority 4: Structural fallback
+    if (selectors.structure) {
+      strategies.push(this.generateStructuralSelector(selectors.structure));
+    }
+
+    if (strategies.length === 0) {
+      return this.generateFallbackSelector(action, variableName);
+    }
+
+    // Single strategy - no .or() needed
+    if (strategies.length === 1) {
+      return `const ${variableName} = ${strategies[0]};`;
+    }
+
+    // Multi-strategy with .or() chain
+    const code = `const ${variableName} = ${strategies[0]}\n${ 
+      strategies.slice(1).map(s => `  .or(${s})`).join('\n')  };`;
+    
+    return code;
+  }
+
+  /**
+   * Generate role-based selector (most robust)
+   */
+  static generateRoleSelector(roleInfo) {
+    const { role, name } = roleInfo;
+    
+    if (!role) return null;
+
+    if (name) {
+      // Use regex for i18n and case-insensitive matching
+      const namePattern = this.escapeRegex(name);
+      return `page.getByRole('${role}', { name: /${namePattern}/i })`;
+    }
+
+    return `page.getByRole('${role}')`;
+  }
+
+  /**
+   * Generate attribute-based selector
+   */
+  static generateAttributeSelector(attributes) {
+    if (!attributes || typeof attributes !== 'object') return null;
+
+    const attrPairs = Object.entries(attributes)
+      .filter(([_key, value]) => value !== undefined && value !== null)
+      .map(([key, value]) => {
+        // Handle special cases
+        if (key === 'placeholder' || key === 'aria-label') {
+          // Use getByPlaceholder for better semantics
+          if (key === 'placeholder') {
+            return `page.getByPlaceholder('${this.escapeString(value)}')`;
+          }
+          return `page.locator('[${key}="${this.escapeString(value)}"]')`;
+        }
+        return `[${key}="${this.escapeString(value)}"]`;
+      });
+
+    // If we have a placeholder, return it directly
+    if (attributes.placeholder) {
+      return `page.getByPlaceholder('${this.escapeString(attributes.placeholder)}')`;
+    }
+
+    // Otherwise combine attributes
+    const selector = attrPairs
+      .filter(p => !p.startsWith('page.'))
+      .join('');
+    
+    return selector ? `page.locator('${selector}')` : null;
+  }
+
+  /**
+   * Generate partial match selector for dynamic elements
+   */
+  static generatePartialMatchSelector(partialMatch) {
+    if (!partialMatch || typeof partialMatch !== 'object') return null;
+
+    const matches = Object.entries(partialMatch)
+      .filter(([_key, value]) => value !== undefined)
+      .map(([key, pattern]) => {
+        // Remove leading ^ if present (we'll add it)
+        const cleanPattern = pattern.replace(/^\^/, '');
+        return `[${key}^="${this.escapeString(cleanPattern)}"]`;
+      });
+
+    return matches.length > 0 ? `page.locator('${matches.join('')}')` : null;
+  }
+
+  /**
+   * Generate structural selector (last resort)
+   */
+  static generateStructuralSelector(structure) {
+    if (!structure || typeof structure !== 'string') return null;
+    
+    return `page.locator('${this.escapeString(structure)}')`;
+  }
+
+  /**
+   * Generate fallback selector when no selectors provided
+   * Try to infer from description
+   */
+  static generateFallbackSelector(action, variableName) {
+    const { description, type } = action;
+    
+    // Try to extract hints from description
+    if (type === 'fill' || type === 'type') {
+      return `const ${variableName} = page.locator('input').first();`;
+    }
+    
+    if (type === 'click') {
+      if (description.toLowerCase().includes('button')) {
+        return `const ${variableName} = page.locator('button').first();`;
+      }
+      if (description.toLowerCase().includes('link')) {
+        return `const ${variableName} = page.locator('a').first();`;
+      }
+    }
+
+    // Generic fallback
+    return `const ${variableName} = page.locator('body');`;
+  }
+
+  /**
+   * Escape string for use in selector
+   */
+  static escapeString(str) {
+    if (typeof str !== 'string') return String(str);
+    return str
+      .replace(/\\/g, '\\\\')
+      .replace(/'/g, "\\'")
+      .replace(/"/g, '\\"');
+  }
+
+  /**
+   * Escape string for use in regex
+   */
+  static escapeRegex(str) {
+    if (typeof str !== 'string') return String(str);
+    // Escape special regex characters but allow | for alternation
+    return str.replace(/[.*+?^${}()[\]\\]/g, '\\$&');
+  }
+
+  /**
+   * Generate complete action code (selector + action)
+   * @param {Object} action - Action from execute_live
+   * @param {number} index - Action index for unique variable names
+   * @returns {string} Complete code for this action
+   */
+  static generateActionCode(action, index) {
+    const { type, value, description: _desc, selectors: _selectors } = action;
+    
+    const varName = `element${index}`;
+    const selectorCode = this.generate(action, varName);
+    const actionCode = this.generateActionMethod(type, varName, value);
+
+    return `${selectorCode}\n${actionCode}`;
+  }
+
+  /**
+   * Generate the action method call (fill, click, etc.)
+   */
+  static generateActionMethod(type, varName, value) {
+    switch (type) {
+      case 'fill':
+      case 'type':
+        return `await ${varName}.fill('${this.escapeString(value || '')}');`;
+      
+      case 'click':
+        return `await ${varName}.click();`;
+      
+      case 'navigate':
+        return `await page.goto('${this.escapeString(value || '')}');`;
+      
+      case 'wait': {
+        const duration = parseInt(value) || 2000;
+        return `await page.waitForTimeout(${duration});`;
+      }
+      
+      default:
+        return `// Unknown action type: ${type}`;
+    }
+  }
+
+  /**
+   * Generate assertion code from live execution assertions
+   */
+  static generateAssertionCode(assertion, _index) {
+    const { description, expected: _expected, actual, passed: _passed } = assertion;
+    
+    if (description.toLowerCase().includes('url')) {
+      return `await expect(page).toHaveURL(/${this.escapeRegex(actual)}/);`;
+    }
+
+    if (description.toLowerCase().includes('visible')) {
+      return `await expect(page.locator('body')).toBeVisible();`;
+    }
+
+    // Generic assertion based on description
+    return `// ${description}`;
+  }
+}
+
+export default SelectorGenerator;

package/src/utils/streaming-parser.js

@@ -0,0 +1,387 @@
+/**
+ * StreamingParser - Handles NDJSON streaming output from cursor-agent
+ * 
+ * Cursor agent outputs newline-delimited JSON where each line is a message.
+ * We extract text content and look for result JSON.
+ */
+
+export class StreamingParser {
+  constructor() {
+    this.buffer = '';
+    this.extractedResult = null;
+    this.rawText = '';
+    this.zodSchema = null;
+    this.lastOutputLength = 0;
+    this.onToolCall = null;
+    this._lastToolEmit = null;
+  }
+
+  /**
+   * Process a chunk of data from the stream
+   * @param {string} chunk - New data from stdout
+   * @returns {string|null} - Text to display to user, or null if nothing to display
+   */
+  processChunk(chunk) {
+    if (!chunk) return null;
+    
+    // cursor-agent streams NDJSON - process complete lines, but also try partial parsing
+    this.buffer += chunk;
+    const lines = this.buffer.split('\n');
+    
+    // Keep the last incomplete line in the buffer
+    this.buffer = lines.pop() || '';
+    
+    let displayText = '';
+    
+    for (const line of lines) {
+      if (!line.trim()) continue; // Skip empty lines
+      
+      try {
+        const jsonLine = JSON.parse(line);
+        this._emitToolCalls(jsonLine);
+        const text = this.extractText(jsonLine);
+        
+        if (text) {
+          // cursor-agent may send full text each time OR incremental deltas
+          // Check if this text is new (not already in rawText)
+          // If text starts with what we already have, it's full text - only output new part
+          if (this.rawText && text.startsWith(this.rawText)) {
+            // Full text - only output the new part
+            const newPart = text.substring(this.rawText.length);
+            this.rawText = text; // Update to full text
+            displayText += newPart;
+          } else if (!this.rawText.includes(text) || text.length < 20) {
+            // Incremental delta or short new text - output it
+            this.rawText += text;
+            displayText += text;
+          }
+          // else: duplicate, skip
+          
+          this.tryExtractResult(this.rawText);
+        } else if (this.isValidResult(jsonLine)) {
+          // Valid result JSON
+          this.rawText += `${line  }\n`;
+          displayText += `${line  }\n`;
+          this.extractedResult = jsonLine;
+        }
+        // else: Protocol message without text - ignore silently
+      } catch (_e) {
+        // Partial JSON - try to extract text from partial if it looks like thinking/reasoning
+        // This allows streaming even before complete JSON arrives
+        if (line.includes('"text"') || line.includes('"content"')) {
+          // Try to extract partial text for immediate display
+          const textMatch = line.match(/"text"\s*:\s*"([^"]*)/);
+          const contentMatch = line.match(/"content"\s*:\s*"([^"]*)/);
+          const partialText = textMatch ? textMatch[1] : (contentMatch ? contentMatch[1] : null);
+          
+          if (partialText && !this.rawText.includes(partialText)) {
+            // Output partial text immediately for typewriter effect
+            displayText += partialText;
+            this.rawText += partialText;
+          }
+        }
+      }
+    }
+    
+    // Return text immediately for typewriter effect
+    return displayText || null;
+  }
+
+  /**
+   * Flush any remaining buffer
+   * @returns {string|null} - Remaining text to display
+   */
+  flush() {
+    if (!this.buffer.trim()) {
+      return null;
+    }
+    
+    let displayText = '';
+    
+    try {
+      const jsonLine = JSON.parse(this.buffer);
+      this._emitToolCalls(jsonLine);
+      const text = this.extractText(jsonLine);
+      
+      if (text) {
+        this.rawText += text;
+        displayText += text;
+        this.tryExtractResult(text);
+      }
+    } catch (_e) {
+      // Not JSON - treat as plain text
+      this.rawText += this.buffer;
+      displayText += this.buffer;
+      
+      // Also try to extract result from buffer
+      this.tryExtractResult(this.buffer);
+    }
+    
+    this.buffer = '';
+    return displayText || null;
+  }
+
+  /**
+   * Detect tool calls from any known NDJSON shape and invoke onToolCall (Cursor/Claude variants).
+   */
+  _emitToolCalls(jsonLine) {
+    if (!this.onToolCall) return;
+    const emit = (name, input) => {
+      if (!name) return;
+      const key = `${name}:${JSON.stringify(input ?? {})}`;
+      if (this._lastToolEmit === key) return;
+      this._lastToolEmit = key;
+      this.onToolCall(name, input != null ? input : undefined);
+    };
+    const normInput = (obj) => {
+      if (obj == null) return undefined;
+      if (typeof obj === 'object' && !Array.isArray(obj)) return obj;
+      if (typeof obj === 'string') {
+        try { return JSON.parse(obj); } catch (_) { return undefined; }
+      }
+      return undefined;
+    };
+
+    if (jsonLine.type === 'tool_use' || jsonLine.type === 'tool_call') {
+      if (jsonLine.name) {
+        emit(jsonLine.name, normInput(jsonLine.input ?? jsonLine.arguments));
+        return;
+      }
+      // Cursor CLI: type "tool_call", tool_call: { toolName: { args } }
+      const tc = jsonLine.tool_call;
+      if (tc && typeof tc === 'object' && !Array.isArray(tc)) {
+        const keys = Object.keys(tc);
+        if (keys.length === 1) {
+          const name = keys[0];
+          const payload = tc[name];
+          const input = payload && typeof payload === 'object' ? (payload.args ?? payload.input ?? payload) : undefined;
+          emit(name, normInput(input));
+        }
+        return;
+      }
+      return;
+    }
+    if (Array.isArray(jsonLine.tool_calls)) {
+      for (const t of jsonLine.tool_calls) {
+        emit(t.name, normInput(t.input ?? t.arguments));
+      }
+      return;
+    }
+    const msg = jsonLine.message ?? jsonLine;
+    if (Array.isArray(msg?.tool_calls)) {
+      for (const t of msg.tool_calls) {
+        emit(t.name, normInput(t.input ?? t.arguments));
+      }
+      return;
+    }
+    const content = msg?.content ?? jsonLine.content;
+    if (Array.isArray(content)) {
+      for (const item of content) {
+        if ((item.type === 'tool_use' || item.type === 'tool_call') && item.name) {
+          emit(item.name, normInput(item.input ?? item.arguments));
+        }
+      }
+    }
+  }
+
+  /**
+   * Extract text content from a streaming JSON message
+   * @param {Object} jsonLine - Parsed JSON line
+   * @returns {string|null} - Extracted text or null
+   */
+  extractText(jsonLine) {
+    if (jsonLine.type === 'assistant' && jsonLine.message?.content) {
+      const content = jsonLine.message.content;
+      if (Array.isArray(content)) {
+        return content
+          .filter(item => item.type === 'text' && item.text)
+          .map(item => item.text)
+          .join('');
+      }
+    }
+
+    if (jsonLine.type === 'thinking' && jsonLine.text) {
+      return jsonLine.text;
+    }
+    
+    if (jsonLine.text) return jsonLine.text;
+    if (jsonLine.content && typeof jsonLine.content === 'string') return jsonLine.content;
+    if (jsonLine.delta) return jsonLine.delta;
+    
+    return null;
+  }
+
+  /**
+   * Extract JSON - SIMPLE AND BULLETPROOF
+   * Find the LARGEST valid JSON object in the text
+   */
+  tryExtractResult(text) {
+    if (!text || typeof text !== 'string') return;
+    
+    const candidates = [];
+    
+    // 1. Extract ALL JSON from markdown code fences
+    // CRITICAL: Match the COMPLETE block from opening to closing fence
+    // Made more flexible - closing fence can be on same line or next line
+    const codeBlockRegex = /```json\s*\n?([\s\S]*?)\n?```/g;
+    let match;
+    while ((match = codeBlockRegex.exec(text)) !== null) {
+      const jsonText = match[1].trim();
+      // Validate it's actually parseable before adding
+      try {
+        JSON.parse(jsonText);
+        candidates.push({ text: jsonText, source: 'markdown' });
+      } catch (_e) {
+        // Skip invalid JSON
+      }
+    }
+    
+    // 2. Extract ALL complete JSON objects using brace counting
+    let start = 0;
+    let _braceCount = 0;
+    while (start < text.length) {
+      start = text.indexOf('{', start);
+      if (start === -1) break;
+      
+      let depth = 0;
+      let end = start;
+      for (let i = start; i < text.length; i++) {
+        if (text[i] === '{') depth++;
+        else if (text[i] === '}') {
+          depth--;
+          if (depth === 0) {
+            end = i;
+            candidates.push({ text: text.substring(start, end + 1), source: 'brace' });
+            _braceCount++;
+            break;
+          }
+        }
+      }
+      start = end + 1;
+    }
+    
+    // 3. Parse all candidates and pick the LAST valid one (handles self-correction)
+    let bestResult = this.extractedResult; // KEEP PREVIOUS BEST
+    let _bestSize = bestResult ? JSON.stringify(bestResult).length : 0;
+    let _validCount = 0;
+    let _bestPosition = -1;
+    
+    // Suppress verbose logging during streaming (only log when we find valid result)
+    // if (candidates.length > 0) {
+    //   console.log(`🔍 [StreamingParser] Found ${candidates.length} JSON candidates (${candidates.filter(c => c.source === 'markdown').length} from markdown, ${candidates.filter(c => c.source === 'brace').length} from brace counting)`);
+    // }
+    
+    for (let i = 0; i < candidates.length; i++) {
+      const candidate = candidates[i];
+      try {
+        // Fix common JSON issues: trailing commas
+        const jsonText = candidate.text.replace(/,(\s*[}\]])/g, '$1');
+        
+        const parsed = JSON.parse(jsonText);
+        const isValid = this.isValidResult(parsed);
+        
+        if (isValid) {
+          _validCount++;
+          const size = JSON.stringify(parsed).length;
+          
+          // ALWAYS take the latest valid JSON (Cursor self-corrects over time)
+          // Don't compare size - just use the most recent one
+          _bestSize = size;
+          bestResult = parsed;
+          _bestPosition = i;
+        }
+        // Suppress protocol message and parse error logs during streaming
+        // else {
+        //   const keys = Object.keys(parsed);
+        //   console.log(`   ✗ Invalid candidate (${candidate.source}): Protocol message with keys [${keys.join(', ')}]`);
+        // }
+      } catch (_e) {
+        // Invalid JSON, skip silently during streaming
+        // console.log(`   ✗ Invalid JSON (${candidate.source}): Parse error`);
+      }
+    }
+    
+    // ONLY UPDATE if we found something valid
+    if (bestResult) {
+      this.extractedResult = bestResult;
+      // Self-correction happens naturally - no need to log (Cursor iterates/refines its JSON)
+    }
+  }
+
+  /**
+   * Check if a parsed object is a valid result (not a protocol message)
+   * @param {Object} obj - Parsed JSON object
+   * @returns {boolean} - True if valid result
+   */
+  isValidResult(obj) {
+    if (!obj || typeof obj !== 'object' || Array.isArray(obj)) {
+      return false;
+    }
+    
+    // Filter out protocol messages
+    if (obj.session_id || obj.timestamp_ms || obj.type || obj.call_id || obj.tool_call) {
+      return false;
+    }
+    
+    // Filter out tool call result wrappers
+    // Tool calls return: { result: { success: {...} } } or { result: { error: {...} } }
+    // User JSON returns: { result: "string" } or { success: boolean, ... }
+    if (obj.result && typeof obj.result === 'object') {
+      if ((obj.result.success && typeof obj.result.success === 'object') ||
+          (obj.result.error && typeof obj.result.error === 'object')) {
+        return false;
+      }
+    }
+    
+    // Filter out objects that have 'args' property (tool call objects)
+    if (obj.args && typeof obj.args === 'object') return false;
+    
+    // If we have a schema, validate against it
+    if (this.zodSchema) {
+      try {
+        this.zodSchema.parse(obj);
+        return true;
+      } catch (_e) {
+        return false;
+      }
+    }
+    
+    return true;
+  }
+
+  /**
+   * Get the extracted result object
+   * @returns {Object|null} - Extracted result or null
+   */
+  getResult() {
+    return this.extractedResult;
+  }
+
+  /**
+   * Get all accumulated raw text
+   * @returns {string} - All raw text
+   */
+  getRawText() {
+    return this.rawText;
+  }
+
+  /**
+   * Static helper to extract result from raw output
+   * @param {string} raw - Raw output text
+   * @param {Object} schema - Optional Zod schema to validate candidates
+   * @returns {Object|null} - Extracted result or null
+   */
+  static extractResult(raw, schema = null) {
+    const parser = new StreamingParser();
+    parser.zodSchema = schema; // Pass schema for validation
+    parser.processChunk(raw);
+    parser.flush();
+    const result = parser.getResult();
+    
+    if (!result && process.env.LOG_LEVEL === 'debug') {
+      console.error('[StreamingParser] No result extracted from', raw?.length || 0, 'chars');
+    }
+    
+    return result;
+  }
+}