sonance-brand-mcp 1.3.73 → 1.3.75

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

@@ -177,6 +177,48 @@ interface ScreenshotAnalysis {
   visibleText: string[];
   componentNames: string[];
   codePatterns: string[];
+  elementTypes: string[]; // Detected UI element types: table, button, form, card, list, modal, dropdown, input
+}
+
+/**
+ * Map element types to JSX/HTML patterns to search for in files
+ * This is the key to Cursor-style file discovery - search for WHAT we see, not guessed names
+ */
+const ELEMENT_PATTERNS: Record<string, string[]> = {
+  table: ['<Table', 'TableRow', 'TableCell', 'TableHeader', 'TableBody', '<table', '<tr', '<td', '<th'],
+  button: ['<Button', '<button', 'onClick={', 'handleClick'],
+  form: ['<Form', '<form', 'onSubmit', '<Input', '<input', 'handleSubmit'],
+  card: ['<Card', 'CardContent', 'CardHeader', 'CardTitle', 'CardDescription'],
+  list: ['<List', '<ul', '<li', 'ListItem', '.map(('],
+  modal: ['<Modal', '<Dialog', 'DialogContent', 'isOpen', 'onClose', 'onOpenChange'],
+  dropdown: ['<Dropdown', '<Select', 'DropdownMenu', 'SelectContent', 'SelectTrigger'],
+  input: ['<Input', '<input', '<Textarea', '<textarea', 'onChange={'],
+  header: ['<Header', '<header', '<Navbar', '<Nav', 'navigation'],
+  sidebar: ['<Sidebar', '<aside', 'SidebarContent', 'NavigationMenu'],
+};
+
+/**
+ * Score a file based on whether it contains patterns for a specific element type
+ * Higher scores indicate the file is more likely to contain the target element
+ */
+function scoreFileByElementType(content: string, elementType: string): number {
+  const patterns = ELEMENT_PATTERNS[elementType.toLowerCase()] || [];
+  let score = 0;
+  let matchCount = 0;
+  
+  for (const pattern of patterns) {
+    if (content.includes(pattern)) {
+      score += 300; // High score per pattern match
+      matchCount++;
+    }
+  }
+  
+  // Bonus for multiple pattern matches (indicates primary component for this element type)
+  if (matchCount >= 3) {
+    score += 500;
+  }
+  
+  return score;
 }
 
 /**
@@ -216,15 +258,17 @@ Analyze this UI to help find the correct source file. Return:
 1. **visibleText**: Extract the EXACT text visible in UI elements (button labels, headings, tab names, etc.)
 2. **componentNames**: Deduce likely React component names based on what you see (e.g., "ProcessDetailPanel", "UserSettings", "DataTable"). Think about common React naming conventions.
 3. **codePatterns**: Suggest code identifiers that might exist (e.g., "handleEdit", "isLoading", "activeTab", "onDelete")
+4. **elementTypes**: What TYPE of UI element is the user's request about? Pick from: table, button, form, card, list, modal, dropdown, input, header, sidebar. List the most relevant first.
 
 Return ONLY valid JSON:
 {
   "visibleText": ["Assets", "Flowchart", "Edit", "Delete"],
   "componentNames": ["ProcessDetailPanel", "ProcessActions", "QuickActions"],
-  "codePatterns": ["handleEdit", "handleDelete", "activeTab", "setActiveTab"]
+  "codePatterns": ["handleEdit", "handleDelete", "activeTab", "setActiveTab"],
+  "elementTypes": ["table", "button"]
 }
 
-Be smart - use your knowledge of React patterns to make educated guesses about component and variable names.`,
+Be smart - use your knowledge of React patterns to identify what type of element the user wants to modify.`,
           },
         ],
       },
@@ -234,7 +278,7 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
   try {
     const textBlock = response.content.find((block) => block.type === "text");
     if (!textBlock || textBlock.type !== "text") {
-      return { visibleText: [], componentNames: [], codePatterns: [] };
+      return { visibleText: [], componentNames: [], codePatterns: [], elementTypes: [] };
     }
 
     let jsonText = textBlock.text.trim();
@@ -249,13 +293,14 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
       visibleText: parsed.visibleText || parsed.textStrings || [],
       componentNames: parsed.componentNames || [],
       codePatterns: parsed.codePatterns || [],
+      elementTypes: parsed.elementTypes || [],
     };
 
     debugLog("Phase 1: Analyzed screenshot for search", result);
     return result;
   } catch (e) {
     debugLog("Phase 1: Failed to parse screenshot analysis response", { error: String(e) });
-    return { visibleText: [], componentNames: [], codePatterns: [] };
+    return { visibleText: [], componentNames: [], codePatterns: [], elementTypes: [] };
   }
 }
 
@@ -547,12 +592,18 @@ function searchFilesSmart(
   projectRoot: string,
   maxFiles: number = 10
 ): { path: string; content: string; score: number; filenameMatch: boolean }[] {
-  const { visibleText, componentNames, codePatterns } = analysis;
+  const { visibleText, componentNames, codePatterns, elementTypes } = analysis;
   
   // Combine all search terms
   const allSearchTerms = [...visibleText, ...codePatterns];
   
-  if (allSearchTerms.length === 0 && componentNames.length === 0) return [];
+  // Get the primary element type for pattern-based scoring (Cursor-style)
+  const primaryElementType = elementTypes?.[0] || null;
+  if (primaryElementType) {
+    debugLog("Phase 2: Element type detected for pattern matching", { primaryElementType });
+  }
+  
+  if (allSearchTerms.length === 0 && componentNames.length === 0 && !primaryElementType) return [];
 
   const results: Map<string, { path: string; content: string; score: number; filenameMatch: boolean }> = new Map();
   const searchDirs = ["components", "src/components", "app", "src/app", "pages", "src/pages"];
@@ -619,23 +670,47 @@ function searchFilesSmart(
               }
             }
 
+            // Calculate content score based on text matches
+            let contentScore = 0;
             if (uniqueMatches > 0) {
               // Score: unique matches * 10 + total matches
-              const contentScore = (uniqueMatches * 10) + totalMatches;
-              
+              contentScore = (uniqueMatches * 10) + totalMatches;
+            }
+            
+            // CURSOR-STYLE: Add element type pattern scoring
+            // Files containing patterns for the detected element type get a big boost
+            let elementTypeScore = 0;
+            if (primaryElementType) {
+              elementTypeScore = scoreFileByElementType(content, primaryElementType);
+            }
+            
+            const totalScore = contentScore + elementTypeScore;
+            
+            if (totalScore > 0) {
               // Check if we already have this file (from component name search)
               const existing = results.get(entryPath);
               if (existing) {
-                // Add content score to existing filename match score
-                existing.score += contentScore;
+                // Add scores to existing entry
+                existing.score += totalScore;
               } else {
                 results.set(entryPath, { 
                   path: entryPath, 
                   content, 
-                  score: contentScore,
+                  score: totalScore,
                   filenameMatch: false 
                 });
               }
+              
+              // Log high-confidence element type matches
+              if (elementTypeScore >= 800) {
+                debugLog("Phase 2: High-confidence element type match", {
+                  file: entryPath,
+                  elementType: primaryElementType,
+                  elementScore: elementTypeScore,
+                  contentScore,
+                  totalScore
+                });
+              }
             }
           } catch {
             // Skip files that can't be read
@@ -958,7 +1033,7 @@ User Request: "${userPrompt}"
         
         // Search for element IDs in the file to enable precise targeting
         let idMatch: { lineNumber: number; matchedId: string; snippet: string } | null = null;
-        if (focusedElements && focusedElements.length > 0) {
+      if (focusedElements && focusedElements.length > 0) {
           for (const el of focusedElements) {
             idMatch = findElementIdInFile(content, el.elementId, el.childIds);
             if (idMatch) break;
@@ -1049,7 +1124,7 @@ ${linesWithNumbers}
           // Only include the variants/props section, not the whole file
           const variantsMatch = comp.content.match(/variants:\s*\{[\s\S]*?\n\s*\},\n\s*defaultVariants/);
           if (variantsMatch) {
-            textContent += `
+          textContent += `
 --- UI Component: ${comp.path} (variants only) ---
 ${variantsMatch[0]}
 ---
@@ -1123,7 +1198,7 @@ CRITICAL: Your "search" string MUST exist in the file. If you can't find the exa
 
       // Call Claude Vision API with retry mechanism
       const anthropic = new Anthropic({ apiKey });
-      
+
       // Build set of valid file paths from page context (needed for validation)
       const validFilePaths = new Set<string>();
       if (pageContext.pageFile) {

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

@@ -173,6 +173,48 @@ interface ScreenshotAnalysis {
   visibleText: string[];
   componentNames: string[];
   codePatterns: string[];
+  elementTypes: string[]; // Detected UI element types: table, button, form, card, list, modal, dropdown, input
+}
+
+/**
+ * Map element types to JSX/HTML patterns to search for in files
+ * This is the key to Cursor-style file discovery - search for WHAT we see, not guessed names
+ */
+const ELEMENT_PATTERNS: Record<string, string[]> = {
+  table: ['<Table', 'TableRow', 'TableCell', 'TableHeader', 'TableBody', '<table', '<tr', '<td', '<th'],
+  button: ['<Button', '<button', 'onClick={', 'handleClick'],
+  form: ['<Form', '<form', 'onSubmit', '<Input', '<input', 'handleSubmit'],
+  card: ['<Card', 'CardContent', 'CardHeader', 'CardTitle', 'CardDescription'],
+  list: ['<List', '<ul', '<li', 'ListItem', '.map(('],
+  modal: ['<Modal', '<Dialog', 'DialogContent', 'isOpen', 'onClose', 'onOpenChange'],
+  dropdown: ['<Dropdown', '<Select', 'DropdownMenu', 'SelectContent', 'SelectTrigger'],
+  input: ['<Input', '<input', '<Textarea', '<textarea', 'onChange={'],
+  header: ['<Header', '<header', '<Navbar', '<Nav', 'navigation'],
+  sidebar: ['<Sidebar', '<aside', 'SidebarContent', 'NavigationMenu'],
+};
+
+/**
+ * Score a file based on whether it contains patterns for a specific element type
+ * Higher scores indicate the file is more likely to contain the target element
+ */
+function scoreFileByElementType(content: string, elementType: string): number {
+  const patterns = ELEMENT_PATTERNS[elementType.toLowerCase()] || [];
+  let score = 0;
+  let matchCount = 0;
+  
+  for (const pattern of patterns) {
+    if (content.includes(pattern)) {
+      score += 300; // High score per pattern match
+      matchCount++;
+    }
+  }
+  
+  // Bonus for multiple pattern matches (indicates primary component for this element type)
+  if (matchCount >= 3) {
+    score += 500;
+  }
+  
+  return score;
 }
 
 /**
@@ -212,15 +254,17 @@ Analyze this UI to help find the correct source file. Return:
 1. **visibleText**: Extract the EXACT text visible in UI elements (button labels, headings, tab names, etc.)
 2. **componentNames**: Deduce likely React component names based on what you see (e.g., "ProcessDetailPanel", "UserSettings", "DataTable"). Think about common React naming conventions.
 3. **codePatterns**: Suggest code identifiers that might exist (e.g., "handleEdit", "isLoading", "activeTab", "onDelete")
+4. **elementTypes**: What TYPE of UI element is the user's request about? Pick from: table, button, form, card, list, modal, dropdown, input, header, sidebar. List the most relevant first.
 
 Return ONLY valid JSON:
 {
   "visibleText": ["Assets", "Flowchart", "Edit", "Delete"],
   "componentNames": ["ProcessDetailPanel", "ProcessActions", "QuickActions"],
-  "codePatterns": ["handleEdit", "handleDelete", "activeTab", "setActiveTab"]
+  "codePatterns": ["handleEdit", "handleDelete", "activeTab", "setActiveTab"],
+  "elementTypes": ["table", "button"]
 }
 
-Be smart - use your knowledge of React patterns to make educated guesses about component and variable names.`,
+Be smart - use your knowledge of React patterns to identify what type of element the user wants to modify.`,
           },
         ],
       },
@@ -230,7 +274,7 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
   try {
     const textBlock = response.content.find((block) => block.type === "text");
     if (!textBlock || textBlock.type !== "text") {
-      return { visibleText: [], componentNames: [], codePatterns: [] };
+      return { visibleText: [], componentNames: [], codePatterns: [], elementTypes: [] };
     }
 
     let jsonText = textBlock.text.trim();
@@ -245,13 +289,14 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
       visibleText: parsed.visibleText || parsed.textStrings || [],
       componentNames: parsed.componentNames || [],
       codePatterns: parsed.codePatterns || [],
+      elementTypes: parsed.elementTypes || [],
     };
 
     debugLog("Phase 1: Analyzed screenshot for search", result);
     return result;
   } catch (e) {
     debugLog("Phase 1: Failed to parse screenshot analysis response", { error: String(e) });
-    return { visibleText: [], componentNames: [], codePatterns: [] };
+    return { visibleText: [], componentNames: [], codePatterns: [], elementTypes: [] };
   }
 }
 
@@ -543,12 +588,18 @@ function searchFilesSmart(
   projectRoot: string,
   maxFiles: number = 10
 ): { path: string; content: string; score: number; filenameMatch: boolean }[] {
-  const { visibleText, componentNames, codePatterns } = analysis;
+  const { visibleText, componentNames, codePatterns, elementTypes } = analysis;
   
   // Combine all search terms
   const allSearchTerms = [...visibleText, ...codePatterns];
   
-  if (allSearchTerms.length === 0 && componentNames.length === 0) return [];
+  // Get the primary element type for pattern-based scoring (Cursor-style)
+  const primaryElementType = elementTypes?.[0] || null;
+  if (primaryElementType) {
+    debugLog("Phase 2: Element type detected for pattern matching", { primaryElementType });
+  }
+  
+  if (allSearchTerms.length === 0 && componentNames.length === 0 && !primaryElementType) return [];
 
   const results: Map<string, { path: string; content: string; score: number; filenameMatch: boolean }> = new Map();
   const searchDirs = ["components", "src/components", "app", "src/app", "pages", "src/pages"];
@@ -615,23 +666,47 @@ function searchFilesSmart(
               }
             }
 
+            // Calculate content score based on text matches
+            let contentScore = 0;
             if (uniqueMatches > 0) {
               // Score: unique matches * 10 + total matches
-              const contentScore = (uniqueMatches * 10) + totalMatches;
-              
+              contentScore = (uniqueMatches * 10) + totalMatches;
+            }
+            
+            // CURSOR-STYLE: Add element type pattern scoring
+            // Files containing patterns for the detected element type get a big boost
+            let elementTypeScore = 0;
+            if (primaryElementType) {
+              elementTypeScore = scoreFileByElementType(content, primaryElementType);
+            }
+            
+            const totalScore = contentScore + elementTypeScore;
+            
+            if (totalScore > 0) {
               // Check if we already have this file (from component name search)
               const existing = results.get(entryPath);
               if (existing) {
-                // Add content score to existing filename match score
-                existing.score += contentScore;
+                // Add scores to existing entry
+                existing.score += totalScore;
               } else {
                 results.set(entryPath, { 
                   path: entryPath, 
                   content, 
-                  score: contentScore,
+                  score: totalScore,
                   filenameMatch: false 
                 });
               }
+              
+              // Log high-confidence element type matches
+              if (elementTypeScore >= 800) {
+                debugLog("Phase 2: High-confidence element type match", {
+                  file: entryPath,
+                  elementType: primaryElementType,
+                  elementScore: elementTypeScore,
+                  contentScore,
+                  totalScore
+                });
+              }
             }
           } catch {
             // Skip files that can't be read
@@ -927,7 +1002,7 @@ User Request: "${userPrompt}"
         
         // Search for element IDs in the file to enable precise targeting
         let idMatch: { lineNumber: number; matchedId: string; snippet: string } | null = null;
-        if (focusedElements && focusedElements.length > 0) {
+      if (focusedElements && focusedElements.length > 0) {
           for (const el of focusedElements) {
             idMatch = findElementIdInFile(content, el.elementId, el.childIds);
             if (idMatch) break;
@@ -1018,7 +1093,7 @@ ${linesWithNumbers}
           // Only include the variants/props section, not the whole file
           const variantsMatch = comp.content.match(/variants:\s*\{[\s\S]*?\n\s*\},\n\s*defaultVariants/);
           if (variantsMatch) {
-            textContent += `
+          textContent += `
 --- UI Component: ${comp.path} (variants only) ---
 ${variantsMatch[0]}
 ---
@@ -1092,7 +1167,7 @@ CRITICAL: Your "search" string MUST exist in the file. If you can't find the exa
 
       // Call Claude Vision API with retry mechanism
       const anthropic = new Anthropic({ apiKey });
-      
+
       // Build list of known file paths (for logging)
       const knownPaths = new Set<string>();
       if (pageContext.pageFile) {

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

@@ -271,6 +271,12 @@ export function SonanceDevTools() {
         // Check if session is recent (< 1 hour old)
         const MAX_SESSION_AGE = 60 * 60 * 1000; // 1 hour
         if (session.timestamp && Date.now() - session.timestamp < MAX_SESSION_AGE) {
+          // Validate session has actual modifications
+          if (!session.modifications || session.modifications.length === 0) {
+            console.log("[Apply-First] Session has no modifications, auto-clearing:", session.sessionId);
+            localStorage.removeItem("sonance-apply-first-session");
+            return;
+          }
           console.log("[Apply-First] Restoring session from localStorage:", session.sessionId);
           setApplyFirstSession(session);
           setApplyFirstStatus("reviewing");

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

@@ -1,176 +1,10 @@
 "use client";
 
-import React, { useState, useEffect, useCallback } from "react";
-import { X, Zap, Loader2, Check, ChevronDown, ChevronRight, FileCode, AlertTriangle, Info, Eye, EyeOff } from "lucide-react";
+import React, { useState, useEffect } from "react";
+import { X, Zap, Loader2, Check, ChevronDown, ChevronRight, FileCode, AlertTriangle, Info } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import { ApplyFirstSession, ApplyFirstStatus, VisionFileModification } from "../types";
 
-// CSS Injection Preview ID
-const PREVIEW_STYLE_ID = "sonance-preview-css";
-
-/**
- * Extract className changes from a diff
- * Returns: { removed: string[], added: string[] }
- */
-function extractClassNameChanges(diff: string): { removed: string[]; added: string[] } {
-  const removed: string[] = [];
-  const added: string[] = [];
-  
-  // Regex to find className="..." patterns
-  const classNameRegex = /className=["']([^"']+)["']/g;
-  
-  const lines = diff.split("\n");
-  for (const line of lines) {
-    if (line.startsWith("-") && !line.startsWith("---")) {
-      // Removed line - extract className
-      let match;
-      while ((match = classNameRegex.exec(line)) !== null) {
-        removed.push(...match[1].split(/\s+/));
-      }
-    } else if (line.startsWith("+") && !line.startsWith("+++")) {
-      // Added line - extract className
-      let match;
-      while ((match = classNameRegex.exec(line)) !== null) {
-        added.push(...match[1].split(/\s+/));
-      }
-    }
-  }
-  
-  return { removed, added };
-}
-
-/**
- * Common Tailwind class to CSS mapping for preview
- * Covers styling classes for instant visual feedback
- */
-const TAILWIND_TO_CSS: Record<string, string> = {
-  // Text colors - basic
-  "text-white": "color: white !important;",
-  "text-black": "color: black !important;",
-  "text-gray-900": "color: rgb(17, 24, 39) !important;",
-  "text-gray-800": "color: rgb(31, 41, 55) !important;",
-  "text-gray-700": "color: rgb(55, 65, 81) !important;",
-  "text-gray-600": "color: rgb(75, 85, 99) !important;",
-  "text-gray-500": "color: rgb(107, 114, 128) !important;",
-  "text-gray-400": "color: rgb(156, 163, 175) !important;",
-  
-  // Sonance brand colors
-  "text-sonance-charcoal": "color: #333F48 !important;",
-  "text-sonance-blue": "color: #00D3C8 !important;",
-  "border-sonance-charcoal": "border-color: #333F48 !important;",
-  "border-sonance-blue": "border-color: #00D3C8 !important;",
-  "bg-sonance-charcoal": "background-color: #333F48 !important;",
-  "bg-sonance-blue": "background-color: #00D3C8 !important;",
-  
-  // Semantic text colors
-  "text-primary": "color: var(--primary) !important;",
-  "text-primary-foreground": "color: var(--primary-foreground) !important;",
-  "text-secondary": "color: var(--secondary) !important;",
-  "text-secondary-foreground": "color: var(--secondary-foreground) !important;",
-  "text-accent": "color: var(--accent) !important;",
-  "text-accent-foreground": "color: var(--accent-foreground) !important;",
-  "text-foreground": "color: var(--foreground) !important;",
-  "text-muted": "color: var(--muted) !important;",
-  "text-muted-foreground": "color: var(--muted-foreground) !important;",
-  "text-destructive": "color: var(--destructive) !important;",
-  "text-destructive-foreground": "color: var(--destructive-foreground) !important;",
-  
-  // Semantic backgrounds
-  "bg-primary": "background-color: hsl(var(--primary)) !important;",
-  "bg-secondary": "background-color: hsl(var(--secondary)) !important;",
-  "bg-accent": "background-color: hsl(var(--accent)) !important;",
-  "bg-muted": "background-color: hsl(var(--muted)) !important;",
-  "bg-destructive": "background-color: hsl(var(--destructive)) !important;",
-  "bg-success": "background-color: var(--success) !important;",
-  "bg-card": "background-color: hsl(var(--card)) !important;",
-  "bg-background": "background-color: hsl(var(--background)) !important;",
-  
-  // Common backgrounds
-  "bg-white": "background-color: white !important;",
-  "bg-black": "background-color: black !important;",
-  "bg-gray-50": "background-color: rgb(249, 250, 251) !important;",
-  "bg-gray-100": "background-color: rgb(243, 244, 246) !important;",
-  "bg-gray-200": "background-color: rgb(229, 231, 235) !important;",
-  "bg-gray-300": "background-color: rgb(209, 213, 219) !important;",
-  "bg-gray-800": "background-color: rgb(31, 41, 55) !important;",
-  "bg-gray-900": "background-color: rgb(17, 24, 39) !important;",
-  
-  // Status colors
-  "bg-green-500": "background-color: rgb(34, 197, 94) !important;",
-  "bg-green-600": "background-color: rgb(22, 163, 74) !important;",
-  "bg-blue-500": "background-color: rgb(59, 130, 246) !important;",
-  "bg-blue-600": "background-color: rgb(37, 99, 235) !important;",
-  "bg-red-500": "background-color: rgb(239, 68, 68) !important;",
-  "bg-red-600": "background-color: rgb(220, 38, 38) !important;",
-  "bg-yellow-500": "background-color: rgb(234, 179, 8) !important;",
-  "bg-orange-500": "background-color: rgb(249, 115, 22) !important;",
-  
-  // Borders
-  "border-gray-200": "border-color: rgb(229, 231, 235) !important;",
-  "border-gray-300": "border-color: rgb(209, 213, 219) !important;",
-  "border-primary": "border-color: hsl(var(--primary)) !important;",
-  "border-accent": "border-color: hsl(var(--accent)) !important;",
-  "border-destructive": "border-color: hsl(var(--destructive)) !important;",
-};
-
-/**
- * Generate CSS for preview based on class changes
- */
-function generatePreviewCSS(modifications: VisionFileModification[]): string {
-  const cssRules: string[] = [];
-  
-  for (const mod of modifications) {
-    const { added } = extractClassNameChanges(mod.diff);
-    
-    // Generate CSS for added classes
-    for (const cls of added) {
-      if (TAILWIND_TO_CSS[cls]) {
-        // We can't know the exact selector, so we apply to elements with data-sonance-preview
-        cssRules.push(TAILWIND_TO_CSS[cls]);
-      }
-    }
-  }
-  
-  if (cssRules.length === 0) return "";
-  
-  // Apply to changed elements (marked by InspectorOverlay)
-  return `
-    [data-sonance-changed="true"] {
-      ${cssRules.join("\n      ")}
-      outline: 2px dashed #00D3C8 !important;
-      outline-offset: 2px !important;
-    }
-  `;
-}
-
-/**
- * Inject preview CSS into the document
- */
-function injectPreviewCSS(css: string): void {
-  // Remove existing preview styles first
-  removePreviewCSS();
-  
-  if (!css.trim()) return;
-  
-  const style = document.createElement("style");
-  style.id = PREVIEW_STYLE_ID;
-  style.textContent = css;
-  document.head.appendChild(style);
-  
-  console.log("[Preview CSS] Injected:", css.substring(0, 200));
-}
-
-/**
- * Remove preview CSS from the document
- */
-function removePreviewCSS(): void {
-  const existing = document.getElementById(PREVIEW_STYLE_ID);
-  if (existing) {
-    existing.remove();
-    console.log("[Preview CSS] Removed");
-  }
-}
-
 export interface ApplyFirstPreviewProps {
   session: ApplyFirstSession;
   status: ApplyFirstStatus;
@@ -260,15 +94,6 @@ function HMRStatusBadge({ status }: { status: ApplyFirstStatus }) {
     );
   }
   
-  if (status === "previewing") {
-    return (
-      <span className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-700">
-        <Eye className="h-3 w-3" />
-        Preview Mode
-      </span>
-    );
-  }
-
   return null;
 }
 
@@ -281,7 +106,6 @@ export function ApplyFirstPreview({
   onApplyPreview,
 }: ApplyFirstPreviewProps) {
   const [expandedFiles, setExpandedFiles] = useState<Set<string>>(new Set());
-  const [cssPreviewEnabled, setCssPreviewEnabled] = useState(true);
 
   // Expand first file by default
   useEffect(() => {
@@ -289,31 +113,6 @@ export function ApplyFirstPreview({
       setExpandedFiles(new Set([session.modifications[0].filePath]));
     }
   }, [session]);
-  
-  // CSS Preview injection for ALL modes (preview AND applied)
-  // This ensures the user can always see visual changes immediately
-  useEffect(() => {
-    if (cssPreviewEnabled && session.modifications.length > 0) {
-      // Generate and inject preview CSS to show visual changes immediately
-      const previewCSS = generatePreviewCSS(session.modifications);
-      if (previewCSS) {
-        injectPreviewCSS(previewCSS);
-      }
-    } else {
-      // Remove preview CSS when disabled
-      removePreviewCSS();
-    }
-    
-    // Cleanup on unmount
-    return () => {
-      removePreviewCSS();
-    };
-  }, [session, cssPreviewEnabled]);
-  
-  // Toggle CSS preview
-  const toggleCssPreview = useCallback(() => {
-    setCssPreviewEnabled(prev => !prev);
-  }, []);
 
   const toggleFile = (filePath: string) => {
     setExpandedFiles((prev) => {
@@ -356,20 +155,6 @@ export function ApplyFirstPreview({
           </span>
         </div>
         <div className="flex items-center gap-2">
-          {/* CSS Preview Toggle - show for all modes to ensure visual changes are visible */}
-          <button
-            onClick={toggleCssPreview}
-            className={cn(
-              "flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded transition-colors",
-              cssPreviewEnabled
-                ? isPreviewMode ? "bg-blue-200 text-blue-700" : "bg-green-200 text-green-700"
-                : "bg-gray-200 text-gray-500"
-            )}
-            title={cssPreviewEnabled ? "Hide visual preview" : "Show visual preview"}
-          >
-            {cssPreviewEnabled ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
-            Preview
-          </button>
           <HMRStatusBadge status={status} />
         </div>
       </div>

package/package.json

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