sonance-brand-mcp 1.3.44 → 1.3.46

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

@@ -168,6 +168,73 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
   }
 }
 
+/**
+ * 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
+ */
+async function selectBestFileFromList(
+  screenshot: string,
+  userPrompt: string,
+  candidateFiles: string[],
+  apiKey: string
+): Promise<string | null> {
+  if (candidateFiles.length === 0) return null;
+  
+  const anthropic = new Anthropic({ apiKey });
+  const base64Data = screenshot.split(",")[1] || screenshot;
+
+  try {
+    const response = await anthropic.messages.create({
+      model: "claude-sonnet-4-20250514",
+      max_tokens: 256,
+      messages: [{
+        role: "user",
+        content: [
+          { 
+            type: "image", 
+            source: { type: "base64", media_type: "image/png", data: base64Data } 
+          },
+          { 
+            type: "text", 
+            text: `The user wants to: "${userPrompt}"
+
+Here are the actual component files found in this codebase:
+${candidateFiles.map((f, i) => `${i + 1}. ${f}`).join('\n')}
+
+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").
+Do not add any explanation or other text.` 
+          }
+        ]
+      }]
+    });
+
+    const textBlock = response.content.find(b => b.type === "text");
+    if (!textBlock || textBlock.type !== "text") return null;
+    
+    const selectedPath = textBlock.text.trim().replace(/^["']|["']$/g, ''); // Remove quotes if present
+    
+    // Validate it's in our list (exact match or ends with the path)
+    const matchedFile = candidateFiles.find(f => 
+      f === selectedPath || 
+      f.endsWith(selectedPath) ||
+      selectedPath.endsWith(f)
+    );
+    
+    debugLog("Phase 3: LLM selected file from list", { 
+      selectedPath, 
+      matchedFile, 
+      candidateCount: candidateFiles.length 
+    });
+    
+    return matchedFile || null;
+  } catch (e) {
+    debugLog("Phase 3: Failed to select file from list", { error: String(e) });
+    return null;
+  }
+}
+
 /**
  * Search for component files by name across the project
  * Returns the file path if found, null otherwise
@@ -408,7 +475,7 @@ Return search/replace patches (NOT full files). The system applies your patches
 - Blaze Blue: #00A3E1
 
 **RESPONSE FORMAT:**
-Return ONLY valid JSON:
+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:
 {
   "reasoning": "What you understood from the request and your plan",
   "modifications": [
@@ -519,37 +586,23 @@ export async function POST(request: Request) {
           const searchResults = searchFilesSmart(analysis, projectRoot, 10);
           smartSearchFiles = searchResults.map(r => ({ path: r.path, content: r.content }));
           
-          // Identify the recommended file (highest scoring file, prefer filename matches)
+          // PHASE 3: Ask LLM to pick the best file from actual file list
           if (searchResults.length > 0) {
-            // Helper to extract filename without extension
-            const getFilenameWithoutExt = (filePath: string): string => {
-              const filename = filePath.split('/').pop() || '';
-              return filename.replace(/\.(tsx?|jsx?)$/, '').toLowerCase();
-            };
+            const candidateFiles = searchResults.slice(0, 10).map(r => r.path);
+            const selectedFile = await selectBestFileFromList(
+              screenshot,
+              userPrompt,
+              candidateFiles,
+              apiKey
+            );
             
-            // Find file where FILENAME matches a component name (not just path)
-            const filenameMatch = searchResults.find(r => {
-              const filename = getFilenameWithoutExt(r.path);
-              return analysis.componentNames.some(name => {
-                const nameLower = name.toLowerCase();
-                // Exact match: ProcessDetailPanel === processdetailpanel
-                // Or filename contains the component name
-                return filename === nameLower || filename.includes(nameLower);
-              });
-            });
-            
-            if (filenameMatch) {
-              const matchedName = analysis.componentNames.find(name => {
-                const filename = getFilenameWithoutExt(filenameMatch.path);
-                const nameLower = name.toLowerCase();
-                return filename === nameLower || filename.includes(nameLower);
-              });
+            if (selectedFile) {
               recommendedFile = {
-                path: filenameMatch.path,
-                reason: `Filename matches component "${matchedName}" from screenshot`
+                path: selectedFile,
+                reason: `LLM selected from ${candidateFiles.length} candidate files`
               };
             } else {
-              // Fall back to highest score
+              // Fallback to highest score if LLM selection fails
               recommendedFile = {
                 path: searchResults[0].path,
                 reason: `Highest content match score (${searchResults[0].score} points)`
@@ -810,6 +863,15 @@ CRITICAL: Edit the TARGET COMPONENT (marked with ***), not the page wrapper.`;
         }
 
         jsonText = jsonText.trim();
+        
+        // Robust JSON extraction: find the first { and last } to extract JSON object
+        // This handles cases where the LLM includes preamble text before the JSON
+        const firstBrace = jsonText.indexOf('{');
+        const lastBrace = jsonText.lastIndexOf('}');
+        if (firstBrace !== -1 && lastBrace > firstBrace) {
+          jsonText = jsonText.substring(firstBrace, lastBrace + 1);
+        }
+        
         aiResponse = JSON.parse(jsonText);
       } catch {
         console.error("Failed to parse AI response:", textResponse.text);

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

@@ -166,6 +166,73 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
   }
 }
 
+/**
+ * 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
+ */
+async function selectBestFileFromList(
+  screenshot: string,
+  userPrompt: string,
+  candidateFiles: string[],
+  apiKey: string
+): Promise<string | null> {
+  if (candidateFiles.length === 0) return null;
+  
+  const anthropic = new Anthropic({ apiKey });
+  const base64Data = screenshot.split(",")[1] || screenshot;
+
+  try {
+    const response = await anthropic.messages.create({
+      model: "claude-sonnet-4-20250514",
+      max_tokens: 256,
+      messages: [{
+        role: "user",
+        content: [
+          { 
+            type: "image", 
+            source: { type: "base64", media_type: "image/png", data: base64Data } 
+          },
+          { 
+            type: "text", 
+            text: `The user wants to: "${userPrompt}"
+
+Here are the actual component files found in this codebase:
+${candidateFiles.map((f, i) => `${i + 1}. ${f}`).join('\n')}
+
+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").
+Do not add any explanation or other text.` 
+          }
+        ]
+      }]
+    });
+
+    const textBlock = response.content.find(b => b.type === "text");
+    if (!textBlock || textBlock.type !== "text") return null;
+    
+    const selectedPath = textBlock.text.trim().replace(/^["']|["']$/g, ''); // Remove quotes if present
+    
+    // Validate it's in our list (exact match or ends with the path)
+    const matchedFile = candidateFiles.find(f => 
+      f === selectedPath || 
+      f.endsWith(selectedPath) ||
+      selectedPath.endsWith(f)
+    );
+    
+    debugLog("Phase 3: LLM selected file from list", { 
+      selectedPath, 
+      matchedFile, 
+      candidateCount: candidateFiles.length 
+    });
+    
+    return matchedFile || null;
+  } catch (e) {
+    debugLog("Phase 3: Failed to select file from list", { error: String(e) });
+    return null;
+  }
+}
+
 /**
  * Search for component files by name across the project (for smart search)
  * Returns the file path if found, null otherwise
@@ -406,7 +473,7 @@ Return search/replace patches (NOT full files). The system applies your patches
 - Blaze Blue: #00A3E1
 
 **RESPONSE FORMAT:**
-Return ONLY valid JSON:
+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:
 {
   "reasoning": "What you understood from the request and your plan",
   "modifications": [
@@ -529,37 +596,23 @@ export async function POST(request: Request) {
           const searchResults = searchFilesSmart(analysis, projectRoot, 10);
           smartSearchFiles = searchResults.map(r => ({ path: r.path, content: r.content }));
           
-          // Identify the recommended file (highest scoring file, prefer filename matches)
+          // PHASE 3: Ask LLM to pick the best file from actual file list
           if (searchResults.length > 0) {
-            // Helper to extract filename without extension
-            const getFilenameWithoutExt = (filePath: string): string => {
-              const filename = filePath.split('/').pop() || '';
-              return filename.replace(/\.(tsx?|jsx?)$/, '').toLowerCase();
-            };
-            
-            // Find file where FILENAME matches a component name (not just path)
-            const filenameMatch = searchResults.find(r => {
-              const filename = getFilenameWithoutExt(r.path);
-              return analysis.componentNames.some(name => {
-                const nameLower = name.toLowerCase();
-                // Exact match: ProcessDetailPanel === processdetailpanel
-                // Or filename contains the component name
-                return filename === nameLower || filename.includes(nameLower);
-              });
-            });
+            const candidateFiles = searchResults.slice(0, 10).map(r => r.path);
+            const selectedFile = await selectBestFileFromList(
+              screenshot,
+              userPrompt,
+              candidateFiles,
+              apiKey
+            );
             
-            if (filenameMatch) {
-              const matchedName = analysis.componentNames.find(name => {
-                const filename = getFilenameWithoutExt(filenameMatch.path);
-                const nameLower = name.toLowerCase();
-                return filename === nameLower || filename.includes(nameLower);
-              });
+            if (selectedFile) {
               recommendedFile = {
-                path: filenameMatch.path,
-                reason: `Filename matches component "${matchedName}" from screenshot`
+                path: selectedFile,
+                reason: `LLM selected from ${candidateFiles.length} candidate files`
               };
             } else {
-              // Fall back to highest score
+              // Fallback to highest score if LLM selection fails
               recommendedFile = {
                 path: searchResults[0].path,
                 reason: `Highest content match score (${searchResults[0].score} points)`
@@ -825,6 +878,14 @@ CRITICAL: Edit the TARGET COMPONENT (marked with ***), not the page wrapper.`;
         // Clean up any remaining whitespace
         jsonText = jsonText.trim();
         
+        // Robust JSON extraction: find the first { and last } to extract JSON object
+        // This handles cases where the LLM includes preamble text before the JSON
+        const firstBrace = jsonText.indexOf('{');
+        const lastBrace = jsonText.lastIndexOf('}');
+        if (firstBrace !== -1 && lastBrace > firstBrace) {
+          jsonText = jsonText.substring(firstBrace, lastBrace + 1);
+        }
+        
         aiResponse = JSON.parse(jsonText);
       } catch {
         console.error("Failed to parse AI response:", textResponse.text);

package/dist/assets/dev-tools/SonanceDevTools.tsx

@@ -2370,7 +2370,7 @@ export function SonanceDevTools() {
       <div 
         ref={headerRef}
         className={cn(
-          "flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-[#333F48]",
+          "flex items-center justify-between px-3 py-2 border-b border-gray-200 bg-[#333F48]",
           "cursor-move touch-none"
         )}
         onPointerDown={handleDragStart}
@@ -2380,10 +2380,10 @@ export function SonanceDevTools() {
         onDoubleClick={handleResetPosition}
         title="Drag to move • Double-click to reset position"
       >
-        <div className="flex items-center gap-2">
-          <GripHorizontal className="h-4 w-4 text-white/50" />
-          <Palette className="h-5 w-5 text-[#00A3E1]" />
-          <span id="span-sonance-devtools" className="text-sm font-semibold text-white">
+        <div className="flex items-center gap-1.5">
+          <GripHorizontal className="h-3.5 w-3.5 text-white/50" />
+          <Palette className="h-4 w-4 text-[#00A3E1]" />
+          <span id="span-sonance-devtools" className="text-xs font-semibold text-white whitespace-nowrap">
             Sonance DevTools
           </span>
         </div>

package/package.json

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