sonance-brand-mcp 1.3.55 → 1.3.57

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

@@ -686,8 +686,9 @@ export async function POST(request: Request) {
       const messageContent: Anthropic.MessageCreateParams["messages"][0]["content"] = [];
 
       // Add screenshot if provided
+      let base64Data = "";
       if (screenshot) {
-        const base64Data = screenshot.split(",")[1] || screenshot;
+        base64Data = screenshot.split(",")[1] || screenshot;
         messageContent.push({
           type: "image",
           source: {
@@ -698,6 +699,141 @@ 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)
@@ -734,6 +870,58 @@ ${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

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

@@ -695,8 +695,9 @@ export async function POST(request: Request) {
       const messageContent: Anthropic.MessageCreateParams["messages"][0]["content"] = [];
 
       // Add screenshot if provided
+      let base64Data = "";
       if (screenshot) {
-        const base64Data = screenshot.split(",")[1] || screenshot;
+        base64Data = screenshot.split(",")[1] || screenshot;
         messageContent.push({
           type: "image",
           source: {
@@ -707,6 +708,141 @@ 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)
@@ -743,6 +879,58 @@ ${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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.55",
+  "version": "1.3.57",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",