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

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)
   )

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
 )

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>