sonance-brand-mcp 1.3.57 → 1.3.58

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

@@ -40,12 +40,14 @@ interface VisionFileModification {
 }
 
 interface ApplyFirstRequest {
-  action: "apply" | "accept" | "revert";
+  action: "apply" | "accept" | "revert" | "preview";
   sessionId?: string;
   screenshot?: string;
   pageRoute?: string;
   userPrompt?: string;
   focusedElements?: VisionFocusedElement[];
+  // For applying a previously previewed set of modifications
+  previewedModifications?: VisionFileModification[];
 }
 
 interface BackupManifest {
@@ -436,102 +438,41 @@ function searchFilesSmart(
   return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score }));
 }
 
-const VISION_SYSTEM_PROMPT = `You are an expert React/TypeScript developer with vision capabilities. You can see screenshots and modify code.
-
-═══════════════════════════════════════════════════════════════════════════════
-UNDERSTAND THE USER'S REQUEST NATURALLY
-═══════════════════════════════════════════════════════════════════════════════
-
-Read the user's request and do exactly what they ask. You know React, TypeScript, Tailwind CSS, and JSX - use that knowledge naturally.
-
-- If they say "add X", ADD X to the code (don't replace or remove anything else)
-- If they say "change X to Y", find X and change it to Y
-- If they say "make X bigger/smaller/different color", adjust the relevant properties
-- If they say "remove X", remove X
-- If they say "wrap X with Y", add Y as a parent around X
-
-For any change:
-1. Read the code context provided
-2. Understand what the user wants
-3. Generate patches that accomplish exactly that
-4. If adding a component/icon requires an import, include a patch for the import too
-
-Don't overthink - just make the change the user requested.
-
-═══════════════════════════════════════════════════════════════════════════════
-PATCH FORMAT
-═══════════════════════════════════════════════════════════════════════════════
-
-Return search/replace patches (NOT full files). The system applies your patches to the original.
-
-**Patch Rules:**
-- "search" must match the original code EXACTLY (including whitespace/indentation)
-- "replace" contains your modified version
-- Include 2-4 lines of context in "search" to make it unique
-- You may ONLY edit files provided in the PAGE CONTEXT section
-- CRITICAL: NEVER invent or guess code. Your "search" string MUST be copied EXACTLY from the provided file content. If you cannot find the exact code to modify, return an empty modifications array.
-- If the file content appears truncated, only modify code that is visible in the provided content.
-
-═══════════════════════════════════════════════════════════════════════════════
-SONANCE BRAND COLOR SYSTEM
-═══════════════════════════════════════════════════════════════════════════════
-
-**Core Colors:**
-- Primary (Charcoal): #333F48 - main text, dark backgrounds
-- Accent (Cyan "The Beam"): #00D3C8 - highlights, interactive elements, CTAs
-- Success: Green tones - positive states, confirmations
-- Warning: Amber/Orange tones - caution states, alerts
-- Destructive: Red tones - errors, delete actions
-
-**CRITICAL CONTRAST RULES:**
-When using colored backgrounds, ALWAYS use high-contrast text:
-
-| Background        | Use This Text                      | NEVER Use              |
-|-------------------|------------------------------------|-----------------------|
-| bg-accent         | text-white                         | text-accent-foreground |
-| bg-primary        | text-primary-foreground, text-white | text-primary          |
-| bg-success        | text-white                         | text-success          |
-| bg-warning        | text-white                         | text-warning          |
-| bg-destructive    | text-white                         | text-destructive      |
-
-**SEMANTIC TOKEN PATTERNS:**
-- text-{color} = the color itself (use on NEUTRAL backgrounds like white/gray)
-- text-{color}-foreground = INTENDED for text on {color} backgrounds, but MAY have contrast issues
-- bg-{color} = background in that color
-- WHEN IN DOUBT: Use text-white on any colored background for guaranteed contrast
-
-**BUTTON PATTERNS (Sonance Standard):**
-- Primary CTA: bg-primary text-primary-foreground
-- Accent/Highlight: bg-accent text-white (NOT text-accent-foreground)
-- Success: bg-success text-white
-- Warning: bg-warning text-white
-- Destructive: bg-destructive text-white
-- Outlined: border-border bg-transparent text-foreground
-
-**COMMON MISTAKES TO AVOID:**
-- WRONG: bg-accent text-accent-foreground (accent-foreground is often dark = invisible text)
-- RIGHT: bg-accent text-white (white text on cyan = visible)
-- WRONG: bg-primary text-primary (same color = invisible)
-- RIGHT: bg-primary text-primary-foreground OR text-white
-
-**RESPONSE FORMAT:**
-CRITICAL: Return ONLY the JSON object below. Do NOT include any text, explanation, or thinking before or after the JSON. No preamble. No "Looking at the screenshot..." No markdown code blocks. Just raw JSON:
+const VISION_SYSTEM_PROMPT = `You are a code editor. Make ONLY the change the user requested.
+
+RULES:
+1. Make the SMALLEST possible change to accomplish the request
+2. Do NOT refactor, rebrand, or "improve" anything else
+3. Do NOT change import statements unless explicitly required
+4. Do NOT change component libraries (e.g., heroui to shadcn)
+5. If fixing a color/visibility issue, change ONLY that element's classes
+6. Your patch should typically be 1-5 lines, not 50+
+7. NEVER invent or guess code - your "search" string MUST match the file EXACTLY
+8. NEVER change data mappings (icon names, keys, enum values) unless user explicitly provides the new values
+9. If you don't know what values exist in a database or data source, DO NOT guess - ask for clarification
+
+CRITICAL - DATA INTEGRITY:
+- If code references database values (like icon_name, type, status), DO NOT change the mapping keys
+- You cannot see database content - only change STRUCTURE, not DATA MAPPINGS
+- Example: If you see iconMap["EyeOff"] = SomeIcon, do NOT change "EyeOff" to something else
+- If user wants different icons, they must tell you the EXACT icon names they want
+
+PATCH FORMAT:
+Return ONLY raw JSON (no markdown, no preamble):
 {
-  "reasoning": "What you understood from the request and your plan",
-  "modifications": [
-    {
-      "filePath": "path/to/file.tsx",
-      "patches": [
-        {
-          "search": "exact code to find",
-          "replace": "the replacement code",
-          "explanation": "what this patch does"
-        }
-      ]
-    }
-  ],
-  "explanation": "summary of changes made"
-}`;
+  "reasoning": "brief explanation",
+  "modifications": [{
+    "filePath": "path/to/file.tsx",
+    "patches": [{
+      "search": "exact original code (copy from provided file)",
+      "replace": "minimal change",
+      "explanation": "what this does"
+    }]
+  }],
+  "explanation": "summary"
+}
+
+If you cannot find the exact code to modify, OR if you would need to guess data values, return empty modifications array with explanation.`;
 
 export async function POST(request: Request) {
   // Only allow in development
@@ -544,7 +485,7 @@ export async function POST(request: Request) {
 
   try {
     const body: ApplyFirstRequest = await request.json();
-    const { action, sessionId, screenshot, pageRoute, userPrompt, focusedElements } = body;
+    const { action, sessionId, screenshot, pageRoute, userPrompt, focusedElements, previewedModifications } = body;
     const projectRoot = process.cwd();
 
     // ========== ACCEPT ACTION ==========
@@ -571,6 +512,8 @@ export async function POST(request: Request) {
 
     // ========== REVERT ACTION ==========
     if (action === "revert") {
+      console.log(`[Apply-First] Revert requested for session: ${sessionId}`);
+      
       if (!sessionId) {
         return NextResponse.json(
           { error: "sessionId is required for revert action" },
@@ -579,6 +522,7 @@ export async function POST(request: Request) {
       }
 
       const result = await revertFromBackups(sessionId, projectRoot);
+      console.log(`[Apply-First] Revert result:`, result);
 
       return NextResponse.json({
         success: result.success,
@@ -588,11 +532,44 @@ export async function POST(request: Request) {
       });
     }
 
-    // ========== APPLY ACTION ==========
-    if (action === "apply") {
+    // ========== APPLY FROM PREVIEW ACTION ==========
+    // When user accepts a preview, apply the previously generated modifications
+    if (action === "apply" && previewedModifications && previewedModifications.length > 0) {
+      debugLog("Applying previewed modifications", { 
+        count: previewedModifications.length,
+        files: previewedModifications.map(m => m.filePath)
+      });
+      
+      const newSessionId = randomUUID().slice(0, 8);
+      
+      const applyResult = await applyChangesWithBackup(
+        previewedModifications,
+        newSessionId,
+        projectRoot
+      );
+
+      if (!applyResult.success) {
+        return NextResponse.json(
+          { error: applyResult.error || "Failed to apply previewed changes" },
+          { status: 500 }
+        );
+      }
+
+      return NextResponse.json({
+        success: true,
+        sessionId: newSessionId,
+        modifications: previewedModifications,
+        backupPaths: applyResult.backupPaths,
+        explanation: "Applied previewed changes",
+      });
+    }
+
+    // ========== APPLY/PREVIEW ACTION (with LLM) ==========
+    // Both actions do LLM work; "preview" returns without writing, "apply" writes to files
+    if (action === "apply" || action === "preview") {
       if (!userPrompt) {
         return NextResponse.json(
-          { error: "userPrompt is required for apply action" },
+          { error: "userPrompt is required for apply/preview action" },
           { status: 400 }
         );
       }
@@ -699,141 +676,6 @@ export async function POST(request: Request) {
         });
       }
 
-      // ========== PHASE A: VISUAL PROBLEM ANALYSIS ==========
-      // Before generating patches, analyze WHAT is visually wrong
-      // This forces the LLM to articulate the problem before trying to fix it
-      interface VisualAnalysis {
-        element: string;
-        elementText: string; // The visible text content of the element (for finding in code)
-        problem: string;
-        changeType: "styling" | "structural" | "content" | "other";
-        currentClasses?: string; // For styling changes: what classes appear to be applied
-        classChange?: {
-          remove?: string[]; // Classes to remove
-          add?: string[]; // Classes to add
-        };
-        structuralChange?: string; // For structural changes: what to add/remove/wrap
-        solution: string;
-        confidence: "high" | "medium" | "low";
-      }
-      
-      let visualAnalysis: VisualAnalysis | null = null;
-      
-      if (screenshot && userPrompt) {
-        debugLog("Phase A: Starting visual problem analysis");
-        
-        const analysisClient = new Anthropic({ apiKey });
-        
-        try {
-          const analysisResponse = await analysisClient.messages.create({
-            model: "claude-sonnet-4-20250514",
-            max_tokens: 1024,
-            messages: [
-              {
-                role: "user",
-                content: [
-                  {
-                    type: "image",
-                    source: {
-                      type: "base64",
-                      media_type: "image/png",
-                      data: base64Data,
-                    },
-                  },
-                  {
-                    type: "text",
-                    text: `You are analyzing a UI screenshot to understand what the user wants changed.
-
-User request: "${userPrompt}"
-
-${focusedElements && focusedElements.length > 0 ? `User clicked on these elements:
-${focusedElements.map((el) => `- ${el.name} (${el.type}) at position (${el.coordinates.x}, ${el.coordinates.y})`).join("\n")}
-` : ""}
-
-Analyze the request and determine:
-1. ELEMENT: Which specific UI element needs to change? (describe location and appearance)
-2. ELEMENT TEXT: What text is visible inside this element? (EXACT text for finding in code)
-3. PROBLEM: What is wrong or what does the user want changed?
-4. CHANGE TYPE: Is this a "styling" (colors/size/spacing), "structural" (add/remove elements), "content" (text changes), or "other" change?
-5. For STYLING changes: What Tailwind classes should be REMOVED and what should be ADDED?
-6. For STRUCTURAL changes: What element should be added, removed, or wrapped?
-7. SOLUTION: Describe the complete fix
-8. CONFIDENCE: high/medium/low
-
-IMPORTANT for styling fixes:
-- If text is invisible on a background, typically REMOVE the problematic text color class and ADD a contrasting one
-- Common fix for invisible text on colored backgrounds: REMOVE "text-accent-foreground" or similar, ADD "text-white" or "text-black"
-- Be SPECIFIC about exact class names
-
-Return ONLY valid JSON:
-{
-  "element": "description of the UI element",
-  "elementText": "exact visible text in the element",
-  "problem": "what is wrong",
-  "changeType": "styling",
-  "currentClasses": "classes that appear to be applied (best guess)",
-  "classChange": {
-    "remove": ["text-accent-foreground"],
-    "add": ["text-white"]
-  },
-  "solution": "complete description of the fix",
-  "confidence": "high"
-}
-
-For structural changes:
-{
-  "element": "description of the UI element",
-  "elementText": "text near the element",
-  "problem": "what is wrong",
-  "changeType": "structural",
-  "structuralChange": "Add a new button after the existing one",
-  "solution": "complete description of the fix",
-  "confidence": "high"
-}`,
-                  },
-                ],
-              },
-            ],
-          });
-          
-          const analysisText = analysisResponse.content.find((block) => block.type === "text");
-          if (analysisText && analysisText.type === "text") {
-            // Parse the JSON response
-            let jsonText = analysisText.text.trim();
-            // Extract JSON if wrapped in code blocks
-            const jsonMatch = jsonText.match(/```(?:json)?\s*([\s\S]*?)\s*```/) || jsonText.match(/(\{[\s\S]*\})/);
-            if (jsonMatch) {
-              jsonText = jsonMatch[1];
-            }
-            
-            try {
-              visualAnalysis = JSON.parse(jsonText) as VisualAnalysis;
-              debugLog("Phase A: Visual problem analysis complete", visualAnalysis);
-              
-              // If low confidence, return early with clarification request
-              if (visualAnalysis.confidence === "low") {
-                debugLog("Phase A: Low confidence - requesting clarification");
-                return NextResponse.json({
-                  success: false,
-                  needsClarification: true,
-                  analysis: visualAnalysis,
-                  message: `I can see "${visualAnalysis.element}" but I'm not certain about the problem: "${visualAnalysis.problem}". Can you be more specific about what needs to change?`,
-                });
-              }
-            } catch (parseError) {
-              debugLog("Phase A: Failed to parse analysis response", { 
-                error: String(parseError), 
-                response: jsonText.substring(0, 500) 
-              });
-              // Continue without analysis if parsing fails
-            }
-          }
-        } catch (analysisError) {
-          debugLog("Phase A: Analysis call failed", { error: String(analysisError) });
-          // Continue without analysis - fall back to existing behavior
-        }
-      }
-
       // ========== SMART CONTEXT BUDGETING ==========
       // Claude can handle 200k tokens (~800k chars), so we can safely include large files
       // Priority: Recommended file (NEVER truncate) > Page file (limited) > Other components (dynamic)
@@ -870,58 +712,6 @@ ${focusedElements.map((el) => `- ${el.name} (${el.type}) at (${el.coordinates.x}
 `;
       }
 
-      // ========== VISUAL PROBLEM ANALYSIS (from Phase A) ==========
-      if (visualAnalysis) {
-        let analysisInstructions = `═══════════════════════════════════════════════════════════════════════════════
-🔍 VISUAL PROBLEM ANALYSIS (I analyzed the screenshot first)
-═══════════════════════════════════════════════════════════════════════════════
-
-**Element:** ${visualAnalysis.element}
-**Element Text:** "${visualAnalysis.elementText || "unknown"}"
-**Problem:** ${visualAnalysis.problem}
-**Change Type:** ${visualAnalysis.changeType}
-**Solution:** ${visualAnalysis.solution}
-**Confidence:** ${visualAnalysis.confidence}
-
-`;
-
-        // Add specific instructions based on change type
-        if (visualAnalysis.changeType === "styling" && visualAnalysis.classChange) {
-          analysisInstructions += `🎯 EXACT CLASS CHANGES REQUIRED:
-`;
-          if (visualAnalysis.classChange.remove && visualAnalysis.classChange.remove.length > 0) {
-            analysisInstructions += `   REMOVE these classes: ${visualAnalysis.classChange.remove.join(", ")}
-`;
-          }
-          if (visualAnalysis.classChange.add && visualAnalysis.classChange.add.length > 0) {
-            analysisInstructions += `   ADD these classes: ${visualAnalysis.classChange.add.join(", ")}
-`;
-          }
-          analysisInstructions += `
-⚠️ YOUR PATCH MUST:
-1. Find the element containing "${visualAnalysis.elementText || visualAnalysis.element}"
-2. In its className, ${visualAnalysis.classChange.remove?.length ? `REMOVE: ${visualAnalysis.classChange.remove.join(", ")}` : ""}
-3. ${visualAnalysis.classChange.add?.length ? `ADD: ${visualAnalysis.classChange.add.join(", ")}` : ""}
-4. Do NOT add unrelated changes like font-weight or hover states unless specifically requested
-
-`;
-        } else if (visualAnalysis.changeType === "structural" && visualAnalysis.structuralChange) {
-          analysisInstructions += `🔧 STRUCTURAL CHANGE REQUIRED:
-${visualAnalysis.structuralChange}
-
-⚠️ YOUR PATCH MUST implement this structural change exactly as described.
-
-`;
-        } else {
-          analysisInstructions += `⚠️ IMPORTANT: Your patches MUST implement the fix described above.
-Find the code that renders "${visualAnalysis.element}" and apply: ${visualAnalysis.solution}
-
-`;
-        }
-        
-        textContent += analysisInstructions;
-      }
-
       // ========== TARGET COMPONENT (RECOMMENDED FILE) - SHOWN FIRST ==========
       if (recommendedFileContent) {
         // Never truncate the recommended file - AI needs full context to avoid hallucination
@@ -986,17 +776,27 @@ ${truncatedContent}${wasTruncated ? "\n// ... (truncated)" : ""}
         }
       }
 
-      // ========== THEME DISCOVERY ==========
+      // ========== THEME DISCOVERY (REFERENCE ONLY) ==========
       // Dynamically discover theme tokens from the target codebase
+      // This is marked as REFERENCE ONLY so the LLM doesn't use it to justify extra changes
       const discoveredTheme = await discoverTheme(projectRoot);
       const themeContext = formatThemeForPrompt(discoveredTheme);
       
       if (discoveredTheme.discoveredFiles.length > 0) {
         textContent += `
 ═══════════════════════════════════════════════════════════════════════════════
-${themeContext}
+REFERENCE ONLY (do not use this to justify additional changes)
 ═══════════════════════════════════════════════════════════════════════════════
 
+If you need to pick a color for a VISIBILITY fix, these are safe choices:
+- bg-accent text-white (cyan button with white text)
+- bg-primary text-white (charcoal button with white text)
+- bg-success text-white (green button with white text)
+- bg-destructive text-white (red button with white text)
+
+But ONLY use these if the user is asking for a color/visibility change.
+Do NOT rebrand or change other elements to match.
+
 `;
         debugLog("Theme discovery complete", {
           filesFound: discoveredTheme.discoveredFiles,
@@ -1369,7 +1169,23 @@ This is better than generating patches with made-up code.`,
         break;
       } // End of retry loop
 
-      // Create backups and apply changes atomically
+      // ========== PREVIEW MODE: Return modifications without writing ==========
+      if (action === "preview") {
+        debugLog("Preview mode: returning modifications without applying", {
+          fileCount: modifications.length,
+          files: modifications.map(m => m.filePath)
+        });
+        
+        return NextResponse.json({
+          success: true,
+          preview: true,
+          modifications,
+          explanation: finalExplanation,
+          reasoning: finalReasoning,
+        });
+      }
+
+      // ========== APPLY MODE: Create backups and apply changes atomically ==========
       const applyResult = await applyChangesWithBackup(
         modifications,
         newSessionId,
@@ -1394,7 +1210,7 @@ This is better than generating patches with made-up code.`,
     }
 
     return NextResponse.json(
-      { error: "Invalid action. Use 'apply', 'accept', or 'revert'." },
+      { error: "Invalid action. Use 'apply', 'preview', 'accept', or 'revert'." },
       { status: 400 }
     );
   } catch (error) {
@@ -1414,6 +1230,12 @@ async function applyChangesWithBackup(
   sessionId: string,
   projectRoot: string
 ): Promise<{ success: boolean; backupPaths: string[]; error?: string }> {
+  console.log(`[Apply-First] applyChangesWithBackup called`, {
+    sessionId,
+    fileCount: modifications.length,
+    files: modifications.map(m => m.filePath)
+  });
+  
   const backupDir = path.join(projectRoot, BACKUP_ROOT, sessionId);
   const backupPaths: string[] = [];
 
@@ -1428,6 +1250,7 @@ async function applyChangesWithBackup(
 
   try {
     // Step 1: Create backup directory
+    console.log(`[Apply-First] Creating backup directory: ${backupDir}`);
     fs.mkdirSync(backupDir, { recursive: true });
 
     // Step 2: Create ALL backups FIRST (before any writes)
@@ -1441,6 +1264,9 @@ async function applyChangesWithBackup(
         fs.mkdirSync(backupDirForFile, { recursive: true });
         fs.copyFileSync(fullPath, backupPath);
         backupPaths.push(backupPath);
+        console.log(`[Apply-First] Backed up: ${mod.filePath}`);
+      } else {
+        console.log(`[Apply-First] New file (no backup needed): ${mod.filePath}`);
       }
     }
 
@@ -1455,10 +1281,9 @@ async function applyChangesWithBackup(
       })),
     };
 
-    fs.writeFileSync(
-      path.join(backupDir, "manifest.json"),
-      JSON.stringify(manifest, null, 2)
-    );
+    const manifestPath = path.join(backupDir, "manifest.json");
+    fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+    console.log(`[Apply-First] Manifest written: ${manifestPath}`);
 
     // Step 4: Apply all changes
     for (const mod of modifications) {
@@ -1476,8 +1301,10 @@ async function applyChangesWithBackup(
       }
 
       fs.writeFileSync(fullPath, mod.modifiedContent, "utf-8");
+      console.log(`[Apply-First] File written: ${mod.filePath}`);
     }
 
+    console.log(`[Apply-First] All changes applied successfully, session: ${sessionId}`);
     return { success: true, backupPaths };
   } catch (error) {
     // Rollback on error - restore all backed up files