Improve Import Failed Error Messages (#7871)

src/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="flex w-[490px] flex-col border-t-1 border-border-default">
+    <div class="flex h-full w-full flex-col gap-4 p-4">
+      <!-- Error Details -->
+      <div v-if="importFailedPackages.length > 0" class="flex flex-col gap-3">
+        <div
+          v-for="pkg in importFailedPackages"
+          :key="pkg.packageId"
+          class="flex flex-col gap-2 max-h-60 overflow-x-hidden overflow-y-auto scrollbar-custom"
+          role="region"
+          :aria-label="`Error traceback for ${pkg.packageId}`"
+          tabindex="0"
+        >
+          <!-- Error Message -->
+          <div
+            v-if="pkg.traceback || pkg.errorMessage"
+            class="text-xs p-4 rounded-md bg-secondary-background font-mono"
+          >
+            {{ pkg.traceback || pkg.errorMessage }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+
+const { conflictedPackages } = defineProps<{
+  conflictedPackages: ConflictDetectionResult[]
+}>()
+
+interface ImportFailedPackage {
+  packageId: string
+  packageName: string
+  errorMessage: string
+  traceback: string
+}
+
+const importFailedPackages = computed((): ImportFailedPackage[] => {
+  return conflictedPackages
+    .filter((pkg) =>
+      pkg.conflicts.some((conflict) => conflict.type === 'import_failed')
+    )
+    .map((pkg) => {
+      const importFailedConflict = pkg.conflicts.find(
+        (conflict) => conflict.type === 'import_failed'
+      )
+      if (!importFailedConflict) {
+        return {
+          packageId: pkg.package_id,
+          packageName: pkg.package_name,
+          errorMessage: 'Unknown import error',
+          traceback: ''
+        }
+      }
+
+      return {
+        packageId: pkg.package_id,
+        packageName: pkg.package_name,
+        errorMessage:
+          importFailedConflict.current_value || 'Unknown import error',
+        traceback: importFailedConflict.required_value || ''
+      }
+    })
+})
+</script>

src/workbench/extensions/manager/components/manager/ImportFailedNodeFooter.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="flex w-full items-center justify-between px-3 pb-4">
+    <div class="flex w-full items-start justify-end gap-2 pr-1">
+      <Button variant="secondary" @click="handleCopyError">
+        {{ $t('importFailed.copyError') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+
+const { conflictedPackages = [] } = defineProps<{
+  conflictedPackages?: ConflictDetectionResult[]
+}>()
+
+const { copyToClipboard } = useCopyToClipboard()
+
+const formatErrorText = computed(() => {
+  const errorParts: string[] = []
+
+  conflictedPackages.forEach((pkg) => {
+    const importFailedConflict = pkg.conflicts.find(
+      (conflict) => conflict.type === 'import_failed'
+    )
+
+    if (importFailedConflict?.required_value) {
+      errorParts.push(importFailedConflict.required_value)
+    }
+  })
+
+  return errorParts.join('\n\n')
+})
+
+const handleCopyError = () => {
+  copyToClipboard(formatErrorText.value)
+}
+</script>

src/workbench/extensions/manager/components/manager/ImportFailedNodeHeader.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex w-full items-center justify-between p-4">
+    <div class="flex items-center gap-2">
+      <i class="icon-[lucide--triangle-alert] text-gold-600"></i>
+      <p class="m-0 text-sm">
+        {{ $t('importFailed.title') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.test.ts

@@ -245,7 +245,7 @@ describe('NodeConflictDialogContent', () => {
       await conflictsHeader.trigger('click')
 
       // Should be expanded now
-      const conflictItems = wrapper.findAll('.conflict-list-item')
+      const conflictItems = wrapper.findAll('[aria-label*="Conflict:"]')
       expect(conflictItems.length).toBeGreaterThan(0)
     })
 
@@ -324,7 +324,7 @@ describe('NodeConflictDialogContent', () => {
       await conflictsHeader.trigger('click')
 
       // Should display conflict messages (excluding import_failed)
-      const conflictItems = wrapper.findAll('.conflict-list-item')
+      const conflictItems = wrapper.findAll('[aria-label*="Conflict:"]')
       expect(conflictItems).toHaveLength(3) // 2 from Package1 + 1 from Package2
     })
 
@@ -338,7 +338,9 @@ describe('NodeConflictDialogContent', () => {
       await importFailedHeader.trigger('click')
 
       // Should display only import failed package
-      const importFailedItems = wrapper.findAll('.conflict-list-item')
+      const importFailedItems = wrapper.findAll(
+        '[aria-label*="Import failed package:"]'
+      )
       expect(importFailedItems).toHaveLength(1)
       expect(importFailedItems[0].text()).toContain('Test Package 3')
     })

src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue

@@ -50,7 +50,8 @@
           <div
             v-for="(packageName, i) in importFailedConflicts"
             :key="i"
-            class="conflict-list-item flex h-6 shrink-0 items-center justify-between px-4"
+            :aria-label="`Import failed package: ${packageName}`"
+            class="flex min-h-6 shrink-0 hover:bg-node-component-surface-hovered items-center justify-between px-4 py-1"
           >
             <span class="text-xs text-muted">
               {{ packageName }}
@@ -98,7 +99,8 @@
           <div
             v-for="(conflict, i) in allConflictDetails"
             :key="i"
-            class="conflict-list-item flex h-6 shrink-0 items-center justify-between px-4"
+            :aria-label="`Conflict: ${getConflictMessage(conflict, t)}`"
+            class="flex min-h-6 shrink-0 hover:bg-node-component-surface-hovered items-center justify-between px-4 py-1"
           >
             <span class="text-xs text-muted">{{
               getConflictMessage(conflict, t)
@@ -146,7 +148,7 @@
           <div
             v-for="conflictResult in conflictData"
             :key="conflictResult.package_id"
-            class="conflict-list-item flex h-6 shrink-0 items-center justify-between px-4"
+            class="flex min-h-6 shrink-0 hover:bg-node-component-surface-hovered items-center justify-between px-4 py-1"
           >
             <span class="text-xs text-muted">
               {{ conflictResult.package_name }}
@@ -236,8 +238,3 @@ const toggleExtensionsPanel = () => {
   importFailedExpanded.value = false
 }
 </script>
-<style scoped>
-.conflict-list-item:hover {
-  background-color: rgb(0 122 255 / 0.2);
-}
-</style>

src/workbench/extensions/manager/components/manager/NodeConflictHeader.vue

@@ -2,7 +2,7 @@
   <div class="flex h-12 w-full items-center justify-between pl-6">
     <div class="flex items-center gap-2">
       <!-- Warning Icon -->
-      <i class="pi pi-exclamation-triangle text-lg"></i>
+      <i class="icon-[lucide--triangle-alert] text-gold-600"></i>
       <!-- Title -->
       <p class="text-base font-bold">
         {{ $t('manager.conflicts.title') }}

src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue

@@ -41,6 +41,8 @@ import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comf
 import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
 import type { components as ManagerComponents } from '@/workbench/extensions/manager/types/generatedManagerTypes'
 
+import { useImportFailedDetection } from '../../../composables/useImportFailedDetection'
+
 const TOGGLE_DEBOUNCE_MS = 256
 
 const { nodePack } = defineProps<{
@@ -53,6 +55,7 @@ const { isPackEnabled, enablePack, disablePack, installedPacks } =
 const { getConflictsForPackageByID } = useConflictDetectionStore()
 const { showNodeConflictDialog } = useDialogService()
 const { acknowledgmentState, markConflictsAsSeen } = useConflictAcknowledgment()
+const { showImportFailedDialog } = useImportFailedDetection(nodePack.id || '')
 
 const isLoading = ref(false)
 
@@ -81,23 +84,36 @@ const canToggleDirectly = computed(() => {
 const showConflictModal = (skipModalDismissed: boolean) => {
   let modal_dismissed = acknowledgmentState.value.modal_dismissed
   if (skipModalDismissed) modal_dismissed = false
+
   if (packageConflict.value && !modal_dismissed) {
-    showNodeConflictDialog({
-      conflictedPackages: [packageConflict.value],
-      buttonText: !isEnabled.value
-        ? t('manager.conflicts.enableAnyway')
-        : t('manager.conflicts.understood'),
-      onButtonClick: async () => {
-        if (!isEnabled.value) {
-          await handleEnable()
+    // Check if there's an import failed conflict first
+    const hasImportFailed = packageConflict.value.conflicts.some(
+      (conflict) => conflict.type === 'import_failed'
+    )
+    if (hasImportFailed) {
+      // Show import failed dialog instead of general conflict dialog
+      showImportFailedDialog(() => {
+        markConflictsAsSeen()
+      })
+    } else {
+      // Show general conflict dialog for other types of conflicts
+      showNodeConflictDialog({
+        conflictedPackages: [packageConflict.value],
+        buttonText: !isEnabled.value
+          ? t('manager.conflicts.enableAnyway')
+          : t('manager.conflicts.understood'),
+        onButtonClick: async () => {
+          if (!isEnabled.value) {
+            await handleEnable()
+          }
+        },
+        dialogComponentProps: {
+          onClose: () => {
+            markConflictsAsSeen()
+          }
         }
-      },
-      dialogComponentProps: {
-        onClose: () => {
-          markConflictsAsSeen()
-        }
-      }
-    })
+      })
+    }
   }
 }
 

src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue

@@ -1,43 +1,37 @@
 <template>
   <div class="flex flex-col gap-3">
-    <button
-      v-if="importFailedInfo"
-      class="inline-flex cursor-pointer items-center justify-end gap-1 border-none bg-transparent outline-none"
-      @click="showImportFailedDialog"
-    >
-      <i class="pi pi-code text-base"></i>
-      <span class="text-sm text-base-foreground">{{
-        t('serverStart.openLogs')
-      }}</span>
-    </button>
     <div
       v-for="(conflict, index) in conflictResult?.conflicts || []"
       :key="index"
-      class="rounded-md bg-yellow-800/20 p-3"
+      class="rounded-md bg-secondary-background/60 px-2 py-1"
     >
-      <div class="flex items-center justify-between">
-        <div class="flex-1 text-sm break-words">
+      <!-- Import failed conflicts show detailed error message -->
+      <template v-if="conflict.type === 'import_failed'">
+        <div
+          v-if="conflict.required_value"
+          class="max-h-64 overflow-x-hidden scrollbar-custom overflow-y-auto rounded px-2"
+        >
+          <p class="text-xs text-muted-foreground break-all font-mono">
+            {{ conflict.required_value }}
+          </p>
+        </div>
+      </template>
+
+      <!-- Other conflict types use standard message -->
+      <template v-else>
+        <div class="text-sm break-words">
           {{ getConflictMessage(conflict, $t) }}
         </div>
-      </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-
-import { t } from '@/i18n'
-import type { components } from '@/types/comfyRegistryTypes'
-import { useImportFailedDetection } from '@/workbench/extensions/manager/composables/useImportFailedDetection'
 import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
 import { getConflictMessage } from '@/workbench/extensions/manager/utils/conflictMessageUtil'
 
-const { nodePack, conflictResult } = defineProps<{
-  nodePack: components['schemas']['Node']
+const { conflictResult } = defineProps<{
   conflictResult: ConflictDetectionResult | null | undefined
 }>()
-const packageId = computed(() => nodePack?.id || '')
-const { importFailedInfo, showImportFailedDialog } =
-  useImportFailedDetection(packageId)
 </script>