sonance-brand-mcp 1.3.110 → 1.3.112

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

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { createPortal } from "react-dom";
-import { Palette, X, Copy, Check, RotateCcw, ChevronDown, Save, Loader2, AlertCircle, CheckCircle, Sun, Moon, Eye, EyeOff, Zap, Image as ImageIcon, Wand2, Scan, FileCode, Tag, Type, MousePointer, FormInput, Box, Search, Send, Sparkles, RefreshCw, GripHorizontal } from "lucide-react";
+import { Palette, X, Copy, Check, RotateCcw, ChevronDown, Save, Loader2, AlertCircle, CheckCircle, Sun, Moon, Eye, EyeOff, Zap, Image as ImageIcon, Wand2, Scan, FileCode, Tag, Type, MousePointer, FormInput, Box, Search, Send, Sparkles, RefreshCw, GripHorizontal, PanelRightClose, PanelRightOpen, ChevronUp, ChevronDown as ChevronDownIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { cn } from "../../lib/utils";
 import {
@@ -49,9 +49,13 @@ import {
   TextOverride,
   OriginalTextState,
   ParentSectionInfo,
+  ElementFilters,
+  SelectedElementType,
+  ImageOverride,
+  OriginalImageState,
+  PublicImageAsset,
 } from "./types";
 import {
-  tabs,
   QUICK_ACTIONS,
   SONANCE_PREVIEW_STYLE_ID,
   TAILWIND_TO_CSS,
@@ -59,6 +63,8 @@ import {
   COMPONENT_CONFIG_MAP,
   getVisibleSections,
   shouldShowScopeOptions,
+  DEFAULT_ELEMENT_FILTERS,
+  ELEMENT_TYPE_COLORS,
 } from "./constants";
 import {
   generateComponentCSS,
@@ -78,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
@@ -180,9 +187,16 @@ function findParentSection(element: Element): ParentSectionInfo | undefined {
 
 // ---- Main Component ----
 
+// Frame layout dimensions
+const BANNER_HEIGHT = 44;
+const SIDEBAR_WIDTH = 300;
+const SIDEBAR_COLLAPSED_WIDTH = 48;
+
 export function SonanceDevTools() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [activeTab, setActiveTab] = useState<TabId>("components");
+  // Frame is always visible in dev mode - start open by default
+  const [isOpen, setIsOpen] = useState(true);
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [activeTab, setActiveTab] = useState<TabId>("elements");
   const [config, setConfig] = useState<ThemeConfig>(defaultThemeConfig);
   const [mounted, setMounted] = useState(false);
   const [copiedId, setCopiedId] = useState<string | null>(null);
@@ -190,15 +204,31 @@ export function SonanceDevTools() {
   const [saveMessage, setSaveMessage] = useState<string>("");
   const [installedComponents, setInstalledComponents] = useState<string[]>([]);
   
+  // Unified element filters - show all element types with color coding
+  const [elementFilters, setElementFilters] = useState<ElementFilters>(DEFAULT_ELEMENT_FILTERS);
+  // Selected element determines what the sidebar shows
+  const [selectedElementType, setSelectedElementType] = useState<SelectedElementType>(null);
+  
   // Visual Inspector state - single toggle, behavior depends on active tab
   const [inspectorEnabled, setInspectorEnabled] = useState(false);
   const [selectedComponentType, setSelectedComponentType] = useState<string>("all");
   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);
@@ -215,12 +245,7 @@ export function SonanceDevTools() {
   // Track which elements were changed (for highlighting until accept/revert)
   const [changedElements, setChangedElements] = useState<VisionFocusedElement[]>([]);
 
-  // Drag state for movable panel
-  const DEVTOOLS_POSITION_KEY = "sonance-devtools-pos";
-  const DEFAULT_POSITION = { x: 0, y: 0 }; // Offset from default bottom-right position
-  const [dragPosition, setDragPosition] = useState(DEFAULT_POSITION);
-  const [isDragging, setIsDragging] = useState(false);
-  const dragOffsetRef = useRef({ x: 0, y: 0 });
+  // Refs for panel
   const panelRef = useRef<HTMLDivElement>(null);
 
   // Portal container state - ensures DevTool is always on top of modals
@@ -251,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>>({});
@@ -325,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);
@@ -341,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");
@@ -356,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(() => {
@@ -369,21 +435,92 @@ export function SonanceDevTools() {
     setMounted(true);
   }, []);
 
-  // Load drag position from localStorage on mount
+  // 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;
-    try {
-      const saved = localStorage.getItem(DEVTOOLS_POSITION_KEY);
-      if (saved) {
-        const parsed = JSON.parse(saved);
-        if (typeof parsed.x === "number" && typeof parsed.y === "number") {
-          setDragPosition(parsed);
+    
+    const root = document.documentElement;
+    const body = document.body;
+    const styleId = 'sonance-devtools-layout-styles';
+    
+    if (isOpen) {
+      const sidebarWidth = isSidebarCollapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_WIDTH;
+      
+      // Set CSS variables for components that need to reference the offset
+      root.style.setProperty('--devtools-banner-height', `${BANNER_HEIGHT}px`);
+      root.style.setProperty('--devtools-sidebar-width', `${sidebarWidth}px`);
+      
+      // Inject styles that adjust fixed elements and body layout
+      let styleEl = document.getElementById(styleId) as HTMLStyleElement;
+      if (!styleEl) {
+        styleEl = document.createElement('style');
+        styleEl.id = styleId;
+        document.head.appendChild(styleEl);
+      }
+      
+      // CSS that creates space for the DevTools
+      // Components that read --devtools-banner-height and --devtools-sidebar-width will adjust automatically
+      styleEl.textContent = `
+        /* Ensure body/html don't overflow */
+        html, body {
+          margin: 0 !important;
+          padding: 0 !important;
+          overflow-x: hidden;
+        }
+        
+        /* Push the main content wrapper down */
+        body > div:first-child:not([data-sonance-devtools="true"]) {
+          padding-top: ${BANNER_HEIGHT}px !important;
+          margin-right: ${sidebarWidth}px !important;
+          min-height: 100vh;
+          box-sizing: border-box;
         }
+        
+        /* Ensure main content areas respect the sidebar width */
+        main:not([data-sonance-devtools] *) {
+          max-width: calc(100vw - 256px - ${sidebarWidth}px) !important;
+        }
+      `;
+    } else {
+      // Reset everything when closed
+      root.style.removeProperty('--devtools-banner-height');
+      root.style.removeProperty('--devtools-sidebar-width');
+      
+      const styleEl = document.getElementById(styleId);
+      if (styleEl) {
+        styleEl.remove();
       }
-    } catch {
-      // Ignore parse errors
     }
-  }, [mounted, DEVTOOLS_POSITION_KEY]);
+    
+    return () => {
+      // Cleanup on unmount
+      root.style.removeProperty('--devtools-banner-height');
+      root.style.removeProperty('--devtools-sidebar-width');
+      
+      const styleEl = document.getElementById(styleId);
+      if (styleEl) {
+        styleEl.remove();
+      }
+    };
+  }, [mounted, isOpen, isSidebarCollapsed]);
 
   // Restore apply-first session from localStorage on mount
   // This allows the Accept/Revert UI to survive page refreshes
@@ -407,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");
@@ -420,77 +557,6 @@ export function SonanceDevTools() {
     }
   }, [mounted]);
 
-  // Drag handlers for movable panel
-  const headerRef = useRef<HTMLDivElement>(null);
-  
-  const handleDragStart = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    // Don't start drag if clicking on a button or interactive element
-    const target = e.target as HTMLElement;
-    if (target.closest('button')) return;
-    
-    if (!panelRef.current || !headerRef.current) return;
-    
-    // Prevent text selection during drag
-    e.preventDefault();
-    
-    // Store the initial mouse position and current panel offset
-    dragOffsetRef.current = {
-      x: e.clientX - dragPosition.x,
-      y: e.clientY - dragPosition.y,
-    };
-    
-    setIsDragging(true);
-    headerRef.current.setPointerCapture(e.pointerId);
-  }, [dragPosition]);
-
-  const handleDragMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    if (!isDragging || !panelRef.current) return;
-    
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    const panelWidth = panelRef.current.offsetWidth;
-    const panelHeight = panelRef.current.offsetHeight;
-    
-    // Calculate new position directly from mouse movement
-    const newX = e.clientX - dragOffsetRef.current.x;
-    const newY = e.clientY - dragOffsetRef.current.y;
-    
-    // Clamp to keep panel within viewport (with 24px padding)
-    const padding = 24;
-    const maxX = viewportWidth - panelWidth - padding;
-    const maxY = viewportHeight - panelHeight - padding;
-    const minX = -(viewportWidth - panelWidth - padding);
-    const minY = -(viewportHeight - panelHeight - padding);
-    
-    setDragPosition({
-      x: Math.max(minX, Math.min(maxX, newX)),
-      y: Math.max(minY, Math.min(maxY, newY)),
-    });
-  }, [isDragging]);
-
-  const handleDragEnd = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    if (!isDragging || !headerRef.current) return;
-    
-    setIsDragging(false);
-    headerRef.current.releasePointerCapture(e.pointerId);
-    
-    // Save position to localStorage
-    try {
-      localStorage.setItem(DEVTOOLS_POSITION_KEY, JSON.stringify(dragPosition));
-    } catch {
-      // Ignore storage errors
-    }
-  }, [isDragging, dragPosition, DEVTOOLS_POSITION_KEY]);
-
-  const handleResetPosition = useCallback(() => {
-    setDragPosition(DEFAULT_POSITION);
-    try {
-      localStorage.removeItem(DEVTOOLS_POSITION_KEY);
-    } catch {
-      // Ignore storage errors
-    }
-  }, [DEVTOOLS_POSITION_KEY]);
-
   // Inject/update component-specific preview styles whenever overrides change
   useEffect(() => {
     if (!mounted) return;
@@ -659,34 +725,32 @@ export function SonanceDevTools() {
       }
     }
     
-    if (mounted && (activeTab === "logos" || inspectorEnabled) && logoAssets.length === 0) {
+    if (mounted && (elementFilters.images || inspectorEnabled) && logoAssets.length === 0) {
       fetchLogoAssets();
     }
-  }, [mounted, activeTab, inspectorEnabled, logoAssets.length]);
+  }, [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
@@ -759,21 +823,15 @@ export function SonanceDevTools() {
   // Filter elements for InspectorOverlay based on active tab and selected component type
   // Now supports both specific component IDs (e.g., "button-primary") and categories (e.g., "buttons")
   const filteredOverlayElements = useMemo(() => {
-    // Filter based on active tab first - only show relevant element types
-    let filtered = taggedElements;
-    
-    if (activeTab === "logos") {
-      // On logos tab, only show logos
-      filtered = taggedElements.filter(el => el.type === "logo");
-    } else if (activeTab === "text") {
-      // On text tab, only show text elements
-      filtered = taggedElements.filter(el => el.type === "text");
-    } else if (activeTab === "components") {
-      // On components tab, only show components
-      filtered = taggedElements.filter(el => el.type === "component");
-    }
+    // Filter based on element type filters (unified color-coded view)
+    let filtered = taggedElements.filter(el => {
+      if (el.type === "component" && !elementFilters.components) return false;
+      if (el.type === "logo" && !elementFilters.images) return false;
+      if (el.type === "text" && !elementFilters.text) return false;
+      return true;
+    });
     
-    // When inspector is enabled, show elements for the current tab
+    // When inspector is enabled, show all filtered elements
     if (inspectorEnabled) {
       return filtered;
     }
@@ -781,19 +839,19 @@ export function SonanceDevTools() {
     // When viewing inspector mode for a selected component, show ALL elements
     // (the InspectorOverlay will handle highlighting/dimming based on type match)
     if (viewMode === "inspector" && selectedComponentType !== "all") {
-      return taggedElements;
+      return filtered;
     }
     
     if (selectedComponentType === "all") {
-      return taggedElements;
+      return filtered;
     }
     
     // Check if this is a specific component ID (exists in componentSnippets)
     const isSpecificComponent = componentSnippets.some(s => s.id === selectedComponentType);
     
     // Filter components based on selected type
-    return taggedElements.filter((el) => {
-      // Always include logos and text when their respective inspectors are enabled
+    return filtered.filter((el) => {
+      // Always include logos and text (they're already filtered by elementFilters)
       if (el.type === "logo" || el.type === "text") return true;
       
       // For component type filtering
@@ -832,323 +890,11 @@ export function SonanceDevTools() {
       
       return true;
     });
-  }, [taggedElements, selectedComponentType, inspectorEnabled, viewMode]);
-
-  // 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);
-  };
+  }, [taggedElements, selectedComponentType, inspectorEnabled, viewMode, elementFilters]);
 
-  // Visual Inspector: Scan for tagged elements, logos, and text, update positions
-  useEffect(() => {
-    // Scan if any inspector is enabled OR if we are on the components tab (to populate the list)
-    // Scan when inspector is enabled - scans based on active tab
-    const shouldScan = inspectorEnabled || activeTab === "components" || activeTab === "logos" || activeTab === "text";
-    
-    // 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
-      if (inspectorEnabled || activeTab === "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 images when on logos tab
-      if (activeTab === "logos") {
-        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
-      // Scan for text when on text tab and inspector is enabled
-      if (activeTab === "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]);
+  // 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) => {
@@ -1156,20 +902,27 @@ export function SonanceDevTools() {
   }, []);
 
   // Toggle Vision Mode - AI-powered page-wide editing
+  // Inspector functionality is now integrated into Vision Mode
+  // Vision mode and Analysis tab are mutually exclusive
   const toggleVisionMode = useCallback(() => {
     setVisionModeActive((prev) => {
       const newValue = !prev;
       if (newValue) {
-        // When enabling vision mode, also enable inspector for element selection
+        // When enabling vision mode, auto-enable inspector highlighting
         setInspectorEnabled(true);
+        // If on Analysis tab, switch to Elements tab (mutually exclusive)
+        if (activeTab === "analysis") {
+          setActiveTab("elements");
+        }
       } else {
-        // When disabling, clear all vision state
+        // When disabling, clear all vision state AND disable inspector
+        setInspectorEnabled(false);
         setVisionFocusedElements([]);
         setVisionScreenshot(null);
       }
       return newValue;
     });
-  }, []);
+  }, [activeTab]);
 
   // Handle vision mode element click - toggle focus on/off
   const handleVisionElementClick = useCallback((element: DetectedElement) => {
@@ -1211,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) => {
@@ -1219,13 +974,11 @@ export function SonanceDevTools() {
       );
 
       if (exists) {
-        // Remove (toggle off)
-        return prev.filter(
-          (el) => !(el.name === element.name && el.variantId === element.variantId)
-        );
+        // Click on same element - deselect it
+        return [];
       } else {
-        // Add (toggle on)
-        return [...prev, focusedElement];
+        // Click on different element - select only this one (single selection)
+        return [focusedElement];
       }
     });
   }, [visionModeActive]);
@@ -1304,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,
@@ -1318,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 {
@@ -1331,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]);
@@ -1454,33 +1210,36 @@ export function SonanceDevTools() {
   }, [applyFirstSession]);
 
   // Handle tab change - clear selections when switching tabs
+  // Now simplified: just "analysis" and "elements" modes
   const handleTabChange = useCallback((newTab: TabId) => {
     if (newTab !== activeTab) {
-      // Clear component selections when leaving components tab
-      if (activeTab === "components") {
+      // Clear selections when leaving elements tab
+      if (activeTab === "elements") {
         setSelectedComponentType("all");
         setSelectedComponentId(null);
         setSelectedVariantId(null);
-        // Also clear vision mode when leaving components tab
+        setSelectedLogoId(null);
+        setSelectedTextId(null);
+        setSelectedElementType(null);
+        // Clear vision mode when leaving elements
         if (visionModeActive) {
           clearVisionMode();
         }
-        // Clear apply-first session (auto-revert would be triggered)
-        if (applyFirstSession) {
-          handleApplyFirstRevert();
-        }
-      }
-      // Clear logo selection when leaving logos tab
-      if (activeTab === "logos") {
-        setSelectedLogoId(null);
+        // 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
       }
-      // Clear text selection when leaving text tab
-      if (activeTab === "text") {
-        setSelectedTextId(null);
+      // Analysis and Vision mode are mutually exclusive
+      // When switching to Analysis, disable Vision mode
+      if (newTab === "analysis" && visionModeActive) {
+        setVisionModeActive(false);
+        setInspectorEnabled(false);
+        setVisionFocusedElements([]);
+        setVisionScreenshot(null);
       }
       setActiveTab(newTab);
     }
-  }, [activeTab, visionModeActive, clearVisionMode, applyFirstSession, handleApplyFirstRevert]);
+  }, [activeTab, visionModeActive, clearVisionMode]);
 
   // Load saved text overrides from localStorage on mount
   useEffect(() => {
@@ -1647,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);
@@ -1730,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) => {
@@ -1959,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");
@@ -2096,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";
@@ -2543,118 +2593,98 @@ export function SonanceDevTools() {
 
   if (!mounted) return null;
 
-  const trigger = (
-    <button
-      onClick={() => setIsOpen(true)}
-      className={cn(
-        "fixed bottom-6 right-6 z-[2147483646] pointer-events-auto",
-        "flex h-14 w-14 items-center justify-center",
-        "rounded-full bg-[#333F48] text-white shadow-lg",
-        "hover:scale-105 hover:shadow-xl",
-        "transition-all duration-200",
-        "focus:outline-none focus:ring-2 focus:ring-[#00A3E1] focus:ring-offset-2",
-        isOpen && "hidden"
-      )}
-      aria-label="Open Sonance DevTools"
-    >
-      <Palette className="h-6 w-6" />
-    </button>
-  );
+  // Glassmorphism base classes
+  const glassBase = "backdrop-blur-xl bg-black/75 border-white/10";
+  
+  const sidebarWidth = isSidebarCollapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_WIDTH;
 
-  const panel = isOpen && (
+  // ======== TOP BANNER ========
+  const topBanner = isOpen && (
     <div
-      ref={panelRef}
-      data-sonance-devtools="true"
+      data-sonance-devtools="banner"
       className={cn(
-        "fixed bottom-6 right-6 z-[2147483647] pointer-events-auto",
-        "w-[360px] max-h-[80vh]",
-        "bg-white rounded-lg shadow-2xl border border-gray-200",
-        "flex flex-col overflow-hidden",
-        "font-['Montserrat',sans-serif]",
-        isDragging && "select-none"
+        "fixed top-0 left-0 right-0 z-[2147483647] pointer-events-auto",
+        "flex items-center justify-between px-4",
+        "border-b font-['Montserrat',sans-serif]",
+        glassBase,
+        "border-b-white/10"
       )}
       style={{ 
-        colorScheme: "light",
-        transform: `translate(${dragPosition.x}px, ${dragPosition.y}px)`,
+        height: `${BANNER_HEIGHT}px`,
+        colorScheme: "dark",
       }}
-      // Event isolation - prevent clicks from closing popups in the main app
-      // onPointerDown fires before onMouseDown in modern browsers - must stop both
-      onPointerDown={(e) => e.stopPropagation()}
-      onTouchStart={(e) => e.stopPropagation()}
-      onMouseDown={(e) => e.stopPropagation()}
-      onClick={(e) => e.stopPropagation()}
-      onFocus={(e) => e.stopPropagation()}
-      onBlur={(e) => e.stopPropagation()}
     >
-      {/* Header - Draggable */}
-      <div 
-        ref={headerRef}
-        className={cn(
-          "flex items-center justify-between px-3 py-2 border-b border-gray-200 bg-[#333F48]",
-          "cursor-move touch-none"
-        )}
-        onPointerDown={handleDragStart}
-        onPointerMove={handleDragMove}
-        onPointerUp={handleDragEnd}
-        onPointerCancel={handleDragEnd}
-        onDoubleClick={handleResetPosition}
-        title="Drag to move • Double-click to reset position"
-      >
-        <div className="flex items-center gap-1.5">
-          <GripHorizontal className="h-3.5 w-3.5 text-white/50" />
-          <Palette className="h-4 w-4 text-[#00A3E1]" />
-          <span id="span-sonance-devtools" className="text-xs font-semibold text-white whitespace-nowrap">
+      {/* Left: Branding */}
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2">
+          <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-gradient-to-br from-[#00D3C8] to-[#00A3E1]">
+            <Palette className="h-4 w-4 text-white" />
+          </div>
+          <div className="flex flex-col">
+            <span id="span-sonance-devtools" className="text-sm font-semibold text-white tracking-tight">
             Sonance DevTools
           </span>
+            <span id="span-design-system" className="text-[10px] text-white/50 uppercase tracking-widest">
+              Design System
+          </span>
         </div>
-        <div className="flex items-center gap-1">
-          {/* Analysis Tab Toggle */}
+        </div>
+      </div>
+
+      {/* Center: Mode Toggles */}
+      <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(
-              "p-1.5 rounded transition-colors",
+            "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all",
               activeTab === "analysis"
-                ? "bg-[#00A3E1] text-white"
-                : "hover:bg-white/10 text-white/80"
+              ? "bg-[#00D3C8] text-white shadow-lg shadow-[#00D3C8]/25"
+              : "text-white/70 hover:text-white hover:bg-white/10"
             )}
-            aria-label={activeTab === "analysis" ? "Close analysis" : "Open analysis"}
-            title={activeTab === "analysis" ? "Close analysis" : "Open analysis"}
+          title="Page Analysis"
           >
-            <Scan className="h-4 w-4" />
+          <Scan className="h-3.5 w-3.5" />
+          <span id="span-analysis" className="hidden sm:inline">Analysis</span>
           </button>
-          {/* Inspector Toggle */}
+        {/* Vision Mode Toggle */}
           <button
-            onClick={toggleInspector}
+          onClick={toggleVisionMode}
             className={cn(
-              "p-1.5 rounded transition-colors",
-              inspectorEnabled
-                ? "bg-[#00A3E1] text-white"
-                : "hover:bg-white/10 text-white/80"
-            )}
-            aria-label={inspectorEnabled ? "Disable inspector" : "Enable inspector"}
-            title={inspectorEnabled ? "Disable inspector" : "Enable inspector"}
-          >
-            <MousePointer className={cn("h-4 w-4", inspectorEnabled && "animate-pulse")} />
+            "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all",
+            visionModeActive
+              ? "bg-[#8B5CF6] text-white shadow-lg shadow-[#8B5CF6]/25"
+              : "text-white/70 hover:text-white hover:bg-white/10"
+          )}
+          title="AI Vision Mode"
+        >
+          <Eye className={cn("h-3.5 w-3.5", visionModeActive && "animate-pulse")} />
+          <span id="span-vision" className="hidden sm:inline">Vision</span>
           </button>
-          {/* Vision Mode Toggle */}
+        {/* Element Highlight Toggle - only visible when Vision Mode is active */}
+        {visionModeActive && (
           <button
-            onClick={toggleVisionMode}
+            onClick={toggleInspector}
             className={cn(
-              "p-1.5 rounded transition-colors",
-              visionModeActive
-                ? "bg-[#8B5CF6] text-white"
-                : "hover:bg-white/10 text-white/80"
+              "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all",
+              inspectorEnabled
+                ? "bg-[#00A3E1] text-white shadow-lg shadow-[#00A3E1]/25"
+                : "text-white/70 hover:text-white hover:bg-white/10"
             )}
-            aria-label={visionModeActive ? "Exit vision mode" : "Enter vision mode"}
-            title="Vision Mode: AI-powered page editing with screenshot analysis"
+            title={inspectorEnabled ? "Disable element highlighting" : "Enable element highlighting"}
           >
-            <Eye className={cn("h-4 w-4", visionModeActive && "animate-pulse")} />
+            <MousePointer className={cn("h-3.5 w-3.5", inspectorEnabled && "animate-pulse")} />
+            <span id="span-inspectorenabled-hig" className="hidden sm:inline">{inspectorEnabled ? "Highlighting" : "Highlight"}</span>
           </button>
-          {/* Theme Mode Toggle */}
+        )}
+      </div>
+
+      {/* Right: Actions */}
+      <div className="flex items-center gap-2">
+        {/* Theme Toggle */}
           <button
             onClick={toggleThemeMode}
-            className="p-1.5 rounded hover:bg-white/10 transition-colors"
-            aria-label={resolvedTheme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+          className="flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 hover:bg-white/10 transition-colors"
             title={resolvedTheme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
           >
             {resolvedTheme === "dark" ? (
@@ -2666,182 +2696,295 @@ export function SonanceDevTools() {
           {/* Close Button */}
           <button
             onClick={handleClose}
-            className="p-1.5 rounded hover:bg-white/10 transition-colors"
-            aria-label="Close"
+          className="flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 hover:bg-red-500/20 hover:text-red-400 transition-colors text-white/70"
+          title="Close DevTools"
           >
-            <X className="h-4 w-4 text-white" />
+          <X className="h-4 w-4" />
           </button>
         </div>
       </div>
+  );
 
-      {/* Icon Navigation Bar */}
-      <div className="flex items-center justify-evenly border-b border-gray-200 bg-gray-50 px-2 py-1">
-        {tabs.map((tab) => {
-          const IconComponent = tab.icon;
-          const isActive = activeTab === tab.id;
-          return (
+  // ======== RIGHT SIDEBAR ========
+  const sidebar = isOpen && (
+    <div
+      ref={panelRef}
+      data-sonance-devtools="sidebar"
+      className={cn(
+        "fixed top-0 right-0 z-[2147483646] pointer-events-auto",
+        "flex flex-col font-['Montserrat',sans-serif]",
+        "border-l",
+        glassBase,
+        "border-l-white/10",
+        "transition-all duration-200 ease-out"
+      )}
+      style={{ 
+        width: `${sidebarWidth}px`,
+        height: "100vh",
+        paddingTop: `${BANNER_HEIGHT}px`,
+        colorScheme: "dark",
+      }}
+      onPointerDown={(e) => e.stopPropagation()}
+      onTouchStart={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {/* Collapse/Expand Toggle */}
           <button
-            key={tab.id}
-            onClick={() => handleTabChange(tab.id)}
+        onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
             className={cn(
-                "p-2 rounded-md transition-all",
-                isActive
-                  ? "bg-[#333F48] text-white"
-                  : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
-              )}
-              aria-label={tab.label}
-              title={tab.label}
-            >
-              <IconComponent className="h-4 w-4" />
-          </button>
-          );
-        })}
-      </div>
-
-      {/* Content */}
-      <div
-        className="flex-1 overflow-y-auto p-4 text-[#333F48]"
-        style={{
-          overscrollBehavior: "contain", // Prevent scroll chaining to parent (modal)
-          WebkitOverflowScrolling: "touch", // Smooth scrolling on iOS
-        }}
-        onWheel={(e) => e.stopPropagation()} // Prevent modal from intercepting wheel events
-        onTouchMove={(e) => e.stopPropagation()} // Prevent modal from intercepting touch scroll
-      >
-        {/* Analysis Tab */}
-        {activeTab === "analysis" && (
-          <AnalysisPanel
-            analysisStatus={analysisStatus}
-            analysisResult={analysisResult}
-            analysisError={analysisError}
-            bulkTagStatus={bulkTagStatus}
-            bulkTagMessage={bulkTagMessage}
-            onRunAnalysis={handleRunAnalysis}
-            onBulkTag={handleBulkTagAll}
-          />
+          "absolute -left-3 top-1/2 -translate-y-1/2 z-10",
+          "flex items-center justify-center w-6 h-12 rounded-l-lg",
+          "bg-black/80 border border-white/10 border-r-0",
+          "text-white/60 hover:text-white hover:bg-black/90",
+          "transition-all"
         )}
-        
-        {/* Components Tab */}
-        {activeTab === "components" && (
-          <ComponentsPanel
-            copiedId={copiedId}
-            onCopy={handleCopy}
-            installedComponents={installedComponents}
-            inspectorEnabled={inspectorEnabled}
-            onToggleInspector={toggleInspector}
-            config={config}
-            updateConfig={updateConfig}
-            onReset={handleReset}
-            taggedElements={taggedElements}
-            selectedComponentType={selectedComponentType}
-            onSelectComponentType={handleSelectComponentType}
-            componentScope={componentScope}
-            onScopeChange={setComponentScope}
-            selectedComponentId={selectedComponentId}
-            onSelectComponent={setSelectedComponentId}
-            selectedVariantId={selectedVariantId}
-            onSelectVariant={setSelectedVariantId}
-            analysisResult={analysisResult}
-            componentOverrides={componentOverrides}
-            onUpdateComponentOverride={updateComponentOverride}
-            onResetComponentOverrides={resetComponentOverrides}
-            viewMode={viewMode}
-            onViewModeChange={setViewMode}
-            isPreviewActive={isPreviewActive}
-            onPreviewActiveChange={setIsPreviewActive}
-            visionMode={visionModeActive}
-            visionFocusedElements={visionFocusedElements}
-            onVisionEditComplete={handleVisionEditComplete}
-            visionPendingEdit={visionPendingEdit}
-            onSaveVisionEdit={handleSaveVisionEdit}
-            onClearVisionPendingEdit={handleClearVisionPendingEdit}
-            // Apply-First Mode props
-            applyFirstSession={applyFirstSession}
-            applyFirstStatus={applyFirstStatus}
-            onApplyFirstComplete={handleApplyFirstComplete}
-            onApplyFirstAccept={handleApplyFirstAccept}
-            onApplyFirstRevert={handleApplyFirstRevert}
-            onApplyFirstForceClear={handleApplyFirstForceClear}
-          />
+        title={isSidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+      >
+        {isSidebarCollapsed ? (
+          <PanelRightClose className="h-3.5 w-3.5" />
+        ) : (
+          <PanelRightOpen className="h-3.5 w-3.5" />
         )}
+          </button>
 
-        {/* Logos Tab */}
-        {activeTab === "logos" && (
-          <LogosPanel
-            logoAssets={logoAssets}
-            logoAssetsByBrand={logoAssetsByBrand}
-            selectedLogoId={selectedLogoId}
-            globalLogoConfig={globalLogoConfig}
-            individualLogoConfigs={individualLogoConfigs}
-            originalLogoStates={originalLogoStates}
-            taggedElements={taggedElements}
-            onGlobalConfigChange={handleGlobalLogoConfigChange}
-            onIndividualConfigChange={handleIndividualLogoConfigChange}
-            onSelectLogo={handleSelectLogo}
-            onResetAll={handleResetAllLogos}
-            onResetLogo={handleResetLogo}
-            onSaveChanges={handleSaveLogoChanges}
-            saveStatus={logoSaveStatus}
-            saveMessage={logoSaveMessage}
-            findComplementaryLogo={findComplementaryLogo}
-            currentTheme={resolvedTheme || theme || "light"}
-            onAutoFixId={handleAutoFixId}
-            autoFixStatus={autoFixStatus}
-            autoFixMessage={autoFixMessage}
-          />
-        )}
-        
-        {/* Text Tab */}
-        {activeTab === "text" && (
-          <TextPanel
-            inspectorEnabled={inspectorEnabled}
-            taggedElements={taggedElements}
-            selectedTextId={selectedTextId}
-            onSelectText={handleSelectText}
-            textOverrides={textOverrides}
-            onTextOverrideChange={handleTextOverrideChange}
-            hasChanges={hasTextChanges}
-            onSaveChanges={handleSaveTextChanges}
-            onRevertAll={handleRevertAllTextChanges}
-            saveStatus={textSaveStatus}
-            currentTheme={currentResolvedTheme === "dark" ? "dark" : "light"}
-          />
-        )}
+      {/* Element Type Filter Toggles - Color coded */}
+      {!isSidebarCollapsed && activeTab === "elements" && (
+        <div className="flex items-center gap-1 px-2 py-2 border-b border-white/10 bg-white/5">
+          {/* Components Filter */}
+          <button
+            onClick={() => setElementFilters(prev => ({ ...prev, components: !prev.components }))}
+            className={cn(
+              "flex items-center gap-1 px-2 py-1.5 rounded text-[10px] font-medium transition-all",
+              elementFilters.components
+                ? "bg-purple-500/20 text-purple-300 border border-purple-400/30"
+                : "text-white/40 hover:text-white/60 border border-transparent"
+            )}
+            title="Toggle Components"
+          >
+            <Box className="h-3 w-3" />
+            <span id="span-components">Components</span>
+          </button>
+          {/* Images Filter */}
+          <button
+            onClick={() => setElementFilters(prev => ({ ...prev, images: !prev.images }))}
+            className={cn(
+              "flex items-center gap-1 px-2 py-1.5 rounded text-[10px] font-medium transition-all",
+              elementFilters.images
+                ? "bg-blue-500/20 text-blue-300 border border-blue-400/30"
+                : "text-white/40 hover:text-white/60 border border-transparent"
+            )}
+            title="Toggle Images"
+          >
+            <ImageIcon className="h-3 w-3" />
+            <span id="span-images">Images</span>
+          </button>
+          {/* Text Filter */}
+          <button
+            onClick={() => setElementFilters(prev => ({ ...prev, text: !prev.text }))}
+            className={cn(
+              "flex items-center gap-1 px-2 py-1.5 rounded text-[10px] font-medium transition-all",
+              elementFilters.text
+                ? "bg-amber-500/20 text-amber-300 border border-amber-400/30"
+                : "text-white/40 hover:text-white/60 border border-transparent"
+            )}
+            title="Toggle Text"
+          >
+            <Type className="h-3 w-3" />
+            <span id="span-text">Text</span>
+          </button>
       </div>
+      )}
+      {/* Collapsed sidebar - just show active filters as icons */}
+      {isSidebarCollapsed && activeTab === "elements" && (
+        <div className="flex flex-col items-center gap-0.5 py-1.5 border-b border-white/10 bg-white/5">
+          <button
+            onClick={() => setElementFilters(prev => ({ ...prev, components: !prev.components }))}
+            className={cn(
+              "p-1.5 rounded transition-all",
+              elementFilters.components ? "text-purple-400" : "text-white/30"
+            )}
+            title="Components"
+          >
+            <Box className="h-3.5 w-3.5" />
+          </button>
+          <button
+            onClick={() => setElementFilters(prev => ({ ...prev, images: !prev.images }))}
+            className={cn(
+              "p-1.5 rounded transition-all",
+              elementFilters.images ? "text-blue-400" : "text-white/30"
+            )}
+            title="Images"
+          >
+            <ImageIcon className="h-3.5 w-3.5" />
+          </button>
+          <button
+            onClick={() => setElementFilters(prev => ({ ...prev, text: !prev.text }))}
+            className={cn(
+              "p-1.5 rounded transition-all",
+              elementFilters.text ? "text-amber-400" : "text-white/30"
+            )}
+            title="Text"
+          >
+            <Type className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      )}
+
+      {/* Panel Content - Light themed for contrast with dark frame */}
+      {!isSidebarCollapsed && (
+        <div
+          className={cn(
+            "flex-1 m-1.5 rounded-md bg-white/95 backdrop-blur-sm shadow-inner",
+            // Elements tab needs flex layout for pinned chat
+            activeTab === "elements" ? "flex flex-col overflow-hidden" : "overflow-y-auto"
+          )}
+          style={{
+            overscrollBehavior: "contain",
+            WebkitOverflowScrolling: "touch",
+            colorScheme: "light",
+          }}
+          onWheel={(e) => e.stopPropagation()}
+          onTouchMove={(e) => e.stopPropagation()}
+        >
+          {/* Analysis Tab - with padding wrapper */}
+          {activeTab === "analysis" && (
+            <div className="p-3 text-[#333F48]">
+              <AnalysisPanel
+                analysisStatus={analysisStatus}
+                analysisResult={analysisResult}
+                analysisError={analysisError}
+                bulkTagStatus={bulkTagStatus}
+                bulkTagMessage={bulkTagMessage}
+                onRunAnalysis={handleRunAnalysis}
+                onBulkTag={handleBulkTagAll}
+              />
+            </div>
+          )}
+        
+          {/* Unified Elements Tab - full height flex layout */}
+          {activeTab === "elements" && (
+            <div className="flex-1 flex flex-col min-h-0 text-[#333F48]">
+              {/* Dynamic content based on selected element type or default to ComponentsPanel */}
+              <ComponentsPanel
+                copiedId={copiedId}
+                onCopy={handleCopy}
+                installedComponents={installedComponents}
+                inspectorEnabled={inspectorEnabled}
+                onToggleInspector={toggleInspector}
+                config={config}
+                updateConfig={updateConfig}
+                onReset={handleReset}
+                taggedElements={taggedElements}
+                selectedComponentType={selectedComponentType}
+                onSelectComponentType={handleSelectComponentType}
+                componentScope={componentScope}
+                onScopeChange={setComponentScope}
+                selectedComponentId={selectedComponentId}
+                onSelectComponent={setSelectedComponentId}
+                selectedVariantId={selectedVariantId}
+                onSelectVariant={setSelectedVariantId}
+                analysisResult={analysisResult}
+                componentOverrides={componentOverrides}
+                onUpdateComponentOverride={updateComponentOverride}
+                onResetComponentOverrides={resetComponentOverrides}
+                viewMode={viewMode}
+                onViewModeChange={setViewMode}
+                isPreviewActive={isPreviewActive}
+                onPreviewActiveChange={setIsPreviewActive}
+                visionMode={visionModeActive}
+                visionFocusedElements={visionFocusedElements}
+                onVisionEditComplete={handleVisionEditComplete}
+                visionPendingEdit={visionPendingEdit}
+                onSaveVisionEdit={handleSaveVisionEdit}
+                onClearVisionPendingEdit={handleClearVisionPendingEdit}
+                // Apply-First Mode props
+                applyFirstSession={applyFirstSession}
+                applyFirstStatus={applyFirstStatus}
+                onApplyFirstComplete={handleApplyFirstComplete}
+                onApplyFirstAccept={handleApplyFirstAccept}
+                onApplyFirstRevert={handleApplyFirstRevert}
+                onApplyFirstForceClear={handleApplyFirstForceClear}
+                // Element filter context - for showing filter-aware content
+                elementFilters={elementFilters}
+                selectedLogoId={selectedLogoId}
+                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>
+          )}
+        </div>
+      )}
     </div>
   );
+  
+  // Floating trigger when closed (for re-opening)
+  const closedTrigger = !isOpen && (
+    <button
+      onClick={() => setIsOpen(true)}
+      className={cn(
+        "fixed bottom-6 right-6 z-[2147483646] pointer-events-auto",
+        "flex items-center gap-2 px-4 py-2.5",
+        "rounded-full shadow-2xl",
+        "backdrop-blur-xl bg-black/80 border border-white/10",
+        "text-white font-medium text-sm",
+        "hover:scale-105 hover:shadow-[0_0_30px_rgba(0,211,200,0.3)]",
+        "transition-all duration-200",
+        "focus:outline-none focus:ring-2 focus:ring-[#00D3C8] focus:ring-offset-2 focus:ring-offset-black"
+      )}
+      aria-label="Open Sonance DevTools"
+    >
+      <Palette className="h-4 w-4 text-[#00D3C8]" />
+      <span id="span-devtools">DevTools</span>
+    </button>
+  );
 
   // Wait for portal container to be ready
   if (!portalContainer) return null;
 
   return createPortal(
     <>
-      {trigger}
-      {panel}
+      {/* Closed state trigger */}
+      {closedTrigger}
+      {/* Frame layout: Top Banner + Right Sidebar */}
+      {topBanner}
+      {sidebar}
       {/* Vision Mode Border Overlay */}
       <VisionModeBorder
         active={visionModeActive}
         focusedCount={visionFocusedElements.length}
+        highlightEnabled={inspectorEnabled}
       />
       {/* Section Highlight - shows detected parent section when element is clicked */}
       <SectionHighlight
         active={visionModeActive}
         focusedElements={visionFocusedElements}
       />
-      {/* Visual Inspector Overlay - switches to preview mode when AI changes are pending */}
-      {(inspectorEnabled || isPreviewActive || visionModeActive || changedElements.length > 0 || (viewMode === "inspector" && selectedComponentType !== "all")) && filteredOverlayElements.length > 0 && (
+      {/* Visual Inspector Overlay - shows when highlighting is enabled in Vision Mode or for previews */}
+      {((visionModeActive && inspectorEnabled) || isPreviewActive || changedElements.length > 0 || (viewMode === "inspector" && selectedComponentType !== "all")) && filteredOverlayElements.length > 0 && (
         <InspectorOverlay
           elements={filteredOverlayElements}
           selectedLogoId={selectedLogoId}
           onLogoClick={handleSelectLogo}
           selectedTextId={selectedTextId}
           onTextClick={handleSelectText}
-          interactive={activeTab === "logos" || activeTab === "text"}
+          interactive={activeTab === "elements" && (elementFilters.images || elementFilters.text)}
           selectedComponentId={selectedComponentId}
           onComponentClick={setSelectedComponentId}
           componentSelectionMode={componentScope === "selected" && inspectorEnabled}
-          // Inspector-first mode: clicking a component selects its type (allow continuous selection)
-          inspectorClickMode={inspectorEnabled && !isPreviewActive && !visionModeActive}
+          // Vision Mode with highlighting: clicking a component selects its type
+          inspectorClickMode={visionModeActive && inspectorEnabled && !isPreviewActive}
           onSelectComponentAndClose={handleInspectorSelectAndClose}
           // Pass selected type to highlight only matching components
           selectedComponentType={selectedComponentType}