sonance-brand-mcp 1.3.75 → 1.3.77

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

@@ -91,6 +91,39 @@ function debugLog(message: string, data?: unknown) {
   }
 }
 
+/**
+ * Extract JSON from LLM response that may contain preamble text
+ * Handles: pure JSON, markdown code fences, and text with embedded JSON
+ */
+function extractJsonFromResponse(text: string): string {
+  // Try direct parse first - if it starts with {, it's likely pure JSON
+  const trimmed = text.trim();
+  if (trimmed.startsWith('{')) return trimmed;
+  
+  // Extract from markdown code fence (```json ... ``` or ``` ... ```)
+  const fenceMatch = text.match(/```(?:json)?\s*([\s\S]*?)```/);
+  if (fenceMatch) {
+    const extracted = fenceMatch[1].trim();
+    debugLog("Extracted JSON from markdown fence", { previewLength: extracted.length });
+    return extracted;
+  }
+  
+  // Find the JSON object in the text (for responses with preamble)
+  const jsonStart = text.indexOf('{');
+  const jsonEnd = text.lastIndexOf('}');
+  if (jsonStart !== -1 && jsonEnd > jsonStart) {
+    const extracted = text.slice(jsonStart, jsonEnd + 1);
+    debugLog("Extracted JSON from preamble text", { 
+      preambleLength: jsonStart,
+      jsonLength: extracted.length 
+    });
+    return extracted;
+  }
+  
+  // Return as-is if no JSON structure found
+  return text;
+}
+
 /**
  * AST-based syntax validation using Babel parser
  * This catches actual syntax errors, not just tag counting
@@ -748,7 +781,10 @@ function searchFilesSmart(
 
 const VISION_SYSTEM_PROMPT = `You are an expert frontend developer. Edit the code to fulfill the user's request.
 
-Output ONLY this JSON (no other text):
+CRITICAL: Return ONLY the JSON object. No explanations, no preamble, no markdown code fences.
+Start your response with { and end with }
+
+Output format:
 {"modifications":[{"filePath":"path","patches":[{"search":"exact original code","replace":"modified code"}]}]}
 
 The "search" field must match the file EXACTLY (copy-paste from the code provided).`;
@@ -1295,62 +1331,8 @@ This is better than generating patches with made-up code.`,
       };
 
       try {
-        let jsonText = textResponse.text.trim();
-
-        // Try to extract JSON from markdown code blocks
-        const jsonMatch = jsonText.match(/```json\n([\s\S]*?)\n```/) ||
-                         jsonText.match(/```\n([\s\S]*?)\n```/);
-
-        if (jsonMatch) {
-          jsonText = jsonMatch[1];
-        } else if (jsonText.includes("```json")) {
-          const start = jsonText.indexOf("```json") + 7;
-          const end = jsonText.lastIndexOf("```");
-          if (end > start) {
-            jsonText = jsonText.substring(start, end);
-          }
-        }
-
-        jsonText = jsonText.trim();
-        
-        // Robust JSON extraction: look for {"modifications" pattern specifically
-        // This handles cases where the LLM includes preamble text with code blocks
-        const jsonStartPatterns = ['{"modifications"', '{ "modifications"', '{\n  "modifications"'];
-        let jsonStart = -1;
-        
-        for (const pattern of jsonStartPatterns) {
-          const idx = jsonText.indexOf(pattern);
-          if (idx !== -1 && (jsonStart === -1 || idx < jsonStart)) {
-            jsonStart = idx;
-          }
-        }
-        
-        if (jsonStart !== -1) {
-          // Find the matching closing brace by counting braces
-          let braceCount = 0;
-          let jsonEnd = -1;
-          for (let i = jsonStart; i < jsonText.length; i++) {
-            if (jsonText[i] === '{') braceCount++;
-            if (jsonText[i] === '}') {
-              braceCount--;
-              if (braceCount === 0) {
-                jsonEnd = i;
-                break;
-              }
-            }
-          }
-          if (jsonEnd !== -1) {
-            jsonText = jsonText.substring(jsonStart, jsonEnd + 1);
-          }
-        } else {
-          // Fallback: try first { to last }
-        const firstBrace = jsonText.indexOf('{');
-        const lastBrace = jsonText.lastIndexOf('}');
-        if (firstBrace !== -1 && lastBrace > firstBrace) {
-          jsonText = jsonText.substring(firstBrace, lastBrace + 1);
-          }
-        }
-        
+        // Use robust JSON extraction that handles preamble text, code fences, etc.
+        const jsonText = extractJsonFromResponse(textResponse.text);
         aiResponse = JSON.parse(jsonText);
       } catch {
         console.error("Failed to parse AI response:", textResponse.text);

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

@@ -87,6 +87,39 @@ function debugLog(message: string, data?: unknown) {
   }
 }
 
+/**
+ * Extract JSON from LLM response that may contain preamble text
+ * Handles: pure JSON, markdown code fences, and text with embedded JSON
+ */
+function extractJsonFromResponse(text: string): string {
+  // Try direct parse first - if it starts with {, it's likely pure JSON
+  const trimmed = text.trim();
+  if (trimmed.startsWith('{')) return trimmed;
+  
+  // Extract from markdown code fence (```json ... ``` or ``` ... ```)
+  const fenceMatch = text.match(/```(?:json)?\s*([\s\S]*?)```/);
+  if (fenceMatch) {
+    const extracted = fenceMatch[1].trim();
+    debugLog("Extracted JSON from markdown fence", { previewLength: extracted.length });
+    return extracted;
+  }
+  
+  // Find the JSON object in the text (for responses with preamble)
+  const jsonStart = text.indexOf('{');
+  const jsonEnd = text.lastIndexOf('}');
+  if (jsonStart !== -1 && jsonEnd > jsonStart) {
+    const extracted = text.slice(jsonStart, jsonEnd + 1);
+    debugLog("Extracted JSON from preamble text", { 
+      preambleLength: jsonStart,
+      jsonLength: extracted.length 
+    });
+    return extracted;
+  }
+  
+  // Return as-is if no JSON structure found
+  return text;
+}
+
 /**
  * AST-based syntax validation using Babel parser
  * This catches actual syntax errors, not just tag counting
@@ -744,7 +777,10 @@ function searchFilesSmart(
 
 const VISION_SYSTEM_PROMPT = `You are an expert frontend developer. Edit the code to fulfill the user's request.
 
-Output ONLY this JSON (no other text):
+CRITICAL: Return ONLY the JSON object. No explanations, no preamble, no markdown code fences.
+Start your response with { and end with }
+
+Output format:
 {"modifications":[{"filePath":"path","patches":[{"search":"exact original code","replace":"modified code"}]}]}
 
 The "search" field must match the file EXACTLY (copy-paste from the code provided).`;
@@ -1260,64 +1296,8 @@ This is better than generating patches with made-up code.`,
       };
 
       try {
-        let jsonText = textResponse.text.trim();
-        
-        // Try to extract JSON from markdown code blocks
-        const jsonMatch = jsonText.match(/```json\n([\s\S]*?)\n```/) || 
-                         jsonText.match(/```\n([\s\S]*?)\n```/);
-        
-        if (jsonMatch) {
-          jsonText = jsonMatch[1];
-        } else if (jsonText.includes("```json")) {
-            // Fallback for cases where regex might miss due to newlines
-            const start = jsonText.indexOf("```json") + 7;
-            const end = jsonText.lastIndexOf("```");
-            if (end > start) {
-                jsonText = jsonText.substring(start, end);
-            }
-        }
-
-        // Clean up any remaining whitespace
-        jsonText = jsonText.trim();
-        
-        // Robust JSON extraction: look for {"modifications" pattern specifically
-        // This handles cases where the LLM includes preamble text with code blocks
-        const jsonStartPatterns = ['{"modifications"', '{ "modifications"', '{\n  "modifications"'];
-        let jsonStart = -1;
-        
-        for (const pattern of jsonStartPatterns) {
-          const idx = jsonText.indexOf(pattern);
-          if (idx !== -1 && (jsonStart === -1 || idx < jsonStart)) {
-            jsonStart = idx;
-          }
-        }
-        
-        if (jsonStart !== -1) {
-          // Find the matching closing brace by counting braces
-          let braceCount = 0;
-          let jsonEnd = -1;
-          for (let i = jsonStart; i < jsonText.length; i++) {
-            if (jsonText[i] === '{') braceCount++;
-            if (jsonText[i] === '}') {
-              braceCount--;
-              if (braceCount === 0) {
-                jsonEnd = i;
-                break;
-              }
-            }
-          }
-          if (jsonEnd !== -1) {
-            jsonText = jsonText.substring(jsonStart, jsonEnd + 1);
-          }
-        } else {
-          // Fallback: try first { to last }
-        const firstBrace = jsonText.indexOf('{');
-        const lastBrace = jsonText.lastIndexOf('}');
-        if (firstBrace !== -1 && lastBrace > firstBrace) {
-          jsonText = jsonText.substring(firstBrace, lastBrace + 1);
-          }
-        }
-        
+        // Use robust JSON extraction that handles preamble text, code fences, etc.
+        const jsonText = extractJsonFromResponse(textResponse.text);
         aiResponse = JSON.parse(jsonText);
       } catch {
         console.error("Failed to parse AI response:", textResponse.text);

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

@@ -2384,7 +2384,7 @@ export function SonanceDevTools() {
     <button
       onClick={() => setIsOpen(true)}
       className={cn(
-        "fixed bottom-6 right-6 z-[9998]",
+        "fixed bottom-6 right-6 z-[2147483646]",
         "flex h-14 w-14 items-center justify-center",
         "rounded-full bg-[#333F48] text-white shadow-lg",
         "hover:scale-105 hover:shadow-xl",
@@ -2403,7 +2403,7 @@ export function SonanceDevTools() {
       ref={panelRef}
       data-sonance-devtools="true"
       className={cn(
-        "fixed bottom-6 right-6 z-[9999]",
+        "fixed bottom-6 right-6 z-[2147483647]",
         "w-[360px] max-h-[80vh]",
         "bg-white rounded-lg shadow-2xl border border-gray-200",
         "flex flex-col overflow-hidden",

package/package.json

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