[Manager] "Restarting" state after clicking restart button (#4637)

2026-02-05 07:30:11 +00:00 · 2025-08-02 04:04:58 +09:00
parent 5abe2d0822
commit 211eeff143
8 changed files with 859 additions and 71 deletions
--- a/src/components/common/DotSpinner.vue
+++ b/src/components/common/DotSpinner.vue
@@ -0,0 +1,131 @@
+<template>
+  <div
+    class="inline-flex items-center justify-center"
+    :style="{ width: size + 'px', height: size + 'px' }"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :width="size"
+      :height="size"
+      viewBox="0 0 14 14"
+      fill="none"
+      class="animate-spin"
+      :style="{ animationDuration: duration }"
+    >
+      <g clip-path="url(#clip0_776_9582)">
+        <!-- Top dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M7 2.21053C7.61042 2.21053 8.10526 1.71568 8.10526 1.10526C8.10526 0.494843 7.61042 0 7 0C6.38958 0 5.89474 0.494843 5.89474 1.10526C5.89474 1.71568 6.38958 2.21053 7 2.21053Z"
+          :fill="color"
+        />
+        <!-- Left dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.25s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.21053 7C2.21053 7.61042 1.71568 8.10526 1.10526 8.10526C0.494843 8.10526 0 7.61042 0 7C0 6.38958 0.494843 5.89474 1.10526 5.89474C1.71568 5.89474 2.21053 6.38958 2.21053 7Z"
+          :fill="color"
+        />
+        <!-- Right dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.5s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M14 7C14 7.61042 13.5052 8.10526 12.8947 8.10526C12.2843 8.10526 11.7895 7.61042 11.7895 7C11.7895 6.38958 12.2843 5.89474 12.8947 5.89474C13.5052 5.89474 14 6.38958 14 7Z"
+          :fill="color"
+        />
+        <!-- Bottom dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.75s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M8.10526 12.8947C8.10526 13.5052 7.61041 14 6.99999 14C6.38957 14 5.89473 13.5052 5.89473 12.8947C5.89473 12.2843 6.38957 11.7895 6.99999 11.7895C7.61041 11.7895 8.10526 12.2843 8.10526 12.8947Z"
+          :fill="color"
+        />
+        <!-- Top-left dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.125s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.05039 3.61349C2.48203 4.04513 3.18184 4.04513 3.61347 3.61349C4.0451 3.18186 4.0451 2.48205 3.61347 2.05042C3.18184 1.61878 2.48203 1.61878 2.05039 2.05042C1.61876 2.48205 1.61876 3.18186 2.05039 3.61349Z"
+          :fill="color"
+        />
+        <!-- Bottom-right dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.625s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M11.9496 11.9496C11.518 12.3812 10.8182 12.3812 10.3865 11.9496C9.9549 11.5179 9.9549 10.8181 10.3865 10.3865C10.8182 9.95485 11.518 9.95485 11.9496 10.3865C12.3812 10.8181 12.3812 11.5179 11.9496 11.9496Z"
+          :fill="color"
+        />
+        <!-- Bottom-left dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.875s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.05039 11.9496C2.48203 12.3812 3.18184 12.3812 3.61347 11.9496C4.0451 11.5179 4.0451 10.8181 3.61347 10.3865C3.18184 9.95485 2.48203 9.95485 2.05039 10.3865C1.61876 10.8181 1.61876 11.5179 2.05039 11.9496Z"
+          :fill="color"
+        />
+        <!-- Top-right dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.375s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M11.9496 3.61349C11.518 4.04513 10.8182 4.04513 10.3865 3.61349C9.9549 3.18186 9.9549 2.48205 10.3865 2.05042C10.8182 1.61878 11.518 1.61878 11.9496 2.05042C12.3812 2.48205 12.3812 3.18186 11.9496 3.61349Z"
+          :fill="color"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_776_9582">
+          <rect width="14" height="14" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+
+const { size = 24, duration = '2s' } = defineProps<{
+  size?: number
+  duration?: string
+}>()
+
+const colorPaletteStore = useColorPaletteStore()
+
+const color = computed(() =>
+  colorPaletteStore.completedActivePalette.light_theme ? '#2C2B30' : '#D4D4D4'
+)
+</script>
+
+<style scoped>
+.dot-animation {
+  animation: dot-pulse 1s ease-in-out infinite;
+}
+
+@keyframes dot-pulse {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+  }
+
+  40% {
+    opacity: 1;
+  }
+}
+</style>
--- a/src/components/dialog/content/manager/button/PackInstallButton.vue
+++ b/src/components/dialog/content/manager/button/PackInstallButton.vue
@@ -10,7 +10,6 @@
    :loading="isInstalling"
    :loading-message="$t('g.installing')"
    @action="installAllPacks"
-    @click="onClick"
  />
 </template>

@@ -37,10 +36,6 @@ const { nodePacks, variant, label } = defineProps<{

 const isInstalling = inject(IsInstallingKey, ref(false))

-const onClick = (): void => {
-  isInstalling.value = true
-}
-
 const managerStore = useComfyManagerStore()

 const createPayload = (installItem: NodePack) => {
@@ -65,8 +60,6 @@ const installPack = (item: NodePack) =>
 const installAllPacks = async () => {
  if (!nodePacks?.length) return

-  isInstalling.value = true
-
  const uninstalledPacks = nodePacks.filter(
    (pack) => !managerStore.isPackInstalled(pack.id)
  )
--- a/src/components/dialog/content/manager/packCard/PackCard.vue
+++ b/src/components/dialog/content/manager/packCard/PackCard.vue
@@ -84,10 +84,9 @@
 </template>

 <script setup lang="ts">
-import { whenever } from '@vueuse/core'
 import Card from 'primevue/card'
 import ProgressSpinner from 'primevue/progressspinner'
-import { computed, provide, ref } from 'vue'
+import { computed, provide } from 'vue'
 import { useI18n } from 'vue-i18n'

 import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
@@ -114,18 +113,17 @@ const isLightTheme = computed(
  () => colorPaletteStore.completedActivePalette.light_theme
 )

-const isInstalling = ref(false)
-provide(IsInstallingKey, isInstalling)
+const { isPackInstalled, isPackEnabled, isPackInstalling } =
+  useComfyManagerStore()

-const { isPackInstalled, isPackEnabled } = useComfyManagerStore()
+const isInstalling = computed(() => isPackInstalling(nodePack?.id))
+provide(IsInstallingKey, isInstalling)

 const isInstalled = computed(() => isPackInstalled(nodePack?.id))
 const isDisabled = computed(
  () => isInstalled.value && !isPackEnabled(nodePack?.id)
 )

-whenever(isInstalled, () => (isInstalling.value = false))
-
 const nodesCount = computed(() =>
  isMergedNodePack(nodePack) ? nodePack.comfy_nodes?.length : undefined
 )
--- a/src/components/dialog/footer/ManagerProgressFooter.vue
+++ b/src/components/dialog/footer/ManagerProgressFooter.vue
@@ -1,40 +1,47 @@
 <template>
  <div
-    class="w-full px-6 py-4 shadow-lg flex items-center justify-between"
+    class="w-full px-6 py-2 shadow-lg flex items-center justify-between"
    :class="{
      'rounded-t-none': progressDialogContent.isExpanded,
      'rounded-lg': !progressDialogContent.isExpanded
    }"
  >
-    <div class="justify-center text-sm font-bold leading-none">
+    <div class="flex items-center text-base leading-none">
      <div class="flex items-center">
-        <template v-if="isInProgress">
-          <i class="pi pi-spin pi-spinner mr-2 text-3xl" />
+        <!-- 1. Queue running (install/enable/disable etc.) -->
+        <template v-if="isQueueRunning">
+          <DotSpinner duration="1s" class="mr-2" />
          <span>{{ currentTaskName }}</span>
        </template>
+        <!-- 3. Restarting -->
+        <template v-else-if="isRestarting">
+          <DotSpinner duration="1s" class="mr-2" />
+          <span>{{ $t('manager.restartingBackend') }}</span>
+        </template>
+        <!-- 4. Restart completed -->
+        <template v-else-if="isRestartCompleted">
+          <span class="mr-2">🎉</span>
+          <span>{{ $t('manager.extensionsSuccessfullyInstalled') }}</span>
+        </template>
+        <!-- 2. Tasks completed (waiting for restart) -->
        <template v-else>
-          <i class="pi pi-check-circle mr-2 text-green-500" />
-          <span class="leading-none">{{
-            $t('manager.restartToApplyChanges')
-          }}</span>
+          <span class="mr-2">✅</span>
+          <span>
+            {{ $t('manager.clickToFinishSetup') }}
+            '{{ $t('manager.applyChanges') }}'
+            {{ $t('manager.toFinishSetup') }}
+          </span>
        </template>
      </div>
    </div>
+
    <div class="flex items-center gap-4">
-      <span v-if="isInProgress" class="text-xs font-bold text-neutral-600">
-        {{ comfyManagerStore.uncompletedCount }} {{ $t('g.progressCountOf') }}
-        {{ comfyManagerStore.taskLogs.length }}
-      </span>
-      <div class="flex items-center">
-        <Button
-          v-if="!isInProgress"
-          rounded
-          outlined
-          class="px-4 py-2 rounded-md mr-4"
-          @click="handleRestart"
-        >
-          {{ $t('g.restart') }}
-        </Button>
+      <!-- 1. Queue running -->
+      <template v-if="isQueueRunning">
+        <span class="text-sm text-neutral-700 dark-theme:text-neutral-400">
+          {{ completedTasksCount }} {{ $t('g.progressCountOf') }}
+          {{ taskLogs }}
+        </span>
        <Button
          :icon="
            progressDialogContent.isExpanded
@@ -44,20 +51,46 @@
          text
          rounded
          size="small"
+          class="font-bold"
          severity="secondary"
          :aria-label="progressDialogContent.isExpanded ? 'Collapse' : 'Expand'"
          @click.stop="progressDialogContent.toggle"
        />
+      </template>
+
+      <!-- 2. Tasks completed (waiting for restart) -->
+      <template v-else-if="!isRestarting && !isRestartCompleted">
        <Button
-          icon="pi pi-times"
-          text
          rounded
-          size="small"
-          severity="secondary"
-          aria-label="Close"
-          @click.stop="closeDialog"
-        />
-      </div>
+          outlined
+          class="rounded-md border-2 px-3 text-neutral-600 border-neutral-900 hover:bg-neutral-100 dark-theme:bg-none dark-theme:text-white dark-theme:border-white dark-theme:hover:bg-neutral-700"
+          @click="handleRestart"
+        >
+          {{ $t('manager.applyChanges') }}
+        </Button>
+      </template>
+
+      <!-- 3. Restarting -->
+      <template v-else-if="isRestarting">
+        <!-- No buttons during restart -->
+      </template>
+
+      <!-- 4. Restart completed -->
+      <template v-else-if="isRestartCompleted">
+        <!-- No buttons after restart completed (auto-close after 3 seconds) -->
+      </template>
+
+      <!-- Common: Close button -->
+      <Button
+        icon="pi pi-times"
+        text
+        rounded
+        size="small"
+        class="font-bold"
+        severity="secondary"
+        aria-label="Close"
+        @click.stop="closeDialog"
+      />
    </div>
  </div>
 </template>
@@ -65,9 +98,10 @@
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import Button from 'primevue/button'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

+import DotSpinner from '@/components/common/DotSpinner.vue'
 import { api } from '@/scripts/api'
 import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useWorkflowService } from '@/services/workflowService'
@@ -77,19 +111,34 @@ import {
 } from '@/stores/comfyManagerStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useSettingStore } from '@/stores/settingStore'

 const { t } = useI18n()
 const dialogStore = useDialogStore()
 const progressDialogContent = useManagerProgressDialogStore()
 const comfyManagerStore = useComfyManagerStore()
+const settingStore = useSettingStore()

-const isInProgress = computed(() => comfyManagerStore.uncompletedCount > 0)
+// State management for restart process
+const isRestarting = ref<boolean>(false)
+const isRestartCompleted = ref<boolean>(false)
+
+// Computed states
+const isQueueRunning = computed(() => comfyManagerStore.uncompletedCount > 0)
+const taskLogs = computed(() => comfyManagerStore.taskLogs.length)
+
+const completedTasksCount = computed(() => {
+  if (isQueueRunning.value && taskLogs.value > 0) {
+    return taskLogs.value - 1
+  }
+  return taskLogs.value
+})

 const closeDialog = () => {
  dialogStore.closeDialog({ key: 'global-manager-progress-dialog' })
 }

-const fallbackTaskName = t('g.installing')
+const fallbackTaskName = t('manager.installingDependencies')
 const currentTaskName = computed(() => {
  if (!comfyManagerStore.taskLogs.length) return fallbackTaskName
  const task = comfyManagerStore.taskLogs.at(-1)
@@ -97,21 +146,52 @@ const currentTaskName = computed(() => {
 })

 const handleRestart = async () => {
-  const onReconnect = async () => {
-    // Refresh manager state
+  // Store original toast setting value
+  const originalToastSetting = settingStore.get(
+    'Comfy.Toast.DisableReconnectingToast'
+  )

-    comfyManagerStore.clearLogs()
-    comfyManagerStore.setStale()
+  try {
+    await settingStore.set('Comfy.Toast.DisableReconnectingToast', true)

-    // Refresh node definitions
-    await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
+    isRestarting.value = true

-    // Reload workflow
-    await useWorkflowService().reloadCurrentWorkflow()
+    const onReconnect = async () => {
+      try {
+        comfyManagerStore.setStale()
+
+        await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
+
+        await useWorkflowService().reloadCurrentWorkflow()
+      } finally {
+        await settingStore.set(
+          'Comfy.Toast.DisableReconnectingToast',
+          originalToastSetting
+        )
+
+        isRestarting.value = false
+        isRestartCompleted.value = true
+
+        setTimeout(() => {
+          closeDialog()
+          comfyManagerStore.clearLogs()
+        }, 3000)
+      }
+    }
+
+    useEventListener(api, 'reconnected', onReconnect, { once: true })
+
+    await useComfyManagerService().rebootComfyUI()
+  } catch (error) {
+    // If restart fails, restore settings and reset state
+    await settingStore.set(
+      'Comfy.Toast.DisableReconnectingToast',
+      originalToastSetting
+    )
+    isRestarting.value = false
+    isRestartCompleted.value = false
+    closeDialog() // Close dialog on error
+    throw error
  }
-  useEventListener(api, 'reconnected', onReconnect, { once: true })
-
-  await useComfyManagerService().rebootComfyUI()
-  closeDialog()
 }
 </script>
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -161,6 +161,12 @@
    "inWorkflow": "In Workflow",
    "infoPanelEmpty": "Click an item to see the info",
    "restartToApplyChanges": "To apply changes, please restart ComfyUI",
+    "clickToFinishSetup": "Click",
+    "toFinishSetup": "to finish setup",
+    "applyChanges": "Apply Changes",
+    "restartingBackend": "Restarting backend to apply changes...",
+    "extensionsSuccessfullyInstalled": "Extension(s) successfully installed and are ready to use!",
+    "installingDependencies": "Installing dependencies...",
    "loadingVersions": "Loading versions...",
    "selectVersion": "Select Version",
    "downloads": "Downloads",
--- a/src/stores/comfyManagerStore.ts
+++ b/src/stores/comfyManagerStore.ts
@@ -29,6 +29,7 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
  const enabledPacksIds = ref<Set<string>>(new Set())
  const disabledPacksIds = ref<Set<string>>(new Set())
  const installedPacksIds = ref<Set<string>>(new Set())
+  const installingPacksIds = ref<Set<string>>(new Set())
  const isStale = ref(true)
  const taskLogs = ref<TaskLog[]>([])

@@ -49,6 +50,9 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
    isInstalledPackId(packName) &&
    enabledPacksIds.value.has(packName)

+  const isInstallingPackId = (packName: string | undefined): boolean =>
+    !!packName && installingPacksIds.value.has(packName)
+
  const packsToIdSet = (packs: ManagerPackInstalled[]) =>
    packs.reduce((acc, pack) => {
      const id = pack.cnr_id || pack.aux_id
@@ -117,7 +121,11 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
  whenever(isStale, refreshInstalledList, { immediate: true })
  whenever(uncompletedCount, () => showManagerProgressDialog())

-  const withLogs = (task: () => Promise<null>, taskName: string) => {
+  const withLogs = (
+    task: () => Promise<null>,
+    taskName: string,
+    packId?: string
+  ) => {
    const { startListening, stopListening, logs } = useServerLogs()

    const loggedTask = async () => {
@@ -128,6 +136,9 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {

    const onComplete = async () => {
      await stopListening()
+      if (packId) {
+        installingPacksIds.value.delete(packId)
+      }
      setStale()
    }

@@ -152,8 +163,11 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
        }
      }

+      installingPacksIds.value.add(params.id)
      const task = () => managerService.installPack(params, signal)
-      enqueueTask(withLogs(task, `${actionDescription} ${params.id}`))
+      enqueueTask(
+        withLogs(task, `${actionDescription} ${params.id}`, params.id)
+      )
    },
    { maxSize: 1 }
  )
@@ -162,14 +176,16 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
    installPack.clear()
    installPack.cancel()
    const task = () => managerService.uninstallPack(params, signal)
-    enqueueTask(withLogs(task, t('manager.uninstalling', { id: params.id })))
+    enqueueTask(
+      withLogs(task, t('manager.uninstalling', { id: params.id }), params.id)
+    )
  }

  const updatePack = useCachedRequest<ManagerPackInfo, void>(
    async (params: ManagerPackInfo, signal?: AbortSignal) => {
      updateAllPacks.cancel()
      const task = () => managerService.updatePack(params, signal)
-      enqueueTask(withLogs(task, t('g.updating', { id: params.id })))
+      enqueueTask(withLogs(task, t('g.updating', { id: params.id }), params.id))
    },
    { maxSize: 1 }
  )
@@ -184,7 +200,7 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {

  const disablePack = (params: ManagerPackInfo, signal?: AbortSignal) => {
    const task = () => managerService.disablePack(params, signal)
-    enqueueTask(withLogs(task, t('g.disabling', { id: params.id })))
+    enqueueTask(withLogs(task, t('g.disabling', { id: params.id }), params.id))
  }

  const getInstalledPackVersion = (packId: string) => {
@@ -212,6 +228,7 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
    installedPacksIds,
    isPackInstalled: isInstalledPackId,
    isPackEnabled: isEnabledPackId,
+    isPackInstalling: isInstallingPackId,
    getInstalledPackVersion,
    refreshInstalledList,

--- a/tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts
+++ b/tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts
@@ -0,0 +1,440 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import ManagerProgressFooter from '@/components/dialog/footer/ManagerProgressFooter.vue'
+import { useComfyManagerService } from '@/services/comfyManagerService'
+import {
+  useComfyManagerStore,
+  useManagerProgressDialogStore
+} from '@/stores/comfyManagerStore'
+import { useCommandStore } from '@/stores/commandStore'
+import { useDialogStore } from '@/stores/dialogStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { TaskLog } from '@/types/comfyManagerTypes'
+
+// Mock modules
+vi.mock('@/stores/comfyManagerStore')
+vi.mock('@/stores/dialogStore')
+vi.mock('@/stores/settingStore')
+vi.mock('@/stores/commandStore')
+vi.mock('@/services/comfyManagerService')
+
+// Mock useEventListener to capture the event handler
+let reconnectHandler: (() => void) | null = null
+vi.mock('@vueuse/core', async () => {
+  const actual = await vi.importActual('@vueuse/core')
+  return {
+    ...actual,
+    useEventListener: vi.fn(
+      (_target: any, event: string, handler: any, _options: any) => {
+        if (event === 'reconnected') {
+          reconnectHandler = handler
+        }
+      }
+    )
+  }
+})
+vi.mock('@/services/workflowService', () => ({
+  useWorkflowService: vi.fn(() => ({
+    reloadCurrentWorkflow: vi.fn().mockResolvedValue(undefined)
+  }))
+}))
+vi.mock('@/stores/workspace/colorPaletteStore', () => ({
+  useColorPaletteStore: vi.fn(() => ({
+    completedActivePalette: {
+      light_theme: false
+    }
+  }))
+}))
+
+// Helper function to mount component with required setup
+const mountComponent = (options: { captureError?: boolean } = {}) => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {}
+    }
+  })
+
+  const config: any = {
+    global: {
+      plugins: [PrimeVue, i18n],
+      mocks: {
+        $t: (key: string) => key // Mock i18n translation
+      }
+    }
+  }
+
+  // Add error handler for tests that expect errors
+  if (options.captureError) {
+    config.global.config = {
+      errorHandler: () => {
+        // Suppress error in test
+      }
+    }
+  }
+
+  return mount(ManagerProgressFooter, config)
+}
+
+describe('ManagerProgressFooter', () => {
+  const mockTaskLogs: TaskLog[] = []
+
+  const mockComfyManagerStore = {
+    uncompletedCount: 0,
+    taskLogs: mockTaskLogs,
+    allTasksDone: true,
+    clearLogs: vi.fn(),
+    setStale: vi.fn(),
+    // Add other required properties
+    isLoading: { value: false },
+    error: { value: null },
+    statusMessage: { value: 'DONE' },
+    installedPacks: {},
+    installedPacksIds: new Set(),
+    isPackInstalled: vi.fn(),
+    isPackEnabled: vi.fn(),
+    getInstalledPackVersion: vi.fn(),
+    refreshInstalledList: vi.fn(),
+    installPack: vi.fn(),
+    uninstallPack: vi.fn(),
+    updatePack: vi.fn(),
+    updateAllPacks: vi.fn(),
+    disablePack: vi.fn(),
+    enablePack: vi.fn()
+  }
+
+  const mockDialogStore = {
+    closeDialog: vi.fn(),
+    // Add other required properties
+    dialogStack: { value: [] },
+    showDialog: vi.fn(),
+    $id: 'dialog',
+    $state: {} as any,
+    $patch: vi.fn(),
+    $reset: vi.fn(),
+    $subscribe: vi.fn(),
+    $dispose: vi.fn(),
+    $onAction: vi.fn()
+  }
+
+  const mockSettingStore = {
+    get: vi.fn().mockReturnValue(false),
+    set: vi.fn(),
+    // Add other required properties
+    settingValues: { value: {} },
+    settingsById: { value: {} },
+    exists: vi.fn(),
+    getDefaultValue: vi.fn(),
+    loadSettingValues: vi.fn(),
+    updateValue: vi.fn(),
+    $id: 'setting',
+    $state: {} as any,
+    $patch: vi.fn(),
+    $reset: vi.fn(),
+    $subscribe: vi.fn(),
+    $dispose: vi.fn(),
+    $onAction: vi.fn()
+  }
+
+  const mockProgressDialogStore = {
+    isExpanded: false,
+    toggle: vi.fn(),
+    collapse: vi.fn(),
+    expand: vi.fn()
+  }
+
+  const mockCommandStore = {
+    execute: vi.fn().mockResolvedValue(undefined)
+  }
+
+  const mockComfyManagerService = {
+    rebootComfyUI: vi.fn().mockResolvedValue(null)
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Reset task logs
+    mockTaskLogs.length = 0
+    mockComfyManagerStore.taskLogs = mockTaskLogs
+    // Reset event handler
+    reconnectHandler = null
+
+    vi.mocked(useComfyManagerStore).mockReturnValue(
+      mockComfyManagerStore as any
+    )
+    vi.mocked(useDialogStore).mockReturnValue(mockDialogStore as any)
+    vi.mocked(useSettingStore).mockReturnValue(mockSettingStore as any)
+    vi.mocked(useManagerProgressDialogStore).mockReturnValue(
+      mockProgressDialogStore as any
+    )
+    vi.mocked(useCommandStore).mockReturnValue(mockCommandStore as any)
+    vi.mocked(useComfyManagerService).mockReturnValue(
+      mockComfyManagerService as any
+    )
+  })
+
+  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
+      mockTaskLogs.push(
+        { taskName: 'Installing pack1', logs: [] },
+        { taskName: 'Installing pack2', logs: [] },
+        { taskName: 'Installing pack3', logs: [] }
+      )
+
+      const wrapper = mountComponent()
+
+      // Check loading spinner exists (DotSpinner component)
+      expect(wrapper.find('.inline-flex').exists()).toBe(true)
+
+      // Check current task name is displayed
+      expect(wrapper.text()).toContain('Installing pack3')
+
+      // Check progress counter (completed: 2 of 3)
+      expect(wrapper.text()).toMatch(/2.*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')
+    })
+
+    it('should toggle expansion when expand button is clicked', async () => {
+      mockComfyManagerStore.uncompletedCount = 1
+      mockTaskLogs.push({ taskName: 'Installing', logs: [] })
+
+      const wrapper = mountComponent()
+
+      const expandButton = wrapper.find('[aria-label="Expand"]')
+      await expandButton.trigger('click')
+
+      expect(mockProgressDialogStore.toggle).toHaveBeenCalled()
+    })
+  })
+
+  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
+      mockTaskLogs.push(
+        { taskName: 'Installed pack1', logs: [] },
+        { taskName: 'Installed pack2', logs: [] }
+      )
+      mockComfyManagerStore.allTasksDone = true
+
+      const wrapper = mountComponent()
+
+      // 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 Apply Changes button exists
+      const applyButton = wrapper
+        .findAll('button')
+        .find((btn) => btn.text().includes('manager.applyChanges'))
+      expect(applyButton).toBeTruthy()
+
+      // Check no progress counter
+      expect(wrapper.text()).not.toMatch(/\d+.*of.*\d+/)
+    })
+  })
+
+  describe('State 3: Restarting', () => {
+    it('should display restarting message and spinner during restart', async () => {
+      // Setup completed state first
+      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.allTasksDone = true
+
+      const wrapper = mountComponent()
+
+      // Click Apply Changes to trigger restart
+      const applyButton = wrapper
+        .findAll('button')
+        .find((btn) => btn.text().includes('manager.applyChanges'))
+      await applyButton?.trigger('click')
+
+      // Wait for state update
+      await nextTick()
+
+      // Check restarting message
+      expect(wrapper.text()).toContain('manager.restartingBackend')
+
+      // 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')
+    })
+  })
+
+  describe('State 4: Restart Completed', () => {
+    it('should display success message and auto-close after 3 seconds', async () => {
+      vi.useFakeTimers()
+
+      // Setup completed state
+      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.allTasksDone = true
+
+      const wrapper = mountComponent()
+
+      // Trigger restart
+      const applyButton = wrapper
+        .findAll('button')
+        .find((btn) => btn.text().includes('manager.applyChanges'))
+      await applyButton?.trigger('click')
+
+      // Wait for event listener to be set up
+      await nextTick()
+
+      // Trigger the reconnect handler directly
+      if (reconnectHandler) {
+        await reconnectHandler()
+      }
+
+      // Wait for restart completed state
+      await nextTick()
+
+      // Check success message
+      expect(wrapper.text()).toContain('🎉')
+      expect(wrapper.text()).toContain(
+        'manager.extensionsSuccessfullyInstalled'
+      )
+
+      // Check dialog closes after 3 seconds
+      vi.advanceTimersByTime(3000)
+
+      await nextTick()
+
+      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
+        key: 'global-manager-progress-dialog'
+      })
+      expect(mockComfyManagerStore.clearLogs).toHaveBeenCalled()
+
+      vi.useRealTimers()
+    })
+  })
+
+  describe('Common Features', () => {
+    it('should always display close button', async () => {
+      const wrapper = mountComponent()
+
+      const closeButton = wrapper.find('[aria-label="Close"]')
+      expect(closeButton.exists()).toBe(true)
+    })
+
+    it('should close dialog when close button is clicked', async () => {
+      const wrapper = mountComponent()
+
+      const closeButton = wrapper.find('[aria-label="Close"]')
+      await closeButton.trigger('click')
+
+      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
+        key: 'global-manager-progress-dialog'
+      })
+    })
+  })
+
+  describe('Toast Management', () => {
+    it('should suppress reconnection toasts during restart', async () => {
+      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.allTasksDone = true
+      mockSettingStore.get.mockReturnValue(false) // Original setting
+
+      const wrapper = mountComponent()
+
+      // Click Apply Changes
+      const applyButton = wrapper
+        .findAll('button')
+        .find((btn) => btn.text().includes('manager.applyChanges'))
+      await applyButton?.trigger('click')
+
+      // Check toast setting was disabled
+      expect(mockSettingStore.set).toHaveBeenCalledWith(
+        'Comfy.Toast.DisableReconnectingToast',
+        true
+      )
+    })
+
+    it('should restore toast settings after restart completes', async () => {
+      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.allTasksDone = true
+      mockSettingStore.get.mockReturnValue(false) // Original setting
+
+      const wrapper = mountComponent()
+
+      // Click Apply Changes
+      const applyButton = wrapper
+        .findAll('button')
+        .find((btn) => btn.text().includes('manager.applyChanges'))
+      await applyButton?.trigger('click')
+
+      // Wait for event listener to be set up
+      await nextTick()
+
+      // Trigger the reconnect handler directly
+      if (reconnectHandler) {
+        await reconnectHandler()
+      }
+
+      // Wait for settings restoration
+      await nextTick()
+
+      expect(mockSettingStore.set).toHaveBeenCalledWith(
+        'Comfy.Toast.DisableReconnectingToast',
+        false // Restored to original
+      )
+    })
+  })
+
+  describe('Error Handling', () => {
+    it('should restore state and close dialog on restart error', async () => {
+      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.allTasksDone = true
+
+      // Mock restart to throw error
+      mockComfyManagerService.rebootComfyUI.mockRejectedValue(
+        new Error('Restart failed')
+      )
+
+      const wrapper = mountComponent({ captureError: true })
+
+      // Click Apply Changes
+      const applyButton = wrapper
+        .findAll('button')
+        .find((btn) => btn.text().includes('manager.applyChanges'))
+
+      expect(applyButton).toBeTruthy()
+
+      // The component throws the error but Vue Test Utils catches it
+      // We need to check if the error handling logic was executed
+      await applyButton!.trigger('click').catch(() => {
+        // Error is expected, ignore it
+      })
+
+      // Wait for error handling
+      await nextTick()
+
+      // Check dialog was closed on error
+      expect(mockDialogStore.closeDialog).toHaveBeenCalled()
+      // Check toast settings were restored
+      expect(mockSettingStore.set).toHaveBeenCalledWith(
+        'Comfy.Toast.DisableReconnectingToast',
+        false
+      )
+      // Check that the error handler was called
+      expect(mockComfyManagerService.rebootComfyUI).toHaveBeenCalled()
+    })
+  })
+})
--- a/tests-ui/tests/store/comfyManagerStore.test.ts
+++ b/tests-ui/tests/store/comfyManagerStore.test.ts
@@ -6,6 +6,8 @@ import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import {
  InstalledPacksResponse,
+  ManagerChannel,
+  ManagerDatabaseSource,
  ManagerPackInstalled
 } from '@/types/comfyManagerTypes'

@@ -13,6 +15,34 @@ vi.mock('@/services/comfyManagerService', () => ({
  useComfyManagerService: vi.fn()
 }))

+vi.mock('@/services/dialogService', () => ({
+  useDialogService: () => ({
+    showManagerProgressDialog: vi.fn()
+  })
+}))
+
+vi.mock('@/composables/useManagerQueue', () => {
+  const enqueueTaskMock = vi.fn()
+
+  return {
+    useManagerQueue: () => ({
+      statusMessage: ref(''),
+      allTasksDone: ref(false),
+      enqueueTask: enqueueTaskMock,
+      uncompletedCount: ref(0)
+    }),
+    enqueueTask: enqueueTaskMock
+  }
+})
+
+vi.mock('@/composables/useServerLogs', () => ({
+  useServerLogs: () => ({
+    startListening: vi.fn(),
+    stopListening: vi.fn(),
+    logs: ref([])
+  })
+}))
+
 vi.mock('vue-i18n', () => ({
  useI18n: () => ({
    t: vi.fn((key) => key)
@@ -33,11 +63,7 @@ interface EnabledDisabledTestCase {
 }

 describe('useComfyManagerStore', () => {
-  let mockManagerService: {
-    isLoading: ReturnType<typeof ref<boolean>>
-    error: ReturnType<typeof ref<string | null>>
-    listInstalledPacks: ReturnType<typeof vi.fn>
-  }
+  let mockManagerService: ReturnType<typeof useComfyManagerService>

  const triggerPacksChange = async (
    installedPacks: InstalledPacksResponse,
@@ -55,10 +81,21 @@ describe('useComfyManagerStore', () => {
    mockManagerService = {
      isLoading: ref(false),
      error: ref(null),
-      listInstalledPacks: vi.fn().mockResolvedValue({})
+      startQueue: vi.fn().mockResolvedValue(null),
+      resetQueue: vi.fn().mockResolvedValue(null),
+      getQueueStatus: vi.fn().mockResolvedValue(null),
+      listInstalledPacks: vi.fn().mockResolvedValue({}),
+      getImportFailInfo: vi.fn().mockResolvedValue(null),
+      installPack: vi.fn().mockResolvedValue(null),
+      uninstallPack: vi.fn().mockResolvedValue(null),
+      enablePack: vi.fn().mockResolvedValue(null),
+      disablePack: vi.fn().mockResolvedValue(null),
+      updatePack: vi.fn().mockResolvedValue(null),
+      updateAllPacks: vi.fn().mockResolvedValue(null),
+      rebootComfyUI: vi.fn().mockResolvedValue(null),
+      isLegacyManagerUI: vi.fn().mockResolvedValue(false)
    }

-    // @ts-expect-error Mocking the return type of useComfyManagerService
    vi.mocked(useComfyManagerService).mockReturnValue(mockManagerService)
  })

@@ -313,4 +350,90 @@ describe('useComfyManagerStore', () => {
      }
    )
  })
+
+  describe('isPackInstalling', () => {
+    it('should return false for packs not being installed', () => {
+      const store = useComfyManagerStore()
+      expect(store.isPackInstalling('test-pack')).toBe(false)
+      expect(store.isPackInstalling(undefined)).toBe(false)
+      expect(store.isPackInstalling('')).toBe(false)
+    })
+
+    it('should track pack as installing when installPack is called', async () => {
+      const store = useComfyManagerStore()
+
+      // Call installPack
+      await store.installPack.call({
+        id: 'test-pack',
+        repository: 'https://github.com/test/test-pack',
+        channel: ManagerChannel.DEV,
+        mode: ManagerDatabaseSource.CACHE,
+        selected_version: 'latest',
+        version: 'latest'
+      })
+
+      // Check that the pack is marked as installing
+      expect(store.isPackInstalling('test-pack')).toBe(true)
+    })
+
+    it('should remove pack from installing list when explicitly removed', async () => {
+      const store = useComfyManagerStore()
+
+      // Call installPack
+      await store.installPack.call({
+        id: 'test-pack',
+        repository: 'https://github.com/test/test-pack',
+        channel: ManagerChannel.DEV,
+        mode: ManagerDatabaseSource.CACHE,
+        selected_version: 'latest',
+        version: 'latest'
+      })
+
+      // Verify pack is installing
+      expect(store.isPackInstalling('test-pack')).toBe(true)
+
+      // Call installPack again for another pack to demonstrate multiple installs
+      await store.installPack.call({
+        id: 'another-pack',
+        repository: 'https://github.com/test/another-pack',
+        channel: ManagerChannel.DEV,
+        mode: ManagerDatabaseSource.CACHE,
+        selected_version: 'latest',
+        version: 'latest'
+      })
+
+      // Both should be installing
+      expect(store.isPackInstalling('test-pack')).toBe(true)
+      expect(store.isPackInstalling('another-pack')).toBe(true)
+    })
+
+    it('should track multiple packs installing independently', async () => {
+      const store = useComfyManagerStore()
+
+      // Install pack 1
+      await store.installPack.call({
+        id: 'pack-1',
+        repository: 'https://github.com/test/pack-1',
+        channel: ManagerChannel.DEV,
+        mode: ManagerDatabaseSource.CACHE,
+        selected_version: 'latest',
+        version: 'latest'
+      })
+
+      // Install pack 2
+      await store.installPack.call({
+        id: 'pack-2',
+        repository: 'https://github.com/test/pack-2',
+        channel: ManagerChannel.DEV,
+        mode: ManagerDatabaseSource.CACHE,
+        selected_version: 'latest',
+        version: 'latest'
+      })
+
+      // Both should be installing
+      expect(store.isPackInstalling('pack-1')).toBe(true)
+      expect(store.isPackInstalling('pack-2')).toBe(true)
+      expect(store.isPackInstalling('pack-3')).toBe(false)
+    })
+  })
 })