sonance-brand-mcp 1.3.55 → 1.3.56

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,111 @@ 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;
+        problem: string;
+        currentState: string;
+        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 a visual problem.
+
+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")}
+` : ""}
+
+BEFORE any code changes can be made, you must analyze the visual problem.
+
+Answer these questions:
+1. ELEMENT: Which specific UI element has the problem? (describe its location, text content, appearance)
+2. PROBLEM: What exactly is visually wrong? (invisible text, wrong color, poor contrast, wrong size, etc.)
+3. CURRENT STATE: What styling/colors appear to be applied to this element?
+4. SOLUTION: What specific CSS/Tailwind change would fix this problem?
+5. CONFIDENCE: How confident are you that you've identified the correct element and problem? (high/medium/low)
+
+Return ONLY valid JSON with no other text:
+{
+  "element": "specific description of the UI element",
+  "problem": "what is visually wrong",
+  "currentState": "what styling appears to be applied",
+  "solution": "specific CSS/Tailwind fix needed",
+  "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)
@@ -731,6 +837,24 @@ User Request: "${userPrompt}"
         textContent += `FOCUSED ELEMENTS (user clicked on these):
 ${focusedElements.map((el) => `- ${el.name} (${el.type}) at (${el.coordinates.x}, ${el.coordinates.y})`).join("\n")}
 
+`;
+      }
+
+      // ========== VISUAL PROBLEM ANALYSIS (from Phase A) ==========
+      if (visualAnalysis) {
+        textContent += `═══════════════════════════════════════════════════════════════════════════════
+🔍 VISUAL PROBLEM ANALYSIS (I analyzed the screenshot first)
+═══════════════════════════════════════════════════════════════════════════════
+
+**Element:** ${visualAnalysis.element}
+**Problem:** ${visualAnalysis.problem}
+**Current State:** ${visualAnalysis.currentState}
+**Required Fix:** ${visualAnalysis.solution}
+**Confidence:** ${visualAnalysis.confidence}
+
+⚠️ IMPORTANT: Your patches MUST implement the fix described above for the element described above.
+Find the code that renders "${visualAnalysis.element}" and apply "${visualAnalysis.solution}".
+
 `;
       }
 

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,111 @@ 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;
+        problem: string;
+        currentState: string;
+        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 a visual problem.
+
+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")}
+` : ""}
+
+BEFORE any code changes can be made, you must analyze the visual problem.
+
+Answer these questions:
+1. ELEMENT: Which specific UI element has the problem? (describe its location, text content, appearance)
+2. PROBLEM: What exactly is visually wrong? (invisible text, wrong color, poor contrast, wrong size, etc.)
+3. CURRENT STATE: What styling/colors appear to be applied to this element?
+4. SOLUTION: What specific CSS/Tailwind change would fix this problem?
+5. CONFIDENCE: How confident are you that you've identified the correct element and problem? (high/medium/low)
+
+Return ONLY valid JSON with no other text:
+{
+  "element": "specific description of the UI element",
+  "problem": "what is visually wrong",
+  "currentState": "what styling appears to be applied",
+  "solution": "specific CSS/Tailwind fix needed",
+  "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)
@@ -740,6 +846,24 @@ User Request: "${userPrompt}"
         textContent += `FOCUSED ELEMENTS (user clicked on these):
 ${focusedElements.map((el) => `- ${el.name} (${el.type}) at (${el.coordinates.x}, ${el.coordinates.y})`).join("\n")}
 
+`;
+      }
+
+      // ========== VISUAL PROBLEM ANALYSIS (from Phase A) ==========
+      if (visualAnalysis) {
+        textContent += `═══════════════════════════════════════════════════════════════════════════════
+🔍 VISUAL PROBLEM ANALYSIS (I analyzed the screenshot first)
+═══════════════════════════════════════════════════════════════════════════════
+
+**Element:** ${visualAnalysis.element}
+**Problem:** ${visualAnalysis.problem}
+**Current State:** ${visualAnalysis.currentState}
+**Required Fix:** ${visualAnalysis.solution}
+**Confidence:** ${visualAnalysis.confidence}
+
+⚠️ IMPORTANT: Your patches MUST implement the fix described above for the element described above.
+Find the code that renders "${visualAnalysis.element}" and apply "${visualAnalysis.solution}".
+
 `;
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.55",
+  "version": "1.3.56",
   "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",