Add installation progress tracking

.claude/cclsp.json

@@ -0,0 +1,9 @@
+{
+  "servers": [
+    {
+      "extensions": ["js", "ts", "jsx", "tsx"],
+      "command": ["npx", "--", "typescript-language-server", "--stdio"],
+      "rootDir": "."
+    }
+  ]
+}

CLAUDE.md

@@ -23,10 +23,8 @@
 ### Code Quality (ALWAYS RUN AFTER CHANGES)
 
 ```bash
-yarn lint              # Check ESLint issues
-yarn lint:fix          # Auto-fix ESLint issues
-yarn format            # Check Prettier formatting
-yarn format:fix        # Auto-format code
+yarn lint              # Check & auto-fix ESLint issues
+yarn format            # Auto-format code
 yarn typescript        # TypeScript type checking
 ```
 
@@ -57,6 +55,7 @@ yarn vite:compile      # Compile with Vite
 ### Troubleshooting
 
 - If you encounter errors regarding `NODE_MODULE_VERSION`, try running `npx electron-rebuild` before other troubleshooting steps.
+  - If that still fails, try `yarn rebuild`
 
 ## Custom testing
 
@@ -138,7 +137,7 @@ The app packages these components:
 
 ## Before Committing
 
-1. Use `yarn format:fix` to ensure consistent formatting
+1. Use `yarn format` to ensure consistent formatting
 1. Run `yarn lint` and `yarn typescript` to check code quality
 1. Run `yarn test:unit` to ensure unit tests pass
 1. Consider running `yarn test:e2e` for UI changes

package.json

@@ -30,10 +30,8 @@
     "download:uv": "node scripts/downloadUV.js",
     "download-frontend": "node scripts/downloadFrontend.js",
     "make:frontend": "yarn run download-frontend",
-    "format": "prettier --check .",
-    "format:fix": "prettier --write .",
-    "lint": "eslint src",
-    "lint:fix": "eslint --fix src",
+    "format": "prettier --write --cache --log-level warn .",
+    "lint": "eslint --fix --cache src",
     "make": "yarn run vite:compile && electron-builder build --config=builder-debug.config.ts && yarn run verify:build",
     "make:assets": "node scripts/makeComfy.js",
     "make:nvidia": "yarn run make -- --nvidia",

src/desktopApp.ts

@@ -3,6 +3,7 @@ import log from 'electron-log/main';
 
 import { ProgressStatus } from './constants';
 import { IPC_CHANNELS } from './constants';
+import { InstallStage } from './constants';
 import { registerAppHandlers } from './handlers/AppHandlers';
 import { registerAppInfoHandlers } from './handlers/appInfoHandlers';
 import { registerGpuHandlers } from './handlers/gpuHandlers';
@@ -19,6 +20,7 @@ import { AppWindow } from './main-process/appWindow';
 import { ComfyDesktopApp } from './main-process/comfyDesktopApp';
 import type { ComfyInstallation } from './main-process/comfyInstallation';
 import { DevOverrides } from './main-process/devOverrides';
+import { createInstallStageInfo } from './main-process/installStages';
 import SentryLogging from './services/sentry';
 import { type HasTelemetry, type ITelemetry, getTelemetry, promptMetricsConsent } from './services/telemetry';
 import { DesktopConfig } from './store/desktopConfig';
@@ -39,6 +41,7 @@ export class DesktopApp implements HasTelemetry {
   /** Load start screen - basic spinner */
   async showLoadingPage() {
     try {
+      this.appState.setInstallStage(createInstallStageInfo(InstallStage.APP_INITIALIZING, { progress: 1 }));
       await this.appWindow.loadPage('desktop-start');
     } catch (error) {
       DesktopApp.fatalError({
@@ -84,6 +87,7 @@ export class DesktopApp implements HasTelemetry {
 
     if (!appState.ipcRegistered) this.registerIpcHandlers();
 
+    appState.setInstallStage(createInstallStageInfo(InstallStage.CHECKING_EXISTING_INSTALL, { progress: 2 }));
     const installation = await this.initializeInstallation();
     if (!installation) return;
     this.installation = installation;
@@ -102,21 +106,25 @@ export class DesktopApp implements HasTelemetry {
       // Start server
       if (!overrides.useExternalServer && !comfyDesktopApp.serverRunning) {
         try {
+          appState.setInstallStage(createInstallStageInfo(InstallStage.STARTING_SERVER));
           await comfyDesktopApp.startComfyServer(serverArgs);
         } catch (error) {
           log.error('Unhandled exception during server start', error);
           appWindow.send(IPC_CHANNELS.LOG_MESSAGE, `${error}\n`);
           appWindow.sendServerStartProgress(ProgressStatus.ERROR);
+          appState.setInstallStage(createInstallStageInfo(InstallStage.ERROR, { progress: 0, error: String(error) }));
           return;
         }
       }
       appWindow.sendServerStartProgress(ProgressStatus.READY);
       await appWindow.loadComfyUI(serverArgs);
 
       // App start complete
+      appState.setInstallStage(createInstallStageInfo(InstallStage.READY, { progress: 100 }));
       appState.emitLoaded();
     } catch (error) {
       log.error('Unhandled exception during app startup', error);
+      appState.setInstallStage(createInstallStageInfo(InstallStage.ERROR, { error: String(error) }));
       appWindow.sendServerStartProgress(ProgressStatus.ERROR);
       appWindow.send(IPC_CHANNELS.LOG_MESSAGE, `${error}\n`);
       if (!this.appState.isQuitting) {

src/install/installWizard.ts

@@ -5,6 +5,9 @@ import path from 'node:path';
 import { ComfyConfigManager } from '../config/comfyConfigManager';
 import { ComfyServerConfig, ModelPaths } from '../config/comfyServerConfig';
 import { ComfySettings, type ComfySettingsData } from '../config/comfySettings';
+import { InstallStage } from '../constants';
+import { useAppState } from '../main-process/appState';
+import { createInstallStageInfo } from '../main-process/installStages';
 import { InstallOptions } from '../preload';
 import { HasTelemetry, ITelemetry, trackEvent } from '../services/telemetry';
 
@@ -31,6 +34,9 @@ export class InstallWizard implements HasTelemetry {
     // Setup the ComfyUI folder structure.
     ComfyConfigManager.createComfyDirectories(this.basePath);
     this.initializeUserFiles();
+
+    useAppState().setInstallStage(createInstallStageInfo(InstallStage.INITIALIZING_CONFIG, { progress: 10 }));
+
     await this.initializeSettings();
     await this.initializeModelPaths();
   }

src/install/installationManager.ts

@@ -1,9 +1,11 @@
 import { Notification, app, dialog, ipcMain, shell } from 'electron';
 import log from 'electron-log/main';
 
-import { IPC_CHANNELS, ProgressStatus } from '../constants';
+import { IPC_CHANNELS, InstallStage, ProgressStatus } from '../constants';
+import { useAppState } from '../main-process/appState';
 import type { AppWindow } from '../main-process/appWindow';
 import { ComfyInstallation } from '../main-process/comfyInstallation';
+import { createInstallStageInfo } from '../main-process/installStages';
 import type { InstallOptions, InstallValidation } from '../preload';
 import { CmCli } from '../services/cmCli';
 import { type HasTelemetry, ITelemetry, trackEvent } from '../services/telemetry';
@@ -84,6 +86,10 @@ export class InstallationManager implements HasTelemetry {
     this.telemetry.track('validation:error_found', { error });
 
     log.info('Validation error - loading maintenance page.');
+    const appState = useAppState();
+    appState.setInstallStage(
+      createInstallStageInfo(InstallStage.MAINTENANCE_MODE, { progress: 90, message: `Validation error: ${error}` })
+    );
     this.appWindow.loadPage('maintenance').catch((error) => {
       log.error('Error loading maintenance page.', error);
       const message = `An error was detected with your installation, and the maintenance page could not be loaded to resolve it. The app will close now. Please reinstall if this issue persists.\n\nError message:\n\n${error}`;
@@ -107,9 +113,11 @@ export class InstallationManager implements HasTelemetry {
   async freshInstall(): Promise<ComfyInstallation> {
     log.info('Starting installation.');
     const config = useDesktopConfig();
+    const appState = useAppState();
     config.set('installState', 'started');
 
     // Check available GPU
+    appState.setInstallStage(createInstallStageInfo(InstallStage.HARDWARE_VALIDATION, { progress: 3 }));
     const hardware = await validateHardware();
     if (typeof hardware.gpu === 'string') config.set('detectedGpu', hardware.gpu);
 
@@ -129,11 +137,13 @@ export class InstallationManager implements HasTelemetry {
       await this.appWindow.loadPage('not-supported');
     } else {
       log.verbose('Loading welcome renderer.');
+      appState.setInstallStage(createInstallStageInfo(InstallStage.WELCOME_SCREEN, { progress: 4 }));
       await this.appWindow.loadPage('welcome');
     }
 
     // Check if git is installed
     log.verbose('Checking if git is installed.');
+    appState.setInstallStage(createInstallStageInfo(InstallStage.GIT_CHECK, { progress: 5 }));
     const gitInstalled = await canExecuteShellCommand('git --version');
     if (!gitInstalled) {
       log.verbose('git not detected in path, loading download-git page.');
@@ -153,6 +163,7 @@ export class InstallationManager implements HasTelemetry {
     }
 
     // Handover to frontend
+    appState.setInstallStage(createInstallStageInfo(InstallStage.INSTALL_OPTIONS_SELECTION, { progress: 6 }));
     const installOptions = await optionsPromise;
     this.telemetry.track('desktop:install_options_received', {
       gpuType: installOptions.device,
@@ -178,10 +189,10 @@ export class InstallationManager implements HasTelemetry {
     }
 
     // Creates folders and initializes ComfyUI settings
+    appState.setInstallStage(createInstallStageInfo(InstallStage.CREATING_DIRECTORIES, { progress: 8 }));
     const installWizard = new InstallWizard(installOptions, this.telemetry);
     await installWizard.install();
 
-    this.appWindow.maximize();
     const shouldMigrateCustomNodes =
       !!installWizard.migrationSource && installWizard.migrationItemIds.has('custom_nodes');
     if (shouldMigrateCustomNodes) {
@@ -205,10 +216,14 @@ export class InstallationManager implements HasTelemetry {
     };
 
     // Create virtual environment
+    appState.setInstallStage(createInstallStageInfo(InstallStage.PYTHON_ENVIRONMENT_SETUP, { progress: 15 }));
     this.appWindow.sendServerStartProgress(ProgressStatus.PYTHON_SETUP);
     await virtualEnvironment.create(processCallbacks);
 
     // Migrate custom nodes
+    if (shouldMigrateCustomNodes) {
+      appState.setInstallStage(createInstallStageInfo(InstallStage.MIGRATING_CUSTOM_NODES, { progress: 75 }));
+    }
     const customNodeMigrationError = await this.migrateCustomNodes(config, virtualEnvironment, processCallbacks);
     if (customNodeMigrationError) {
       // TODO: Replace with IPC callback to handle i18n (SoC).

src/main-process/appState.ts

@@ -1,18 +1,19 @@
 import { app } from 'electron';
 import { EventEmitter } from 'node:events';
 
+import { InstallStage } from '@/constants';
 import { AppStartError } from '@/infrastructure/appStartError';
 import type { Page } from '@/infrastructure/interfaces';
 
-import type { InstallStageInfo } from './installStages';
+import { type InstallStageInfo, createInstallStageInfo } from './installStages';
 
 /** App event names */
 type AppStateEvents = {
   /** Occurs once, immediately before registering IPC handlers. */
   ipcRegistered: [];
   /** Occurs once, immediately after the ComfyUI server has finished loading. */
   loaded: [];
-  /** Occurs when the installation stage changes */
+  /** Occurs when the install stage changes. */
   installStageChanged: [InstallStageInfo];
 };
 
@@ -30,14 +31,14 @@ export interface IAppState extends Pick<EventEmitter<AppStateEvents>, 'on' | 'on
   readonly loaded: boolean;
   /** The last page the app loaded from the desktop side. @see {@link AppWindow.loadPage} */
   currentPage?: Page;
-  /** The current installation stage information */
-  installStage?: InstallStageInfo;
+  /** Current installation stage information. */
+  readonly installStage: InstallStageInfo;
 
   /** Updates state - IPC handlers have been registered. */
   emitIpcRegistered(): void;
   /** Updates state - the app has loaded. */
   emitLoaded(): void;
-  /** Updates the installation stage */
+  /** Updates the current install stage. */
   setInstallStage(stage: InstallStageInfo): void;
 }
 
@@ -49,7 +50,13 @@ class AppState extends EventEmitter<AppStateEvents> implements IAppState {
   ipcRegistered = false;
   loaded = false;
   currentPage?: Page;
-  installStage?: InstallStageInfo;
+  installStage: InstallStageInfo;
+
+  constructor() {
+    super();
+    // Initialize install stage to idle
+    this.installStage = createInstallStageInfo(InstallStage.IDLE, { progress: 0 });
+  }
 
   initialize() {
     // Store quitting state - suppresses errors when already quitting

src/main-process/appWindow.ts

@@ -66,9 +66,9 @@ export class AppWindow {
     const minWidth = 640;
     const minHeight = 640;
 
-    // Retrieve stored window size, or use default if not available
-    const storedWidth = store.get('windowWidth', width);
-    const storedHeight = store.get('windowHeight', height);
+    // For fresh installs, force 1024x768 regardless of stored values
+    const storedWidth = installed ? store.get('windowWidth', width) : width;
+    const storedHeight = installed ? store.get('windowHeight', height) : height;
     const storedX = store.get('windowX');
     const storedY = store.get('windowY');
 
@@ -114,7 +114,8 @@ export class AppWindow {
     this.window.once('ready-to-show', () => this.window.show());
 
     if (!installed && storedX === undefined) this.window.center();
-    if (store.get('windowMaximized')) this.window.maximize();
+    // Only maximize for installed apps with the stored preference
+    if (installed && store.get('windowMaximized')) this.window.maximize();
 
     this.setupWindowEvents();
     this.setupAppEvents();

src/main-process/installStages.ts

@@ -10,7 +10,7 @@ export type InstallStageName = ValuesOf<typeof InstallStage>;
 
 export interface InstallStageInfo {
   stage: InstallStageName;
-  progress: number; // 0-100
+  progress?: number; // 0-100, undefined for indeterminate
   message?: string;
   error?: string;
   timestamp: number;
@@ -29,7 +29,7 @@ export function createInstallStageInfo(
 ): InstallStageInfo {
   return {
     stage,
-    progress: options?.progress ?? 0,
+    progress: options?.progress,
     message: options?.message,
     error: options?.error,
     timestamp: Date.now(),

src/virtualEnvironment.ts

@@ -6,7 +6,9 @@ import { rm } from 'node:fs/promises';
 import os, { EOL } from 'node:os';
 import path from 'node:path';
 
-import { TorchMirrorUrl } from './constants';
+import { InstallStage, TorchMirrorUrl } from './constants';
+import { useAppState } from './main-process/appState';
+import { createInstallStageInfo } from './main-process/installStages';
 import type { TorchDeviceType } from './preload';
 import { captureSentryException } from './services/sentry';
 import { HasTelemetry, ITelemetry, trackEvent } from './services/telemetry';
@@ -301,6 +303,10 @@ export class VirtualEnvironment implements HasTelemetry {
 
   @trackEvent('install_flow:virtual_environment_install_requirements')
   public async installRequirements(callbacks?: ProcessCallbacks): Promise<void> {
+    useAppState().setInstallStage(
+      createInstallStageInfo(InstallStage.INSTALLING_REQUIREMENTS, { progress: 25 })
+    );
+
     // pytorch nightly is required for MPS
     if (process.platform === 'darwin') {
       return this.manualInstall(callbacks);
@@ -476,6 +482,13 @@ export class VirtualEnvironment implements HasTelemetry {
   }
 
   async installPytorch(callbacks?: ProcessCallbacks): Promise<void> {
+    useAppState().setInstallStage(
+      createInstallStageInfo(InstallStage.INSTALLING_PYTORCH, {
+        progress: 25,
+        message: 'Installing PyTorch',
+      })
+    );
+
     const torchMirror = this.torchMirror || getDefaultTorchMirror(this.selectedDevice);
     const config: PipInstallConfig = {
       packages: ['torch', 'torchvision', 'torchaudio'],
@@ -494,6 +507,13 @@ export class VirtualEnvironment implements HasTelemetry {
   }
 
   async installComfyUIRequirements(callbacks?: ProcessCallbacks): Promise<void> {
+    useAppState().setInstallStage(
+      createInstallStageInfo(InstallStage.INSTALLING_COMFYUI_REQUIREMENTS, {
+        progress: 45,
+        message: 'Installing ComfyUI requirements',
+      })
+    );
+
     log.info(`Installing ComfyUI requirements from ${this.comfyUIRequirementsPath}`);
     const installCmd = getPipInstallArgs({
       requirementsFile: this.comfyUIRequirementsPath,
@@ -507,6 +527,13 @@ export class VirtualEnvironment implements HasTelemetry {
   }
 
   async installComfyUIManagerRequirements(callbacks?: ProcessCallbacks): Promise<void> {
+    useAppState().setInstallStage(
+      createInstallStageInfo(InstallStage.INSTALLING_MANAGER_REQUIREMENTS, {
+        progress: 60,
+        message: 'Installing ComfyUI Manager requirements',
+      })
+    );
+
     log.info(`Installing ComfyUIManager requirements from ${this.comfyUIManagerRequirementsPath}`);
     const installCmd = getPipInstallArgs({
       requirementsFile: this.comfyUIManagerRequirementsPath,

tests/integration/install/installApp.spec.ts

@@ -26,10 +26,6 @@ test.describe('Install App', () => {
     const status = await serverStart.status.get();
     expect(['loading', 'setting up python']).toContain(status);
 
-    // Confirm window is maximized, then restore (for screenshot)
-    await expect(app.isMaximized()).resolves.toBe(true);
-    await app.restoreWindow();
-
     // When the terminal is hidden and no error is shown, the install is successful
     await expect(serverStart.terminal).not.toBeVisible({ timeout: 5 * 60 * 1000 });
     await expect(serverStart.status.error).not.toBeVisible();