Add troubleshooting dialog / section

src/components/dialog/GlobalDialog.vue

@@ -16,7 +16,7 @@
         :is="item.headerComponent"
         :id="item.key"
       />
-      <h3 v-else :id="item.key">{{ item.title || ' ' }}</h3>
+      <h3 v-else :id="item.key" class="ml-4">{{ item.title || ' ' }}</h3>
     </template>
 
     <component

src/components/troubleshooting/RestoreCustomNodes.vue

@@ -0,0 +1,141 @@
+<template>
+  <!-- Never run -->
+  <template v-if="!state">
+    <a
+      class="w-full h-full flex items-center justify-center transition duration-125 ease-in-out bg-opacity-0 hover:bg-opacity-30 bg-black cursor-pointer"
+      @click="restoreCustomNodes()"
+    >
+      <i
+        class="pi pi-download text-6xl"
+        :class="{ 'text-red-600': commandFailed }"
+      ></i>
+      <p v-if="commandFailed" class="absolute top-0">Unknown Error</p>
+    </a>
+  </template>
+  <!-- Running -->
+  <template v-else-if="state === 'running'">
+    <div
+      class="relative inset-0 z-1 h-full flex flex-col bg-black bg-opacity-50 items-center justify-between"
+    >
+      <ProgressSpinner class="absolute inset-0 z-1 w-3/12 h-full" />
+      <p v-if="current === 0">
+        {{ $t('troubleshooting.restoreCustomNodes.loading') }}
+      </p>
+      <p v-else>
+        {{ $t('troubleshooting.restoreCustomNodes.installing') }}:
+        {{ current }} / {{ total }}
+      </p>
+      <p v-if="failed > 0" class="text-red-600">
+        {{ $t('troubleshooting.restoreCustomNodes.failed') }}:
+        {{ failed }}
+      </p>
+    </div>
+  </template>
+  <!-- Complete -->
+  <template v-else-if="state === 'complete'">
+    <div class="z-1 h-full flex flex-col items-center justify-center">
+      <template v-if="failed > 0">
+        <p class="text-red-600 flex-grow">
+          {{ $t('troubleshooting.restoreCustomNodes.failed') }}: {{ failed }} /
+          {{ total }}
+        </p>
+        <Button
+          class="absolute"
+          icon="pi pi-file"
+          severity="secondary"
+          :label="$t('serverStart.openLogs')"
+          @click="openLogs()"
+        />
+      </template>
+      <template v-else>
+        <p class="flex-grow">
+          {{ $t('troubleshooting.restoreCustomNodes.installed') }}:
+          {{ installed }} / {{ total }}
+        </p>
+        <i class="absolute pi pi-check text-6xl"></i>
+      </template>
+    </div>
+  </template>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import ProgressSpinner from 'primevue/progressspinner'
+import { ref } from 'vue'
+import { electronAPI } from '@/utils/envUtil'
+import { useCommandStore } from '@/stores/commandStore'
+
+type RestoreNodesProgress = {
+  total: number
+  index?: number
+  exitCode?: number
+}
+
+const electron = electronAPI()
+
+const state = ref<'running' | 'complete' | null>(null)
+const commandFailed = ref<boolean>(false)
+
+const current = ref<number>(0)
+const failed = ref<number>(0)
+const installed = ref<number>(0)
+const total = ref<number>(0)
+
+const restoreCustomNodes = async () => {
+  if (state.value !== null) return
+
+  // Reset state
+  commandFailed.value = false
+  current.value = 0
+  installed.value = 0
+  failed.value = 0
+  total.value = 0
+
+  // Call desktop
+  if (
+    // TODO: Remove when API used
+    electron &&
+    'restoreCustomNodes' in electron &&
+    'onRestoreCustomNodes' in electron &&
+    typeof electron.restoreCustomNodes === 'function' &&
+    typeof electron.onRestoreCustomNodes === 'function'
+  ) {
+    state.value = 'running'
+    await electron.onRestoreCustomNodes(updateRestoreNodesProgress)
+    const started = await electron.restoreCustomNodes()
+
+    if (started) return
+  }
+  commandFailed.value = true
+  state.value = 'complete'
+}
+
+const updateRestoreNodesProgress = ({
+  total: totalItems,
+  index,
+  exitCode
+}: RestoreNodesProgress) => {
+  total.value = totalItems
+
+  if (index !== undefined) current.value = index + 1
+
+  // Installation in progress
+  if (exitCode === undefined) return
+
+  if (exitCode === 0) {
+    // Success
+    installed.value++
+  } else {
+    // Fail
+    failed.value++
+  }
+
+  // Reset state if finished
+  if (index === totalItems - 1) state.value = 'complete'
+}
+
+const openLogs = () => {
+  console.warn('Doing')
+  useCommandStore().execute('Comfy-Desktop.Folders.OpenLogsFolder')
+}
+</script>

src/components/troubleshooting/TroubleshootingContent.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="flex flex-wrap content-around justify-around gap-4 p-4"
+    data-testid="troubleshooting-content"
+  >
+    <Card v-for="task in tasks" :key="task.id">
+      <template #content>
+        <section class="relative w-48 h-48 overflow-hidden rounded-lg">
+          <component :is="task.component" />
+        </section>
+      </template>
+      <template #footer>
+        <span>{{ $t(`troubleshooting.tasks.${task.id}`) }}</span>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Card from 'primevue/card'
+import RestoreCustomNodes from './RestoreCustomNodes.vue'
+import { isElectron } from '@/utils/envUtil'
+
+const electronTasks = [
+  {
+    id: 'restoreCustomNodes',
+    component: RestoreCustomNodes
+  }
+]
+
+const tasks = isElectron() ? [...electronTasks] : []
+</script>
+
+<style lang="css" scoped>
+.p-card {
+  --p-card-body-padding: 0;
+}
+
+:deep(.p-card-footer) {
+  text-align: center;
+}
+</style>

src/locales/en.ts

@@ -240,5 +240,17 @@ export default {
     resume: 'Resume Download',
     cancel: 'Cancel Download',
     cancelled: 'Cancelled'
+  },
+  troubleshooting: {
+    title: 'Troubleshooting',
+    tasks: {
+      restoreCustomNodes: 'Restore Custom Nodes'
+    },
+    restoreCustomNodes: {
+      loading: 'Parsing log files...',
+      installing: 'Installing',
+      installed: 'Installed',
+      failed: 'Failed'
+    }
   }
 }

src/services/dialogService.ts

@@ -12,6 +12,7 @@ import TemplateWorkflowsContent from '@/components/templates/TemplateWorkflowsCo
 import PromptDialogContent from '@/components/dialog/content/PromptDialogContent.vue'
 import { i18n } from '@/i18n'
 import type { MissingNodeType } from '@/types/comfy'
+import TroubleshootingContent from '@/components/troubleshooting/TroubleshootingContent.vue'
 
 export function showLoadWorkflowWarning(props: {
   missingNodeTypes: MissingNodeType[]
@@ -89,3 +90,10 @@ export async function showPromptDialog({
     })
   })
 }
+
+export function showTroubleshootingDialog() {
+  useDialogStore().showDialog({
+    title: i18n.global.t('troubleshooting.title'),
+    component: TroubleshootingContent
+  })
+}

src/stores/commandStore.ts

@@ -6,7 +6,8 @@ import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
 import {
   showSettingsDialog,
-  showTemplateWorkflowsDialog
+  showTemplateWorkflowsDialog,
+  showTroubleshootingDialog
 } from '@/services/dialogService'
 import { useQueueSettingsStore, useQueueStore } from './queueStore'
 import { LiteGraph } from '@comfyorg/litegraph'
@@ -20,6 +21,7 @@ import { useBottomPanelStore } from './workspace/bottomPanelStore'
 import { LGraphNode } from '@comfyorg/litegraph'
 import { useWorkspaceStore } from './workspaceStore'
 import { workflowService } from '@/services/workflowService'
+import { i18n } from '@/i18n'
 
 export interface ComfyCommand {
   id: string
@@ -511,6 +513,15 @@ export const useCommandStore = defineStore('command', () => {
           }
         }
       }
+    },
+    {
+      id: 'Comfy.Troubleshooting.Open',
+      icon: 'pi pi-wrench',
+      label: i18n.global.t('troubleshooting.title'),
+      versionAdded: '1.5.3',
+      function: () => {
+        showTroubleshootingDialog()
+      }
     }
   ]
 

src/stores/menuItemStore.ts

@@ -3,6 +3,7 @@ import type { MenuItem } from 'primevue/menuitem'
 import { ref } from 'vue'
 import { useCommandStore } from './commandStore'
 import { ComfyExtension } from '@/types/comfy'
+import { isElectron } from '@/utils/envUtil'
 
 export const useMenuItemStore = defineStore('menuItem', () => {
   const commandStore = useCommandStore()
@@ -119,6 +120,8 @@ export const useMenuItemStore = defineStore('menuItem', () => {
       }
     ]
   )
+  // TODO: Remove temporary electron guard after this is generally available
+  if (isElectron()) registerCommands(['Help'], ['Comfy.Troubleshooting.Open'])
 
   return {
     menuItems,