sonance-brand-mcp 1.3.48 → 1.3.50

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

@@ -545,6 +545,7 @@ export async function POST(request: Request) {
       return NextResponse.json({
         success: result.success,
         message: result.message,
+        error: result.success ? undefined : result.message, // Include error for client compatibility
         filesReverted: result.filesReverted,
       });
     }
@@ -846,6 +847,14 @@ CRITICAL: Edit the TARGET COMPONENT (marked with ***), not the page wrapper.`;
         // If this is a retry, add feedback about what went wrong
         if (retryCount > 0 && lastPatchErrors.length > 0) {
           debugLog("Retry attempt with feedback", { retryCount, errorCount: lastPatchErrors.length });
+          
+          // Get a snippet of the actual file content to help AI find correct code
+          let fileSnippet = "";
+          if (recommendedFileContent) {
+            // Show first 800 chars to give AI context about what code actually exists
+            fileSnippet = recommendedFileContent.content.substring(0, 800).replace(/\n/g, "\n");
+          }
+          
           currentMessages.push({
             role: "assistant",
             content: "I'll analyze the screenshot and generate the patches now.",
@@ -857,10 +866,20 @@ CRITICAL: Edit the TARGET COMPONENT (marked with ***), not the page wrapper.`;
 Failed patches:
 ${lastPatchErrors.join("\n\n")}
 
-IMPORTANT: You must copy the "search" string EXACTLY from the file content I provided. Do NOT invent or guess code.
-Look carefully at the ACTUAL file content in the TARGET COMPONENT section above and try again.
+${fileSnippet ? `Here is the ACTUAL beginning of the file you're trying to edit:
+\`\`\`tsx
+${fileSnippet}...
+\`\`\`
+` : ""}
+CRITICAL INSTRUCTIONS:
+1. Your "search" string MUST be copied EXACTLY from the file content I provided above
+2. Do NOT invent, guess, or imagine code that might exist
+3. Look for the ACTUAL code in the TARGET COMPONENT section and copy it exactly
 
-If you cannot find the exact code to modify, return an empty modifications array with an explanation.`,
+If you still cannot find the exact code to modify after reviewing the file:
+- Return {"modifications": [], "explanation": "Could not locate the exact code. Please specify which element you want to change more precisely."}
+
+This is better than generating patches with made-up code.`,
           });
         }
 
@@ -1849,6 +1868,7 @@ function searchFilesForKeywords(
 let cachedPathAliases: Map<string, string> | null = null;
 let cachedProjectRoot: string | null = null;
 let cachedTsconfigMtime: number | null = null;
+let cachedParseError: string | null = null; // Cache parse errors to avoid log spam
 
 /**
  * Clean tsconfig.json content to make it valid JSON
@@ -1921,21 +1941,23 @@ function getPathAliases(projectRoot: string): Map<string, string> {
         cachedTsconfigMtime = null;
       }
     } catch (e) {
-      // Log the error with more context for debugging
       const errorStr = String(e);
-      const posMatch = errorStr.match(/position (\d+)/);
-      let context = "";
-      if (posMatch) {
-        const pos = parseInt(posMatch[1], 10);
-        const content = fs.readFileSync(tsconfigPath, "utf-8");
-        context = `Near: "${content.substring(Math.max(0, pos - 20), pos + 20)}"`;
+      
+      // Only log parse error once to avoid log spam
+      if (!cachedParseError) {
+        const posMatch = errorStr.match(/position (\d+)/);
+        let context = "";
+        if (posMatch) {
+          const pos = parseInt(posMatch[1], 10);
+          const content = fs.readFileSync(tsconfigPath, "utf-8");
+          context = `Near: "${content.substring(Math.max(0, pos - 20), pos + 20)}"`;
+        }
+        debugLog("[apply] Failed to parse tsconfig.json (will use defaults, logging once)", { error: errorStr, context });
+        cachedParseError = errorStr;
       }
-      debugLog("[apply] Failed to parse tsconfig.json", { error: errorStr, context });
       
-      // Clear cache on error so we retry next time
-      cachedPathAliases = null;
-      cachedProjectRoot = null;
-      cachedTsconfigMtime = null;
+      // Don't clear cache - we'll use the fallback aliases
+      // cachedPathAliases will remain null, triggering fallback below
     }
   }
   
@@ -1950,13 +1972,16 @@ function getPathAliases(projectRoot: string): Map<string, string> {
     } else {
       aliases.set("@/", "");
     }
-    debugLog("[apply] Using default @/ alias", { alias: aliases.get("@/") });
+    // Only log default alias once (not when using cached error fallback)
+    if (!cachedParseError) {
+      debugLog("[apply] Using default @/ alias", { alias: aliases.get("@/") });
+    }
   }
   
-  // Only cache if we parsed successfully or there's no tsconfig
-  if (parsedSuccessfully || !fs.existsSync(tsconfigPath)) {
-  cachedPathAliases = aliases;
-  cachedProjectRoot = projectRoot;
+  // Cache aliases if parsed successfully, no tsconfig exists, OR we have a parse error (cache fallback)
+  if (parsedSuccessfully || !fs.existsSync(tsconfigPath) || cachedParseError) {
+    cachedPathAliases = aliases;
+    cachedProjectRoot = projectRoot;
   }
   
   return aliases;

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

@@ -852,6 +852,14 @@ CRITICAL: Edit the TARGET COMPONENT (marked with ***), not the page wrapper.`;
         // If this is a retry, add feedback about what went wrong
         if (retryCount > 0 && lastPatchErrors.length > 0) {
           debugLog("Retry attempt with feedback", { retryCount, errorCount: lastPatchErrors.length });
+          
+          // Get a snippet of the actual file content to help AI find correct code
+          let fileSnippet = "";
+          if (recommendedFileContent) {
+            // Show first 800 chars to give AI context about what code actually exists
+            fileSnippet = recommendedFileContent.content.substring(0, 800).replace(/\n/g, "\n");
+          }
+          
           currentMessages.push({
             role: "assistant",
             content: "I'll analyze the screenshot and generate the patches now.",
@@ -863,10 +871,20 @@ CRITICAL: Edit the TARGET COMPONENT (marked with ***), not the page wrapper.`;
 Failed patches:
 ${lastPatchErrors.join("\n\n")}
 
-IMPORTANT: You must copy the "search" string EXACTLY from the file content I provided. Do NOT invent or guess code.
-Look carefully at the ACTUAL file content in the TARGET COMPONENT section above and try again.
+${fileSnippet ? `Here is the ACTUAL beginning of the file you're trying to edit:
+\`\`\`tsx
+${fileSnippet}...
+\`\`\`
+` : ""}
+CRITICAL INSTRUCTIONS:
+1. Your "search" string MUST be copied EXACTLY from the file content I provided above
+2. Do NOT invent, guess, or imagine code that might exist
+3. Look for the ACTUAL code in the TARGET COMPONENT section and copy it exactly
 
-If you cannot find the exact code to modify, return an empty modifications array with an explanation.`,
+If you still cannot find the exact code to modify after reviewing the file:
+- Return {"modifications": [], "explanation": "Could not locate the exact code. Please specify which element you want to change more precisely."}
+
+This is better than generating patches with made-up code.`,
           });
         }
 
@@ -1755,6 +1773,7 @@ function searchFilesForKeywords(
 let cachedPathAliases: Map<string, string> | null = null;
 let cachedProjectRoot: string | null = null;
 let cachedTsconfigMtime: number | null = null;
+let cachedParseError: string | null = null; // Cache parse errors to avoid log spam
 
 /**
  * Clean tsconfig.json content to make it valid JSON
@@ -1827,21 +1846,23 @@ function getPathAliases(projectRoot: string): Map<string, string> {
         cachedTsconfigMtime = null;
       }
     } catch (e) {
-      // Log the error with more context for debugging
       const errorStr = String(e);
-      const posMatch = errorStr.match(/position (\d+)/);
-      let context = "";
-      if (posMatch) {
-        const pos = parseInt(posMatch[1], 10);
-        const content = fs.readFileSync(tsconfigPath, "utf-8");
-        context = `Near: "${content.substring(Math.max(0, pos - 20), pos + 20)}"`;
+      
+      // Only log parse error once to avoid log spam
+      if (!cachedParseError) {
+        const posMatch = errorStr.match(/position (\d+)/);
+        let context = "";
+        if (posMatch) {
+          const pos = parseInt(posMatch[1], 10);
+          const content = fs.readFileSync(tsconfigPath, "utf-8");
+          context = `Near: "${content.substring(Math.max(0, pos - 20), pos + 20)}"`;
+        }
+        debugLog("[edit] Failed to parse tsconfig.json (will use defaults, logging once)", { error: errorStr, context });
+        cachedParseError = errorStr;
       }
-      debugLog("[edit] Failed to parse tsconfig.json", { error: errorStr, context });
       
-      // Clear cache on error so we retry next time
-      cachedPathAliases = null;
-      cachedProjectRoot = null;
-      cachedTsconfigMtime = null;
+      // Don't clear cache - we'll use the fallback aliases
+      // cachedPathAliases will remain null, triggering fallback below
     }
   }
   
@@ -1856,13 +1877,16 @@ function getPathAliases(projectRoot: string): Map<string, string> {
     } else {
       aliases.set("@/", "");
     }
-    debugLog("[edit] Using default @/ alias", { alias: aliases.get("@/") });
+    // Only log default alias once (not when using cached error fallback)
+    if (!cachedParseError) {
+      debugLog("[edit] Using default @/ alias", { alias: aliases.get("@/") });
+    }
   }
   
-  // Only cache if we parsed successfully or there's no tsconfig
-  if (parsedSuccessfully || !fs.existsSync(tsconfigPath)) {
-  cachedPathAliases = aliases;
-  cachedProjectRoot = projectRoot;
+  // Cache aliases if parsed successfully, no tsconfig exists, OR we have a parse error (cache fallback)
+  if (parsedSuccessfully || !fs.existsSync(tsconfigPath) || cachedParseError) {
+    cachedPathAliases = aliases;
+    cachedProjectRoot = projectRoot;
   }
   
   return aliases;

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

@@ -1228,6 +1228,23 @@ export function SonanceDevTools() {
     }
   }, [applyFirstSession]);
 
+  // Force clear stale session - clears state without calling API
+  const handleApplyFirstForceClear = useCallback(() => {
+    console.log("[Apply-First] Force clearing stale session");
+    setApplyFirstSession(null);
+    setApplyFirstStatus("idle");
+    setVisionFocusedElements([]);
+    setChangedElements([]);
+    
+    // Clear persisted session from localStorage
+    try {
+      localStorage.removeItem("sonance-apply-first-session");
+      console.log("[Apply-First] Session force-cleared from localStorage");
+    } catch (e) {
+      console.warn("[Apply-First] Failed to clear session:", e);
+    }
+  }, []);
+
   // Auto-revert on navigation (beforeunload)
   useEffect(() => {
     if (!applyFirstSession) return;
@@ -2533,6 +2550,7 @@ export function SonanceDevTools() {
             onApplyFirstComplete={handleApplyFirstComplete}
             onApplyFirstAccept={handleApplyFirstAccept}
             onApplyFirstRevert={handleApplyFirstRevert}
+            onApplyFirstForceClear={handleApplyFirstForceClear}
           />
         )}
 

package/dist/assets/dev-tools/components/ApplyFirstPreview.tsx

@@ -10,6 +10,7 @@ export interface ApplyFirstPreviewProps {
   status: ApplyFirstStatus;
   onAccept: () => void;
   onRevert: () => void;
+  onForceClear?: () => void; // Force clear stale sessions
 }
 
 function FileModificationCard({
@@ -100,6 +101,7 @@ export function ApplyFirstPreview({
   status,
   onAccept,
   onRevert,
+  onForceClear,
 }: ApplyFirstPreviewProps) {
   const [expandedFiles, setExpandedFiles] = useState<Set<string>>(new Set());
 
@@ -124,6 +126,7 @@ export function ApplyFirstPreview({
 
   const fileCount = session.modifications.length;
   const isLoading = status === "accepting" || status === "reverting";
+  const isStaleSession = fileCount === 0 || status === "error";
 
   return (
     <div className="space-y-3 p-3 rounded border border-green-300 bg-green-50">
@@ -141,14 +144,24 @@ export function ApplyFirstPreview({
         <HMRStatusBadge status={status} />
       </div>
 
-      {/* Info Banner */}
-      <div className="flex items-start gap-2 p-2 rounded bg-blue-50 border border-blue-200">
-        <Info className="h-3.5 w-3.5 text-blue-600 mt-0.5 flex-shrink-0" />
-        <span className="text-xs text-blue-700">
-          <strong>Changes are live!</strong> Scroll around to see the actual result.
-          Your original files are safely backed up.
-        </span>
-      </div>
+      {/* Info Banner - show different message for stale sessions */}
+      {isStaleSession ? (
+        <div className="flex items-start gap-2 p-2 rounded bg-amber-50 border border-amber-200">
+          <AlertTriangle className="h-3.5 w-3.5 text-amber-600 mt-0.5 flex-shrink-0" />
+          <span className="text-xs text-amber-700">
+            <strong>Stale session detected.</strong> The backup files may no longer exist.
+            Use &quot;Force Clear&quot; to dismiss this panel.
+          </span>
+        </div>
+      ) : (
+        <div className="flex items-start gap-2 p-2 rounded bg-blue-50 border border-blue-200">
+          <Info className="h-3.5 w-3.5 text-blue-600 mt-0.5 flex-shrink-0" />
+          <span className="text-xs text-blue-700">
+            <strong>Changes are live!</strong> Scroll around to see the actual result.
+            Your original files are safely backed up.
+          </span>
+        </div>
+      )}
 
       {/* File Modifications List */}
       <div className="space-y-2 max-h-80 overflow-y-auto">
@@ -172,29 +185,31 @@ export function ApplyFirstPreview({
 
       {/* Action Buttons */}
       <div className="flex gap-2">
-        {/* Accept Button */}
-        <button
-          onClick={onAccept}
-          disabled={isLoading}
-          className={cn(
-            "flex-1 flex items-center justify-center gap-2 py-2.5",
-            "text-xs font-medium rounded transition-colors",
-            "bg-green-600 text-white hover:bg-green-700",
-            "disabled:opacity-50 disabled:cursor-not-allowed"
-          )}
-        >
-          {status === "accepting" ? (
-            <>
-              <Loader2 className="h-3.5 w-3.5 animate-spin" />
-              Accepting...
-            </>
-          ) : (
-            <>
-              <Check className="h-3.5 w-3.5" />
-              Keep Changes
-            </>
-          )}
-        </button>
+        {/* Accept Button - hide for stale sessions */}
+        {!isStaleSession && (
+          <button
+            onClick={onAccept}
+            disabled={isLoading}
+            className={cn(
+              "flex-1 flex items-center justify-center gap-2 py-2.5",
+              "text-xs font-medium rounded transition-colors",
+              "bg-green-600 text-white hover:bg-green-700",
+              "disabled:opacity-50 disabled:cursor-not-allowed"
+            )}
+          >
+            {status === "accepting" ? (
+              <>
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                Accepting...
+              </>
+            ) : (
+              <>
+                <Check className="h-3.5 w-3.5" />
+                Keep Changes
+              </>
+            )}
+          </button>
+        )}
 
         {/* Revert Button */}
         <button
@@ -219,6 +234,23 @@ export function ApplyFirstPreview({
             </>
           )}
         </button>
+
+        {/* Force Clear Button - show for stale sessions or errors */}
+        {isStaleSession && onForceClear && (
+          <button
+            onClick={onForceClear}
+            disabled={isLoading}
+            className={cn(
+              "flex-1 flex items-center justify-center gap-2 py-2.5",
+              "text-xs font-medium rounded transition-colors",
+              "border border-red-300 text-red-700 bg-red-50 hover:bg-red-100",
+              "disabled:opacity-50 disabled:cursor-not-allowed"
+            )}
+          >
+            <X className="h-3.5 w-3.5" />
+            Force Clear
+          </button>
+        )}
       </div>
 
       {/* Session Info (for debugging) */}

package/dist/assets/dev-tools/panels/ComponentsPanel.tsx

@@ -56,6 +56,7 @@ export interface ComponentsPanelProps {
   onApplyFirstComplete?: (session: ApplyFirstSession) => void;
   onApplyFirstAccept?: () => void;
   onApplyFirstRevert?: () => void;
+  onApplyFirstForceClear?: () => void;
 }
 
 export function ComponentsPanel({ 
@@ -95,6 +96,7 @@ export function ComponentsPanel({
   onApplyFirstComplete,
   onApplyFirstAccept,
   onApplyFirstRevert,
+  onApplyFirstForceClear,
 }: ComponentsPanelProps) {
   // Auto-activate inspector when entering this tab
   useEffect(() => {
@@ -578,6 +580,7 @@ export function ComponentsPanel({
                 status={applyFirstStatus}
                 onAccept={onApplyFirstAccept}
                 onRevert={onApplyFirstRevert}
+                onForceClear={onApplyFirstForceClear}
               />
             )}
 

package/package.json

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