sonance-brand-mcp 1.3.63 → 1.3.64

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

@@ -29,6 +29,10 @@ interface VisionFocusedElement {
     height: number;
   };
   description?: string;
+  /** The actual text content of the element (e.g., "REFRESH", "ADD PROCESS") */
+  textContent?: string;
+  /** The className string of the element for pattern matching */
+  className?: string;
 }
 
 interface VisionFileModification {
@@ -176,10 +180,14 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
  * This helps identify which file actually contains the element the user clicked on
  * 
  * CURSOR-STYLE: Search file CONTENTS for patterns, not just file names
+ * 
+ * @param phase2aMatches - File paths that Phase 2a identified by component name matching visible text
+ *                         These get a MASSIVE bonus because they're contextually relevant
  */
 function findFilesContainingElement(
   focusedElements: VisionFocusedElement[] | undefined,
-  candidateFiles: { path: string; content: string }[]
+  candidateFiles: { path: string; content: string }[],
+  phase2aMatches: string[] = [] // Files that Phase 2a identified by component name
 ): { path: string; score: number; matches: string[] }[] {
   if (!focusedElements || focusedElements.length === 0) {
     return [];
@@ -191,7 +199,13 @@ function findFilesContainingElement(
     let score = 0;
     const matches: string[] = [];
     const content = file.content;
-    const contentLower = content.toLowerCase();
+
+    // HIGHEST VALUE: Phase 2a identified this file by matching component name to visible text
+    // This means the LLM saw "ProcessRow" in the screenshot and this file is ProcessRow.tsx
+    if (phase2aMatches.includes(file.path)) {
+      score += 200;
+      matches.push('Phase2a component match');
+    }
 
     for (const el of focusedElements) {
       // Extract element type from the name (e.g., "button #123" -> "button")
@@ -216,28 +230,42 @@ function findFilesContainingElement(
         matches.push(`defines ${capitalizedType}`);
       }
 
-      // MEDIUM VALUE: JSX usage of this element type (rendered in this file)
-      const jsxTagPattern = new RegExp(`<${capitalizedType}[\\s/>]`, 'g');
-      const jsxMatches = content.match(jsxTagPattern);
-      if (jsxMatches) {
-        score += 20 * jsxMatches.length;
-        matches.push(`<${capitalizedType}> x${jsxMatches.length}`);
-      }
-
-      // MEDIUM VALUE: HTML tag usage
-      const htmlTagPattern = new RegExp(`<${elementType}[\\s>]`, 'gi');
-      const htmlMatches = content.match(htmlTagPattern);
-      if (htmlMatches) {
-        score += 10 * htmlMatches.length;
-        matches.push(`<${elementType}> x${htmlMatches.length}`);
+      // NOTE: We intentionally DO NOT count buttons, onClick handlers, or JSX tags
+      // because files with MORE of these are often "kitchen sink" components,
+      // not the focused component the user is looking at.
+      // Instead, we rely on Phase 2a matches and textContent matching.
+
+      // VERY HIGH VALUE: Exact text content match (e.g., button says "REFRESH")
+      // This is THE file if it contains the exact text the user clicked on
+      if (el.textContent && el.textContent.length >= 2) {
+        // Search for the text in JSX patterns like >REFRESH< or {`REFRESH`} or {"REFRESH"}
+        const textPatterns = [
+          `>${el.textContent}<`,           // JSX text content
+          `"${el.textContent}"`,           // String literal
+          `'${el.textContent}'`,           // Single-quoted string
+          `\`${el.textContent}\``,         // Template literal
+        ];
+        
+        for (const pattern of textPatterns) {
+          if (content.includes(pattern)) {
+            score += 150; // Very high - exact match!
+            matches.push(`contains "${el.textContent.substring(0, 20)}"`);
+            break; // Only add once per element
+          }
+        }
       }
 
-      // LOW VALUE: Event handlers (onClick, onPress, etc.)
-      if (elementType === "button" || componentType === "button") {
-        const clickHandlers = content.match(/onClick\s*=/gi);
-        if (clickHandlers) {
-          score += 5 * clickHandlers.length;
-          matches.push(`onClick x${clickHandlers.length}`);
+      // MEDIUM VALUE: className pattern match
+      // If the file contains the same className string, it likely defines this element
+      if (el.className && el.className.length >= 10) {
+        // Extract the first few unique class names (not all to avoid noise)
+        const classNames = el.className.split(/\s+/).filter(c => c.length > 3).slice(0, 5);
+        for (const cls of classNames) {
+          if (content.includes(cls)) {
+            score += 25;
+            matches.push(`has class "${cls.substring(0, 20)}"`);
+            break; // Only add once per element
+          }
         }
       }
 
@@ -412,7 +440,7 @@ function searchFilesSmart(
   analysis: ScreenshotAnalysis,
   projectRoot: string,
   maxFiles: number = 10
-): { path: string; content: string; score: number }[] {
+): { path: string; content: string; score: number; filenameMatch: boolean }[] {
   const { visibleText, componentNames, codePatterns } = analysis;
   
   // Combine all search terms
@@ -534,7 +562,7 @@ function searchFilesSmart(
     }))
   });
 
-  return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score }));
+  return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score, filenameMatch: r.filenameMatch }));
 }
 
 const VISION_SYSTEM_PROMPT = `You edit code. Return ONLY valid JSON - no explanation, no preamble, no markdown.
@@ -678,10 +706,19 @@ export async function POST(request: Request) {
           const searchResults = searchFilesSmart(analysis, projectRoot, 10);
           smartSearchFiles = searchResults.map(r => ({ path: r.path, content: r.content }));
           
+          // Extract Phase 2a matches - files identified by component name matching visible text
+          // These are contextually relevant (e.g., "ProcessRow" seen in screenshot -> ProcessRow.tsx)
+          const phase2aMatches = searchResults
+            .filter(r => r.filenameMatch)
+            .map(r => r.path);
+          
+          debugLog("Phase 2a component-name matches", { phase2aMatches });
+          
           // PHASE 2.5: Find which files contain the focused element
           const focusedElementHints = findFilesContainingElement(
             focusedElements,
-            searchResults.map(r => ({ path: r.path, content: r.content }))
+            searchResults.map(r => ({ path: r.path, content: r.content })),
+            phase2aMatches // Pass Phase 2a matches for massive bonus
           );
           
           if (focusedElementHints.length > 0) {

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

@@ -28,6 +28,10 @@ interface VisionFocusedElement {
     height: number;
   };
   description?: string;
+  /** The actual text content of the element (e.g., "REFRESH", "ADD PROCESS") */
+  textContent?: string;
+  /** The className string of the element for pattern matching */
+  className?: string;
 }
 
 interface VisionFileModification {
@@ -172,10 +176,14 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
  * This helps identify which file actually contains the element the user clicked on
  * 
  * CURSOR-STYLE: Search file CONTENTS for patterns, not just file names
+ * 
+ * @param phase2aMatches - File paths that Phase 2a identified by component name matching visible text
+ *                         These get a MASSIVE bonus because they're contextually relevant
  */
 function findFilesContainingElement(
   focusedElements: VisionFocusedElement[] | undefined,
-  candidateFiles: { path: string; content: string }[]
+  candidateFiles: { path: string; content: string }[],
+  phase2aMatches: string[] = [] // Files that Phase 2a identified by component name
 ): { path: string; score: number; matches: string[] }[] {
   if (!focusedElements || focusedElements.length === 0) {
     return [];
@@ -187,7 +195,13 @@ function findFilesContainingElement(
     let score = 0;
     const matches: string[] = [];
     const content = file.content;
-    const contentLower = content.toLowerCase();
+
+    // HIGHEST VALUE: Phase 2a identified this file by matching component name to visible text
+    // This means the LLM saw "ProcessRow" in the screenshot and this file is ProcessRow.tsx
+    if (phase2aMatches.includes(file.path)) {
+      score += 200;
+      matches.push('Phase2a component match');
+    }
 
     for (const el of focusedElements) {
       // Extract element type from the name (e.g., "button #123" -> "button")
@@ -212,28 +226,42 @@ function findFilesContainingElement(
         matches.push(`defines ${capitalizedType}`);
       }
 
-      // MEDIUM VALUE: JSX usage of this element type (rendered in this file)
-      const jsxTagPattern = new RegExp(`<${capitalizedType}[\\s/>]`, 'g');
-      const jsxMatches = content.match(jsxTagPattern);
-      if (jsxMatches) {
-        score += 20 * jsxMatches.length;
-        matches.push(`<${capitalizedType}> x${jsxMatches.length}`);
-      }
-
-      // MEDIUM VALUE: HTML tag usage
-      const htmlTagPattern = new RegExp(`<${elementType}[\\s>]`, 'gi');
-      const htmlMatches = content.match(htmlTagPattern);
-      if (htmlMatches) {
-        score += 10 * htmlMatches.length;
-        matches.push(`<${elementType}> x${htmlMatches.length}`);
+      // NOTE: We intentionally DO NOT count buttons, onClick handlers, or JSX tags
+      // because files with MORE of these are often "kitchen sink" components,
+      // not the focused component the user is looking at.
+      // Instead, we rely on Phase 2a matches and textContent matching.
+
+      // VERY HIGH VALUE: Exact text content match (e.g., button says "REFRESH")
+      // This is THE file if it contains the exact text the user clicked on
+      if (el.textContent && el.textContent.length >= 2) {
+        // Search for the text in JSX patterns like >REFRESH< or {`REFRESH`} or {"REFRESH"}
+        const textPatterns = [
+          `>${el.textContent}<`,           // JSX text content
+          `"${el.textContent}"`,           // String literal
+          `'${el.textContent}'`,           // Single-quoted string
+          `\`${el.textContent}\``,         // Template literal
+        ];
+        
+        for (const pattern of textPatterns) {
+          if (content.includes(pattern)) {
+            score += 150; // Very high - exact match!
+            matches.push(`contains "${el.textContent.substring(0, 20)}"`);
+            break; // Only add once per element
+          }
+        }
       }
 
-      // LOW VALUE: Event handlers (onClick, onPress, etc.)
-      if (elementType === "button" || componentType === "button") {
-        const clickHandlers = content.match(/onClick\s*=/gi);
-        if (clickHandlers) {
-          score += 5 * clickHandlers.length;
-          matches.push(`onClick x${clickHandlers.length}`);
+      // MEDIUM VALUE: className pattern match
+      // If the file contains the same className string, it likely defines this element
+      if (el.className && el.className.length >= 10) {
+        // Extract the first few unique class names (not all to avoid noise)
+        const classNames = el.className.split(/\s+/).filter(c => c.length > 3).slice(0, 5);
+        for (const cls of classNames) {
+          if (content.includes(cls)) {
+            score += 25;
+            matches.push(`has class "${cls.substring(0, 20)}"`);
+            break; // Only add once per element
+          }
         }
       }
 
@@ -408,7 +436,7 @@ function searchFilesSmart(
   analysis: ScreenshotAnalysis,
   projectRoot: string,
   maxFiles: number = 10
-): { path: string; content: string; score: number }[] {
+): { path: string; content: string; score: number; filenameMatch: boolean }[] {
   const { visibleText, componentNames, codePatterns } = analysis;
   
   // Combine all search terms
@@ -530,7 +558,7 @@ function searchFilesSmart(
     }))
   });
 
-  return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score }));
+  return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score, filenameMatch: r.filenameMatch }));
 }
 
 const VISION_SYSTEM_PROMPT = `You edit code. Return ONLY valid JSON - no explanation, no preamble, no markdown.
@@ -647,10 +675,19 @@ export async function POST(request: Request) {
           const searchResults = searchFilesSmart(analysis, projectRoot, 10);
           smartSearchFiles = searchResults.map(r => ({ path: r.path, content: r.content }));
           
+          // Extract Phase 2a matches - files identified by component name matching visible text
+          // These are contextually relevant (e.g., "ProcessRow" seen in screenshot -> ProcessRow.tsx)
+          const phase2aMatches = searchResults
+            .filter(r => r.filenameMatch)
+            .map(r => r.path);
+          
+          debugLog("Phase 2a component-name matches", { phase2aMatches });
+          
           // PHASE 2.5: Find which files contain the focused element
           const focusedElementHints = findFilesContainingElement(
             focusedElements,
-            searchResults.map(r => ({ path: r.path, content: r.content }))
+            searchResults.map(r => ({ path: r.path, content: r.content })),
+            phase2aMatches // Pass Phase 2a matches for massive bonus
           );
           
           if (focusedElementHints.length > 0) {

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

@@ -787,7 +787,11 @@ export function SonanceDevTools() {
                 el.setAttribute("data-sonance-variant", variantId);
               }
 
-              newTagged.push({ name, rect, type: "component", variantId });
+              // Capture textContent and className for dynamic element matching
+              const textContent = (el.textContent?.trim() || "").substring(0, 100); // Cap at 100 chars
+              const className = el.className?.toString() || "";
+              
+              newTagged.push({ name, rect, type: "component", variantId, textContent, className });
             }
           }
         });
@@ -826,7 +830,11 @@ export function SonanceDevTools() {
                 el.setAttribute("data-sonance-name", genericName);
               }
 
-              newTagged.push({ name: genericName, rect, type: "component", variantId });
+              // Capture textContent and className for dynamic element matching
+              const textContent = (el.textContent?.trim() || "").substring(0, 100); // Cap at 100 chars
+              const elClassName = el.className?.toString() || "";
+
+              newTagged.push({ name: genericName, rect, type: "component", variantId, textContent, className: elClassName });
             }
           });
         });
@@ -1017,6 +1025,9 @@ export function SonanceDevTools() {
         width: element.rect.width,
         height: element.rect.height,
       },
+      // NEW: Capture text and className for dynamic file matching
+      textContent: element.textContent,
+      className: element.className,
     };
 
     setVisionFocusedElements((prev) => {

package/dist/assets/dev-tools/types.ts

@@ -22,8 +22,10 @@ export interface DetectedElement {
   logoId?: string;
   /** Unique ID for text elements (for selection/editing) */
   textId?: string;
-  /** The actual text content (for text elements) */
+  /** The actual text content (for all elements - button text, link text, etc.) */
   textContent?: string;
+  /** The className string for pattern matching in code */
+  className?: string;
   /** Component variant ID (hash of styles/classes) to distinguish visual styles */
   variantId?: string;
 }
@@ -220,6 +222,10 @@ export interface VisionFocusedElement {
     height: number;
   };
   description?: string;
+  /** The actual text content of the element (e.g., "REFRESH", "ADD PROCESS") */
+  textContent?: string;
+  /** The className string of the element for pattern matching */
+  className?: string;
 }
 
 export interface VisionEditRequest {

package/package.json

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