merge main into rh-test

src/components/dialog/content/ApiNodesSignInContent.vue

@@ -1,4 +1,3 @@
-<!-- Prompt user that the workflow contains API nodes that needs login to run -->
 <template>
   <div class="flex flex-col gap-4 max-w-96 h-110 p-2">
     <div class="text-2xl font-medium mb-2">

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -16,6 +16,21 @@
       {{ hint }}
     </Message>
     <div class="flex gap-4 justify-end">
+      <div
+        v-if="type === 'overwriteBlueprint'"
+        class="flex gap-4 justify-start"
+      >
+        <Checkbox
+          v-model="doNotAskAgain"
+          class="flex gap-4 justify-start"
+          input-id="doNotAskAgain"
+          binary
+        />
+        <label for="doNotAskAgain" severity="secondary">{{
+          t('missingModelsDialog.doNotAskAgain')
+        }}</label>
+      </div>
+
       <Button
         :label="$t('g.cancel')"
         icon="pi pi-undo"
@@ -38,7 +53,7 @@
         @click="onConfirm"
       />
       <Button
-        v-else-if="type === 'overwrite'"
+        v-else-if="type === 'overwrite' || type === 'overwriteBlueprint'"
         :label="$t('g.overwrite')"
         severity="warn"
         icon="pi pi-save"
@@ -74,8 +89,12 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import Checkbox from 'primevue/checkbox'
 import Message from 'primevue/message'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ConfirmationDialogType } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
 
@@ -87,14 +106,20 @@ const props = defineProps<{
   hint?: string
 }>()
 
+const { t } = useI18n()
+
 const onCancel = () => useDialogStore().closeDialog()
 
+const doNotAskAgain = ref(false)
+
 const onDeny = () => {
   props.onConfirm(false)
   useDialogStore().closeDialog()
 }
 
 const onConfirm = () => {
+  if (props.type === 'overwriteBlueprint' && doNotAskAgain.value)
+    void useSettingStore().set('Comfy.Workflow.WarnBlueprintOverwrite', false)
   props.onConfirm(true)
   useDialogStore().closeDialog()
 }

src/components/dialog/content/ErrorDialogContent.vue

@@ -21,16 +21,9 @@
         @click="showReport"
       />
       <Button
-        v-show="!sendReportOpen"
-        text
-        :label="$t('issueReport.helpFix')"
-        @click="showSendReport"
-      />
-      <Button
-        v-if="authStore.currentUser"
         v-show="!reportOpen"
         text
-        :label="$t('issueReport.contactSupportTitle')"
+        :label="$t('issueReport.helpFix')"
         @click="showContactSupport"
       />
     </div>
@@ -41,16 +34,6 @@
       </ScrollPanel>
       <Divider />
     </template>
-    <ReportIssuePanel
-      v-if="sendReportOpen"
-      :title="$t('issueReport.submitErrorReport')"
-      :error-type="error.reportType ?? 'unknownError'"
-      :extra-fields="[stackTraceField]"
-      :tags="{
-        exceptionMessage: error.exceptionMessage,
-        nodeType: error.nodeType ?? 'UNKNOWN'
-      }"
-    />
     <div class="flex gap-4 justify-end">
       <FindIssueButton
         :error-message="error.exceptionMessage"
@@ -81,18 +64,12 @@ import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import type { ReportField } from '@/types/issueReportTypes'
 import {
   type ErrorReportData,
   generateErrorReport
 } from '@/utils/errorReportUtil'
 
-import ReportIssuePanel from './error/ReportIssuePanel.vue'
-
-const authStore = useFirebaseAuthStore()
-
 const { error } = defineProps<{
   error: Omit<ErrorReportData, 'workflow' | 'systemStats' | 'serverLogs'> & {
     /**
@@ -114,10 +91,6 @@ const reportOpen = ref(false)
 const showReport = () => {
   reportOpen.value = true
 }
-const sendReportOpen = ref(false)
-const showSendReport = () => {
-  sendReportOpen.value = true
-}
 const toast = useToast()
 const { t } = useI18n()
 const systemStatsStore = useSystemStatsStore()
@@ -126,22 +99,13 @@ const title = computed<string>(
   () => error.nodeType ?? error.exceptionType ?? t('errorDialog.defaultTitle')
 )
 
-const stackTraceField = computed<ReportField>(() => {
-  return {
-    label: t('issueReport.stackTrace'),
-    value: 'StackTrace',
-    optIn: true,
-    getData: () => error.traceback
-  }
-})
-
 const showContactSupport = async () => {
   await useCommandStore().execute('Comfy.ContactSupport')
 }
 
 onMounted(async () => {
   if (!systemStatsStore.systemStats) {
-    await systemStatsStore.fetchSystemStats()
+    await systemStatsStore.refetchSystemStats()
   }
 
   try {

src/components/dialog/content/IssueReportDialogContent.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="p-2 h-full" aria-labelledby="issue-report-title">
-    <Panel
-      :pt="{
-        root: 'border-none',
-        content: 'p-0'
-      }"
-    >
-      <template #header>
-        <header class="flex flex-col items-center w-full">
-          <h2 id="issue-report-title" class="text-4xl">
-            {{ title }}
-          </h2>
-          <span v-if="subtitle" class="text-muted mt-0">{{ subtitle }}</span>
-        </header>
-      </template>
-      <ReportIssuePanel v-bind="panelProps" :pt="{ root: 'border-none' }" />
-    </Panel>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Panel from 'primevue/panel'
-
-import ReportIssuePanel from '@/components/dialog/content/error/ReportIssuePanel.vue'
-import type { IssueReportPanelProps } from '@/types/issueReportTypes'
-
-defineProps<{
-  title: string
-  subtitle?: string
-  panelProps: IssueReportPanelProps
-}>()
-</script>

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -2,8 +2,8 @@
   <NoResultsPlaceholder
     class="pb-0"
     icon="pi pi-exclamation-circle"
-    title="Some Nodes Are Missing"
-    message="When loading the graph, the following node types were not found"
+    :title="$t('loadWorkflowWarning.missingNodesTitle')"
+    :message="$t('loadWorkflowWarning.missingNodesDescription')"
   />
   <MissingCoreNodesMessage :missing-core-nodes="missingCoreNodes" />
   <ListBox
@@ -31,12 +31,20 @@
       </div>
     </template>
   </ListBox>
-  <div v-if="isManagerInstalled" class="flex justify-end py-3">
+  <div v-if="showManagerButtons" class="flex justify-end py-3">
     <PackInstallButton
-      :disabled="isLoading || !!error || missingNodePacks.length === 0"
+      v-if="showInstallAllButton"
+      size="md"
+      :disabled="
+        isLoading || !!error || missingNodePacks.length === 0 || isInstalling
+      "
+      :is-loading="isLoading"
       :node-packs="missingNodePacks"
-      variant="black"
-      :label="$t('manager.installAllMissingNodes')"
+      :label="
+        isLoading
+          ? $t('manager.gettingInfo')
+          : $t('manager.installAllMissingNodes')
+      "
     />
     <Button label="Open Manager" size="small" outlined @click="openManager" />
   </div>
@@ -45,35 +53,36 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ListBox from 'primevue/listbox'
-import { computed } from 'vue'
+import { computed, nextTick, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
-import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
-import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
-import { useDialogService } from '@/services/dialogService'
-import { useAboutPanelStore } from '@/stores/aboutPanelStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useDialogStore } from '@/stores/dialogStore'
 import type { MissingNodeType } from '@/types/comfy'
-import { ManagerTab } from '@/types/comfyManagerTypes'
+import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
+import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
+import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 const props = defineProps<{
   missingNodeTypes: MissingNodeType[]
 }>()
 
-const aboutPanelStore = useAboutPanelStore()
-
 // Get missing node packs from workflow with loading and error states
 const { missingNodePacks, isLoading, error, missingCoreNodes } =
   useMissingNodes()
 
-// Determines if ComfyUI-Manager is installed by checking for its badge in the about panel
-// This allows us to conditionally show the Manager button only when the extension is available
-// TODO: Remove this check when Manager functionality is fully migrated into core
-const isManagerInstalled = computed(() => {
-  return aboutPanelStore.badges.some(
-    (badge) =>
-      badge.label.includes('ComfyUI-Manager') ||
-      badge.url.includes('ComfyUI-Manager')
+const comfyManagerStore = useComfyManagerStore()
+const managerState = useManagerState()
+
+// Check if any of the missing packs are currently being installed
+const isInstalling = computed(() => {
+  if (!missingNodePacks.value?.length) return false
+  return missingNodePacks.value.some((pack) =>
+    comfyManagerStore.isPackInstalling(pack.id)
   )
 })
 
@@ -98,11 +107,51 @@ const uniqueNodes = computed(() => {
     })
 })
 
-const openManager = () => {
-  useDialogService().showManagerDialog({
-    initialTab: ManagerTab.Missing
+// Show manager buttons unless manager is disabled
+const showManagerButtons = computed(() => {
+  return managerState.shouldShowManagerButtons.value
+})
+
+// Only show Install All button for NEW_UI (new manager with v4 support)
+const showInstallAllButton = computed(() => {
+  return managerState.shouldShowInstallButton.value
+})
+
+const openManager = async () => {
+  await managerState.openManager({
+    initialTab: ManagerTab.Missing,
+    showToastOnLegacyError: true
   })
 }
+
+const { t } = useI18n()
+const dialogStore = useDialogStore()
+
+// Computed to check if all missing nodes have been installed
+const allMissingNodesInstalled = computed(() => {
+  return (
+    !isLoading.value &&
+    !isInstalling.value &&
+    missingNodePacks.value?.length === 0
+  )
+})
+// Watch for completion and close dialog
+watch(allMissingNodesInstalled, async (allInstalled) => {
+  if (allInstalled && showInstallAllButton.value) {
+    // Use nextTick to ensure state updates are complete
+    await nextTick()
+
+    dialogStore.closeDialog({ key: 'global-load-workflow-warning' })
+
+    // Show success toast
+    useToastStore().add({
+      severity: 'success',
+      summary: t('g.success'),
+      detail: t('manager.allMissingNodesInstalled'),
+      life: 3000
+    })
+  }
+})
 </script>
 
 <style scoped>

src/components/dialog/content/ManagerProgressDialogContent.test.ts

@@ -1,176 +0,0 @@
-import { VueWrapper, mount } from '@vue/test-utils'
-import { createPinia } from 'pinia'
-import Button from 'primevue/button'
-import PrimeVue from 'primevue/config'
-import Panel from 'primevue/panel'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import enMessages from '@/locales/en/main.json'
-
-import ManagerProgressDialogContent from './ManagerProgressDialogContent.vue'
-
-type ComponentInstance = InstanceType<typeof ManagerProgressDialogContent> & {
-  lastPanelRef: HTMLElement | null
-  onLogsAdded: () => void
-  handleScroll: (e: { target: HTMLElement }) => void
-  isUserScrolling: boolean
-  resetUserScrolling: () => void
-  collapsedPanels: Record<number, boolean>
-  togglePanel: (index: number) => void
-}
-
-const mockCollapse = vi.fn()
-
-const defaultMockTaskLogs = [
-  { taskName: 'Task 1', logs: ['Log 1', 'Log 2'] },
-  { taskName: 'Task 2', logs: ['Log 3', 'Log 4'] }
-]
-
-vi.mock('@/stores/comfyManagerStore', () => ({
-  useComfyManagerStore: vi.fn(() => ({
-    taskLogs: [...defaultMockTaskLogs]
-  })),
-  useManagerProgressDialogStore: vi.fn(() => ({
-    isExpanded: true,
-    collapse: mockCollapse
-  }))
-}))
-
-describe('ManagerProgressDialogContent', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockCollapse.mockReset()
-  })
-
-  const mountComponent = ({
-    props = {}
-  }: Record<string, any> = {}): VueWrapper<ComponentInstance> => {
-    const i18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      messages: { en: enMessages }
-    })
-
-    return mount(ManagerProgressDialogContent, {
-      props: {
-        ...props
-      },
-      global: {
-        plugins: [PrimeVue, createPinia(), i18n],
-        components: {
-          Panel,
-          Button
-        }
-      }
-    }) as VueWrapper<ComponentInstance>
-  }
-
-  it('renders the correct number of panels', async () => {
-    const wrapper = mountComponent()
-    await nextTick()
-    expect(wrapper.findAllComponents(Panel).length).toBe(2)
-  })
-
-  it('expands the last panel by default', async () => {
-    const wrapper = mountComponent()
-    await nextTick()
-    expect(wrapper.vm.collapsedPanels[1]).toBeFalsy()
-  })
-
-  it('toggles panel expansion when toggle method is called', async () => {
-    const wrapper = mountComponent()
-    await nextTick()
-
-    // Initial state - first panel should be collapsed
-    expect(wrapper.vm.collapsedPanels[0]).toBeFalsy()
-
-    wrapper.vm.togglePanel(0)
-    await nextTick()
-
-    // After toggle - first panel should be expanded
-    expect(wrapper.vm.collapsedPanels[0]).toBe(true)
-
-    wrapper.vm.togglePanel(0)
-    await nextTick()
-
-    expect(wrapper.vm.collapsedPanels[0]).toBeFalsy()
-  })
-
-  it('displays the correct status for each panel', async () => {
-    const wrapper = mountComponent()
-    await nextTick()
-
-    // Expand all panels to see status text
-    const panels = wrapper.findAllComponents(Panel)
-    for (let i = 0; i < panels.length; i++) {
-      if (!wrapper.vm.collapsedPanels[i]) {
-        wrapper.vm.togglePanel(i)
-        await nextTick()
-      }
-    }
-
-    const panelsText = wrapper
-      .findAllComponents(Panel)
-      .map((panel) => panel.text())
-
-    expect(panelsText[0]).toContain('Completed ✓')
-    expect(panelsText[1]).toContain('Completed ✓')
-  })
-
-  it('auto-scrolls to bottom when new logs are added', async () => {
-    const wrapper = mountComponent()
-    await nextTick()
-
-    const mockScrollElement = document.createElement('div')
-    Object.defineProperty(mockScrollElement, 'scrollHeight', { value: 200 })
-    Object.defineProperty(mockScrollElement, 'clientHeight', { value: 100 })
-    Object.defineProperty(mockScrollElement, 'scrollTop', {
-      value: 0,
-      writable: true
-    })
-
-    wrapper.vm.lastPanelRef = mockScrollElement
-
-    wrapper.vm.onLogsAdded()
-    await nextTick()
-
-    // Check if scrollTop is set to scrollHeight (scrolled to bottom)
-    expect(mockScrollElement.scrollTop).toBe(200)
-  })
-
-  it('does not auto-scroll when user is manually scrolling', async () => {
-    const wrapper = mountComponent()
-    await nextTick()
-
-    const mockScrollElement = document.createElement('div')
-    Object.defineProperty(mockScrollElement, 'scrollHeight', { value: 200 })
-    Object.defineProperty(mockScrollElement, 'clientHeight', { value: 100 })
-    Object.defineProperty(mockScrollElement, 'scrollTop', {
-      value: 50,
-      writable: true
-    })
-
-    wrapper.vm.lastPanelRef = mockScrollElement
-
-    wrapper.vm.handleScroll({ target: mockScrollElement })
-    await nextTick()
-
-    expect(wrapper.vm.isUserScrolling).toBe(true)
-
-    // Now trigger the log update
-    wrapper.vm.onLogsAdded()
-    await nextTick()
-
-    // Check that scrollTop is not changed (should still be 50)
-    expect(mockScrollElement.scrollTop).toBe(50)
-  })
-
-  it('calls collapse method when component is unmounted', async () => {
-    const wrapper = mountComponent()
-    await nextTick()
-    wrapper.unmount()
-    expect(mockCollapse).toHaveBeenCalled()
-  })
-})

src/components/dialog/content/ManagerProgressDialogContent.vue

@@ -1,162 +0,0 @@
-<template>
-  <div
-    class="overflow-hidden transition-all duration-300"
-    :class="{
-      'max-h-[500px]': isExpanded,
-      'max-h-0 p-0 m-0': !isExpanded
-    }"
-  >
-    <div
-      ref="sectionsContainerRef"
-      class="px-6 py-4 overflow-y-auto max-h-[450px] scroll-container"
-      :style="{
-        scrollbarWidth: 'thin',
-        scrollbarColor: 'rgba(156, 163, 175, 0.5) transparent'
-      }"
-      :class="{
-        'max-h-[450px]': isExpanded,
-        'max-h-0': !isExpanded
-      }"
-    >
-      <div v-for="(panel, index) in taskPanels" :key="index">
-        <Panel
-          :expanded="collapsedPanels[index] || false"
-          toggleable
-          class="shadow-elevation-1 rounded-lg mt-2 dark-theme:bg-black dark-theme:border-black"
-        >
-          <template #header>
-            <div class="flex items-center justify-between w-full py-2">
-              <div class="flex flex-col text-sm font-medium leading-normal">
-                <span>{{ panel.taskName }}</span>
-                <span class="text-muted">
-                  {{
-                    isInProgress(index)
-                      ? $t('g.inProgress')
-                      : $t('g.completed') + ' ✓'
-                  }}
-                </span>
-              </div>
-            </div>
-          </template>
-          <template #toggleicon>
-            <Button
-              :icon="
-                collapsedPanels[index]
-                  ? 'pi pi-chevron-right'
-                  : 'pi pi-chevron-down'
-              "
-              text
-              class="text-neutral-300"
-              @click="togglePanel(index)"
-            />
-          </template>
-          <div
-            :ref="
-              index === taskPanels.length - 1
-                ? (el) => (lastPanelRef = el as HTMLElement)
-                : undefined
-            "
-            class="overflow-y-auto h-64 rounded-lg bg-black"
-            :class="{
-              'h-64': index !== taskPanels.length - 1,
-              'flex-grow': index === taskPanels.length - 1
-            }"
-            @scroll="handleScroll"
-          >
-            <div class="h-full">
-              <div
-                v-for="(log, logIndex) in panel.logs"
-                :key="logIndex"
-                class="text-neutral-400 dark-theme:text-muted"
-              >
-                <pre class="whitespace-pre-wrap break-words">{{ log }}</pre>
-              </div>
-            </div>
-          </div>
-        </Panel>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useScroll, whenever } from '@vueuse/core'
-import Button from 'primevue/button'
-import Panel from 'primevue/panel'
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-
-import {
-  useComfyManagerStore,
-  useManagerProgressDialogStore
-} from '@/stores/comfyManagerStore'
-
-const { taskLogs } = useComfyManagerStore()
-const progressDialogContent = useManagerProgressDialogStore()
-const managerStore = useComfyManagerStore()
-
-const isInProgress = (index: number) =>
-  index === taskPanels.value.length - 1 && managerStore.uncompletedCount > 0
-
-const taskPanels = computed(() => taskLogs)
-const isExpanded = computed(() => progressDialogContent.isExpanded)
-const isCollapsed = computed(() => !isExpanded.value)
-
-const collapsedPanels = ref<Record<number, boolean>>({})
-const togglePanel = (index: number) => {
-  collapsedPanels.value[index] = !collapsedPanels.value[index]
-}
-
-const sectionsContainerRef = ref<HTMLElement | null>(null)
-const { y: scrollY } = useScroll(sectionsContainerRef, {
-  eventListenerOptions: {
-    passive: true
-  }
-})
-
-const lastPanelRef = ref<HTMLElement | null>(null)
-const isUserScrolling = ref(false)
-const lastPanelLogs = computed(() => taskPanels.value?.at(-1)?.logs)
-
-const isAtBottom = (el: HTMLElement | null) => {
-  if (!el) return false
-  const threshold = 20
-  return Math.abs(el.scrollHeight - el.scrollTop - el.clientHeight) < threshold
-}
-
-const scrollLastPanelToBottom = () => {
-  if (!lastPanelRef.value || isUserScrolling.value) return
-  lastPanelRef.value.scrollTop = lastPanelRef.value.scrollHeight
-}
-const scrollContentToBottom = () => {
-  scrollY.value = sectionsContainerRef.value?.scrollHeight ?? 0
-}
-
-const resetUserScrolling = () => {
-  isUserScrolling.value = false
-}
-const handleScroll = (e: Event) => {
-  const target = e.target as HTMLElement
-  if (target !== lastPanelRef.value) return
-
-  isUserScrolling.value = !isAtBottom(target)
-}
-
-const onLogsAdded = () => {
-  // If user is scrolling manually, don't automatically scroll to bottom
-  if (isUserScrolling.value) return
-
-  scrollLastPanelToBottom()
-}
-
-whenever(lastPanelLogs, onLogsAdded, { flush: 'post', deep: true })
-whenever(() => isExpanded.value, scrollContentToBottom)
-whenever(isCollapsed, resetUserScrolling)
-
-onMounted(() => {
-  scrollContentToBottom()
-})
-
-onBeforeUnmount(() => {
-  progressDialogContent.collapse()
-})
-</script>

src/components/dialog/content/MissingCoreNodesMessage.vue

@@ -42,13 +42,12 @@
 </template>
 
 <script setup lang="ts">
-import { whenever } from '@vueuse/core'
 import Message from 'primevue/message'
-import { computed, ref } from 'vue'
+import { compare } from 'semver'
+import { computed } from 'vue'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import { compareVersions } from '@/utils/formatUtil'
 
 const props = defineProps<{
   missingCoreNodes: Record<string, LGraphNode[]>
@@ -60,25 +59,16 @@ const hasMissingCoreNodes = computed(() => {
   return Object.keys(props.missingCoreNodes).length > 0
 })
 
-const currentComfyUIVersion = ref<string | null>(null)
-whenever(
-  hasMissingCoreNodes,
-  async () => {
-    if (!systemStatsStore.systemStats) {
-      await systemStatsStore.fetchSystemStats()
-    }
-    currentComfyUIVersion.value =
-      systemStatsStore.systemStats?.system?.comfyui_version ?? null
-  },
-  {
-    immediate: true
-  }
-)
+// Use computed for reactive version tracking
+const currentComfyUIVersion = computed<string | null>(() => {
+  if (!hasMissingCoreNodes.value) return null
+  return systemStatsStore.systemStats?.system?.comfyui_version ?? null
+})
 
 const sortedMissingCoreNodes = computed(() => {
   return Object.entries(props.missingCoreNodes).sort(([a], [b]) => {
     // Sort by version in descending order (newest first)
-    return compareVersions(b, a) // Reversed for descending order
+    return compare(b, a) // Reversed for descending order
   })
 })
 

src/components/dialog/content/MissingModelsWarning.vue

@@ -39,7 +39,7 @@ import { useI18n } from 'vue-i18n'
 import ElectronFileDownload from '@/components/common/ElectronFileDownload.vue'
 import FileDownload from '@/components/common/FileDownload.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { isElectron } from '@/utils/envUtil'
 
 // TODO: Read this from server internal API rather than hardcoding here

src/components/dialog/content/SettingDialogContent.vue

@@ -1,185 +0,0 @@
-<template>
-  <div class="settings-container">
-    <ScrollPanel class="settings-sidebar flex-shrink-0 p-2 w-48 2xl:w-64">
-      <SearchBox
-        v-model:modelValue="searchQuery"
-        class="settings-search-box w-full mb-2"
-        :placeholder="$t('g.searchSettings') + '...'"
-        :debounce-time="128"
-        @search="handleSearch"
-      />
-      <Listbox
-        v-model="activeCategory"
-        :options="groupedMenuTreeNodes"
-        option-label="translatedLabel"
-        option-group-label="label"
-        option-group-children="children"
-        scroll-height="100%"
-        :option-disabled="
-          (option: SettingTreeNode) =>
-            !queryIsEmpty && !searchResultsCategories.has(option.label ?? '')
-        "
-        class="border-none w-full"
-      >
-        <template #optiongroup>
-          <Divider class="my-0" />
-        </template>
-      </Listbox>
-    </ScrollPanel>
-    <Divider layout="vertical" class="mx-1 2xl:mx-4 hidden md:flex" />
-    <Divider layout="horizontal" class="flex md:hidden" />
-    <Tabs :value="tabValue" :lazy="true" class="settings-content h-full w-full">
-      <TabPanels class="settings-tab-panels h-full w-full pr-0">
-        <PanelTemplate value="Search Results">
-          <SettingsPanel :setting-groups="searchResults" />
-        </PanelTemplate>
-
-        <PanelTemplate
-          v-for="category in settingCategories"
-          :key="category.key"
-          :value="category.label ?? ''"
-        >
-          <template #header>
-            <CurrentUserMessage v-if="tabValue === 'Comfy'" />
-            <ColorPaletteMessage v-if="tabValue === 'Appearance'" />
-          </template>
-          <SettingsPanel :setting-groups="sortedGroups(category)" />
-        </PanelTemplate>
-
-        <Suspense v-for="panel in panels" :key="panel.node.key">
-          <component :is="panel.component" />
-          <template #fallback>
-            <div>{{ $t('g.loadingPanel', { panel: panel.node.label }) }}</div>
-          </template>
-        </Suspense>
-      </TabPanels>
-    </Tabs>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Divider from 'primevue/divider'
-import Listbox from 'primevue/listbox'
-import ScrollPanel from 'primevue/scrollpanel'
-import TabPanels from 'primevue/tabpanels'
-import Tabs from 'primevue/tabs'
-import { computed, watch } from 'vue'
-
-import SearchBox from '@/components/common/SearchBox.vue'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useSettingSearch } from '@/composables/setting/useSettingSearch'
-import { useSettingUI } from '@/composables/setting/useSettingUI'
-import { SettingTreeNode } from '@/stores/settingStore'
-import { ISettingGroup, SettingParams } from '@/types/settingTypes'
-import { flattenTree } from '@/utils/treeUtil'
-
-import ColorPaletteMessage from './setting/ColorPaletteMessage.vue'
-import CurrentUserMessage from './setting/CurrentUserMessage.vue'
-import PanelTemplate from './setting/PanelTemplate.vue'
-import SettingsPanel from './setting/SettingsPanel.vue'
-
-const { defaultPanel } = defineProps<{
-  defaultPanel?:
-    | 'about'
-    | 'keybinding'
-    | 'extension'
-    | 'server-config'
-    | 'user'
-    | 'credits'
-}>()
-
-const {
-  activeCategory,
-  defaultCategory,
-  settingCategories,
-  groupedMenuTreeNodes,
-  panels
-} = useSettingUI(defaultPanel)
-
-const {
-  searchQuery,
-  searchResultsCategories,
-  queryIsEmpty,
-  inSearch,
-  handleSearch: handleSearchBase,
-  getSearchResults
-} = useSettingSearch()
-
-const authActions = useFirebaseAuthActions()
-
-// Sort groups for a category
-const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
-  return [...(category.children ?? [])]
-    .sort((a, b) => a.label.localeCompare(b.label))
-    .map((group) => ({
-      label: group.label,
-      settings: flattenTree<SettingParams>(group)
-    }))
-}
-
-const handleSearch = (query: string) => {
-  handleSearchBase(query.trim())
-  activeCategory.value = query ? null : defaultCategory.value
-}
-
-// Get search results
-const searchResults = computed<ISettingGroup[]>(() =>
-  getSearchResults(activeCategory.value)
-)
-
-const tabValue = computed<string>(() =>
-  inSearch.value ? 'Search Results' : activeCategory.value?.label ?? ''
-)
-
-// Don't allow null category to be set outside of search.
-// In search mode, the active category can be null to show all search results.
-watch(activeCategory, (_, oldValue) => {
-  if (!tabValue.value) {
-    activeCategory.value = oldValue
-  }
-  if (activeCategory.value?.key === 'credits') {
-    void authActions.fetchBalance()
-  }
-})
-</script>
-
-<style>
-.settings-tab-panels {
-  padding-top: 0 !important;
-}
-</style>
-
-<style scoped>
-.settings-container {
-  display: flex;
-  height: 70vh;
-  width: 60vw;
-  max-width: 64rem;
-  overflow: hidden;
-}
-
-.settings-content {
-  overflow-x: auto;
-}
-
-@media (max-width: 768px) {
-  .settings-container {
-    flex-direction: column;
-    height: auto;
-    width: 80vw;
-  }
-
-  .settings-sidebar {
-    width: 100%;
-  }
-
-  .settings-content {
-    height: 350px;
-  }
-}
-
-/* Hide the first group separator */
-.settings-sidebar :deep(.p-listbox-option-group:nth-child(1)) {
-  display: none;
-}
-</style>

src/components/dialog/content/SignInContent.vue

@@ -152,7 +152,7 @@ import { useI18n } from 'vue-i18n'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { COMFY_PLATFORM_BASE_URL } from '@/config/comfyApi'
-import { SignInData, SignUpData } from '@/schemas/signInSchema'
+import type { SignInData, SignUpData } from '@/schemas/signInSchema'
 import { translateAuthError } from '@/utils/authErrorTranslation'
 import { isInChina } from '@/utils/networkUtil'
 

src/components/dialog/content/UpdatePasswordContent.vue

@@ -17,7 +17,8 @@
 </template>
 
 <script setup lang="ts">
-import { Form, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import { ref } from 'vue'

src/components/dialog/content/error/ReportIssuePanel.spec.ts

@@ -1,338 +0,0 @@
-import { Form } from '@primevue/forms'
-import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import Checkbox from 'primevue/checkbox'
-import PrimeVue from 'primevue/config'
-import InputText from 'primevue/inputtext'
-import Textarea from 'primevue/textarea'
-import Tooltip from 'primevue/tooltip'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import enMesages from '@/locales/en/main.json'
-import { IssueReportPanelProps } from '@/types/issueReportTypes'
-
-import ReportIssuePanel from './ReportIssuePanel.vue'
-
-const DEFAULT_FIELDS = ['Workflow', 'Logs', 'Settings', 'SystemStats']
-const CUSTOM_FIELDS = [
-  {
-    label: 'Custom Field',
-    value: 'CustomField',
-    optIn: true,
-    getData: () => 'mock data'
-  }
-]
-
-async function getSubmittedContext() {
-  const { captureMessage } = (await import('@sentry/core')) as any
-  return captureMessage.mock.calls[0][1]
-}
-
-async function submitForm(wrapper: any) {
-  await wrapper.findComponent(Form).trigger('submit')
-  return getSubmittedContext()
-}
-
-async function findAndUpdateCheckbox(
-  wrapper: any,
-  value: string,
-  checked = true
-) {
-  const checkbox = wrapper
-    .findAllComponents(Checkbox)
-    .find((c: any) => c.props('value') === value)
-  if (!checkbox) throw new Error(`Checkbox with value "${value}" not found`)
-
-  await checkbox.vm.$emit('update:modelValue', checked)
-  return checkbox
-}
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: enMesages
-  }
-})
-
-vi.mock('primevue/usetoast', () => ({
-  useToast: vi.fn(() => ({
-    add: vi.fn()
-  }))
-}))
-
-vi.mock('@/scripts/api', () => ({
-  api: {
-    getLogs: vi.fn().mockResolvedValue('mock logs'),
-    getSystemStats: vi.fn().mockResolvedValue('mock stats'),
-    getSettings: vi.fn().mockResolvedValue('mock settings'),
-    fetchApi: vi.fn().mockResolvedValue({
-      json: vi.fn().mockResolvedValue({}),
-      text: vi.fn().mockResolvedValue('')
-    }),
-    apiURL: vi.fn().mockReturnValue('https://test.com')
-  }
-}))
-
-vi.mock('@/scripts/app', () => ({
-  app: {
-    graph: {
-      asSerialisable: vi.fn().mockReturnValue({})
-    }
-  }
-}))
-
-vi.mock('@sentry/core', () => ({
-  captureMessage: vi.fn()
-}))
-
-vi.mock('@primevue/forms', () => ({
-  Form: {
-    name: 'Form',
-    template:
-      '<form @submit.prevent="onSubmit"><slot :values="formValues" /></form>',
-    props: ['resolver'],
-    data() {
-      return {
-        formValues: {}
-      }
-    },
-    methods: {
-      onSubmit() {
-        // @ts-expect-error fixme ts strict error
-        this.$emit('submit', {
-          valid: true,
-          // @ts-expect-error fixme ts strict error
-          values: this.formValues
-        })
-      },
-      updateFieldValue(name: string, value: any) {
-        // @ts-expect-error fixme ts strict error
-        this.formValues[name] = value
-      }
-    }
-  },
-  FormField: {
-    name: 'FormField',
-    template:
-      '<div><slot :modelValue="modelValue" @update:modelValue="updateValue" /></div>',
-    props: ['name'],
-    data() {
-      return {
-        modelValue: ''
-      }
-    },
-    methods: {
-      // @ts-expect-error fixme ts strict error
-      updateValue(value) {
-        // @ts-expect-error fixme ts strict error
-        this.modelValue = value
-        // @ts-expect-error fixme ts strict error
-        let parent = this.$parent
-        while (parent && parent.$options.name !== 'Form') {
-          parent = parent.$parent
-        }
-        if (parent) {
-          // @ts-expect-error fixme ts strict error
-          parent.updateFieldValue(this.name, value)
-        }
-      }
-    }
-  }
-}))
-
-vi.mock('@/stores/firebaseAuthStore', () => ({
-  useFirebaseAuthStore: () => ({
-    currentUser: {
-      email: 'test@example.com'
-    }
-  })
-}))
-
-describe('ReportIssuePanel', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    const pinia = createPinia()
-    setActivePinia(pinia)
-  })
-
-  const mountComponent = (props: IssueReportPanelProps, options = {}): any => {
-    return mount(ReportIssuePanel, {
-      global: {
-        plugins: [PrimeVue, i18n, createPinia()],
-        directives: { tooltip: Tooltip }
-      },
-      props,
-      ...options
-    })
-  }
-
-  it('renders the panel with all required components', () => {
-    const wrapper = mountComponent({ errorType: 'Test Error' })
-    expect(wrapper.find('.p-panel').exists()).toBe(true)
-    expect(wrapper.findAllComponents(Checkbox).length).toBe(6)
-    expect(wrapper.findComponent(InputText).exists()).toBe(true)
-    expect(wrapper.findComponent(Textarea).exists()).toBe(true)
-  })
-
-  it('updates selection when checkboxes are selected', async () => {
-    const wrapper = mountComponent({
-      errorType: 'Test Error'
-    })
-
-    const checkboxes = wrapper.findAllComponents(Checkbox)
-
-    for (const field of DEFAULT_FIELDS) {
-      const checkbox = checkboxes.find(
-        // @ts-expect-error fixme ts strict error
-        (checkbox) => checkbox.props('value') === field
-      )
-      expect(checkbox).toBeDefined()
-
-      await checkbox?.vm.$emit('update:modelValue', [field])
-      expect(wrapper.vm.selection).toContain(field)
-    }
-  })
-
-  it('updates contactInfo when input is changed', async () => {
-    const wrapper = mountComponent({ errorType: 'Test Error' })
-    const input = wrapper.findComponent(InputText)
-
-    await input.vm.$emit('update:modelValue', 'test@example.com')
-    const context = await submitForm(wrapper)
-    expect(context.user.email).toBe('test@example.com')
-  })
-
-  it('updates additional details when textarea is changed', async () => {
-    const wrapper = mountComponent({ errorType: 'Test Error' })
-    const textarea = wrapper.findComponent(Textarea)
-
-    await textarea.vm.$emit('update:modelValue', 'This is a test detail.')
-    const context = await submitForm(wrapper)
-    expect(context.extra.details).toBe('This is a test detail.')
-  })
-
-  it('set contact preferences back to false if email is removed', async () => {
-    const wrapper = mountComponent({ errorType: 'Test Error' })
-    const input = wrapper.findComponent(InputText)
-
-    // Set a valid email, enabling the contact preferences to be changed
-    await input.vm.$emit('update:modelValue', 'name@example.com')
-
-    // Enable both contact preferences
-    for (const pref of ['followUp', 'notifyOnResolution']) {
-      await findAndUpdateCheckbox(wrapper, pref)
-    }
-
-    // Change the email back to empty
-    await input.vm.$emit('update:modelValue', '')
-    const context = await submitForm(wrapper)
-
-    // Check that the contact preferences are back to false automatically
-    expect(context.tags.followUp).toBe(false)
-    expect(context.tags.notifyOnResolution).toBe(false)
-  })
-
-  it('renders with overridden default fields', () => {
-    const wrapper = mountComponent({
-      errorType: 'Test Error',
-      defaultFields: ['Settings']
-    })
-
-    // Filter out the contact preferences checkboxes
-    const fieldCheckboxes = wrapper.findAllComponents(Checkbox).filter(
-      // @ts-expect-error fixme ts strict error
-      (checkbox) =>
-        !['followUp', 'notifyOnResolution'].includes(checkbox.props('value'))
-    )
-    expect(fieldCheckboxes.length).toBe(1)
-    expect(fieldCheckboxes.at(0)?.props('value')).toBe('Settings')
-  })
-
-  it('renders additional fields when extraFields prop is provided', () => {
-    const wrapper = mountComponent({
-      errorType: 'Test Error',
-      extraFields: CUSTOM_FIELDS
-    })
-    const customCheckbox = wrapper
-      .findAllComponents(Checkbox)
-      // @ts-expect-error fixme ts strict error
-      .find((checkbox) => checkbox.props('value') === 'CustomField')
-    expect(customCheckbox).toBeDefined()
-  })
-
-  it('allows custom fields to be selected', async () => {
-    const wrapper = mountComponent({
-      errorType: 'Test Error',
-      extraFields: CUSTOM_FIELDS
-    })
-
-    await findAndUpdateCheckbox(wrapper, 'CustomField')
-    const context = await submitForm(wrapper)
-    expect(context.extra.CustomField).toBe('mock data')
-  })
-
-  it('does not submit unchecked fields', async () => {
-    const wrapper = mountComponent({ errorType: 'Test Error' })
-    const textarea = wrapper.findComponent(Textarea)
-
-    // Set details but don't check any field checkboxes
-    await textarea.vm.$emit(
-      'update:modelValue',
-      'Report with only text but no fields selected'
-    )
-    const context = await submitForm(wrapper)
-
-    // Verify none of the optional fields were included
-    for (const field of DEFAULT_FIELDS) {
-      expect(context.extra[field]).toBeUndefined()
-    }
-  })
-
-  it.each([
-    {
-      checkbox: 'Logs',
-      apiMethod: 'getLogs',
-      expectedKey: 'Logs',
-      mockValue: 'mock logs'
-    },
-    {
-      checkbox: 'SystemStats',
-      apiMethod: 'getSystemStats',
-      expectedKey: 'SystemStats',
-      mockValue: 'mock stats'
-    },
-    {
-      checkbox: 'Settings',
-      apiMethod: 'getSettings',
-      expectedKey: 'Settings',
-      mockValue: 'mock settings'
-    }
-  ])(
-    'submits $checkbox data when checkbox is selected',
-    async ({ checkbox, apiMethod, expectedKey, mockValue }) => {
-      const wrapper = mountComponent({ errorType: 'Test Error' })
-
-      const { api } = (await import('@/scripts/api')) as any
-      vi.spyOn(api, apiMethod).mockResolvedValue(mockValue)
-
-      await findAndUpdateCheckbox(wrapper, checkbox)
-      const context = await submitForm(wrapper)
-      expect(context.extra[expectedKey]).toBe(mockValue)
-    }
-  )
-
-  it('submits workflow when the Workflow checkbox is selected', async () => {
-    const wrapper = mountComponent({ errorType: 'Test Error' })
-
-    const { app } = (await import('@/scripts/app')) as any
-    const mockWorkflow = { nodes: [], edges: [] }
-    vi.spyOn(app.graph, 'asSerialisable').mockReturnValue(mockWorkflow)
-
-    await findAndUpdateCheckbox(wrapper, 'Workflow')
-    const context = await submitForm(wrapper)
-
-    expect(context.extra.Workflow).toEqual(mockWorkflow)
-  })
-})

src/components/dialog/content/error/ReportIssuePanel.vue

@@ -1,348 +0,0 @@
-<template>
-  <Form
-    v-slot="$form"
-    :resolver="zodResolver(issueReportSchema)"
-    @submit="submit"
-  >
-    <Panel :pt="$attrs.pt as any">
-      <template #header>
-        <div class="flex items-center gap-2">
-          <span class="font-bold">{{ title }}</span>
-        </div>
-      </template>
-      <template #footer>
-        <div class="flex justify-end gap-4">
-          <Button
-            v-tooltip="!submitted ? $t('g.reportIssueTooltip') : undefined"
-            :label="submitted ? $t('g.reportSent') : $t('g.reportIssue')"
-            :severity="submitted ? 'secondary' : 'primary'"
-            :icon="submitted ? 'pi pi-check' : 'pi pi-send'"
-            :disabled="submitted"
-            type="submit"
-          />
-        </div>
-      </template>
-      <div class="p-4 mt-2 border border-round surface-border shadow-1">
-        <div class="flex flex-col gap-6">
-          <FormField
-            v-slot="$field"
-            name="contactInfo"
-            :initial-value="authStore.currentUser?.email"
-          >
-            <div class="self-stretch inline-flex justify-start items-center">
-              <label for="contactInfo" class="pb-2 pt-0 opacity-80">{{
-                $t('issueReport.email')
-              }}</label>
-            </div>
-            <InputText
-              id="contactInfo"
-              v-bind="$field"
-              class="w-full"
-              :placeholder="$t('issueReport.provideEmail')"
-            />
-            <Message
-              v-if="$field?.error && $field.touched && $field.value !== ''"
-              severity="error"
-              size="small"
-              variant="simple"
-            >
-              {{ t('issueReport.validation.invalidEmail') }}
-            </Message>
-          </FormField>
-
-          <FormField v-slot="$field" name="helpType">
-            <div class="flex flex-col gap-2">
-              <div
-                class="self-stretch inline-flex justify-start items-center gap-2.5"
-              >
-                <label for="helpType" class="pb-2 pt-0 opacity-80">{{
-                  $t('issueReport.whatDoYouNeedHelpWith')
-                }}</label>
-              </div>
-              <Dropdown
-                v-bind="$field"
-                v-model="$field.value"
-                :options="helpTypes"
-                option-label="label"
-                option-value="value"
-                :placeholder="$t('issueReport.selectIssue')"
-                class="w-full"
-              />
-              <Message
-                v-if="$field?.error"
-                severity="error"
-                size="small"
-                variant="simple"
-              >
-                {{ t('issueReport.validation.selectIssueType') }}
-              </Message>
-            </div>
-          </FormField>
-
-          <div class="flex flex-col gap-2">
-            <div
-              class="self-stretch inline-flex justify-start items-center gap-2.5"
-            >
-              <span class="pb-2 pt-0 opacity-80">{{
-                $t('issueReport.whatCanWeInclude')
-              }}</span>
-            </div>
-            <div class="flex flex-row gap-3">
-              <div v-for="field in fields" :key="field.value">
-                <FormField
-                  v-if="field.optIn"
-                  v-slot="$field"
-                  :name="field.value"
-                  class="flex space-x-1"
-                >
-                  <Checkbox
-                    v-bind="$field"
-                    v-model="selection"
-                    :input-id="field.value"
-                    :value="field.value"
-                  />
-                  <label :for="field.value">{{ field.label }}</label>
-                </FormField>
-              </div>
-            </div>
-          </div>
-          <div class="flex flex-col gap-2">
-            <FormField v-slot="$field" name="details">
-              <div
-                class="self-stretch inline-flex justify-start items-center gap-2.5"
-              >
-                <label for="details" class="pb-2 pt-0 opacity-80">{{
-                  $t('issueReport.describeTheProblem')
-                }}</label>
-              </div>
-              <Textarea
-                v-bind="$field"
-                id="details"
-                class="w-full"
-                rows="5"
-                :placeholder="$t('issueReport.provideAdditionalDetails')"
-                :aria-label="$t('issueReport.provideAdditionalDetails')"
-              />
-              <Message
-                v-if="$field?.error && $field.touched"
-                severity="error"
-                size="small"
-                variant="simple"
-              >
-                {{
-                  $field.value
-                    ? t('issueReport.validation.maxLength')
-                    : t('issueReport.validation.descriptionRequired')
-                }}
-              </Message>
-            </FormField>
-          </div>
-
-          <div class="flex flex-col gap-3 mt-2">
-            <div v-for="checkbox in contactCheckboxes" :key="checkbox.value">
-              <FormField
-                v-slot="$field"
-                :name="checkbox.value"
-                class="flex space-x-1"
-              >
-                <Checkbox
-                  v-bind="$field"
-                  v-model="contactPrefs"
-                  :input-id="checkbox.value"
-                  :value="checkbox.value"
-                  :disabled="
-                    $form.contactInfo?.error || !$form.contactInfo?.value
-                  "
-                />
-                <label :for="checkbox.value">{{ checkbox.label }}</label>
-              </FormField>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Panel>
-  </Form>
-</template>
-
-<script setup lang="ts">
-import { Form, FormField, type FormSubmitEvent } from '@primevue/forms'
-import { zodResolver } from '@primevue/forms/resolvers/zod'
-import type { CaptureContext, User } from '@sentry/core'
-import { captureMessage } from '@sentry/core'
-import _ from 'es-toolkit/compat'
-import { cloneDeep } from 'es-toolkit/compat'
-import Button from 'primevue/button'
-import Checkbox from 'primevue/checkbox'
-import Dropdown from 'primevue/dropdown'
-import InputText from 'primevue/inputtext'
-import Message from 'primevue/message'
-import Panel from 'primevue/panel'
-import Textarea from 'primevue/textarea'
-import { useToast } from 'primevue/usetoast'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  type IssueReportFormData,
-  issueReportSchema
-} from '@/schemas/issueReportSchema'
-import { api } from '@/scripts/api'
-import { app } from '@/scripts/app'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import type {
-  DefaultField,
-  IssueReportPanelProps,
-  ReportField
-} from '@/types/issueReportTypes'
-import { isElectron } from '@/utils/envUtil'
-import { generateUUID } from '@/utils/formatUtil'
-
-const DEFAULT_ISSUE_NAME = 'User reported issue'
-
-const props = defineProps<IssueReportPanelProps>()
-const { defaultFields = ['Workflow', 'Logs', 'SystemStats', 'Settings'] } =
-  props
-
-const { t } = useI18n()
-const toast = useToast()
-const authStore = useFirebaseAuthStore()
-
-const selection = ref<string[]>([])
-const contactPrefs = ref<string[]>([])
-const submitted = ref(false)
-
-const contactCheckboxes = [
-  { label: t('issueReport.contactFollowUp'), value: 'followUp' },
-  { label: t('issueReport.notifyResolve'), value: 'notifyOnResolution' }
-]
-
-const helpTypes = [
-  {
-    label: t('issueReport.helpTypes.billingPayments'),
-    value: 'billingPayments'
-  },
-  {
-    label: t('issueReport.helpTypes.loginAccessIssues'),
-    value: 'loginAccessIssues'
-  },
-  { label: t('issueReport.helpTypes.giveFeedback'), value: 'giveFeedback' },
-  { label: t('issueReport.helpTypes.bugReport'), value: 'bugReport' },
-  { label: t('issueReport.helpTypes.somethingElse'), value: 'somethingElse' }
-]
-
-const defaultFieldsConfig: ReportField[] = [
-  {
-    label: t('issueReport.systemStats'),
-    value: 'SystemStats',
-    getData: () => api.getSystemStats(),
-    optIn: true
-  },
-  {
-    label: t('g.workflow'),
-    value: 'Workflow',
-    getData: () => cloneDeep(app.graph.asSerialisable()),
-    optIn: true
-  },
-  {
-    label: t('g.logs'),
-    value: 'Logs',
-    getData: () => api.getLogs(),
-    optIn: true
-  },
-  {
-    label: t('g.settings'),
-    value: 'Settings',
-    getData: () => api.getSettings(),
-    optIn: true
-  }
-]
-
-const fields = computed(() => [
-  ...defaultFieldsConfig.filter(({ value }) =>
-    defaultFields.includes(value as DefaultField)
-  ),
-  ...(props.extraFields ?? [])
-])
-
-const createUser = (formData: IssueReportFormData): User => ({
-  email: formData.contactInfo || undefined
-})
-
-const createExtraData = async (formData: IssueReportFormData) => {
-  const result: Record<string, unknown> = {}
-  const isChecked = (fieldValue: string) => formData[fieldValue]
-
-  await Promise.all(
-    fields.value
-      .filter((field) => !field.optIn || isChecked(field.value))
-      .map(async (field) => {
-        try {
-          result[field.value] = await field.getData()
-        } catch (error) {
-          console.error(`Failed to collect ${field.value}:`, error)
-          result[field.value] = { error: String(error) }
-        }
-      })
-  )
-
-  return result
-}
-
-const createCaptureContext = async (
-  formData: IssueReportFormData
-): Promise<CaptureContext> => {
-  return {
-    user: createUser(formData),
-    level: 'error',
-    tags: {
-      errorType: props.errorType,
-      helpType: formData.helpType,
-      followUp: formData.contactInfo ? formData.followUp : false,
-      notifyOnResolution: formData.contactInfo
-        ? formData.notifyOnResolution
-        : false,
-      isElectron: isElectron(),
-      ..._.mapValues(props.tags, (tag) => _.trim(tag).replace(/[\n\r\t]/g, ' '))
-    },
-    extra: {
-      details: formData.details,
-      ...(await createExtraData(formData))
-    }
-  }
-}
-
-const generateUniqueTicketId = (type: string) => `${type}-${generateUUID()}`
-
-const submit = async (event: FormSubmitEvent) => {
-  if (event.valid) {
-    try {
-      const captureContext = await createCaptureContext(event.values)
-
-      // If it's billing or access issue, generate unique id to be used by customer service ticketing
-      const isValidContactInfo = event.values.contactInfo?.length
-      const isCustomerServiceIssue =
-        isValidContactInfo &&
-        ['billingPayments', 'loginAccessIssues'].includes(
-          event.values.helpType || ''
-        )
-      const issueName = isCustomerServiceIssue
-        ? `ticket-${generateUniqueTicketId(event.values.helpType || '')}`
-        : DEFAULT_ISSUE_NAME
-      captureMessage(issueName, captureContext)
-      submitted.value = true
-      toast.add({
-        severity: 'success',
-        summary: t('g.reportSent'),
-        life: 3000
-      })
-    } catch (error) {
-      toast.add({
-        severity: 'error',
-        summary: t('g.error'),
-        detail: error instanceof Error ? error.message : String(error),
-        life: 3000
-      })
-    }
-  }
-}
-</script>

src/components/dialog/content/manager/ManagerDialogContent.vue

@@ -1,487 +0,0 @@
-<template>
-  <div
-    class="h-full flex flex-col mx-auto overflow-hidden"
-    :aria-label="$t('manager.title')"
-  >
-    <ContentDivider :width="0.3" />
-    <Button
-      v-if="isSmallScreen"
-      :icon="isSideNavOpen ? 'pi pi-chevron-left' : 'pi pi-chevron-right'"
-      severity="secondary"
-      filled
-      class="absolute top-1/2 -translate-y-1/2 z-10"
-      :class="isSideNavOpen ? 'left-[12rem]' : 'left-2'"
-      @click="toggleSideNav"
-    />
-    <div class="flex flex-1 relative overflow-hidden">
-      <ManagerNavSidebar
-        v-if="isSideNavOpen"
-        v-model:selectedTab="selectedTab"
-        :tabs="tabs"
-      />
-      <div
-        class="flex-1 overflow-auto bg-gray-50 dark-theme:bg-neutral-900"
-        :class="{
-          'transition-all duration-300': isSmallScreen
-        }"
-      >
-        <div class="px-6 flex flex-col h-full">
-          <RegistrySearchBar
-            v-model:searchQuery="searchQuery"
-            v-model:searchMode="searchMode"
-            v-model:sortField="sortField"
-            :search-results="searchResults"
-            :suggestions="suggestions"
-            :is-missing-tab="isMissingTab"
-            :sort-options="sortOptions"
-          />
-          <div class="flex-1 overflow-auto">
-            <div
-              v-if="isLoading"
-              class="w-full h-full overflow-auto scrollbar-hide"
-            >
-              <GridSkeleton :grid-style="GRID_STYLE" :skeleton-card-count />
-            </div>
-            <NoResultsPlaceholder
-              v-else-if="searchResults.length === 0"
-              :title="
-                comfyManagerStore.error
-                  ? $t('manager.errorConnecting')
-                  : $t('manager.noResultsFound')
-              "
-              :message="
-                comfyManagerStore.error
-                  ? $t('manager.tryAgainLater')
-                  : $t('manager.tryDifferentSearch')
-              "
-            />
-            <div v-else class="h-full" @click="handleGridContainerClick">
-              <VirtualGrid
-                id="results-grid"
-                :items="resultsWithKeys"
-                :buffer-rows="4"
-                :grid-style="GRID_STYLE"
-                @approach-end="onApproachEnd"
-              >
-                <template #item="{ item }">
-                  <PackCard
-                    :node-pack="item"
-                    :is-selected="
-                      selectedNodePacks.some((pack) => pack.id === item.id)
-                    "
-                    @click.stop="(event) => selectNodePack(item, event)"
-                  />
-                </template>
-              </VirtualGrid>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="w-[clamp(250px,33%,306px)] border-l-0 flex z-20">
-        <ContentDivider orientation="vertical" :width="0.2" />
-        <div class="w-full flex flex-col isolate">
-          <InfoPanel
-            v-if="!hasMultipleSelections && selectedNodePack"
-            :node-pack="selectedNodePack"
-          />
-          <InfoPanelMultiItem v-else :node-packs="selectedNodePacks" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { whenever } from '@vueuse/core'
-import { merge } from 'es-toolkit/compat'
-import Button from 'primevue/button'
-import {
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  onUnmounted,
-  ref,
-  watch
-} from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import ContentDivider from '@/components/common/ContentDivider.vue'
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import VirtualGrid from '@/components/common/VirtualGrid.vue'
-import ManagerNavSidebar from '@/components/dialog/content/manager/ManagerNavSidebar.vue'
-import InfoPanel from '@/components/dialog/content/manager/infoPanel/InfoPanel.vue'
-import InfoPanelMultiItem from '@/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue'
-import PackCard from '@/components/dialog/content/manager/packCard/PackCard.vue'
-import RegistrySearchBar from '@/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue'
-import GridSkeleton from '@/components/dialog/content/manager/skeleton/GridSkeleton.vue'
-import { useResponsiveCollapse } from '@/composables/element/useResponsiveCollapse'
-import { useManagerStatePersistence } from '@/composables/manager/useManagerStatePersistence'
-import { useInstalledPacks } from '@/composables/nodePack/useInstalledPacks'
-import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
-import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'
-import { useRegistrySearch } from '@/composables/useRegistrySearch'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
-import type { TabItem } from '@/types/comfyManagerTypes'
-import { ManagerTab } from '@/types/comfyManagerTypes'
-import { components } from '@/types/comfyRegistryTypes'
-
-const { initialTab } = defineProps<{
-  initialTab?: ManagerTab
-}>()
-
-const { t } = useI18n()
-const comfyManagerStore = useComfyManagerStore()
-const { getPackById } = useComfyRegistryStore()
-const persistedState = useManagerStatePersistence()
-const initialState = persistedState.loadStoredState()
-
-const GRID_STYLE = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fill, minmax(19rem, 1fr))',
-  padding: '0.5rem',
-  gap: '1.5rem'
-} as const
-
-const {
-  isSmallScreen,
-  isOpen: isSideNavOpen,
-  toggle: toggleSideNav
-} = useResponsiveCollapse()
-
-const tabs = ref<TabItem[]>([
-  { id: ManagerTab.All, label: t('g.all'), icon: 'pi-list' },
-  { id: ManagerTab.Installed, label: t('g.installed'), icon: 'pi-box' },
-  {
-    id: ManagerTab.Workflow,
-    label: t('manager.inWorkflow'),
-    icon: 'pi-folder'
-  },
-  {
-    id: ManagerTab.Missing,
-    label: t('g.missing'),
-    icon: 'pi-exclamation-circle'
-  },
-  {
-    id: ManagerTab.UpdateAvailable,
-    label: t('g.updateAvailable'),
-    icon: 'pi-sync'
-  }
-])
-
-const initialTabId = initialTab ?? initialState.selectedTabId
-const selectedTab = ref<TabItem>(
-  tabs.value.find((tab) => tab.id === initialTabId) || tabs.value[0]
-)
-
-const {
-  searchQuery,
-  pageNumber,
-  isLoading: isSearchLoading,
-  searchResults,
-  searchMode,
-  sortField,
-  suggestions,
-  sortOptions
-} = useRegistrySearch({
-  initialSortField: initialState.sortField,
-  initialSearchMode: initialState.searchMode,
-  initialSearchQuery: initialState.searchQuery
-})
-pageNumber.value = 0
-const onApproachEnd = () => {
-  pageNumber.value++
-}
-
-const isInitialLoad = computed(
-  () => searchResults.value.length === 0 && searchQuery.value === ''
-)
-
-const isEmptySearch = computed(() => searchQuery.value === '')
-const displayPacks = ref<components['schemas']['Node'][]>([])
-
-const {
-  startFetchInstalled,
-  filterInstalledPack,
-  installedPacks,
-  isLoading: isLoadingInstalled,
-  isReady: installedPacksReady
-} = useInstalledPacks()
-
-const {
-  startFetchWorkflowPacks,
-  filterWorkflowPack,
-  workflowPacks,
-  isLoading: isLoadingWorkflow,
-  isReady: workflowPacksReady
-} = useWorkflowPacks()
-
-const filterMissingPacks = (packs: components['schemas']['Node'][]) =>
-  packs.filter((pack) => !comfyManagerStore.isPackInstalled(pack.id))
-
-const isUpdateAvailableTab = computed(
-  () => selectedTab.value?.id === ManagerTab.UpdateAvailable
-)
-const isInstalledTab = computed(
-  () => selectedTab.value?.id === ManagerTab.Installed
-)
-const isMissingTab = computed(
-  () => selectedTab.value?.id === ManagerTab.Missing
-)
-const isWorkflowTab = computed(
-  () => selectedTab.value?.id === ManagerTab.Workflow
-)
-const isAllTab = computed(() => selectedTab.value?.id === ManagerTab.All)
-
-const isOutdatedPack = (pack: components['schemas']['Node']) => {
-  const { isUpdateAvailable } = usePackUpdateStatus(pack)
-  return isUpdateAvailable.value === true
-}
-const filterOutdatedPacks = (packs: components['schemas']['Node'][]) =>
-  packs.filter(isOutdatedPack)
-
-watch(
-  [isUpdateAvailableTab, installedPacks],
-  async () => {
-    if (!isUpdateAvailableTab.value) return
-
-    if (!isEmptySearch.value) {
-      displayPacks.value = filterOutdatedPacks(installedPacks.value)
-    } else if (
-      !installedPacks.value.length &&
-      !installedPacksReady.value &&
-      !isLoadingInstalled.value
-    ) {
-      await startFetchInstalled()
-    } else {
-      displayPacks.value = filterOutdatedPacks(installedPacks.value)
-    }
-  },
-  { immediate: true }
-)
-
-watch(
-  [isInstalledTab, installedPacks],
-  async () => {
-    if (!isInstalledTab.value) return
-
-    if (!isEmptySearch.value) {
-      displayPacks.value = filterInstalledPack(searchResults.value)
-    } else if (
-      !installedPacks.value.length &&
-      !installedPacksReady.value &&
-      !isLoadingInstalled.value
-    ) {
-      await startFetchInstalled()
-    } else {
-      displayPacks.value = installedPacks.value
-    }
-  },
-  { immediate: true }
-)
-
-watch(
-  [isMissingTab, isWorkflowTab, workflowPacks, installedPacks],
-  async () => {
-    if (!isWorkflowTab.value && !isMissingTab.value) return
-
-    if (!isEmptySearch.value) {
-      displayPacks.value = isMissingTab.value
-        ? filterMissingPacks(filterWorkflowPack(searchResults.value))
-        : filterWorkflowPack(searchResults.value)
-    } else if (
-      !workflowPacks.value.length &&
-      !isLoadingWorkflow.value &&
-      !workflowPacksReady.value
-    ) {
-      await startFetchWorkflowPacks()
-      if (isMissingTab.value) {
-        await startFetchInstalled()
-      }
-    } else {
-      displayPacks.value = isMissingTab.value
-        ? filterMissingPacks(workflowPacks.value)
-        : workflowPacks.value
-    }
-  },
-  { immediate: true }
-)
-
-watch([isAllTab, searchResults], () => {
-  if (!isAllTab.value) return
-  displayPacks.value = searchResults.value
-})
-
-const onResultsChange = () => {
-  switch (selectedTab.value?.id) {
-    case ManagerTab.Installed:
-      displayPacks.value = isEmptySearch.value
-        ? installedPacks.value
-        : filterInstalledPack(searchResults.value)
-      break
-    case ManagerTab.Workflow:
-      displayPacks.value = isEmptySearch.value
-        ? workflowPacks.value
-        : filterWorkflowPack(searchResults.value)
-      break
-    case ManagerTab.Missing:
-      if (!isEmptySearch.value) {
-        displayPacks.value = filterMissingPacks(
-          filterWorkflowPack(searchResults.value)
-        )
-      }
-      break
-    case ManagerTab.UpdateAvailable:
-      displayPacks.value = isEmptySearch.value
-        ? filterOutdatedPacks(installedPacks.value)
-        : filterOutdatedPacks(searchResults.value)
-      break
-    default:
-      displayPacks.value = searchResults.value
-  }
-}
-
-watch(searchResults, onResultsChange, { flush: 'post' })
-watch(() => comfyManagerStore.installedPacksIds, onResultsChange)
-
-const isLoading = computed(() => {
-  if (isSearchLoading.value) return searchResults.value.length === 0
-  if (selectedTab.value?.id === ManagerTab.Installed) {
-    return isLoadingInstalled.value
-  }
-  if (
-    selectedTab.value?.id === ManagerTab.Workflow ||
-    selectedTab.value?.id === ManagerTab.Missing
-  ) {
-    return isLoadingWorkflow.value
-  }
-  return isInitialLoad.value
-})
-
-const resultsWithKeys = computed(
-  () =>
-    displayPacks.value.map((item) => ({
-      ...item,
-      key: item.id || item.name
-    })) as (components['schemas']['Node'] & { key: string })[]
-)
-
-const selectedNodePacks = ref<components['schemas']['Node'][]>([])
-const selectedNodePack = computed<components['schemas']['Node'] | null>(() =>
-  selectedNodePacks.value.length === 1 ? selectedNodePacks.value[0] : null
-)
-
-const getLoadingCount = () => {
-  switch (selectedTab.value?.id) {
-    case ManagerTab.Installed:
-      return comfyManagerStore.installedPacksIds?.size
-    case ManagerTab.Workflow:
-      return workflowPacks.value?.length
-    case ManagerTab.Missing:
-      return workflowPacks.value?.filter?.(
-        (pack) => !comfyManagerStore.isPackInstalled(pack.id)
-      )?.length
-    default:
-      return searchResults.value.length
-  }
-}
-
-const skeletonCardCount = computed(() => {
-  const loadingCount = getLoadingCount()
-  if (loadingCount) return loadingCount
-  return isSmallScreen.value ? 12 : 16
-})
-
-const selectNodePack = (
-  nodePack: components['schemas']['Node'],
-  event: MouseEvent
-) => {
-  // Handle multi-select with Shift or Ctrl/Cmd key
-  if (event.shiftKey || event.ctrlKey || event.metaKey) {
-    const index = selectedNodePacks.value.findIndex(
-      (pack) => pack.id === nodePack.id
-    )
-
-    if (index === -1) {
-      // Add to selection if not already selected
-      selectedNodePacks.value.push(nodePack)
-    } else {
-      // Remove from selection if already selected
-      selectedNodePacks.value.splice(index, 1)
-    }
-  } else {
-    // Single select behavior
-    selectedNodePacks.value = [nodePack]
-  }
-}
-
-const unSelectItems = () => {
-  selectedNodePacks.value = []
-}
-const handleGridContainerClick = (event: MouseEvent) => {
-  const targetElement = event.target as HTMLElement
-  if (targetElement && !targetElement.closest('[data-virtual-grid-item]')) {
-    unSelectItems()
-  }
-}
-
-const hasMultipleSelections = computed(() => selectedNodePacks.value.length > 1)
-
-// Track the last pack ID for which we've fetched full registry data
-const lastFetchedPackId = ref<string | null>(null)
-
-// Whenever a single pack is selected, fetch its full info once
-whenever(selectedNodePack, async () => {
-  // Cancel any in-flight requests from previously selected node pack
-  getPackById.cancel()
-  // If only a single node pack is selected, fetch full node pack info from registry
-  const pack = selectedNodePack.value
-  if (!pack?.id) return
-  if (hasMultipleSelections.value) return
-  // Only fetch if we haven't already for this pack
-  if (lastFetchedPackId.value === pack.id) return
-  const data = await getPackById.call(pack.id)
-  // If selected node hasn't changed since request, merge registry & Algolia data
-  if (data?.id === pack.id) {
-    lastFetchedPackId.value = pack.id
-    const mergedPack = merge({}, pack, data)
-    // Update the pack in current selection without changing selection state
-    const packIndex = selectedNodePacks.value.findIndex(
-      (p) => p.id === mergedPack.id
-    )
-    if (packIndex !== -1) {
-      selectedNodePacks.value.splice(packIndex, 1, mergedPack)
-    }
-    // Replace pack in displayPacks so that children receive a fresh prop reference
-    const idx = displayPacks.value.findIndex((p) => p.id === mergedPack.id)
-    if (idx !== -1) {
-      displayPacks.value.splice(idx, 1, mergedPack)
-    }
-  }
-})
-
-let gridContainer: HTMLElement | null = null
-onMounted(() => {
-  gridContainer = document.getElementById('results-grid')
-})
-watch([searchQuery, selectedTab], () => {
-  gridContainer ??= document.getElementById('results-grid')
-  if (gridContainer) {
-    pageNumber.value = 0
-    gridContainer.scrollTop = 0
-  }
-})
-
-onBeforeUnmount(() => {
-  persistedState.persistState({
-    selectedTabId: selectedTab.value?.id,
-    searchQuery: searchQuery.value,
-    searchMode: searchMode.value,
-    sortField: sortField.value
-  })
-})
-
-onUnmounted(() => {
-  getPackById.cancel()
-})
-</script>

src/components/dialog/content/manager/ManagerHeader.vue

@@ -1,9 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="flex items-center">
-      <h2 class="text-lg font-normal text-left">
-        {{ $t('manager.discoverCommunityContent') }}
-      </h2>
-    </div>
-  </div>
-</template>

src/components/dialog/content/manager/ManagerNavSidebar.vue

@@ -1,42 +0,0 @@
-<template>
-  <aside
-    class="flex translate-x-0 max-w-[250px] w-3/12 z-5 transition-transform duration-300 ease-in-out"
-  >
-    <ScrollPanel class="flex-1">
-      <Listbox
-        v-model="selectedTab"
-        :options="tabs"
-        option-label="label"
-        list-style="max-height:unset"
-        class="w-full border-0 bg-transparent shadow-none"
-        :pt="{
-          list: { class: 'p-3 gap-2' },
-          option: { class: 'px-4 py-2 text-lg rounded-lg' },
-          optionGroup: { class: 'p-0 text-left text-inherit' }
-        }"
-      >
-        <template #option="slotProps">
-          <div class="text-left flex items-center">
-            <i :class="['pi', slotProps.option.icon, 'text-sm mr-2']" />
-            <span class="text-sm">{{ slotProps.option.label }}</span>
-          </div>
-        </template>
-      </Listbox>
-    </ScrollPanel>
-    <ContentDivider orientation="vertical" :width="0.3" />
-  </aside>
-</template>
-
-<script setup lang="ts">
-import Listbox from 'primevue/listbox'
-import ScrollPanel from 'primevue/scrollpanel'
-
-import ContentDivider from '@/components/common/ContentDivider.vue'
-import type { TabItem } from '@/types/comfyManagerTypes'
-
-defineProps<{
-  tabs: TabItem[]
-}>()
-
-const selectedTab = defineModel<TabItem>('selectedTab')
-</script>

src/components/dialog/content/manager/PackStatusMessage.vue

@@ -1,80 +0,0 @@
-<template>
-  <Message
-    :severity="statusSeverity"
-    class="p-0 flex items-center rounded-xl break-words w-fit"
-    :pt="{
-      text: { class: 'text-xs' },
-      content: { class: 'px-2 py-0.5' }
-    }"
-  >
-    <i
-      class="pi pi-circle-fill mr-1.5 text-[0.6rem] p-0"
-      :style="{ opacity: 0.8 }"
-    />
-    {{ $t(`manager.status.${statusLabel}`) }}
-  </Message>
-</template>
-
-<script setup lang="ts">
-import Message from 'primevue/message'
-import { computed } from 'vue'
-
-import { components } from '@/types/comfyRegistryTypes'
-
-type PackVersionStatus = components['schemas']['NodeVersionStatus']
-type PackStatus = components['schemas']['NodeStatus']
-type Status = PackVersionStatus | PackStatus
-
-type MessageProps = InstanceType<typeof Message>['$props']
-type MessageSeverity = MessageProps['severity']
-type StatusProps = {
-  label: string
-  severity: MessageSeverity
-}
-
-const { statusType } = defineProps<{
-  statusType: Status
-}>()
-
-const statusPropsMap: Record<Status, StatusProps> = {
-  NodeStatusActive: {
-    label: 'active',
-    severity: 'success'
-  },
-  NodeStatusDeleted: {
-    label: 'deleted',
-    severity: 'warn'
-  },
-  NodeStatusBanned: {
-    label: 'banned',
-    severity: 'error'
-  },
-  NodeVersionStatusActive: {
-    label: 'active',
-    severity: 'success'
-  },
-  NodeVersionStatusPending: {
-    label: 'pending',
-    severity: 'warn'
-  },
-  NodeVersionStatusDeleted: {
-    label: 'deleted',
-    severity: 'warn'
-  },
-  NodeVersionStatusFlagged: {
-    label: 'flagged',
-    severity: 'error'
-  },
-  NodeVersionStatusBanned: {
-    label: 'banned',
-    severity: 'error'
-  }
-}
-
-const statusLabel = computed(
-  () => statusPropsMap[statusType]?.label || 'unknown'
-)
-const statusSeverity = computed(
-  () => statusPropsMap[statusType]?.severity || 'secondary'
-)
-</script>

src/components/dialog/content/manager/PackVersionBadge.test.ts

@@ -1,225 +0,0 @@
-import { VueWrapper, mount } from '@vue/test-utils'
-import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import enMessages from '@/locales/en/main.json'
-import { SelectedVersion } from '@/types/comfyManagerTypes'
-
-import PackVersionBadge from './PackVersionBadge.vue'
-import PackVersionSelectorPopover from './PackVersionSelectorPopover.vue'
-
-const mockNodePack = {
-  id: 'test-pack',
-  name: 'Test Pack',
-  latest_version: {
-    version: '1.0.0'
-  }
-}
-
-const mockInstalledPacks = {
-  'test-pack': { ver: '1.5.0' },
-  'installed-pack': { ver: '2.0.0' }
-}
-
-vi.mock('@/stores/comfyManagerStore', () => ({
-  useComfyManagerStore: vi.fn(() => ({
-    installedPacks: mockInstalledPacks,
-    isPackInstalled: (id: string) =>
-      !!mockInstalledPacks[id as keyof typeof mockInstalledPacks]
-  }))
-}))
-
-vi.mock('@/composables/nodePack/usePackUpdateStatus', () => ({
-  usePackUpdateStatus: vi.fn(() => ({
-    isUpdateAvailable: false
-  }))
-}))
-
-const mockToggle = vi.fn()
-const mockHide = vi.fn()
-const PopoverStub = {
-  name: 'Popover',
-  template: '<div><slot></slot></div>',
-  methods: {
-    toggle: mockToggle,
-    hide: mockHide
-  }
-}
-
-describe('PackVersionBadge', () => {
-  beforeEach(() => {
-    mockToggle.mockReset()
-    mockHide.mockReset()
-  })
-
-  const mountComponent = ({
-    props = {}
-  }: Record<string, any> = {}): VueWrapper => {
-    const i18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      messages: { en: enMessages }
-    })
-
-    return mount(PackVersionBadge, {
-      props: {
-        nodePack: mockNodePack,
-        isSelected: false,
-        ...props
-      },
-      global: {
-        plugins: [PrimeVue, createPinia(), i18n],
-        stubs: {
-          Popover: PopoverStub,
-          PackVersionSelectorPopover: true
-        }
-      }
-    })
-  }
-
-  it('renders with installed version from store', () => {
-    const wrapper = mountComponent()
-
-    const badge = wrapper.find('[role="button"]')
-    expect(badge.exists()).toBe(true)
-    expect(badge.find('span').text()).toBe('1.5.0') // From mockInstalledPacks
-  })
-
-  it('falls back to latest_version when not installed', () => {
-    // Use a nodePack that's not in the installedPacks
-    const uninstalledPack = {
-      id: 'uninstalled-pack',
-      name: 'Uninstalled Pack',
-      latest_version: {
-        version: '3.0.0'
-      }
-    }
-
-    const wrapper = mountComponent({
-      props: { nodePack: uninstalledPack }
-    })
-
-    const badge = wrapper.find('[role="button"]')
-    expect(badge.exists()).toBe(true)
-    expect(badge.find('span').text()).toBe('3.0.0') // From latest_version
-  })
-
-  it('falls back to NIGHTLY when no latest_version and not installed', () => {
-    // Use a nodePack with no latest_version and not in installedPacks
-    const noVersionPack = {
-      id: 'no-version-pack',
-      name: 'No Version Pack'
-    }
-
-    const wrapper = mountComponent({
-      props: { nodePack: noVersionPack }
-    })
-
-    const badge = wrapper.find('[role="button"]')
-    expect(badge.exists()).toBe(true)
-    expect(badge.find('span').text()).toBe(SelectedVersion.NIGHTLY)
-  })
-
-  it('falls back to NIGHTLY when nodePack.id is missing', () => {
-    const invalidPack = {
-      name: 'Invalid Pack'
-    }
-
-    const wrapper = mountComponent({
-      props: { nodePack: invalidPack }
-    })
-
-    const badge = wrapper.find('[role="button"]')
-    expect(badge.exists()).toBe(true)
-    expect(badge.find('span').text()).toBe(SelectedVersion.NIGHTLY)
-  })
-
-  it('toggles the popover when button is clicked', async () => {
-    const wrapper = mountComponent()
-
-    // Click the badge
-    await wrapper.find('[role="button"]').trigger('click')
-
-    // Verify that the toggle method was called
-    expect(mockToggle).toHaveBeenCalled()
-  })
-
-  it('closes the popover when cancel is emitted', async () => {
-    const wrapper = mountComponent()
-
-    // Simulate the popover emitting a cancel event
-    wrapper.findComponent(PackVersionSelectorPopover).vm.$emit('cancel')
-    await nextTick()
-
-    // Verify that the hide method was called
-    expect(mockHide).toHaveBeenCalled()
-  })
-
-  it('closes the popover when submit is emitted', async () => {
-    const wrapper = mountComponent()
-
-    // Simulate the popover emitting a submit event
-    wrapper.findComponent(PackVersionSelectorPopover).vm.$emit('submit')
-    await nextTick()
-
-    // Verify that the hide method was called
-    expect(mockHide).toHaveBeenCalled()
-  })
-
-  describe('selection state changes', () => {
-    it('closes the popover when card is deselected', async () => {
-      const wrapper = mountComponent({
-        props: { isSelected: true }
-      })
-
-      // Change isSelected from true to false
-      await wrapper.setProps({ isSelected: false })
-      await nextTick()
-
-      // Verify that the hide method was called
-      expect(mockHide).toHaveBeenCalled()
-    })
-
-    it('does not close the popover when card is selected', async () => {
-      const wrapper = mountComponent({
-        props: { isSelected: false }
-      })
-
-      // Change isSelected from false to true
-      await wrapper.setProps({ isSelected: true })
-      await nextTick()
-
-      // Verify that the hide method was NOT called
-      expect(mockHide).not.toHaveBeenCalled()
-    })
-
-    it('does not close the popover when isSelected remains false', async () => {
-      const wrapper = mountComponent({
-        props: { isSelected: false }
-      })
-
-      // Change isSelected from false to false (no change)
-      await wrapper.setProps({ isSelected: false })
-      await nextTick()
-
-      // Verify that the hide method was NOT called
-      expect(mockHide).not.toHaveBeenCalled()
-    })
-
-    it('does not close the popover when isSelected remains true', async () => {
-      const wrapper = mountComponent({
-        props: { isSelected: true }
-      })
-
-      // Change isSelected from true to true (no change)
-      await wrapper.setProps({ isSelected: true })
-      await nextTick()
-
-      // Verify that the hide method was NOT called
-      expect(mockHide).not.toHaveBeenCalled()
-    })
-  })
-})

src/components/dialog/content/manager/PackVersionBadge.vue

@@ -1,94 +0,0 @@
-<template>
-  <div>
-    <div
-      class="inline-flex items-center gap-1 rounded-2xl text-xs cursor-pointer px-2 py-1"
-      :class="{ 'bg-gray-100 dark-theme:bg-neutral-700': fill }"
-      aria-haspopup="true"
-      role="button"
-      tabindex="0"
-      @click="toggleVersionSelector"
-      @keydown.enter="toggleVersionSelector"
-      @keydown.space="toggleVersionSelector"
-    >
-      <i
-        v-if="isUpdateAvailable"
-        class="pi pi-arrow-circle-up text-blue-600"
-        style="font-size: 8px"
-      />
-      <span>{{ installedVersion }}</span>
-      <i class="pi pi-chevron-right" style="font-size: 8px" />
-    </div>
-
-    <Popover
-      ref="popoverRef"
-      :pt="{
-        content: { class: 'px-0' }
-      }"
-    >
-      <PackVersionSelectorPopover
-        :installed-version="installedVersion"
-        :node-pack="nodePack"
-        @cancel="closeVersionSelector"
-        @submit="closeVersionSelector"
-      />
-    </Popover>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Popover from 'primevue/popover'
-import { computed, ref, watch } from 'vue'
-
-import PackVersionSelectorPopover from '@/components/dialog/content/manager/PackVersionSelectorPopover.vue'
-import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { SelectedVersion } from '@/types/comfyManagerTypes'
-import { components } from '@/types/comfyRegistryTypes'
-import { isSemVer } from '@/utils/formatUtil'
-
-const TRUNCATED_HASH_LENGTH = 7
-
-const {
-  nodePack,
-  isSelected,
-  fill = true
-} = defineProps<{
-  nodePack: components['schemas']['Node']
-  isSelected: boolean
-  fill?: boolean
-}>()
-
-const { isUpdateAvailable } = usePackUpdateStatus(nodePack)
-const popoverRef = ref()
-
-const managerStore = useComfyManagerStore()
-
-const installedVersion = computed(() => {
-  if (!nodePack.id) return SelectedVersion.NIGHTLY
-  const version =
-    managerStore.installedPacks[nodePack.id]?.ver ??
-    nodePack.latest_version?.version ??
-    SelectedVersion.NIGHTLY
-
-  // If Git hash, truncate to 7 characters
-  return isSemVer(version) ? version : version.slice(0, TRUNCATED_HASH_LENGTH)
-})
-
-const toggleVersionSelector = (event: Event) => {
-  popoverRef.value.toggle(event)
-}
-
-const closeVersionSelector = () => {
-  popoverRef.value.hide()
-}
-
-// If the card is unselected, automatically close the version selector popover
-watch(
-  () => isSelected,
-  (isSelected, wasSelected) => {
-    if (wasSelected && !isSelected) {
-      closeVersionSelector()
-    }
-  }
-)
-</script>

src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts

@@ -1,331 +0,0 @@
-import { VueWrapper, mount } from '@vue/test-utils'
-import { createPinia } from 'pinia'
-import Button from 'primevue/button'
-import PrimeVue from 'primevue/config'
-import Listbox from 'primevue/listbox'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import enMessages from '@/locales/en/main.json'
-import { SelectedVersion } from '@/types/comfyManagerTypes'
-
-import PackVersionSelectorPopover from './PackVersionSelectorPopover.vue'
-
-// Default mock versions for reference
-const defaultMockVersions = [
-  { version: '1.0.0', createdAt: '2023-01-01' },
-  { version: '0.9.0', createdAt: '2022-12-01' },
-  { version: '0.8.0', createdAt: '2022-11-01' }
-]
-
-const mockNodePack = {
-  id: 'test-pack',
-  name: 'Test Pack',
-  latest_version: { version: '1.0.0' },
-  repository: 'https://github.com/user/repo'
-}
-
-// Create mock functions
-const mockGetPackVersions = vi.fn()
-const mockInstallPack = vi.fn().mockResolvedValue(undefined)
-
-// Mock the registry service
-vi.mock('@/services/comfyRegistryService', () => ({
-  useComfyRegistryService: vi.fn(() => ({
-    getPackVersions: mockGetPackVersions
-  }))
-}))
-
-// Mock the manager store
-vi.mock('@/stores/comfyManagerStore', () => ({
-  useComfyManagerStore: vi.fn(() => ({
-    installPack: {
-      call: mockInstallPack,
-      clear: vi.fn()
-    },
-    isPackInstalled: vi.fn(() => false),
-    getInstalledPackVersion: vi.fn(() => undefined)
-  }))
-}))
-
-const waitForPromises = async () => {
-  await new Promise((resolve) => setTimeout(resolve, 16))
-  await nextTick()
-}
-
-describe('PackVersionSelectorPopover', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockGetPackVersions.mockReset()
-    mockInstallPack.mockReset().mockResolvedValue(undefined)
-  })
-
-  const mountComponent = ({
-    props = {}
-  }: Record<string, any> = {}): VueWrapper => {
-    const i18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      messages: { en: enMessages }
-    })
-
-    return mount(PackVersionSelectorPopover, {
-      props: {
-        nodePack: mockNodePack,
-        ...props
-      },
-      global: {
-        plugins: [PrimeVue, createPinia(), i18n],
-        components: {
-          Listbox
-        }
-      }
-    })
-  }
-
-  it('fetches versions on mount', async () => {
-    // Set up the mock for this specific test
-    mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
-
-    mountComponent()
-    await waitForPromises()
-
-    expect(mockGetPackVersions).toHaveBeenCalledWith(mockNodePack.id)
-  })
-
-  it('shows loading state while fetching versions', async () => {
-    // Delay the promise resolution
-    mockGetPackVersions.mockImplementationOnce(
-      () =>
-        new Promise((resolve) =>
-          setTimeout(() => resolve(defaultMockVersions), 1000)
-        )
-    )
-
-    const wrapper = mountComponent()
-
-    expect(wrapper.text()).toContain('Loading versions...')
-  })
-
-  it('displays special options and version options in the listbox', async () => {
-    // Set up the mock for this specific test
-    mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
-
-    const wrapper = mountComponent()
-    await waitForPromises()
-
-    const listbox = wrapper.findComponent(Listbox)
-    expect(listbox.exists()).toBe(true)
-
-    const options = listbox.props('options')!
-    // Check that we have both special options and version options
-    expect(options.length).toBe(defaultMockVersions.length + 2) // 2 special options + version options
-
-    // Check that special options exist
-    expect(options.some((o) => o.value === SelectedVersion.NIGHTLY)).toBe(true)
-    expect(options.some((o) => o.value === SelectedVersion.LATEST)).toBe(true)
-
-    // Check that version options exist
-    expect(options.some((o) => o.value === '1.0.0')).toBe(true)
-    expect(options.some((o) => o.value === '0.9.0')).toBe(true)
-    expect(options.some((o) => o.value === '0.8.0')).toBe(true)
-  })
-
-  it('emits cancel event when cancel button is clicked', async () => {
-    // Set up the mock for this specific test
-    mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
-
-    const wrapper = mountComponent()
-    await waitForPromises()
-
-    const cancelButton = wrapper.findAllComponents(Button)[0]
-    await cancelButton.trigger('click')
-
-    expect(wrapper.emitted('cancel')).toBeTruthy()
-  })
-
-  it('calls installPack and emits submit when install button is clicked', async () => {
-    // Set up the mock for this specific test
-    mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
-
-    const wrapper = mountComponent()
-    await waitForPromises()
-
-    // Set the selected version
-    await wrapper.findComponent(Listbox).setValue('0.9.0')
-
-    const installButton = wrapper.findAllComponents(Button)[1]
-    await installButton.trigger('click')
-
-    // Check that installPack was called with the correct parameters
-    expect(mockInstallPack).toHaveBeenCalledWith(
-      expect.objectContaining({
-        id: mockNodePack.id,
-        repository: mockNodePack.repository,
-        version: '0.9.0',
-        selected_version: '0.9.0'
-      })
-    )
-
-    // Check that submit was emitted
-    expect(wrapper.emitted('submit')).toBeTruthy()
-  })
-
-  it('is reactive to nodePack prop changes', async () => {
-    // Set up the mock for the initial fetch
-    mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
-
-    const wrapper = mountComponent()
-    await waitForPromises()
-
-    // Set up the mock for the second fetch after prop change
-    mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
-
-    // Update the nodePack prop
-    const newNodePack = { ...mockNodePack, id: 'new-test-pack' }
-    await wrapper.setProps({ nodePack: newNodePack })
-    await waitForPromises()
-
-    // Should fetch versions for the new nodePack
-    expect(mockGetPackVersions).toHaveBeenCalledWith(newNodePack.id)
-  })
-
-  describe('nodePack.id changes', () => {
-    it('re-fetches versions when nodePack.id changes', async () => {
-      // Set up the mock for the initial fetch
-      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
-
-      const wrapper = mountComponent()
-      await waitForPromises()
-
-      // Verify initial fetch
-      expect(mockGetPackVersions).toHaveBeenCalledTimes(1)
-      expect(mockGetPackVersions).toHaveBeenCalledWith(mockNodePack.id)
-
-      // Set up the mock for the second fetch
-      const newVersions = [
-        { version: '2.0.0', createdAt: '2023-06-01' },
-        { version: '1.9.0', createdAt: '2023-05-01' }
-      ]
-      mockGetPackVersions.mockResolvedValueOnce(newVersions)
-
-      // Update the nodePack with a new ID
-      const newNodePack = {
-        ...mockNodePack,
-        id: 'different-pack',
-        name: 'Different Pack'
-      }
-      await wrapper.setProps({ nodePack: newNodePack })
-      await waitForPromises()
-
-      // Should fetch versions for the new nodePack
-      expect(mockGetPackVersions).toHaveBeenCalledTimes(2)
-      expect(mockGetPackVersions).toHaveBeenLastCalledWith(newNodePack.id)
-
-      // Check that new versions are displayed
-      const listbox = wrapper.findComponent(Listbox)
-      const options = listbox.props('options')!
-      expect(options.some((o) => o.value === '2.0.0')).toBe(true)
-      expect(options.some((o) => o.value === '1.9.0')).toBe(true)
-    })
-
-    it('does not re-fetch when nodePack changes but id remains the same', async () => {
-      // Set up the mock for the initial fetch
-      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
-
-      const wrapper = mountComponent()
-      await waitForPromises()
-
-      // Verify initial fetch
-      expect(mockGetPackVersions).toHaveBeenCalledTimes(1)
-
-      // Update the nodePack with same ID but different properties
-      const updatedNodePack = {
-        ...mockNodePack,
-        name: 'Updated Test Pack',
-        description: 'New description'
-      }
-      await wrapper.setProps({ nodePack: updatedNodePack })
-      await waitForPromises()
-
-      // Should NOT fetch versions again
-      expect(mockGetPackVersions).toHaveBeenCalledTimes(1)
-    })
-
-    it('maintains selected version when switching to a new pack', async () => {
-      // Set up the mock for the initial fetch
-      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
-
-      const wrapper = mountComponent()
-      await waitForPromises()
-
-      // Select a specific version
-      const listbox = wrapper.findComponent(Listbox)
-      await listbox.setValue('0.9.0')
-      expect(listbox.props('modelValue')).toBe('0.9.0')
-
-      // Set up the mock for the second fetch
-      mockGetPackVersions.mockResolvedValueOnce([
-        { version: '3.0.0', createdAt: '2023-07-01' },
-        { version: '0.9.0', createdAt: '2023-04-01' }
-      ])
-
-      // Update to a new pack that also has version 0.9.0
-      const newNodePack = {
-        id: 'another-pack',
-        name: 'Another Pack',
-        latest_version: { version: '3.0.0' }
-      }
-      await wrapper.setProps({ nodePack: newNodePack })
-      await waitForPromises()
-
-      // Selected version should remain the same if available
-      expect(listbox.props('modelValue')).toBe('0.9.0')
-    })
-  })
-
-  describe('Unclaimed GitHub packs handling', () => {
-    it('falls back to nightly when no versions exist', async () => {
-      // Set up the mock to return versions
-      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
-
-      const packWithRepo = {
-        ...mockNodePack,
-        latest_version: undefined
-      }
-
-      const wrapper = mountComponent({
-        props: {
-          nodePack: packWithRepo
-        }
-      })
-
-      await waitForPromises()
-      const listbox = wrapper.findComponent(Listbox)
-      expect(listbox.exists()).toBe(true)
-      expect(listbox.props('modelValue')).toBe(SelectedVersion.NIGHTLY)
-    })
-
-    it('defaults to nightly when publisher name is "Unclaimed"', async () => {
-      // Set up the mock to return versions
-      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
-
-      const unclaimedNodePack = {
-        ...mockNodePack,
-        publisher: { name: 'Unclaimed' }
-      }
-
-      const wrapper = mountComponent({
-        props: {
-          nodePack: unclaimedNodePack
-        }
-      })
-
-      await waitForPromises()
-      const listbox = wrapper.findComponent(Listbox)
-      expect(listbox.exists()).toBe(true)
-      expect(listbox.props('modelValue')).toBe(SelectedVersion.NIGHTLY)
-    })
-  })
-})

src/components/dialog/content/manager/PackVersionSelectorPopover.vue

@@ -1,187 +0,0 @@
-<template>
-  <div class="w-64 mt-2">
-    <span class="pl-3 text-muted text-md font-semibold opacity-70">
-      {{ $t('manager.selectVersion') }}
-    </span>
-    <div
-      v-if="isLoadingVersions || isQueueing"
-      class="text-center text-muted py-4 flex flex-col items-center"
-    >
-      <ProgressSpinner class="w-8 h-8 mb-2" />
-      {{ $t('manager.loadingVersions') }}
-    </div>
-    <div v-else-if="versionOptions.length === 0" class="py-2">
-      <NoResultsPlaceholder
-        :title="$t('g.noResultsFound')"
-        :message="$t('manager.tryAgainLater')"
-        icon="pi pi-exclamation-circle"
-        class="p-0"
-      />
-    </div>
-    <Listbox
-      v-else
-      v-model="selectedVersion"
-      option-label="label"
-      option-value="value"
-      :options="versionOptions"
-      :highlight-on-select="false"
-      class="my-3 w-full max-h-[50vh] border-none shadow-none"
-    >
-      <template #option="slotProps">
-        <div class="flex justify-between items-center w-full p-1">
-          <span>{{ slotProps.option.label }}</span>
-          <i
-            v-if="selectedVersion === slotProps.option.value"
-            class="pi pi-check text-highlight"
-          />
-        </div>
-      </template>
-    </Listbox>
-    <ContentDivider class="my-2" />
-    <div class="flex justify-end gap-2 p-1 px-3">
-      <Button
-        text
-        severity="secondary"
-        :label="$t('g.cancel')"
-        :disabled="isQueueing"
-        @click="emit('cancel')"
-      />
-      <Button
-        severity="secondary"
-        :label="$t('g.install')"
-        class="py-3 px-4 dark-theme:bg-unset bg-black/80 dark-theme:text-unset text-neutral-100 rounded-lg"
-        :disabled="isQueueing"
-        @click="handleSubmit"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { whenever } from '@vueuse/core'
-import Button from 'primevue/button'
-import Listbox from 'primevue/listbox'
-import ProgressSpinner from 'primevue/progressspinner'
-import { onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import ContentDivider from '@/components/common/ContentDivider.vue'
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import { useComfyRegistryService } from '@/services/comfyRegistryService'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import {
-  ManagerChannel,
-  ManagerDatabaseSource,
-  SelectedVersion
-} from '@/types/comfyManagerTypes'
-import { components } from '@/types/comfyRegistryTypes'
-import { isSemVer } from '@/utils/formatUtil'
-
-const { nodePack } = defineProps<{
-  nodePack: components['schemas']['Node']
-}>()
-
-const emit = defineEmits<{
-  cancel: []
-  submit: []
-}>()
-
-const { t } = useI18n()
-const registryService = useComfyRegistryService()
-const managerStore = useComfyManagerStore()
-
-const isQueueing = ref(false)
-
-const selectedVersion = ref<string>(SelectedVersion.LATEST)
-onMounted(() => {
-  const initialVersion = getInitialSelectedVersion() ?? SelectedVersion.LATEST
-  selectedVersion.value =
-    // Use NIGHTLY when version is a Git hash
-    isSemVer(initialVersion) ? initialVersion : SelectedVersion.NIGHTLY
-})
-
-const getInitialSelectedVersion = () => {
-  if (!nodePack.id) return
-
-  // If unclaimed, set selected version to nightly
-  if (nodePack.publisher?.name === 'Unclaimed') return SelectedVersion.NIGHTLY
-
-  // If node pack is installed, set selected version to the installed version
-  if (managerStore.isPackInstalled(nodePack.id))
-    return managerStore.getInstalledPackVersion(nodePack.id)
-
-  // If node pack is not installed, set selected version to latest
-  return nodePack.latest_version?.version
-}
-
-const fetchVersions = async () => {
-  if (!nodePack?.id) return []
-  return (await registryService.getPackVersions(nodePack.id)) || []
-}
-
-const versionOptions = ref<
-  {
-    value: string
-    label: string
-  }[]
->([])
-
-const isLoadingVersions = ref(false)
-
-const onNodePackChange = async () => {
-  isLoadingVersions.value = true
-
-  // Fetch versions from the registry
-  const versions = await fetchVersions()
-  const availableVersionOptions = versions
-    .map((version) => ({
-      value: version.version ?? '',
-      label: version.version ?? ''
-    }))
-    .filter((option) => option.value)
-
-  // Add Latest option
-  const defaultVersions = [
-    {
-      value: SelectedVersion.LATEST,
-      label: t('manager.latestVersion')
-    }
-  ]
-
-  // Add Nightly option if there is a non-empty `repository` field
-  if (nodePack.repository?.length) {
-    defaultVersions.push({
-      value: SelectedVersion.NIGHTLY,
-      label: t('manager.nightlyVersion')
-    })
-  }
-
-  versionOptions.value = [...defaultVersions, ...availableVersionOptions]
-  isLoadingVersions.value = false
-}
-
-whenever(
-  () => nodePack.id,
-  (nodePackId, oldNodePackId) => {
-    if (nodePackId !== oldNodePackId) {
-      void onNodePackChange()
-    }
-  },
-  { deep: true, immediate: true }
-)
-
-const handleSubmit = async () => {
-  isQueueing.value = true
-  await managerStore.installPack.call({
-    id: nodePack.id,
-    repository: nodePack.repository ?? '',
-    channel: ManagerChannel.DEFAULT,
-    mode: ManagerDatabaseSource.CACHE,
-    version: selectedVersion.value,
-    selected_version: selectedVersion.value
-  })
-
-  isQueueing.value = false
-  emit('submit')
-}
-</script>

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.test.ts

@@ -1,161 +0,0 @@
-import { VueWrapper, mount } from '@vue/test-utils'
-import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import ToggleSwitch from 'primevue/toggleswitch'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import enMessages from '@/locales/en/main.json'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-
-import PackEnableToggle from './PackEnableToggle.vue'
-
-// Mock debounce to execute immediately
-vi.mock('es-toolkit/compat', () => ({
-  debounce: <T extends (...args: any[]) => any>(fn: T) => fn
-}))
-
-const mockNodePack = {
-  id: 'test-pack',
-  name: 'Test Pack',
-  latest_version: {
-    version: '1.0.0',
-    createdAt: '2023-01-01T00:00:00Z'
-  }
-}
-
-const mockIsPackEnabled = vi.fn()
-const mockEnablePack = { call: vi.fn().mockResolvedValue(undefined) }
-const mockDisablePack = vi.fn().mockResolvedValue(undefined)
-vi.mock('@/stores/comfyManagerStore', () => ({
-  useComfyManagerStore: vi.fn(() => ({
-    isPackEnabled: mockIsPackEnabled,
-    enablePack: mockEnablePack,
-    disablePack: mockDisablePack,
-    installedPacks: {}
-  }))
-}))
-
-describe('PackEnableToggle', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockIsPackEnabled.mockReset()
-    mockEnablePack.call.mockReset().mockResolvedValue(undefined)
-    mockDisablePack.mockReset().mockResolvedValue(undefined)
-  })
-
-  const mountComponent = ({
-    props = {},
-    installedPacks = {}
-  }: Record<string, any> = {}): VueWrapper => {
-    const i18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      messages: { en: enMessages }
-    })
-
-    vi.mocked(useComfyManagerStore).mockReturnValue({
-      isPackEnabled: mockIsPackEnabled,
-      enablePack: mockEnablePack,
-      disablePack: mockDisablePack,
-      installedPacks
-    } as any)
-
-    return mount(PackEnableToggle, {
-      props: {
-        nodePack: mockNodePack,
-        ...props
-      },
-      global: {
-        plugins: [PrimeVue, createPinia(), i18n]
-      }
-    })
-  }
-
-  it('renders a toggle switch', () => {
-    mockIsPackEnabled.mockReturnValue(true)
-    const wrapper = mountComponent()
-
-    const toggleSwitch = wrapper.findComponent(ToggleSwitch)
-    expect(toggleSwitch.exists()).toBe(true)
-  })
-
-  it('checks if pack is enabled on mount', () => {
-    mockIsPackEnabled.mockReturnValue(true)
-    mountComponent()
-
-    expect(mockIsPackEnabled).toHaveBeenCalledWith(mockNodePack.id)
-  })
-
-  it('sets toggle to on when pack is enabled', () => {
-    mockIsPackEnabled.mockReturnValue(true)
-    const wrapper = mountComponent()
-
-    const toggleSwitch = wrapper.findComponent(ToggleSwitch)
-    expect(toggleSwitch.props('modelValue')).toBe(true)
-  })
-
-  it('sets toggle to off when pack is disabled', () => {
-    mockIsPackEnabled.mockReturnValue(false)
-    const wrapper = mountComponent()
-
-    const toggleSwitch = wrapper.findComponent(ToggleSwitch)
-    expect(toggleSwitch.props('modelValue')).toBe(false)
-  })
-
-  it('calls enablePack when toggle is switched on', async () => {
-    mockIsPackEnabled.mockReturnValue(false)
-    const wrapper = mountComponent()
-
-    const toggleSwitch = wrapper.findComponent(ToggleSwitch)
-    await toggleSwitch.vm.$emit('update:modelValue', true)
-
-    expect(mockEnablePack.call).toHaveBeenCalledWith(
-      expect.objectContaining({
-        id: mockNodePack.id,
-        version: mockNodePack.latest_version.version
-      })
-    )
-  })
-
-  it('calls disablePack when toggle is switched off', async () => {
-    mockIsPackEnabled.mockReturnValue(true)
-    const wrapper = mountComponent()
-
-    const toggleSwitch = wrapper.findComponent(ToggleSwitch)
-    await toggleSwitch.vm.$emit('update:modelValue', false)
-
-    expect(mockDisablePack).toHaveBeenCalledWith(
-      expect.objectContaining({
-        id: mockNodePack.id,
-        version: mockNodePack.latest_version.version
-      })
-    )
-  })
-
-  it('disables toggle while loading', async () => {
-    const pendingPromise = new Promise<void>((resolve) => {
-      setTimeout(() => resolve(), 1000)
-    })
-    mockEnablePack.call.mockReturnValue(pendingPromise)
-
-    mockIsPackEnabled.mockReturnValue(false)
-    const wrapper = mountComponent()
-
-    // Trigger the toggle
-    const toggleSwitch = wrapper.findComponent(ToggleSwitch)
-    await toggleSwitch.vm.$emit('update:modelValue', true)
-
-    // Check that the toggle is disabled during loading
-    await nextTick()
-    expect(wrapper.findComponent(ToggleSwitch).props('disabled')).toBe(true)
-
-    // Resolve the promise to simulate the operation completing
-    await pendingPromise
-
-    // Check that the toggle is enabled after the operation completes
-    await nextTick()
-    expect(wrapper.findComponent(ToggleSwitch).props('disabled')).toBe(false)
-  })
-})

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

@@ -1,76 +0,0 @@
-<template>
-  <div class="flex items-center">
-    <ToggleSwitch
-      :model-value="isEnabled"
-      :disabled="isLoading"
-      aria-label="Enable or disable pack"
-      @update:model-value="onToggle"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { debounce } from 'es-toolkit/compat'
-import ToggleSwitch from 'primevue/toggleswitch'
-import { computed, ref } from 'vue'
-
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import {
-  InstallPackParams,
-  ManagerChannel,
-  SelectedVersion
-} from '@/types/comfyManagerTypes'
-import type { components } from '@/types/comfyRegistryTypes'
-
-const TOGGLE_DEBOUNCE_MS = 256
-
-const { nodePack } = defineProps<{
-  nodePack: components['schemas']['Node']
-}>()
-
-const { isPackEnabled, enablePack, disablePack, installedPacks } =
-  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({
-    id: nodePack.id,
-    version: version.value,
-    selected_version: version.value,
-    repository: nodePack.repository ?? '',
-    channel: ManagerChannel.DEFAULT,
-    mode: 'default' as InstallPackParams['mode']
-  })
-
-const handleDisable = () =>
-  disablePack({
-    id: nodePack.id,
-    version: version.value
-  })
-
-const handleToggle = async (enable: boolean) => {
-  if (isLoading.value) return
-
-  isLoading.value = true
-  if (enable) {
-    await handleEnable()
-  } else {
-    handleDisable()
-  }
-  isLoading.value = false
-}
-
-const onToggle = debounce(handleToggle, TOGGLE_DEBOUNCE_MS, { trailing: true })
-</script>

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

@@ -1,78 +0,0 @@
-<template>
-  <PackActionButton
-    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"
-  />
-</template>
-
-<script setup lang="ts">
-import { inject, ref } from 'vue'
-
-import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import {
-  IsInstallingKey,
-  ManagerChannel,
-  ManagerDatabaseSource,
-  SelectedVersion
-} from '@/types/comfyManagerTypes'
-import type { components } from '@/types/comfyRegistryTypes'
-
-type NodePack = components['schemas']['Node']
-
-const { nodePacks, variant, label } = defineProps<{
-  nodePacks: NodePack[]
-  variant?: 'default' | 'black'
-  label?: string
-}>()
-
-const isInstalling = inject(IsInstallingKey, ref(false))
-
-const onClick = (): void => {
-  isInstalling.value = true
-}
-
-const managerStore = useComfyManagerStore()
-
-const createPayload = (installItem: NodePack) => {
-  const isUnclaimedPack = installItem.publisher?.name === 'Unclaimed'
-  const versionToInstall = isUnclaimedPack
-    ? SelectedVersion.NIGHTLY
-    : installItem.latest_version?.version ?? SelectedVersion.LATEST
-
-  return {
-    id: installItem.id,
-    repository: installItem.repository ?? '',
-    channel: ManagerChannel.DEV,
-    mode: ManagerDatabaseSource.CACHE,
-    selected_version: versionToInstall,
-    version: versionToInstall
-  }
-}
-
-const installPack = (item: NodePack) =>
-  managerStore.installPack.call(createPayload(item))
-
-const installAllPacks = async () => {
-  if (!nodePacks?.length) return
-
-  isInstalling.value = true
-
-  const uninstalledPacks = nodePacks.filter(
-    (pack) => !managerStore.isPackInstalled(pack.id)
-  )
-  if (!uninstalledPacks.length) return
-
-  await Promise.all(uninstalledPacks.map(installPack))
-  managerStore.installPack.clear()
-}
-</script>

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

@@ -1,43 +0,0 @@
-<template>
-  <PackActionButton
-    v-bind="$attrs"
-    :label="
-      nodePacks.length > 1
-        ? $t('manager.uninstallSelected')
-        : $t('manager.uninstall')
-    "
-    severity="danger"
-    :loading-message="$t('manager.uninstalling')"
-    @action="uninstallItems"
-  />
-</template>
-
-<script setup lang="ts">
-import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import type { ManagerPackInfo } from '@/types/comfyManagerTypes'
-import type { components } from '@/types/comfyRegistryTypes'
-
-type NodePack = components['schemas']['Node']
-
-const { nodePacks } = defineProps<{
-  nodePacks: NodePack[]
-}>()
-
-const managerStore = useComfyManagerStore()
-
-const createPayload = (uninstallItem: NodePack): ManagerPackInfo => {
-  return {
-    id: uninstallItem.id,
-    version: uninstallItem.latest_version?.version
-  }
-}
-
-const uninstallPack = (item: NodePack) =>
-  managerStore.uninstallPack(createPayload(item))
-
-const uninstallItems = async () => {
-  if (!nodePacks?.length) return
-  await Promise.all(nodePacks.map(uninstallPack))
-}
-</script>

src/components/dialog/content/manager/infoPanel/InfoPanel.vue

@@ -1,144 +0,0 @@
-<template>
-  <template v-if="nodePack">
-    <div class="flex flex-col h-full z-40 overflow-hidden relative">
-      <div class="top-0 z-10 px-6 pt-6 w-full">
-        <InfoPanelHeader :node-packs="[nodePack]" />
-      </div>
-      <div
-        ref="scrollContainer"
-        class="p-6 pt-2 overflow-y-auto flex-1 text-sm hidden-scrollbar"
-      >
-        <div class="mb-6">
-          <MetadataRow
-            v-if="isPackInstalled(nodePack.id)"
-            :label="t('manager.filter.enabled')"
-            class="flex"
-            style="align-items: center"
-          >
-            <PackEnableToggle :node-pack="nodePack" />
-          </MetadataRow>
-          <MetadataRow
-            v-for="item in infoItems"
-            v-show="item.value !== undefined && item.value !== null"
-            :key="item.key"
-            :label="item.label"
-            :value="item.value"
-          />
-          <MetadataRow :label="t('g.status')">
-            <PackStatusMessage
-              :status-type="
-                nodePack.status as components['schemas']['NodeVersionStatus']
-              "
-            />
-          </MetadataRow>
-          <MetadataRow :label="t('manager.version')">
-            <PackVersionBadge :node-pack="nodePack" :is-selected="true" />
-          </MetadataRow>
-        </div>
-        <div class="mb-6 overflow-hidden">
-          <InfoTabs :node-pack="nodePack" />
-        </div>
-      </div>
-    </div>
-  </template>
-  <template v-else>
-    <div class="pt-4 px-8 flex-1 overflow-hidden text-sm">
-      {{ $t('manager.infoPanelEmpty') }}
-    </div>
-  </template>
-</template>
-
-<script setup lang="ts">
-import { useScroll, whenever } from '@vueuse/core'
-import { computed, provide, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import PackStatusMessage from '@/components/dialog/content/manager/PackStatusMessage.vue'
-import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
-import PackEnableToggle from '@/components/dialog/content/manager/button/PackEnableToggle.vue'
-import InfoPanelHeader from '@/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue'
-import InfoTabs from '@/components/dialog/content/manager/infoPanel/InfoTabs.vue'
-import MetadataRow from '@/components/dialog/content/manager/infoPanel/MetadataRow.vue'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { IsInstallingKey } from '@/types/comfyManagerTypes'
-import { components } from '@/types/comfyRegistryTypes'
-
-interface InfoItem {
-  key: string
-  label: string
-  value: string | number | undefined
-}
-
-const { nodePack } = defineProps<{
-  nodePack: components['schemas']['Node']
-}>()
-
-const scrollContainer = ref<HTMLElement | null>(null)
-
-const managerStore = useComfyManagerStore()
-const isInstalled = computed(() => managerStore.isPackInstalled(nodePack.id))
-const isInstalling = ref(false)
-provide(IsInstallingKey, isInstalling)
-whenever(isInstalled, () => {
-  isInstalling.value = false
-})
-
-const { isPackInstalled } = useComfyManagerStore()
-
-const { t, d, n } = useI18n()
-
-const infoItems = computed<InfoItem[]>(() => [
-  {
-    key: 'publisher',
-    label: t('manager.createdBy'),
-    value: nodePack.publisher?.name ?? nodePack.publisher?.id
-  },
-  {
-    key: 'downloads',
-    label: t('manager.downloads'),
-    value: nodePack.downloads ? n(nodePack.downloads) : undefined
-  },
-  {
-    key: 'lastUpdated',
-    label: t('manager.lastUpdated'),
-    value: nodePack.latest_version?.createdAt
-      ? d(nodePack.latest_version.createdAt, {
-          dateStyle: 'medium'
-        })
-      : undefined
-  }
-])
-
-const { y } = useScroll(scrollContainer, {
-  eventListenerOptions: {
-    passive: true
-  }
-})
-const onNodePackChange = () => {
-  y.value = 0
-}
-
-whenever(
-  () => nodePack.id,
-  (nodePackId, oldNodePackId) => {
-    if (nodePackId !== oldNodePackId) {
-      onNodePackChange()
-    }
-  },
-  { immediate: true }
-)
-</script>
-<style scoped>
-.hidden-scrollbar {
-  /* Firefox */
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    width: 1px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-  }
-}
-</style>

src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue

@@ -1,59 +0,0 @@
-<template>
-  <div v-if="nodePacks?.length" class="flex flex-col items-center mb-6">
-    <slot name="thumbnail">
-      <PackIcon :node-pack="nodePacks[0]" width="24" height="24" />
-    </slot>
-    <h2
-      class="text-2xl font-bold text-center mt-4 mb-2"
-      style="word-break: break-all"
-    >
-      <slot name="title">
-        {{ nodePacks[0].name }}
-      </slot>
-    </h2>
-    <div class="mt-2 mb-4 w-full max-w-xs flex justify-center">
-      <slot name="install-button">
-        <PackUninstallButton
-          v-if="isAllInstalled"
-          v-bind="$attrs"
-          :node-packs="nodePacks"
-        />
-        <PackInstallButton v-else v-bind="$attrs" :node-packs="nodePacks" />
-      </slot>
-    </div>
-  </div>
-  <div v-else class="flex flex-col items-center mb-6">
-    <NoResultsPlaceholder
-      :message="$t('manager.status.unknown')"
-      :title="$t('manager.tryAgainLater')"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
-import PackUninstallButton from '@/components/dialog/content/manager/button/PackUninstallButton.vue'
-import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { components } from '@/types/comfyRegistryTypes'
-
-const { nodePacks } = defineProps<{
-  nodePacks: components['schemas']['Node'][]
-}>()
-
-const managerStore = useComfyManagerStore()
-
-const isAllInstalled = ref(false)
-watch(
-  [() => nodePacks, () => managerStore.installedPacks],
-  () => {
-    isAllInstalled.value = nodePacks.every((nodePack) =>
-      managerStore.isPackInstalled(nodePack.id)
-    )
-  },
-  { immediate: true }
-)
-</script>

src/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue

@@ -1,81 +0,0 @@
-<template>
-  <div v-if="nodePacks?.length" class="flex flex-col h-full">
-    <div class="p-6 flex-1 overflow-auto">
-      <InfoPanelHeader :node-packs>
-        <template #thumbnail>
-          <PackIconStacked :node-packs="nodePacks" />
-        </template>
-        <template #title>
-          {{ nodePacks.length }}
-          {{ $t('manager.packsSelected') }}
-        </template>
-        <template #install-button>
-          <PackInstallButton :full-width="true" :node-packs="nodePacks" />
-        </template>
-      </InfoPanelHeader>
-      <div class="mb-6">
-        <MetadataRow :label="$t('g.status')">
-          <PackStatusMessage status-type="NodeVersionStatusActive" />
-        </MetadataRow>
-        <MetadataRow
-          :label="$t('manager.totalNodes')"
-          :value="totalNodesCount"
-        />
-      </div>
-    </div>
-  </div>
-  <div v-else class="mt-4 mx-8 flex-1 overflow-hidden text-sm">
-    {{ $t('manager.infoPanelEmpty') }}
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useAsyncState } from '@vueuse/core'
-import { computed, onUnmounted } from 'vue'
-
-import PackStatusMessage from '@/components/dialog/content/manager/PackStatusMessage.vue'
-import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
-import InfoPanelHeader from '@/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue'
-import MetadataRow from '@/components/dialog/content/manager/infoPanel/MetadataRow.vue'
-import PackIconStacked from '@/components/dialog/content/manager/packIcon/PackIconStacked.vue'
-import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
-import { components } from '@/types/comfyRegistryTypes'
-
-const { nodePacks } = defineProps<{
-  nodePacks: components['schemas']['Node'][]
-}>()
-
-const { getNodeDefs } = useComfyRegistryStore()
-
-const getPackNodes = async (pack: components['schemas']['Node']) => {
-  if (!pack.latest_version?.version) return []
-  const nodeDefs = await getNodeDefs.call({
-    packId: pack.id,
-    version: pack.latest_version?.version,
-    // Fetch all nodes.
-    // TODO: Render all nodes previews and handle pagination.
-    // For determining length, use the `totalNumberOfPages` field of response
-    limit: 8192
-  })
-  return nodeDefs?.comfy_nodes ?? []
-}
-
-const { state: allNodeDefs } = useAsyncState(
-  () => Promise.all(nodePacks.map(getPackNodes)),
-  [],
-  {
-    immediate: true
-  }
-)
-
-const totalNodesCount = computed(() =>
-  allNodeDefs.value.reduce(
-    (total, nodeDefs) => total + (nodeDefs?.length || 0),
-    0
-  )
-)
-
-onUnmounted(() => {
-  getNodeDefs.cancel()
-})
-</script>

src/components/dialog/content/manager/infoPanel/InfoTabs.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="overflow-hidden">
-    <Tabs :value="activeTab">
-      <TabList>
-        <Tab value="description">
-          {{ $t('g.description') }}
-        </Tab>
-        <Tab value="nodes">
-          {{ $t('g.nodes') }}
-        </Tab>
-      </TabList>
-      <TabPanels class="overflow-auto">
-        <TabPanel value="description">
-          <DescriptionTabPanel :node-pack="nodePack" />
-        </TabPanel>
-        <TabPanel value="nodes">
-          <NodesTabPanel :node-pack="nodePack" :node-names="nodeNames" />
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Tab from 'primevue/tab'
-import TabList from 'primevue/tablist'
-import TabPanel from 'primevue/tabpanel'
-import TabPanels from 'primevue/tabpanels'
-import Tabs from 'primevue/tabs'
-import { computed, ref } from 'vue'
-
-import DescriptionTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue'
-import NodesTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue'
-import { components } from '@/types/comfyRegistryTypes'
-
-const { nodePack } = defineProps<{
-  nodePack: components['schemas']['Node']
-}>()
-
-const nodeNames = computed(() => {
-  // @ts-expect-error comfy_nodes is an Algolia-specific field
-  const { comfy_nodes } = nodePack
-  return comfy_nodes ?? []
-})
-
-const activeTab = ref('description')
-</script>

src/components/dialog/content/manager/infoPanel/InfoTextSection.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4 text-sm">
-    <div v-for="(section, index) in sections" :key="index" class="mb-4">
-      <div class="mb-1">
-        {{ section.title }}
-      </div>
-      <div class="text-muted break-words">
-        <a
-          v-if="section.isUrl"
-          :href="section.text"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="flex items-center gap-2"
-        >
-          <i v-if="isGitHubLink(section.text)" class="pi pi-github text-base" />
-          <span class="break-all">{{ section.text }}</span>
-        </a>
-        <MarkdownText v-else :text="section.text" class="text-muted" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import MarkdownText from '@/components/dialog/content/manager/infoPanel/MarkdownText.vue'
-
-export interface TextSection {
-  title: string
-  text: string
-  isUrl?: boolean
-}
-
-defineProps<{
-  sections: TextSection[]
-}>()
-
-const isGitHubLink = (url: string): boolean => url.includes('github.com')
-</script>

src/components/dialog/content/manager/infoPanel/MarkdownText.vue

@@ -1,108 +0,0 @@
-<template>
-  <div>
-    <div v-if="!hasMarkdown" class="break-words" v-text="text" />
-    <div v-else class="break-words">
-      <template v-for="(segment, index) in parsedSegments" :key="index">
-        <a
-          v-if="segment.type === 'link' && 'url' in segment"
-          :href="segment.url"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="hover:underline"
-        >
-          <span class="text-blue-600">{{ segment.text }}</span>
-        </a>
-        <strong v-else-if="segment.type === 'bold'">{{ segment.text }}</strong>
-        <em v-else-if="segment.type === 'italic'">{{ segment.text }}</em>
-        <code
-          v-else-if="segment.type === 'code'"
-          class="px-1 py-0.5 rounded text-xs"
-          >{{ segment.text }}</code
-        >
-        <span v-else>{{ segment.text }}</span>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const { text } = defineProps<{
-  text: string
-}>()
-
-type MarkdownSegment = {
-  type: 'text' | 'link' | 'bold' | 'italic' | 'code'
-  text: string
-  url?: string
-}
-
-const hasMarkdown = computed(() => {
-  const hasMarkdown =
-    /(\[.*?\]\(.*?\)|(\*\*|__)(.*?)(\*\*|__)|(\*|_)(.*?)(\*|_)|`(.*?)`)/.test(
-      text
-    )
-  return hasMarkdown
-})
-
-const parsedSegments = computed(() => {
-  if (!hasMarkdown.value) return [{ type: 'text', text }]
-
-  const segments: MarkdownSegment[] = []
-  const remainingText = text
-  let lastIndex: number = 0
-
-  const linkRegex = /\[(.*?)\]\((.*?)\)/g
-  let linkMatch: RegExpExecArray | null
-
-  while ((linkMatch = linkRegex.exec(remainingText)) !== null) {
-    // Add text before the match
-    if (linkMatch.index > lastIndex) {
-      segments.push({
-        type: 'text',
-        text: remainingText.substring(lastIndex, linkMatch.index)
-      })
-    }
-
-    // Add the link
-    segments.push({
-      type: 'link',
-      text: linkMatch[1],
-      url: linkMatch[2]
-    })
-
-    lastIndex = linkMatch.index + linkMatch[0].length
-  }
-
-  // Add remaining text after all links
-  if (lastIndex < remainingText.length) {
-    let rest = remainingText.substring(lastIndex)
-
-    // Process bold text
-    rest = rest.replace(/(\*\*|__)(.*?)(\*\*|__)/g, (_, __, p2) => {
-      segments.push({ type: 'bold', text: p2 })
-      return ''
-    })
-
-    // Process italic text
-    rest = rest.replace(/(\*|_)(.*?)(\*|_)/g, (_, __, p2) => {
-      segments.push({ type: 'italic', text: p2 })
-      return ''
-    })
-
-    // Process code
-    rest = rest.replace(/`(.*?)`/g, (_, p1) => {
-      segments.push({ type: 'code', text: p1 })
-      return ''
-    })
-
-    // Add any remaining text
-    if (rest) {
-      segments.push({ type: 'text', text: rest })
-    }
-  }
-
-  return segments
-})
-</script>

src/components/dialog/content/manager/infoPanel/MetadataRow.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="flex py-1.5 text-xs">
-    <div class="w-1/3 truncate pr-2 text-muted">{{ label }}:</div>
-    <div class="w-2/3">
-      <slot>{{ value }}</slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const { value = 'N/A', label = 'N/A' } = defineProps<{
-  label: string
-  value?: string | number
-}>()
-</script>

src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.test.ts

@@ -1,179 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import enMessages from '@/locales/en/main.json'
-import { components } from '@/types/comfyRegistryTypes'
-
-import DescriptionTabPanel from './DescriptionTabPanel.vue'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: enMessages
-  }
-})
-
-const TRANSLATIONS = {
-  description: 'Description',
-  repository: 'Repository',
-  license: 'License',
-  noDescription: 'No description available'
-}
-
-describe('DescriptionTabPanel', () => {
-  const mountComponent = (props: {
-    nodePack: Partial<components['schemas']['Node']>
-  }) => {
-    return mount(DescriptionTabPanel, {
-      props,
-      global: {
-        plugins: [i18n]
-      }
-    })
-  }
-
-  const getSectionByTitle = (
-    wrapper: ReturnType<typeof mountComponent>,
-    title: string
-  ) => {
-    const sections = wrapper
-      .findComponent({ name: 'InfoTextSection' })
-      .props('sections')
-    return sections.find((s: any) => s.title === title)
-  }
-
-  const createNodePack = (
-    overrides: Partial<components['schemas']['Node']> = {}
-  ) => ({
-    description: 'Test description',
-    ...overrides
-  })
-
-  const licenseTests = [
-    {
-      name: 'handles plain text license',
-      nodePack: createNodePack({
-        license: 'MIT License',
-        repository: 'https://github.com/user/repo'
-      }),
-      expected: {
-        text: 'MIT License',
-        isUrl: false
-      }
-    },
-    {
-      name: 'handles license file names',
-      nodePack: createNodePack({
-        license: 'LICENSE',
-        repository: 'https://github.com/user/repo'
-      }),
-      expected: {
-        text: 'https://github.com/user/repo/blob/main/LICENSE',
-        isUrl: true
-      }
-    },
-    {
-      name: 'handles license.md file names',
-      nodePack: createNodePack({
-        license: 'license.md',
-        repository: 'https://github.com/user/repo'
-      }),
-      expected: {
-        text: 'https://github.com/user/repo/blob/main/license.md',
-        isUrl: true
-      }
-    },
-    {
-      name: 'handles JSON license objects with text property',
-      nodePack: createNodePack({
-        license: JSON.stringify({ text: 'GPL-3.0' }),
-        repository: 'https://github.com/user/repo'
-      }),
-      expected: {
-        text: 'GPL-3.0',
-        isUrl: false
-      }
-    },
-    {
-      name: 'handles JSON license objects with file property',
-      nodePack: createNodePack({
-        license: JSON.stringify({ file: 'LICENSE.md' }),
-        repository: 'https://github.com/user/repo'
-      }),
-      expected: {
-        text: 'https://github.com/user/repo/blob/main/LICENSE.md',
-        isUrl: true
-      }
-    },
-    {
-      name: 'handles missing repository URL',
-      nodePack: createNodePack({
-        license: 'LICENSE'
-      }),
-      expected: {
-        text: 'LICENSE',
-        isUrl: false
-      }
-    },
-    {
-      name: 'handles non-GitHub repository URLs',
-      nodePack: createNodePack({
-        license: 'LICENSE',
-        repository: 'https://gitlab.com/user/repo'
-      }),
-      expected: {
-        text: 'https://gitlab.com/user/repo/blob/main/LICENSE',
-        isUrl: true
-      }
-    }
-  ]
-
-  describe('license formatting', () => {
-    licenseTests.forEach((test) => {
-      it(test.name, () => {
-        const wrapper = mountComponent({ nodePack: test.nodePack })
-        const licenseSection = getSectionByTitle(wrapper, TRANSLATIONS.license)
-        expect(licenseSection).toBeDefined()
-        expect(licenseSection.text).toBe(test.expected.text)
-        expect(licenseSection.isUrl).toBe(test.expected.isUrl)
-      })
-    })
-  })
-
-  describe('description sections', () => {
-    it('shows description section', () => {
-      const wrapper = mountComponent({
-        nodePack: createNodePack()
-      })
-      const descriptionSection = getSectionByTitle(
-        wrapper,
-        TRANSLATIONS.description
-      )
-      expect(descriptionSection).toBeDefined()
-      expect(descriptionSection.text).toBe('Test description')
-    })
-
-    it('shows repository section when available', () => {
-      const wrapper = mountComponent({
-        nodePack: createNodePack({
-          repository: 'https://github.com/user/repo'
-        })
-      })
-      const repoSection = getSectionByTitle(wrapper, TRANSLATIONS.repository)
-      expect(repoSection).toBeDefined()
-      expect(repoSection.text).toBe('https://github.com/user/repo')
-      expect(repoSection.isUrl).toBe(true)
-    })
-
-    it('shows fallback text when description is missing', () => {
-      const wrapper = mountComponent({
-        nodePack: {
-          description: undefined
-        }
-      })
-      expect(wrapper.find('p').text()).toBe(TRANSLATIONS.noDescription)
-    })
-  })
-})

src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue

@@ -1,151 +0,0 @@
-<template>
-  <div class="mt-4 overflow-hidden">
-    <InfoTextSection
-      v-if="nodePack?.description"
-      :sections="descriptionSections"
-    />
-    <p v-else class="text-muted italic text-sm">
-      {{ $t('manager.noDescription') }}
-    </p>
-    <div v-if="nodePack?.latest_version?.dependencies?.length">
-      <p class="mb-1">
-        {{ $t('manager.dependencies') }}
-      </p>
-      <div
-        v-for="(dep, index) in nodePack.latest_version.dependencies"
-        :key="index"
-        class="text-muted break-words"
-      >
-        {{ dep }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import InfoTextSection, {
-  type TextSection
-} from '@/components/dialog/content/manager/infoPanel/InfoTextSection.vue'
-import { components } from '@/types/comfyRegistryTypes'
-import { isValidUrl } from '@/utils/formatUtil'
-
-const { t } = useI18n()
-
-const { nodePack } = defineProps<{
-  nodePack: components['schemas']['Node']
-}>()
-
-const isLicenseFile = (filename: string): boolean => {
-  // Match LICENSE, LICENSE.md, LICENSE.txt (case insensitive)
-  const licensePattern = /^license(\.md|\.txt)?$/i
-  return licensePattern.test(filename)
-}
-
-const extractBaseRepoUrl = (repoUrl: string): string => {
-  const githubRepoPattern = /^(https?:\/\/github\.com\/[^/]+\/[^/]+)/i
-  const match = repoUrl.match(githubRepoPattern)
-  return match ? match[1] : repoUrl
-}
-
-const createLicenseUrl = (filename: string, repoUrl: string): string => {
-  if (!repoUrl || !filename) return ''
-
-  const licenseFile = isLicenseFile(filename) ? filename : 'LICENSE'
-  const baseRepoUrl = extractBaseRepoUrl(repoUrl)
-  return `${baseRepoUrl}/blob/main/${licenseFile}`
-}
-
-const parseLicenseObject = (
-  licenseObj: any
-): { text: string; isUrl: boolean } => {
-  const licenseFile = licenseObj.file || licenseObj.text
-
-  if (
-    typeof licenseFile === 'string' &&
-    isLicenseFile(licenseFile) &&
-    nodePack.repository
-  ) {
-    const url = createLicenseUrl(licenseFile, nodePack.repository)
-    return {
-      text: url,
-      isUrl: !!url && isValidUrl(url)
-    }
-  } else if (licenseObj.text) {
-    return {
-      text: licenseObj.text,
-      isUrl: false
-    }
-  } else if (typeof licenseFile === 'string') {
-    // Return the license file name if repository is missing
-    return {
-      text: licenseFile,
-      isUrl: false
-    }
-  }
-  return {
-    text: JSON.stringify(licenseObj),
-    isUrl: false
-  }
-}
-
-const formatLicense = (
-  license: string
-): { text: string; isUrl: boolean } | null => {
-  // Treat "{}" JSON string as undefined
-  if (license === '{}') return null
-
-  try {
-    const licenseObj = JSON.parse(license)
-    // Handle empty object case
-    if (Object.keys(licenseObj).length === 0) {
-      return null
-    }
-    return parseLicenseObject(licenseObj)
-  } catch (e) {
-    if (isLicenseFile(license) && nodePack.repository) {
-      const url = createLicenseUrl(license, nodePack.repository)
-      return {
-        text: url,
-        isUrl: !!url && isValidUrl(url)
-      }
-    }
-    return {
-      text: license,
-      isUrl: false
-    }
-  }
-}
-
-const descriptionSections = computed<TextSection[]>(() => {
-  const sections: TextSection[] = [
-    {
-      title: t('g.description'),
-      text: nodePack.description || t('manager.noDescription')
-    }
-  ]
-
-  if (nodePack.repository) {
-    sections.push({
-      title: t('manager.repository'),
-      text: nodePack.repository,
-      isUrl: isValidUrl(nodePack.repository)
-    })
-  }
-
-  if (nodePack.license) {
-    const licenseInfo = formatLicense(nodePack.license)
-    if (licenseInfo && licenseInfo.text) {
-      sections.push({
-        title: t('manager.license'),
-        text: licenseInfo.text,
-        isUrl: licenseInfo.isUrl
-      })
-    }
-  }
-
-  return sections
-})
-</script>

src/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4 mt-4 text-sm">
-    <template v-if="mappedNodeDefs?.length">
-      <div
-        v-for="nodeDef in mappedNodeDefs"
-        :key="createNodeDefKey(nodeDef)"
-        class="border rounded-lg p-4"
-      >
-        <NodePreview :node-def="nodeDef" class="!text-[.625rem] !min-w-full" />
-      </div>
-    </template>
-    <template v-else-if="isLoading">
-      <ProgressSpinner />
-    </template>
-    <template v-else-if="nodeNames.length">
-      <div v-for="node in nodeNames" :key="node" class="text-muted truncate">
-        {{ node }}
-      </div>
-    </template>
-    <template v-else>
-      <NoResultsPlaceholder
-        :title="$t('manager.noNodesFound')"
-        :message="$t('manager.noNodesFoundDescription')"
-      />
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { whenever } from '@vueuse/core'
-import ProgressSpinner from 'primevue/progressspinner'
-import { computed, ref, shallowRef, useId } from 'vue'
-
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import NodePreview from '@/components/node/NodePreview.vue'
-import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
-import { components, operations } from '@/types/comfyRegistryTypes'
-import { registryToFrontendV2NodeDef } from '@/utils/mapperUtil'
-
-type ListComfyNodesResponse =
-  operations['ListComfyNodes']['responses'][200]['content']['application/json']['comfy_nodes']
-
-const { nodePack, nodeNames } = defineProps<{
-  nodePack: components['schemas']['Node']
-  nodeNames: string[]
-}>()
-
-const { getNodeDefs } = useComfyRegistryStore()
-
-const isLoading = ref(false)
-const registryNodeDefs = shallowRef<ListComfyNodesResponse | null>(null)
-
-const fetchNodeDefs = async () => {
-  getNodeDefs.cancel()
-  isLoading.value = true
-
-  const { id: packId } = nodePack
-  const version = nodePack.latest_version?.version
-
-  if (!packId || !version) {
-    registryNodeDefs.value = null
-  } else {
-    const response = await getNodeDefs.call({
-      packId,
-      version,
-      page: 1,
-      limit: 256
-    })
-    registryNodeDefs.value = response?.comfy_nodes ?? null
-  }
-
-  isLoading.value = false
-}
-
-whenever(() => nodePack, fetchNodeDefs, { immediate: true, deep: true })
-
-const toFrontendNodeDef = (nodeDef: components['schemas']['ComfyNode']) => {
-  try {
-    return registryToFrontendV2NodeDef(nodeDef, nodePack)
-  } catch (error) {
-    return null
-  }
-}
-const mappedNodeDefs = computed(() => {
-  if (!registryNodeDefs.value) return null
-  return registryNodeDefs.value
-    .map(toFrontendNodeDef)
-    .filter((nodeDef) => nodeDef !== null)
-})
-
-const createNodeDefKey = (nodeDef: components['schemas']['ComfyNode']) =>
-  `${nodeDef.category}${nodeDef.comfy_node_name ?? useId()}`
-</script>

src/components/dialog/content/manager/packBanner/PackBanner.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="w-full aspect-[7/3] overflow-hidden">
-    <!-- default banner show -->
-    <div v-if="showDefaultBanner" class="w-full h-full">
-      <img
-        :src="DEFAULT_BANNER"
-        alt="default banner"
-        class="w-full h-full object-cover"
-      />
-    </div>
-    <!-- banner_url or icon show -->
-    <div v-else class="relative w-full h-full">
-      <!-- blur background -->
-      <div
-        v-if="imgSrc"
-        class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-30"
-        :style="{
-          backgroundImage: `url(${imgSrc})`,
-          filter: 'blur(10px)'
-        }"
-      ></div>
-      <!-- image -->
-      <img
-        :src="isImageError ? DEFAULT_BANNER : imgSrc"
-        :alt="nodePack.name + ' banner'"
-        :class="
-          isImageError
-            ? 'relative w-full h-full object-cover z-10'
-            : 'relative w-full h-full object-contain z-10'
-        "
-        @error="isImageError = true"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-import { components } from '@/types/comfyRegistryTypes'
-
-const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
-
-const { nodePack } = defineProps<{
-  nodePack: components['schemas']['Node']
-}>()
-
-const isImageError = ref(false)
-
-const showDefaultBanner = computed(() => !nodePack.banner_url && !nodePack.icon)
-const imgSrc = computed(() => nodePack.banner_url || nodePack.icon)
-</script>

src/components/dialog/content/manager/packCard/PackCard.vue

@@ -1,165 +0,0 @@
-<template>
-  <Card
-    class="w-full h-full inline-flex flex-col justify-between items-start overflow-hidden rounded-lg shadow-elevation-3 dark-theme:bg-dark-elevation-2 transition-all duration-200"
-    :class="{
-      'selected-card': isSelected,
-      'opacity-60': isDisabled
-    }"
-    :pt="{
-      body: { class: 'p-0 flex flex-col w-full h-full rounded-lg gap-0' },
-      content: { class: 'flex-1 flex flex-col rounded-lg min-h-0' },
-      title: { class: 'w-full h-full rounded-t-lg cursor-pointer' },
-      footer: {
-        class: 'p-0 m-0 flex flex-col gap-0',
-        style: {
-          borderTop: isLightTheme ? '1px solid #f4f4f4' : '1px solid #2C2C2C'
-        }
-      }
-    }"
-  >
-    <template #title>
-      <PackBanner :node-pack="nodePack" />
-    </template>
-    <template #content>
-      <template v-if="isInstalling">
-        <div
-          class="self-stretch inline-flex flex-col justify-center items-center gap-2 h-full"
-        >
-          <ProgressSpinner />
-          <div
-            class="self-stretch text-center justify-start text-sm font-medium leading-none"
-          >
-            {{ $t('g.installing') }}...
-          </div>
-        </div>
-      </template>
-      <template v-else>
-        <div class="pt-4 px-4 pb-3 w-full h-full">
-          <div class="flex flex-col gap-y-1 w-full h-full">
-            <span
-              class="text-sm font-bold truncate overflow-hidden text-ellipsis"
-            >
-              {{ nodePack.name }}
-            </span>
-            <p
-              v-if="nodePack.description"
-              class="flex-1 text-muted text-xs font-medium break-words overflow-hidden min-h-12 line-clamp-3 my-0 leading-4 mb-1 overflow-hidden"
-            >
-              {{ nodePack.description }}
-            </p>
-            <div class="flex flex-col gap-y-2">
-              <div class="flex-1 flex items-center gap-2">
-                <div v-if="nodesCount" class="p-2 pl-0 text-xs">
-                  {{ nodesCount }} {{ $t('g.nodes') }}
-                </div>
-                <PackVersionBadge
-                  :node-pack="nodePack"
-                  :is-selected="isSelected"
-                  :fill="false"
-                />
-                <div
-                  v-if="formattedLatestVersionDate"
-                  class="px-2 py-1 flex justify-center items-center gap-1 text-xs text-muted font-medium"
-                >
-                  {{ formattedLatestVersionDate }}
-                </div>
-              </div>
-              <div class="flex">
-                <span
-                  v-if="publisherName"
-                  class="text-xs text-muted font-medium leading-3 max-w-40 truncate"
-                >
-                  {{ publisherName }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </template>
-    </template>
-    <template #footer>
-      <PackCardFooter :node-pack="nodePack" />
-    </template>
-  </Card>
-</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 { useI18n } from 'vue-i18n'
-
-import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
-import PackBanner from '@/components/dialog/content/manager/packBanner/PackBanner.vue'
-import PackCardFooter from '@/components/dialog/content/manager/packCard/PackCardFooter.vue'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-import {
-  IsInstallingKey,
-  type MergedNodePack,
-  type RegistryPack,
-  isMergedNodePack
-} from '@/types/comfyManagerTypes'
-
-const { nodePack, isSelected = false } = defineProps<{
-  nodePack: MergedNodePack | RegistryPack
-  isSelected?: boolean
-}>()
-
-const { d } = useI18n()
-
-const colorPaletteStore = useColorPaletteStore()
-const isLightTheme = computed(
-  () => colorPaletteStore.completedActivePalette.light_theme
-)
-
-const isInstalling = ref(false)
-provide(IsInstallingKey, isInstalling)
-
-const { isPackInstalled, isPackEnabled } = useComfyManagerStore()
-
-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
-)
-const publisherName = computed(() => {
-  if (!nodePack) return null
-
-  const { publisher, author } = nodePack
-  return publisher?.name ?? publisher?.id ?? author
-})
-
-const formattedLatestVersionDate = computed(() => {
-  if (!nodePack.latest_version?.createdAt) return null
-
-  return d(new Date(nodePack.latest_version.createdAt), {
-    dateStyle: 'medium'
-  })
-})
-</script>
-
-<style scoped>
-.selected-card {
-  position: relative;
-}
-
-.selected-card::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 4px solid var(--p-primary-color);
-  border-radius: 0.5rem;
-  pointer-events: none;
-  z-index: 100;
-}
-</style>

src/components/dialog/content/manager/packCard/PackCardFooter.vue

@@ -1,35 +0,0 @@
-<template>
-  <div
-    class="min-h-12 flex justify-between items-center px-4 py-2 text-xs text-muted font-medium leading-3"
-  >
-    <div v-if="nodePack.downloads" class="flex items-center gap-1.5">
-      <i class="pi pi-download text-muted"></i>
-      <span>{{ formattedDownloads }}</span>
-    </div>
-    <PackInstallButton v-if="!isInstalled" :node-packs="[nodePack]" />
-    <PackEnableToggle v-else :node-pack="nodePack" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import PackEnableToggle from '@/components/dialog/content/manager/button/PackEnableToggle.vue'
-import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import type { components } from '@/types/comfyRegistryTypes'
-
-const { nodePack } = defineProps<{
-  nodePack: components['schemas']['Node']
-}>()
-
-const { isPackInstalled } = useComfyManagerStore()
-const isInstalled = computed(() => isPackInstalled(nodePack?.id))
-
-const { n } = useI18n()
-
-const formattedDownloads = computed(() =>
-  nodePack.downloads ? n(nodePack.downloads) : ''
-)
-</script>

src/components/dialog/content/manager/packIcon/PackIcon.vue

@@ -1,41 +0,0 @@
-<template>
-  <img
-    :src="isImageError ? DEFAULT_ICON : imgSrc"
-    :alt="nodePack.name + ' icon'"
-    class="object-contain rounded-lg max-h-72 max-w-72"
-    :style="{ width: cssWidth, height: cssHeight }"
-    @error="isImageError = true"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-import { components } from '@/types/comfyRegistryTypes'
-
-const DEFAULT_ICON = '/assets/images/fallback-gradient-avatar.svg'
-
-const {
-  nodePack,
-  width = '4.5rem',
-  height = '4.5rem'
-} = defineProps<{
-  nodePack: components['schemas']['Node']
-  width?: string
-  height?: string
-}>()
-
-const isImageError = ref(false)
-const shouldShowFallback = computed(
-  () => !nodePack.icon || nodePack.icon.trim() === '' || isImageError.value
-)
-const imgSrc = computed(() =>
-  shouldShowFallback.value ? DEFAULT_ICON : nodePack.icon
-)
-
-const convertToCssValue = (value: string | number) =>
-  typeof value === 'number' ? `${value}rem` : value
-
-const cssWidth = computed(() => convertToCssValue(width))
-const cssHeight = computed(() => convertToCssValue(height))
-</script>

src/components/dialog/content/manager/packIcon/PackIconStacked.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="relative w-24 h-24">
-    <div
-      v-for="(pack, index) in nodePacks.slice(0, maxVisible)"
-      :key="pack.id"
-      class="absolute"
-      :style="{
-        bottom: `${index * offset}px`,
-        right: `${index * offset}px`,
-        zIndex: maxVisible - index
-      }"
-    >
-      <div class="border rounded-lg p-0.5">
-        <PackIcon :node-pack="pack" width="4.5rem" height="4.5rem" />
-      </div>
-    </div>
-    <div
-      v-if="nodePacks.length > maxVisible"
-      class="absolute -top-2 -right-2 bg-primary rounded-full w-7 h-7 flex items-center justify-center text-xs font-bold shadow-md z-10"
-    >
-      +{{ nodePacks.length - maxVisible }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
-import { components } from '@/types/comfyRegistryTypes'
-
-const {
-  nodePacks,
-  maxVisible = 3,
-  offset = 8
-} = defineProps<{
-  nodePacks: components['schemas']['Node'][]
-  maxVisible?: number
-  offset?: number
-}>()
-</script>

src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue

@@ -1,119 +0,0 @@
-<template>
-  <div class="relative w-full p-6">
-    <div class="h-12 flex items-center gap-1 justify-between">
-      <div class="flex items-center w-5/12">
-        <AutoComplete
-          v-model.lazy="searchQuery"
-          :suggestions="suggestions || []"
-          :placeholder="$t('manager.searchPlaceholder')"
-          :complete-on-focus="false"
-          :delay="8"
-          option-label="query"
-          class="w-full"
-          :pt="{
-            pcInputText: {
-              root: {
-                autofocus: true,
-                class: 'w-full rounded-2xl'
-              }
-            },
-            loader: {
-              style: 'display: none'
-            }
-          }"
-          :show-empty-message="false"
-          @complete="stubTrue"
-          @option-select="onOptionSelect"
-        />
-      </div>
-      <PackInstallButton
-        v-if="isMissingTab && missingNodePacks.length > 0"
-        variant="black"
-        :disabled="isLoading || !!error"
-        :node-packs="missingNodePacks"
-        :label="$t('manager.installAllMissingNodes')"
-      />
-    </div>
-    <div class="flex mt-3 text-sm">
-      <div class="flex gap-6 ml-1">
-        <SearchFilterDropdown
-          v-model:modelValue="searchMode"
-          :options="filterOptions"
-          :label="$t('g.filter')"
-        />
-        <SearchFilterDropdown
-          v-model:modelValue="sortField"
-          :options="availableSortOptions"
-          :label="$t('g.sort')"
-        />
-      </div>
-      <div class="flex items-center gap-4 ml-6">
-        <small v-if="hasResults" class="text-color-secondary">
-          {{ $t('g.resultsCount', { count: searchResults?.length || 0 }) }}
-        </small>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { stubTrue } from 'es-toolkit/compat'
-import AutoComplete, {
-  AutoCompleteOptionSelectEvent
-} from 'primevue/autocomplete'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
-import SearchFilterDropdown from '@/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue'
-import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
-import {
-  type SearchOption,
-  SortableAlgoliaField
-} from '@/types/comfyManagerTypes'
-import { components } from '@/types/comfyRegistryTypes'
-import type {
-  QuerySuggestion,
-  SearchMode,
-  SortableField
-} from '@/types/searchServiceTypes'
-
-const { searchResults, sortOptions } = defineProps<{
-  searchResults?: components['schemas']['Node'][]
-  suggestions?: QuerySuggestion[]
-  sortOptions?: SortableField[]
-  isMissingTab?: boolean
-}>()
-
-const searchQuery = defineModel<string>('searchQuery')
-const searchMode = defineModel<SearchMode>('searchMode', { default: 'packs' })
-const sortField = defineModel<string>('sortField', {
-  default: SortableAlgoliaField.Downloads
-})
-
-const { t } = useI18n()
-
-// Get missing node packs from workflow with loading and error states
-const { missingNodePacks, isLoading, error } = useMissingNodes()
-
-const hasResults = computed(
-  () => searchQuery.value?.trim() && searchResults?.length
-)
-
-const availableSortOptions = computed<SearchOption<string>[]>(() => {
-  if (!sortOptions) return []
-  return sortOptions.map((field) => ({
-    id: field.id,
-    label: field.label
-  }))
-})
-const filterOptions: SearchOption<SearchMode>[] = [
-  { id: 'packs', label: t('manager.filter.nodePack') },
-  { id: 'nodes', label: t('g.nodes') }
-]
-
-// When a dropdown query suggestion is selected, update the search query
-const onOptionSelect = (event: AutoCompleteOptionSelectEvent) => {
-  searchQuery.value = event.value.query
-}
-</script>

src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="flex items-center gap-1">
-    <span class="text-muted">{{ label }}:</span>
-    <Dropdown
-      :model-value="modelValue"
-      :options="options"
-      option-label="label"
-      option-value="id"
-      class="min-w-[6rem] border-none bg-transparent shadow-none"
-      :pt="{
-        input: { class: 'py-0 px-1 border-none' },
-        trigger: { class: 'hidden' },
-        panel: { class: 'shadow-md' },
-        item: { class: 'py-2 px-3 text-sm' }
-      }"
-      @update:model-value="$emit('update:modelValue', $event)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts" generic="T">
-import Dropdown from 'primevue/dropdown'
-
-import type { SearchOption } from '@/types/comfyManagerTypes'
-
-defineProps<{
-  options: SearchOption<T>[]
-  label: string
-  modelValue: T
-}>()
-
-defineEmits<{
-  'update:modelValue': [value: T]
-}>()
-</script>

src/components/dialog/content/manager/skeleton/GridSkeleton.vue

@@ -1,19 +0,0 @@
-<template>
-  <div :style="gridStyle">
-    <PackCardSkeleton v-for="n in skeletonCardCount" :key="n" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import PackCardSkeleton from '@/components/dialog/content/manager/skeleton/PackCardSkeleton.vue'
-
-const { skeletonCardCount = 12, gridStyle } = defineProps<{
-  skeletonCardCount?: number
-  gridStyle: {
-    display: string
-    gridTemplateColumns: string
-    padding: string
-    gap: string
-  }
-}>()
-</script>

src/components/dialog/content/manager/skeleton/PackCardGridSkeleton.test.ts

@@ -1,79 +0,0 @@
-import { VueWrapper, mount } from '@vue/test-utils'
-import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import { describe, expect, it } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import enMessages from '@/locales/en/main.json'
-
-import GridSkeleton from './GridSkeleton.vue'
-import PackCardSkeleton from './PackCardSkeleton.vue'
-
-describe('GridSkeleton', () => {
-  const mountComponent = ({
-    props = {}
-  }: Record<string, any> = {}): VueWrapper => {
-    const i18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      messages: { en: enMessages }
-    })
-
-    return mount(GridSkeleton, {
-      props: {
-        gridStyle: {
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(19rem, 1fr))',
-          padding: '0.5rem',
-          gap: '1.5rem'
-        },
-        ...props
-      },
-      global: {
-        plugins: [PrimeVue, createPinia(), i18n],
-        stubs: {
-          PackCardSkeleton: true
-        }
-      }
-    })
-  }
-
-  it('renders with default props', () => {
-    const wrapper = mountComponent()
-    expect(wrapper.exists()).toBe(true)
-  })
-
-  it('applies the provided grid style', () => {
-    const customGridStyle = {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(auto-fill, minmax(15rem, 1fr))',
-      padding: '1rem',
-      gap: '1rem'
-    }
-
-    const wrapper = mountComponent({
-      props: { gridStyle: customGridStyle }
-    })
-
-    const gridElement = wrapper.element
-    expect(gridElement.style.display).toBe('grid')
-    expect(gridElement.style.gridTemplateColumns).toBe(
-      'repeat(auto-fill, minmax(15rem, 1fr))'
-    )
-    expect(gridElement.style.padding).toBe('1rem')
-    expect(gridElement.style.gap).toBe('1rem')
-  })
-
-  it('renders the specified number of skeleton cards', async () => {
-    const cardCount = 5
-    const wrapper = mountComponent({
-      props: { skeletonCardCount: cardCount }
-    })
-
-    await nextTick()
-
-    const skeletonCards = wrapper.findAllComponents(PackCardSkeleton)
-    expect(skeletonCards.length).toBe(5)
-  })
-})

src/components/dialog/content/manager/skeleton/PackCardSkeleton.vue

@@ -1,54 +0,0 @@
-<template>
-  <div
-    class="rounded-lg border shadow-sm h-full overflow-hidden flex flex-col"
-    data-virtual-grid-item
-  >
-    <!-- Card header - flush with top, approximately 15% of height -->
-    <div class="w-full px-4 py-3 flex justify-between items-center border-b">
-      <div class="flex items-center">
-        <div class="w-6 h-6 flex items-center justify-center">
-          <Skeleton shape="circle" width="1.5rem" height="1.5rem" />
-        </div>
-        <Skeleton width="5rem" height="1rem" class="ml-2" />
-      </div>
-      <Skeleton width="4rem" height="1.75rem" border-radius="0.75rem" />
-    </div>
-
-    <!-- Card content with icon on left and text on right -->
-    <div class="flex-1 p-4 flex">
-      <!-- Left icon - 64x64 -->
-      <div class="flex-shrink-0 mr-4">
-        <Skeleton width="4rem" height="4rem" border-radius="0.5rem" />
-      </div>
-
-      <!-- Right content -->
-      <div class="flex-1 flex flex-col overflow-hidden">
-        <!-- Title -->
-        <Skeleton width="80%" height="1rem" class="mb-2" />
-
-        <!-- Description -->
-        <div class="mb-3">
-          <Skeleton width="100%" height="0.75rem" class="mb-1" />
-          <Skeleton width="95%" height="0.75rem" class="mb-1" />
-          <Skeleton width="90%" height="0.75rem" />
-        </div>
-
-        <!-- Tags/Badges -->
-        <div class="flex gap-2">
-          <Skeleton width="4rem" height="1.5rem" border-radius="0.75rem" />
-          <Skeleton width="5rem" height="1.5rem" border-radius="0.75rem" />
-        </div>
-      </div>
-    </div>
-
-    <!-- Card footer - similar to header -->
-    <div class="w-full px-5 py-4 flex justify-between items-center border-t">
-      <Skeleton width="4rem" height="0.8rem" />
-      <Skeleton width="6rem" height="0.8rem" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Skeleton from 'primevue/skeleton'
-</script>

src/components/dialog/content/setting/AboutPanel.vue

@@ -34,7 +34,6 @@
 <script setup lang="ts">
 import Divider from 'primevue/divider'
 import Tag from 'primevue/tag'
-import { onMounted } from 'vue'
 
 import SystemStatsPanel from '@/components/common/SystemStatsPanel.vue'
 import { useAboutPanelStore } from '@/stores/aboutPanelStore'
@@ -44,10 +43,4 @@ import PanelTemplate from './PanelTemplate.vue'
 
 const systemStatsStore = useSystemStatsStore()
 const aboutPanelStore = useAboutPanelStore()
-
-onMounted(async () => {
-  if (!systemStatsStore.systemStats) {
-    await systemStatsStore.fetchSystemStats()
-  }
-})
 </script>

src/components/dialog/content/setting/ColorPaletteMessage.vue

@@ -1,61 +0,0 @@
-<template>
-  <Message severity="info" icon="pi pi-palette" pt:text="w-full">
-    <div class="flex items-center justify-between">
-      <div>
-        {{ $t('settingsCategories.ColorPalette') }}
-      </div>
-      <div class="actions">
-        <Select
-          v-model="activePaletteId"
-          class="w-44"
-          :options="palettes"
-          option-label="name"
-          option-value="id"
-        />
-        <Button
-          icon="pi pi-file-export"
-          text
-          :title="$t('g.export')"
-          @click="colorPaletteService.exportColorPalette(activePaletteId)"
-        />
-        <Button
-          icon="pi pi-file-import"
-          text
-          :title="$t('g.import')"
-          @click="importCustomPalette"
-        />
-        <Button
-          icon="pi pi-trash"
-          severity="danger"
-          text
-          :title="$t('g.delete')"
-          :disabled="!colorPaletteStore.isCustomPalette(activePaletteId)"
-          @click="colorPaletteService.deleteCustomColorPalette(activePaletteId)"
-        />
-      </div>
-    </div>
-  </Message>
-</template>
-
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import Button from 'primevue/button'
-import Message from 'primevue/message'
-import Select from 'primevue/select'
-
-import { useColorPaletteService } from '@/services/colorPaletteService'
-import { useSettingStore } from '@/stores/settingStore'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-
-const settingStore = useSettingStore()
-const colorPaletteStore = useColorPaletteStore()
-const colorPaletteService = useColorPaletteService()
-const { palettes, activePaletteId } = storeToRefs(colorPaletteStore)
-
-const importCustomPalette = async () => {
-  const palette = await colorPaletteService.importColorPalette()
-  if (palette) {
-    await settingStore.set('Comfy.ColorPalette', palette.id)
-  }
-}
-</script>

src/components/dialog/content/setting/CreditsPanel.vue

@@ -54,7 +54,7 @@
       </div>
 
       <template v-if="creditHistory.length > 0">
-        <div class="flex-grow">
+        <div class="grow">
           <DataTable :value="creditHistory" :show-headers="false">
             <Column field="title" :header="$t('g.name')">
               <template #body="{ data }">
@@ -112,12 +112,12 @@ import Divider from 'primevue/divider'
 import Skeleton from 'primevue/skeleton'
 import TabPanel from 'primevue/tabpanel'
 import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import UserCredit from '@/components/common/UserCredit.vue'
 import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useDialogService } from '@/services/dialogService'
+import { useCommandStore } from '@/stores/commandStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { formatMetronomeCurrency } from '@/utils/formatUtil'
 
@@ -128,10 +128,10 @@ interface CreditHistoryItemData {
   isPositive: boolean
 }
 
-const { t } = useI18n()
 const dialogService = useDialogService()
 const authStore = useFirebaseAuthStore()
 const authActions = useFirebaseAuthActions()
+const commandStore = useCommandStore()
 const loading = computed(() => authStore.loading)
 const balanceLoading = computed(() => authStore.isFetchingBalance)
 
@@ -160,15 +160,8 @@ const handleCreditsHistoryClick = async () => {
   await authActions.accessBillingPortal()
 }
 
-const handleMessageSupport = () => {
-  dialogService.showIssueReportDialog({
-    title: t('issueReport.contactSupportTitle'),
-    subtitle: t('issueReport.contactSupportDescription'),
-    panelProps: {
-      errorType: 'BillingSupport',
-      defaultFields: ['Workflow', 'Logs', 'SystemStats', 'Settings']
-    }
-  })
+const handleMessageSupport = async () => {
+  await commandStore.execute('Comfy.ContactSupport')
 }
 
 const handleFaqClick = () => {

src/components/dialog/content/setting/ExtensionPanel.vue

@@ -1,239 +0,0 @@
-<template>
-  <PanelTemplate value="Extension" class="extension-panel">
-    <template #header>
-      <SearchBox
-        v-model="filters['global'].value"
-        :placeholder="$t('g.searchExtensions') + '...'"
-      />
-      <Message
-        v-if="hasChanges"
-        severity="info"
-        pt:text="w-full"
-        class="max-h-96 overflow-y-auto"
-      >
-        <ul>
-          <li v-for="ext in changedExtensions" :key="ext.name">
-            <span>
-              {{ extensionStore.isExtensionEnabled(ext.name) ? '[-]' : '[+]' }}
-            </span>
-            {{ ext.name }}
-          </li>
-        </ul>
-        <div class="flex justify-end">
-          <Button
-            :label="$t('g.reloadToApplyChanges')"
-            outlined
-            severity="danger"
-            @click="applyChanges"
-          />
-        </div>
-      </Message>
-    </template>
-    <div class="mb-3 flex gap-2">
-      <SelectButton v-model="filterType" :options="filterTypes" />
-    </div>
-    <DataTable
-      v-model:selection="selectedExtensions"
-      :value="filteredExtensions"
-      striped-rows
-      size="small"
-      :filters="filters"
-      selection-mode="multiple"
-      data-key="name"
-    >
-      <Column selection-mode="multiple" :frozen="true" style="width: 3rem" />
-      <Column :header="$t('g.extensionName')" sortable field="name">
-        <template #body="slotProps">
-          {{ slotProps.data.name }}
-          <Tag
-            v-if="extensionStore.isCoreExtension(slotProps.data.name)"
-            value="Core"
-          />
-          <Tag v-else value="Custom" severity="info" />
-        </template>
-      </Column>
-      <Column
-        :pt="{
-          headerCell: 'flex items-center justify-end',
-          bodyCell: 'flex items-center justify-end'
-        }"
-      >
-        <template #header>
-          <Button
-            icon="pi pi-ellipsis-h"
-            text
-            severity="secondary"
-            @click="menu?.show($event)"
-          />
-          <ContextMenu ref="menu" :model="contextMenuItems" />
-        </template>
-        <template #body="slotProps">
-          <ToggleSwitch
-            v-model="editingEnabledExtensions[slotProps.data.name]"
-            :disabled="extensionStore.isExtensionReadOnly(slotProps.data.name)"
-            @change="updateExtensionStatus"
-          />
-        </template>
-      </Column>
-    </DataTable>
-  </PanelTemplate>
-</template>
-
-<script setup lang="ts">
-import { FilterMatchMode } from '@primevue/core/api'
-import Button from 'primevue/button'
-import Column from 'primevue/column'
-import ContextMenu from 'primevue/contextmenu'
-import DataTable from 'primevue/datatable'
-import Message from 'primevue/message'
-import SelectButton from 'primevue/selectbutton'
-import Tag from 'primevue/tag'
-import ToggleSwitch from 'primevue/toggleswitch'
-import { computed, onMounted, ref } from 'vue'
-
-import SearchBox from '@/components/common/SearchBox.vue'
-import { useExtensionStore } from '@/stores/extensionStore'
-import { useSettingStore } from '@/stores/settingStore'
-
-import PanelTemplate from './PanelTemplate.vue'
-
-const filterTypes = ['All', 'Core', 'Custom']
-const filterType = ref('All')
-const selectedExtensions = ref<Array<any>>([])
-
-const filters = ref({
-  global: { value: '', matchMode: FilterMatchMode.CONTAINS }
-})
-
-const extensionStore = useExtensionStore()
-const settingStore = useSettingStore()
-
-const editingEnabledExtensions = ref<Record<string, boolean>>({})
-
-const filteredExtensions = computed(() => {
-  const extensions = extensionStore.extensions
-  switch (filterType.value) {
-    case 'Core':
-      return extensions.filter((ext) =>
-        extensionStore.isCoreExtension(ext.name)
-      )
-    case 'Custom':
-      return extensions.filter(
-        (ext) => !extensionStore.isCoreExtension(ext.name)
-      )
-    default:
-      return extensions
-  }
-})
-
-onMounted(() => {
-  extensionStore.extensions.forEach((ext) => {
-    editingEnabledExtensions.value[ext.name] =
-      extensionStore.isExtensionEnabled(ext.name)
-  })
-})
-
-const changedExtensions = computed(() => {
-  return extensionStore.extensions.filter(
-    (ext) =>
-      editingEnabledExtensions.value[ext.name] !==
-      extensionStore.isExtensionEnabled(ext.name)
-  )
-})
-
-const hasChanges = computed(() => {
-  return changedExtensions.value.length > 0
-})
-
-const updateExtensionStatus = async () => {
-  const editingDisabledExtensionNames = Object.entries(
-    editingEnabledExtensions.value
-  )
-    .filter(([_, enabled]) => !enabled)
-    .map(([name]) => name)
-
-  await settingStore.set('Comfy.Extension.Disabled', [
-    ...extensionStore.inactiveDisabledExtensionNames,
-    ...editingDisabledExtensionNames
-  ])
-}
-
-const enableAllExtensions = async () => {
-  extensionStore.extensions.forEach((ext) => {
-    if (extensionStore.isExtensionReadOnly(ext.name)) return
-
-    editingEnabledExtensions.value[ext.name] = true
-  })
-  await updateExtensionStatus()
-}
-
-const disableAllExtensions = async () => {
-  extensionStore.extensions.forEach((ext) => {
-    if (extensionStore.isExtensionReadOnly(ext.name)) return
-
-    editingEnabledExtensions.value[ext.name] = false
-  })
-  await updateExtensionStatus()
-}
-
-const disableThirdPartyExtensions = async () => {
-  extensionStore.extensions.forEach((ext) => {
-    if (extensionStore.isCoreExtension(ext.name)) return
-
-    editingEnabledExtensions.value[ext.name] = false
-  })
-  await updateExtensionStatus()
-}
-
-const applyChanges = () => {
-  // Refresh the page to apply changes
-  window.location.reload()
-}
-
-const menu = ref<InstanceType<typeof ContextMenu>>()
-const contextMenuItems = [
-  {
-    label: 'Enable Selected',
-    icon: 'pi pi-check',
-    command: async () => {
-      selectedExtensions.value.forEach((ext) => {
-        if (!extensionStore.isExtensionReadOnly(ext.name)) {
-          editingEnabledExtensions.value[ext.name] = true
-        }
-      })
-      await updateExtensionStatus()
-    }
-  },
-  {
-    label: 'Disable Selected',
-    icon: 'pi pi-times',
-    command: async () => {
-      selectedExtensions.value.forEach((ext) => {
-        if (!extensionStore.isExtensionReadOnly(ext.name)) {
-          editingEnabledExtensions.value[ext.name] = false
-        }
-      })
-      await updateExtensionStatus()
-    }
-  },
-  {
-    separator: true
-  },
-  {
-    label: 'Enable All',
-    icon: 'pi pi-check',
-    command: enableAllExtensions
-  },
-  {
-    label: 'Disable All',
-    icon: 'pi pi-times',
-    command: disableAllExtensions
-  },
-  {
-    label: 'Disable 3rd Party',
-    icon: 'pi pi-times',
-    command: disableThirdPartyExtensions,
-    disabled: !extensionStore.hasThirdPartyExtensions
-  }
-]
-</script>

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -295,6 +295,8 @@ async function resetAllKeybindings() {
 </script>
 
 <style scoped>
+@reference '../../../../assets/css/style.css';
+
 :deep(.p-datatable-tbody) > tr > td {
   @apply p-1;
   min-height: 2rem;

src/components/dialog/content/setting/PanelTemplate.vue

@@ -2,7 +2,7 @@
   <TabPanel :value="props.value" class="h-full w-full" :class="props.class">
     <div class="flex flex-col h-full w-full gap-2">
       <slot name="header" />
-      <ScrollPanel class="flex-grow h-0 pr-2">
+      <ScrollPanel class="grow h-0 pr-2">
         <slot />
       </ScrollPanel>
       <slot name="footer" />

src/components/dialog/content/setting/ServerConfigPanel.vue

@@ -1,127 +0,0 @@
-<template>
-  <PanelTemplate value="Server-Config" class="server-config-panel">
-    <template #header>
-      <div class="flex flex-col gap-2">
-        <Message
-          v-if="modifiedConfigs.length > 0"
-          severity="info"
-          pt:text="w-full"
-        >
-          <p>
-            {{ $t('serverConfig.modifiedConfigs') }}
-          </p>
-          <ul>
-            <li v-for="config in modifiedConfigs" :key="config.id">
-              {{ config.name }}: {{ config.initialValue }} → {{ config.value }}
-            </li>
-          </ul>
-          <div class="flex justify-end gap-2">
-            <Button
-              :label="$t('serverConfig.revertChanges')"
-              outlined
-              @click="revertChanges"
-            />
-            <Button
-              :label="$t('serverConfig.restart')"
-              outlined
-              severity="danger"
-              @click="restartApp"
-            />
-          </div>
-        </Message>
-        <Message v-if="commandLineArgs" severity="secondary" pt:text="w-full">
-          <template #icon>
-            <i-lucide:terminal class="text-xl font-bold" />
-          </template>
-          <div class="flex items-center justify-between">
-            <p>{{ commandLineArgs }}</p>
-            <Button
-              icon="pi pi-clipboard"
-              severity="secondary"
-              text
-              @click="copyCommandLineArgs"
-            />
-          </div>
-        </Message>
-      </div>
-    </template>
-    <div
-      v-for="([label, items], i) in Object.entries(serverConfigsByCategory)"
-      :key="label"
-    >
-      <Divider v-if="i > 0" />
-      <h3>{{ $t(`serverConfigCategories.${label}`, label) }}</h3>
-      <div v-for="item in items" :key="item.name" class="mb-4">
-        <FormItem
-          :id="item.id"
-          v-model:formValue="item.value"
-          :item="translateItem(item)"
-          :label-class="{
-            'text-highlight': item.initialValue !== item.value
-          }"
-        />
-      </div>
-    </div>
-  </PanelTemplate>
-</template>
-
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import Button from 'primevue/button'
-import Divider from 'primevue/divider'
-import Message from 'primevue/message'
-import { watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import FormItem from '@/components/common/FormItem.vue'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
-import type { ServerConfig } from '@/constants/serverConfig'
-import { useServerConfigStore } from '@/stores/serverConfigStore'
-import { useSettingStore } from '@/stores/settingStore'
-import type { FormItem as FormItemType } from '@/types/settingTypes'
-import { electronAPI } from '@/utils/envUtil'
-
-import PanelTemplate from './PanelTemplate.vue'
-
-const settingStore = useSettingStore()
-const serverConfigStore = useServerConfigStore()
-const {
-  serverConfigsByCategory,
-  serverConfigValues,
-  launchArgs,
-  commandLineArgs,
-  modifiedConfigs
-} = storeToRefs(serverConfigStore)
-
-const revertChanges = () => {
-  serverConfigStore.revertChanges()
-}
-
-const restartApp = async () => {
-  await electronAPI().restartApp()
-}
-
-watch(launchArgs, async (newVal) => {
-  await settingStore.set('Comfy.Server.LaunchArgs', newVal)
-})
-
-watch(serverConfigValues, async (newVal) => {
-  await settingStore.set('Comfy.Server.ServerConfigValues', newVal)
-})
-
-const { copyToClipboard } = useCopyToClipboard()
-const copyCommandLineArgs = async () => {
-  await copyToClipboard(commandLineArgs.value)
-}
-
-const { t } = useI18n()
-const translateItem = (item: ServerConfig<any>): FormItemType => {
-  return {
-    ...item,
-    name: t(`serverConfigItems.${item.id}.name`, item.name),
-    tooltip: item.tooltip
-      ? t(`serverConfigItems.${item.id}.tooltip`, item.tooltip)
-      : undefined
-  }
-}
-</script>

src/components/dialog/content/setting/SettingGroup.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="setting-group">
-    <Divider v-if="divider" />
-    <h3>
-      {{
-        $t(`settingsCategories.${normalizeI18nKey(group.label)}`, group.label)
-      }}
-    </h3>
-    <div
-      v-for="setting in group.settings.filter((s) => !s.deprecated)"
-      :key="setting.id"
-      class="setting-item mb-4"
-    >
-      <SettingItem :setting="setting" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Divider from 'primevue/divider'
-
-import SettingItem from '@/components/dialog/content/setting/SettingItem.vue'
-import { SettingParams } from '@/types/settingTypes'
-import { normalizeI18nKey } from '@/utils/formatUtil'
-
-defineProps<{
-  group: {
-    label: string
-    settings: SettingParams[]
-  }
-  divider?: boolean
-}>()
-</script>

src/components/dialog/content/setting/SettingItem.test.ts

@@ -6,7 +6,7 @@ import Tooltip from 'primevue/tooltip'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
-import SettingItem from './SettingItem.vue'
+import SettingItem from '@/platform/settings/components/SettingItem.vue'
 
 const i18n = createI18n({
   legacy: false,

src/components/dialog/content/setting/SettingItem.vue

@@ -1,81 +0,0 @@
-<template>
-  <FormItem
-    :id="setting.id"
-    :item="formItem"
-    :form-value="settingValue"
-    @update:form-value="updateSettingValue"
-  >
-    <template #name-prefix>
-      <Tag v-if="setting.id === 'Comfy.Locale'" class="pi pi-language" />
-      <Tag
-        v-if="setting.experimental"
-        v-tooltip="{
-          value: $t('g.experimental'),
-          showDelay: 600
-        }"
-      >
-        <template #icon>
-          <i-material-symbols:experiment-outline />
-        </template>
-      </Tag>
-    </template>
-  </FormItem>
-</template>
-
-<script setup lang="ts">
-import Tag from 'primevue/tag'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import FormItem from '@/components/common/FormItem.vue'
-import { st } from '@/i18n'
-import { useSettingStore } from '@/stores/settingStore'
-import type { SettingOption, SettingParams } from '@/types/settingTypes'
-import { normalizeI18nKey } from '@/utils/formatUtil'
-
-const props = defineProps<{
-  setting: SettingParams
-}>()
-
-const { t } = useI18n()
-function translateOptions(options: (SettingOption | string)[]) {
-  if (typeof options === 'function') {
-    // @ts-expect-error: Audit and deprecate usage of legacy options type:
-    // (value) => [string | {text: string, value: string}]
-    return translateOptions(options(props.setting.value ?? ''))
-  }
-
-  return options.map((option) => {
-    const optionLabel = typeof option === 'string' ? option : option.text
-    const optionValue = typeof option === 'string' ? option : option.value
-
-    return {
-      text: t(
-        `settings.${normalizeI18nKey(props.setting.id)}.options.${normalizeI18nKey(optionLabel)}`,
-        optionLabel
-      ),
-      value: optionValue
-    }
-  })
-}
-
-const formItem = computed(() => {
-  const normalizedId = normalizeI18nKey(props.setting.id)
-  return {
-    ...props.setting,
-    name: t(`settings.${normalizedId}.name`, props.setting.name),
-    tooltip: props.setting.tooltip
-      ? st(`settings.${normalizedId}.tooltip`, props.setting.tooltip)
-      : undefined,
-    options: props.setting.options
-      ? translateOptions(props.setting.options)
-      : undefined
-  }
-})
-
-const settingStore = useSettingStore()
-const settingValue = computed(() => settingStore.get(props.setting.id))
-const updateSettingValue = async (value: any) => {
-  await settingStore.set(props.setting.id, value)
-}
-</script>

src/components/dialog/content/setting/SettingsPanel.vue

@@ -1,27 +0,0 @@
-<template>
-  <div v-if="props.settingGroups.length > 0">
-    <SettingGroup
-      v-for="(group, i) in props.settingGroups"
-      :key="group.label"
-      :divider="i !== 0"
-      :group="group"
-    />
-  </div>
-  <NoResultsPlaceholder
-    v-else
-    icon="pi pi-search"
-    :title="$t('g.noResultsFound')"
-    :message="$t('g.searchFailedMessage')"
-  />
-</template>
-
-<script setup lang="ts">
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import { ISettingGroup } from '@/types/settingTypes'
-
-import SettingGroup from './SettingGroup.vue'
-
-const props = defineProps<{
-  settingGroups: ISettingGroup[]
-}>()
-</script>

src/components/dialog/content/setting/UsageLogsTable.vue

@@ -96,8 +96,8 @@ import Message from 'primevue/message'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, ref } from 'vue'
 
+import type { AuditLog } from '@/services/customerEventsService'
 import {
-  AuditLog,
   EventType,
   useCustomerEventsService
 } from '@/services/customerEventsService'

src/components/dialog/content/setting/UserPanel.vue

@@ -57,14 +57,23 @@
           class="w-8 h-8 mt-4"
           style="--pc-spinner-color: #000"
         />
-        <Button
-          v-else
-          class="mt-4 w-32"
-          severity="secondary"
-          :label="$t('auth.signOut.signOut')"
-          icon="pi pi-sign-out"
-          @click="handleSignOut"
-        />
+        <div v-else class="mt-4 flex flex-col gap-2">
+          <Button
+            class="w-32"
+            severity="secondary"
+            :label="$t('auth.signOut.signOut')"
+            icon="pi pi-sign-out"
+            @click="handleSignOut"
+          />
+          <Button
+            v-if="!isApiKeyLogin"
+            class="w-32"
+            severity="danger"
+            :label="$t('auth.deleteAccount.deleteAccount')"
+            icon="pi pi-trash"
+            @click="handleDeleteAccount"
+          />
+        </div>
       </div>
 
       <!-- Login Section -->
@@ -100,6 +109,7 @@ const dialogService = useDialogService()
 const {
   loading,
   isLoggedIn,
+  isApiKeyLogin,
   isEmailProvider,
   userDisplayName,
   userEmail,
@@ -107,6 +117,7 @@ const {
   providerName,
   providerIcon,
   handleSignOut,
-  handleSignIn
+  handleSignIn,
+  handleDeleteAccount
 } = useCurrentUser()
 </script>

src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue

@@ -13,7 +13,7 @@
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
 
-import { KeyComboImpl } from '@/stores/keybindingStore'
+import type { KeyComboImpl } from '@/stores/keybindingStore'
 
 const { keyCombo, isModified = false } = defineProps<{
   keyCombo: KeyComboImpl

src/components/dialog/content/signin/ApiKeyForm.vue

@@ -79,7 +79,8 @@
 </template>
 
 <script setup lang="ts">
-import { Form, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'

src/components/dialog/content/signin/SignInForm.test.ts

@@ -1,5 +1,6 @@
 import { Form } from '@primevue/forms'
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
@@ -10,7 +11,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import SignInForm from './SignInForm.vue'
 

src/components/dialog/content/signin/SignInForm.vue

@@ -76,7 +76,8 @@
 </template>
 
 <script setup lang="ts">
-import { Form, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
@@ -133,6 +134,8 @@ const handleForgotPassword = async (
 </script>
 
 <style scoped>
+@reference '../../../../assets/css/style.css';
+
 .text-link-disabled {
   @apply opacity-50 cursor-not-allowed;
 }

src/components/dialog/content/signin/SignUpForm.vue

@@ -64,7 +64,8 @@
 </template>
 
 <script setup lang="ts">
-import { Form, FormField, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form, FormField } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'