sonance-brand-mcp 1.3.41 → 1.3.43

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

@@ -521,17 +521,32 @@ export async function POST(request: Request) {
           
           // Identify the recommended file (highest scoring file, prefer filename matches)
           if (searchResults.length > 0) {
-            // Find the best filename match first
-            const filenameMatch = searchResults.find(r => 
-              analysis.componentNames.some(name => 
-                r.path.toLowerCase().includes(name.toLowerCase())
-              )
-            );
+            // 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);
+              });
+            });
             
             if (filenameMatch) {
+              const matchedName = analysis.componentNames.find(name => {
+                const filename = getFilenameWithoutExt(filenameMatch.path);
+                const nameLower = name.toLowerCase();
+                return filename === nameLower || filename.includes(nameLower);
+              });
               recommendedFile = {
                 path: filenameMatch.path,
-                reason: `Component name match from screenshot analysis`
+                reason: `Filename matches component "${matchedName}" from screenshot`
               };
             } else {
               // Fall back to highest score
@@ -589,6 +604,27 @@ export async function POST(request: Request) {
         });
       }
 
+      // ========== SMART CONTEXT BUDGETING ==========
+      // Total budget: 100k chars (~25k tokens, safe for Claude)
+      // Priority: Recommended file (full) > Page file (limited) > Other components (dynamic)
+      const TOTAL_CONTEXT_BUDGET = 100000;
+      const MAX_RECOMMENDED_FILE = 50000; // 50k chars max for recommended file
+      const MAX_PAGE_FILE = 2000; // Page file is just a wrapper
+      const MAX_GLOBALS_CSS = 1500;
+      const MAX_FILES = 25;
+      
+      let usedContext = 0;
+      
+      // Extract recommended file from component sources (to show first, avoid duplication)
+      let recommendedFileContent: { path: string; content: string } | null = null;
+      if (recommendedFile) {
+        const idx = pageContext.componentSources.findIndex(c => c.path === recommendedFile.path);
+        if (idx !== -1) {
+          recommendedFileContent = pageContext.componentSources[idx];
+          pageContext.componentSources.splice(idx, 1); // Remove to avoid duplication
+        }
+      }
+
       // Build text content
       let textContent = `VISION MODE EDIT REQUEST
 
@@ -604,41 +640,63 @@ ${focusedElements.map((el) => `- ${el.name} (${el.type}) at (${el.coordinates.x}
 `;
       }
 
-      textContent += `PAGE CONTEXT:
+      // ========== TARGET COMPONENT (RECOMMENDED FILE) - SHOWN FIRST ==========
+      if (recommendedFileContent) {
+        const content = recommendedFileContent.content.length > MAX_RECOMMENDED_FILE
+          ? recommendedFileContent.content.substring(0, MAX_RECOMMENDED_FILE) + "\n// ... (file truncated at 50k chars, showing component definition and main logic)"
+          : recommendedFileContent.content;
+        
+        textContent += `═══════════════════════════════════════════════════════════════════════════════
+⚡ TARGET COMPONENT - YOU MUST EDIT THIS FILE
+═══════════════════════════════════════════════════════════════════════════════
+
+This is the component that renders the UI you see in the screenshot.
+File: ${recommendedFileContent.path}
+
+\`\`\`tsx
+${content}
+\`\`\`
+
+`;
+        usedContext += content.length;
+        debugLog("Added TARGET COMPONENT to context", { 
+          path: recommendedFileContent.path, 
+          originalSize: recommendedFileContent.content.length,
+          includedSize: content.length 
+        });
+      }
+
+      // ========== PAGE CONTEXT (wrapper - de-emphasized) ==========
+      const pageContentTruncated = pageContext.pageContent.substring(0, MAX_PAGE_FILE);
+      const pageWasTruncated = pageContext.pageContent.length > MAX_PAGE_FILE;
+      
+      textContent += `PAGE CONTEXT (wrapper only${recommendedFileContent ? " - DO NOT edit this, edit the TARGET COMPONENT above" : ""}):
 
 Page File: ${pageContext.pageFile || "Not found"}
-${pageContext.pageContent ? `\`\`\`tsx\n${pageContext.pageContent}\n\`\`\`` : ""}
+${pageContext.pageContent ? `\`\`\`tsx\n${pageContentTruncated}${pageWasTruncated ? "\n// ... (wrapper truncated)" : ""}\n\`\`\`` : ""}
 
 `;
+      usedContext += pageContentTruncated.length;
 
+      // ========== SUPPORTING COMPONENTS (dynamic budget) ==========
       if (pageContext.componentSources.length > 0) {
-        // Smart truncation: prioritize first components (direct imports) and limit total context
-        const MAX_TOTAL_CONTEXT = 80000; // ~80k chars to stay well under Claude's limit
-        const MAX_PER_FILE_PRIORITY = 4000; // First 10 files get more space
-        const MAX_PER_FILE_SECONDARY = 1500; // Remaining files get less
-        const MAX_FILES = 30; // Limit total number of files
-        
-        let usedContext = pageContext.pageContent.length + pageContext.globalsCSS.length;
-        const truncatedComponents = pageContext.componentSources.slice(0, MAX_FILES);
+        const remainingBudget = TOTAL_CONTEXT_BUDGET - usedContext - MAX_GLOBALS_CSS - 5000; // Reserve 5k for instructions
+        const filesToInclude = pageContext.componentSources.slice(0, MAX_FILES);
+        const perFileLimit = Math.max(1000, Math.floor(remainingBudget / Math.max(filesToInclude.length, 1)));
         
-        textContent += `IMPORTED COMPONENTS (${truncatedComponents.length} files, ${pageContext.componentSources.length > MAX_FILES ? `${pageContext.componentSources.length - MAX_FILES} omitted` : 'complete'}):\n`;
+        textContent += `SUPPORTING COMPONENTS (${filesToInclude.length} files, ~${Math.round(perFileLimit/1000)}k chars each):\n`;
         
-        for (let i = 0; i < truncatedComponents.length; i++) {
-          const comp = truncatedComponents[i];
-          const isPriority = i < 10; // First 10 files are priority (direct imports)
-          const maxSize = isPriority ? MAX_PER_FILE_PRIORITY : MAX_PER_FILE_SECONDARY;
-          
-          // Stop if we've used too much context
-          if (usedContext > MAX_TOTAL_CONTEXT) {
-            textContent += `\n// ... (${truncatedComponents.length - i} more files omitted to stay within context limits)\n`;
+        for (const comp of filesToInclude) {
+          if (usedContext > TOTAL_CONTEXT_BUDGET - 10000) {
+            textContent += `\n// ... (remaining files omitted to stay within context limits)\n`;
             break;
           }
           
-          const truncatedContent = comp.content.substring(0, maxSize);
-          const wasTruncated = comp.content.length > maxSize;
+          const truncatedContent = comp.content.substring(0, perFileLimit);
+          const wasTruncated = comp.content.length > perFileLimit;
           
           textContent += `
-File: ${comp.path}${isPriority ? '' : ' (nested)'}
+File: ${comp.path}
 \`\`\`tsx
 ${truncatedContent}${wasTruncated ? "\n// ... (truncated)" : ""}
 \`\`\`
@@ -647,42 +705,28 @@ ${truncatedContent}${wasTruncated ? "\n// ... (truncated)" : ""}
         }
       }
 
+      // ========== GLOBALS CSS ==========
+      const globalsTruncated = pageContext.globalsCSS.substring(0, MAX_GLOBALS_CSS);
       textContent += `
-GLOBALS.CSS (relevant theme variables):
+GLOBALS.CSS (theme variables):
 \`\`\`css
-${pageContext.globalsCSS.substring(0, 2000)}${pageContext.globalsCSS.length > 2000 ? "\n/* ... (truncated) */" : ""}
+${globalsTruncated}${pageContext.globalsCSS.length > MAX_GLOBALS_CSS ? "\n/* ... (truncated) */" : ""}
 \`\`\`
 
 `;
 
-      // Add recommendation block just before VALID FILES if we have one
-      if (recommendedFile) {
-        textContent += `═══════════════════════════════════════════════════════════════════════════════
-⚡ RECOMMENDED FILE TO EDIT
-═══════════════════════════════════════════════════════════════════════════════
-
-Based on the screenshot analysis, the component you should edit is:
-**${recommendedFile.path}**
-Reason: ${recommendedFile.reason}
-
-The page file (${pageContext.pageFile}) is just a wrapper - the actual UI elements are in the component above.
-YOU MUST edit the recommended file unless you have a specific reason not to.
-
-`;
-      }
-
-      // Build VALID FILES list with recommended file first and marked
+      // ========== VALID FILES LIST ==========
       const validFilesList: string[] = [];
       const recommendedPath = recommendedFile?.path;
       
       // Add recommended file first with marker
       if (recommendedPath) {
-        validFilesList.push(`- ${recommendedPath} (*** RECOMMENDED - EDIT THIS FILE ***)`);
+        validFilesList.push(`- ${recommendedPath} (*** TARGET - EDIT THIS FILE ***)`);
       }
       
       // Add page file (if not the recommended file)
       if (pageContext.pageFile && pageContext.pageFile !== recommendedPath) {
-        validFilesList.push(`- ${pageContext.pageFile}`);
+        validFilesList.push(`- ${pageContext.pageFile} (wrapper only)`);
       }
       
       // Add other component sources (excluding recommended file)
@@ -697,14 +741,14 @@ ${validFilesList.join("\n")}
 
 INSTRUCTIONS:
 1. Look at the screenshot and identify elements mentioned in the user's request
-2. Review the code to understand current implementation
+2. The TARGET COMPONENT shown first contains the UI - EDIT THAT FILE
 3. Make SURGICAL EDITS - change only the specific lines needed
 4. PRESERVE all existing logic, hooks, API calls, and error handling
-5. Return the FULL file content (no truncation, no "// ... existing ..." comments)
+5. Return patches in the specified format (search/replace)
 6. Only use file paths from the VALID FILES list above
-7. ALWAYS prioritize the (*** RECOMMENDED ***) file if one is marked - it contains the UI you see in the screenshot
+7. DO NOT edit the page wrapper unless the TARGET COMPONENT is unavailable
 
-CRITICAL: Your modified file should have approximately the same number of lines as the original. If the original has 200 lines and your output has 50 lines, you have made a mistake.`;
+CRITICAL: Edit the TARGET COMPONENT (marked with ***), not the page wrapper.`;
 
       messageContent.push({
         type: "text",
@@ -794,6 +838,11 @@ CRITICAL: Your modified file should have approximately the same number of lines
         validFilePaths.add(comp.path);
       }
       
+      // FIX: Add the recommended file to validFilePaths (it was spliced out for display purposes)
+      if (recommendedFileContent) {
+        validFilePaths.add(recommendedFileContent.path);
+      }
+      
       debugLog("VALIDATION: Valid file paths from page context", { 
         pageFile: pageContext.pageFile,
         validFilePaths: Array.from(validFilePaths),

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

@@ -531,17 +531,32 @@ export async function POST(request: Request) {
           
           // Identify the recommended file (highest scoring file, prefer filename matches)
           if (searchResults.length > 0) {
-            // Find the best filename match first
-            const filenameMatch = searchResults.find(r => 
-              analysis.componentNames.some(name => 
-                r.path.toLowerCase().includes(name.toLowerCase())
-              )
-            );
+            // 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);
+              });
+            });
             
             if (filenameMatch) {
+              const matchedName = analysis.componentNames.find(name => {
+                const filename = getFilenameWithoutExt(filenameMatch.path);
+                const nameLower = name.toLowerCase();
+                return filename === nameLower || filename.includes(nameLower);
+              });
               recommendedFile = {
                 path: filenameMatch.path,
-                reason: `Component name match from screenshot analysis`
+                reason: `Filename matches component "${matchedName}" from screenshot`
               };
             } else {
               // Fall back to highest score
@@ -599,6 +614,27 @@ export async function POST(request: Request) {
         });
       }
 
+      // ========== SMART CONTEXT BUDGETING ==========
+      // Total budget: 100k chars (~25k tokens, safe for Claude)
+      // Priority: Recommended file (full) > Page file (limited) > Other components (dynamic)
+      const TOTAL_CONTEXT_BUDGET = 100000;
+      const MAX_RECOMMENDED_FILE = 50000; // 50k chars max for recommended file
+      const MAX_PAGE_FILE = 2000; // Page file is just a wrapper
+      const MAX_GLOBALS_CSS = 1500;
+      const MAX_FILES = 25;
+      
+      let usedContext = 0;
+      
+      // Extract recommended file from component sources (to show first, avoid duplication)
+      let recommendedFileContent: { path: string; content: string } | null = null;
+      if (recommendedFile) {
+        const idx = pageContext.componentSources.findIndex(c => c.path === recommendedFile.path);
+        if (idx !== -1) {
+          recommendedFileContent = pageContext.componentSources[idx];
+          pageContext.componentSources.splice(idx, 1); // Remove to avoid duplication
+        }
+      }
+
       // Build text content
       let textContent = `VISION MODE EDIT REQUEST
 
@@ -614,41 +650,63 @@ ${focusedElements.map((el) => `- ${el.name} (${el.type}) at (${el.coordinates.x}
 `;
       }
 
-      textContent += `PAGE CONTEXT:
+      // ========== TARGET COMPONENT (RECOMMENDED FILE) - SHOWN FIRST ==========
+      if (recommendedFileContent) {
+        const content = recommendedFileContent.content.length > MAX_RECOMMENDED_FILE
+          ? recommendedFileContent.content.substring(0, MAX_RECOMMENDED_FILE) + "\n// ... (file truncated at 50k chars, showing component definition and main logic)"
+          : recommendedFileContent.content;
+        
+        textContent += `═══════════════════════════════════════════════════════════════════════════════
+⚡ TARGET COMPONENT - YOU MUST EDIT THIS FILE
+═══════════════════════════════════════════════════════════════════════════════
+
+This is the component that renders the UI you see in the screenshot.
+File: ${recommendedFileContent.path}
+
+\`\`\`tsx
+${content}
+\`\`\`
+
+`;
+        usedContext += content.length;
+        debugLog("Added TARGET COMPONENT to context", { 
+          path: recommendedFileContent.path, 
+          originalSize: recommendedFileContent.content.length,
+          includedSize: content.length 
+        });
+      }
+
+      // ========== PAGE CONTEXT (wrapper - de-emphasized) ==========
+      const pageContentTruncated = pageContext.pageContent.substring(0, MAX_PAGE_FILE);
+      const pageWasTruncated = pageContext.pageContent.length > MAX_PAGE_FILE;
+      
+      textContent += `PAGE CONTEXT (wrapper only${recommendedFileContent ? " - DO NOT edit this, edit the TARGET COMPONENT above" : ""}):
 
 Page File: ${pageContext.pageFile || "Not found"}
-${pageContext.pageContent ? `\`\`\`tsx\n${pageContext.pageContent}\n\`\`\`` : ""}
+${pageContext.pageContent ? `\`\`\`tsx\n${pageContentTruncated}${pageWasTruncated ? "\n// ... (wrapper truncated)" : ""}\n\`\`\`` : ""}
 
 `;
+      usedContext += pageContentTruncated.length;
 
+      // ========== SUPPORTING COMPONENTS (dynamic budget) ==========
       if (pageContext.componentSources.length > 0) {
-        // Smart truncation: prioritize first components (direct imports) and limit total context
-        const MAX_TOTAL_CONTEXT = 80000; // ~80k chars to stay well under Claude's limit
-        const MAX_PER_FILE_PRIORITY = 4000; // First 10 files get more space
-        const MAX_PER_FILE_SECONDARY = 1500; // Remaining files get less
-        const MAX_FILES = 30; // Limit total number of files
+        const remainingBudget = TOTAL_CONTEXT_BUDGET - usedContext - MAX_GLOBALS_CSS - 5000; // Reserve 5k for instructions
+        const filesToInclude = pageContext.componentSources.slice(0, MAX_FILES);
+        const perFileLimit = Math.max(1000, Math.floor(remainingBudget / Math.max(filesToInclude.length, 1)));
         
-        let usedContext = pageContext.pageContent.length + pageContext.globalsCSS.length;
-        const truncatedComponents = pageContext.componentSources.slice(0, MAX_FILES);
+        textContent += `SUPPORTING COMPONENTS (${filesToInclude.length} files, ~${Math.round(perFileLimit/1000)}k chars each):\n`;
         
-        textContent += `IMPORTED COMPONENTS (${truncatedComponents.length} files, ${pageContext.componentSources.length > MAX_FILES ? `${pageContext.componentSources.length - MAX_FILES} omitted` : 'complete'}):\n`;
-        
-        for (let i = 0; i < truncatedComponents.length; i++) {
-          const comp = truncatedComponents[i];
-          const isPriority = i < 10; // First 10 files are priority (direct imports)
-          const maxSize = isPriority ? MAX_PER_FILE_PRIORITY : MAX_PER_FILE_SECONDARY;
-          
-          // Stop if we've used too much context
-          if (usedContext > MAX_TOTAL_CONTEXT) {
-            textContent += `\n// ... (${truncatedComponents.length - i} more files omitted to stay within context limits)\n`;
+        for (const comp of filesToInclude) {
+          if (usedContext > TOTAL_CONTEXT_BUDGET - 10000) {
+            textContent += `\n// ... (remaining files omitted to stay within context limits)\n`;
             break;
           }
           
-          const truncatedContent = comp.content.substring(0, maxSize);
-          const wasTruncated = comp.content.length > maxSize;
+          const truncatedContent = comp.content.substring(0, perFileLimit);
+          const wasTruncated = comp.content.length > perFileLimit;
           
           textContent += `
-File: ${comp.path}${isPriority ? '' : ' (nested)'}
+File: ${comp.path}
 \`\`\`tsx
 ${truncatedContent}${wasTruncated ? "\n// ... (truncated)" : ""}
 \`\`\`
@@ -657,42 +715,28 @@ ${truncatedContent}${wasTruncated ? "\n// ... (truncated)" : ""}
         }
       }
 
+      // ========== GLOBALS CSS ==========
+      const globalsTruncated = pageContext.globalsCSS.substring(0, MAX_GLOBALS_CSS);
       textContent += `
-GLOBALS.CSS (relevant theme variables):
+GLOBALS.CSS (theme variables):
 \`\`\`css
-${pageContext.globalsCSS.substring(0, 2000)}${pageContext.globalsCSS.length > 2000 ? "\n/* ... (truncated) */" : ""}
+${globalsTruncated}${pageContext.globalsCSS.length > MAX_GLOBALS_CSS ? "\n/* ... (truncated) */" : ""}
 \`\`\`
 
 `;
 
-      // Add recommendation block just before VALID FILES if we have one
-      if (recommendedFile) {
-        textContent += `═══════════════════════════════════════════════════════════════════════════════
-⚡ RECOMMENDED FILE TO EDIT
-═══════════════════════════════════════════════════════════════════════════════
-
-Based on the screenshot analysis, the component you should edit is:
-**${recommendedFile.path}**
-Reason: ${recommendedFile.reason}
-
-The page file (${pageContext.pageFile}) is just a wrapper - the actual UI elements are in the component above.
-YOU MUST edit the recommended file unless you have a specific reason not to.
-
-`;
-      }
-
-      // Build VALID FILES list with recommended file first and marked
+      // ========== VALID FILES LIST ==========
       const validFilesList: string[] = [];
       const recommendedPath = recommendedFile?.path;
       
       // Add recommended file first with marker
       if (recommendedPath) {
-        validFilesList.push(`- ${recommendedPath} (*** RECOMMENDED - EDIT THIS FILE ***)`);
+        validFilesList.push(`- ${recommendedPath} (*** TARGET - EDIT THIS FILE ***)`);
       }
       
       // Add page file (if not the recommended file)
       if (pageContext.pageFile && pageContext.pageFile !== recommendedPath) {
-        validFilesList.push(`- ${pageContext.pageFile}`);
+        validFilesList.push(`- ${pageContext.pageFile} (wrapper only)`);
       }
       
       // Add other component sources (excluding recommended file)
@@ -707,14 +751,14 @@ ${validFilesList.join("\n")}
 
 INSTRUCTIONS:
 1. Look at the screenshot and identify elements mentioned in the user's request
-2. Review the provided code to understand current implementation
+2. The TARGET COMPONENT shown first contains the UI - EDIT THAT FILE
 3. Choose which of the VALID FILES above need modifications
 4. Generate complete modified code for each file
 5. Provide previewCSS for immediate visual feedback
 6. Return as JSON in the specified format
-7. ALWAYS prioritize the (*** RECOMMENDED ***) file if one is marked - it contains the UI you see in the screenshot
+7. DO NOT edit the page wrapper unless the TARGET COMPONENT is unavailable
 
-CRITICAL: Only use file paths from the VALID FILES list above. Do NOT create new files.`;
+CRITICAL: Edit the TARGET COMPONENT (marked with ***), not the page wrapper.`;
 
       messageContent.push({
         type: "text",

package/package.json

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