From a74085f8e433512cd2e9ba5926e087cc204a5351 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Mon, 1 Sep 2025 13:51:25 -0700
Subject: [PATCH] feat: Complete manager migration cleanup and integration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove outdated legacy manager detection from LoadWorkflowWarning
- Update InfoPanelHeader with conflict detection improvements
- Fix all failing unit tests from state management transition
- Clean up algolia search provider type mappings
- Remove unused @ts-expect-error directives
- Add .nx to .gitignore

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .gitignore                                    |  1 +
 .../dialog/content/LoadWorkflowWarning.vue    | 11 +--
 .../manager/infoPanel/InfoPanelHeader.vue     | 15 +---
 .../test/LinkConnector.integration.test.ts    |  9 --
 .../providers/algoliaSearchProvider.ts        |  1 +
 .../footer/ManagerProgressFooter.test.ts      | 84 ++++++++++++-------
 .../tests/store/comfyManagerStore.test.ts     |  2 +-
 .../tests/stores/managerStateStore.test.ts    |  8 +-
 8 files changed, 69 insertions(+), 62 deletions(-)

diff --git a/.gitignore b/.gitignore
index c2e17be877..2d402acfbb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -76,3 +76,4 @@ vite.config.mts.timestamp-*.mjs
 *storybook.log
 storybook-static
 
+.nx/
diff --git a/src/components/dialog/content/LoadWorkflowWarning.vue b/src/components/dialog/content/LoadWorkflowWarning.vue
index 18ac1b139f..216e54dd08 100644
--- a/src/components/dialog/content/LoadWorkflowWarning.vue
+++ b/src/components/dialog/content/LoadWorkflowWarning.vue
@@ -53,13 +53,12 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ListBox from 'primevue/listbox'
-import { computed, onMounted, ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
-import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useCommandStore } from '@/stores/commandStore'
@@ -82,7 +81,6 @@ const { missingNodePacks, isLoading, error, missingCoreNodes } =
   useMissingNodes()
 
 const comfyManagerStore = useComfyManagerStore()
-const isLegacyManager = ref(false)
 
 // Check if any of the missing packs are currently being installed
 const isInstalling = computed(() => {
@@ -155,13 +153,6 @@ const openManager = async () => {
       break
   }
 }
-
-onMounted(async () => {
-  const isLegacyResponse = await useComfyManagerService().isLegacyManagerUI()
-  if (isLegacyResponse?.is_legacy_manager_ui) {
-    isLegacyManager.value = true
-  }
-})
 </script>
 
 <style scoped>
diff --git a/src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue b/src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue
index 8d3ec0a301..9aca47277e 100644
--- a/src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue
+++ b/src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue
@@ -1,14 +1,14 @@
 <template>
-  <div v-if="nodePacks?.length" class="flex flex-col items-center mb-6">
+  <div v-if="nodePacks?.length" class="flex flex-col items-center">
     <slot name="thumbnail">
-      <PackIcon :node-pack="nodePacks[0]" width="24" height="24" />
+      <PackIcon :node-pack="nodePacks[0]" width="204" height="106" />
     </slot>
     <h2
       class="text-2xl font-bold text-center mt-4 mb-2"
       style="word-break: break-all"
     >
       <slot name="title">
-        {{ nodePacks[0].name }}
+        <span class="inline-block text-base">{{ nodePacks[0].name }}</span>
       </slot>
     </h2>
     <div
@@ -26,7 +26,6 @@
           v-else
           v-bind="$attrs"
           size="md"
-          :is-installing="isInstalling"
           :node-packs="nodePacks"
           :has-conflict="hasConflict || computedHasConflict"
           :conflict-info="conflictInfo"
@@ -34,7 +33,7 @@
       </slot>
     </div>
   </div>
-  <div v-else class="flex flex-col items-center mb-6">
+  <div v-else class="flex flex-col items-center">
     <NoResultsPlaceholder
       :message="$t('manager.status.unknown')"
       :title="$t('manager.tryAgainLater')"
@@ -77,12 +76,6 @@ watch(
   { immediate: true }
 )
 
-// Check if any of the packs are currently being installed
-const isInstalling = computed(() => {
-  if (!nodePacks?.length) return false
-  return nodePacks.some((pack) => managerStore.isPackInstalling(pack.id))
-})
-
 // Add conflict detection for install button dialog
 const { checkNodeCompatibility } = useConflictDetection()
 
diff --git a/src/lib/litegraph/test/LinkConnector.integration.test.ts b/src/lib/litegraph/test/LinkConnector.integration.test.ts
index 5eb76aa783..ecbfc26ea9 100644
--- a/src/lib/litegraph/test/LinkConnector.integration.test.ts
+++ b/src/lib/litegraph/test/LinkConnector.integration.test.ts
@@ -334,12 +334,9 @@ describe('LinkConnector Integration', () => {
         } = graph.getNodeById(nodeId)!
 
         expect(input.link).toBeNull()
-        // @ts-expect-error toBeOneOf not in type definitions
         expect(output.links?.length).toBeOneOf([0, undefined])
 
-        // @ts-expect-error toBeOneOf not in type definitions
         expect(input._floatingLinks?.size).toBeOneOf([0, undefined])
-        // @ts-expect-error toBeOneOf not in type definitions
         expect(output._floatingLinks?.size).toBeOneOf([0, undefined])
       }
     })
@@ -537,12 +534,9 @@ describe('LinkConnector Integration', () => {
         } = graph.getNodeById(nodeId)!
 
         expect(input.link).toBeNull()
-        // @ts-expect-error toBeOneOf not in type definitions
         expect(output.links?.length).toBeOneOf([0, undefined])
 
-        // @ts-expect-error toBeOneOf not in type definitions
         expect(input._floatingLinks?.size).toBeOneOf([0, undefined])
-        // @ts-expect-error toBeOneOf not in type definitions
         expect(output._floatingLinks?.size).toBeOneOf([0, undefined])
       }
     })
@@ -856,12 +850,9 @@ describe('LinkConnector Integration', () => {
       } = graph.getNodeById(nodeId)!
 
       expect(input.link).toBeNull()
-      // @ts-expect-error toBeOneOf not in type definitions
       expect(output.links?.length).toBeOneOf([0, undefined])
 
-      // @ts-expect-error toBeOneOf not in type definitions
       expect(input._floatingLinks?.size).toBeOneOf([0, undefined])
-      // @ts-expect-error toBeOneOf not in type definitions
       expect(output._floatingLinks?.size).toBeOneOf([0, undefined])
     }
   })
diff --git a/src/services/providers/algoliaSearchProvider.ts b/src/services/providers/algoliaSearchProvider.ts
index 5d1dd2b851..ee22ceb486 100644
--- a/src/services/providers/algoliaSearchProvider.ts
+++ b/src/services/providers/algoliaSearchProvider.ts
@@ -60,6 +60,7 @@ const toRegistryLatestVersion = (
 ): RegistryNodePack['latest_version'] => {
   return {
     version: algoliaNode.latest_version,
+    createdAt: algoliaNode.update_time,
     status: algoliaNode.latest_version_status,
     comfy_node_extract_status:
       algoliaNode.comfy_node_extract_status ?? undefined
diff --git a/tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts b/tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts
index 0b10ef3290..b63562e81b 100644
--- a/tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts
+++ b/tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts
@@ -66,16 +66,27 @@ const mountComponent = (options: { captureError?: boolean } = {}) => {
     legacy: false,
     locale: 'en',
     messages: {
-      en: {}
+      en: {
+        g: {
+          progressCountOf: 'of'
+        },
+        manager: {
+          clickToFinishSetup: 'Click',
+          applyChanges: 'Apply Changes',
+          toFinishSetup: 'to finish setup',
+          restartingBackend: 'Restarting backend to apply changes...',
+          extensionsSuccessfullyInstalled:
+            'Extension(s) successfully installed and are ready to use!',
+          restartToApplyChanges: 'To apply changes, please restart ComfyUI',
+          installingDependencies: 'Installing dependencies...'
+        }
+      }
     }
   })
 
   const config: any = {
     global: {
-      plugins: [pinia, PrimeVue, i18n],
-      mocks: {
-        $t: (key: string) => key // Mock i18n translation
-      }
+      plugins: [pinia, PrimeVue, i18n]
     }
   }
 
@@ -95,9 +106,14 @@ describe('ManagerProgressFooter', () => {
   const mockTaskLogs: TaskLog[] = []
 
   const mockComfyManagerStore = {
-    uncompletedCount: 0,
     taskLogs: mockTaskLogs,
     allTasksDone: true,
+    isProcessingTasks: false,
+    succeededTasksIds: [] as string[],
+    failedTasksIds: [] as string[],
+    taskHistory: {} as Record<string, any>,
+    taskQueue: null,
+    resetTaskState: vi.fn(),
     clearLogs: vi.fn(),
     setStale: vi.fn(),
     // Add other required properties
@@ -195,7 +211,14 @@ describe('ManagerProgressFooter', () => {
   describe('State 1: Queue Running', () => {
     it('should display loading spinner and progress counter when queue is running', async () => {
       // Setup queue running state
-      mockComfyManagerStore.uncompletedCount = 3
+      mockComfyManagerStore.isProcessingTasks = true
+      mockComfyManagerStore.succeededTasksIds = ['1', '2']
+      mockComfyManagerStore.failedTasksIds = []
+      mockComfyManagerStore.taskHistory = {
+        '1': { taskName: 'Installing pack1' },
+        '2': { taskName: 'Installing pack2' },
+        '3': { taskName: 'Installing pack3' }
+      }
       mockTaskLogs.push(
         { taskName: 'Installing pack1', taskId: '1', logs: [] },
         { taskName: 'Installing pack2', taskId: '2', logs: [] },
@@ -211,18 +234,18 @@ describe('ManagerProgressFooter', () => {
       expect(wrapper.text()).toContain('Installing pack3')
 
       // Check progress counter (completed: 2 of 3)
-      expect(wrapper.text()).toMatch(/2.*3/)
+      expect(wrapper.text()).toMatch(/2.*of.*3/)
 
       // Check expand/collapse button exists
       const expandButton = wrapper.find('[aria-label="Expand"]')
       expect(expandButton.exists()).toBe(true)
 
       // Check Apply Changes button is NOT shown
-      expect(wrapper.text()).not.toContain('manager.applyChanges')
+      expect(wrapper.text()).not.toContain('Apply Changes')
     })
 
     it('should toggle expansion when expand button is clicked', async () => {
-      mockComfyManagerStore.uncompletedCount = 1
+      mockComfyManagerStore.isProcessingTasks = true
       mockTaskLogs.push({ taskName: 'Installing', taskId: '1', logs: [] })
 
       const wrapper = mountComponent()
@@ -237,7 +260,7 @@ describe('ManagerProgressFooter', () => {
   describe('State 2: Tasks Completed (Waiting for Restart)', () => {
     it('should display check mark and Apply Changes button when all tasks are done', async () => {
       // Setup tasks completed state
-      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.isProcessingTasks = false
       mockTaskLogs.push(
         { taskName: 'Installed pack1', taskId: '1', logs: [] },
         { taskName: 'Installed pack2', taskId: '2', logs: [] }
@@ -249,15 +272,16 @@ describe('ManagerProgressFooter', () => {
       // Check check mark emoji
       expect(wrapper.text()).toContain('✅')
 
-      // Check restart message (split into 3 parts)
-      expect(wrapper.text()).toContain('manager.clickToFinishSetup')
-      expect(wrapper.text()).toContain('manager.applyChanges')
-      expect(wrapper.text()).toContain('manager.toFinishSetup')
+      // Check restart message
+      expect(wrapper.text()).toContain(
+        'To apply changes, please restart ComfyUI'
+      )
+      expect(wrapper.text()).toContain('Apply Changes')
 
       // Check Apply Changes button exists
       const applyButton = wrapper
         .findAll('button')
-        .find((btn) => btn.text().includes('manager.applyChanges'))
+        .find((btn) => btn.text().includes('Apply Changes'))
       expect(applyButton).toBeTruthy()
 
       // Check no progress counter
@@ -268,7 +292,7 @@ describe('ManagerProgressFooter', () => {
   describe('State 3: Restarting', () => {
     it('should display restarting message and spinner during restart', async () => {
       // Setup completed state first
-      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.isProcessingTasks = false
       mockComfyManagerStore.allTasksDone = true
 
       const wrapper = mountComponent()
@@ -276,20 +300,20 @@ describe('ManagerProgressFooter', () => {
       // Click Apply Changes to trigger restart
       const applyButton = wrapper
         .findAll('button')
-        .find((btn) => btn.text().includes('manager.applyChanges'))
+        .find((btn) => btn.text().includes('Apply Changes'))
       await applyButton?.trigger('click')
 
       // Wait for state update
       await nextTick()
 
       // Check restarting message
-      expect(wrapper.text()).toContain('manager.restartingBackend')
+      expect(wrapper.text()).toContain('Restarting backend to apply changes...')
 
       // Check loading spinner during restart
       expect(wrapper.find('.inline-flex').exists()).toBe(true)
 
       // Check Apply Changes button is hidden
-      expect(wrapper.text()).not.toContain('manager.applyChanges')
+      expect(wrapper.text()).not.toContain('Apply Changes')
     })
   })
 
@@ -298,7 +322,7 @@ describe('ManagerProgressFooter', () => {
       vi.useFakeTimers()
 
       // Setup completed state
-      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.isProcessingTasks = false
       mockComfyManagerStore.allTasksDone = true
 
       const wrapper = mountComponent()
@@ -306,7 +330,7 @@ describe('ManagerProgressFooter', () => {
       // Trigger restart
       const applyButton = wrapper
         .findAll('button')
-        .find((btn) => btn.text().includes('manager.applyChanges'))
+        .find((btn) => btn.text().includes('Apply Changes'))
       await applyButton?.trigger('click')
 
       // Wait for event listener to be set up
@@ -323,7 +347,7 @@ describe('ManagerProgressFooter', () => {
       // Check success message
       expect(wrapper.text()).toContain('🎉')
       expect(wrapper.text()).toContain(
-        'manager.extensionsSuccessfullyInstalled'
+        'Extension(s) successfully installed and are ready to use!'
       )
 
       // Check dialog closes after 3 seconds
@@ -334,7 +358,7 @@ describe('ManagerProgressFooter', () => {
       expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
         key: 'global-manager-progress-dialog'
       })
-      expect(mockComfyManagerStore.clearLogs).toHaveBeenCalled()
+      expect(mockComfyManagerStore.resetTaskState).toHaveBeenCalled()
 
       vi.useRealTimers()
     })
@@ -362,7 +386,7 @@ describe('ManagerProgressFooter', () => {
 
   describe('Toast Management', () => {
     it('should suppress reconnection toasts during restart', async () => {
-      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.isProcessingTasks = false
       mockComfyManagerStore.allTasksDone = true
       mockSettingStore.get.mockReturnValue(false) // Original setting
 
@@ -371,7 +395,7 @@ describe('ManagerProgressFooter', () => {
       // Click Apply Changes
       const applyButton = wrapper
         .findAll('button')
-        .find((btn) => btn.text().includes('manager.applyChanges'))
+        .find((btn) => btn.text().includes('Apply Changes'))
       await applyButton?.trigger('click')
 
       // Check toast setting was disabled
@@ -382,7 +406,7 @@ describe('ManagerProgressFooter', () => {
     })
 
     it('should restore toast settings after restart completes', async () => {
-      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.isProcessingTasks = false
       mockComfyManagerStore.allTasksDone = true
       mockSettingStore.get.mockReturnValue(false) // Original setting
 
@@ -391,7 +415,7 @@ describe('ManagerProgressFooter', () => {
       // Click Apply Changes
       const applyButton = wrapper
         .findAll('button')
-        .find((btn) => btn.text().includes('manager.applyChanges'))
+        .find((btn) => btn.text().includes('Apply Changes'))
       await applyButton?.trigger('click')
 
       // Wait for event listener to be set up
@@ -414,7 +438,7 @@ describe('ManagerProgressFooter', () => {
 
   describe('Error Handling', () => {
     it('should restore state and close dialog on restart error', async () => {
-      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.isProcessingTasks = false
       mockComfyManagerStore.allTasksDone = true
 
       // Mock restart to throw error
@@ -427,7 +451,7 @@ describe('ManagerProgressFooter', () => {
       // Click Apply Changes
       const applyButton = wrapper
         .findAll('button')
-        .find((btn) => btn.text().includes('manager.applyChanges'))
+        .find((btn) => btn.text().includes('Apply Changes'))
 
       expect(applyButton).toBeTruthy()
 
diff --git a/tests-ui/tests/store/comfyManagerStore.test.ts b/tests-ui/tests/store/comfyManagerStore.test.ts
index 1f536c9b2b..b377c258b4 100644
--- a/tests-ui/tests/store/comfyManagerStore.test.ts
+++ b/tests-ui/tests/store/comfyManagerStore.test.ts
@@ -31,7 +31,7 @@ vi.mock('@/composables/useManagerQueue', () => {
       statusMessage: ref(''),
       allTasksDone: ref(false),
       enqueueTask: enqueueTaskMock,
-      uncompletedCount: ref(0)
+      isProcessingTasks: ref(false)
     }),
     enqueueTask: enqueueTaskMock
   }
diff --git a/tests-ui/tests/stores/managerStateStore.test.ts b/tests-ui/tests/stores/managerStateStore.test.ts
index 591a2327e6..28047b12a3 100644
--- a/tests-ui/tests/stores/managerStateStore.test.ts
+++ b/tests-ui/tests/stores/managerStateStore.test.ts
@@ -13,7 +13,8 @@ import { useSystemStatsStore } from '@/stores/systemStatsStore'
 // Mock dependencies
 vi.mock('@/scripts/api', () => ({
   api: {
-    getClientFeatureFlags: vi.fn()
+    getClientFeatureFlags: vi.fn(),
+    getServerFeature: vi.fn()
   }
 }))
 
@@ -78,6 +79,7 @@ describe('useManagerStateStore', () => {
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({
         supports_manager_v4_ui: true
       })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
       vi.mocked(useFeatureFlags).mockReturnValue({
         flags: { supportsManagerV4: true },
         featureFlag: vi.fn()
@@ -98,6 +100,7 @@ describe('useManagerStateStore', () => {
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({
         supports_manager_v4_ui: false
       })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
       vi.mocked(useFeatureFlags).mockReturnValue({
         flags: { supportsManagerV4: true },
         featureFlag: vi.fn()
@@ -134,6 +137,7 @@ describe('useManagerStateStore', () => {
         systemStats: { system: { argv: ['python', 'main.py'] } }
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(api.getServerFeature).mockReturnValue(undefined)
       vi.mocked(useFeatureFlags).mockReturnValue({
         flags: { supportsManagerV4: undefined },
         featureFlag: vi.fn()
@@ -152,6 +156,7 @@ describe('useManagerStateStore', () => {
         systemStats: { system: { argv: ['python', 'main.py'] } }
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(api.getServerFeature).mockReturnValue(false)
       vi.mocked(useFeatureFlags).mockReturnValue({
         flags: { supportsManagerV4: false },
         featureFlag: vi.fn()
@@ -172,6 +177,7 @@ describe('useManagerStateStore', () => {
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({
         supports_manager_v4_ui: true
       })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
       vi.mocked(useFeatureFlags).mockReturnValue({
         flags: { supportsManagerV4: true },
         featureFlag: vi.fn()