@lobehub/lobehub 2.0.0-next.242 → 2.0.0-next.243

package/apps/desktop/src/main/core/browser/Browser.ts

@@ -4,32 +4,27 @@ import {
   BrowserWindowConstructorOptions,
   session as electronSession,
   ipcMain,
-  nativeTheme,
   screen,
 } from 'electron';
 import console from 'node:console';
 import { join } from 'node:path';
 
-import { buildDir, preloadDir, resourcesDir } from '@/const/dir';
-import { isDev, isMac, isWindows } from '@/const/env';
+import { preloadDir, resourcesDir } from '@/const/dir';
+import { isMac } from '@/const/env';
 import { ELECTRON_BE_PROTOCOL_SCHEME } from '@/const/protocol';
-import {
-  BACKGROUND_DARK,
-  BACKGROUND_LIGHT,
-  SYMBOL_COLOR_DARK,
-  SYMBOL_COLOR_LIGHT,
-  THEME_CHANGE_DELAY,
-  TITLE_BAR_HEIGHT,
-} from '@/const/theme';
 import RemoteServerConfigCtr from '@/controllers/RemoteServerConfigCtr';
 import { backendProxyProtocolManager } from '@/core/infrastructure/BackendProxyProtocolManager';
+import { setResponseHeader } from '@/utils/http-headers';
 import { createLogger } from '@/utils/logger';
 
 import type { App } from '../App';
+import { WindowStateManager } from './WindowStateManager';
+import { WindowThemeManager } from './WindowThemeManager';
 
-// Create logger
 const logger = createLogger('core:Browser');
 
+// ==================== Types ====================
+
 export interface BrowserWindowOpts extends BrowserWindowConstructorOptions {
   devTools?: boolean;
   height?: number;
@@ -42,297 +37,193 @@ export interface BrowserWindowOpts extends BrowserWindowConstructorOptions {
   width?: number;
 }
 
-interface WindowState {
-  height?: number;
-  width?: number;
-  x?: number;
-  y?: number;
-}
+// ==================== Browser Class ====================
 
 export default class Browser {
-  private app: App;
+  private readonly app: App;
+  private readonly stateManager: WindowStateManager;
+  private readonly themeManager: WindowThemeManager;
+
   private _browserWindow?: BrowserWindow;
-  private themeListenerSetup = false;
-  identifier: string;
-  options: BrowserWindowOpts;
-  private readonly windowStateKey: string;
 
-  get browserWindow() {
+  readonly identifier: string;
+  readonly options: BrowserWindowOpts;
+
+  // ==================== Accessors ====================
+
+  get browserWindow(): BrowserWindow {
     return this.retrieveOrInitialize();
   }
+
   get webContents() {
-    if (this._browserWindow.isDestroyed()) return null;
-    return this._browserWindow.webContents;
+    if (this._browserWindow?.isDestroyed()) return null;
+    return this._browserWindow?.webContents ?? null;
   }
 
-  /**
-   * Method to construct BrowserWindows object
-   * @param options
-   * @param application
-   */
+  // ==================== Constructor ====================
+
   constructor(options: BrowserWindowOpts, application: App) {
     logger.debug(`Creating Browser instance: ${options.identifier}`);
     logger.debug(`Browser options: ${JSON.stringify(options)}`);
+
     this.app = application;
     this.identifier = options.identifier;
     this.options = options;
-    this.windowStateKey = `windowSize_${this.identifier}`;
 
-    // Initialization
+    // Initialize managers
+    this.stateManager = new WindowStateManager(application, {
+      identifier: options.identifier,
+      keepAlive: options.keepAlive,
+    });
+    this.themeManager = new WindowThemeManager(options.identifier);
+
+    // Initialize window
     this.retrieveOrInitialize();
   }
 
+  // ==================== Window Lifecycle ====================
+
   /**
-   * Get platform-specific theme configuration for window creation
+   * Initialize or retrieve existing browser window
    */
-  private getPlatformThemeConfig(): Record<string, any> {
-    if (isWindows) {
-      return this.getWindowsThemeConfig(this.isDarkMode);
+  retrieveOrInitialize(): BrowserWindow {
+    if (this._browserWindow && !this._browserWindow.isDestroyed()) {
+      logger.debug(`[${this.identifier}] Returning existing BrowserWindow instance.`);
+      return this._browserWindow;
     }
 
-    return {};
-  }
-
-  /**
-   * Get Windows-specific theme configuration
-   */
-  private getWindowsThemeConfig(isDarkMode: boolean) {
-    return {
-      backgroundColor: isDarkMode ? BACKGROUND_DARK : BACKGROUND_LIGHT,
-      icon: isDev ? join(buildDir, 'icon-dev.ico') : undefined,
-      titleBarOverlay: {
-        color: isDarkMode ? BACKGROUND_DARK : BACKGROUND_LIGHT,
-        height: TITLE_BAR_HEIGHT,
-        symbolColor: isDarkMode ? SYMBOL_COLOR_DARK : SYMBOL_COLOR_LIGHT,
-      },
-      titleBarStyle: 'hidden' as const,
-    };
-  }
+    const browserWindow = this.createBrowserWindow();
+    this._browserWindow = browserWindow;
 
-  private setupThemeListener(): void {
-    if (this.themeListenerSetup) return;
+    this.setupWindow(browserWindow);
 
-    nativeTheme.on('updated', this.handleThemeChange);
-    this.themeListenerSetup = true;
+    logger.debug(`[${this.identifier}] retrieveOrInitialize completed.`);
+    return browserWindow;
   }
 
-  private handleThemeChange = (): void => {
-    logger.debug(`[${this.identifier}] System theme changed, reapplying visual effects.`);
-    setTimeout(() => {
-      this.applyVisualEffects();
-    }, THEME_CHANGE_DELAY);
-  };
-
   /**
-   * Handle application theme mode change (called from BrowserManager)
+   * Destroy window instance and cleanup resources
    */
-  handleAppThemeChange = (): void => {
-    logger.debug(`[${this.identifier}] App theme mode changed, reapplying visual effects.`);
-    setTimeout(() => {
-      this.applyVisualEffects();
-    }, THEME_CHANGE_DELAY);
-  };
-
-  private applyVisualEffects(): void {
-    if (!this._browserWindow || this._browserWindow.isDestroyed()) return;
-
-    logger.debug(`[${this.identifier}] Applying visual effects for platform`);
-    const isDarkMode = this.isDarkMode;
-
-    try {
-      if (isWindows) {
-        this.applyWindowsVisualEffects(isDarkMode);
-      }
-
-      logger.debug(
-        `[${this.identifier}] Visual effects applied successfully (dark mode: ${isDarkMode})`,
-      );
-    } catch (error) {
-      logger.error(`[${this.identifier}] Failed to apply visual effects:`, error);
-    }
+  destroy(): void {
+    logger.debug(`Destroying window instance: ${this.identifier}`);
+    this.themeManager.cleanup();
+    this._browserWindow = undefined;
   }
 
-  private applyWindowsVisualEffects(isDarkMode: boolean): void {
-    const config = this.getWindowsThemeConfig(isDarkMode);
+  // ==================== Window Creation ====================
 
-    this._browserWindow.setBackgroundColor(config.backgroundColor);
-    this._browserWindow.setTitleBarOverlay(config.titleBarOverlay);
-  }
+  private createBrowserWindow(): BrowserWindow {
+    const { title, width, height, ...rest } = this.options;
 
-  private clampNumber(value: number, min: number, max: number) {
-    return Math.min(Math.max(value, min), max);
-  }
+    const resolvedState = this.stateManager.resolveState({ height, width });
+    logger.info(`Creating new BrowserWindow instance: ${this.identifier}`);
+    logger.debug(`[${this.identifier}] Resolved window state: ${JSON.stringify(resolvedState)}`);
 
-  private resolveWindowState(
-    savedState: WindowState | undefined,
-    fallbackState: { height?: number; width?: number },
-  ): WindowState {
-    const width = savedState?.width ?? fallbackState.width;
-    const height = savedState?.height ?? fallbackState.height;
-    const resolvedState: WindowState = { height, width };
-
-    const hasPosition = Number.isFinite(savedState?.x) && Number.isFinite(savedState?.y);
-    if (!hasPosition) return resolvedState;
-
-    const x = savedState?.x as number;
-    const y = savedState?.y as number;
-
-    const targetDisplay = screen.getDisplayMatching({
-      height: height ?? 0,
-      width: width ?? 0,
-      x,
-      y,
+    return new BrowserWindow({
+      ...rest,
+      autoHideMenuBar: true,
+      backgroundColor: '#00000000',
+      darkTheme: this.themeManager.isDarkMode,
+      frame: false,
+      height: resolvedState.height,
+      show: false,
+      title,
+      vibrancy: 'sidebar',
+      visualEffectState: 'active',
+      webPreferences: {
+        backgroundThrottling: false,
+        contextIsolation: true,
+        preload: join(preloadDir, 'index.js'),
+        sandbox: false,
+      },
+      width: resolvedState.width,
+      x: resolvedState.x,
+      y: resolvedState.y,
+      ...this.themeManager.getPlatformConfig(),
     });
+  }
 
-    const workArea = targetDisplay?.workArea ?? screen.getPrimaryDisplay().workArea;
-    const resolvedWidth = typeof width === 'number' ? Math.min(width, workArea.width) : width;
-    const resolvedHeight = typeof height === 'number' ? Math.min(height, workArea.height) : height;
+  private setupWindow(browserWindow: BrowserWindow): void {
+    logger.debug(`[${this.identifier}] BrowserWindow instance created.`);
 
-    const maxX = workArea.x + Math.max(0, workArea.width - (resolvedWidth ?? 0));
-    const maxY = workArea.y + Math.max(0, workArea.height - (resolvedHeight ?? 0));
+    // Setup theme management
+    this.themeManager.attach(browserWindow);
 
-    return {
-      height: resolvedHeight,
-      width: resolvedWidth,
-      x: this.clampNumber(x, workArea.x, maxX),
-      y: this.clampNumber(y, workArea.y, maxY),
-    };
-  }
+    // Setup network interceptors
+    this.setupCORSBypass(browserWindow);
+    this.setupRemoteServerRequestHook(browserWindow);
 
-  private cleanupThemeListener(): void {
-    if (this.themeListenerSetup) {
-      // Note: nativeTheme listeners are global, consider using a centralized theme manager
-      nativeTheme.off('updated', this.handleThemeChange);
-      // for multiple windows to avoid duplicate listeners
-      this.themeListenerSetup = false;
+    // Load content
+    this.initiateContentLoading();
+
+    // Setup devtools if enabled
+    if (this.options.devTools) {
+      logger.debug(`[${this.identifier}] Opening DevTools.`);
+      browserWindow.webContents.openDevTools();
     }
-  }
 
-  private get isDarkMode() {
-    return nativeTheme.shouldUseDarkColors;
+    // Setup event listeners
+    this.setupEventListeners(browserWindow);
   }
 
-  loadUrl = async (path: string) => {
-    const initUrl = await this.app.buildRendererUrl(path);
-
-    // Inject locale from store to help renderer boot with the correct language.
-    // Skip when set to auto to let the renderer detect locale normally.
-    const storedLocale = this.app.storeManager.get('locale', 'auto');
-    const urlWithLocale =
-      storedLocale && storedLocale !== 'auto'
-        ? `${initUrl}${initUrl.includes('?') ? '&' : '?'}lng=${storedLocale}`
-        : initUrl;
-
-    console.log('[Browser] initUrl', urlWithLocale);
+  private initiateContentLoading(): void {
+    logger.debug(`[${this.identifier}] Initiating placeholder and URL loading sequence.`);
+    this.loadPlaceholder().then(() => {
+      this.loadUrl(this.options.path).catch((e) => {
+        logger.error(
+          `[${this.identifier}] Initial loadUrl error for path '${this.options.path}':`,
+          e,
+        );
+      });
+    });
+  }
 
-    try {
-      logger.debug(`[${this.identifier}] Attempting to load URL: ${urlWithLocale}`);
-      await this._browserWindow.loadURL(urlWithLocale);
+  // ==================== Event Listeners ====================
 
-      logger.debug(`[${this.identifier}] Successfully loaded URL: ${urlWithLocale}`);
-    } catch (error) {
-      logger.error(`[${this.identifier}] Failed to load URL (${urlWithLocale}):`, error);
+  private setupEventListeners(browserWindow: BrowserWindow): void {
+    this.setupReadyToShowListener(browserWindow);
+    this.setupCloseListener(browserWindow);
+  }
 
-      // Try to load local error page
-      try {
-        logger.info(`[${this.identifier}] Attempting to load error page...`);
-        await this._browserWindow.loadFile(join(resourcesDir, 'error.html'));
-        logger.info(`[${this.identifier}] Error page loaded successfully.`);
-
-        // Remove previously set retry listeners to avoid duplicates
-        ipcMain.removeHandler('retry-connection');
-        logger.debug(`[${this.identifier}] Removed existing retry-connection handler if any.`);
-
-        // Set retry logic
-        ipcMain.handle('retry-connection', async () => {
-          logger.info(`[${this.identifier}] Retry connection requested for: ${urlWithLocale}`);
-          try {
-            await this._browserWindow?.loadURL(urlWithLocale);
-            logger.info(`[${this.identifier}] Reconnection successful to ${urlWithLocale}`);
-            return { success: true };
-          } catch (err) {
-            logger.error(`[${this.identifier}] Retry connection failed for ${urlWithLocale}:`, err);
-            // Reload error page
-            try {
-              logger.info(`[${this.identifier}] Reloading error page after failed retry...`);
-              await this._browserWindow?.loadFile(join(resourcesDir, 'error.html'));
-              logger.info(`[${this.identifier}] Error page reloaded.`);
-            } catch (loadErr) {
-              logger.error('[${this.identifier}] Failed to reload error page:', loadErr);
-            }
-            return { error: err.message, success: false };
-          }
-        });
-        logger.debug(`[${this.identifier}] Set up retry-connection handler.`);
-      } catch (err) {
-        logger.error(`[${this.identifier}] Failed to load error page:`, err);
-        // If even the error page can't be loaded, at least show a simple error message
-        try {
-          logger.warn(`[${this.identifier}] Attempting to load fallback error HTML string...`);
-          await this._browserWindow.loadURL(
-            'data:text/html,<html><body><h1>Loading Failed</h1><p>Unable to connect to server, please restart the application</p></body></html>',
-          );
-          logger.info(`[${this.identifier}] Fallback error HTML string loaded.`);
-        } catch (finalErr) {
-          logger.error(`[${this.identifier}] Unable to display any page:`, finalErr);
-        }
+  private setupReadyToShowListener(browserWindow: BrowserWindow): void {
+    logger.debug(`[${this.identifier}] Setting up 'ready-to-show' event listener.`);
+    browserWindow.once('ready-to-show', () => {
+      logger.debug(`[${this.identifier}] Window 'ready-to-show' event fired.`);
+      if (this.options.showOnInit) {
+        logger.debug(`Showing window ${this.identifier} because showOnInit is true.`);
+        browserWindow.show();
+      } else {
+        logger.debug(`Window ${this.identifier} not shown because showOnInit is false.`);
       }
-    }
-  };
-
-  loadPlaceholder = async () => {
-    logger.debug(`[${this.identifier}] Loading splash screen placeholder`);
-    // First load a local HTML loading page
-    await this._browserWindow.loadFile(join(resourcesDir, 'splash.html'));
-    logger.debug(`[${this.identifier}] Splash screen placeholder loaded.`);
-  };
-
-  show() {
-    logger.debug(`Showing window: ${this.identifier}`);
-    if (!this._browserWindow.isDestroyed()) this.determineWindowPosition();
+    });
+  }
 
-    this.browserWindow.show();
+  private setupCloseListener(browserWindow: BrowserWindow): void {
+    logger.debug(`[${this.identifier}] Setting up 'close' event listener.`);
+    const closeHandler = this.stateManager.createCloseHandler(browserWindow, {
+      onCleanup: () => this.themeManager.cleanup(),
+      onHide: () => this.hide(),
+    });
+    browserWindow.on('close', closeHandler);
   }
 
-  private determineWindowPosition() {
-    const { parentIdentifier } = this.options;
+  // ==================== Window Actions ====================
 
-    if (parentIdentifier) {
-      // todo: fix ts type
-      const parentWin = this.app.browserManager.retrieveByIdentifier(parentIdentifier as any);
-      if (parentWin) {
-        logger.debug(`[${this.identifier}] Found parent window: ${parentIdentifier}`);
-
-        const display = screen.getDisplayNearestPoint(parentWin.browserWindow.getContentBounds());
-        if (display) {
-          const {
-            workArea: { x, y, width: displayWidth, height: displayHeight },
-          } = display;
-
-          const { width, height } = this._browserWindow.getContentBounds();
-          logger.debug(
-            `[${this.identifier}] Display bounds: x=${x}, y=${y}, width=${displayWidth}, height=${displayHeight}`,
-          );
-
-          // Calculate new position
-          const newX = Math.floor(Math.max(x + (displayWidth - width) / 2, x));
-          const newY = Math.floor(Math.max(y + (displayHeight - height) / 2, y));
-          logger.debug(`[${this.identifier}] Calculated position: x=${newX}, y=${newY}`);
-          this._browserWindow.setPosition(newX, newY, false);
-        }
-      }
+  show(): void {
+    logger.debug(`Showing window: ${this.identifier}`);
+    if (!this._browserWindow?.isDestroyed()) {
+      this.determineWindowPosition();
     }
+    this.browserWindow.show();
   }
 
-  hide() {
+  hide(): void {
     logger.debug(`Hiding window: ${this.identifier}`);
 
     // Fix for macOS fullscreen black screen issue
     // See: https://github.com/electron/electron/issues/20263
     if (isMac && this.browserWindow.isFullScreen()) {
-      logger.debug(
-        `[${this.identifier}] Window is in fullscreen mode, exiting fullscreen before hiding.`,
-      );
+      logger.debug(`[${this.identifier}] Exiting fullscreen before hiding.`);
       this.browserWindow.once('leave-full-screen', () => {
         this.browserWindow.hide();
       });
@@ -342,284 +233,215 @@ export default class Browser {
     }
   }
 
-  close() {
+  close(): void {
     logger.debug(`Attempting to close window: ${this.identifier}`);
     this.browserWindow.close();
   }
 
-  /**
-   * Destroy instance
-   */
-  destroy() {
-    logger.debug(`Destroying window instance: ${this.identifier}`);
-    this.cleanupThemeListener();
-    this._browserWindow = undefined;
+  toggleVisible(): void {
+    logger.debug(`Toggling visibility for window: ${this.identifier}`);
+    if (this._browserWindow?.isVisible() && this._browserWindow.isFocused()) {
+      this.hide();
+    } else {
+      this._browserWindow?.show();
+      this._browserWindow?.focus();
+    }
   }
 
-  /**
-   * Initialize
-   */
-  retrieveOrInitialize() {
-    // When there is this window and it has not been destroyed
-    if (this._browserWindow && !this._browserWindow.isDestroyed()) {
-      logger.debug(`[${this.identifier}] Returning existing BrowserWindow instance.`);
-      return this._browserWindow;
-    }
+  moveToCenter(): void {
+    logger.debug(`Centering window: ${this.identifier}`);
+    this._browserWindow?.center();
+  }
 
-    const { path, title, width, height, devTools, showOnInit, ...res } = this.options;
+  setWindowSize(boundSize: { height?: number; width?: number }): void {
+    logger.debug(`Setting window size for ${this.identifier}: ${JSON.stringify(boundSize)}`);
+    const currentBounds = this._browserWindow?.getBounds();
+    this._browserWindow?.setBounds({
+      height: boundSize.height || currentBounds?.height,
+      width: boundSize.width || currentBounds?.width,
+    });
+  }
 
-    // Load window state
-    const savedState = this.app.storeManager.get(this.windowStateKey as any) as
-      | WindowState
-      | undefined;
-    logger.info(`Creating new BrowserWindow instance: ${this.identifier}`);
-    logger.debug(`[${this.identifier}] Options for new window: ${JSON.stringify(this.options)}`);
-    logger.debug(`[${this.identifier}] Saved window state: ${JSON.stringify(savedState)}`);
+  setWindowResizable(resizable: boolean): void {
+    logger.debug(`[${this.identifier}] Setting window resizable: ${resizable}`);
+    this._browserWindow?.setResizable(resizable);
+  }
 
-    const resolvedState = this.resolveWindowState(savedState, { height, width });
-    logger.debug(`[${this.identifier}] Resolved window state: ${JSON.stringify(resolvedState)}`);
+  // ==================== Window Position ====================
 
-    const browserWindow = new BrowserWindow({
-      ...res,
-      autoHideMenuBar: true,
-      backgroundColor: '#00000000',
-      darkTheme: this.isDarkMode,
-      frame: false,
-      height: resolvedState.height,
-      show: false,
-      title,
-      vibrancy: 'sidebar',
-      visualEffectState: 'active',
-      webPreferences: {
-        backgroundThrottling: false,
-        contextIsolation: true,
-        preload: join(preloadDir, 'index.js'),
-        sandbox: false,
-      },
-      width: resolvedState.width,
-      x: resolvedState.x,
-      y: resolvedState.y,
-      ...this.getPlatformThemeConfig(),
-    });
+  private determineWindowPosition(): void {
+    const { parentIdentifier } = this.options;
+    if (!parentIdentifier) return;
 
-    this._browserWindow = browserWindow;
-    logger.debug(`[${this.identifier}] BrowserWindow instance created.`);
+    // todo: fix ts type
+    const parentWin = this.app.browserManager.retrieveByIdentifier(parentIdentifier as any);
+    if (!parentWin) return;
 
-    // Initialize theme listener for this window to handle theme changes
-    this.setupThemeListener();
-    logger.debug(`[${this.identifier}] Theme listener setup and applying initial visual effects.`);
+    logger.debug(`[${this.identifier}] Found parent window: ${parentIdentifier}`);
 
-    // Apply initial visual effects
-    this.applyVisualEffects();
+    const display = screen.getDisplayNearestPoint(parentWin.browserWindow.getContentBounds());
+    if (!display) return;
 
-    // Setup CORS bypass for local file server
-    this.setupCORSBypass(browserWindow);
-    // Setup request hook for remote server sync (base URL rewrite + OIDC header)
-    this.setupRemoteServerRequestHook(browserWindow);
+    const { workArea } = display;
+    const { width, height } = this._browserWindow!.getContentBounds();
 
-    logger.debug(`[${this.identifier}] Initiating placeholder and URL loading sequence.`);
-    this.loadPlaceholder().then(() => {
-      this.loadUrl(path).catch((e) => {
-        logger.error(`[${this.identifier}] Initial loadUrl error for path '${path}':`, e);
-      });
-    });
+    const newX = Math.floor(Math.max(workArea.x + (workArea.width - width) / 2, workArea.x));
+    const newY = Math.floor(Math.max(workArea.y + (workArea.height - height) / 2, workArea.y));
 
-    // Show devtools if enabled
-    if (devTools) {
-      logger.debug(`[${this.identifier}] Opening DevTools because devTools option is true.`);
-      browserWindow.webContents.openDevTools();
-    }
+    logger.debug(`[${this.identifier}] Calculated position: x=${newX}, y=${newY}`);
+    this._browserWindow!.setPosition(newX, newY, false);
+  }
 
-    logger.debug(`[${this.identifier}] Setting up 'ready-to-show' event listener.`);
-    browserWindow.once('ready-to-show', () => {
-      logger.debug(`[${this.identifier}] Window 'ready-to-show' event fired.`);
-      if (showOnInit) {
-        logger.debug(`Showing window ${this.identifier} because showOnInit is true.`);
-        browserWindow?.show();
-      } else {
-        logger.debug(
-          `Window ${this.identifier} not shown on 'ready-to-show' because showOnInit is false.`,
-        );
-      }
-    });
+  // ==================== Content Loading ====================
 
-    logger.debug(`[${this.identifier}] Setting up 'close' event listener.`);
-    browserWindow.on('close', (e) => {
-      logger.debug(`Window 'close' event triggered for: ${this.identifier}`);
-      logger.debug(
-        `[${this.identifier}] State during close event: isQuiting=${this.app.isQuiting}, keepAlive=${this.options.keepAlive}`,
-      );
+  loadPlaceholder = async (): Promise<void> => {
+    logger.debug(`[${this.identifier}] Loading splash screen placeholder`);
+    await this._browserWindow!.loadFile(join(resourcesDir, 'splash.html'));
+    logger.debug(`[${this.identifier}] Splash screen placeholder loaded.`);
+  };
 
-      // If in application quitting process, allow window to be closed
-      if (this.app.isQuiting) {
-        logger.debug(`[${this.identifier}] App is quitting, allowing window to close naturally.`);
-        // Save state before quitting
-        try {
-          const bounds = browserWindow.getBounds();
-          const sizeState = {
-            height: bounds.height,
-            width: bounds.width,
-            x: bounds.x,
-            y: bounds.y,
-          };
-          logger.debug(
-            `[${this.identifier}] Saving window state on quit: ${JSON.stringify(sizeState)}`,
-          );
-          this.app.storeManager.set(this.windowStateKey as any, sizeState);
-        } catch (error) {
-          logger.error(`[${this.identifier}] Failed to save window state on quit:`, error);
-        }
-        // Need to clean up theme manager
-        this.cleanupThemeListener();
-        return;
-      }
+  loadUrl = async (path: string): Promise<void> => {
+    const initUrl = await this.app.buildRendererUrl(path);
+    const urlWithLocale = this.buildUrlWithLocale(initUrl);
 
-      // Prevent window from being destroyed, just hide it (if marked as keepAlive)
-      if (this.options.keepAlive) {
-        logger.debug(
-          `[${this.identifier}] keepAlive is true, preventing default close and hiding window.`,
-        );
-        // Optionally save state when hiding if desired, but primary save is on actual close/quit
-        // try {
-        //   const bounds = browserWindow.getBounds();
-        //   logger.debug(`[${this.identifier}] Saving window state on hide: ${JSON.stringify(bounds)}`);
-        //   this.app.storeManager.set(this.windowStateKey, bounds);
-        // } catch (error) {
-        //   logger.error(`[${this.identifier}] Failed to save window state on hide:`, error);
-        // }
-        e.preventDefault();
-        this.hide();
-      } else {
-        // Window is actually closing (not keepAlive)
-        logger.debug(
-          `[${this.identifier}] keepAlive is false, allowing window to close. Saving state...`,
-        );
-        try {
-          const bounds = browserWindow.getBounds();
-          const sizeState = {
-            height: bounds.height,
-            width: bounds.width,
-            x: bounds.x,
-            y: bounds.y,
-          };
-          logger.debug(
-            `[${this.identifier}] Saving window state on close: ${JSON.stringify(sizeState)}`,
-          );
-          this.app.storeManager.set(this.windowStateKey as any, sizeState);
-        } catch (error) {
-          logger.error(`[${this.identifier}] Failed to save window state on close:`, error);
-        }
-        // Need to clean up theme manager
-        this.cleanupThemeListener();
-      }
-    });
+    console.log('[Browser] initUrl', urlWithLocale);
 
-    logger.debug(`[${this.identifier}] retrieveOrInitialize completed.`);
-    return browserWindow;
+    try {
+      logger.debug(`[${this.identifier}] Attempting to load URL: ${urlWithLocale}`);
+      await this._browserWindow!.loadURL(urlWithLocale);
+      logger.debug(`[${this.identifier}] Successfully loaded URL: ${urlWithLocale}`);
+    } catch (error) {
+      logger.error(`[${this.identifier}] Failed to load URL (${urlWithLocale}):`, error);
+      await this.handleLoadError(urlWithLocale);
+    }
+  };
+
+  private buildUrlWithLocale(initUrl: string): string {
+    const storedLocale = this.app.storeManager.get('locale', 'auto');
+    if (storedLocale && storedLocale !== 'auto') {
+      return `${initUrl}${initUrl.includes('?') ? '&' : '?'}lng=${storedLocale}`;
+    }
+    return initUrl;
   }
 
-  moveToCenter() {
-    logger.debug(`Centering window: ${this.identifier}`);
-    this._browserWindow?.center();
+  private async handleLoadError(urlWithLocale: string): Promise<void> {
+    try {
+      logger.info(`[${this.identifier}] Attempting to load error page...`);
+      await this._browserWindow!.loadFile(join(resourcesDir, 'error.html'));
+      logger.info(`[${this.identifier}] Error page loaded successfully.`);
+
+      this.setupRetryHandler(urlWithLocale);
+    } catch (err) {
+      logger.error(`[${this.identifier}] Failed to load error page:`, err);
+      await this.loadFallbackError();
+    }
   }
 
-  setWindowSize(boundSize: { height?: number; width?: number }) {
-    logger.debug(
-      `Setting window size for ${this.identifier}: width=${boundSize.width}, height=${boundSize.height}`,
-    );
-    const windowSize = this._browserWindow.getBounds();
-    this._browserWindow?.setBounds({
-      height: boundSize.height || windowSize.height,
-      width: boundSize.width || windowSize.width,
+  private setupRetryHandler(urlWithLocale: string): void {
+    ipcMain.removeHandler('retry-connection');
+    logger.debug(`[${this.identifier}] Removed existing retry-connection handler if any.`);
+
+    ipcMain.handle('retry-connection', async () => {
+      logger.info(`[${this.identifier}] Retry connection requested for: ${urlWithLocale}`);
+      try {
+        await this._browserWindow?.loadURL(urlWithLocale);
+        logger.info(`[${this.identifier}] Reconnection successful to ${urlWithLocale}`);
+        return { success: true };
+      } catch (err: any) {
+        logger.error(`[${this.identifier}] Retry connection failed:`, err);
+        try {
+          await this._browserWindow?.loadFile(join(resourcesDir, 'error.html'));
+        } catch (loadErr) {
+          logger.error(`[${this.identifier}] Failed to reload error page:`, loadErr);
+        }
+        return { error: err.message, success: false };
+      }
     });
+    logger.debug(`[${this.identifier}] Set up retry-connection handler.`);
   }
 
-  setWindowResizable(resizable: boolean) {
-    logger.debug(`[${this.identifier}] Setting window resizable: ${resizable}`);
-    this._browserWindow?.setResizable(resizable);
+  private async loadFallbackError(): Promise<void> {
+    try {
+      logger.warn(`[${this.identifier}] Attempting to load fallback error HTML string...`);
+      await this._browserWindow!.loadURL(
+        'data:text/html,<html><body><h1>Loading Failed</h1><p>Unable to connect to server, please restart the application</p></body></html>',
+      );
+      logger.info(`[${this.identifier}] Fallback error HTML string loaded.`);
+    } catch (finalErr) {
+      logger.error(`[${this.identifier}] Unable to display any page:`, finalErr);
+    }
   }
 
-  broadcast = <T extends MainBroadcastEventKey>(channel: T, data?: MainBroadcastParams<T>) => {
-    if (this._browserWindow.isDestroyed()) return;
+  // ==================== Communication ====================
 
+  broadcast = <T extends MainBroadcastEventKey>(
+    channel: T,
+    data?: MainBroadcastParams<T>,
+  ): void => {
+    if (this._browserWindow?.isDestroyed()) return;
     logger.debug(`Broadcasting to window ${this.identifier}, channel: ${channel}`);
-    this._browserWindow.webContents.send(channel, data);
+    this._browserWindow!.webContents.send(channel, data);
   };
 
-  toggleVisible() {
-    logger.debug(`Toggling visibility for window: ${this.identifier}`);
-    if (this._browserWindow.isVisible() && this._browserWindow.isFocused()) {
-      this.hide(); // Use the hide() method which handles fullscreen
-    } else {
-      this._browserWindow.show();
-      this._browserWindow.focus();
-    }
-  }
+  // ==================== Theme (Delegated) ====================
 
   /**
-   * Manually reapply visual effects (useful for fixing lost effects after window state changes)
+   * Handle application theme mode change (called from BrowserManager)
+   */
+  handleAppThemeChange = (): void => {
+    this.themeManager.handleAppThemeChange();
+  };
+
+  /**
+   * Manually reapply visual effects
    */
   reapplyVisualEffects(): void {
-    logger.debug(`[${this.identifier}] Manually reapplying visual effects via Browser.`);
-    this.applyVisualEffects();
+    this.themeManager.reapplyVisualEffects();
   }
 
+  // ==================== Network Setup ====================
+
   /**
    * Setup CORS bypass for ALL requests
-   * In production, the renderer uses app://next protocol which triggers CORS for all external requests
-   * This completely bypasses CORS by:
-   * 1. Removing Origin header from requests (prevents OPTIONS preflight)
-   * 2. Adding proper CORS response headers using the stored origin value
+   * In production, the renderer uses app://next protocol which triggers CORS
    */
   private setupCORSBypass(browserWindow: BrowserWindow): void {
     logger.debug(`[${this.identifier}] Setting up CORS bypass for all requests`);
 
     const session = browserWindow.webContents.session;
-
-    // Store origin values for each request ID
     const originMap = new Map<number, string>();
 
-    // Remove Origin header and store it for later use
     session.webRequest.onBeforeSendHeaders((details, callback) => {
       const requestHeaders = { ...details.requestHeaders };
 
-      // Store and remove Origin header to prevent CORS preflight
       if (requestHeaders['Origin']) {
         originMap.set(details.id, requestHeaders['Origin']);
         delete requestHeaders['Origin'];
-        logger.debug(
-          `[${this.identifier}] Removed Origin header for: ${details.url} (stored: ${requestHeaders['Origin']})`,
-        );
+        logger.debug(`[${this.identifier}] Removed Origin header for: ${details.url}`);
       }
 
       callback({ requestHeaders });
     });
 
-    // Add CORS headers to ALL responses using stored origin
     session.webRequest.onHeadersReceived((details, callback) => {
       const responseHeaders = details.responseHeaders || {};
-
-      // Get the original origin from our map, fallback to default
       const origin = originMap.get(details.id) || '*';
 
-      // Cannot use '*' when Access-Control-Allow-Credentials is true
-      responseHeaders['Access-Control-Allow-Origin'] = [origin];
-      responseHeaders['Access-Control-Allow-Methods'] = ['GET, POST, PUT, DELETE, OPTIONS, PATCH'];
-      responseHeaders['Access-Control-Allow-Headers'] = ['*'];
-      responseHeaders['Access-Control-Allow-Credentials'] = ['true'];
+      // Force set CORS headers (replace existing to avoid duplicates from case-insensitive keys)
+      setResponseHeader(responseHeaders, 'Access-Control-Allow-Origin', origin);
+      setResponseHeader(
+        responseHeaders,
+        'Access-Control-Allow-Methods',
+        'GET, POST, PUT, DELETE, OPTIONS, PATCH',
+      );
+      setResponseHeader(responseHeaders, 'Access-Control-Allow-Headers', '*');
+      setResponseHeader(responseHeaders, 'Access-Control-Allow-Credentials', 'true');
 
-      // Clean up the stored origin after response
       originMap.delete(details.id);
 
-      // For OPTIONS requests, add preflight cache and override status
       if (details.method === 'OPTIONS') {
-        responseHeaders['Access-Control-Max-Age'] = ['86400']; // 24 hours
-        logger.debug(`[${this.identifier}] Adding CORS headers to OPTIONS response`);
-
-        callback({
-          responseHeaders,
-          statusLine: 'HTTP/1.1 200 OK',
-        });
+        setResponseHeader(responseHeaders, 'Access-Control-Max-Age', '86400');
+        callback({ responseHeaders, statusLine: 'HTTP/1.1 200 OK' });
         return;
       }
 
@@ -630,10 +452,9 @@ export default class Browser {
   }
 
   /**
-   * Rewrite tRPC requests to remote server and inject OIDC token via webRequest hooks.
-   * Replaces the previous proxyTRPCRequest IPC forwarding.
+   * Rewrite tRPC requests to remote server and inject OIDC token
    */
-  private setupRemoteServerRequestHook(browserWindow: BrowserWindow) {
+  private setupRemoteServerRequestHook(browserWindow: BrowserWindow): void {
     const session = browserWindow.webContents.session;
     const remoteServerConfigCtr = this.app.getController(RemoteServerConfigCtr);