sonance-brand-mcp 1.3.18 → 1.3.20

package/dist/assets/api/sonance-vision-apply/route.ts

@@ -0,0 +1,652 @@
+import { NextResponse } from "next/server";
+import * as fs from "fs";
+import * as path from "path";
+import Anthropic from "@anthropic-ai/sdk";
+import { randomUUID } from "crypto";
+
+/**
+ * Sonance DevTools API - Apply-First Vision Mode
+ *
+ * Cursor-style workflow: Apply changes immediately with backups, let user accept/revert.
+ *
+ * Actions:
+ * - "apply": Generate AI changes, create backups, write files immediately
+ * - "accept": Delete backups (user confirmed changes)
+ * - "revert": Restore files from backups
+ *
+ * DEVELOPMENT ONLY.
+ */
+
+interface VisionFocusedElement {
+  name: string;
+  type: string;
+  variantId?: string;
+  coordinates: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  description?: string;
+}
+
+interface VisionFileModification {
+  filePath: string;
+  originalContent: string;
+  modifiedContent: string;
+  diff: string;
+  explanation: string;
+}
+
+interface ApplyFirstRequest {
+  action: "apply" | "accept" | "revert";
+  sessionId?: string;
+  screenshot?: string;
+  pageRoute?: string;
+  userPrompt?: string;
+  focusedElements?: VisionFocusedElement[];
+}
+
+interface BackupManifest {
+  sessionId: string;
+  timestamp: number;
+  files: { original: string; backup: string }[];
+}
+
+const BACKUP_ROOT = ".sonance-backups";
+
+const VISION_SYSTEM_PROMPT = `You are a React/Tailwind CSS expert with vision capabilities for the Sonance brand system.
+
+You can see screenshots of web pages and understand their visual layout, then modify code to implement requested changes.
+
+═══════════════════════════════════════════════════════════════════════════════
+CRITICAL RULES
+═══════════════════════════════════════════════════════════════════════════════
+
+**ANALYSIS:**
+1. CAREFULLY analyze the screenshot to understand the current visual state
+2. Identify elements mentioned in the user's request
+3. Understand the current styling and layout
+4. Consider how changes will affect the overall design
+
+**PRESERVATION RULES:**
+5. NEVER delete or remove existing content, children, or JSX elements
+6. NEVER change component structure unless specifically requested
+7. NEVER modify TypeScript types, imports, or exports unless necessary
+8. NEVER remove data-sonance-* attributes
+
+**CHANGE RULES:**
+9. Make ONLY the changes requested by the user
+10. Modify the minimum amount of code necessary
+11. Use semantic Tailwind classes (bg-primary, text-foreground, etc.)
+12. Maintain dark mode compatibility with CSS variables
+13. Keep the cn() utility for className merging
+
+**SONANCE BRAND COLORS:**
+- Charcoal: #333F48, #343D46 (primary)
+- Silver: #E2E2E2, #D1D1D6 (secondary)
+- IPORT Orange: #FC4C02
+- IPORT Dark: #0F161D
+- Blaze Blue: #00A3E1
+- Blaze Red: #C02B0A
+
+**RESPONSE FORMAT:**
+Return ONLY a valid JSON object. Do not include any conversational text before or after the JSON.
+The JSON must include:
+- "reasoning": Brief explanation of what you see in the screenshot and your plan
+- "modifications": Array of file modifications, each with:
+  - "filePath": Path to the file
+  - "modifiedContent": Complete updated file content
+  - "explanation": What changed in this file
+- "explanation": Overall summary of changes`;
+
+export async function POST(request: Request) {
+  // Only allow in development
+  if (process.env.NODE_ENV !== "development") {
+    return NextResponse.json(
+      { error: "Apply-first mode is only available in development" },
+      { status: 403 }
+    );
+  }
+
+  try {
+    const body: ApplyFirstRequest = await request.json();
+    const { action, sessionId, screenshot, pageRoute, userPrompt, focusedElements } = body;
+    const projectRoot = process.cwd();
+
+    // ========== ACCEPT ACTION ==========
+    if (action === "accept") {
+      if (!sessionId) {
+        return NextResponse.json(
+          { error: "sessionId is required for accept action" },
+          { status: 400 }
+        );
+      }
+
+      const backupDir = path.join(projectRoot, BACKUP_ROOT, sessionId);
+
+      // Just delete the backup directory
+      if (fs.existsSync(backupDir)) {
+        fs.rmSync(backupDir, { recursive: true });
+      }
+
+      return NextResponse.json({
+        success: true,
+        message: "Changes accepted, backups deleted",
+      });
+    }
+
+    // ========== REVERT ACTION ==========
+    if (action === "revert") {
+      if (!sessionId) {
+        return NextResponse.json(
+          { error: "sessionId is required for revert action" },
+          { status: 400 }
+        );
+      }
+
+      const result = await revertFromBackups(sessionId, projectRoot);
+
+      return NextResponse.json({
+        success: result.success,
+        message: result.message,
+        filesReverted: result.filesReverted,
+      });
+    }
+
+    // ========== APPLY ACTION ==========
+    if (action === "apply") {
+      if (!userPrompt) {
+        return NextResponse.json(
+          { error: "userPrompt is required for apply action" },
+          { status: 400 }
+        );
+      }
+
+      // Check for API key
+      const apiKey = process.env.NEXT_PUBLIC_CLAUDE_API_KEY;
+      if (!apiKey) {
+        return NextResponse.json(
+          { error: "NEXT_PUBLIC_CLAUDE_API_KEY not configured. Add it to your .env.local file." },
+          { status: 500 }
+        );
+      }
+
+      // Generate a unique session ID
+      const newSessionId = randomUUID().slice(0, 8);
+
+      // Gather page context
+      const pageContext = gatherPageContext(pageRoute || "/", projectRoot);
+
+      // Build user message with vision
+      const messageContent: Anthropic.MessageCreateParams["messages"][0]["content"] = [];
+
+      // Add screenshot if provided
+      if (screenshot) {
+        const base64Data = screenshot.split(",")[1] || screenshot;
+        messageContent.push({
+          type: "image",
+          source: {
+            type: "base64",
+            media_type: "image/png",
+            data: base64Data,
+          },
+        });
+      }
+
+      // Build text content
+      let textContent = `VISION MODE EDIT REQUEST
+
+Page Route: ${pageRoute}
+User Request: "${userPrompt}"
+
+`;
+
+      if (focusedElements && focusedElements.length > 0) {
+        textContent += `FOCUSED ELEMENTS (user clicked on these):
+${focusedElements.map((el) => `- ${el.name} (${el.type}) at (${el.coordinates.x}, ${el.coordinates.y})`).join("\n")}
+
+`;
+      }
+
+      textContent += `PAGE CONTEXT:
+
+Page File: ${pageContext.pageFile || "Not found"}
+${pageContext.pageContent ? `\`\`\`tsx\n${pageContext.pageContent}\n\`\`\`` : ""}
+
+`;
+
+      if (pageContext.componentSources.length > 0) {
+        textContent += `IMPORTED COMPONENTS:\n`;
+        for (const comp of pageContext.componentSources) {
+          textContent += `
+File: ${comp.path}
+\`\`\`tsx
+${comp.content.substring(0, 3000)}${comp.content.length > 3000 ? "\n// ... (truncated)" : ""}
+\`\`\`
+`;
+        }
+      }
+
+      textContent += `
+GLOBALS.CSS (relevant theme variables):
+\`\`\`css
+${pageContext.globalsCSS.substring(0, 2000)}${pageContext.globalsCSS.length > 2000 ? "\n/* ... (truncated) */" : ""}
+\`\`\`
+
+INSTRUCTIONS:
+1. Look at the screenshot and identify elements mentioned in the user's request
+2. Review the code to understand current implementation
+3. Determine which files need modifications
+4. Generate complete modified code for each file
+5. Return as JSON in the specified format`;
+
+      messageContent.push({
+        type: "text",
+        text: textContent,
+      });
+
+      // Call Claude Vision API
+      const anthropic = new Anthropic({ apiKey });
+
+      const response = await anthropic.messages.create({
+        model: "claude-sonnet-4-20250514",
+        max_tokens: 16384,
+        messages: [
+          {
+            role: "user",
+            content: messageContent,
+          },
+        ],
+        system: VISION_SYSTEM_PROMPT,
+      });
+
+      // Extract text content from response
+      const textResponse = response.content.find((block) => block.type === "text");
+      if (!textResponse || textResponse.type !== "text") {
+        return NextResponse.json(
+          { error: "No text response from AI" },
+          { status: 500 }
+        );
+      }
+
+      // Parse AI response
+      let aiResponse: {
+        reasoning?: string;
+        modifications: Array<{
+          filePath: string;
+          modifiedContent: string;
+          explanation: string;
+        }>;
+        explanation?: string;
+      };
+
+      try {
+        let jsonText = textResponse.text.trim();
+
+        // Try to extract JSON from markdown code blocks
+        const jsonMatch = jsonText.match(/```json\n([\s\S]*?)\n```/) ||
+                         jsonText.match(/```\n([\s\S]*?)\n```/);
+
+        if (jsonMatch) {
+          jsonText = jsonMatch[1];
+        } else if (jsonText.includes("```json")) {
+          const start = jsonText.indexOf("```json") + 7;
+          const end = jsonText.lastIndexOf("```");
+          if (end > start) {
+            jsonText = jsonText.substring(start, end);
+          }
+        }
+
+        jsonText = jsonText.trim();
+        aiResponse = JSON.parse(jsonText);
+      } catch {
+        console.error("Failed to parse AI response:", textResponse.text);
+        return NextResponse.json(
+          { error: "Failed to parse AI response. Please try again." },
+          { status: 500 }
+        );
+      }
+
+      if (!aiResponse.modifications || aiResponse.modifications.length === 0) {
+        return NextResponse.json({
+          success: true,
+          sessionId: newSessionId,
+          modifications: [],
+          explanation: aiResponse.explanation || "No changes needed.",
+          reasoning: aiResponse.reasoning,
+        });
+      }
+
+      // Read original content and prepare modifications
+      const modifications: VisionFileModification[] = [];
+      for (const mod of aiResponse.modifications) {
+        const fullPath = path.join(projectRoot, mod.filePath);
+        let originalContent = "";
+        if (fs.existsSync(fullPath)) {
+          originalContent = fs.readFileSync(fullPath, "utf-8");
+        }
+
+        modifications.push({
+          filePath: mod.filePath,
+          originalContent,
+          modifiedContent: mod.modifiedContent,
+          diff: generateSimpleDiff(originalContent, mod.modifiedContent),
+          explanation: mod.explanation,
+        });
+      }
+
+      // Create backups and apply changes atomically
+      const applyResult = await applyChangesWithBackup(
+        modifications,
+        newSessionId,
+        projectRoot
+      );
+
+      if (!applyResult.success) {
+        return NextResponse.json(
+          { error: applyResult.error || "Failed to apply changes" },
+          { status: 500 }
+        );
+      }
+
+      return NextResponse.json({
+        success: true,
+        sessionId: newSessionId,
+        modifications,
+        backupPaths: applyResult.backupPaths,
+        explanation: aiResponse.explanation,
+        reasoning: aiResponse.reasoning,
+      });
+    }
+
+    return NextResponse.json(
+      { error: "Invalid action. Use 'apply', 'accept', or 'revert'." },
+      { status: 400 }
+    );
+  } catch (error) {
+    console.error("Apply-first error:", error);
+    return NextResponse.json(
+      { error: "Failed to process request", details: String(error) },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * Apply changes with backup - atomic operation
+ */
+async function applyChangesWithBackup(
+  modifications: VisionFileModification[],
+  sessionId: string,
+  projectRoot: string
+): Promise<{ success: boolean; backupPaths: string[]; error?: string }> {
+  const backupDir = path.join(projectRoot, BACKUP_ROOT, sessionId);
+  const backupPaths: string[] = [];
+
+  try {
+    // Step 1: Create backup directory
+    fs.mkdirSync(backupDir, { recursive: true });
+
+    // Step 2: Create ALL backups FIRST (before any writes)
+    for (const mod of modifications) {
+      const fullPath = path.join(projectRoot, mod.filePath);
+
+      if (fs.existsSync(fullPath)) {
+        const backupPath = path.join(backupDir, mod.filePath);
+        const backupDirForFile = path.dirname(backupPath);
+
+        fs.mkdirSync(backupDirForFile, { recursive: true });
+        fs.copyFileSync(fullPath, backupPath);
+        backupPaths.push(backupPath);
+      }
+    }
+
+    // Step 3: Write manifest
+    const manifest: BackupManifest = {
+      sessionId,
+      timestamp: Date.now(),
+      files: modifications.map(m => ({
+        original: m.filePath,
+        backup: path.join(backupDir, m.filePath),
+      })),
+    };
+
+    fs.writeFileSync(
+      path.join(backupDir, "manifest.json"),
+      JSON.stringify(manifest, null, 2)
+    );
+
+    // Step 4: Apply all changes
+    for (const mod of modifications) {
+      const fullPath = path.join(projectRoot, mod.filePath);
+
+      // Validate path is within project
+      if (!fullPath.startsWith(projectRoot)) {
+        throw new Error(`Invalid file path: ${mod.filePath}`);
+      }
+
+      // Ensure directory exists
+      const dir = path.dirname(fullPath);
+      if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+      }
+
+      fs.writeFileSync(fullPath, mod.modifiedContent, "utf-8");
+    }
+
+    return { success: true, backupPaths };
+  } catch (error) {
+    // Rollback on error - restore all backed up files
+    console.error("Error applying changes, rolling back:", error);
+
+    try {
+      await revertFromBackups(sessionId, projectRoot);
+    } catch (rollbackError) {
+      console.error("Rollback also failed:", rollbackError);
+    }
+
+    return {
+      success: false,
+      backupPaths: [],
+      error: error instanceof Error ? error.message : "Unknown error",
+    };
+  }
+}
+
+/**
+ * Revert files from backups
+ */
+async function revertFromBackups(
+  sessionId: string,
+  projectRoot: string
+): Promise<{ success: boolean; message: string; filesReverted: number }> {
+  const backupDir = path.join(projectRoot, BACKUP_ROOT, sessionId);
+
+  if (!fs.existsSync(backupDir)) {
+    return {
+      success: false,
+      message: "Backup session not found",
+      filesReverted: 0,
+    };
+  }
+
+  try {
+    const manifestPath = path.join(backupDir, "manifest.json");
+
+    if (!fs.existsSync(manifestPath)) {
+      // If no manifest, try to restore any backup files we find
+      return {
+        success: false,
+        message: "Backup manifest not found",
+        filesReverted: 0,
+      };
+    }
+
+    const manifest: BackupManifest = JSON.parse(
+      fs.readFileSync(manifestPath, "utf-8")
+    );
+
+    let filesReverted = 0;
+
+    for (const file of manifest.files) {
+      const backupPath = path.join(backupDir, file.original);
+      const originalPath = path.join(projectRoot, file.original);
+
+      if (fs.existsSync(backupPath)) {
+        fs.copyFileSync(backupPath, originalPath);
+        filesReverted++;
+      }
+    }
+
+    // Delete backup directory after successful revert
+    fs.rmSync(backupDir, { recursive: true });
+
+    return {
+      success: true,
+      message: `Reverted ${filesReverted} file(s)`,
+      filesReverted,
+    };
+  } catch (error) {
+    console.error("Error reverting from backups:", error);
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : "Unknown error",
+      filesReverted: 0,
+    };
+  }
+}
+
+/**
+ * Gather context about the current page for AI analysis
+ */
+function gatherPageContext(
+  pageRoute: string,
+  projectRoot: string
+): {
+  pageFile: string | null;
+  pageContent: string;
+  componentSources: { path: string; content: string }[];
+  globalsCSS: string;
+} {
+  const pageFile = discoverPageFile(pageRoute, projectRoot);
+  let pageContent = "";
+  const componentSources: { path: string; content: string }[] = [];
+
+  if (pageFile) {
+    const fullPath = path.join(projectRoot, pageFile);
+    if (fs.existsSync(fullPath)) {
+      pageContent = fs.readFileSync(fullPath, "utf-8");
+
+      const imports = extractImports(pageContent);
+      for (const importPath of imports) {
+        const resolvedPath = resolveImportPath(importPath, pageFile, projectRoot);
+        if (resolvedPath && fs.existsSync(path.join(projectRoot, resolvedPath))) {
+          try {
+            const content = fs.readFileSync(path.join(projectRoot, resolvedPath), "utf-8");
+            componentSources.push({ path: resolvedPath, content });
+          } catch {
+            // Skip files that can't be read
+          }
+        }
+      }
+    }
+  }
+
+  let globalsCSS = "";
+  const globalsPath = path.join(projectRoot, "src/app/globals.css");
+  if (fs.existsSync(globalsPath)) {
+    globalsCSS = fs.readFileSync(globalsPath, "utf-8");
+  }
+
+  return { pageFile, pageContent, componentSources, globalsCSS };
+}
+
+function discoverPageFile(route: string, projectRoot: string): string | null {
+  if (route === "/" || route === "") {
+    const rootPage = "src/app/page.tsx";
+    if (fs.existsSync(path.join(projectRoot, rootPage))) {
+      return rootPage;
+    }
+    return null;
+  }
+
+  const cleanRoute = route.replace(/^\//, "");
+  const patterns = [
+    `src/app/${cleanRoute}/page.tsx`,
+    `src/app/${cleanRoute}/page.jsx`,
+    `src/app/${cleanRoute}.tsx`,
+  ];
+
+  for (const pattern of patterns) {
+    if (fs.existsSync(path.join(projectRoot, pattern))) {
+      return pattern;
+    }
+  }
+
+  return null;
+}
+
+function extractImports(content: string): string[] {
+  const importRegex = /import\s+.*?\s+from\s+["'](@\/components\/[^"']+|\.\.?\/[^"']+)["']/g;
+  const imports: string[] = [];
+  let match;
+
+  while ((match = importRegex.exec(content)) !== null) {
+    imports.push(match[1]);
+  }
+
+  return imports;
+}
+
+function resolveImportPath(
+  importPath: string,
+  fromFile: string,
+  projectRoot: string
+): string | null {
+  if (importPath.startsWith("@/")) {
+    const resolved = importPath.replace("@/", "src/");
+    const withExt = resolved.endsWith(".tsx") ? resolved : `${resolved}.tsx`;
+    if (fs.existsSync(path.join(projectRoot, withExt))) {
+      return withExt;
+    }
+    const indexPath = `${resolved}/index.tsx`;
+    if (fs.existsSync(path.join(projectRoot, indexPath))) {
+      return indexPath;
+    }
+    return withExt;
+  }
+
+  if (importPath.startsWith(".")) {
+    const dir = path.dirname(fromFile);
+    const resolved = path.join(dir, importPath);
+    const withExt = resolved.endsWith(".tsx") ? resolved : `${resolved}.tsx`;
+    return withExt;
+  }
+
+  return null;
+}
+
+function generateSimpleDiff(original: string, modified: string): string {
+  const originalLines = original.split("\n");
+  const modifiedLines = modified.split("\n");
+
+  const diff: string[] = [];
+  const maxLines = Math.max(originalLines.length, modifiedLines.length);
+
+  for (let i = 0; i < maxLines; i++) {
+    const origLine = originalLines[i];
+    const modLine = modifiedLines[i];
+
+    if (origLine === undefined && modLine !== undefined) {
+      diff.push(`+ ${modLine}`);
+    } else if (origLine !== undefined && modLine === undefined) {
+      diff.push(`- ${origLine}`);
+    } else if (origLine !== modLine) {
+      diff.push(`- ${origLine}`);
+      diff.push(`+ ${modLine}`);
+    }
+  }
+
+  return diff.join("\n");
+}