sonance-brand-mcp 1.3.49 → 1.3.51

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

@@ -3,6 +3,7 @@ import * as fs from "fs";
 import * as path from "path";
 import Anthropic from "@anthropic-ai/sdk";
 import { randomUUID } from "crypto";
+import { discoverTheme, formatThemeForPrompt } from "./theme-discovery";
 
 /**
  * Sonance DevTools API - Apply-First Vision Mode
@@ -471,10 +472,47 @@ Return search/replace patches (NOT full files). The system applies your patches
 - CRITICAL: NEVER invent or guess code. Your "search" string MUST be copied EXACTLY from the provided file content. If you cannot find the exact code to modify, return an empty modifications array.
 - If the file content appears truncated, only modify code that is visible in the provided content.
 
-**SONANCE BRAND COLORS:**
-- Charcoal: #333F48 (primary text)
-- IPORT Orange: #FC4C02
-- Blaze Blue: #00A3E1
+═══════════════════════════════════════════════════════════════════════════════
+SONANCE BRAND COLOR SYSTEM
+═══════════════════════════════════════════════════════════════════════════════
+
+**Core Colors:**
+- Primary (Charcoal): #333F48 - main text, dark backgrounds
+- Accent (Cyan "The Beam"): #00D3C8 - highlights, interactive elements, CTAs
+- Success: Green tones - positive states, confirmations
+- Warning: Amber/Orange tones - caution states, alerts
+- Destructive: Red tones - errors, delete actions
+
+**CRITICAL CONTRAST RULES:**
+When using colored backgrounds, ALWAYS use high-contrast text:
+
+| Background        | Use This Text                      | NEVER Use              |
+|-------------------|------------------------------------|-----------------------|
+| bg-accent         | text-white                         | text-accent-foreground |
+| bg-primary        | text-primary-foreground, text-white | text-primary          |
+| bg-success        | text-white                         | text-success          |
+| bg-warning        | text-white                         | text-warning          |
+| bg-destructive    | text-white                         | text-destructive      |
+
+**SEMANTIC TOKEN PATTERNS:**
+- text-{color} = the color itself (use on NEUTRAL backgrounds like white/gray)
+- text-{color}-foreground = INTENDED for text on {color} backgrounds, but MAY have contrast issues
+- bg-{color} = background in that color
+- WHEN IN DOUBT: Use text-white on any colored background for guaranteed contrast
+
+**BUTTON PATTERNS (Sonance Standard):**
+- Primary CTA: bg-primary text-primary-foreground
+- Accent/Highlight: bg-accent text-white (NOT text-accent-foreground)
+- Success: bg-success text-white
+- Warning: bg-warning text-white
+- Destructive: bg-destructive text-white
+- Outlined: border-border bg-transparent text-foreground
+
+**COMMON MISTAKES TO AVOID:**
+- WRONG: bg-accent text-accent-foreground (accent-foreground is often dark = invisible text)
+- RIGHT: bg-accent text-white (white text on cyan = visible)
+- WRONG: bg-primary text-primary (same color = invisible)
+- RIGHT: bg-primary text-primary-foreground OR text-white
 
 **RESPONSE FORMAT:**
 CRITICAL: Return ONLY the JSON object below. Do NOT include any text, explanation, or thinking before or after the JSON. No preamble. No "Looking at the screenshot..." No markdown code blocks. Just raw JSON:
@@ -666,7 +704,7 @@ export async function POST(request: Request) {
       const TOTAL_CONTEXT_BUDGET = 500000; // 500k chars total budget
       const MAX_RECOMMENDED_FILE = Infinity; // NEVER truncate the target file - AI needs full context
       const MAX_PAGE_FILE = 2000; // Page file is just a wrapper
-      const MAX_GLOBALS_CSS = 1500;
+      const MAX_GLOBALS_CSS = 15000; // Increased to capture full theme definitions
       const MAX_FILES = 25;
       
       let usedContext = 0;
@@ -760,6 +798,25 @@ ${truncatedContent}${wasTruncated ? "\n// ... (truncated)" : ""}
         }
       }
 
+      // ========== THEME DISCOVERY ==========
+      // Dynamically discover theme tokens from the target codebase
+      const discoveredTheme = await discoverTheme(projectRoot);
+      const themeContext = formatThemeForPrompt(discoveredTheme);
+      
+      if (discoveredTheme.discoveredFiles.length > 0) {
+        textContent += `
+═══════════════════════════════════════════════════════════════════════════════
+${themeContext}
+═══════════════════════════════════════════════════════════════════════════════
+
+`;
+        debugLog("Theme discovery complete", {
+          filesFound: discoveredTheme.discoveredFiles,
+          cssVariableCount: Object.keys(discoveredTheme.cssVariables).length,
+          tailwindColorCount: Object.keys(discoveredTheme.tailwindColors).length,
+        });
+      }
+
       // ========== GLOBALS CSS ==========
       const globalsTruncated = pageContext.globalsCSS.substring(0, MAX_GLOBALS_CSS);
       textContent += `

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

@@ -2,6 +2,7 @@ import { NextResponse } from "next/server";
 import * as fs from "fs";
 import * as path from "path";
 import Anthropic from "@anthropic-ai/sdk";
+import { discoverTheme, formatThemeForPrompt } from "../sonance-vision-apply/theme-discovery";
 
 /**
  * Sonance DevTools API - Vision Mode Editor
@@ -469,10 +470,47 @@ Return search/replace patches (NOT full files). The system applies your patches
 - CRITICAL: NEVER invent or guess code. Your "search" string MUST be copied EXACTLY from the provided file content. If you cannot find the exact code to modify, return an empty modifications array.
 - If the file content appears truncated, only modify code that is visible in the provided content.
 
-**SONANCE BRAND COLORS:**
-- Charcoal: #333F48 (primary text)
-- IPORT Orange: #FC4C02
-- Blaze Blue: #00A3E1
+═══════════════════════════════════════════════════════════════════════════════
+SONANCE BRAND COLOR SYSTEM
+═══════════════════════════════════════════════════════════════════════════════
+
+**Core Colors:**
+- Primary (Charcoal): #333F48 - main text, dark backgrounds
+- Accent (Cyan "The Beam"): #00D3C8 - highlights, interactive elements, CTAs
+- Success: Green tones - positive states, confirmations
+- Warning: Amber/Orange tones - caution states, alerts
+- Destructive: Red tones - errors, delete actions
+
+**CRITICAL CONTRAST RULES:**
+When using colored backgrounds, ALWAYS use high-contrast text:
+
+| Background        | Use This Text                      | NEVER Use              |
+|-------------------|------------------------------------|-----------------------|
+| bg-accent         | text-white                         | text-accent-foreground |
+| bg-primary        | text-primary-foreground, text-white | text-primary          |
+| bg-success        | text-white                         | text-success          |
+| bg-warning        | text-white                         | text-warning          |
+| bg-destructive    | text-white                         | text-destructive      |
+
+**SEMANTIC TOKEN PATTERNS:**
+- text-{color} = the color itself (use on NEUTRAL backgrounds like white/gray)
+- text-{color}-foreground = INTENDED for text on {color} backgrounds, but MAY have contrast issues
+- bg-{color} = background in that color
+- WHEN IN DOUBT: Use text-white on any colored background for guaranteed contrast
+
+**BUTTON PATTERNS (Sonance Standard):**
+- Primary CTA: bg-primary text-primary-foreground
+- Accent/Highlight: bg-accent text-white (NOT text-accent-foreground)
+- Success: bg-success text-white
+- Warning: bg-warning text-white
+- Destructive: bg-destructive text-white
+- Outlined: border-border bg-transparent text-foreground
+
+**COMMON MISTAKES TO AVOID:**
+- WRONG: bg-accent text-accent-foreground (accent-foreground is often dark = invisible text)
+- RIGHT: bg-accent text-white (white text on cyan = visible)
+- WRONG: bg-primary text-primary (same color = invisible)
+- RIGHT: bg-primary text-primary-foreground OR text-white
 
 **RESPONSE FORMAT:**
 CRITICAL: Return ONLY the JSON object below. Do NOT include any text, explanation, or thinking before or after the JSON. No preamble. No "Looking at the screenshot..." No markdown code blocks. Just raw JSON:
@@ -675,7 +713,7 @@ export async function POST(request: Request) {
       const TOTAL_CONTEXT_BUDGET = 500000; // 500k chars total budget
       const MAX_RECOMMENDED_FILE = Infinity; // NEVER truncate the target file - AI needs full context
       const MAX_PAGE_FILE = 2000; // Page file is just a wrapper
-      const MAX_GLOBALS_CSS = 1500;
+      const MAX_GLOBALS_CSS = 15000; // Increased to capture full theme definitions
       const MAX_FILES = 25;
       
       let usedContext = 0;
@@ -769,6 +807,25 @@ ${truncatedContent}${wasTruncated ? "\n// ... (truncated)" : ""}
         }
       }
 
+      // ========== THEME DISCOVERY ==========
+      // Dynamically discover theme tokens from the target codebase
+      const discoveredTheme = await discoverTheme(projectRoot);
+      const themeContext = formatThemeForPrompt(discoveredTheme);
+      
+      if (discoveredTheme.discoveredFiles.length > 0) {
+        textContent += `
+═══════════════════════════════════════════════════════════════════════════════
+${themeContext}
+═══════════════════════════════════════════════════════════════════════════════
+
+`;
+        debugLog("Theme discovery complete", {
+          filesFound: discoveredTheme.discoveredFiles,
+          cssVariableCount: Object.keys(discoveredTheme.cssVariables).length,
+          tailwindColorCount: Object.keys(discoveredTheme.tailwindColors).length,
+        });
+      }
+
       // ========== GLOBALS CSS ==========
       const globalsTruncated = pageContext.globalsCSS.substring(0, MAX_GLOBALS_CSS);
       textContent += `

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.49",
+  "version": "1.3.51",
   "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",