@ytspar/devbar 1.0.0-canary.92db425 → 1.0.0-canary.bf42899

package/dist/GlobalDevBar.js

@@ -8,19 +8,21 @@
  * to avoid React dependency conflicts in host applications.
  */
 import * as html2canvasModule from 'html2canvas-pro';
-import { MAX_CONSOLE_LOGS, DEVBAR_SCREENSHOT_QUALITY, MAX_RECONNECT_ATTEMPTS, BASE_RECONNECT_DELAY_MS, MAX_RECONNECT_DELAY_MS, WS_PORT, SCREENSHOT_NOTIFICATION_MS, CLIPBOARD_NOTIFICATION_MS, DESIGN_REVIEW_NOTIFICATION_MS, SCREENSHOT_BLUR_DELAY_MS, SCREENSHOT_SCALE, TAILWIND_BREAKPOINTS, BUTTON_COLORS, CATEGORY_COLORS, TOOLTIP_STYLES, COLORS, FONT_MONO, } from './constants.js';
-import { formatArgs, canvasToDataUrl, prepareForCapture, delay, copyCanvasToClipboard, } from './utils.js';
+import { BASE_RECONNECT_DELAY_MS, BUTTON_COLORS, CATEGORY_COLORS, CLIPBOARD_NOTIFICATION_MS, COLORS, DESIGN_REVIEW_NOTIFICATION_MS, DEVBAR_SCREENSHOT_QUALITY, FONT_MONO, getEffectiveTheme, getStoredThemeMode, getThemeColors, MAX_CONSOLE_LOGS, MAX_RECONNECT_ATTEMPTS, MAX_RECONNECT_DELAY_MS, SCREENSHOT_BLUR_DELAY_MS, SCREENSHOT_NOTIFICATION_MS, SCREENSHOT_SCALE, setStoredThemeMode, STORAGE_KEYS, TAILWIND_BREAKPOINTS, TOOLTIP_STYLES, WS_PORT, } from './constants.js';
+import { DebugLogger, normalizeDebugConfig } from './debug.js';
 import { extractDocumentOutline, outlineToMarkdown } from './outline.js';
 import { extractPageSchema, schemaToMarkdown } from './schema.js';
-import { createSvgIcon, getButtonStyles, createStyledButton, createModalOverlay, createModalBox, createModalHeader, createModalContent, createEmptyMessage, createInfoBox, } from './ui/index.js';
-const html2canvas = (html2canvasModule.default ?? html2canvasModule);
+import { createEmptyMessage, createInfoBox, createModalBox, createModalContent, createModalHeader, createModalOverlay, createStyledButton, createSvgIcon, getButtonStyles, } from './ui/index.js';
+import { canvasToDataUrl, copyCanvasToClipboard, delay, formatArgs, prepareForCapture, } from './utils.js';
+const html2canvas = (html2canvasModule.default ??
+    html2canvasModule);
 const earlyConsoleCapture = (() => {
     const ssrFallback = {
         errorCount: 0,
         warningCount: 0,
         logs: [],
         originalConsole: null,
-        isPatched: false
+        isPatched: false,
     };
     // Skip on server-side rendering
     if (typeof window === 'undefined')
@@ -33,9 +35,9 @@ const earlyConsoleCapture = (() => {
             log: console.log,
             error: console.error,
             warn: console.warn,
-            info: console.info
+            info: console.info,
         },
-        isPatched: false
+        isPatched: false,
     };
     const captureLog = (level, args) => {
         capture.logs.push({ level, message: formatArgs(args), timestamp: Date.now() });
@@ -44,10 +46,24 @@ const earlyConsoleCapture = (() => {
     };
     // Patch console immediately
     if (!capture.isPatched && capture.originalConsole) {
-        console.log = (...args) => { captureLog('log', args); capture.originalConsole.log(...args); };
-        console.error = (...args) => { captureLog('error', args); capture.errorCount++; capture.originalConsole.error(...args); };
-        console.warn = (...args) => { captureLog('warn', args); capture.warningCount++; capture.originalConsole.warn(...args); };
-        console.info = (...args) => { captureLog('info', args); capture.originalConsole.info(...args); };
+        console.log = (...args) => {
+            captureLog('log', args);
+            capture.originalConsole.log(...args);
+        };
+        console.error = (...args) => {
+            captureLog('error', args);
+            capture.errorCount++;
+            capture.originalConsole.error(...args);
+        };
+        console.warn = (...args) => {
+            captureLog('warn', args);
+            capture.warningCount++;
+            capture.originalConsole.warn(...args);
+        };
+        console.info = (...args) => {
+            captureLog('info', args);
+            capture.originalConsole.info(...args);
+        };
         capture.isPatched = true;
     }
     return capture;
@@ -80,7 +96,11 @@ export class GlobalDevBar {
         this.breakpointInfo = null;
         this.perfStats = null;
         this.lcpValue = null;
+        this.clsValue = 0;
+        this.inpValue = 0;
         this.reconnectAttempts = 0;
+        // Track the position of the connection indicator dot for smooth collapse
+        this.lastDotPosition = null;
         this.reconnectTimeout = null;
         this.screenshotTimeout = null;
         this.copiedPathTimeout = null;
@@ -92,9 +112,22 @@ export class GlobalDevBar {
         this.keydownHandler = null;
         this.fcpObserver = null;
         this.lcpObserver = null;
+        this.clsObserver = null;
+        this.inpObserver = null;
         this.destroyed = false;
+        // Theme state
+        this.themeMode = 'system';
+        this.themeMediaQuery = null;
+        this.themeMediaHandler = null;
+        // Compact mode state
+        this.compactMode = false;
+        // Settings popover state
+        this.showSettingsPopover = false;
         // Overlay element for modals
         this.overlayElement = null;
+        // Initialize debug config first so we can log during construction
+        this.debugConfig = normalizeDebugConfig(options.debug);
+        this.debug = new DebugLogger(this.debugConfig);
         this.options = {
             position: options.position ?? 'bottom-left',
             accentColor: options.accentColor ?? COLORS.primary,
@@ -102,6 +135,8 @@ export class GlobalDevBar {
                 breakpoint: options.showMetrics?.breakpoint ?? true,
                 fcp: options.showMetrics?.fcp ?? true,
                 lcp: options.showMetrics?.lcp ?? true,
+                cls: options.showMetrics?.cls ?? true,
+                inp: options.showMetrics?.inp ?? true,
                 pageSize: options.showMetrics?.pageSize ?? true,
             },
             showScreenshot: options.showScreenshot ?? true,
@@ -109,6 +144,7 @@ export class GlobalDevBar {
             showTooltips: options.showTooltips ?? true,
             sizeOverrides: options.sizeOverrides,
         };
+        this.debug.lifecycle('GlobalDevBar constructed', { options: this.options });
     }
     /**
      * Get tooltip class name(s) if tooltips are enabled, otherwise empty string
@@ -153,7 +189,7 @@ export class GlobalDevBar {
             fontWeight: '600',
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'center'
+            justifyContent: 'center',
         });
         badge.textContent = count > 99 ? '!' : String(count);
         return badge;
@@ -166,7 +202,7 @@ export class GlobalDevBar {
      */
     static registerControl(control) {
         // Remove existing control with same ID
-        GlobalDevBar.customControls = GlobalDevBar.customControls.filter(c => c.id !== control.id);
+        GlobalDevBar.customControls = GlobalDevBar.customControls.filter((c) => c.id !== control.id);
         GlobalDevBar.customControls.push(control);
         // Trigger re-render of all instances
         const instance = getGlobalInstance();
@@ -178,7 +214,7 @@ export class GlobalDevBar {
      * Unregister a custom control by ID
      */
     static unregisterControl(id) {
-        GlobalDevBar.customControls = GlobalDevBar.customControls.filter(c => c.id !== id);
+        GlobalDevBar.customControls = GlobalDevBar.customControls.filter((c) => c.id !== id);
         // Trigger re-render of all instances
         const instance = getGlobalInstance();
         if (instance) {
@@ -209,10 +245,16 @@ export class GlobalDevBar {
             return;
         if (this.destroyed)
             return;
+        this.debug.lifecycle('Initializing DevBar');
         // Inject tooltip styles
         this.injectStyles();
         // Copy early captured logs
         this.consoleLogs = [...earlyConsoleCapture.logs];
+        this.debug.lifecycle('Copied early console logs', { count: this.consoleLogs.length });
+        // Setup theme
+        this.setupTheme();
+        // Load compact mode from storage
+        this.loadCompactMode();
         // Setup WebSocket connection
         this.connectWebSocket();
         // Setup breakpoint detection
@@ -223,11 +265,19 @@ export class GlobalDevBar {
         this.setupKeyboardShortcuts();
         // Initial render
         this.render();
+        this.debug.lifecycle('DevBar initialized successfully');
+    }
+    /**
+     * Get the current position
+     */
+    getPosition() {
+        return this.options.position;
     }
     /**
      * Destroy the devbar and cleanup
      */
     destroy() {
+        this.debug.lifecycle('Destroying DevBar');
         this.destroyed = true;
         // Close WebSocket
         this.reconnectAttempts = MAX_RECONNECT_ATTEMPTS; // Prevent reconnection
@@ -256,6 +306,14 @@ export class GlobalDevBar {
             this.fcpObserver.disconnect();
         if (this.lcpObserver)
             this.lcpObserver.disconnect();
+        if (this.clsObserver)
+            this.clsObserver.disconnect();
+        if (this.inpObserver)
+            this.inpObserver.disconnect();
+        // Remove theme media listener
+        if (this.themeMediaQuery && this.themeMediaHandler) {
+            this.themeMediaQuery.removeEventListener('change', this.themeMediaHandler);
+        }
         // Restore console
         if (earlyConsoleCapture.originalConsole) {
             console.log = earlyConsoleCapture.originalConsole.log;
@@ -272,6 +330,7 @@ export class GlobalDevBar {
             this.overlayElement.remove();
             this.overlayElement = null;
         }
+        this.debug.lifecycle('DevBar destroyed');
     }
     injectStyles() {
         const styleId = 'devbar-tooltip-styles';
@@ -285,17 +344,20 @@ export class GlobalDevBar {
     connectWebSocket() {
         if (this.destroyed)
             return;
+        this.debug.ws('Connecting to WebSocket', { port: WS_PORT });
         const ws = new WebSocket(`ws://localhost:${WS_PORT}`);
         this.ws = ws;
         ws.onopen = () => {
             this.sweetlinkConnected = true;
             this.reconnectAttempts = 0;
+            this.debug.ws('WebSocket connected');
             ws.send(JSON.stringify({ type: 'browser-client-ready' }));
             this.render();
         };
         ws.onmessage = async (event) => {
             try {
                 const command = JSON.parse(event.data);
+                this.debug.ws('Received command', { type: command.type });
                 await this.handleSweetlinkCommand(command);
             }
             catch (e) {
@@ -304,16 +366,19 @@ export class GlobalDevBar {
         };
         ws.onclose = () => {
             this.sweetlinkConnected = false;
+            this.debug.ws('WebSocket disconnected');
             this.render();
             // Auto-reconnect with exponential backoff
             if (!this.destroyed && this.reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
-                const delayMs = BASE_RECONNECT_DELAY_MS * Math.pow(2, this.reconnectAttempts);
+                const delayMs = BASE_RECONNECT_DELAY_MS * 2 ** this.reconnectAttempts;
                 this.reconnectAttempts++;
+                this.debug.ws('Scheduling reconnect', { attempt: this.reconnectAttempts, delayMs });
                 this.reconnectTimeout = setTimeout(() => this.connectWebSocket(), Math.min(delayMs, MAX_RECONNECT_DELAY_MS));
             }
         };
         ws.onerror = () => {
             // Error will trigger onclose, which handles reconnection
+            this.debug.ws('WebSocket error');
         };
     }
     async handleSweetlinkCommand(command) {
@@ -325,11 +390,20 @@ export class GlobalDevBar {
                 const targetElement = command.selector
                     ? document.querySelector(command.selector) || document.body
                     : document.body;
-                const canvas = await html2canvas(targetElement, { logging: false, useCORS: true, allowTaint: true });
+                const canvas = await html2canvas(targetElement, {
+                    logging: false,
+                    useCORS: true,
+                    allowTaint: true,
+                });
                 ws.send(JSON.stringify({
                     success: true,
-                    data: { screenshot: canvas.toDataURL('image/png'), width: canvas.width, height: canvas.height, selector: command.selector || 'body' },
-                    timestamp: Date.now()
+                    data: {
+                        screenshot: canvas.toDataURL('image/png'),
+                        width: canvas.width,
+                        height: canvas.height,
+                        selector: command.selector || 'body',
+                    },
+                    timestamp: Date.now(),
                 }));
                 break;
             }
@@ -337,7 +411,7 @@ export class GlobalDevBar {
                 let logs = this.consoleLogs;
                 if (command.filter) {
                     const filter = command.filter.toLowerCase();
-                    logs = logs.filter(log => log.level.includes(filter) || log.message.toLowerCase().includes(filter));
+                    logs = logs.filter((log) => log.level.includes(filter) || log.message.toLowerCase().includes(filter));
                 }
                 ws.send(JSON.stringify({ success: true, data: logs, timestamp: Date.now() }));
                 break;
@@ -348,9 +422,18 @@ export class GlobalDevBar {
                     const results = elements.map((el) => {
                         if (command.property)
                             return el[command.property] ?? null;
-                        return { tagName: el.tagName, className: el.className, id: el.id, textContent: el.textContent?.trim().slice(0, 100) };
+                        return {
+                            tagName: el.tagName,
+                            className: el.className,
+                            id: el.id,
+                            textContent: el.textContent?.trim().slice(0, 100),
+                        };
                     });
-                    ws.send(JSON.stringify({ success: true, data: { count: results.length, results }, timestamp: Date.now() }));
+                    ws.send(JSON.stringify({
+                        success: true,
+                        data: { count: results.length, results },
+                        timestamp: Date.now(),
+                    }));
                 }
                 break;
             }
@@ -363,7 +446,11 @@ export class GlobalDevBar {
                         ws.send(JSON.stringify({ success: true, data: result, timestamp: Date.now() }));
                     }
                     catch (e) {
-                        ws.send(JSON.stringify({ success: false, error: e instanceof Error ? e.message : 'Execution failed', timestamp: Date.now() }));
+                        ws.send(JSON.stringify({
+                            success: false,
+                            error: e instanceof Error ? e.message : 'Execution failed',
+                            timestamp: Date.now(),
+                        }));
                     }
                 }
                 break;
@@ -427,25 +514,37 @@ export class GlobalDevBar {
                 this.lastScreenshot = path;
                 if (this.screenshotTimeout)
                     clearTimeout(this.screenshotTimeout);
-                this.screenshotTimeout = setTimeout(() => { this.lastScreenshot = null; this.render(); }, durationMs);
+                this.screenshotTimeout = setTimeout(() => {
+                    this.lastScreenshot = null;
+                    this.render();
+                }, durationMs);
                 break;
             case 'designReview':
                 this.lastDesignReview = path;
                 if (this.designReviewTimeout)
                     clearTimeout(this.designReviewTimeout);
-                this.designReviewTimeout = setTimeout(() => { this.lastDesignReview = null; this.render(); }, durationMs);
+                this.designReviewTimeout = setTimeout(() => {
+                    this.lastDesignReview = null;
+                    this.render();
+                }, durationMs);
                 break;
             case 'outline':
                 this.lastOutline = path;
                 if (this.outlineTimeout)
                     clearTimeout(this.outlineTimeout);
-                this.outlineTimeout = setTimeout(() => { this.lastOutline = null; this.render(); }, durationMs);
+                this.outlineTimeout = setTimeout(() => {
+                    this.lastOutline = null;
+                    this.render();
+                }, durationMs);
                 break;
             case 'schema':
                 this.lastSchema = path;
                 if (this.schemaTimeout)
                     clearTimeout(this.schemaTimeout);
-                this.schemaTimeout = setTimeout(() => { this.lastSchema = null; this.render(); }, durationMs);
+                this.schemaTimeout = setTimeout(() => {
+                    this.lastSchema = null;
+                    this.render();
+                }, durationMs);
                 break;
         }
         this.render();
@@ -455,20 +554,17 @@ export class GlobalDevBar {
             const width = window.innerWidth;
             const height = window.innerHeight;
             // Determine breakpoint by checking thresholds in descending order
-            let tailwindBreakpoint = 'base';
-            if (width >= TAILWIND_BREAKPOINTS['2xl'].min)
-                tailwindBreakpoint = '2xl';
-            else if (width >= TAILWIND_BREAKPOINTS.xl.min)
-                tailwindBreakpoint = 'xl';
-            else if (width >= TAILWIND_BREAKPOINTS.lg.min)
-                tailwindBreakpoint = 'lg';
-            else if (width >= TAILWIND_BREAKPOINTS.md.min)
-                tailwindBreakpoint = 'md';
-            else if (width >= TAILWIND_BREAKPOINTS.sm.min)
-                tailwindBreakpoint = 'sm';
+            const breakpointOrder = [
+                '2xl',
+                'xl',
+                'lg',
+                'md',
+                'sm',
+            ];
+            const tailwindBreakpoint = breakpointOrder.find((bp) => width >= TAILWIND_BREAKPOINTS[bp].min) ?? 'base';
             this.breakpointInfo = {
                 tailwindBreakpoint,
-                dimensions: `${width}x${height}`
+                dimensions: `${width}x${height}`,
             };
             this.render();
         };
@@ -480,10 +576,14 @@ export class GlobalDevBar {
         const updatePerfStats = () => {
             // FCP
             const paintEntries = performance.getEntriesByType('paint');
-            const fcpEntry = paintEntries.find(entry => entry.name === 'first-contentful-paint');
+            const fcpEntry = paintEntries.find((entry) => entry.name === 'first-contentful-paint');
             const fcp = fcpEntry ? `${Math.round(fcpEntry.startTime)}ms` : '-';
             // LCP (from cached value, updated by observer)
             const lcp = this.lcpValue !== null ? `${Math.round(this.lcpValue)}ms` : '-';
+            // CLS (cumulative layout shift)
+            const cls = this.clsValue > 0 ? this.clsValue.toFixed(3) : '-';
+            // INP (Interaction to Next Paint)
+            const inp = this.inpValue > 0 ? `${Math.round(this.inpValue)}ms` : '-';
             // Total Resource Size
             const resources = performance.getEntriesByType('resource');
             let totalBytes = 0;
@@ -498,7 +598,8 @@ export class GlobalDevBar {
             const totalSize = totalBytes > 1024 * 1024
                 ? `${(totalBytes / (1024 * 1024)).toFixed(1)} MB`
                 : `${Math.round(totalBytes / 1024)} KB`;
-            this.perfStats = { fcp, lcp, totalSize };
+            this.perfStats = { fcp, lcp, cls, inp, totalSize };
+            this.debug.perf('Performance stats updated', this.perfStats);
             this.render();
         };
         if (document.readyState === 'complete') {
@@ -529,6 +630,7 @@ export class GlobalDevBar {
                 const lastEntry = entries[entries.length - 1];
                 if (lastEntry) {
                     this.lcpValue = lastEntry.startTime;
+                    this.debug.perf('LCP updated', { lcp: this.lcpValue });
                     updatePerfStats();
                 }
             });
@@ -537,12 +639,56 @@ export class GlobalDevBar {
         catch (e) {
             console.warn('[GlobalDevBar] LCP PerformanceObserver not supported', e);
         }
+        // CLS Observer (Cumulative Layout Shift)
+        try {
+            this.clsObserver = new PerformanceObserver((list) => {
+                for (const entry of list.getEntries()) {
+                    // Only count layout shifts without recent user input
+                    const layoutShift = entry;
+                    if (!layoutShift.hadRecentInput && layoutShift.value) {
+                        this.clsValue += layoutShift.value;
+                        this.debug.perf('CLS updated', { cls: this.clsValue });
+                        updatePerfStats();
+                    }
+                }
+            });
+            this.clsObserver.observe({ type: 'layout-shift', buffered: true });
+        }
+        catch (e) {
+            console.warn('[GlobalDevBar] CLS PerformanceObserver not supported', e);
+        }
+        // INP Observer (Interaction to Next Paint)
+        try {
+            this.inpObserver = new PerformanceObserver((list) => {
+                for (const entry of list.getEntries()) {
+                    const eventEntry = entry;
+                    if (eventEntry.duration && eventEntry.duration > this.inpValue) {
+                        this.inpValue = eventEntry.duration;
+                        this.debug.perf('INP updated', { inp: this.inpValue });
+                        updatePerfStats();
+                    }
+                }
+            });
+            // durationThreshold filters out very short interactions
+            this.inpObserver.observe({ type: 'event', buffered: true, durationThreshold: 16 });
+        }
+        catch (e) {
+            console.warn('[GlobalDevBar] INP PerformanceObserver not supported', e);
+        }
     }
     setupKeyboardShortcuts() {
         this.keydownHandler = (e) => {
-            // Close modals on Escape
+            // Close modals/popovers on Escape
             if (e.key === 'Escape') {
-                if (this.consoleFilter || this.showOutlineModal || this.showSchemaModal || this.showDesignReviewConfirm) {
+                if (this.showSettingsPopover) {
+                    this.showSettingsPopover = false;
+                    this.render();
+                    return;
+                }
+                if (this.consoleFilter ||
+                    this.showOutlineModal ||
+                    this.showSchemaModal ||
+                    this.showDesignReviewConfirm) {
                     this.consoleFilter = null;
                     this.showOutlineModal = false;
                     this.showSchemaModal = false;
@@ -552,6 +698,12 @@ export class GlobalDevBar {
                 }
             }
             if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
+                // Cmd/Ctrl+Shift+M: Toggle compact mode
+                if (e.key === 'M' || e.key === 'm') {
+                    e.preventDefault();
+                    this.toggleCompactMode();
+                    return;
+                }
                 if (e.key === 'S' || e.key === 's') {
                     e.preventDefault();
                     if (this.sweetlinkConnected && !this.capturing) {
@@ -571,6 +723,69 @@ export class GlobalDevBar {
         };
         window.addEventListener('keydown', this.keydownHandler);
     }
+    setupTheme() {
+        // Load stored theme preference
+        this.themeMode = getStoredThemeMode();
+        this.debug.state('Theme loaded', { mode: this.themeMode });
+        // Listen for system theme changes
+        if (typeof window !== 'undefined' && window.matchMedia) {
+            this.themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            this.themeMediaHandler = () => {
+                if (this.themeMode === 'system') {
+                    this.debug.state('System theme changed', {
+                        effectiveTheme: getEffectiveTheme(this.themeMode),
+                    });
+                    this.render();
+                }
+            };
+            this.themeMediaQuery.addEventListener('change', this.themeMediaHandler);
+        }
+    }
+    loadCompactMode() {
+        if (typeof localStorage === 'undefined')
+            return;
+        const stored = localStorage.getItem(STORAGE_KEYS.compactMode);
+        this.compactMode = stored === 'true';
+        this.debug.state('Compact mode loaded', { compactMode: this.compactMode });
+    }
+    /**
+     * Get the current theme mode
+     */
+    getThemeMode() {
+        return this.themeMode;
+    }
+    /**
+     * Set the theme mode
+     */
+    setThemeMode(mode) {
+        this.themeMode = mode;
+        setStoredThemeMode(mode);
+        this.debug.state('Theme mode changed', { mode, effectiveTheme: getEffectiveTheme(mode) });
+        this.render();
+    }
+    /**
+     * Get the current effective theme colors
+     */
+    getColors() {
+        return getThemeColors(this.themeMode);
+    }
+    /**
+     * Toggle compact mode
+     */
+    toggleCompactMode() {
+        this.compactMode = !this.compactMode;
+        if (typeof localStorage !== 'undefined') {
+            localStorage.setItem(STORAGE_KEYS.compactMode, String(this.compactMode));
+        }
+        this.debug.state('Compact mode toggled', { compactMode: this.compactMode });
+        this.render();
+    }
+    /**
+     * Check if compact mode is enabled
+     */
+    isCompactMode() {
+        return this.compactMode;
+    }
     async copyPathToClipboard(path) {
         try {
             await navigator.clipboard.writeText(path);
@@ -604,7 +819,7 @@ export class GlobalDevBar {
                 allowTaint: true,
                 scale: SCREENSHOT_SCALE,
                 width: window.innerWidth,
-                windowWidth: window.innerWidth
+                windowWidth: window.innerWidth,
             });
             // Restore page state
             cleanup();
@@ -626,8 +841,33 @@ export class GlobalDevBar {
                 }
             }
             else {
-                const dataUrl = canvasToDataUrl(canvas, { format: 'jpeg', quality: DEVBAR_SCREENSHOT_QUALITY });
+                const dataUrl = canvasToDataUrl(canvas, {
+                    format: 'jpeg',
+                    quality: DEVBAR_SCREENSHOT_QUALITY,
+                });
                 if (this.ws?.readyState === WebSocket.OPEN) {
+                    // Include web vitals metrics
+                    const webVitals = {};
+                    if (this.lcpValue !== null)
+                        webVitals.lcp = Math.round(this.lcpValue);
+                    if (this.clsValue > 0)
+                        webVitals.cls = this.clsValue;
+                    if (this.inpValue > 0)
+                        webVitals.inp = Math.round(this.inpValue);
+                    // Get FCP from performance entries
+                    const fcpEntry = performance
+                        .getEntriesByType('paint')
+                        .find((e) => e.name === 'first-contentful-paint');
+                    if (fcpEntry)
+                        webVitals.fcp = Math.round(fcpEntry.startTime);
+                    // Calculate page size
+                    let pageSize = 0;
+                    const navEntry = performance.getEntriesByType('navigation')[0];
+                    if (navEntry)
+                        pageSize += navEntry.transferSize || 0;
+                    performance.getEntriesByType('resource').forEach((entry) => {
+                        pageSize += entry.transferSize || 0;
+                    });
                     this.ws.send(JSON.stringify({
                         type: 'save-screenshot',
                         data: {
@@ -636,8 +876,10 @@ export class GlobalDevBar {
                             height: canvas.height,
                             logs: this.consoleLogs,
                             url: window.location.href,
-                            timestamp: Date.now()
-                        }
+                            timestamp: Date.now(),
+                            webVitals: Object.keys(webVitals).length > 0 ? webVitals : undefined,
+                            pageSize: pageSize > 0 ? pageSize : undefined,
+                        },
                     }));
                 }
             }
@@ -672,7 +914,7 @@ export class GlobalDevBar {
                 allowTaint: true,
                 scale: 1, // Full quality for design review
                 width: window.innerWidth,
-                windowWidth: window.innerWidth
+                windowWidth: window.innerWidth,
             });
             // Restore page state
             cleanup();
@@ -687,8 +929,8 @@ export class GlobalDevBar {
                         height: canvas.height,
                         logs: this.consoleLogs,
                         url: window.location.href,
-                        timestamp: Date.now()
-                    }
+                        timestamp: Date.now(),
+                    },
                 }));
             }
         }
@@ -783,8 +1025,8 @@ export class GlobalDevBar {
                     markdown,
                     url: window.location.href,
                     title: document.title,
-                    timestamp: Date.now()
-                }
+                    timestamp: Date.now(),
+                },
             }));
         }
     }
@@ -799,8 +1041,8 @@ export class GlobalDevBar {
                     markdown,
                     url: window.location.href,
                     title: document.title,
-                    timestamp: Date.now()
-                }
+                    timestamp: Date.now(),
+                },
             }));
         }
     }
@@ -831,6 +1073,9 @@ export class GlobalDevBar {
         if (this.collapsed) {
             this.renderCollapsed();
         }
+        else if (this.compactMode) {
+            this.renderCompact();
+        }
         else {
             this.renderExpanded();
         }
@@ -860,6 +1105,10 @@ export class GlobalDevBar {
         if (this.showDesignReviewConfirm) {
             this.renderDesignReviewConfirmModal();
         }
+        // Render settings popover
+        if (this.showSettingsPopover) {
+            this.renderSettingsPopover();
+        }
     }
     renderDesignReviewConfirmModal() {
         const color = BUTTON_COLORS.review;
@@ -883,7 +1132,12 @@ export class GlobalDevBar {
         Object.assign(title.style, { color, fontSize: '0.875rem', fontWeight: '600' });
         title.textContent = 'AI Design Review';
         header.appendChild(title);
-        const closeBtn = createStyledButton({ color: COLORS.textMuted, text: '×', padding: '0', fontSize: '1.25rem' });
+        const closeBtn = createStyledButton({
+            color: COLORS.textMuted,
+            text: '×',
+            padding: '0',
+            fontSize: '1.25rem',
+        });
         closeBtn.style.border = 'none';
         closeBtn.onclick = closeModal;
         header.appendChild(closeBtn);
@@ -915,7 +1169,11 @@ export class GlobalDevBar {
             padding: '14px 18px',
             borderTop: `1px solid ${COLORS.border}`,
         });
-        const cancelBtn = createStyledButton({ color: COLORS.textMuted, text: 'Cancel', padding: '8px 16px' });
+        const cancelBtn = createStyledButton({
+            color: COLORS.textMuted,
+            text: 'Cancel',
+            padding: '8px 16px',
+        });
         cancelBtn.onclick = closeModal;
         footer.appendChild(cancelBtn);
         if (this.apiKeyStatus?.configured) {
@@ -938,7 +1196,11 @@ export class GlobalDevBar {
         const instructions = document.createElement('div');
         Object.assign(instructions.style, { marginBottom: '12px' });
         const instructTitle = document.createElement('div');
-        Object.assign(instructTitle.style, { color: COLORS.textSecondary, fontWeight: '600', marginBottom: '8px' });
+        Object.assign(instructTitle.style, {
+            color: COLORS.textSecondary,
+            fontWeight: '600',
+            marginBottom: '8px',
+        });
         instructTitle.textContent = 'To configure:';
         instructions.appendChild(instructTitle);
         const steps = [
@@ -998,7 +1260,11 @@ export class GlobalDevBar {
         // Model info
         if (this.apiKeyStatus?.model) {
             const modelDiv = document.createElement('div');
-            Object.assign(modelDiv.style, { color: COLORS.textMuted, fontSize: '0.6875rem', marginTop: '12px' });
+            Object.assign(modelDiv.style, {
+                color: COLORS.textMuted,
+                fontSize: '0.6875rem',
+                marginTop: '12px',
+            });
             modelDiv.textContent = `Model: ${this.apiKeyStatus.model}`;
             if (this.apiKeyStatus.maskedKey) {
                 modelDiv.textContent += ` | Key: ${this.apiKeyStatus.maskedKey}`;
@@ -1011,7 +1277,7 @@ export class GlobalDevBar {
         const filterType = this.consoleFilter;
         if (!filterType)
             return;
-        const logs = earlyConsoleCapture.logs.filter(log => log.level === filterType);
+        const logs = earlyConsoleCapture.logs.filter((log) => log.level === filterType);
         const color = filterType === 'error' ? BUTTON_COLORS.error : BUTTON_COLORS.warning;
         const label = filterType === 'error' ? 'Errors' : 'Warnings';
         const popup = document.createElement('div');
@@ -1120,7 +1386,8 @@ export class GlobalDevBar {
                 wordBreak: 'break-word',
                 whiteSpace: 'pre-wrap',
             });
-            message.textContent = log.message.length > 500 ? log.message.slice(0, 500) + '...' : log.message;
+            message.textContent =
+                log.message.length > 500 ? `${log.message.slice(0, 500)}...` : log.message;
             logItem.appendChild(message);
             container.appendChild(logItem);
         });
@@ -1192,7 +1459,7 @@ export class GlobalDevBar {
                 fontSize: '0.6875rem',
                 marginLeft: '8px',
             });
-            const truncatedText = node.text.length > 60 ? node.text.slice(0, 60) + '...' : node.text;
+            const truncatedText = node.text.length > 60 ? `${node.text.slice(0, 60)}...` : node.text;
             textSpan.textContent = truncatedText;
             nodeEl.appendChild(textSpan);
             if (node.id) {
@@ -1325,7 +1592,7 @@ export class GlobalDevBar {
             punct: COLORS.textMuted, // gray
         };
         // Simple tokenizer for JSON using matchAll for safety
-        const tokenPattern = /("(?:\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|(\btrue\b|\bfalse\b)|(\bnull\b)|(-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)|([{}\[\],])|(\s+)/g;
+        const tokenPattern = /("(?:\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|(\btrue\b|\bfalse\b)|(\bnull\b)|(-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)|([{}[\],])|(\s+)/g;
         for (const match of json.matchAll(tokenPattern)) {
             const [, str, colon, bool, nullToken, num, punct, whitespace] = match;
             if (whitespace) {
@@ -1412,23 +1679,366 @@ export class GlobalDevBar {
             container.appendChild(row);
         }
     }
-    renderCollapsed() {
+    /**
+     * Render compact mode - single row with essential controls only
+     * Shows: connection dot, error/warn badges, screenshot button, settings gear
+     */
+    renderCompact() {
         if (!this.container)
             return;
         const { position, accentColor } = this.options;
         const { errorCount, warningCount } = this.getLogCounts();
-        // Calculate position so the collapsed dot aligns with where it appears in expanded state
-        // Expanded: left:80 + border:1 + padding:12 + half-indicator:6 = 99px horizontal center
-        // Expanded: bottom:20 + border:1 + padding:8 + half-row-height:11 = 40px vertical center (approx)
-        // Collapsed circle diameter: 26px, so offset by 13px from center
-        const collapsedPositions = {
-            'bottom-left': { bottom: '27px', left: '86px' },
-            'bottom-right': { bottom: '27px', right: '29px' },
-            'top-left': { top: '27px', left: '86px' },
-            'top-right': { top: '27px', right: '29px' },
-            'bottom-center': { bottom: '19px', left: '50%', transform: 'translateX(-50%)' },
+        const positionStyles = {
+            'bottom-left': { bottom: '20px', left: '80px' },
+            'bottom-right': { bottom: '20px', right: '16px' },
+            'top-left': { top: '20px', left: '80px' },
+            'top-right': { top: '20px', right: '16px' },
+            'bottom-center': { bottom: '12px', left: '50%', transform: 'translateX(-50%)' },
         };
-        const posStyle = collapsedPositions[position] ?? collapsedPositions['bottom-left'];
+        const posStyle = positionStyles[position] ?? positionStyles['bottom-left'];
+        const wrapper = this.container;
+        // Reset position properties first
+        wrapper.style.top = '';
+        wrapper.style.bottom = '';
+        wrapper.style.left = '';
+        wrapper.style.right = '';
+        wrapper.style.transform = '';
+        Object.assign(wrapper.style, {
+            position: 'fixed',
+            ...posStyle,
+            zIndex: '9999',
+            backgroundColor: 'rgba(17, 24, 39, 0.95)',
+            border: `1px solid ${accentColor}`,
+            borderRadius: '20px',
+            color: accentColor,
+            boxShadow: `0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px ${accentColor}1A`,
+            backdropFilter: 'blur(8px)',
+            WebkitBackdropFilter: 'blur(8px)',
+            padding: '6px 10px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            fontFamily: FONT_MONO,
+            fontSize: '0.6875rem',
+        });
+        // Connection indicator
+        const connIndicator = document.createElement('span');
+        connIndicator.className = this.tooltipClass('left', 'devbar-clickable');
+        connIndicator.setAttribute('data-tooltip', this.sweetlinkConnected ? 'Sweetlink connected' : 'Sweetlink disconnected');
+        Object.assign(connIndicator.style, {
+            width: '12px',
+            height: '12px',
+            borderRadius: '50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: 'pointer',
+        });
+        connIndicator.onclick = (e) => {
+            e.stopPropagation();
+            this.collapsed = true;
+            this.debug.state('Collapsed DevBar from compact mode');
+            this.render();
+        };
+        const connDot = document.createElement('span');
+        Object.assign(connDot.style, {
+            width: '6px',
+            height: '6px',
+            borderRadius: '50%',
+            backgroundColor: this.sweetlinkConnected ? COLORS.primary : COLORS.textMuted,
+            boxShadow: this.sweetlinkConnected ? `0 0 6px ${COLORS.primary}` : 'none',
+        });
+        connIndicator.appendChild(connDot);
+        wrapper.appendChild(connIndicator);
+        // Error badge
+        if (errorCount > 0) {
+            wrapper.appendChild(this.createConsoleBadge('error', errorCount, BUTTON_COLORS.error));
+        }
+        // Warning badge
+        if (warningCount > 0) {
+            wrapper.appendChild(this.createConsoleBadge('warn', warningCount, BUTTON_COLORS.warning));
+        }
+        // Screenshot button (if enabled)
+        if (this.options.showScreenshot) {
+            wrapper.appendChild(this.createScreenshotButton(accentColor));
+        }
+        // Settings gear button
+        wrapper.appendChild(this.createSettingsButton());
+        // Expand button (double-arrow)
+        const expandBtn = document.createElement('button');
+        expandBtn.type = 'button';
+        expandBtn.className = this.tooltipClass('right');
+        expandBtn.setAttribute('data-tooltip', 'Expand DevBar');
+        Object.assign(expandBtn.style, {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '18px',
+            height: '18px',
+            borderRadius: '50%',
+            border: `1px solid ${accentColor}60`,
+            backgroundColor: 'transparent',
+            color: `${accentColor}99`,
+            cursor: 'pointer',
+            fontSize: '0.5rem',
+            transition: 'all 150ms',
+        });
+        expandBtn.textContent = '⟫';
+        expandBtn.onmouseenter = () => {
+            expandBtn.style.backgroundColor = `${accentColor}20`;
+            expandBtn.style.borderColor = accentColor;
+            expandBtn.style.color = accentColor;
+        };
+        expandBtn.onmouseleave = () => {
+            expandBtn.style.backgroundColor = 'transparent';
+            expandBtn.style.borderColor = `${accentColor}60`;
+            expandBtn.style.color = `${accentColor}99`;
+        };
+        expandBtn.onclick = () => {
+            this.toggleCompactMode();
+        };
+        wrapper.appendChild(expandBtn);
+    }
+    /**
+     * Create the settings gear button
+     */
+    createSettingsButton() {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = this.tooltipClass('right');
+        btn.setAttribute('data-tooltip', 'Settings (Cmd+Shift+M: toggle compact)');
+        const isActive = this.showSettingsPopover;
+        const color = COLORS.textSecondary;
+        Object.assign(btn.style, {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '22px',
+            height: '22px',
+            minWidth: '22px',
+            minHeight: '22px',
+            flexShrink: '0',
+            borderRadius: '50%',
+            border: `1px solid ${isActive ? color : `${color}60`}`,
+            backgroundColor: isActive ? `${color}20` : 'transparent',
+            color: isActive ? color : `${color}99`,
+            cursor: 'pointer',
+            transition: 'all 150ms',
+        });
+        btn.onclick = () => {
+            this.showSettingsPopover = !this.showSettingsPopover;
+            this.consoleFilter = null;
+            this.showOutlineModal = false;
+            this.showSchemaModal = false;
+            this.showDesignReviewConfirm = false;
+            this.render();
+        };
+        // Gear icon SVG
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('width', '12');
+        svg.setAttribute('height', '12');
+        svg.setAttribute('viewBox', '0 0 24 24');
+        svg.setAttribute('fill', 'none');
+        svg.setAttribute('stroke', 'currentColor');
+        svg.setAttribute('stroke-width', '2');
+        svg.setAttribute('stroke-linecap', 'round');
+        svg.setAttribute('stroke-linejoin', 'round');
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', 'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z');
+        svg.appendChild(path);
+        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        circle.setAttribute('cx', '12');
+        circle.setAttribute('cy', '12');
+        circle.setAttribute('r', '3');
+        svg.appendChild(circle);
+        btn.appendChild(svg);
+        return btn;
+    }
+    /**
+     * Render the settings popover
+     */
+    renderSettingsPopover() {
+        const { position, accentColor } = this.options;
+        const color = COLORS.textSecondary;
+        const popover = document.createElement('div');
+        popover.setAttribute('data-devbar', 'true');
+        // Position based on devbar position
+        const isTop = position.startsWith('top');
+        const isRight = position.includes('right');
+        Object.assign(popover.style, {
+            position: 'fixed',
+            [isTop ? 'top' : 'bottom']: isTop ? '70px' : '70px',
+            [isRight ? 'right' : 'left']: isRight ? '16px' : '80px',
+            zIndex: '10003',
+            backgroundColor: 'rgba(17, 24, 39, 0.98)',
+            border: `1px solid ${accentColor}`,
+            borderRadius: '8px',
+            boxShadow: `0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px ${accentColor}33`,
+            backdropFilter: 'blur(8px)',
+            WebkitBackdropFilter: 'blur(8px)',
+            minWidth: '200px',
+            fontFamily: FONT_MONO,
+        });
+        // Header
+        const header = document.createElement('div');
+        Object.assign(header.style, {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '10px 14px',
+            borderBottom: `1px solid ${accentColor}30`,
+        });
+        const title = document.createElement('span');
+        Object.assign(title.style, { color: accentColor, fontSize: '0.75rem', fontWeight: '600' });
+        title.textContent = 'Settings';
+        header.appendChild(title);
+        const closeBtn = createStyledButton({
+            color: COLORS.textMuted,
+            text: '×',
+            padding: '2px 6px',
+            fontSize: '0.875rem',
+        });
+        closeBtn.style.border = 'none';
+        closeBtn.onclick = () => {
+            this.showSettingsPopover = false;
+            this.render();
+        };
+        header.appendChild(closeBtn);
+        popover.appendChild(header);
+        // Theme section
+        const themeSection = document.createElement('div');
+        Object.assign(themeSection.style, { padding: '10px 14px', borderBottom: `1px solid ${color}20` });
+        const themeSectionTitle = document.createElement('div');
+        Object.assign(themeSectionTitle.style, {
+            color,
+            fontSize: '0.625rem',
+            textTransform: 'uppercase',
+            letterSpacing: '0.1em',
+            marginBottom: '8px',
+        });
+        themeSectionTitle.textContent = 'Theme';
+        themeSection.appendChild(themeSectionTitle);
+        const themeOptions = document.createElement('div');
+        Object.assign(themeOptions.style, { display: 'flex', gap: '6px' });
+        const themeModes = ['system', 'dark', 'light'];
+        themeModes.forEach((mode) => {
+            const btn = document.createElement('button');
+            const isActive = this.themeMode === mode;
+            Object.assign(btn.style, {
+                padding: '4px 10px',
+                backgroundColor: isActive ? `${accentColor}20` : 'transparent',
+                border: `1px solid ${isActive ? accentColor : `${color}40`}`,
+                borderRadius: '4px',
+                color: isActive ? accentColor : color,
+                fontSize: '0.625rem',
+                cursor: 'pointer',
+                textTransform: 'capitalize',
+                transition: 'all 150ms',
+            });
+            btn.textContent = mode;
+            btn.onclick = () => {
+                this.setThemeMode(mode);
+            };
+            themeOptions.appendChild(btn);
+        });
+        themeSection.appendChild(themeOptions);
+        popover.appendChild(themeSection);
+        // Display section
+        const displaySection = document.createElement('div');
+        Object.assign(displaySection.style, { padding: '10px 14px' });
+        const displaySectionTitle = document.createElement('div');
+        Object.assign(displaySectionTitle.style, {
+            color,
+            fontSize: '0.625rem',
+            textTransform: 'uppercase',
+            letterSpacing: '0.1em',
+            marginBottom: '8px',
+        });
+        displaySectionTitle.textContent = 'Display';
+        displaySection.appendChild(displaySectionTitle);
+        // Compact mode toggle
+        const compactRow = document.createElement('div');
+        Object.assign(compactRow.style, {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+        });
+        const compactLabel = document.createElement('span');
+        Object.assign(compactLabel.style, { color: COLORS.text, fontSize: '0.6875rem' });
+        compactLabel.textContent = 'Compact Mode';
+        compactRow.appendChild(compactLabel);
+        // Toggle switch
+        const toggle = document.createElement('button');
+        const isCompact = this.compactMode;
+        Object.assign(toggle.style, {
+            width: '32px',
+            height: '18px',
+            borderRadius: '9px',
+            border: 'none',
+            backgroundColor: isCompact ? accentColor : `${color}40`,
+            position: 'relative',
+            cursor: 'pointer',
+            transition: 'all 150ms',
+        });
+        const toggleKnob = document.createElement('span');
+        Object.assign(toggleKnob.style, {
+            position: 'absolute',
+            top: '2px',
+            left: isCompact ? '16px' : '2px',
+            width: '14px',
+            height: '14px',
+            borderRadius: '50%',
+            backgroundColor: '#fff',
+            transition: 'left 150ms',
+        });
+        toggle.appendChild(toggleKnob);
+        toggle.onclick = () => {
+            this.toggleCompactMode();
+        };
+        compactRow.appendChild(toggle);
+        displaySection.appendChild(compactRow);
+        // Keyboard shortcut hint
+        const shortcutHint = document.createElement('div');
+        Object.assign(shortcutHint.style, {
+            color: COLORS.textMuted,
+            fontSize: '0.5625rem',
+            marginTop: '6px',
+        });
+        shortcutHint.textContent = 'Keyboard: Cmd+Shift+M';
+        displaySection.appendChild(shortcutHint);
+        popover.appendChild(displaySection);
+        this.overlayElement = popover;
+        document.body.appendChild(popover);
+    }
+    renderCollapsed() {
+        if (!this.container)
+            return;
+        const { position, accentColor } = this.options;
+        const { errorCount, warningCount } = this.getLogCounts();
+        // Use captured dot position if available, otherwise fall back to preset positions
+        // The 13px offset accounts for half the collapsed circle diameter (26px / 2)
+        let posStyle;
+        if (this.lastDotPosition) {
+            // Position based on where the dot actually was
+            const isTop = position.startsWith('top');
+            posStyle = isTop
+                ? { top: `${this.lastDotPosition.top - 13}px`, left: `${this.lastDotPosition.left - 13}px` }
+                : {
+                    bottom: `${this.lastDotPosition.bottom - 13}px`,
+                    left: `${this.lastDotPosition.left - 13}px`,
+                };
+        }
+        else {
+            // Fallback preset positions for when no dot position was captured
+            const collapsedPositions = {
+                'bottom-left': { bottom: '27px', left: '86px' },
+                'bottom-right': { bottom: '27px', right: '29px' },
+                'top-left': { top: '27px', left: '86px' },
+                'top-right': { top: '27px', right: '29px' },
+                'bottom-center': { bottom: '19px', left: '50%', transform: 'translateX(-50%)' },
+            };
+            posStyle = collapsedPositions[position] ?? collapsedPositions['bottom-left'];
+        }
         const wrapper = this.container;
         wrapper.className = this.tooltipClass('left', 'devbar-collapse');
         wrapper.setAttribute('data-tooltip', `Click to expand DevBar${this.sweetlinkConnected ? ' (Sweetlink connected)' : ' (Sweetlink not connected)'}${errorCount > 0 ? `\n${errorCount} console error${errorCount === 1 ? '' : 's'}` : ''}`);
@@ -1456,10 +2066,11 @@ export class GlobalDevBar {
             width: '26px',
             height: '26px',
             boxSizing: 'border-box',
-            animation: 'devbar-collapse 150ms ease-out'
+            animation: 'devbar-collapse 150ms ease-out',
         });
         wrapper.onclick = () => {
             this.collapsed = false;
+            this.debug.state('Expanded DevBar');
             this.render();
         };
         // Connection indicator dot (same size as in expanded state)
@@ -1469,7 +2080,7 @@ export class GlobalDevBar {
             height: '6px',
             borderRadius: '50%',
             backgroundColor: this.sweetlinkConnected ? COLORS.primary : COLORS.textMuted,
-            boxShadow: this.sweetlinkConnected ? `0 0 6px ${COLORS.primary}` : 'none'
+            boxShadow: this.sweetlinkConnected ? `0 0 6px ${COLORS.primary}` : 'none',
         });
         wrapper.appendChild(dot);
         // Error badge (absolute, top-right of circle, shifted left if warning badge exists)
@@ -1524,10 +2135,21 @@ export class GlobalDevBar {
             width: sizeOverrides?.width ?? defaultWidth,
             maxWidth: sizeOverrides?.maxWidth ?? defaultMaxWidth,
             minWidth: sizeOverrides?.minWidth ?? defaultMinWidth,
-            cursor: 'default'
+            cursor: 'default',
         });
         wrapper.ondblclick = () => {
+            // Capture dot position before collapsing
+            const dotEl = wrapper.querySelector('.devbar-status span span');
+            if (dotEl) {
+                const rect = dotEl.getBoundingClientRect();
+                this.lastDotPosition = {
+                    left: rect.left + rect.width / 2,
+                    top: rect.top + rect.height / 2,
+                    bottom: window.innerHeight - (rect.top + rect.height / 2),
+                };
+            }
             this.collapsed = true;
+            this.debug.state('Collapsed DevBar (double-click)');
             this.render();
         };
         // Main row - wrapping controlled by CSS media query
@@ -1544,12 +2166,14 @@ export class GlobalDevBar {
             boxSizing: 'border-box',
             fontFamily: FONT_MONO,
             fontSize: '0.6875rem',
-            lineHeight: '1rem'
+            lineHeight: '1rem',
         });
         // Connection indicator (click to collapse)
         const connIndicator = document.createElement('span');
         connIndicator.className = this.tooltipClass('left', 'devbar-clickable');
-        connIndicator.setAttribute('data-tooltip', this.sweetlinkConnected ? 'Sweetlink connected (click to minimize)' : 'Sweetlink disconnected (click to minimize)');
+        connIndicator.setAttribute('data-tooltip', this.sweetlinkConnected
+            ? 'Sweetlink connected (click to minimize)'
+            : 'Sweetlink disconnected (click to minimize)');
         Object.assign(connIndicator.style, {
             width: '12px',
             height: '12px',
@@ -1559,11 +2183,19 @@ export class GlobalDevBar {
             alignItems: 'center',
             justifyContent: 'center',
             cursor: 'pointer',
-            flexShrink: '0'
+            flexShrink: '0',
         });
         connIndicator.onclick = (e) => {
             e.stopPropagation();
+            // Capture dot position before collapsing (connDot is the inner 6px dot)
+            const rect = connIndicator.getBoundingClientRect();
+            this.lastDotPosition = {
+                left: rect.left + rect.width / 2,
+                top: rect.top + rect.height / 2,
+                bottom: window.innerHeight - (rect.top + rect.height / 2),
+            };
             this.collapsed = true;
+            this.debug.state('Collapsed DevBar (connection dot click)');
             this.render();
         };
         const connDot = document.createElement('span');
@@ -1573,7 +2205,7 @@ export class GlobalDevBar {
             borderRadius: '50%',
             backgroundColor: this.sweetlinkConnected ? COLORS.primary : COLORS.textMuted,
             boxShadow: this.sweetlinkConnected ? `0 0 6px ${COLORS.primary}` : 'none',
-            transition: 'all 300ms'
+            transition: 'all 300ms',
         });
         connIndicator.appendChild(connDot);
         // Status row wrapper - keeps connection dot, info, and badges together
@@ -1584,7 +2216,7 @@ export class GlobalDevBar {
             alignItems: 'center',
             gap: '0.5rem',
             flexWrap: 'nowrap',
-            flexShrink: '0'
+            flexShrink: '0',
         });
         statusRow.appendChild(connIndicator);
         // Info section
@@ -1598,7 +2230,7 @@ export class GlobalDevBar {
             letterSpacing: '0.05em',
             flexShrink: '1',
             minWidth: '0',
-            overflow: 'visible'
+            overflow: 'visible',
         });
         // Breakpoint info
         if (showMetrics.breakpoint && this.breakpointInfo) {
@@ -1610,9 +2242,10 @@ export class GlobalDevBar {
             bpSpan.setAttribute('data-tooltip', `Tailwind Breakpoint: ${bp}\n${breakpointData?.label || ''}\n\nViewport: ${this.breakpointInfo.dimensions}\n\nBreakpoints:\nbase: <640px | sm: >=640px\nmd: >=768px | lg: >=1024px\nxl: >=1280px | 2xl: >=1536px`);
             let bpText = bp;
             if (bp !== 'base') {
-                bpText = bp === 'sm'
-                    ? `${bp} - ${this.breakpointInfo.dimensions.split('x')[0]}`
-                    : `${bp} - ${this.breakpointInfo.dimensions}`;
+                bpText =
+                    bp === 'sm'
+                        ? `${bp} - ${this.breakpointInfo.dimensions.split('x')[0]}`
+                        : `${bp} - ${this.breakpointInfo.dimensions}`;
             }
             bpSpan.textContent = bpText;
             infoSection.appendChild(bpSpan);
@@ -1643,6 +2276,24 @@ export class GlobalDevBar {
                 lcpSpan.textContent = `LCP ${this.perfStats.lcp}`;
                 infoSection.appendChild(lcpSpan);
             }
+            if (showMetrics.cls) {
+                addSeparator();
+                const clsSpan = document.createElement('span');
+                clsSpan.className = this.tooltipClass('left', 'devbar-item');
+                Object.assign(clsSpan.style, { opacity: '0.85', cursor: 'default' });
+                clsSpan.setAttribute('data-tooltip', 'Cumulative Layout Shift (CLS): Visual stability score.\nHigher values mean more unexpected layout shifts.\n\nGood: <0.1\nNeeds work: 0.1-0.25\nPoor: >0.25');
+                clsSpan.textContent = `CLS ${this.perfStats.cls}`;
+                infoSection.appendChild(clsSpan);
+            }
+            if (showMetrics.inp) {
+                addSeparator();
+                const inpSpan = document.createElement('span');
+                inpSpan.className = this.tooltipClass('left', 'devbar-item');
+                Object.assign(inpSpan.style, { opacity: '0.85', cursor: 'default' });
+                inpSpan.setAttribute('data-tooltip', 'Interaction to Next Paint (INP): Responsiveness to user input.\nMeasures the longest interaction delay.\n\nGood: <200ms\nNeeds work: 200-500ms\nPoor: >500ms');
+                inpSpan.textContent = `INP ${this.perfStats.inp}`;
+                infoSection.appendChild(inpSpan);
+            }
             if (showMetrics.pageSize) {
                 addSeparator();
                 const sizeSpan = document.createElement('span');
@@ -1673,6 +2324,7 @@ export class GlobalDevBar {
         actionsContainer.appendChild(this.createAIReviewButton());
         actionsContainer.appendChild(this.createOutlineButton());
         actionsContainer.appendChild(this.createSchemaButton());
+        actionsContainer.appendChild(this.createSettingsButton());
         mainRow.appendChild(actionsContainer);
         wrapper.appendChild(mainRow);
         // Render custom controls row if there are any
@@ -1690,7 +2342,7 @@ export class GlobalDevBar {
                 fontFamily: FONT_MONO,
                 fontSize: '0.6875rem',
             });
-            GlobalDevBar.customControls.forEach(control => {
+            GlobalDevBar.customControls.forEach((control) => {
                 const btn = document.createElement('button');
                 btn.type = 'button';
                 const color = control.variant === 'warning' ? BUTTON_COLORS.warning : accentColor;
@@ -1765,13 +2417,7 @@ export class GlobalDevBar {
         btn.type = 'button';
         btn.className = this.tooltipClass('right');
         const hasSuccessState = this.copiedToClipboard || this.copiedPath || this.lastScreenshot;
-        const tooltip = this.copiedToClipboard
-            ? 'Copied to clipboard!'
-            : this.copiedPath
-                ? 'Path copied to clipboard!'
-                : this.lastScreenshot
-                    ? `Screenshot saved!\n${this.lastScreenshot}\n\nClick to copy path`
-                    : `Screenshot\n\nClick: Save to file\nShift+Click: Copy to clipboard\n\nKeyboard:\nCmd/Ctrl+Shift+S: Save\nCmd/Ctrl+Shift+C: Copy${!this.sweetlinkConnected ? '\n\nWarning: Sweetlink not connected' : ''}`;
+        const tooltip = this.getScreenshotTooltip();
         btn.setAttribute('data-tooltip', tooltip);
         Object.assign(btn.style, {
             display: 'flex',
@@ -1789,7 +2435,7 @@ export class GlobalDevBar {
             color: hasSuccessState ? accentColor : `${accentColor}99`,
             cursor: !this.capturing ? 'pointer' : 'not-allowed',
             opacity: '1',
-            transition: 'all 150ms'
+            transition: 'all 150ms',
         });
         btn.disabled = this.capturing;
         btn.onclick = (e) => {
@@ -1835,17 +2481,47 @@ export class GlobalDevBar {
         }
         return btn;
     }
+    /**
+     * Get the tooltip text for the screenshot button based on current state
+     */
+    getScreenshotTooltip() {
+        if (this.copiedToClipboard) {
+            return 'Copied to clipboard!';
+        }
+        if (this.copiedPath) {
+            return 'Path copied to clipboard!';
+        }
+        if (this.lastScreenshot) {
+            return `Screenshot saved!\n${this.lastScreenshot}\n\nClick to copy path`;
+        }
+        const baseTooltip = `Screenshot\n\nClick: Save to file\nShift+Click: Copy to clipboard\n\nKeyboard:\nCmd/Ctrl+Shift+S: Save\nCmd/Ctrl+Shift+C: Copy`;
+        return this.sweetlinkConnected
+            ? baseTooltip
+            : `${baseTooltip}\n\nWarning: Sweetlink not connected`;
+    }
+    /**
+     * Get the tooltip text for the AI review button based on current state
+     */
+    getAIReviewTooltip() {
+        if (this.designReviewInProgress) {
+            return 'AI Design Review in progress...';
+        }
+        if (this.designReviewError) {
+            return `Design review failed:\n${this.designReviewError}`;
+        }
+        if (this.lastDesignReview) {
+            return `Design review saved to:\n${this.lastDesignReview}`;
+        }
+        const baseTooltip = `AI Design Review\n\nCaptures screenshot and sends to\nClaude for design analysis.\n\nRequires ANTHROPIC_API_KEY.`;
+        return this.sweetlinkConnected
+            ? baseTooltip
+            : `${baseTooltip}\n\nWarning: Sweetlink not connected`;
+    }
     createAIReviewButton() {
         const btn = document.createElement('button');
         btn.type = 'button';
         btn.className = this.tooltipClass('right');
-        const tooltip = this.designReviewInProgress
-            ? 'AI Design Review in progress...'
-            : this.designReviewError
-                ? `Design review failed:\n${this.designReviewError}`
-                : this.lastDesignReview
-                    ? `Design review saved to:\n${this.lastDesignReview}`
-                    : `AI Design Review\n\nCaptures screenshot and sends to\nClaude for design analysis.\n\nRequires ANTHROPIC_API_KEY.${!this.sweetlinkConnected ? '\n\nWarning: Sweetlink not connected' : ''}`;
+        const tooltip = this.getAIReviewTooltip();
         btn.setAttribute('data-tooltip', tooltip);
         const hasError = !!this.designReviewError;
         const isActive = this.designReviewInProgress || !!this.lastDesignReview || hasError;
@@ -1945,7 +2621,7 @@ export function initGlobalDevBar(options) {
     const existing = getGlobalInstance();
     if (existing) {
         // Check if already initialized with same position - skip re-init during HMR
-        const existingPosition = existing['options']?.position ?? 'bottom-left';
+        const existingPosition = existing.getPosition();
         const newPosition = options?.position ?? 'bottom-left';
         if (existingPosition === newPosition) {
             return existing;