Feat/errors tab panel

src/components/TopMenuSection.vue

@@ -36,7 +36,14 @@
 
           <div
             ref="actionbarContainerRef"
-            class="actionbar-container relative pointer-events-auto flex gap-2 h-12 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
+            :class="
+              cn(
+                'actionbar-container relative pointer-events-auto flex gap-2 h-12 items-center rounded-lg border bg-comfy-menu-bg px-2 shadow-interface',
+                hasAnyError
+                  ? 'border-destructive-background-hover'
+                  : 'border-interface-stroke'
+              )
+            "
           >
             <ActionBarButtons />
             <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
@@ -168,6 +175,7 @@ import { isDesktop } from '@/platform/distribution/types'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+import { cn } from '@/utils/tailwindUtil'
 
 const settingStore = useSettingStore()
 const workspaceStore = useWorkspaceStore()
@@ -252,6 +260,8 @@ const shouldShowRedDot = computed((): boolean => {
   return shouldShowConflictRedDot.value
 })
 
+const { hasAnyError } = storeToRefs(executionStore)
+
 // Right side panel toggle
 const { isOpen: isRightSidePanelOpen } = storeToRefs(rightSidePanelStore)
 const rightSidePanelTooltipConfig = computed(() =>

src/components/rightSidePanel/RightSidePanel.vue

@@ -33,13 +33,16 @@ import {
   useFlatAndCategorizeSelectedItems
 } from './shared'
 import SubgraphEditor from './subgraph/SubgraphEditor.vue'
+import TabErrors from './errors/TabErrors.vue'
 
 const canvasStore = useCanvasStore()
 const executionStore = useExecutionStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
 
+const { hasAnyError } = storeToRefs(executionStore)
+
 const { findParentGroup } = useGraphHierarchy()
 
 const { selectedItems: directlySelectedItems } = storeToRefs(canvasStore)
@@ -102,14 +105,29 @@ const selectedNodeErrors = computed(() =>
 
 const tabs = computed<RightSidePanelTabList>(() => {
   const list: RightSidePanelTabList = []
-  if (selectedNodeErrors.value.length) {
+  if (
+    selectedNodeErrors.value.length &&
+    settingStore.get('Comfy.RightSidePanel.ShowErrorsTab')
+  ) {
     list.push({
       label: () => t('g.error'),
       value: 'error',
       icon: 'icon-[lucide--octagon-alert] bg-node-stroke-error ml-1'
     })
   }
 
+  if (
+    hasAnyError.value &&
+    !hasSelection.value &&
+    settingStore.get('Comfy.RightSidePanel.ShowErrorsTab')
+  ) {
+    list.push({
+      label: () => t('rightSidePanel.errors'),
+      value: 'errors',
+      icon: 'icon-[lucide--octagon-alert] bg-node-stroke-error ml-1'
+    })
+  }
+
   list.push({
     label: () =>
       flattedItems.value.length > 1
@@ -298,7 +316,8 @@ function handleProxyWidgetsUpdate(value: ProxyWidgetsProperty) {
     <!-- Panel Content -->
     <div class="scrollbar-thin flex-1 overflow-y-auto">
       <template v-if="!hasSelection">
-        <TabGlobalParameters v-if="activeTab === 'parameters'" />
+        <TabErrors v-if="activeTab === 'errors'" />
+        <TabGlobalParameters v-else-if="activeTab === 'parameters'" />
         <TabNodes v-else-if="activeTab === 'nodes'" />
         <TabGlobalSettings v-else-if="activeTab === 'settings'" />
       </template>

src/components/rightSidePanel/errors/ErrorNodeCard.stories.ts

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import ErrorNodeCard from './ErrorNodeCard.vue'
+import type { ErrorCardData } from './types'
+
+/**
+ * ErrorNodeCard displays a single error card inside the error tab.
+ * It shows the node header (ID badge, title, action buttons)
+ * and the list of error items (message, traceback, copy button).
+ */
+const meta: Meta<typeof ErrorNodeCard> = {
+  title: 'RightSidePanel/Errors/ErrorNodeCard',
+  component: ErrorNodeCard,
+  parameters: {
+    layout: 'centered'
+  },
+  argTypes: {
+    showNodeIdBadge: { control: 'boolean' }
+  },
+  decorators: [
+    (story) => ({
+      components: { story },
+      template:
+        '<div class="w-[330px] bg-base-surface border border-interface-stroke rounded-lg p-4"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const singleErrorCard: ErrorCardData = {
+  id: 'node-10',
+  title: 'CLIPTextEncode',
+  nodeId: '10',
+  nodeTitle: 'CLIP Text Encode (Prompt)',
+  isSubgraphNode: false,
+  errors: [
+    {
+      message: 'Required input "text" is missing.',
+      details: 'Input: text\nExpected: STRING'
+    }
+  ]
+}
+
+const multipleErrorsCard: ErrorCardData = {
+  id: 'node-24',
+  title: 'VAEDecode',
+  nodeId: '24',
+  nodeTitle: 'VAE Decode',
+  isSubgraphNode: false,
+  errors: [
+    {
+      message: 'Required input "samples" is missing.',
+      details: ''
+    },
+    {
+      message: 'Value "NaN" is not a valid number for "strength".',
+      details: 'Expected: FLOAT [0.0 .. 1.0]'
+    }
+  ]
+}
+
+const runtimeErrorCard: ErrorCardData = {
+  id: 'exec-45',
+  title: 'KSampler',
+  nodeId: '45',
+  nodeTitle: 'KSampler',
+  isSubgraphNode: false,
+  errors: [
+    {
+      message: 'OutOfMemoryError: CUDA out of memory. Tried to allocate 1.2GB.',
+      details: [
+        'Traceback (most recent call last):',
+        '  File "ksampler.py", line 142, in sample',
+        '    samples = model.apply(latent)',
+        'RuntimeError: CUDA out of memory.'
+      ].join('\n'),
+      isRuntimeError: true
+    }
+  ]
+}
+
+const subgraphErrorCard: ErrorCardData = {
+  id: 'node-3:15',
+  title: 'KSampler',
+  nodeId: '3:15',
+  nodeTitle: 'Nested KSampler',
+  isSubgraphNode: true,
+  errors: [
+    {
+      message: 'Latent input is required.',
+      details: ''
+    }
+  ]
+}
+
+const promptOnlyCard: ErrorCardData = {
+  id: '__prompt__',
+  title: 'Prompt has no outputs.',
+  errors: [
+    {
+      message:
+        'The workflow does not contain any output nodes (e.g. Save Image, Preview Image) to produce a result.'
+    }
+  ]
+}
+
+/** Single validation error with node ID badge visible */
+export const WithNodeIdBadge: Story = {
+  args: {
+    card: singleErrorCard,
+    showNodeIdBadge: true
+  }
+}
+
+/** Single validation error without node ID badge */
+export const WithoutNodeIdBadge: Story = {
+  args: {
+    card: singleErrorCard,
+    showNodeIdBadge: false
+  }
+}
+
+/** Subgraph node error — shows "Enter subgraph" button */
+export const WithEnterSubgraphButton: Story = {
+  args: {
+    card: subgraphErrorCard,
+    showNodeIdBadge: true
+  }
+}
+
+/** Regular node error — no "Enter subgraph" button */
+export const WithoutEnterSubgraphButton: Story = {
+  args: {
+    card: singleErrorCard,
+    showNodeIdBadge: true
+  }
+}
+
+/** Multiple validation errors on one node */
+export const MultipleErrors: Story = {
+  args: {
+    card: multipleErrorsCard,
+    showNodeIdBadge: true
+  }
+}
+
+/** Runtime execution error with full traceback */
+export const RuntimeError: Story = {
+  args: {
+    card: runtimeErrorCard,
+    showNodeIdBadge: true
+  }
+}
+
+/** Prompt-level error (no node header) */
+export const PromptError: Story = {
+  args: {
+    card: promptOnlyCard,
+    showNodeIdBadge: false
+  }
+}

src/components/rightSidePanel/errors/ErrorNodeCard.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="overflow-hidden">
+    <!-- Card Header (Node ID & Actions) -->
+    <div v-if="card.nodeId" class="flex flex-wrap items-center gap-2 py-2">
+      <span
+        v-if="showNodeIdBadge"
+        class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 text-[10px] font-mono text-muted-foreground font-bold"
+      >
+        #{{ card.nodeId }}
+      </span>
+      <span
+        v-if="card.nodeTitle"
+        class="flex-1 text-sm text-muted-foreground truncate font-medium"
+      >
+        {{ card.nodeTitle }}
+      </span>
+      <Button
+        v-if="card.isSubgraphNode"
+        variant="secondary"
+        size="sm"
+        class="rounded-lg text-sm shrink-0"
+        @click.stop="emit('enterSubgraph', card.nodeId ?? '')"
+      >
+        {{ t('rightSidePanel.enterSubgraph') }}
+      </Button>
+      <Button
+        variant="textonly"
+        size="icon-sm"
+        class="size-7 text-muted-foreground hover:text-base-foreground shrink-0"
+        @click.stop="emit('locateNode', card.nodeId ?? '')"
+      >
+        <i class="icon-[lucide--locate] size-3.5" />
+      </Button>
+    </div>
+
+    <!-- Multiple Errors within one Card -->
+    <div class="divide-y divide-interface-stroke/20 space-y-4">
+      <!-- Card Content -->
+      <div
+        v-for="(error, idx) in card.errors"
+        :key="idx"
+        class="flex flex-col gap-3"
+      >
+        <!-- Error Message -->
+        <p
+          v-if="error.message"
+          class="m-0 text-sm break-words whitespace-pre-wrap leading-relaxed px-0.5"
+        >
+          {{ error.message }}
+        </p>
+
+        <!-- Traceback / Details -->
+        <div
+          v-if="error.details"
+          :class="
+            cn(
+              'rounded-lg bg-secondary-background-hover p-2.5 overflow-y-auto border border-interface-stroke/30',
+              error.isRuntimeError ? 'max-h-[10lh]' : 'max-h-[6lh]'
+            )
+          "
+        >
+          <p
+            class="m-0 text-xs text-muted-foreground break-words whitespace-pre-wrap font-mono leading-relaxed"
+          >
+            {{ error.details }}
+          </p>
+        </div>
+
+        <Button
+          variant="secondary"
+          size="sm"
+          class="w-full justify-center gap-2 h-8 text-[11px]"
+          @click="handleCopyError(error)"
+        >
+          <i class="icon-[lucide--copy] size-3.5" />
+          {{ t('g.copy') }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
+
+import type { ErrorCardData, ErrorItem } from './types'
+
+const { card, showNodeIdBadge = false } = defineProps<{
+  card: ErrorCardData
+  showNodeIdBadge?: boolean
+}>()
+
+const emit = defineEmits<{
+  locateNode: [nodeId: string]
+  enterSubgraph: [nodeId: string]
+  copyToClipboard: [text: string]
+}>()
+
+const { t } = useI18n()
+
+function handleCopyError(error: ErrorItem) {
+  emit(
+    'copyToClipboard',
+    [error.message, error.details].filter(Boolean).join('\n\n')
+  )
+}
+</script>