sonance-brand-mcp 1.3.111 → 1.3.113

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

@@ -51,6 +51,9 @@ import {
   ParentSectionInfo,
   ElementFilters,
   SelectedElementType,
+  ImageOverride,
+  OriginalImageState,
+  PublicImageAsset,
 } from "./types";
 import {
   QUICK_ACTIONS,
@@ -81,6 +84,7 @@ import { TextPanel } from "./panels/TextPanel";
 import { LogoToolsPanel } from "./panels/LogoToolsPanel";
 import { LogosPanel } from "./panels/LogosPanel";
 import { ComponentsPanel } from "./panels/ComponentsPanel";
+import { useElementScanner, extractLogoName } from "./hooks";
 
 // ============================================
 // SONANCE DEVTOOLS
@@ -185,7 +189,7 @@ function findParentSection(element: Element): ParentSectionInfo | undefined {
 
 // Frame layout dimensions
 const BANNER_HEIGHT = 44;
-const SIDEBAR_WIDTH = 260;
+const SIDEBAR_WIDTH = 300;
 const SIDEBAR_COLLAPSED_WIDTH = 48;
 
 export function SonanceDevTools() {
@@ -211,9 +215,20 @@ export function SonanceDevTools() {
   const [componentScope, setComponentScope] = useState<"all" | "variant" | "page" | "selected">("all");
   const [selectedComponentId, setSelectedComponentId] = useState<string | null>(null);
   const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
-  const [taggedElements, setTaggedElements] = useState<DetectedElement[]>([]);
   const [viewMode, setViewMode] = useState<ComponentsViewMode>("visual");
-  const inspectorRef = useRef<number | null>(null);
+
+  // Element Scanner Hook - replaces the old RAF-based detection useEffect
+  // Uses MutationObserver for efficient change detection and content-based IDs for stability
+  const {
+    elements: taggedElements,
+    originalLogoStates: scannedLogoStates,
+    originalTextStates: scannedTextStates,
+    rescan: rescanElements,
+  } = useElementScanner({
+    enabled: mounted && (inspectorEnabled || activeTab === "elements"),
+    filters: elementFilters,
+    inspectorEnabled,
+  });
   
   // AI Preview mode - when active, shows preview highlights instead of inspector
   const [isPreviewActive, setIsPreviewActive] = useState(false);
@@ -261,6 +276,41 @@ export function SonanceDevTools() {
     return () => observer.disconnect();
   }, []);
 
+  // Restore Apply-First session from localStorage on mount
+  // This allows users to refresh the page to see structural changes without losing the pending review state
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem("sonance-apply-first-session");
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        // Check if session is not too old (e.g., less than 1 hour)
+        const sessionAge = Date.now() - (parsed.timestamp || parsed.appliedAt || 0);
+        const ONE_HOUR = 60 * 60 * 1000;
+        
+        if (sessionAge < ONE_HOUR && parsed.sessionId) {
+          console.log("[Apply-First] Restoring session from localStorage:", parsed.sessionId);
+          setApplyFirstSession({
+            sessionId: parsed.sessionId,
+            modifications: parsed.modifications || [],
+            appliedAt: parsed.appliedAt || Date.now(),
+            status: 'applied',
+            backupPaths: parsed.backupPaths || [],
+            isPreview: parsed.isPreview,
+            isTextOnlyChange: parsed.isTextOnlyChange,
+          });
+          // Set status to reviewing since changes are already applied
+          setApplyFirstStatus("reviewing");
+        } else {
+          // Session is too old, clear it
+          console.log("[Apply-First] Session too old, clearing from localStorage");
+          localStorage.removeItem("sonance-apply-first-session");
+        }
+      }
+    } catch (e) {
+      console.warn("[Apply-First] Failed to restore session from localStorage:", e);
+    }
+  }, []);
+
   // Component-specific style overrides (for scalable, project-agnostic styling)
   // Key: component type (e.g., "card", "button-primary", "card:variant123"), Value: style overrides
   const [componentOverrides, setComponentOverrides] = useState<Record<string, ComponentStyle>>({});
@@ -335,13 +385,12 @@ export function SonanceDevTools() {
   const [selectedLogoId, setSelectedLogoId] = useState<string | null>(null);
   const [globalLogoConfig, setGlobalLogoConfig] = useState<LogoOverride>({});
   const [individualLogoConfigs, setIndividualLogoConfigs] = useState<Record<string, LogoOverride>>({});
+  // originalLogoStates now synced from useElementScanner hook (scannedLogoStates)
   const [originalLogoStates, setOriginalLogoStates] = useState<Record<string, OriginalLogoState>>({});
   const [logoSaveStatus, setLogoSaveStatus] = useState<LogoSaveStatus>("idle");
   const [logoSaveMessage, setLogoSaveMessage] = useState<string>("");
   const [autoFixStatus, setAutoFixStatus] = useState<AutoFixStatus>("idle");
   const [autoFixMessage, setAutoFixMessage] = useState<string>("");
-  const logoIdCounter = useRef(0);
-  const textIdCounter = useRef(0);
   
   // Text Tool State
   const [selectedTextId, setSelectedTextId] = useState<string | null>(null);
@@ -351,6 +400,13 @@ export function SonanceDevTools() {
   const [savedTextOverrides, setSavedTextOverrides] = useState<Record<string, TextOverride>>({});
   const SAVED_TEXT_STORAGE_KEY = "sonance-devtools-saved-text-overrides";
   
+  // Image Editing State
+  const [publicImages, setPublicImages] = useState<PublicImageAsset[]>([]);
+  const [publicImagesByFolder, setPublicImagesByFolder] = useState<Record<string, PublicImageAsset[]>>({});
+  const [imageOverrides, setImageOverrides] = useState<Record<string, ImageOverride>>({});
+  const [originalImageStates, setOriginalImageStates] = useState<Record<string, OriginalImageState>>({});
+  const [isImageSaving, setIsImageSaving] = useState(false);
+  
   // Project Analysis state
   const [showAnalysisModal, setShowAnalysisModal] = useState(false);
   const [analysisStatus, setAnalysisStatus] = useState<AnalysisStatus>("idle");
@@ -366,7 +422,7 @@ export function SonanceDevTools() {
   const { theme, setTheme, resolvedTheme } = useTheme();
 
   // Global brand context for logo switching
-  const { setBrand } = useBrand();
+  const { currentBrand, setBrand } = useBrand();
   
   // Toggle between light and dark mode
   const toggleThemeMode = useCallback(() => {
@@ -379,6 +435,24 @@ export function SonanceDevTools() {
     setMounted(true);
   }, []);
 
+  // Sync scanned states from useElementScanner hook to local state
+  // This allows components to access original states for reset functionality
+  useEffect(() => {
+    if (Object.keys(scannedLogoStates).length > 0) {
+      setOriginalLogoStates(prev => {
+        // Merge scanned states with existing (preserve manual updates)
+        return { ...prev, ...scannedLogoStates };
+      });
+    }
+  }, [scannedLogoStates]);
+
+  useEffect(() => {
+    if (Object.keys(scannedTextStates).length > 0) {
+      // Update the ref with scanned text states
+      originalTextStatesRef.current = { ...originalTextStatesRef.current, ...scannedTextStates };
+    }
+  }, [scannedTextStates]);
+
   // Body layout injection for "squeeze" effect - app content respects dev tools frame
   useEffect(() => {
     if (!mounted) return;
@@ -470,7 +544,7 @@ export function SonanceDevTools() {
           setApplyFirstStatus("reviewing");
           // Auto-open the DevTools panel so user sees the Accept/Revert UI
           setIsOpen(true);
-          setActiveTab("components");
+          setActiveTab("elements");
         } else {
           // Session expired, clear it
           console.log("[Apply-First] Session expired, clearing localStorage");
@@ -656,29 +730,27 @@ export function SonanceDevTools() {
     }
   }, [mounted, elementFilters.images, inspectorEnabled, logoAssets.length]);
 
-  // Helper to extract logo filename from src (handles next/image optimized URLs)
-  const extractLogoName = useCallback((src: string): string | null => {
-    // Handle next/image optimized URLs like /_next/image?url=%2Flogos%2F...
-    let decodedSrc = src;
-    if (src.includes("/_next/image")) {
-      const urlParam = new URL(src, window.location.origin).searchParams.get("url");
-      if (urlParam) {
-        decodedSrc = decodeURIComponent(urlParam);
+  // Fetch public folder images for image editing
+  useEffect(() => {
+    async function fetchPublicImages() {
+      try {
+        const response = await fetch("/api/public-images");
+        if (response.ok) {
+          const data = await response.json();
+          setPublicImages(data.images || []);
+          setPublicImagesByFolder(data.imagesByFolder || {});
+        }
+      } catch (error) {
+        console.warn("Could not fetch public images:", error);
       }
     }
     
-    // Check if the path contains "logo" anywhere
-    if (!decodedSrc.toLowerCase().includes("logo")) {
-      return null;
+    if (mounted && elementFilters.images && publicImages.length === 0) {
+      fetchPublicImages();
     }
-    
-    // Extract filename from path
-    const parts = decodedSrc.split("/");
-    const filename = parts[parts.length - 1];
-    // Remove file extension
-    const nameWithoutExt = filename.replace(/\.(png|jpg|jpeg|svg|webp|gif)$/i, "");
-    return nameWithoutExt || null;
-  }, []);
+  }, [mounted, elementFilters.images, publicImages.length]);
+
+  // extractLogoName is now imported from "./hooks"
 
   // Helper to find complementary light/dark logo variant
   // Returns { light: path, dark: path } or null if no match found
@@ -820,319 +892,9 @@ export function SonanceDevTools() {
     });
   }, [taggedElements, selectedComponentType, inspectorEnabled, viewMode, elementFilters]);
 
-  // Simple string hash function for variant detection
-  const generateHash = (str: string): string => {
-    let hash = 0;
-    if (str.length === 0) return hash.toString();
-    for (let i = 0; i < str.length; i++) {
-      const char = str.charCodeAt(i);
-      hash = ((hash << 5) - hash) + char;
-      hash = hash & hash; // Convert to 32bit integer
-    }
-    return Math.abs(hash).toString(16);
-  };
-
-  // Visual Inspector: Scan for tagged elements, logos, and text, update positions
-  useEffect(() => {
-    // Scan when inspector is enabled or on elements tab - now unified with filters
-    const shouldScan = inspectorEnabled || activeTab === "elements";
-    
-    // console.log("Scan effect running. shouldScan:", shouldScan, "activeTab:", activeTab);
-
-    if (!shouldScan || !mounted) {
-      setTaggedElements([]);
-      if (inspectorRef.current) {
-        cancelAnimationFrame(inspectorRef.current);
-        inspectorRef.current = null;
-      }
-      return;
-    }
-
-    const scanElements = () => {
-      const newTagged: DetectedElement[] = [];
-      const newOriginalStates: Record<string, OriginalLogoState> = { ...originalLogoStates };
-
-      // Helper: Check if element is inside a scroll container and clip rect to visible bounds
-      const getVisibleRect = (el: Element, rect: DOMRect): DOMRect | null => {
-        // Find the nearest scroll container (aside, nav, or element with overflow)
-        const scrollParent = el.closest("aside, nav, [data-sidebar]");
-        if (scrollParent) {
-          const parentRect = scrollParent.getBoundingClientRect();
-          // Check if element is fully outside the scroll container's visible area
-          if (rect.bottom < parentRect.top || rect.top > parentRect.bottom ||
-              rect.right < parentRect.left || rect.left > parentRect.right) {
-            return null; // Element is not visible
-          }
-          // Clip the rect to the parent's visible bounds
-          const clippedTop = Math.max(rect.top, parentRect.top);
-          const clippedBottom = Math.min(rect.bottom, parentRect.bottom);
-          const clippedLeft = Math.max(rect.left, parentRect.left);
-          const clippedRight = Math.min(rect.right, parentRect.right);
-          // If clipped area is too small, skip it
-          if (clippedBottom - clippedTop < 10 || clippedRight - clippedLeft < 10) {
-            return null;
-          }
-          return new DOMRect(clippedLeft, clippedTop, clippedRight - clippedLeft, clippedBottom - clippedTop);
-        }
-        return rect; // No scroll parent, use original rect
-      };
-
-      // Helper: Detect active modal and filter elements to only those in the topmost layer
-      const activeModalContent = getActiveModalContent();
-      const isInActiveLayer = (el: Element): boolean => {
-        // Always exclude DevTools panel
-        if (el.closest("[data-sonance-devtools]")) return false;
-
-        // If a modal is active, only include elements inside the modal content
-        if (activeModalContent) {
-          return activeModalContent.contains(el) || el === activeModalContent;
-        }
-
-        return true;
-      };
-
-      // Scan for tagged components (always scan when filters allow)
-      if ((inspectorEnabled || activeTab === "elements") && elementFilters.components) {
-        // 1. Scan for explicitly tagged components
-        const taggedComponents = document.querySelectorAll("[data-sonance-name]");
-        taggedComponents.forEach((el) => {
-          // Skip elements outside the active layer (DevTools, behind modals)
-          if (!isInActiveLayer(el)) return;
-
-          const name = el.getAttribute("data-sonance-name");
-          if (name) {
-            const rawRect = el.getBoundingClientRect();
-            const rect = getVisibleRect(el, rawRect);
-            if (rect && rect.width > 0 && rect.height > 0) {
-              // Generate variant ID based on class names and computed styles
-              // This groups visually identical components together
-              // Use stable variant ID: compute once, reuse from attribute
-              // This prevents hover/focus states from changing the hash
-              let variantId = el.getAttribute("data-sonance-variant");
-              if (!variantId) {
-                const className = el.className;
-                const computed = window.getComputedStyle(el);
-                const styleSignature = `${className}|${computed.backgroundColor}|${computed.borderColor}|${computed.borderRadius}|${computed.color}`;
-                variantId = generateHash(styleSignature);
-                el.setAttribute("data-sonance-variant", variantId);
-              }
-
-              // Capture textContent and className for dynamic element matching
-              const textContent = (el.textContent?.trim() || "").substring(0, 100); // Cap at 100 chars
-              const className = el.className?.toString() || "";
-              
-              // Capture element ID and child IDs for precise code targeting
-              const elementId = el.id || undefined;
-              const childIds = Array.from(el.querySelectorAll('[id]'))
-                .map(child => child.id)
-                .filter(id => id) as string[];
-              
-              newTagged.push({ name, rect, type: "component", variantId, textContent, className, elementId, childIds: childIds.length > 0 ? childIds : undefined });
-            }
-          }
-        });
-
-        // 2. Scan for untagged primitive elements (Buttons, Inputs) to ensure list isn't empty
-        // Only add if not already tagged (though querySelectorAll excludes them implicitly if we check attribute)
-        const genericSelectors = {
-          "button": "button:not([data-sonance-name])",
-          "input": "input:not([data-sonance-name])",
-          "select": "select:not([data-sonance-name])", 
-          "textarea": "textarea:not([data-sonance-name])"
-        };
-
-        Object.entries(genericSelectors).forEach(([genericName, selector]) => {
-          const elements = document.querySelectorAll(selector);
-          elements.forEach((el) => {
-            // Skip elements outside the active layer (DevTools, behind modals)
-            if (!isInActiveLayer(el)) return;
-
-            const rawRect = el.getBoundingClientRect();
-            const rect = getVisibleRect(el, rawRect);
-            if (rect && rect.width > 0 && rect.height > 0) {
-              // Generate stable variant ID for generic elements too
-              // Compute once, reuse from attribute to prevent hover state changes
-              let variantId = el.getAttribute("data-sonance-variant");
-              if (!variantId) {
-                const className = el.className;
-                const computed = window.getComputedStyle(el);
-                const styleSignature = `${className}|${computed.backgroundColor}|${computed.borderColor}|${computed.borderRadius}|${computed.color}`;
-                variantId = generateHash(styleSignature);
-                el.setAttribute("data-sonance-variant", variantId);
-              }
-              
-              // Ensure generic elements have a data-sonance-name for targeting
-              if (!el.getAttribute("data-sonance-name")) {
-                el.setAttribute("data-sonance-name", genericName);
-              }
-
-              // Capture textContent and className for dynamic element matching
-              const textContent = (el.textContent?.trim() || "").substring(0, 100); // Cap at 100 chars
-              const elClassName = el.className?.toString() || "";
-
-              // Capture element ID and child IDs for precise code targeting
-              const elementId = el.id || undefined;
-              const childIds = Array.from(el.querySelectorAll('[id]'))
-                .map(child => child.id)
-                .filter(id => id) as string[];
-
-              newTagged.push({ name: genericName, rect, type: "component", variantId, textContent, className: elClassName, elementId, childIds: childIds.length > 0 ? childIds : undefined });
-            }
-          });
-        });
-      }
-
-      // Scan for logo/image elements (always scan when filters allow)
-      if (elementFilters.images) {
-        const images = document.querySelectorAll("img");
-        images.forEach((img) => {
-          // Skip elements outside the active layer (DevTools, behind modals)
-          if (!isInActiveLayer(img)) return;
-
-          const src = img.src || img.getAttribute("src") || "";
-          const alt = img.alt || "";
-          
-          // Check if src or alt contains "logo"
-          const logoName = extractLogoName(src);
-          const altContainsLogo = alt.toLowerCase().includes("logo");
-          
-          if (logoName || altContainsLogo) {
-            const rect = img.getBoundingClientRect();
-          // Only include visible elements
-          if (rect.width > 0 && rect.height > 0) {
-              // Assign or retrieve a unique ID for this logo element
-              let logoId = img.getAttribute("data-sonance-logo-id");
-              if (!logoId) {
-                logoId = `logo-${logoIdCounter.current++}`;
-                img.setAttribute("data-sonance-logo-id", logoId);
-              }
-              
-              // Store original state if not already stored
-              if (!newOriginalStates[logoId]) {
-                const originalSrcset = img.getAttribute("data-original-srcset") || img.srcset || "";
-                newOriginalStates[logoId] = {
-                  src: img.getAttribute("data-original-src") || src,
-                  width: img.naturalWidth || img.width,
-                  height: img.naturalHeight || img.height,
-                  srcset: originalSrcset,
-                };
-                // Also store original src and srcset as data attributes for reset
-                if (!img.getAttribute("data-original-src")) {
-                  img.setAttribute("data-original-src", src);
-                }
-                if (!img.getAttribute("data-original-srcset") && img.srcset) {
-                  img.setAttribute("data-original-srcset", img.srcset);
-                }
-              }
-              
-              const displayName = logoName || alt || "Logo";
-              newTagged.push({ name: displayName, rect, type: "logo", logoId });
-          }
-        }
-      });
-      }
-
-      // Scan for text elements (always scan when filters allow and inspector enabled)
-      if (elementFilters.text && inspectorEnabled) {
-        // Only select meaningful text containers - exclude spans as they're usually nested
-        const textSelectors = "h1, h2, h3, h4, h5, h6, p, a, label, blockquote, figcaption, li";
-        const textElements = document.querySelectorAll(textSelectors);
-        
-        // Track which elements we've already added to avoid nested duplicates
-        const addedElements = new Set<Element>();
-        
-        textElements.forEach((el) => {
-          // Skip elements outside the active layer (DevTools, behind modals)
-          if (!isInActiveLayer(el)) return;
-
-          // Skip if this element is inside another text element we're already tracking
-          // This prevents duplicate labels for nested structures
-          const parentTextEl = el.parentElement?.closest("h1, h2, h3, h4, h5, h6, p, a, label, blockquote, figcaption, li");
-          if (parentTextEl && !parentTextEl.closest("[data-sonance-devtools]")) {
-            // Allow links inside paragraphs to be selectable, but not other nesting
-            if (!(el.tagName.toLowerCase() === "a" && parentTextEl.tagName.toLowerCase() === "p")) {
-              return;
-            }
-          }
-          
-          // Skip elements that are already added
-          if (addedElements.has(el)) return;
-          
-          const rect = el.getBoundingClientRect();
-          // Only include visible elements with content
-          const textContent = el.textContent?.trim() || "";
-          
-          // Skip elements that are too small (likely icons or decorative)
-          if (rect.width < 20 || rect.height < 10) return;
-          
-          // Skip elements with very short content (likely icons or single characters)
-          if (textContent.length < 2) return;
-          
-          // Skip if the element only contains non-text children (like SVGs/icons)
-          const hasDirectTextContent = Array.from(el.childNodes).some(
-            node => node.nodeType === Node.TEXT_NODE && node.textContent?.trim()
-          );
-          // For links and headings, check if they have meaningful text content
-          const hasMeaningfulContent = textContent.length >= 2 && !/^[\s\u200B-\u200D\uFEFF]+$/.test(textContent);
-          
-          if (!hasMeaningfulContent) return;
-          
-          if (rect.width > 0 && rect.height > 0 && textContent.length > 0) {
-            // Assign or retrieve a unique ID for this text element
-            let textId = el.getAttribute("data-sonance-text-id");
-            if (!textId) {
-              textId = `text-${textIdCounter.current++}`;
-              el.setAttribute("data-sonance-text-id", textId);
-            }
-
-            // Capture original state if not already captured
-            if (!originalTextStatesRef.current[textId]) {
-              const computed = window.getComputedStyle(el);
-              originalTextStatesRef.current[textId] = {
-                textContent: el.textContent,
-                fontSize: computed.fontSize,
-                fontWeight: computed.fontWeight,
-                lineHeight: computed.lineHeight,
-                letterSpacing: computed.letterSpacing,
-                color: computed.color,
-                fontFamily: computed.fontFamily,
-              };
-            }
-            
-            const tagName = el.tagName.toLowerCase();
-            const displayName = tagName === "a" ? "Link" : tagName === "li" ? "List Item" : tagName.toUpperCase();
-            const truncatedContent = textContent.length > 30 ? textContent.substring(0, 30) + "..." : textContent;
-            
-            addedElements.add(el);
-            newTagged.push({ 
-              name: `${displayName}: ${truncatedContent}`, 
-              rect, 
-              type: "text", 
-              textId,
-              textContent 
-            });
-          }
-        });
-      }
-
-      // Update original states if new logos were found
-      if (Object.keys(newOriginalStates).length !== Object.keys(originalLogoStates).length) {
-        setOriginalLogoStates(newOriginalStates);
-      }
-
-      setTaggedElements(newTagged);
-      inspectorRef.current = requestAnimationFrame(scanElements);
-    };
-
-    scanElements();
-
-    return () => {
-      if (inspectorRef.current) {
-        cancelAnimationFrame(inspectorRef.current);
-        inspectorRef.current = null;
-      }
-    };
-    }, [inspectorEnabled, mounted, extractLogoName, originalLogoStates, activeTab, elementFilters]);
+  // Element detection is now handled by useElementScanner hook (see above)
+  // The hook uses MutationObserver for efficient change detection and
+  // content-based hashing for stable element IDs that persist across page loads
 
   // Toggle Visual Inspector
   const toggleInspector = useCallback((force?: boolean | unknown) => {
@@ -1202,6 +964,8 @@ export function SonanceDevTools() {
       childIds: element.childIds,
       // Parent section context for section-level changes
       parentSection,
+      // Capture image src for tracing to source code
+      imageSrc: element.imageSrc,
     };
 
     setVisionFocusedElements((prev) => {
@@ -1293,7 +1057,7 @@ export function SonanceDevTools() {
 
   // ========== Apply-First Mode Handlers ==========
 
-  // Handle apply-first edit complete - files are already written, waiting for HMR
+  // Handle apply-first edit complete - files are already written, refresh to see changes
   const handleApplyFirstComplete = useCallback((session: ApplyFirstSession) => {
     console.log("[Apply-First] Changes applied:", {
       sessionId: session.sessionId,
@@ -1307,7 +1071,7 @@ export function SonanceDevTools() {
 
     setApplyFirstSession(session);
     setApplyFirstStatus("waiting-hmr");
-    setVisionModeActive(false);
+    // Keep Vision mode active so user can continue working with their selection
 
     // Persist session to localStorage so it survives page refreshes
     try {
@@ -1320,9 +1084,12 @@ export function SonanceDevTools() {
       console.warn("[Apply-First] Failed to persist session:", e);
     }
 
-    // Force page refresh to ensure changes are visible
-    // Session is already persisted to localStorage, so it survives refresh
+    // Auto-refresh the page after a short delay to show component changes
+    // HMR is unreliable for structural changes, so we force a reload
+    // The session is persisted to localStorage so it survives the refresh
+    console.log("[Apply-First] Scheduling auto-refresh in 500ms...");
     setTimeout(() => {
+      console.log("[Apply-First] Auto-refreshing page to show changes...");
       window.location.reload();
     }, 500);
   }, [visionFocusedElements]);
@@ -1458,10 +1225,9 @@ export function SonanceDevTools() {
         if (visionModeActive) {
           clearVisionMode();
         }
-        // Clear apply-first session (auto-revert would be triggered)
-        if (applyFirstSession) {
-          handleApplyFirstRevert();
-        }
+        // Note: We intentionally do NOT auto-revert apply-first sessions when switching tabs
+        // The user should explicitly accept or revert changes from the chat interface
+        // The session persists in localStorage so it survives page refreshes
       }
       // Analysis and Vision mode are mutually exclusive
       // When switching to Analysis, disable Vision mode
@@ -1473,7 +1239,7 @@ export function SonanceDevTools() {
       }
       setActiveTab(newTab);
     }
-  }, [activeTab, visionModeActive, clearVisionMode, applyFirstSession, handleApplyFirstRevert]);
+  }, [activeTab, visionModeActive, clearVisionMode]);
 
   // Load saved text overrides from localStorage on mount
   useEffect(() => {
@@ -1640,7 +1406,9 @@ export function SonanceDevTools() {
           if (override.letterSpacing) cleanOverride.letterSpacing = override.letterSpacing;
           if (override.color) cleanOverride.color = override.color;
           if (override.fontFamily) cleanOverride.fontFamily = override.fontFamily;
-          
+          if (override.colorLight) cleanOverride.colorLight = override.colorLight;
+          if (override.colorDark) cleanOverride.colorDark = override.colorDark;
+
           // Add element identification for persistence
           if (element) {
             cleanOverride.selector = generateCssSelector(element);
@@ -1723,7 +1491,7 @@ export function SonanceDevTools() {
 
   // Apply text overrides to DOM
   useEffect(() => {
-    if (activeTab !== "text") return;
+    if (activeTab !== "elements") return;
 
     const textElements = document.querySelectorAll("[data-sonance-text-id]");
     textElements.forEach((el) => {
@@ -1952,6 +1720,295 @@ export function SonanceDevTools() {
     }
   }, [globalLogoConfig]);
 
+  // Image override handler for the Properties Panel
+  const handleImageOverrideChange = useCallback((imageId: string, override: ImageOverride) => {
+    // Find the target image element using multiple strategies
+    const findImageElement = (): HTMLImageElement | null => {
+      // Strategy 1: Use focused element coordinates
+      const focusedElement = visionFocusedElements.find(el => 
+        el.elementId === imageId || el.variantId === imageId || el.name === imageId
+      );
+      if (focusedElement?.coordinates) {
+        const { x, y, width, height } = focusedElement.coordinates;
+        const centerX = x + width / 2;
+        const centerY = y + height / 2;
+        const el = document.elementFromPoint(centerX, centerY);
+        if (el?.tagName === 'IMG') {
+          return el as HTMLImageElement;
+        }
+        // Check if it's inside the element (for wrapped images)
+        const imgChild = el?.querySelector('img');
+        if (imgChild) return imgChild;
+      }
+      
+      // Strategy 2: Try data-sonance-logo-id (logos are images)
+      const byLogoId = document.querySelector(`[data-sonance-logo-id="${imageId}"]`) as HTMLImageElement | null;
+      if (byLogoId) return byLogoId;
+      
+      // Strategy 3: Try element id attribute
+      const byId = document.getElementById(imageId) as HTMLImageElement | null;
+      if (byId?.tagName === 'IMG') return byId;
+      
+      // Strategy 4: Try finding by alt text or src containing the imageId
+      const allImages = document.querySelectorAll('img');
+      for (const img of allImages) {
+        if (img.alt?.includes(imageId) || img.src?.includes(imageId)) {
+          return img as HTMLImageElement;
+        }
+      }
+      
+      return null;
+    };
+    
+    const img = findImageElement();
+    
+    // Handle reset
+    if (override.reset) {
+      if (img && originalImageStates[imageId]) {
+        const original = originalImageStates[imageId];
+        img.src = original.src;
+        if (original.srcset) img.srcset = original.srcset;
+        img.style.width = original.width ? `${original.width}px` : '';
+        img.style.height = original.height ? `${original.height}px` : '';
+        img.style.objectFit = original.objectFit || '';
+        img.style.removeProperty("transform");
+        img.style.removeProperty("transform-origin");
+      }
+      
+      setImageOverrides(prev => {
+        const newOverrides = { ...prev };
+        delete newOverrides[imageId];
+        return newOverrides;
+      });
+      return;
+    }
+    
+    // Update override state
+    setImageOverrides(prev => ({
+      ...prev,
+      [imageId]: { ...prev[imageId], ...override },
+    }));
+    
+    // Apply override to DOM element in real-time
+    if (img) {
+      // Store original state if not already stored
+      if (!originalImageStates[imageId]) {
+        setOriginalImageStates(prev => ({
+          ...prev,
+          [imageId]: {
+            src: img.getAttribute("data-original-src") || img.src,
+            width: img.naturalWidth || img.offsetWidth,
+            height: img.naturalHeight || img.offsetHeight,
+            objectFit: getComputedStyle(img).objectFit,
+            srcset: img.srcset || undefined,
+          },
+        }));
+        // Also store original src as data attribute for later restoration
+        if (!img.getAttribute("data-original-src")) {
+          img.setAttribute("data-original-src", img.src);
+        }
+      }
+      
+      // Apply source change
+      if (override.src) {
+        img.srcset = ""; // Clear srcset to force browser to use our src
+        img.src = override.src;
+      }
+      
+      // Apply dimensions
+      if (override.width !== undefined) {
+        img.style.width = override.width ? `${override.width}px` : '';
+      }
+      if (override.height !== undefined) {
+        img.style.height = override.height ? `${override.height}px` : '';
+      }
+      
+      // Apply scale
+      if (override.scale !== undefined) {
+        if (override.scale && override.scale !== 1) {
+          img.style.transform = `scale(${override.scale})`;
+          img.style.transformOrigin = "center";
+        } else {
+          img.style.removeProperty("transform");
+          img.style.removeProperty("transform-origin");
+        }
+      }
+      
+      // Apply object-fit
+      if (override.objectFit) {
+        img.style.objectFit = override.objectFit;
+      }
+      
+      console.log("[Image Override] Applied to element:", {
+        imageId,
+        override,
+        element: img.src,
+      });
+    } else {
+      console.warn("[Image Override] Could not find target element for imageId:", imageId);
+    }
+  }, [originalImageStates, visionFocusedElements]);
+
+  // Image upload handler
+  const handleImageUpload = useCallback(async (file: File): Promise<string | null> => {
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+
+      const response = await fetch("/api/upload-image", {
+        method: "POST",
+        body: formData,
+      });
+
+      const data = await response.json();
+
+      if (!response.ok || !data.success) {
+        console.error("Image upload failed:", data.error);
+        return null;
+      }
+
+      // Refresh public images list to include the new upload
+      const refreshResponse = await fetch("/api/public-images");
+      if (refreshResponse.ok) {
+        const refreshData = await refreshResponse.json();
+        setPublicImages(refreshData.images || []);
+        setPublicImagesByFolder(refreshData.imagesByFolder || {});
+      }
+
+      return data.path;
+    } catch (error) {
+      console.error("Image upload error:", error);
+      return null;
+    }
+  }, []);
+
+  // Save image changes - uses intelligent detection to determine the best strategy
+  const handleSaveImageChanges = useCallback(async (imageId: string) => {
+    const override = imageOverrides[imageId];
+    if (!override) {
+      console.warn("[Image Save] No overrides found for imageId:", imageId);
+      return;
+    }
+    
+    // Find the focused element to get context
+    const focusedElement = visionFocusedElements.find(el => 
+      el.elementId === imageId || el.variantId === imageId || el.name === imageId
+    );
+    
+    if (!focusedElement) {
+      console.warn("[Image Save] Could not find focused element for imageId:", imageId);
+      return;
+    }
+    
+    setIsImageSaving(true);
+    
+    try {
+      // Extract clean image src
+      let cleanImageSrc = focusedElement.imageSrc || "";
+      if (cleanImageSrc.includes("/_next/image")) {
+        const urlMatch = cleanImageSrc.match(/url=([^&]+)/);
+        if (urlMatch) {
+          cleanImageSrc = decodeURIComponent(urlMatch[1]);
+        }
+      }
+      
+      // Get data attributes from the actual DOM element if possible
+      let dataAttributes: Record<string, string> = {};
+      try {
+        // Try to find the actual DOM element using coordinates
+        const centerX = focusedElement.coordinates.x + focusedElement.coordinates.width / 2;
+        const centerY = focusedElement.coordinates.y + focusedElement.coordinates.height / 2;
+        const domElement = document.elementFromPoint(centerX, centerY);
+        
+        if (domElement instanceof HTMLImageElement || domElement?.tagName === 'IMG') {
+          // Extract all data attributes
+          Array.from(domElement.attributes).forEach(attr => {
+            if (attr.name.startsWith('data-')) {
+              const key = attr.name.replace('data-', '');
+              dataAttributes[key] = attr.value;
+            }
+          });
+          // Also get the actual ID from the DOM element
+          if (domElement.id && !focusedElement.elementId) {
+            focusedElement.elementId = domElement.id;
+          }
+        }
+      } catch (e) {
+        console.warn("[Image Save] Could not extract DOM data attributes:", e);
+      }
+      
+      const pageRoute = window.location.pathname;
+      
+      console.log("[Image Save] Using intelligent image detection:", {
+        imageId,
+        imageSrc: cleanImageSrc,
+        override,
+        elementId: focusedElement.elementId,
+        className: focusedElement.className,
+        pageRoute,
+        dataAttributes,
+      });
+      
+      // Use the intelligent sonance-save-image endpoint which detects the best strategy
+      const response = await fetch("/api/sonance-save-image", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          imageId,
+          imageSrc: cleanImageSrc,
+          altText: focusedElement.name,
+          className: focusedElement.className,
+          elementId: focusedElement.elementId,
+          scale: override.scale,
+          width: override.width,
+          height: override.height,
+          src: override.src,
+          pageRoute,
+          dataAttributes,
+          currentBrand, // Pass the current brand context for correct CSS variable targeting
+        }),
+      });
+      
+      const result = await response.json();
+      
+      if (result.success) {
+        console.log("[Image Save] Saved successfully:", {
+          strategy: result.strategy,
+          pattern: result.pattern,
+          modifiedFile: result.modifiedFile,
+          message: result.message,
+        });
+        
+        // Clear the image override since changes are now in code
+        setImageOverrides(prev => {
+          const newOverrides = { ...prev };
+          delete newOverrides[imageId];
+          return newOverrides;
+        });
+        
+        // Reset original state
+        setOriginalImageStates(prev => {
+          const newStates = { ...prev };
+          delete newStates[imageId];
+          return newStates;
+        });
+        
+        // Auto-refresh to see the changes
+        setTimeout(() => {
+          window.location.reload();
+        }, 500);
+      } else {
+        console.error("[Image Save] Failed:", result.error, result.pattern);
+        alert(`Failed to save: ${result.error}\n\nDetected pattern: ${result.pattern?.type || 'unknown'}\nDetails: ${result.pattern?.details || 'No details available'}`);
+      }
+    } catch (error) {
+      console.error("[Image Save] Error:", error);
+      alert(`Error saving changes: ${error}`);
+    } finally {
+      setIsImageSaving(false);
+    }
+  }, [imageOverrides, visionFocusedElements, currentBrand]);
+
   // Auto-fix ID injection into source code
   const handleAutoFixId = useCallback(async (logoSrc: string, suggestedId: string): Promise<{ success: boolean; error?: string }> => {
     setAutoFixStatus("fixing");
@@ -2089,8 +2146,8 @@ export function SonanceDevTools() {
 
   // Apply logo overrides to DOM in real-time
   useEffect(() => {
-    // Apply logo overrides when on logos tab
-    if (activeTab !== "logos") return;
+    // Apply logo overrides when on elements tab
+    if (activeTab !== "elements") return;
 
     const currentTheme = resolvedTheme || theme || "light";
     const isDarkMode = currentTheme === "dark";
@@ -2564,10 +2621,10 @@ export function SonanceDevTools() {
             <Palette className="h-4 w-4 text-white" />
           </div>
           <div className="flex flex-col">
-            <span className="text-sm font-semibold text-white tracking-tight">
+            <span id="span-sonance-devtools" className="text-sm font-semibold text-white tracking-tight">
             Sonance DevTools
           </span>
-            <span className="text-[10px] text-white/50 uppercase tracking-widest">
+            <span id="span-design-system" className="text-[10px] text-white/50 uppercase tracking-widest">
               Design System
           </span>
         </div>
@@ -2578,7 +2635,7 @@ export function SonanceDevTools() {
       <div className="flex items-center gap-1 bg-white/5 rounded-full px-2 py-1">
         {/* Analysis Toggle */}
           <button
-            onClick={() => handleTabChange(activeTab === "analysis" ? "components" : "analysis")}
+            onClick={() => handleTabChange(activeTab === "analysis" ? "elements" : "analysis")}
             className={cn(
             "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all",
               activeTab === "analysis"
@@ -2588,7 +2645,7 @@ export function SonanceDevTools() {
           title="Page Analysis"
           >
           <Scan className="h-3.5 w-3.5" />
-          <span className="hidden sm:inline">Analysis</span>
+          <span id="span-analysis" className="hidden sm:inline">Analysis</span>
           </button>
         {/* Vision Mode Toggle */}
           <button
@@ -2602,7 +2659,7 @@ export function SonanceDevTools() {
           title="AI Vision Mode"
         >
           <Eye className={cn("h-3.5 w-3.5", visionModeActive && "animate-pulse")} />
-          <span className="hidden sm:inline">Vision</span>
+          <span id="span-vision" className="hidden sm:inline">Vision</span>
           </button>
         {/* Element Highlight Toggle - only visible when Vision Mode is active */}
         {visionModeActive && (
@@ -2617,7 +2674,7 @@ export function SonanceDevTools() {
             title={inspectorEnabled ? "Disable element highlighting" : "Enable element highlighting"}
           >
             <MousePointer className={cn("h-3.5 w-3.5", inspectorEnabled && "animate-pulse")} />
-            <span className="hidden sm:inline">{inspectorEnabled ? "Highlighting" : "Highlight"}</span>
+            <span id="span-inspectorenabled-hig" className="hidden sm:inline">{inspectorEnabled ? "Highlighting" : "Highlight"}</span>
           </button>
         )}
       </div>
@@ -2706,7 +2763,7 @@ export function SonanceDevTools() {
             title="Toggle Components"
           >
             <Box className="h-3 w-3" />
-            <span>Components</span>
+            <span id="span-components">Components</span>
           </button>
           {/* Images Filter */}
           <button
@@ -2720,7 +2777,7 @@ export function SonanceDevTools() {
             title="Toggle Images"
           >
             <ImageIcon className="h-3 w-3" />
-            <span>Images</span>
+            <span id="span-images">Images</span>
           </button>
           {/* Text Filter */}
           <button
@@ -2734,7 +2791,7 @@ export function SonanceDevTools() {
             title="Toggle Text"
           >
             <Type className="h-3 w-3" />
-            <span>Text</span>
+            <span id="span-text">Text</span>
           </button>
       </div>
       )}
@@ -2854,6 +2911,16 @@ export function SonanceDevTools() {
                 onSelectLogo={handleSelectLogo}
                 selectedTextId={selectedTextId}
                 onSelectText={handleSelectText}
+                // Image editing props
+                imageOverrides={imageOverrides}
+                onImageOverrideChange={handleImageOverrideChange}
+                onSaveImageChanges={handleSaveImageChanges}
+                isImageSaving={isImageSaving}
+                publicImages={publicImages}
+                publicImagesByFolder={publicImagesByFolder}
+                logoAssets={logoAssets}
+                logoAssetsByBrand={logoAssetsByBrand}
+                onImageUpload={handleImageUpload}
               />
             </div>
           )}
@@ -2879,7 +2946,7 @@ export function SonanceDevTools() {
       aria-label="Open Sonance DevTools"
     >
       <Palette className="h-4 w-4 text-[#00D3C8]" />
-      <span>DevTools</span>
+      <span id="span-devtools">DevTools</span>
     </button>
   );