feat: add bootstrapStore for optimized startup

- Create bootstrapStore using VueUse useAsyncState for parallel async operations

- Move API init, nodeDefs fetch, settings, i18n, and workflow sync to early bootstrap

- Fix deadlock: wait for ready OR error since useAsyncState doesn't set isReady on rejection

- Extract ensureNodeDefsLoaded helper in app.ts to eliminate duplicate code

- Add timing telemetry for bootstrap performance measurement

perf: move non-DOM composables to script setup level

Moved useGlobalLitegraph, useContextMenuTranslation, useVueFeatureFlags

from onMounted to script setup level in GraphCanvas.vue.

These composables don't use onUnmounted hooks, so they can run earlier.

Amp-Thread-ID: https://ampcode.com/threads/T-019bf1e3-1b3a-713d-8eaf-5f3eee1493b8
Co-authored-by: Amp <amp@ampcode.com>

perf: parallelize pre-canvas bootstrap operations

Start i18n and settings waits in parallel, then wait for settings first

(critical path) before running CORE_SETTINGS registration. Run i18n wait

and newUserService in parallel since newUserService only needs settings.

Amp-Thread-ID: https://ampcode.com/threads/T-019bf1e3-1b3a-713d-8eaf-5f3eee1493b8
Co-authored-by: Amp <amp@ampcode.com>

refactor: simplify bootstrapStore and defer auth-dependent loading

- Remove unused timing telemetry from bootstrapStore
- Add multi-user login check before loading settings/workflows
- Settings and workflows now defer if authentication is required
- Extract loadSettings/syncWorkflows as guarded methods
- Update related stores and services to handle auth dependencies

Amp-Thread-ID: https://ampcode.com/threads/T-019bf274-0436-725d-999b-232e2198131b
Co-authored-by: Amp <amp@ampcode.com>

refactor: simplify bootstrapStore usage and remove type assertion

- Add explicit generic type to useAsyncState instead of using 'as' assertion

- Use store properties directly instead of storeToRefs in ensureNodeDefsLoaded

- Move bootstrapStore import to top-level instead of dynamic import

Amp-Thread-ID: https://ampcode.com/threads/T-019bf280-28ae-71bc-b33f-acd4484ffd96
Co-authored-by: Amp <amp@ampcode.com>

fix: revert logout to use page reload to prevent stale store state

Replace router.push() with window.location.reload() in SidebarLogoutIcon

to ensure Pinia stores (bootstrapStore, settingStore) are fully reset.

Using router navigation caused isSettingsReady/isNodeDefsReady flags to

persist, making new users inherit the previous user's cached state.

Added TODO comments documenting the sticky state issue for future

refactoring to proper store reset methods.

test: update tests for relaxed duplicate setting and cleanup behavior

Amp-Thread-ID: https://ampcode.com/threads/T-019bf29e-0329-751d-80e2-771ea372a56e
Co-authored-by: Amp <amp@ampcode.com>

fix: remove duplicate api.init() from bootstrapStore

The websocket was being initialized before status event handlers were registered, causing the initial status message to be missed. Queue size showed 'X' instead of 0.

api.init() is already called in app.ts addApiUpdateHandlers() after registering handlers.

Amp-Thread-ID: https://ampcode.com/threads/T-019bf2db-6aa1-7210-aeed-f161486f950a
Co-authored-by: Amp <amp@ampcode.com>

Author: DrJKL

AGENTS.md

@@ -300,6 +300,12 @@ When referencing Comfy-Org repos:
 
 Rules for agent-based coding tasks.
 
+### Chrome DevTools MCP
+
+When using `take_snapshot` to inspect dropdowns, listboxes, or other components with dynamic options:
+- Use `verbose: true` to see the full accessibility tree including list items
+- Non-verbose snapshots often omit nested options in comboboxes/listboxes
+
 ### Temporary Files
 
 - Put planning documents under `/temp/plans/`

src/AGENTS.md

@@ -17,6 +17,7 @@
 - Clear public interfaces
 - Restrict extension access
 - Clean up subscriptions
+- Only expose state/actions that are used externally; keep internal state private
 
 ## General Guidelines
 

src/components/graph/GraphCanvas.vue

@@ -93,7 +93,7 @@
 </template>
 
 <script setup lang="ts">
-import { useEventListener, whenever } from '@vueuse/core'
+import { until, useEventListener, whenever } from '@vueuse/core'
 import {
   computed,
   nextTick,
@@ -129,7 +129,7 @@ import { useCopy } from '@/composables/useCopy'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { usePaste } from '@/composables/usePaste'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
-import { mergeCustomNodesI18n, t } from '@/i18n'
+import { t } from '@/i18n'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useLitegraphSettings } from '@/platform/settings/composables/useLitegraphSettings'
 import { CORE_SETTINGS } from '@/platform/settings/constants/coreSettings'
@@ -144,12 +144,15 @@ import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteracti
 import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
 import LGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
-import { UnauthorizedError, api } from '@/scripts/api'
+import { UnauthorizedError } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
 import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { newUserService } from '@/services/newUserService'
+import { storeToRefs } from 'pinia'
+
+import { useBootstrapStore } from '@/stores/bootstrapStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
@@ -180,6 +183,9 @@ const toastStore = useToastStore()
 const colorPaletteStore = useColorPaletteStore()
 const colorPaletteService = useColorPaletteService()
 const canvasInteractions = useCanvasInteractions()
+const bootstrapStore = useBootstrapStore()
+const { isI18nReady, i18nError, isSettingsReady, settingsError } =
+  storeToRefs(bootstrapStore)
 
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
@@ -386,15 +392,6 @@ useEventListener(
   { passive: true }
 )
 
-const loadCustomNodesI18n = async () => {
-  try {
-    const i18nData = await api.getCustomNodesI18n()
-    mergeCustomNodesI18n(i18nData)
-  } catch (error) {
-    console.error('Failed to load custom nodes i18n', error)
-  }
-}
-
 const comfyAppReady = ref(false)
 const workflowPersistence = useWorkflowPersistence()
 const { flags } = useFeatureFlags()
@@ -404,35 +401,62 @@ useCanvasDrop(canvasRef)
 useLitegraphSettings()
 useNodeBadge()
 
+// These composables only do global setup (no component refs, no onUnmounted)
+// Moving them outside onMounted allows earlier initialization
+useGlobalLitegraph()
+useContextMenuTranslation()
+useVueFeatureFlags()
+
 onMounted(async () => {
-  useGlobalLitegraph()
-  useContextMenuTranslation()
+  // These composables use document event listeners, safe to call after mount
   useCopy()
   usePaste()
   useWorkflowAutoSave()
-  useVueFeatureFlags()
 
   comfyApp.vueAppReady = true
 
   workspaceStore.spinner = true
   // ChangeTracker needs to be initialized before setup, as it will overwrite
   // some listeners of litegraph canvas.
   ChangeTracker.init()
-  await loadCustomNodesI18n()
-  try {
-    await settingStore.loadSettingValues()
-  } catch (error) {
-    if (error instanceof UnauthorizedError) {
+
+  // Wait for bootstrapStore to complete settings and i18n loading
+  // (already started in main.ts via startStoreBootstrap)
+  // Start both waits in parallel (useAsyncState doesn't set isReady on rejection)
+  const i18nPromise = until(() => isI18nReady.value || !!i18nError.value).toBe(
+    true
+  )
+  const settingsPromise = until(
+    () => isSettingsReady.value || !!settingsError.value
+  ).toBe(true)
+
+  // Wait for settings first (critical path - needed for CORE_SETTINGS and newUserService)
+  await settingsPromise
+  if (settingsError.value) {
+    if (settingsError.value instanceof UnauthorizedError) {
       localStorage.removeItem('Comfy.userId')
       localStorage.removeItem('Comfy.userName')
       window.location.reload()
-    } else {
-      throw error
+      return
     }
+    throw settingsError.value
   }
+
+  // Register core settings immediately after settings are ready
   CORE_SETTINGS.forEach(settingStore.addSetting)
 
-  await newUserService().initializeIfNewUser(settingStore)
+  // Wait for both i18n and newUserService in parallel
+  // (newUserService only needs settings, not i18n)
+  await Promise.all([
+    i18nPromise,
+    newUserService().initializeIfNewUser(settingStore)
+  ])
+  if (i18nError.value) {
+    console.warn(
+      '[GraphCanvas] Failed to load custom nodes i18n:',
+      i18nError.value
+    )
+  }
 
   // @ts-expect-error fixme ts strict error
   await comfyApp.setup(canvasRef.value)

src/components/sidebar/SidebarLogoutIcon.vue

@@ -11,18 +11,21 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useUserStore } from '@/stores/userStore'
 
 import SidebarIcon from './SidebarIcon.vue'
 
 const { t } = useI18n()
 const userStore = useUserStore()
+const colorPaletteService = useColorPaletteService()
 
 const tooltip = computed(
   () => `${t('sideToolbar.logout')} (${userStore.currentUser?.username})`
 )
 const logout = async () => {
   await userStore.logout()
+  colorPaletteService.clearColorPalette()
   window.location.reload()
 }
 </script>

src/composables/node/useNodeBadge.ts

@@ -71,6 +71,9 @@ export const useNodeBadge = () => {
   }
 
   onMounted(() => {
+    if (extensionStore.isExtensionInstalled('Comfy.NodeBadge')) return
+
+    // TODO: Fix the composables and watchers being setup in onMounted
     const nodePricing = useNodePricing()
 
     watch(

src/composables/useCoreCommands.ts

@@ -67,10 +67,9 @@ import { useWorkflowTemplateSelectorDialog } from './useWorkflowTemplateSelector
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 import { useDialogStore } from '@/stores/dialogStore'
 
-const { isActiveSubscription, showSubscriptionDialog } = useSubscription()
-
 const moveSelectedNodesVersionAdded = '1.22.2'
 export function useCoreCommands(): ComfyCommand[] {
+  const { isActiveSubscription, showSubscriptionDialog } = useSubscription()
   const workflowService = useWorkflowService()
   const workflowStore = useWorkflowStore()
   const dialogService = useDialogService()

src/main.ts

@@ -14,6 +14,7 @@ import { VueFire, VueFireAuth } from 'vuefire'
 import { getFirebaseConfig } from '@/config/firebase'
 import '@/lib/litegraph/public/css/litegraph.css'
 import router from '@/router'
+import { useBootstrapStore } from '@/stores/bootstrapStore'
 
 import App from './App.vue'
 // Intentionally relative import to ensure the CSS is loaded in the right order (after litegraph.css)
@@ -43,6 +44,10 @@ const firebaseApp = initializeApp(getFirebaseConfig())
 
 const app = createApp(App)
 const pinia = createPinia()
+
+// Start early bootstrap (api.init, fetchNodeDefs) before Pinia is registered
+const bootstrapStore = useBootstrapStore(pinia)
+bootstrapStore.startEarlyBootstrap()
 Sentry.init({
   app,
   dsn: __SENTRY_DSN__,
@@ -88,4 +93,7 @@ app
     modules: [VueFireAuth()]
   })
 
+// Start store bootstrap (settings, i18n, workflows) after Pinia is registered
+void bootstrapStore.startStoreBootstrap()
+
 app.mount('#vue-app')

src/platform/cloud/subscription/composables/useSubscription.ts

@@ -203,6 +203,10 @@ function useSubscriptionInternal() {
       if (loggedIn) {
         try {
           await fetchSubscriptionStatus()
+        } catch (error) {
+          // Network errors are expected during navigation/component unmount
+          // and when offline - log for debugging but don't surface to user
+          console.error('Failed to fetch subscription status:', error)
         } finally {
           isInitialized.value = true
         }

src/platform/distribution/types.ts

@@ -18,6 +18,7 @@ const DISTRIBUTION: Distribution = __DISTRIBUTION__
 /** Distribution type checks */
 export const isDesktop = DISTRIBUTION === 'desktop' || isElectron() // TODO: replace with build var
 export const isCloud = DISTRIBUTION === 'cloud'
+export const isDev = import.meta.env?.DEV ?? false
 // export const isLocalhost = DISTRIBUTION === 'localhost' || (!isDesktop && !isCloud)
 
 /**

src/platform/settings/settingStore.test.ts

@@ -82,18 +82,24 @@ describe('useSettingStore', () => {
       expect(store.settingsById['test.setting']).toEqual(setting)
     })
 
-    it('should throw error for duplicate setting ID', () => {
+    it('should warn and skip for duplicate setting ID', () => {
       const setting: SettingParams = {
         id: 'test.setting',
         name: 'test.setting',
         type: 'text',
         defaultValue: 'default'
       }
+      const consoleWarnSpy = vi
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
 
       store.addSetting(setting)
-      expect(() => store.addSetting(setting)).toThrow(
-        'Setting test.setting must have a unique ID.'
+      store.addSetting(setting)
+
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        'Setting already registered: test.setting'
       )
+      consoleWarnSpy.mockRestore()
     })
 
     it('should migrate deprecated values', () => {