feat: Integrate ComfyUI Manager migration with v2 API and enhanced UI

This commit integrates the previously recovered ComfyUI Manager functionality
with significant enhancements from PR #3367, including:

## Core Manager System Recovery
- **v2 API Integration**: All manager endpoints now use `/v2/manager/queue/*`
- **Task Queue System**: Complete client-side task queuing with WebSocket status
- **Service Layer**: Comprehensive manager service with all CRUD operations
- **Store Integration**: Full manager store with progress dialog support

## New Features & Enhancements
- **Reactive Feature Flags**: Foundation for dynamic feature toggling
- **Enhanced UI Components**: Improved loading states, progress tracking
- **Package Management**: Install, update, enable/disable functionality
- **Version Selection**: Support for latest/nightly package versions
- **Progress Dialogs**: Real-time installation progress with logs
- **Missing Node Detection**: Automated detection and installation prompts

## Technical Improvements
- **TypeScript Definitions**: Complete type system for manager operations
- **WebSocket Integration**: Real-time status updates via `cm-queue-status`
- **Error Handling**: Comprehensive error handling with user feedback
- **Testing**: Updated test suites for new functionality
- **Documentation**: Complete backup documentation for recovery process

## API Endpoints Restored
- `manager/queue/start` - Start task queue
- `manager/queue/status` - Get queue status
- `manager/queue/task` - Queue individual tasks
- `manager/queue/install` - Install packages
- `manager/queue/update` - Update packages
- `manager/queue/disable` - Disable packages

## Breaking Changes
- Manager API base URL changed to `/v2/`
- Updated TypeScript interfaces for manager operations
- New WebSocket message format for queue status

This restores all critical manager functionality lost during the previous
rebase while integrating the latest enhancements and maintaining compatibility
with the current main branch.

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/dialog/content/manager/button/PackActionButton.vue

@@ -1,53 +0,0 @@
-<template>
-  <Button
-    outlined
-    class="!m-0 p-0 rounded-lg text-gray-900 dark-theme:text-gray-50"
-    :class="[
-      variant === 'black'
-        ? 'bg-neutral-900 text-white border-neutral-900'
-        : 'border-neutral-700',
-      fullWidth ? 'w-full' : 'w-min-content'
-    ]"
-    :disabled="loading"
-    v-bind="$attrs"
-    @click="onClick"
-  >
-    <span class="py-2 px-3 whitespace-nowrap">
-      <template v-if="loading">
-        {{ loadingMessage ?? $t('g.loading') }}
-      </template>
-      <template v-else>
-        {{ label }}
-      </template>
-    </span>
-  </Button>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-
-const {
-  label,
-  loadingMessage,
-  fullWidth = false,
-  variant = 'default'
-} = defineProps<{
-  label: string
-  loading?: boolean
-  loadingMessage?: string
-  fullWidth?: boolean
-  variant?: 'default' | 'black'
-}>()
-
-const emit = defineEmits<{
-  action: []
-}>()
-
-defineOptions({
-  inheritAttrs: false
-})
-
-const onClick = (): void => {
-  emit('action')
-}
-</script>

src/components/dialog/content/manager/button/PackEnableToggle.vue

@@ -16,11 +16,11 @@ import { computed, ref } from 'vue'
 
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import {
-  InstallPackParams,
   ManagerChannel,
-  SelectedVersion
+  ManagerDatabaseSource
 } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
+import { components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 const TOGGLE_DEBOUNCE_MS = 256
 
@@ -28,37 +28,42 @@ const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
 }>()
 
-const { isPackEnabled, enablePack, disablePack, installedPacks } =
-  useComfyManagerStore()
+const { isPackEnabled, enablePack, disablePack } = useComfyManagerStore()
 
 const isLoading = ref(false)
 
 const isEnabled = computed(() => isPackEnabled(nodePack.id))
-const version = computed(() => {
-  const id = nodePack.id
-  if (!id) return SelectedVersion.NIGHTLY
-  return (
-    installedPacks[id]?.ver ??
-    nodePack.latest_version?.version ??
-    SelectedVersion.NIGHTLY
-  )
-})
 
-const handleEnable = () =>
-  enablePack.call({
+const handleEnable = () => {
+  if (!nodePack.id) {
+    throw new Error('Node ID is required for enabling')
+  }
+  return enablePack.call({
     id: nodePack.id,
-    version: version.value,
-    selected_version: version.value,
+    version:
+      nodePack.latest_version?.version ??
+      ('latest' as ManagerComponents['schemas']['SelectedVersion']),
+    selected_version:
+      nodePack.latest_version?.version ??
+      ('latest' as ManagerComponents['schemas']['SelectedVersion']),
     repository: nodePack.repository ?? '',
     channel: ManagerChannel.DEFAULT,
-    mode: 'default' as InstallPackParams['mode']
+    mode: ManagerDatabaseSource.CACHE,
+    skip_post_install: false
   })
+}
 
-const handleDisable = () =>
-  disablePack({
+const handleDisable = () => {
+  if (!nodePack.id) {
+    throw new Error('Node ID is required for disabling')
+  }
+  return disablePack({
     id: nodePack.id,
-    version: version.value
+    version:
+      nodePack.latest_version?.version ??
+      ('latest' as ManagerComponents['schemas']['SelectedVersion'])
   })
+}
 
 const handleToggle = async (enable: boolean) => {
   if (isLoading.value) return
@@ -67,10 +72,16 @@ const handleToggle = async (enable: boolean) => {
   if (enable) {
     await handleEnable()
   } else {
-    handleDisable()
+    await handleDisable()
   }
   isLoading.value = false
 }
 
-const onToggle = debounce(handleToggle, TOGGLE_DEBOUNCE_MS, { trailing: true })
+const onToggle = debounce(
+  (enable: boolean) => {
+    void handleToggle(enable)
+  },
+  TOGGLE_DEBOUNCE_MS,
+  { trailing: true }
+)
 </script>

src/components/dialog/content/manager/button/PackInstallButton.vue

@@ -1,26 +1,28 @@
 <template>
-  <PackActionButton
+  <IconTextButton
     v-bind="$attrs"
-    :label="
-      label ??
-      (nodePacks.length > 1 ? $t('manager.installSelected') : $t('g.install'))
-    "
-    :severity="variant === 'black' ? undefined : 'secondary'"
-    :variant="variant"
-    :loading="isInstalling"
-    :loading-message="$t('g.installing')"
-    @action="installAllPacks"
-    @click="onClick"
-  />
+    type="transparent"
+    :label="computedLabel"
+    :border="true"
+    :size="size"
+    :disabled="isLoading || isInstalling"
+    @click="installAllPacks"
+  >
+    <template v-if="isLoading || isInstalling" #icon>
+      <DotSpinner duration="1s" :size="size === 'sm' ? 12 : 16" />
+    </template>
+  </IconTextButton>
 </template>
 
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { computed } from 'vue'
 
-import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import DotSpinner from '@/components/common/DotSpinner.vue'
+import { t } from '@/i18n'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { ButtonSize } from '@/types/buttonTypes'
 import {
-  IsInstallingKey,
   ManagerChannel,
   ManagerDatabaseSource,
   SelectedVersion
@@ -29,18 +31,20 @@ import type { components } from '@/types/comfyRegistryTypes'
 
 type NodePack = components['schemas']['Node']
 
-const { nodePacks, variant, label } = defineProps<{
+const {
+  nodePacks,
+  isLoading = false,
+  isInstalling = false,
+  label = 'Install',
+  size = 'sm'
+} = defineProps<{
   nodePacks: NodePack[]
-  variant?: 'default' | 'black'
+  isLoading?: boolean
+  isInstalling?: boolean
   label?: string
+  size?: ButtonSize
 }>()
 
-const isInstalling = inject(IsInstallingKey, ref(false))
-
-const onClick = (): void => {
-  isInstalling.value = true
-}
-
 const managerStore = useComfyManagerStore()
 
 const createPayload = (installItem: NodePack) => {
@@ -65,8 +69,6 @@ const installPack = (item: NodePack) =>
 const installAllPacks = async () => {
   if (!nodePacks?.length) return
 
-  isInstalling.value = true
-
   const uninstalledPacks = nodePacks.filter(
     (pack) => !managerStore.isPackInstalled(pack.id)
   )
@@ -75,4 +77,11 @@ const installAllPacks = async () => {
   await Promise.all(uninstalledPacks.map(installPack))
   managerStore.installPack.clear()
 }
+
+const computedLabel = computed(() =>
+  isInstalling
+    ? t('g.installing')
+    : label ??
+      (nodePacks.length > 1 ? t('manager.installSelected') : t('g.install'))
+)
 </script>

src/components/dialog/content/manager/button/PackUninstallButton.vue

@@ -1,27 +1,30 @@
 <template>
-  <PackActionButton
+  <IconTextButton
     v-bind="$attrs"
+    type="transparent"
     :label="
       nodePacks.length > 1
         ? $t('manager.uninstallSelected')
         : $t('manager.uninstall')
     "
-    severity="danger"
-    :loading-message="$t('manager.uninstalling')"
-    @action="uninstallItems"
+    :border="true"
+    :size="size"
+    class="border-red-500"
+    @click="uninstallItems"
   />
 </template>
 
 <script setup lang="ts">
-import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { ButtonSize } from '@/types/buttonTypes'
 import type { ManagerPackInfo } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
 
 type NodePack = components['schemas']['Node']
 
-const { nodePacks } = defineProps<{
+const { nodePacks, size } = defineProps<{
   nodePacks: NodePack[]
+  size?: ButtonSize
 }>()
 
 const managerStore = useComfyManagerStore()

src/components/dialog/content/manager/button/PackUpdateButton.vue

@@ -0,0 +1,78 @@
+<template>
+  <PackActionButton
+    v-bind="$attrs"
+    variant="black"
+    :label="$t('manager.updateAll')"
+    :loading="isUpdating"
+    :loading-message="$t('g.updating')"
+    @action="updateAllPacks"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import type { components } from '@/types/comfyRegistryTypes'
+
+type NodePack = components['schemas']['Node']
+
+const { nodePacks } = defineProps<{
+  nodePacks: NodePack[]
+}>()
+
+const isUpdating = ref<boolean>(false)
+
+const managerStore = useComfyManagerStore()
+
+const createPayload = (updateItem: NodePack) => {
+  return {
+    id: updateItem.id!,
+    version: updateItem.latest_version!.version!
+  }
+}
+
+const updatePack = async (item: NodePack) => {
+  if (!item.id || !item.latest_version?.version) {
+    console.warn('Pack missing required id or version:', item)
+    return
+  }
+  await managerStore.updatePack.call(createPayload(item))
+}
+
+const updateAllPacks = async () => {
+  if (!nodePacks?.length) {
+    console.warn('No packs provided for update')
+    return
+  }
+
+  isUpdating.value = true
+
+  const updatablePacks = nodePacks.filter((pack) =>
+    managerStore.isPackInstalled(pack.id)
+  )
+
+  if (!updatablePacks.length) {
+    console.info('No installed packs available for update')
+    isUpdating.value = false
+    return
+  }
+
+  console.info(`Starting update of ${updatablePacks.length} packs`)
+
+  try {
+    await Promise.all(updatablePacks.map(updatePack))
+    managerStore.updatePack.clear()
+    console.info('All packs updated successfully')
+  } catch (error) {
+    console.error('Pack update failed:', error)
+    console.error(
+      'Failed packs info:',
+      updatablePacks.map((p) => p.id)
+    )
+  } finally {
+    isUpdating.value = false
+  }
+}
+</script>