sonance-brand-mcp 1.3.57 → 1.3.59

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

@@ -167,6 +167,73 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
   }
 }
 
+/**
+ * Search candidate files for JSX code matching the focused element
+ * This helps identify which file actually contains the element the user clicked on
+ */
+function findFilesContainingElement(
+  focusedElements: VisionFocusedElement[] | undefined,
+  candidateFiles: { path: string; content: string }[]
+): { path: string; score: number; matches: string[] }[] {
+  if (!focusedElements || focusedElements.length === 0) {
+    return [];
+  }
+
+  const results: { path: string; score: number; matches: string[] }[] = [];
+
+  for (const file of candidateFiles) {
+    let score = 0;
+    const matches: string[] = [];
+    const content = file.content.toLowerCase();
+
+    for (const el of focusedElements) {
+      // Extract element type from the name (e.g., "button #123" -> "button")
+      const elementType = el.name.split(/[\s#]/)[0].toLowerCase();
+      const componentType = el.type.toLowerCase();
+
+      // Search for JSX patterns
+      // Check for HTML tags like <button, <div, etc.
+      if (content.includes(`<${elementType}`)) {
+        score += 10;
+        matches.push(`<${elementType}>`);
+      }
+
+      // Check for React component like <Button, <Card, etc.
+      const capitalizedType = el.type.charAt(0).toUpperCase() + el.type.slice(1);
+      if (file.content.includes(`<${capitalizedType}`)) {
+        score += 15;
+        matches.push(`<${capitalizedType}>`);
+      }
+
+      // Check for component imports
+      if (content.includes(`import`) && content.includes(componentType)) {
+        score += 5;
+      }
+
+      // Check for event handlers commonly associated with buttons
+      if (elementType === "button" || componentType === "button") {
+        if (content.includes("onclick") || content.includes("onpress")) {
+          score += 3;
+        }
+      }
+
+      // Check for the component being defined in this file
+      if (file.content.includes(`function ${capitalizedType}`) || 
+          file.content.includes(`const ${capitalizedType}`)) {
+        score += 20;
+        matches.push(`defines ${capitalizedType}`);
+      }
+    }
+
+    if (score > 0) {
+      results.push({ path: file.path, score, matches });
+    }
+  }
+
+  // Sort by score descending
+  return results.sort((a, b) => b.score - a.score);
+}
+
 /**
  * Phase 3: Ask LLM to select the best file from actual file list
  * This replaces guessing - the LLM sees the real filenames and picks one
@@ -175,7 +242,8 @@ async function selectBestFileFromList(
   screenshot: string,
   userPrompt: string,
   candidateFiles: string[],
-  apiKey: string
+  apiKey: string,
+  focusedElementHints?: { path: string; score: number; matches: string[] }[]
 ): Promise<string | null> {
   if (candidateFiles.length === 0) return null;
   
@@ -199,7 +267,12 @@ async function selectBestFileFromList(
 
 Here are the actual component files found in this codebase:
 ${candidateFiles.map((f, i) => `${i + 1}. ${f}`).join('\n')}
+${focusedElementHints && focusedElementHints.length > 0 ? `
+FOCUSED ELEMENT ANALYSIS - Files that contain the element the user clicked on:
+${focusedElementHints.slice(0, 3).map(h => `- ${h.path} (confidence: ${h.score}, found: ${h.matches.join(", ")})`).join('\n')}
 
+IMPORTANT: Prefer files from the FOCUSED ELEMENT ANALYSIS above, as they contain the actual element the user wants to modify.
+` : ''}
 Looking at the screenshot, which file MOST LIKELY contains the UI elements the user wants to modify?
 
 IMPORTANT: Return ONLY the exact file path from the list above (e.g., "components/ProcessCatalogue/ProcessDetailPanel.tsx").
@@ -434,104 +507,50 @@ 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 - ELEMENT VERIFICATION:
+- When a focused element is mentioned, SEARCH the provided file content for that EXACT element
+- Look for the actual JSX/HTML code: <button, <Button, <div, className, onClick, etc.
+- If you cannot find the element in the TARGET COMPONENT section, it may be in a child component
+- NEVER guess what element code looks like - find it in the file or report "element not found"
+- If the element is not in the provided file, return: {"modifications": [], "explanation": "The focused element appears to be in a child component, not in [filename]"}
+
+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"
-        }
-      ],
-      "previewCSS": "optional CSS for live preview"
-    }
-  ],
+  "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"
+    }],
+    "previewCSS": "optional CSS for live preview"
+  }],
   "aggregatedPreviewCSS": "combined CSS for all changes",
-  "explanation": "summary of changes made"
-}`;
+  "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
@@ -636,6 +655,22 @@ export async function POST(request: Request) {
           const searchResults = searchFilesSmart(analysis, projectRoot, 10);
           smartSearchFiles = searchResults.map(r => ({ path: r.path, content: r.content }));
           
+          // PHASE 2.5: Find which files contain the focused element
+          const focusedElementHints = findFilesContainingElement(
+            focusedElements,
+            searchResults.map(r => ({ path: r.path, content: r.content }))
+          );
+          
+          if (focusedElementHints.length > 0) {
+            debugLog("Focused element search results", {
+              topMatches: focusedElementHints.slice(0, 3).map(h => ({
+                path: h.path,
+                score: h.score,
+                matches: h.matches
+              }))
+            });
+          }
+          
           // PHASE 3: Ask LLM to pick the best file from actual file list
           if (searchResults.length > 0) {
             const candidateFiles = searchResults.slice(0, 10).map(r => r.path);
@@ -643,7 +678,8 @@ export async function POST(request: Request) {
               screenshot,
               userPrompt,
               candidateFiles,
-              apiKey
+              apiKey,
+              focusedElementHints
             );
             
             if (selectedFile) {
@@ -708,141 +744,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)
@@ -879,58 +780,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
@@ -995,17 +844,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,