sonance-brand-mcp 1.3.59 → 1.3.60

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

@@ -511,48 +511,81 @@ function searchFilesSmart(
   return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score }));
 }
 
-const VISION_SYSTEM_PROMPT = `You are a code editor. Make ONLY the change the user requested.
+const VISION_SYSTEM_PROMPT = `You are a code editor like Cursor. Before making changes, REASON about what needs to be done.
+
+═══════════════════════════════════════════════════════════════════════════════
+STEP 1: ANALYZE (Think like Cursor)
+═══════════════════════════════════════════════════════════════════════════════
+
+Before writing any patches, analyze the screenshot and answer:
+
+1. CURRENT STATE: What do I see in the screenshot? 
+   - Is the element visible/readable right now?
+   - What colors/styles are currently applied?
+
+2. PROBLEM IDENTIFICATION: What's actually wrong?
+   - Contrast issue? (text blending with background)
+   - Hidden element? (not showing at all)
+   - Hover state issue? (only visible on interaction)
+   - Layout issue? (wrong size/position)
+   - Or is it already correct?
+
+3. FIX STRATEGY: What should I change?
+   - DEFAULT state only (element needs to look different normally)
+   - HOVER state only (element needs different hover effect)
+   - BOTH states (element needs overall visibility improvement)
+   - ASK for clarification (request is too vague)
+
+═══════════════════════════════════════════════════════════════════════════════
+STEP 2: GENERATE PATCHES (Only after reasoning)
+═══════════════════════════════════════════════════════════════════════════════
+
+CRITICAL - FILE SELECTION:
+- You MUST modify the file marked "TARGET COMPONENT" - this is the file you have FULL visibility into
+- Do NOT try to modify other files listed in context - you only see their imports/exports, not full content
+- If the TARGET COMPONENT is not the right file, return clarification_needed
+
+COPY EXACTLY from the TARGET COMPONENT section:
+- Your "search" string must match the file CHARACTER-FOR-CHARACTER
+- Include exact indentation and at least 3 lines of context
+- If the element looks FINE in the screenshot, say so
 
 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):
+1. Make the SMALLEST possible change
+2. Do NOT refactor or "improve" other code
+3. NEVER invent code - COPY exact code from file
+4. NEVER change data mappings unless user provides new values
+5. If visibility issue: prefer explicit colors (text-white, text-black) over semantic tokens
+
+═══════════════════════════════════════════════════════════════════════════════
+RESPONSE FORMAT
+═══════════════════════════════════════════════════════════════════════════════
+
+Return ONLY raw JSON:
 {
-  "reasoning": "brief explanation",
+  "analysis": {
+    "currentState": "what I see in the screenshot",
+    "problem": "the actual issue (or 'none - element appears correct')",
+    "fixStrategy": "default|hover|both|clarification_needed"
+  },
+  "reasoning": "my diagnosis and approach",
   "modifications": [{
     "filePath": "path/to/file.tsx",
     "patches": [{
-      "search": "exact original code (copy from provided file)",
-      "replace": "minimal change",
-      "explanation": "what this does"
+      "search": "EXACT copy from file",
+      "replace": "changed code",
+      "explanation": "what this changes and why"
     }]
   }],
-  "explanation": "summary"
+  "explanation": "summary of what was changed"
 }
 
-If you cannot find the exact code to modify, OR if you would need to guess data values, return empty modifications array with explanation.`;
+If the element looks correct, return:
+{
+  "analysis": { "currentState": "...", "problem": "none", "fixStrategy": "clarification_needed" },
+  "modifications": [],
+  "explanation": "The element appears visible/correct in the screenshot. Please specify what needs to change."
+}`;
 
 export async function POST(request: Request) {
   // Only allow in development
@@ -875,30 +908,59 @@ ${truncatedContent}${wasTruncated ? "\n// ... (truncated)" : ""}
 
       // ========== 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);
       
+      // Check if this is a visibility-related request
+      const isVisibilityRequest = /visible|can't see|cant see|not visible|hidden|color|contrast/i.test(userPrompt);
+      
       if (discoveredTheme.discoveredFiles.length > 0) {
-        textContent += `
+        // Only include detailed color guidance for visibility requests
+        if (isVisibilityRequest) {
+          // Extract available text color classes from discovered theme
+          const textColorClasses = Object.keys(discoveredTheme.cssVariables)
+            .filter(key => key.includes('foreground') || key.includes('text'))
+            .map(key => `text-${key.replace('--', '').replace(/-/g, '-')}`)
+            .slice(0, 10);
+          
+          textContent += `
 ═══════════════════════════════════════════════════════════════════════════════
-REFERENCE ONLY (do not use this to justify additional changes)
+COLOR FIX GUIDANCE (for visibility issues only)
 ═══════════════════════════════════════════════════════════════════════════════
 
-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)
+AVAILABLE TEXT COLORS (use these for contrast fixes):
+- text-white (always visible on dark backgrounds)
+- text-black (always visible on light backgrounds)
+- text-foreground (theme default)
+- text-primary-foreground (for bg-primary)
+- text-accent-foreground (for bg-accent - CHECK IF THIS HAS GOOD CONTRAST)
+- text-destructive-foreground (for bg-destructive)
+
+SAFE BUTTON PATTERNS:
+- bg-accent text-white (cyan button, guaranteed visible)
+- bg-primary text-white (charcoal button, guaranteed visible)
+- bg-destructive text-white (red button, guaranteed visible)
+- bg-muted text-foreground (gray button, guaranteed visible)
 
-But ONLY use these if the user is asking for a color/visibility change.
-Do NOT rebrand or change other elements to match.
+IMPORTANT: If current code has text-accent-foreground or similar semantic colors
+that result in poor contrast, REPLACE with text-white or text-black.
 
 `;
+        } else {
+          // For non-visibility requests, minimal reference
+          textContent += `
+═══════════════════════════════════════════════════════════════════════════════
+REFERENCE ONLY (do not use this to justify additional changes)
+═══════════════════════════════════════════════════════════════════════════════
+Theme discovered from: ${discoveredTheme.discoveredFiles.join(', ')}
+`;
+        }
+        
         debugLog("Theme discovery complete", {
           filesFound: discoveredTheme.discoveredFiles,
           cssVariableCount: Object.keys(discoveredTheme.cssVariables).length,
           tailwindColorCount: Object.keys(discoveredTheme.tailwindColors).length,
+          isVisibilityRequest,
         });
       }
 
@@ -1043,6 +1105,11 @@ This is better than generating patches with made-up code.`,
 
         // Parse AI response - now expecting patches instead of full file content
         let aiResponse: {
+          analysis?: {
+            currentState?: string;
+            problem?: string;
+            fixStrategy?: string;
+          };
           reasoning?: string;
           modifications: Array<{
             filePath: string;
@@ -1090,9 +1157,31 @@ This is better than generating patches with made-up code.`,
           );
         }
 
+        // Log the LLM's analysis/reasoning (like Cursor showing its thought process)
+        if (aiResponse.analysis) {
+          debugLog("LLM Analysis (Step 1)", {
+            currentState: aiResponse.analysis.currentState,
+            problem: aiResponse.analysis.problem,
+            fixStrategy: aiResponse.analysis.fixStrategy,
+          });
+        }
+
         finalExplanation = aiResponse.explanation;
         finalReasoning = aiResponse.reasoning;
 
+        // If LLM says clarification is needed, return that to the user
+        if (aiResponse.analysis?.fixStrategy === "clarification_needed" && 
+            (!aiResponse.modifications || aiResponse.modifications.length === 0)) {
+          return NextResponse.json({
+            success: true,
+            sessionId: newSessionId,
+            needsClarification: true,
+            analysis: aiResponse.analysis,
+            explanation: aiResponse.explanation || "The element appears correct. Please specify what needs to change.",
+            modifications: [],
+          });
+        }
+
         if (!aiResponse.modifications || aiResponse.modifications.length === 0) {
           return NextResponse.json({
             success: true,
@@ -1131,6 +1220,19 @@ This is better than generating patches with made-up code.`,
           continue;
         }
         
+        // CRITICAL: Warn if LLM is trying to modify a file OTHER than the TARGET COMPONENT
+        // This usually means the LLM is trying to modify a file it doesn't have full visibility into
+        const targetComponentPath = recommendedFileContent?.path;
+        if (targetComponentPath && mod.filePath !== targetComponentPath) {
+          debugLog("WARNING: LLM trying to modify non-target file", {
+            targetComponent: targetComponentPath,
+            attemptedFile: mod.filePath,
+            warning: "LLM may be hallucinating code since it only has full content of the TARGET COMPONENT"
+          });
+          console.warn(`[Apply-First] ⚠️ LLM is modifying ${mod.filePath} but TARGET COMPONENT is ${targetComponentPath}`);
+          console.warn(`[Apply-First] ⚠️ This may cause hallucination since LLM only has full visibility into the TARGET COMPONENT`);
+        }
+        
         const fullPath = path.join(projectRoot, mod.filePath);
         let originalContent = "";
         if (fs.existsSync(fullPath)) {
@@ -1206,6 +1308,34 @@ This is better than generating patches with made-up code.`,
             modifiedContent = patchResult.modifiedContent;
             console.log(`[Apply-First] All ${mod.patches.length} patches applied successfully to ${mod.filePath}`);
           }
+          
+          // SYNTAX VALIDATION: Check for common JSX/HTML tag mismatches
+          // This catches cases where the LLM changes opening tags but not closing tags
+          if (mod.filePath.endsWith('.tsx') || mod.filePath.endsWith('.jsx')) {
+            const openDivs = (modifiedContent.match(/<div[\s>]/g) || []).length;
+            const closeDivs = (modifiedContent.match(/<\/div>/g) || []).length;
+            const openSpans = (modifiedContent.match(/<span[\s>]/g) || []).length;
+            const closeSpans = (modifiedContent.match(/<\/span>/g) || []).length;
+            
+            if (openDivs !== closeDivs || openSpans !== closeSpans) {
+              debugLog("SYNTAX WARNING: Tag mismatch detected", {
+                filePath: mod.filePath,
+                divs: { open: openDivs, close: closeDivs },
+                spans: { open: openSpans, close: closeSpans },
+              });
+              console.warn(`[Apply-First] ⚠️ SYNTAX WARNING: Tag mismatch in ${mod.filePath}`);
+              console.warn(`[Apply-First]   divs: ${openDivs} open, ${closeDivs} close`);
+              console.warn(`[Apply-First]   spans: ${openSpans} open, ${closeSpans} close`);
+              
+              // If there's a significant mismatch, reject the change
+              const divDiff = Math.abs(openDivs - closeDivs);
+              const spanDiff = Math.abs(openSpans - closeSpans);
+              if (divDiff > 0 || spanDiff > 0) {
+                patchErrors.push(`${mod.filePath}: LLM introduced syntax error - tag mismatch detected (${divDiff} div, ${spanDiff} span). Change rejected.`);
+                continue;
+              }
+            }
+          }
         } else if (mod.modifiedContent) {
           // Legacy: AI returned full file content
           console.warn(`[Apply-First] Legacy modifiedContent received for ${mod.filePath} - patch-based format preferred`);

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

@@ -507,50 +507,83 @@ function searchFilesSmart(
   return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score }));
 }
 
-const VISION_SYSTEM_PROMPT = `You are a code editor. Make ONLY the change the user requested.
+const VISION_SYSTEM_PROMPT = `You are a code editor like Cursor. Before making changes, REASON about what needs to be done.
+
+═══════════════════════════════════════════════════════════════════════════════
+STEP 1: ANALYZE (Think like Cursor)
+═══════════════════════════════════════════════════════════════════════════════
+
+Before writing any patches, analyze the screenshot and answer:
+
+1. CURRENT STATE: What do I see in the screenshot? 
+   - Is the element visible/readable right now?
+   - What colors/styles are currently applied?
+
+2. PROBLEM IDENTIFICATION: What's actually wrong?
+   - Contrast issue? (text blending with background)
+   - Hidden element? (not showing at all)
+   - Hover state issue? (only visible on interaction)
+   - Layout issue? (wrong size/position)
+   - Or is it already correct?
+
+3. FIX STRATEGY: What should I change?
+   - DEFAULT state only (element needs to look different normally)
+   - HOVER state only (element needs different hover effect)
+   - BOTH states (element needs overall visibility improvement)
+   - ASK for clarification (request is too vague)
+
+═══════════════════════════════════════════════════════════════════════════════
+STEP 2: GENERATE PATCHES (Only after reasoning)
+═══════════════════════════════════════════════════════════════════════════════
+
+CRITICAL - FILE SELECTION:
+- You MUST modify the file marked "TARGET COMPONENT" - this is the file you have FULL visibility into
+- Do NOT try to modify other files listed in context - you only see their imports/exports, not full content
+- If the TARGET COMPONENT is not the right file, return clarification_needed
+
+COPY EXACTLY from the TARGET COMPONENT section:
+- Your "search" string must match the file CHARACTER-FOR-CHARACTER
+- Include exact indentation and at least 3 lines of context
+- If the element looks FINE in the screenshot, say so
 
 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):
+1. Make the SMALLEST possible change
+2. Do NOT refactor or "improve" other code
+3. NEVER invent code - COPY exact code from file
+4. NEVER change data mappings unless user provides new values
+5. If visibility issue: prefer explicit colors (text-white, text-black) over semantic tokens
+
+═══════════════════════════════════════════════════════════════════════════════
+RESPONSE FORMAT
+═══════════════════════════════════════════════════════════════════════════════
+
+Return ONLY raw JSON:
 {
-  "reasoning": "brief explanation",
+  "analysis": {
+    "currentState": "what I see in the screenshot",
+    "problem": "the actual issue (or 'none - element appears correct')",
+    "fixStrategy": "default|hover|both|clarification_needed"
+  },
+  "reasoning": "my diagnosis and approach",
   "modifications": [{
     "filePath": "path/to/file.tsx",
     "patches": [{
-      "search": "exact original code (copy from provided file)",
-      "replace": "minimal change",
-      "explanation": "what this does"
+      "search": "EXACT copy from file",
+      "replace": "changed code",
+      "explanation": "what this changes and why"
     }],
     "previewCSS": "optional CSS for live preview"
   }],
   "aggregatedPreviewCSS": "combined CSS for all changes",
-  "explanation": "summary"
+  "explanation": "summary of what was changed"
 }
 
-If you cannot find the exact code to modify, OR if you would need to guess data values, return empty modifications array with explanation.`;
+If the element looks correct, return:
+{
+  "analysis": { "currentState": "...", "problem": "none", "fixStrategy": "clarification_needed" },
+  "modifications": [],
+  "explanation": "The element appears visible/correct in the screenshot. Please specify what needs to change."
+}`;
 
 export async function POST(request: Request) {
   // Only allow in development
@@ -846,30 +879,59 @@ ${truncatedContent}${wasTruncated ? "\n// ... (truncated)" : ""}
 
       // ========== 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);
       
+      // Check if this is a visibility-related request
+      const isVisibilityRequest = /visible|can't see|cant see|not visible|hidden|color|contrast/i.test(userPrompt);
+      
       if (discoveredTheme.discoveredFiles.length > 0) {
-        textContent += `
+        // Only include detailed color guidance for visibility requests
+        if (isVisibilityRequest) {
+          // Extract available text color classes from discovered theme
+          const textColorClasses = Object.keys(discoveredTheme.cssVariables)
+            .filter(key => key.includes('foreground') || key.includes('text'))
+            .map(key => `text-${key.replace('--', '').replace(/-/g, '-')}`)
+            .slice(0, 10);
+          
+          textContent += `
 ═══════════════════════════════════════════════════════════════════════════════
-REFERENCE ONLY (do not use this to justify additional changes)
+COLOR FIX GUIDANCE (for visibility issues only)
 ═══════════════════════════════════════════════════════════════════════════════
 
-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)
+AVAILABLE TEXT COLORS (use these for contrast fixes):
+- text-white (always visible on dark backgrounds)
+- text-black (always visible on light backgrounds)
+- text-foreground (theme default)
+- text-primary-foreground (for bg-primary)
+- text-accent-foreground (for bg-accent - CHECK IF THIS HAS GOOD CONTRAST)
+- text-destructive-foreground (for bg-destructive)
 
-But ONLY use these if the user is asking for a color/visibility change.
-Do NOT rebrand or change other elements to match.
+SAFE BUTTON PATTERNS:
+- bg-accent text-white (cyan button, guaranteed visible)
+- bg-primary text-white (charcoal button, guaranteed visible)
+- bg-destructive text-white (red button, guaranteed visible)
+- bg-muted text-foreground (gray button, guaranteed visible)
 
+IMPORTANT: If current code has text-accent-foreground or similar semantic colors
+that result in poor contrast, REPLACE with text-white or text-black.
+
+`;
+        } else {
+          // For non-visibility requests, minimal reference
+          textContent += `
+═══════════════════════════════════════════════════════════════════════════════
+REFERENCE ONLY (do not use this to justify additional changes)
+═══════════════════════════════════════════════════════════════════════════════
+Theme discovered from: ${discoveredTheme.discoveredFiles.join(', ')}
 `;
+        }
+        
         debugLog("Theme discovery complete", {
           filesFound: discoveredTheme.discoveredFiles,
           cssVariableCount: Object.keys(discoveredTheme.cssVariables).length,
           tailwindColorCount: Object.keys(discoveredTheme.tailwindColors).length,
+          isVisibilityRequest,
         });
       }
 
@@ -1010,6 +1072,11 @@ This is better than generating patches with made-up code.`,
 
         // Parse AI response - now expecting patches instead of full file content
         let aiResponse: {
+          analysis?: {
+            currentState?: string;
+            problem?: string;
+            fixStrategy?: string;
+          };
           reasoning?: string;
           modifications: Array<{
             filePath: string;
@@ -1061,10 +1128,31 @@ This is better than generating patches with made-up code.`,
           );
         }
 
+        // Log the LLM's analysis/reasoning (like Cursor showing its thought process)
+        if (aiResponse.analysis) {
+          debugLog("LLM Analysis (Step 1)", {
+            currentState: aiResponse.analysis.currentState,
+            problem: aiResponse.analysis.problem,
+            fixStrategy: aiResponse.analysis.fixStrategy,
+          });
+        }
+
         finalExplanation = aiResponse.explanation;
         finalReasoning = aiResponse.reasoning;
         finalAggregatedCSS = aiResponse.aggregatedPreviewCSS;
 
+        // If LLM says clarification is needed, return that to the user
+        if (aiResponse.analysis?.fixStrategy === "clarification_needed" && 
+            (!aiResponse.modifications || aiResponse.modifications.length === 0)) {
+          return NextResponse.json({
+            success: true,
+            needsClarification: true,
+            analysis: aiResponse.analysis,
+            explanation: aiResponse.explanation || "The element appears correct. Please specify what needs to change.",
+            modifications: [],
+          });
+        }
+
         debugLog("VALIDATION: Known file paths from page context", {
           pageFile: pageContext.pageFile,
           knownPaths: Array.from(knownPaths),

package/package.json

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