@nclamvn/vibecode-cli 2.0.0 → 2.2.0

package/src/debug/image-analyzer.js

@@ -0,0 +1,304 @@
+/**
+ * Image Analyzer for Vibecode CLI
+ * Analyze screenshots of errors using AI vision
+ */
+
+import chalk from 'chalk';
+import fs from 'fs/promises';
+import path from 'path';
+import { spawn } from 'child_process';
+import { imageToBase64, saveClipboardImage, formatFileSize } from '../utils/image.js';
+
+/**
+ * ImageAnalyzer class for screenshot error analysis
+ */
+export class ImageAnalyzer {
+  constructor(projectPath = process.cwd()) {
+    this.projectPath = projectPath;
+  }
+
+  /**
+   * Analyze image file for errors
+   */
+  async analyzeImage(imagePath) {
+    console.log(chalk.cyan('\n  Analyzing screenshot...\n'));
+
+    try {
+      // Read and validate image
+      const imageInfo = await imageToBase64(imagePath);
+
+      console.log(chalk.gray(`  File: ${path.basename(imageInfo.path)}`));
+      console.log(chalk.gray(`  Size: ${formatFileSize(imageInfo.size)}\n`));
+
+      // Run AI analysis
+      const analysis = await this.runImageAnalysis(imageInfo);
+
+      return analysis;
+    } catch (error) {
+      throw new Error(`Failed to analyze image: ${error.message}`);
+    }
+  }
+
+  /**
+   * Analyze image from clipboard
+   */
+  async analyzeClipboard() {
+    console.log(chalk.cyan('\n  Getting image from clipboard...\n'));
+
+    try {
+      const tempFile = await saveClipboardImage();
+      console.log(chalk.green(`  Image captured\n`));
+
+      const result = await this.analyzeImage(tempFile);
+
+      // Cleanup temp file
+      try {
+        await fs.unlink(tempFile);
+      } catch {
+        // Ignore cleanup errors
+      }
+
+      return result;
+    } catch (error) {
+      throw new Error(`Clipboard error: ${error.message}`);
+    }
+  }
+
+  /**
+   * Run AI analysis on image
+   */
+  async runImageAnalysis(imageInfo) {
+    // Create analysis prompt
+    const prompt = this.buildAnalysisPrompt(imageInfo);
+
+    // Save prompt to temp file
+    const tempDir = path.join(this.projectPath, '.vibecode', 'debug');
+    await fs.mkdir(tempDir, { recursive: true });
+
+    const promptFile = path.join(tempDir, 'image-analysis.md');
+    await fs.writeFile(promptFile, prompt);
+
+    // Also save image reference
+    const imageRef = path.join(tempDir, 'screenshot-ref.txt');
+    await fs.writeFile(imageRef, imageInfo.path);
+
+    // Run Claude Code with image
+    const result = await this.runClaudeWithImage(imageInfo, promptFile);
+
+    return this.parseAnalysisResult(result);
+  }
+
+  /**
+   * Build analysis prompt
+   */
+  buildAnalysisPrompt(imageInfo) {
+    return `# Screenshot Error Analysis
+
+Analyze this screenshot and extract any error information.
+
+## Instructions
+1. Look for error messages, stack traces, console errors, or warnings
+2. Identify the error type (TypeError, SyntaxError, Build Error, etc.)
+3. Extract file names and line numbers if visible
+4. Note any relevant context visible in the screenshot
+5. Provide specific fix suggestions
+
+## Response Format
+Respond in this exact format:
+
+**Error Type**: [type of error or "None detected"]
+**Error Message**: [main error text]
+**Location**: [file:line if visible]
+**Root Cause**: [explanation of what's wrong]
+**Suggested Fix**: [how to fix it]
+**Confidence**: [High/Medium/Low]
+
+If no error is visible, respond with:
+**Error Type**: None detected
+**Error Message**: No error visible in screenshot
+`;
+  }
+
+  /**
+   * Run Claude Code with image input
+   */
+  async runClaudeWithImage(imageInfo, promptFile) {
+    return new Promise((resolve) => {
+      let output = '';
+      let errorOutput = '';
+
+      // Use claude with image path
+      // Claude Code can read images directly
+      const args = [
+        '--print',
+        '-p', `Analyze this image for errors: ${imageInfo.path}
+
+Look for:
+- Error messages
+- Stack traces
+- Console errors
+- Type errors
+- Build failures
+
+Respond with:
+**Error Type**:
+**Error Message**:
+**Location**:
+**Root Cause**:
+**Suggested Fix**:
+**Confidence**:
+
+If no error found, say "No error detected"`
+      ];
+
+      const child = spawn('claude', args, {
+        cwd: this.projectPath,
+        stdio: ['pipe', 'pipe', 'pipe']
+      });
+
+      child.stdout.on('data', (data) => {
+        output += data.toString();
+      });
+
+      child.stderr.on('data', (data) => {
+        errorOutput += data.toString();
+      });
+
+      child.on('close', (code) => {
+        resolve({
+          success: code === 0,
+          output: output.trim(),
+          error: errorOutput.trim()
+        });
+      });
+
+      child.on('error', (error) => {
+        resolve({
+          success: false,
+          output: '',
+          error: error.message
+        });
+      });
+
+      // Timeout after 60 seconds
+      setTimeout(() => {
+        child.kill();
+        resolve({
+          success: false,
+          output: '',
+          error: 'Analysis timed out'
+        });
+      }, 60000);
+    });
+  }
+
+  /**
+   * Parse AI analysis result
+   */
+  parseAnalysisResult(result) {
+    const analysis = {
+      errorType: null,
+      errorMessage: null,
+      location: null,
+      rootCause: null,
+      suggestedFix: null,
+      confidence: 'Low',
+      raw: result?.output || '',
+      success: result?.success || false
+    };
+
+    const output = result?.output || '';
+
+    // Extract fields using regex
+    const patterns = {
+      errorType: /\*\*Error Type\*\*:\s*(.+?)(?:\n|$)/i,
+      errorMessage: /\*\*Error Message\*\*:\s*(.+?)(?:\n|$)/i,
+      location: /\*\*Location\*\*:\s*(.+?)(?:\n|$)/i,
+      rootCause: /\*\*Root Cause\*\*:\s*(.+?)(?:\n|$)/i,
+      suggestedFix: /\*\*Suggested Fix\*\*:\s*(.+?)(?:\n|$)/i,
+      confidence: /\*\*Confidence\*\*:\s*(.+?)(?:\n|$)/i
+    };
+
+    for (const [key, pattern] of Object.entries(patterns)) {
+      const match = output.match(pattern);
+      if (match && match[1]) {
+        const value = match[1].trim();
+        if (value && value.toLowerCase() !== 'none' && value.toLowerCase() !== 'n/a') {
+          analysis[key] = value;
+        }
+      }
+    }
+
+    // Check if error was actually detected
+    if (analysis.errorType?.toLowerCase().includes('none detected') ||
+        analysis.errorMessage?.toLowerCase().includes('no error')) {
+      analysis.errorType = null;
+      analysis.errorMessage = null;
+    }
+
+    return analysis;
+  }
+
+  /**
+   * Format analysis for display
+   */
+  formatAnalysis(analysis) {
+    // No error case
+    if (!analysis.errorType && !analysis.errorMessage) {
+      return chalk.yellow('\n  No error detected in screenshot.\n');
+    }
+
+    let output = chalk.cyan(`
++----------------------------------------------------------------------+
+|  SCREENSHOT ANALYSIS                                                 |
++----------------------------------------------------------------------+
+`);
+
+    if (analysis.errorType) {
+      output += `\n  ${chalk.white('Error Type:')} ${chalk.red(analysis.errorType)}`;
+    }
+
+    if (analysis.errorMessage) {
+      output += `\n  ${chalk.white('Message:')}    ${chalk.yellow(analysis.errorMessage)}`;
+    }
+
+    if (analysis.location) {
+      output += `\n  ${chalk.white('Location:')}   ${chalk.gray(analysis.location)}`;
+    }
+
+    if (analysis.confidence) {
+      const confColor = analysis.confidence === 'High' ? chalk.green :
+                        analysis.confidence === 'Medium' ? chalk.yellow : chalk.gray;
+      output += `\n  ${chalk.white('Confidence:')} ${confColor(analysis.confidence)}`;
+    }
+
+    if (analysis.rootCause) {
+      output += `\n\n  ${chalk.cyan('Root Cause:')}`;
+      output += `\n  ${chalk.gray(analysis.rootCause)}`;
+    }
+
+    if (analysis.suggestedFix) {
+      output += `\n\n  ${chalk.green('Suggested Fix:')}`;
+      output += `\n  ${chalk.white(analysis.suggestedFix)}`;
+    }
+
+    output += '\n';
+
+    return output;
+  }
+}
+
+/**
+ * Helper function for direct use
+ */
+export async function analyzeScreenshot(imagePathOrClipboard, options = {}) {
+  const analyzer = new ImageAnalyzer(options.projectPath || process.cwd());
+
+  if (imagePathOrClipboard === 'clipboard') {
+    return await analyzer.analyzeClipboard();
+  } else {
+    return await analyzer.analyzeImage(imagePathOrClipboard);
+  }
+}
+
+export default ImageAnalyzer;

package/src/debug/index.js

@@ -0,0 +1,378 @@
+// ═══════════════════════════════════════════════════════════════════════════════
+// VIBECODE DEBUG - Main Debug Engine
+// Orchestrates the 9-step intelligent debugging workflow
+// ═══════════════════════════════════════════════════════════════════════════════
+//
+// The 9-Step Debug Protocol:
+// 1. EVIDENCE    - Gather error information
+// 2. REPRODUCE   - Confirm the error exists
+// 3. ANALYZE     - Identify root cause
+// 4. HYPOTHESIZE - Generate fix hypotheses
+// 5. TEST        - Test hypothesis validity
+// 6. FIX         - Apply the fix via Claude Code
+// 7. VERIFY      - Confirm the fix works
+// 8. DOCUMENT    - Log the fix for future reference
+// 9. PREVENT     - Add prevention rules to CLAUDE.md
+//
+// ═══════════════════════════════════════════════════════════════════════════════
+
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import fs from 'fs-extra';
+import path from 'path';
+import chalk from 'chalk';
+
+import { EvidenceCollector } from './evidence.js';
+import { RootCauseAnalyzer } from './analyzer.js';
+import { FixGenerator } from './fixer.js';
+import { FixVerifier } from './verifier.js';
+import { spawnClaudeCode, isClaudeCodeAvailable } from '../providers/index.js';
+import { translateError, formatTranslatedError } from '../ui/error-translator.js';
+import { getLearningEngine } from '../core/learning.js';
+import { askFeedback, showLearningSuggestion } from '../commands/learn.js';
+
+const execAsync = promisify(exec);
+
+/**
+ * Debug Engine Class
+ * Main orchestrator for the debugging workflow
+ */
+export class DebugEngine {
+  constructor(projectPath, options = {}) {
+    this.projectPath = projectPath;
+    this.options = {
+      autoFix: options.autoFix || false,
+      maxAttempts: options.maxAttempts || 3,
+      verbose: options.verbose || false,
+      interactive: options.interactive !== false,
+      ...options
+    };
+
+    // Initialize components
+    this.evidence = new EvidenceCollector(projectPath);
+    this.analyzer = new RootCauseAnalyzer();
+    this.fixer = new FixGenerator(projectPath);
+    this.verifier = new FixVerifier(projectPath);
+
+    // Debug session state
+    this.session = {
+      id: `debug-${Date.now()}`,
+      startTime: new Date().toISOString(),
+      steps: [],
+      attempts: 0,
+      resolved: false
+    };
+  }
+
+  /**
+   * Run the full debug workflow
+   */
+  async debug(input) {
+    console.log(chalk.cyan.bold('\n🔍 VIBECODE DEBUG - Intelligent Bug Fixing\n'));
+
+    try {
+      // Step 1: EVIDENCE - Gather error information
+      this.logStep(1, 'EVIDENCE', 'Gathering error information...');
+      const evidence = await this.evidence.collect(input);
+      this.session.steps.push({ step: 'EVIDENCE', data: evidence });
+      this.logEvidence(evidence);
+
+      // Step 2: REPRODUCE - Confirm error exists (if auto mode)
+      if (input.auto) {
+        this.logStep(2, 'REPRODUCE', 'Confirming error exists...');
+        const reproduced = await this.reproduce(evidence);
+        this.session.steps.push({ step: 'REPRODUCE', data: reproduced });
+
+        if (!reproduced.errorFound) {
+          console.log(chalk.green('  ✓ No errors found during reproduction check'));
+          return this.createResult('no_error', 'No errors found to fix');
+        }
+      }
+
+      // Step 3: ANALYZE - Identify root cause
+      this.logStep(3, 'ANALYZE', 'Analyzing root cause...');
+      const analysis = await this.analyzer.analyze(evidence);
+      this.session.steps.push({ step: 'ANALYZE', data: analysis });
+      this.logAnalysis(analysis);
+
+      // Step 4: HYPOTHESIZE - Generate fix hypotheses
+      this.logStep(4, 'HYPOTHESIZE', 'Generating fix hypotheses...');
+      const hypotheses = this.analyzer.buildHypotheses(analysis);
+      this.session.steps.push({ step: 'HYPOTHESIZE', data: hypotheses });
+      this.logHypotheses(hypotheses);
+
+      if (hypotheses.length === 0) {
+        console.log(chalk.yellow('  ⚠ No fix hypotheses generated'));
+        return this.createResult('no_hypothesis', 'Could not generate fix hypotheses');
+      }
+
+      // Check for learning-based suggestions
+      await showLearningSuggestion(evidence.type, evidence.category);
+
+      // Step 5-7: TEST, FIX, VERIFY - Attempt fixes
+      let fixResult = null;
+      for (let attempt = 0; attempt < this.options.maxAttempts && !this.session.resolved; attempt++) {
+        this.session.attempts = attempt + 1;
+
+        const hypothesis = hypotheses[attempt % hypotheses.length];
+        console.log(chalk.cyan(`\n  Attempt ${attempt + 1}/${this.options.maxAttempts}:`));
+
+        // Step 5: TEST - Generate fix prompt
+        this.logStep(5, 'TEST', 'Preparing fix...');
+        const fixPrompt = this.fixer.generateFixPrompt(evidence, hypothesis);
+        const fixAttempt = this.fixer.createFixAttempt(evidence, hypothesis);
+
+        // Step 6: FIX - Apply fix via Claude Code
+        this.logStep(6, 'FIX', 'Applying fix via Claude Code...');
+        fixResult = await this.applyFix(fixPrompt);
+        fixAttempt.status = fixResult.success ? 'applied' : 'failed';
+
+        if (!fixResult.success) {
+          console.log(chalk.yellow(`  ⚠ Fix application failed: ${fixResult.error}`));
+          continue;
+        }
+
+        // Step 7: VERIFY - Confirm fix works
+        this.logStep(7, 'VERIFY', 'Verifying fix...');
+        const verification = await this.verifier.verify(evidence, fixAttempt);
+        this.session.steps.push({ step: 'VERIFY', data: verification });
+
+        if (verification.passed) {
+          console.log(chalk.green('  ✓ Fix verified successfully!'));
+          this.session.resolved = true;
+          fixAttempt.verified = true;
+
+          // Step 8: DOCUMENT - Log the fix
+          this.logStep(8, 'DOCUMENT', 'Documenting fix...');
+          await this.fixer.documentFix(fixAttempt);
+
+          // Step 9: PREVENT - Add prevention rules
+          this.logStep(9, 'PREVENT', 'Adding prevention rules...');
+          await this.fixer.updateClaudeMd(fixAttempt);
+
+          console.log(chalk.green.bold('\n✅ Bug fixed and documented!\n'));
+
+          // Ask for feedback to improve future suggestions
+          if (this.options.interactive) {
+            await askFeedback({
+              errorType: evidence.type,
+              errorMessage: evidence.message,
+              errorCategory: evidence.category,
+              fixApplied: fixAttempt.description || hypothesis.description
+            });
+          }
+        } else {
+          console.log(chalk.yellow('  ⚠ Verification failed, trying next approach...'));
+        }
+      }
+
+      return this.createResult(
+        this.session.resolved ? 'resolved' : 'unresolved',
+        this.session.resolved ? 'Bug fixed successfully' : 'Could not resolve after max attempts',
+        fixResult
+      );
+
+    } catch (error) {
+      console.log(chalk.red(`\n❌ Debug error: ${error.message}\n`));
+      return this.createResult('error', error.message);
+    }
+  }
+
+  /**
+   * Quick debug mode - minimal interaction
+   */
+  async quickDebug(description) {
+    return this.debug({
+      description,
+      auto: false
+    });
+  }
+
+  /**
+   * Auto scan and fix mode
+   */
+  async autoDebug() {
+    console.log(chalk.cyan('🔄 Auto-scanning project for errors...\n'));
+
+    return this.debug({
+      auto: true
+    });
+  }
+
+  /**
+   * Reproduce the error to confirm it exists
+   */
+  async reproduce(evidence) {
+    const result = {
+      errorFound: false,
+      output: ''
+    };
+
+    // Try to reproduce based on category
+    try {
+      const checks = {
+        SYNTAX: 'npx tsc --noEmit',
+        TYPE: 'npx tsc --noEmit',
+        IMPORT: 'npx tsc --noEmit',
+        BUILD: 'npm run build',
+        LINT: 'npm run lint',
+        TEST: 'npm test'
+      };
+
+      const command = checks[evidence.category] || 'npm run build';
+
+      await execAsync(command, {
+        cwd: this.projectPath,
+        timeout: 60000
+      });
+
+      result.output = 'Command succeeded';
+    } catch (error) {
+      result.errorFound = true;
+      result.output = error.stderr || error.stdout || error.message;
+    }
+
+    return result;
+  }
+
+  /**
+   * Apply a fix using Claude Code
+   */
+  async applyFix(prompt) {
+    const result = {
+      success: false,
+      output: '',
+      error: null
+    };
+
+    try {
+      // Check if Claude Code is available
+      const available = await isClaudeCodeAvailable();
+      if (!available) {
+        throw new Error('Claude Code CLI not found. Install with: npm install -g @anthropic-ai/claude-code');
+      }
+
+      // Save prompt to debug folder for reference
+      const promptFile = path.join(this.projectPath, '.vibecode', 'debug', 'current-fix.md');
+      await fs.ensureDir(path.dirname(promptFile));
+      await fs.writeFile(promptFile, prompt);
+
+      if (this.options.verbose) {
+        console.log(chalk.gray(`  Running Claude Code with fix prompt...`));
+      }
+
+      // Use spawnClaudeCode which handles temp file properly
+      const spawnResult = await spawnClaudeCode(prompt, {
+        cwd: this.projectPath
+      });
+
+      result.success = spawnResult.success;
+      result.output = `Exit code: ${spawnResult.code}`;
+
+    } catch (error) {
+      result.error = error.message;
+      result.output = '';
+    }
+
+    return result;
+  }
+
+  /**
+   * Log a debug step
+   */
+  logStep(number, name, message) {
+    const stepLabel = chalk.cyan(`[${number}/9 ${name}]`);
+    console.log(`${stepLabel} ${message}`);
+  }
+
+  /**
+   * Log evidence summary
+   */
+  logEvidence(evidence) {
+    console.log(chalk.gray(`  Type: ${evidence.type || 'Unknown'}`));
+    console.log(chalk.gray(`  Category: ${evidence.category}`));
+
+    if (evidence.message) {
+      // Translate error for human-friendly display
+      const translated = translateError(evidence.message);
+      console.log(chalk.yellow(`  Error: ${translated.title}`));
+      console.log(chalk.gray(`  → ${translated.description.substring(0, 80)}${translated.description.length > 80 ? '...' : ''}`));
+
+      // Show suggestions
+      if (translated.suggestions && translated.suggestions.length > 0) {
+        console.log(chalk.gray(`  Suggestions:`));
+        for (const s of translated.suggestions.slice(0, 2)) {
+          console.log(chalk.gray(`    • ${s}`));
+        }
+      }
+    }
+
+    if (evidence.files.length > 0) {
+      console.log(chalk.gray(`  Files: ${evidence.files.slice(0, 3).join(', ')}${evidence.files.length > 3 ? '...' : ''}`));
+    }
+  }
+
+  /**
+   * Log analysis results
+   */
+  logAnalysis(analysis) {
+    console.log(chalk.gray(`  Root cause: ${analysis.rootCause || 'Unknown'}`));
+    console.log(chalk.gray(`  Confidence: ${Math.round(analysis.confidence * 100)}%`));
+    if (analysis.patterns.length > 0) {
+      console.log(chalk.gray(`  Patterns: ${analysis.patterns.join(', ')}`));
+    }
+  }
+
+  /**
+   * Log hypotheses
+   */
+  logHypotheses(hypotheses) {
+    console.log(chalk.gray(`  Generated ${hypotheses.length} hypothesis(es):`));
+    for (const h of hypotheses.slice(0, 3)) {
+      console.log(chalk.gray(`  - ${h.description.substring(0, 60)}... (${Math.round(h.confidence * 100)}%)`));
+    }
+  }
+
+  /**
+   * Create result object
+   */
+  createResult(status, message, fixResult = null) {
+    return {
+      status,
+      message,
+      session: {
+        id: this.session.id,
+        attempts: this.session.attempts,
+        resolved: this.session.resolved,
+        steps: this.session.steps.length
+      },
+      fixResult
+    };
+  }
+
+  /**
+   * Get debug session summary
+   */
+  getSessionSummary() {
+    return {
+      id: this.session.id,
+      startTime: this.session.startTime,
+      attempts: this.session.attempts,
+      resolved: this.session.resolved,
+      stepsCompleted: this.session.steps.map(s => s.step)
+    };
+  }
+}
+
+/**
+ * Create a new debug engine instance
+ */
+export function createDebugEngine(projectPath, options = {}) {
+  return new DebugEngine(projectPath, options);
+}
+
+// Re-export components
+export { EvidenceCollector } from './evidence.js';
+export { RootCauseAnalyzer } from './analyzer.js';
+export { FixGenerator } from './fixer.js';
+export { FixVerifier } from './verifier.js';