sonance-brand-mcp 1.3.28 → 1.3.30

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

@@ -260,6 +260,35 @@ export function SonanceDevTools() {
     }
   }, [mounted, DEVTOOLS_POSITION_KEY]);
 
+  // Restore apply-first session from localStorage on mount
+  // This allows the Accept/Revert UI to survive page refreshes
+  useEffect(() => {
+    if (!mounted) return;
+    try {
+      const savedSession = localStorage.getItem("sonance-apply-first-session");
+      if (savedSession) {
+        const session = JSON.parse(savedSession);
+        // 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) {
+          console.log("[Apply-First] Restoring session from localStorage:", session.sessionId);
+          setApplyFirstSession(session);
+          setApplyFirstStatus("reviewing");
+          // Auto-open the DevTools panel so user sees the Accept/Revert UI
+          setIsOpen(true);
+          setActiveTab("components");
+        } else {
+          // Session expired, clear it
+          console.log("[Apply-First] Session expired, clearing localStorage");
+          localStorage.removeItem("sonance-apply-first-session");
+        }
+      }
+    } catch (e) {
+      console.warn("[Apply-First] Failed to restore session:", e);
+      localStorage.removeItem("sonance-apply-first-session");
+    }
+  }, [mounted]);
+
   // Drag handlers for movable panel
   const headerRef = useRef<HTMLDivElement>(null);
   
@@ -1097,6 +1126,17 @@ export function SonanceDevTools() {
     setApplyFirstStatus("waiting-hmr");
     setVisionModeActive(false);
 
+    // Persist session to localStorage so it survives page refreshes
+    try {
+      localStorage.setItem("sonance-apply-first-session", JSON.stringify({
+        ...session,
+        timestamp: Date.now(),
+      }));
+      console.log("[Apply-First] Session persisted to localStorage");
+    } catch (e) {
+      console.warn("[Apply-First] Failed to persist session:", e);
+    }
+
     // After a brief delay, assume HMR has completed
     setTimeout(() => {
       setApplyFirstStatus("reviewing");
@@ -1128,6 +1168,13 @@ export function SonanceDevTools() {
         setApplyFirstStatus("idle");
         setVisionFocusedElements([]);
         setChangedElements([]); // Clear highlights
+        // Clear persisted session from localStorage
+        try {
+          localStorage.removeItem("sonance-apply-first-session");
+          console.log("[Apply-First] Session cleared from localStorage");
+        } catch (e) {
+          console.warn("[Apply-First] Failed to clear session:", e);
+        }
       } else {
         console.error("[Apply-First] Accept failed:", result.error);
         setApplyFirstStatus("error");
@@ -1164,6 +1211,13 @@ export function SonanceDevTools() {
         setVisionFocusedElements([]);
         setChangedElements([]); // Clear highlights
         // HMR will automatically refresh with restored files
+        // Clear persisted session from localStorage
+        try {
+          localStorage.removeItem("sonance-apply-first-session");
+          console.log("[Apply-First] Session cleared from localStorage");
+        } catch (e) {
+          console.warn("[Apply-First] Failed to clear session:", e);
+        }
       } else {
         console.error("[Apply-First] Revert failed:", result.error);
         setApplyFirstStatus("error");

package/dist/index.js

@@ -1099,12 +1099,16 @@ function runDevToolsSync(fullSync = false) {
     let sourceBrandContext;
     let sourceApiAnalyze;
     let sourceApiSaveColors;
+    let sourceApiVisionApply;
+    let sourceApiVisionEdit;
     if (IS_BUNDLED) {
         sourceDevTools = path.join(BUNDLED_ASSETS, "dev-tools");
         sourceBrandSystem = path.join(BUNDLED_ASSETS, "brand-system.ts");
         sourceBrandContext = path.join(BUNDLED_ASSETS, "brand-context.tsx");
         sourceApiAnalyze = path.join(BUNDLED_ASSETS, "api/sonance-analyze/route.ts");
         sourceApiSaveColors = path.join(BUNDLED_ASSETS, "api/sonance-save-colors/route.ts");
+        sourceApiVisionApply = path.join(BUNDLED_ASSETS, "api/sonance-vision-apply/route.ts");
+        sourceApiVisionEdit = path.join(BUNDLED_ASSETS, "api/sonance-vision-edit/route.ts");
     }
     else {
         sourceDevTools = path.join(DEV_PROJECT_ROOT, "src/components/dev-tools");
@@ -1112,6 +1116,8 @@ function runDevToolsSync(fullSync = false) {
         sourceBrandContext = path.join(DEV_PROJECT_ROOT, "src/lib/brand-context.tsx");
         sourceApiAnalyze = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-analyze/route.ts");
         sourceApiSaveColors = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-save-colors/route.ts");
+        sourceApiVisionApply = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-vision-apply/route.ts");
+        sourceApiVisionEdit = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-vision-edit/route.ts");
     }
     // Core files to sync (always synced)
     const coreFiles = [
@@ -1164,7 +1170,33 @@ function runDevToolsSync(fullSync = false) {
             }
         }
     }
-    // Full sync includes API routes
+    // Always sync Vision API routes (critical for Vision Mode)
+    const visionApiFiles = [
+        { src: sourceApiVisionApply, dest: path.join(targetDir, baseDir, "app/api/sonance-vision-apply/route.ts"), name: "sonance-vision-apply" },
+        { src: sourceApiVisionEdit, dest: path.join(targetDir, baseDir, "app/api/sonance-vision-edit/route.ts"), name: "sonance-vision-edit" },
+    ];
+    for (const file of visionApiFiles) {
+        if (fs.existsSync(file.src)) {
+            try {
+                // Ensure directory exists
+                const destDir = path.dirname(file.dest);
+                if (!fs.existsSync(destDir)) {
+                    fs.mkdirSync(destDir, { recursive: true });
+                }
+                fs.copyFileSync(file.src, file.dest);
+                console.log(`  ✓ Synced api/${file.name}/route.ts`);
+                syncedCount++;
+            }
+            catch (err) {
+                console.log(`  ✗ Failed: api/${file.name}/route.ts`);
+                errorCount++;
+            }
+        }
+        else {
+            console.log(`  ⚠️  Source not found: ${file.name} (run 'npm run build' in mcp-server)`);
+        }
+    }
+    // Full sync includes additional API routes
     if (fullSync) {
         const apiFiles = [
             { src: sourceApiAnalyze, dest: path.join(targetDir, baseDir, "app/api/sonance-analyze/route.ts"), name: "sonance-analyze" },

package/package.json

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