sonance-brand-mcp 1.3.110 → 1.3.111

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,10 @@ import {
   TextOverride,
   OriginalTextState,
   ParentSectionInfo,
+  ElementFilters,
+  SelectedElementType,
 } from "./types";
 import {
-  tabs,
   QUICK_ACTIONS,
   SONANCE_PREVIEW_STYLE_ID,
   TAILWIND_TO_CSS,
@@ -59,6 +60,8 @@ import {
   COMPONENT_CONFIG_MAP,
   getVisibleSections,
   shouldShowScopeOptions,
+  DEFAULT_ELEMENT_FILTERS,
+  ELEMENT_TYPE_COLORS,
 } from "./constants";
 import {
   generateComponentCSS,
@@ -180,9 +183,16 @@ function findParentSection(element: Element): ParentSectionInfo | undefined {
 
 // ---- Main Component ----
 
+// Frame layout dimensions
+const BANNER_HEIGHT = 44;
+const SIDEBAR_WIDTH = 260;
+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,6 +200,11 @@ 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");
@@ -215,12 +230,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
@@ -369,21 +379,74 @@ export function SonanceDevTools() {
     setMounted(true);
   }, []);
 
-  // Load drag position from localStorage on mount
+  // 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
@@ -420,77 +483,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,10 +651,10 @@ 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 => {
@@ -759,21 +751,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 +767,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,7 +818,7 @@ export function SonanceDevTools() {
       
       return true;
     });
-  }, [taggedElements, selectedComponentType, inspectorEnabled, viewMode]);
+  }, [taggedElements, selectedComponentType, inspectorEnabled, viewMode, elementFilters]);
 
   // Simple string hash function for variant detection
   const generateHash = (str: string): string => {
@@ -848,9 +834,8 @@ export function SonanceDevTools() {
 
   // 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";
+    // 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);
 
@@ -906,8 +891,8 @@ export function SonanceDevTools() {
         return true;
       };
 
-      // Scan for tagged components
-      if (inspectorEnabled || activeTab === "components") {
+      // 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) => {
@@ -997,8 +982,8 @@ export function SonanceDevTools() {
         });
       }
 
-      // Scan for logo images when on logos tab
-      if (activeTab === "logos") {
+      // 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)
@@ -1047,9 +1032,8 @@ export function SonanceDevTools() {
       });
       }
 
-      // Scan for text elements
-      // Scan for text when on text tab and inspector is enabled
-      if (activeTab === "text" && inspectorEnabled) {
+      // 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);
@@ -1148,7 +1132,7 @@ export function SonanceDevTools() {
         inspectorRef.current = null;
       }
     };
-    }, [inspectorEnabled, mounted, extractLogoName, originalLogoStates, activeTab]);
+    }, [inspectorEnabled, mounted, extractLogoName, originalLogoStates, activeTab, elementFilters]);
 
   // Toggle Visual Inspector
   const toggleInspector = useCallback((force?: boolean | unknown) => {
@@ -1156,20 +1140,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) => {
@@ -1219,13 +1210,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]);
@@ -1454,14 +1443,18 @@ 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();
         }
@@ -1470,13 +1463,13 @@ export function SonanceDevTools() {
           handleApplyFirstRevert();
         }
       }
-      // Clear logo selection when leaving logos tab
-      if (activeTab === "logos") {
-        setSelectedLogoId(null);
-      }
-      // 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);
     }
@@ -2543,118 +2536,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 className="text-sm font-semibold text-white tracking-tight">
             Sonance DevTools
           </span>
+            <span className="text-[10px] text-white/50 uppercase tracking-widest">
+              Design System
+          </span>
+        </div>
         </div>
-        <div className="flex items-center gap-1">
-          {/* Analysis Tab Toggle */}
+      </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")}
             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 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 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 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 +2639,285 @@ 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>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>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>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}
+              />
+            </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>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}