@ytspar/devbar 1.0.0-canary.bf42899 → 1.0.0-canary.c511f13

package/dist/GlobalDevBar.js

@@ -8,12 +8,14 @@
  * to avoid React dependency conflicts in host applications.
  */
 import * as html2canvasModule from 'html2canvas-pro';
-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 { BASE_RECONNECT_DELAY_MS, BUTTON_COLORS, CATEGORY_COLORS, CLIPBOARD_NOTIFICATION_MS, COLORS, DESIGN_REVIEW_NOTIFICATION_MS, DEVBAR_SCREENSHOT_QUALITY, FONT_MONO, getEffectiveTheme, getTheme, getThemeColors, injectThemeCSS, MAX_CONSOLE_LOGS, MAX_PORT_RETRIES, MAX_RECONNECT_ATTEMPTS, MAX_RECONNECT_DELAY_MS, PORT_RETRY_DELAY_MS, PORT_SCAN_RESTART_DELAY_MS, SCREENSHOT_BLUR_DELAY_MS, SCREENSHOT_NOTIFICATION_MS, SCREENSHOT_SCALE, TAILWIND_BREAKPOINTS, TOOLTIP_STYLES, VERIFICATION_TIMEOUT_MS, WS_PORT, WS_PORT_OFFSET, } from './constants.js';
 import { DebugLogger, normalizeDebugConfig } from './debug.js';
 import { extractDocumentOutline, outlineToMarkdown } from './outline.js';
 import { extractPageSchema, schemaToMarkdown } from './schema.js';
+import { ACCENT_COLOR_PRESETS, DEFAULT_SETTINGS, getSettingsManager, } from './settings.js';
 import { createEmptyMessage, createInfoBox, createModalBox, createModalContent, createModalHeader, createModalOverlay, createStyledButton, createSvgIcon, getButtonStyles, } from './ui/index.js';
 import { canvasToDataUrl, copyCanvasToClipboard, delay, formatArgs, prepareForCapture, } from './utils.js';
+export { ACCENT_COLOR_PRESETS, DEFAULT_SETTINGS, getSettingsManager } from './settings.js';
 const html2canvas = (html2canvasModule.default ??
     html2canvasModule);
 const earlyConsoleCapture = (() => {
@@ -89,6 +91,8 @@ export class GlobalDevBar {
         this.apiKeyStatus = null;
         this.lastOutline = null;
         this.lastSchema = null;
+        this.savingOutline = false;
+        this.savingSchema = false;
         this.consoleFilter = null;
         // Modal states
         this.showOutlineModal = false;
@@ -99,6 +103,9 @@ export class GlobalDevBar {
         this.clsValue = 0;
         this.inpValue = 0;
         this.reconnectAttempts = 0;
+        this.wsVerified = false;
+        this.serverProjectDir = null;
+        this.verificationTimeout = null;
         // Track the position of the connection indicator dot for smooth collapse
         this.lastDotPosition = null;
         this.reconnectTimeout = null;
@@ -128,6 +135,19 @@ export class GlobalDevBar {
         // Initialize debug config first so we can log during construction
         this.debugConfig = normalizeDebugConfig(options.debug);
         this.debug = new DebugLogger(this.debugConfig);
+        // Initialize settings manager
+        this.settingsManager = getSettingsManager();
+        // Calculate app port from URL for multi-instance support
+        if (typeof window !== 'undefined') {
+            this.currentAppPort =
+                parseInt(window.location.port, 10) || (window.location.protocol === 'https:' ? 443 : 80);
+            // Calculate expected WS port (appPort + port offset) like SweetlinkBridge does
+            this.baseWsPort = this.currentAppPort > 0 ? this.currentAppPort + WS_PORT_OFFSET : WS_PORT;
+        }
+        else {
+            this.currentAppPort = 0;
+            this.baseWsPort = WS_PORT;
+        }
         this.options = {
             position: options.position ?? 'bottom-left',
             accentColor: options.accentColor ?? COLORS.primary,
@@ -283,6 +303,8 @@ export class GlobalDevBar {
         this.reconnectAttempts = MAX_RECONNECT_ATTEMPTS; // Prevent reconnection
         if (this.reconnectTimeout)
             clearTimeout(this.reconnectTimeout);
+        if (this.verificationTimeout)
+            clearTimeout(this.verificationTimeout);
         if (this.ws)
             this.ws.close();
         // Clear timeouts
@@ -341,22 +363,82 @@ export class GlobalDevBar {
             document.head.appendChild(style);
         }
     }
-    connectWebSocket() {
+    connectWebSocket(port) {
         if (this.destroyed)
             return;
-        this.debug.ws('Connecting to WebSocket', { port: WS_PORT });
-        const ws = new WebSocket(`ws://localhost:${WS_PORT}`);
+        const targetPort = port ?? this.baseWsPort;
+        this.debug.ws('Connecting to WebSocket', { port: targetPort, appPort: this.currentAppPort });
+        const ws = new WebSocket(`ws://localhost:${targetPort}`);
         this.ws = ws;
+        this.wsVerified = false;
+        // Timeout for server-info verification
+        this.verificationTimeout = setTimeout(() => {
+            if (!this.wsVerified && ws.readyState === WebSocket.OPEN) {
+                // Server didn't send server-info (old version) - accept for backwards compatibility
+                this.debug.ws('Server is old version (no server-info), accepting for backwards compat');
+                this.wsVerified = true;
+                this.sweetlinkConnected = true;
+                this.reconnectAttempts = 0;
+                this.settingsManager.setWebSocket(ws);
+                this.settingsManager.setConnected(true);
+                ws.send(JSON.stringify({ type: 'load-settings' }));
+                this.render();
+            }
+        }, VERIFICATION_TIMEOUT_MS);
         ws.onopen = () => {
-            this.sweetlinkConnected = true;
-            this.reconnectAttempts = 0;
-            this.debug.ws('WebSocket connected');
+            this.debug.ws('WebSocket socket opened, awaiting server-info');
             ws.send(JSON.stringify({ type: 'browser-client-ready' }));
-            this.render();
         };
         ws.onmessage = async (event) => {
             try {
-                const command = JSON.parse(event.data);
+                const message = JSON.parse(event.data);
+                // Handle server-info for port matching
+                if (message.type === 'server-info') {
+                    if (this.verificationTimeout) {
+                        clearTimeout(this.verificationTimeout);
+                        this.verificationTimeout = null;
+                    }
+                    const serverAppPort = message.appPort;
+                    const serverMatchesApp = serverAppPort === null || serverAppPort === this.currentAppPort;
+                    if (!serverMatchesApp) {
+                        this.debug.ws('Server mismatch', {
+                            serverAppPort,
+                            currentAppPort: this.currentAppPort,
+                            tryingNextPort: targetPort + 1,
+                        });
+                        ws.close();
+                        // Try next port
+                        const nextPort = targetPort + 1;
+                        if (nextPort < this.baseWsPort + MAX_PORT_RETRIES) {
+                            setTimeout(() => this.connectWebSocket(nextPort), PORT_RETRY_DELAY_MS);
+                        }
+                        else {
+                            this.debug.ws('No matching server found, will retry from base port');
+                            setTimeout(() => this.connectWebSocket(this.baseWsPort), PORT_SCAN_RESTART_DELAY_MS);
+                        }
+                        return;
+                    }
+                    // Server matches - mark as verified and connected
+                    this.wsVerified = true;
+                    this.sweetlinkConnected = true;
+                    this.reconnectAttempts = 0;
+                    this.serverProjectDir = message.projectDir ?? null;
+                    this.debug.ws('Server verified', {
+                        appPort: serverAppPort ?? 'any',
+                        projectDir: this.serverProjectDir,
+                    });
+                    this.settingsManager.setWebSocket(ws);
+                    this.settingsManager.setConnected(true);
+                    ws.send(JSON.stringify({ type: 'load-settings' }));
+                    this.render();
+                    return;
+                }
+                // Ignore other commands until verified
+                if (!this.wsVerified) {
+                    this.debug.ws('Ignoring command before verification', { type: message.type });
+                    return;
+                }
+                const command = message;
                 this.debug.ws('Received command', { type: command.type });
                 await this.handleSweetlinkCommand(command);
             }
@@ -365,15 +447,25 @@ 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 * 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));
+            if (this.verificationTimeout) {
+                clearTimeout(this.verificationTimeout);
+                this.verificationTimeout = null;
+            }
+            // Only reset connection state if we were actually verified/connected
+            if (this.wsVerified) {
+                this.sweetlinkConnected = false;
+                this.wsVerified = false;
+                this.serverProjectDir = null;
+                this.settingsManager.setConnected(false);
+                this.debug.ws('WebSocket disconnected');
+                this.render();
+                // Auto-reconnect with exponential backoff (start from base port)
+                if (!this.destroyed && this.reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
+                    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(this.baseWsPort), Math.min(delayMs, MAX_RECONNECT_DELAY_MS));
+                }
             }
         };
         ws.onerror = () => {
@@ -500,8 +592,48 @@ export class GlobalDevBar {
             case 'schema-error':
                 console.error('[GlobalDevBar] Schema save failed:', command.error);
                 break;
+            case 'settings-loaded':
+                this.handleSettingsLoaded(command.settings);
+                break;
+            case 'settings-saved':
+                this.debug.state('Settings saved to server', { path: command.settingsPath });
+                break;
+            case 'settings-error':
+                console.error('[GlobalDevBar] Settings operation failed:', command.error);
+                break;
         }
     }
+    /**
+     * Handle settings loaded from server
+     */
+    handleSettingsLoaded(settings) {
+        if (!settings) {
+            this.debug.state('No server settings found, using local');
+            return;
+        }
+        this.debug.state('Settings loaded from server', settings);
+        // Update settings manager
+        this.settingsManager.handleSettingsLoaded(settings);
+        // Apply settings to local state
+        this.applySettings(settings);
+    }
+    /**
+     * Apply settings to the DevBar state and options
+     */
+    applySettings(settings) {
+        // Update local state
+        this.themeMode = settings.themeMode;
+        this.compactMode = settings.compactMode;
+        // Update options
+        this.options.position = settings.position;
+        this.options.accentColor = settings.accentColor;
+        this.options.showScreenshot = settings.showScreenshot;
+        this.options.showConsoleBadges = settings.showConsoleBadges;
+        this.options.showTooltips = settings.showTooltips;
+        this.options.showMetrics = { ...settings.showMetrics };
+        // Re-render with new settings
+        this.render();
+    }
     /**
      * Handle notification state updates with auto-clear timeout
      */
@@ -529,6 +661,7 @@ export class GlobalDevBar {
                 }, durationMs);
                 break;
             case 'outline':
+                this.savingOutline = false;
                 this.lastOutline = path;
                 if (this.outlineTimeout)
                     clearTimeout(this.outlineTimeout);
@@ -538,6 +671,7 @@ export class GlobalDevBar {
                 }, durationMs);
                 break;
             case 'schema':
+                this.savingSchema = false;
                 this.lastSchema = path;
                 if (this.schemaTimeout)
                     clearTimeout(this.schemaTimeout);
@@ -670,7 +804,11 @@ export class GlobalDevBar {
                 }
             });
             // durationThreshold filters out very short interactions
-            this.inpObserver.observe({ type: 'event', buffered: true, durationThreshold: 16 });
+            this.inpObserver.observe({
+                type: 'event',
+                buffered: true,
+                durationThreshold: 16,
+            });
         }
         catch (e) {
             console.warn('[GlobalDevBar] INP PerformanceObserver not supported', e);
@@ -724,14 +862,17 @@ export class GlobalDevBar {
         window.addEventListener('keydown', this.keydownHandler);
     }
     setupTheme() {
-        // Load stored theme preference
-        this.themeMode = getStoredThemeMode();
+        // Load stored theme preference from settings manager
+        const settings = this.settingsManager.getSettings();
+        this.themeMode = settings.themeMode;
         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') {
+                    // Re-inject theme CSS when system preference changes
+                    injectThemeCSS(getTheme(this.themeMode));
                     this.debug.state('System theme changed', {
                         effectiveTheme: getEffectiveTheme(this.themeMode),
                     });
@@ -742,10 +883,8 @@ export class GlobalDevBar {
         }
     }
     loadCompactMode() {
-        if (typeof localStorage === 'undefined')
-            return;
-        const stored = localStorage.getItem(STORAGE_KEYS.compactMode);
-        this.compactMode = stored === 'true';
+        const settings = this.settingsManager.getSettings();
+        this.compactMode = settings.compactMode;
         this.debug.state('Compact mode loaded', { compactMode: this.compactMode });
     }
     /**
@@ -759,7 +898,9 @@ export class GlobalDevBar {
      */
     setThemeMode(mode) {
         this.themeMode = mode;
-        setStoredThemeMode(mode);
+        this.settingsManager.saveSettings({ themeMode: mode });
+        // Inject the appropriate theme CSS variables
+        injectThemeCSS(getTheme(mode));
         this.debug.state('Theme mode changed', { mode, effectiveTheme: getEffectiveTheme(mode) });
         this.render();
     }
@@ -774,9 +915,7 @@ export class GlobalDevBar {
      */
     toggleCompactMode() {
         this.compactMode = !this.compactMode;
-        if (typeof localStorage !== 'undefined') {
-            localStorage.setItem(STORAGE_KEYS.compactMode, String(this.compactMode));
-        }
+        this.settingsManager.saveSettings({ compactMode: this.compactMode });
         this.debug.state('Compact mode toggled', { compactMode: this.compactMode });
         this.render();
     }
@@ -1015,9 +1154,13 @@ export class GlobalDevBar {
         this.render();
     }
     handleSaveOutline() {
+        if (this.savingOutline)
+            return; // Prevent repeated clicks
         const outline = extractDocumentOutline();
         const markdown = outlineToMarkdown(outline);
         if (this.ws?.readyState === WebSocket.OPEN) {
+            this.savingOutline = true;
+            this.render();
             this.ws.send(JSON.stringify({
                 type: 'save-outline',
                 data: {
@@ -1031,9 +1174,13 @@ export class GlobalDevBar {
         }
     }
     handleSaveSchema() {
+        if (this.savingSchema)
+            return; // Prevent repeated clicks
         const schema = extractPageSchema();
         const markdown = schemaToMarkdown(schema);
         if (this.ws?.readyState === WebSocket.OPEN) {
+            this.savingSchema = true;
+            this.render();
             this.ws.send(JSON.stringify({
                 type: 'save-schema',
                 data: {
@@ -1411,6 +1558,8 @@ export class GlobalDevBar {
             },
             onSave: () => this.handleSaveOutline(),
             sweetlinkConnected: this.sweetlinkConnected,
+            isSaving: this.savingOutline,
+            savedPath: this.lastOutline,
         });
         modal.appendChild(header);
         const content = createModalContent();
@@ -1497,6 +1646,8 @@ export class GlobalDevBar {
             },
             onSave: () => this.handleSaveSchema(),
             sweetlinkConnected: this.sweetlinkConnected,
+            isSaving: this.savingSchema,
+            savedPath: this.lastSchema,
         });
         modal.appendChild(header);
         const content = createModalContent();
@@ -1854,6 +2005,130 @@ export class GlobalDevBar {
         btn.appendChild(svg);
         return btn;
     }
+    /**
+     * Create the compact mode toggle button with chevron icon
+     */
+    createCompactToggleButton() {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = this.tooltipClass('right');
+        const isCompact = this.compactMode;
+        const tooltip = isCompact ? 'Expand (Cmd+Shift+M)' : 'Compact (Cmd+Shift+M)';
+        btn.setAttribute('data-tooltip', tooltip);
+        const { accentColor } = this.options;
+        const iconColor = 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 ${accentColor}60`,
+            backgroundColor: 'transparent',
+            color: `${iconColor}99`,
+            cursor: 'pointer',
+            transition: 'all 150ms',
+        });
+        btn.onmouseenter = () => {
+            btn.style.borderColor = accentColor;
+            btn.style.backgroundColor = `${accentColor}20`;
+            btn.style.color = iconColor;
+        };
+        btn.onmouseleave = () => {
+            btn.style.borderColor = `${accentColor}60`;
+            btn.style.backgroundColor = 'transparent';
+            btn.style.color = `${iconColor}99`;
+        };
+        btn.onclick = () => {
+            this.toggleCompactMode();
+        };
+        // Chevron icon SVG - points right when expanded, left when compact
+        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', 'polyline');
+        // Left chevron (<) when expanded to shrink, right chevron (>) when compact to expand
+        path.setAttribute('points', isCompact ? '9 18 15 12 9 6' : '15 18 9 12 15 6');
+        svg.appendChild(path);
+        btn.appendChild(svg);
+        return btn;
+    }
+    /**
+     * Create a settings section with title
+     */
+    createSettingsSection(title, hasBorder = true) {
+        const color = COLORS.textSecondary;
+        const section = document.createElement('div');
+        Object.assign(section.style, {
+            padding: '10px 14px',
+            borderBottom: hasBorder ? `1px solid ${color}20` : 'none',
+        });
+        const sectionTitle = document.createElement('div');
+        Object.assign(sectionTitle.style, {
+            color,
+            fontSize: '0.625rem',
+            textTransform: 'uppercase',
+            letterSpacing: '0.1em',
+            marginBottom: '8px',
+        });
+        sectionTitle.textContent = title;
+        section.appendChild(sectionTitle);
+        return section;
+    }
+    /**
+     * Create a toggle switch row
+     */
+    createToggleRow(label, checked, accentColor, onChange) {
+        const color = COLORS.textSecondary;
+        const row = document.createElement('div');
+        Object.assign(row.style, {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: '6px',
+        });
+        const labelEl = document.createElement('span');
+        Object.assign(labelEl.style, { color: COLORS.text, fontSize: '0.6875rem' });
+        labelEl.textContent = label;
+        row.appendChild(labelEl);
+        const toggle = document.createElement('button');
+        Object.assign(toggle.style, {
+            width: '32px',
+            height: '18px',
+            borderRadius: '9px',
+            border: 'none',
+            backgroundColor: checked ? accentColor : `${color}40`,
+            position: 'relative',
+            cursor: 'pointer',
+            transition: 'all 150ms',
+            flexShrink: '0',
+        });
+        const knob = document.createElement('span');
+        Object.assign(knob.style, {
+            position: 'absolute',
+            top: '2px',
+            left: checked ? '16px' : '2px',
+            width: '14px',
+            height: '14px',
+            borderRadius: '50%',
+            backgroundColor: '#fff',
+            transition: 'left 150ms',
+        });
+        toggle.appendChild(knob);
+        toggle.onclick = onChange;
+        row.appendChild(toggle);
+        return row;
+    }
     /**
      * Render the settings popover
      */
@@ -1876,7 +2151,10 @@ export class GlobalDevBar {
             boxShadow: `0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px ${accentColor}33`,
             backdropFilter: 'blur(8px)',
             WebkitBackdropFilter: 'blur(8px)',
-            minWidth: '200px',
+            minWidth: '240px',
+            maxWidth: '280px',
+            maxHeight: 'calc(100vh - 100px)',
+            overflowY: 'auto',
             fontFamily: FONT_MONO,
         });
         // Header
@@ -1887,6 +2165,10 @@ export class GlobalDevBar {
             justifyContent: 'space-between',
             padding: '10px 14px',
             borderBottom: `1px solid ${accentColor}30`,
+            position: 'sticky',
+            top: '0',
+            backgroundColor: 'rgba(17, 24, 39, 0.98)',
+            zIndex: '1',
         });
         const title = document.createElement('span');
         Object.assign(title.style, { color: accentColor, fontSize: '0.75rem', fontWeight: '600' });
@@ -1905,19 +2187,8 @@ export class GlobalDevBar {
         };
         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);
+        // ========== THEME SECTION ==========
+        const themeSection = this.createSettingsSection('Theme');
         const themeOptions = document.createElement('div');
         Object.assign(themeOptions.style, { display: 'flex', gap: '6px' });
         const themeModes = ['system', 'dark', 'light'];
@@ -1943,73 +2214,214 @@ export class GlobalDevBar {
         });
         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',
+        // ========== DISPLAY SECTION ==========
+        const displaySection = this.createSettingsSection('Display');
+        // Position mini-map selector
+        const positionRow = document.createElement('div');
+        Object.assign(positionRow.style, { marginBottom: '10px' });
+        const posLabel = document.createElement('div');
+        Object.assign(posLabel.style, {
+            color: COLORS.text,
+            fontSize: '0.6875rem',
+            marginBottom: '6px',
         });
-        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`,
+        posLabel.textContent = 'Position';
+        positionRow.appendChild(posLabel);
+        // Mini-map container
+        const miniMap = document.createElement('div');
+        Object.assign(miniMap.style, {
             position: 'relative',
-            cursor: 'pointer',
-            transition: 'all 150ms',
+            width: '100%',
+            height: '50px',
+            backgroundColor: 'rgba(10, 15, 26, 0.6)',
+            border: `1px solid ${color}30`,
+            borderRadius: '4px',
         });
-        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',
+        const positionConfigs = [
+            { value: 'top-left', style: { top: '8px', left: '10%' }, title: 'Top Left' },
+            { value: 'top-right', style: { top: '8px', right: '6%' }, title: 'Top Right' },
+            { value: 'bottom-left', style: { bottom: '8px', left: '10%' }, title: 'Bottom Left' },
+            { value: 'bottom-right', style: { bottom: '8px', right: '6%' }, title: 'Bottom Right' },
+            {
+                value: 'bottom-center',
+                style: { bottom: '6px', left: '50%', transform: 'translateX(-50%)' },
+                title: 'Bottom Center',
+            },
+        ];
+        positionConfigs.forEach(({ value, style, title }) => {
+            const indicator = document.createElement('button');
+            const isActive = this.options.position === value;
+            Object.assign(indicator.style, {
+                position: 'absolute',
+                width: '20px',
+                height: '6px',
+                backgroundColor: isActive ? accentColor : `${color}60`,
+                border: `1px solid ${isActive ? accentColor : `${color}40`}`,
+                borderRadius: '2px',
+                cursor: 'pointer',
+                padding: '0',
+                transition: 'all 150ms',
+                boxShadow: isActive ? `0 0 8px ${accentColor}60` : 'none',
+                ...style,
+            });
+            indicator.title = title;
+            indicator.onclick = () => {
+                this.options.position = value;
+                this.settingsManager.saveSettings({ position: value });
+                this.render();
+            };
+            // Hover effect
+            indicator.onmouseenter = () => {
+                if (!isActive) {
+                    indicator.style.backgroundColor = accentColor;
+                    indicator.style.borderColor = accentColor;
+                    indicator.style.boxShadow = `0 0 6px ${accentColor}40`;
+                }
+            };
+            indicator.onmouseleave = () => {
+                if (!isActive) {
+                    indicator.style.backgroundColor = `${color}60`;
+                    indicator.style.borderColor = `${color}40`;
+                    indicator.style.boxShadow = 'none';
+                }
+            };
+            miniMap.appendChild(indicator);
         });
-        toggle.appendChild(toggleKnob);
-        toggle.onclick = () => {
+        positionRow.appendChild(miniMap);
+        displaySection.appendChild(positionRow);
+        // Compact mode toggle
+        displaySection.appendChild(this.createToggleRow('Compact Mode', this.compactMode, accentColor, () => {
             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',
+            marginTop: '2px',
+            marginBottom: '8px',
         });
         shortcutHint.textContent = 'Keyboard: Cmd+Shift+M';
         displaySection.appendChild(shortcutHint);
+        // Accent color
+        const accentRow = document.createElement('div');
+        Object.assign(accentRow.style, { marginBottom: '6px' });
+        const accentLabel = document.createElement('div');
+        Object.assign(accentLabel.style, {
+            color: COLORS.text,
+            fontSize: '0.6875rem',
+            marginBottom: '6px',
+        });
+        accentLabel.textContent = 'Accent Color';
+        accentRow.appendChild(accentLabel);
+        const colorSwatches = document.createElement('div');
+        Object.assign(colorSwatches.style, {
+            display: 'flex',
+            gap: '6px',
+            flexWrap: 'wrap',
+        });
+        ACCENT_COLOR_PRESETS.forEach(({ name, value }) => {
+            const swatch = document.createElement('button');
+            const isActive = this.options.accentColor === value;
+            Object.assign(swatch.style, {
+                width: '24px',
+                height: '24px',
+                borderRadius: '50%',
+                backgroundColor: value,
+                border: isActive ? '2px solid #fff' : '2px solid transparent',
+                cursor: 'pointer',
+                transition: 'all 150ms',
+                boxShadow: isActive ? `0 0 8px ${value}` : 'none',
+            });
+            swatch.title = name;
+            swatch.onclick = () => {
+                this.options.accentColor = value;
+                this.settingsManager.saveSettings({ accentColor: value });
+                this.render();
+            };
+            colorSwatches.appendChild(swatch);
+        });
+        accentRow.appendChild(colorSwatches);
+        displaySection.appendChild(accentRow);
         popover.appendChild(displaySection);
+        // ========== FEATURES SECTION ==========
+        const featuresSection = this.createSettingsSection('Features');
+        featuresSection.appendChild(this.createToggleRow('Screenshot Button', this.options.showScreenshot, accentColor, () => {
+            this.options.showScreenshot = !this.options.showScreenshot;
+            this.settingsManager.saveSettings({ showScreenshot: this.options.showScreenshot });
+            this.render();
+        }));
+        featuresSection.appendChild(this.createToggleRow('Console Badges', this.options.showConsoleBadges, accentColor, () => {
+            this.options.showConsoleBadges = !this.options.showConsoleBadges;
+            this.settingsManager.saveSettings({ showConsoleBadges: this.options.showConsoleBadges });
+            this.render();
+        }));
+        featuresSection.appendChild(this.createToggleRow('Tooltips', this.options.showTooltips, accentColor, () => {
+            this.options.showTooltips = !this.options.showTooltips;
+            this.settingsManager.saveSettings({ showTooltips: this.options.showTooltips });
+            this.render();
+        }));
+        popover.appendChild(featuresSection);
+        // ========== METRICS SECTION ==========
+        const metricsSection = this.createSettingsSection('Metrics');
+        const metricsToggles = [
+            { key: 'breakpoint', label: 'Breakpoint' },
+            { key: 'fcp', label: 'FCP' },
+            { key: 'lcp', label: 'LCP' },
+            { key: 'cls', label: 'CLS' },
+            { key: 'inp', label: 'INP' },
+            { key: 'pageSize', label: 'Page Size' },
+        ];
+        metricsToggles.forEach(({ key, label }) => {
+            const currentValue = this.options.showMetrics[key] ?? true;
+            metricsSection.appendChild(this.createToggleRow(label, currentValue, accentColor, () => {
+                this.options.showMetrics[key] = !this.options.showMetrics[key];
+                this.settingsManager.saveSettings({
+                    showMetrics: {
+                        breakpoint: this.options.showMetrics.breakpoint ?? true,
+                        fcp: this.options.showMetrics.fcp ?? true,
+                        lcp: this.options.showMetrics.lcp ?? true,
+                        cls: this.options.showMetrics.cls ?? true,
+                        inp: this.options.showMetrics.inp ?? true,
+                        pageSize: this.options.showMetrics.pageSize ?? true,
+                    },
+                });
+                this.render();
+            }));
+        });
+        popover.appendChild(metricsSection);
+        // ========== RESET SECTION ==========
+        const resetSection = document.createElement('div');
+        Object.assign(resetSection.style, {
+            padding: '10px 14px',
+            borderTop: `1px solid ${color}20`,
+        });
+        const resetBtn = createStyledButton({
+            color: COLORS.textMuted,
+            text: 'Reset to Defaults',
+            padding: '6px 12px',
+            fontSize: '0.625rem',
+        });
+        Object.assign(resetBtn.style, {
+            width: '100%',
+            justifyContent: 'center',
+        });
+        resetBtn.onclick = () => {
+            this.resetToDefaults();
+        };
+        resetSection.appendChild(resetBtn);
+        popover.appendChild(resetSection);
         this.overlayElement = popover;
         document.body.appendChild(popover);
     }
+    /**
+     * Reset all settings to defaults
+     */
+    resetToDefaults() {
+        this.settingsManager.resetToDefaults();
+        const defaults = DEFAULT_SETTINGS;
+        this.applySettings(defaults);
+    }
     renderCollapsed() {
         if (!this.container)
             return;
@@ -2325,6 +2737,7 @@ export class GlobalDevBar {
         actionsContainer.appendChild(this.createOutlineButton());
         actionsContainer.appendChild(this.createSchemaButton());
         actionsContainer.appendChild(this.createSettingsButton());
+        actionsContainer.appendChild(this.createCompactToggleButton());
         mainRow.appendChild(actionsContainer);
         wrapper.appendChild(mainRow);
         // Render custom controls row if there are any