@ytspar/devbar 1.0.0-canary.cdf7fa2 → 1.0.0-canary.db7454c

package/dist/GlobalDevBar.d.ts

@@ -46,6 +46,8 @@ export declare class GlobalDevBar {
     private apiKeyStatus;
     private lastOutline;
     private lastSchema;
+    private savingOutline;
+    private savingSchema;
     private consoleFilter;
     private showOutlineModal;
     private showSchemaModal;
@@ -55,6 +57,11 @@ export declare class GlobalDevBar {
     private clsValue;
     private inpValue;
     private reconnectAttempts;
+    private readonly currentAppPort;
+    private readonly baseWsPort;
+    private wsVerified;
+    private serverProjectDir;
+    private verificationTimeout;
     private lastDotPosition;
     private reconnectTimeout;
     private screenshotTimeout;

package/dist/GlobalDevBar.js

@@ -8,7 +8,7 @@
  * 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, getThemeColors, MAX_CONSOLE_LOGS, MAX_RECONNECT_ATTEMPTS, MAX_RECONNECT_DELAY_MS, SCREENSHOT_BLUR_DELAY_MS, SCREENSHOT_NOTIFICATION_MS, SCREENSHOT_SCALE, 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';
@@ -91,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;
@@ -101,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;
@@ -132,6 +137,17 @@ export class GlobalDevBar {
         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,
@@ -287,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
@@ -345,27 +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');
-            // Update settings manager with WebSocket connection
-            this.settingsManager.setWebSocket(ws);
-            this.settingsManager.setConnected(true);
+            this.debug.ws('WebSocket socket opened, awaiting server-info');
             ws.send(JSON.stringify({ type: 'browser-client-ready' }));
-            // Request settings from server
-            ws.send(JSON.stringify({ type: 'load-settings' }));
-            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);
             }
@@ -374,16 +447,25 @@ export class GlobalDevBar {
             }
         };
         ws.onclose = () => {
-            this.sweetlinkConnected = false;
-            this.settingsManager.setConnected(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 = () => {
@@ -579,6 +661,7 @@ export class GlobalDevBar {
                 }, durationMs);
                 break;
             case 'outline':
+                this.savingOutline = false;
                 this.lastOutline = path;
                 if (this.outlineTimeout)
                     clearTimeout(this.outlineTimeout);
@@ -588,6 +671,7 @@ export class GlobalDevBar {
                 }, durationMs);
                 break;
             case 'schema':
+                this.savingSchema = false;
                 this.lastSchema = path;
                 if (this.schemaTimeout)
                     clearTimeout(this.schemaTimeout);
@@ -787,6 +871,8 @@ export class GlobalDevBar {
             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),
                     });
@@ -813,6 +899,8 @@ export class GlobalDevBar {
     setThemeMode(mode) {
         this.themeMode = 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();
     }
@@ -1066,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: {
@@ -1082,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: {
@@ -1462,6 +1558,8 @@ export class GlobalDevBar {
             },
             onSave: () => this.handleSaveOutline(),
             sweetlinkConnected: this.sweetlinkConnected,
+            isSaving: this.savingOutline,
+            savedPath: this.lastOutline,
         });
         modal.appendChild(header);
         const content = createModalContent();
@@ -1548,6 +1646,8 @@ export class GlobalDevBar {
             },
             onSave: () => this.handleSaveSchema(),
             sweetlinkConnected: this.sweetlinkConnected,
+            isSaving: this.savingSchema,
+            savedPath: this.lastSchema,
         });
         modal.appendChild(header);
         const content = createModalContent();
@@ -1915,7 +2015,8 @@ export class GlobalDevBar {
         const isCompact = this.compactMode;
         const tooltip = isCompact ? 'Expand (Cmd+Shift+M)' : 'Compact (Cmd+Shift+M)';
         btn.setAttribute('data-tooltip', tooltip);
-        const color = COLORS.textSecondary;
+        const { accentColor } = this.options;
+        const iconColor = COLORS.textSecondary;
         Object.assign(btn.style, {
             display: 'flex',
             alignItems: 'center',
@@ -1926,21 +2027,21 @@ export class GlobalDevBar {
             minHeight: '22px',
             flexShrink: '0',
             borderRadius: '50%',
-            border: `1px solid ${color}60`,
+            border: `1px solid ${accentColor}60`,
             backgroundColor: 'transparent',
-            color: `${color}99`,
+            color: `${iconColor}99`,
             cursor: 'pointer',
             transition: 'all 150ms',
         });
         btn.onmouseenter = () => {
-            btn.style.borderColor = color;
-            btn.style.backgroundColor = `${color}20`;
-            btn.style.color = color;
+            btn.style.borderColor = accentColor;
+            btn.style.backgroundColor = `${accentColor}20`;
+            btn.style.color = iconColor;
         };
         btn.onmouseleave = () => {
-            btn.style.borderColor = `${color}60`;
+            btn.style.borderColor = `${accentColor}60`;
             btn.style.backgroundColor = 'transparent';
-            btn.style.color = `${color}99`;
+            btn.style.color = `${iconColor}99`;
         };
         btn.onclick = () => {
             this.toggleCompactMode();
@@ -1956,8 +2057,8 @@ export class GlobalDevBar {
         svg.setAttribute('stroke-linecap', 'round');
         svg.setAttribute('stroke-linejoin', 'round');
         const path = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
-        // Right chevron (>) when not compact, left chevron (<) when compact
-        path.setAttribute('points', isCompact ? '15 18 9 12 15 6' : '9 18 15 12 9 6');
+        // 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;

package/dist/constants.d.ts

@@ -11,8 +11,18 @@ export declare const MAX_RECONNECT_ATTEMPTS = 10;
 export declare const BASE_RECONNECT_DELAY_MS = 1000;
 /** Maximum delay between reconnection attempts (ms) */
 export declare const MAX_RECONNECT_DELAY_MS = 30000;
-/** Default WebSocket port for Sweetlink connection */
+/** Default WebSocket port for Sweetlink connection (legacy fallback) */
 export declare const WS_PORT = 9223;
+/** Port offset from app port to calculate WebSocket port (matches SweetlinkBridge) */
+export declare const WS_PORT_OFFSET = 6223;
+/** Maximum ports to try when scanning for matching server */
+export declare const MAX_PORT_RETRIES = 10;
+/** Delay between port scan attempts (ms) */
+export declare const PORT_RETRY_DELAY_MS = 100;
+/** Timeout for server-info verification (ms) */
+export declare const VERIFICATION_TIMEOUT_MS = 1000;
+/** Delay before restarting port scan from base after all ports fail (ms) */
+export declare const PORT_SCAN_RESTART_DELAY_MS = 3000;
 /** Duration to show screenshot notification (ms) */
 export declare const SCREENSHOT_NOTIFICATION_MS = 3000;
 /** Duration to show clipboard notification (ms) */

package/dist/constants.js

@@ -18,8 +18,18 @@ export const MAX_RECONNECT_DELAY_MS = 30000;
 // ============================================================================
 // WebSocket Settings
 // ============================================================================
-/** Default WebSocket port for Sweetlink connection */
+/** Default WebSocket port for Sweetlink connection (legacy fallback) */
 export const WS_PORT = 9223;
+/** Port offset from app port to calculate WebSocket port (matches SweetlinkBridge) */
+export const WS_PORT_OFFSET = 6223;
+/** Maximum ports to try when scanning for matching server */
+export const MAX_PORT_RETRIES = 10;
+/** Delay between port scan attempts (ms) */
+export const PORT_RETRY_DELAY_MS = 100;
+/** Timeout for server-info verification (ms) */
+export const VERIFICATION_TIMEOUT_MS = 1000;
+/** Delay before restarting port scan from base after all ports fail (ms) */
+export const PORT_SCAN_RESTART_DELAY_MS = 3000;
 // ============================================================================
 // Notification Durations
 // ============================================================================

package/dist/ui/modals.d.ts

@@ -13,6 +13,10 @@ export interface ModalConfig {
     onCopyMd: () => Promise<void>;
     onSave?: () => void;
     sweetlinkConnected: boolean;
+    /** Whether a save operation is in progress */
+    isSaving?: boolean;
+    /** Path where data was saved (shows confirmation) */
+    savedPath?: string | null;
 }
 /**
  * Create modal overlay with click-outside-to-close behavior

package/dist/ui/modals.js

@@ -34,7 +34,7 @@ export function createModalBox(color) {
  * Create modal header with title, copy/save/close buttons
  */
 export function createModalHeader(config) {
-    const { color, title, onClose, onCopyMd, onSave, sweetlinkConnected } = config;
+    const { color, title, onClose, onCopyMd, onSave, sweetlinkConnected, isSaving, savedPath } = config;
     const header = document.createElement('div');
     Object.assign(header.style, {
         display: 'flex',
@@ -42,6 +42,8 @@ export function createModalHeader(config) {
         justifyContent: 'space-between',
         padding: '16px 20px',
         borderBottom: `1px solid ${color}40`,
+        flexWrap: 'wrap',
+        gap: '8px',
     });
     const titleEl = document.createElement('h2');
     Object.assign(titleEl.style, {
@@ -53,7 +55,7 @@ export function createModalHeader(config) {
     titleEl.textContent = title;
     header.appendChild(titleEl);
     const headerButtons = document.createElement('div');
-    Object.assign(headerButtons.style, { display: 'flex', gap: '10px' });
+    Object.assign(headerButtons.style, { display: 'flex', gap: '10px', alignItems: 'center' });
     // Copy MD button
     const copyBtn = createStyledButton({ color, text: 'Copy MD' });
     copyBtn.onclick = async () => {
@@ -71,8 +73,17 @@ export function createModalHeader(config) {
     headerButtons.appendChild(copyBtn);
     // Save button (if Sweetlink connected)
     if (sweetlinkConnected && onSave) {
-        const saveBtn = createStyledButton({ color, text: 'Save' });
-        saveBtn.onclick = onSave;
+        const saveBtn = createStyledButton({
+            color,
+            text: isSaving ? 'Saving...' : 'Save',
+        });
+        if (isSaving) {
+            saveBtn.style.opacity = '0.6';
+            saveBtn.style.cursor = 'not-allowed';
+        }
+        else {
+            saveBtn.onclick = onSave;
+        }
         headerButtons.appendChild(saveBtn);
     }
     // Close button - use same padding as other buttons for consistent height
@@ -85,6 +96,39 @@ export function createModalHeader(config) {
     closeBtn.onclick = onClose;
     headerButtons.appendChild(closeBtn);
     header.appendChild(headerButtons);
+    // Show saved path confirmation below buttons
+    if (savedPath) {
+        const savedConfirm = document.createElement('div');
+        Object.assign(savedConfirm.style, {
+            width: '100%',
+            marginTop: '4px',
+            padding: '8px 12px',
+            backgroundColor: `${color}15`,
+            border: `1px solid ${color}30`,
+            borderRadius: '6px',
+            fontSize: '0.75rem',
+            color: color,
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
+        });
+        // Checkmark icon
+        const checkmark = document.createElement('span');
+        checkmark.textContent = '✓';
+        Object.assign(checkmark.style, { fontWeight: '600' });
+        savedConfirm.appendChild(checkmark);
+        // Path text
+        const pathText = document.createElement('span');
+        Object.assign(pathText.style, {
+            color: '#9ca3af',
+            fontFamily: 'monospace',
+            fontSize: '0.6875rem',
+            wordBreak: 'break-all',
+        });
+        pathText.textContent = `Saved to ${savedPath}`;
+        savedConfirm.appendChild(pathText);
+        header.appendChild(savedConfirm);
+    }
     return header;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ytspar/devbar",
-  "version": "1.0.0-canary.cdf7fa2",
+  "version": "1.0.0-canary.db7454c",
   "type": "module",
   "private": false,
   "description": "Development toolbar and utilities with Sweetlink integration - pure vanilla JS, no framework dependencies",