sonance-brand-mcp 1.3.56 → 1.3.57

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

@@ -704,8 +704,15 @@ export async function POST(request: Request) {
       // 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;
-        currentState: 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";
       }
@@ -735,7 +742,7 @@ export async function POST(request: Request) {
                   },
                   {
                     type: "text",
-                    text: `You are analyzing a UI screenshot to understand a visual problem.
+                    text: `You are analyzing a UI screenshot to understand what the user wants changed.
 
 User request: "${userPrompt}"
 
@@ -743,21 +750,44 @@ ${focusedElements && focusedElements.length > 0 ? `User clicked on these element
 ${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.
+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
 
-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:
+{
+  "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"
+}
 
-Return ONLY valid JSON with no other text:
+For structural changes:
 {
-  "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",
+  "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"
 }`,
                   },
@@ -842,20 +872,54 @@ ${focusedElements.map((el) => `- ${el.name} (${el.type}) at (${el.coordinates.x}
 
       // ========== VISUAL PROBLEM ANALYSIS (from Phase A) ==========
       if (visualAnalysis) {
-        textContent += `═══════════════════════════════════════════════════════════════════════════════
+        let analysisInstructions = `═══════════════════════════════════════════════════════════════════════════════
 🔍 VISUAL PROBLEM ANALYSIS (I analyzed the screenshot first)
 ═══════════════════════════════════════════════════════════════════════════════
 
 **Element:** ${visualAnalysis.element}
+**Element Text:** "${visualAnalysis.elementText || "unknown"}"
 **Problem:** ${visualAnalysis.problem}
-**Current State:** ${visualAnalysis.currentState}
-**Required Fix:** ${visualAnalysis.solution}
+**Change Type:** ${visualAnalysis.changeType}
+**Solution:** ${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}".
+`;
 
+        // 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 ==========

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

@@ -713,8 +713,15 @@ export async function POST(request: Request) {
       // 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;
-        currentState: 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";
       }
@@ -744,7 +751,7 @@ export async function POST(request: Request) {
                   },
                   {
                     type: "text",
-                    text: `You are analyzing a UI screenshot to understand a visual problem.
+                    text: `You are analyzing a UI screenshot to understand what the user wants changed.
 
 User request: "${userPrompt}"
 
@@ -752,21 +759,44 @@ ${focusedElements && focusedElements.length > 0 ? `User clicked on these element
 ${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.
+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
 
-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:
+{
+  "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"
+}
 
-Return ONLY valid JSON with no other text:
+For structural changes:
 {
-  "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",
+  "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"
 }`,
                   },
@@ -851,20 +881,54 @@ ${focusedElements.map((el) => `- ${el.name} (${el.type}) at (${el.coordinates.x}
 
       // ========== VISUAL PROBLEM ANALYSIS (from Phase A) ==========
       if (visualAnalysis) {
-        textContent += `═══════════════════════════════════════════════════════════════════════════════
+        let analysisInstructions = `═══════════════════════════════════════════════════════════════════════════════
 🔍 VISUAL PROBLEM ANALYSIS (I analyzed the screenshot first)
 ═══════════════════════════════════════════════════════════════════════════════
 
 **Element:** ${visualAnalysis.element}
+**Element Text:** "${visualAnalysis.elementText || "unknown"}"
 **Problem:** ${visualAnalysis.problem}
-**Current State:** ${visualAnalysis.currentState}
-**Required Fix:** ${visualAnalysis.solution}
+**Change Type:** ${visualAnalysis.changeType}
+**Solution:** ${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}".
+`;
 
+        // 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 ==========

package/package.json

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