@nclamvn/vibecode-cli 1.6.0 → 1.7.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/index.js

@@ -41,6 +41,15 @@ export { learnCommand } from './commands/learn.js';
 export { askFeedback, showLearningSuggestion } from './commands/learn.js';
 export { LearningEngine, getLearningEngine, createLearningEngine } from './core/learning.js';
 
+// Phase I Commands - Git Integration
+export { gitCommand, autoCommit } from './commands/git.js';
+
+// Phase I2 Commands - File Watcher
+export { watchCommand } from './commands/watch.js';
+
+// Phase I3 Commands - Shell Mode
+export { shellCommand } from './commands/shell.js';
+
 // UI exports (Phase H2: Dashboard)
 export {
   ProgressDashboard,
@@ -70,6 +79,16 @@ export {
   FixVerifier
 } from './debug/index.js';
 
+// Image Analysis exports (Phase I4)
+export { ImageAnalyzer, analyzeScreenshot } from './debug/image-analyzer.js';
+export {
+  saveClipboardImage,
+  imageToBase64,
+  getImageInfo,
+  isValidImage,
+  cleanupTempImages
+} from './utils/image.js';
+
 // Agent exports
 export {
   VibecodeAgent,

package/src/utils/image.js

@@ -0,0 +1,222 @@
+/**
+ * Image utilities for Vibecode CLI
+ * Handle clipboard images, file reading, and base64 conversion
+ */
+
+import fs from 'fs/promises';
+import path from 'path';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import os from 'os';
+
+const execAsync = promisify(exec);
+
+/**
+ * Save clipboard image to temp file
+ * Supports macOS, Linux, and Windows
+ */
+export async function saveClipboardImage() {
+  const platform = process.platform;
+  const tempDir = os.tmpdir();
+  const tempFile = path.join(tempDir, `vibecode-screenshot-${Date.now()}.png`);
+
+  if (platform === 'darwin') {
+    // macOS: Use pngpaste or osascript
+    try {
+      // Try pngpaste first (if installed via brew install pngpaste)
+      await execAsync(`pngpaste "${tempFile}"`);
+
+      // Verify file was created
+      const stats = await fs.stat(tempFile);
+      if (stats.size > 0) {
+        return tempFile;
+      }
+      throw new Error('Empty file');
+    } catch {
+      // Fallback to osascript
+      try {
+        const script = `
+          set theFile to POSIX file "${tempFile}"
+          try
+            set imageData to the clipboard as «class PNGf»
+            set fileRef to open for access theFile with write permission
+            write imageData to fileRef
+            close access fileRef
+            return "success"
+          on error errMsg
+            return "error: " & errMsg
+          end try
+        `;
+
+        const { stdout } = await execAsync(`osascript -e '${script.replace(/'/g, "'\\''")}'`);
+
+        if (stdout.trim().startsWith('success')) {
+          // Verify file was created
+          const stats = await fs.stat(tempFile);
+          if (stats.size > 0) {
+            return tempFile;
+          }
+        }
+
+        throw new Error('No image in clipboard');
+      } catch (e) {
+        throw new Error('No image in clipboard. Copy a screenshot first (Cmd+Shift+4).');
+      }
+    }
+  } else if (platform === 'linux') {
+    // Linux: Use xclip
+    try {
+      await execAsync(`xclip -selection clipboard -t image/png -o > "${tempFile}" 2>/dev/null`);
+
+      const stats = await fs.stat(tempFile);
+      if (stats.size > 0) {
+        return tempFile;
+      }
+      throw new Error('No image in clipboard');
+    } catch {
+      throw new Error('No image in clipboard. Make sure xclip is installed: sudo apt install xclip');
+    }
+  } else if (platform === 'win32') {
+    // Windows: Use PowerShell
+    try {
+      const psScript = `
+        Add-Type -AssemblyName System.Windows.Forms
+        $img = [System.Windows.Forms.Clipboard]::GetImage()
+        if ($img -ne $null) {
+          $img.Save('${tempFile.replace(/\\/g, '\\\\')}', [System.Drawing.Imaging.ImageFormat]::Png)
+          Write-Output 'success'
+        } else {
+          Write-Output 'no image'
+        }
+      `.replace(/\n/g, ' ');
+
+      const { stdout } = await execAsync(`powershell -Command "${psScript}"`);
+
+      if (stdout.trim() === 'success') {
+        return tempFile;
+      }
+      throw new Error('No image in clipboard');
+    } catch {
+      throw new Error('No image in clipboard');
+    }
+  }
+
+  throw new Error(`Unsupported platform: ${platform}`);
+}
+
+/**
+ * Read image file and convert to base64
+ */
+export async function imageToBase64(imagePath) {
+  const absolutePath = path.resolve(imagePath);
+
+  // Check file exists
+  try {
+    await fs.access(absolutePath);
+  } catch {
+    throw new Error(`Image file not found: ${imagePath}`);
+  }
+
+  // Read file
+  const imageBuffer = await fs.readFile(absolutePath);
+  const base64 = imageBuffer.toString('base64');
+
+  // Detect mime type from extension
+  const ext = path.extname(absolutePath).toLowerCase();
+  const mimeTypes = {
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.webp': 'image/webp',
+    '.bmp': 'image/bmp'
+  };
+  const mimeType = mimeTypes[ext] || 'image/png';
+
+  return {
+    base64,
+    mimeType,
+    dataUrl: `data:${mimeType};base64,${base64}`,
+    path: absolutePath,
+    size: imageBuffer.length
+  };
+}
+
+/**
+ * Get image information
+ */
+export async function getImageInfo(imagePath) {
+  const info = await imageToBase64(imagePath);
+  const stats = await fs.stat(imagePath);
+
+  return {
+    ...info,
+    fileSize: stats.size,
+    fileName: path.basename(imagePath),
+    extension: path.extname(imagePath).toLowerCase()
+  };
+}
+
+/**
+ * Check if file is a valid image
+ */
+export async function isValidImage(imagePath) {
+  const validExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp'];
+  const ext = path.extname(imagePath).toLowerCase();
+
+  if (!validExtensions.includes(ext)) {
+    return false;
+  }
+
+  try {
+    await fs.access(imagePath);
+    const stats = await fs.stat(imagePath);
+    return stats.size > 0;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Cleanup temporary vibecode images
+ */
+export async function cleanupTempImages() {
+  const tempDir = os.tmpdir();
+
+  try {
+    const files = await fs.readdir(tempDir);
+    const vibecodeImages = files.filter(f => f.startsWith('vibecode-screenshot-'));
+
+    let cleaned = 0;
+    for (const file of vibecodeImages) {
+      try {
+        await fs.unlink(path.join(tempDir, file));
+        cleaned++;
+      } catch {
+        // Ignore errors
+      }
+    }
+
+    return cleaned;
+  } catch {
+    return 0;
+  }
+}
+
+/**
+ * Format file size for display
+ */
+export function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export default {
+  saveClipboardImage,
+  imageToBase64,
+  getImageInfo,
+  isValidImage,
+  cleanupTempImages,
+  formatFileSize
+};