fix: refactor: replace two-pass error flag reconciliation with single-pass diff in lastNodeErrors watcher (#9796)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

knip.config.ts

@@ -55,10 +55,7 @@ const config: KnipConfig = {
     // Agent review check config, not part of the build
     '.agents/checks/eslint.strict.config.js',
     // Loaded via @plugin directive in CSS, not detected by knip
-    'packages/design-system/src/css/lucideStrokePlugin.js',
-    // Pending integration in stacked PR (feat/storybook-color-picker)
-    'src/components/ui/color-picker/ColorPickerSaturationValue.vue',
-    'src/components/ui/color-picker/ColorPickerSlider.vue'
+    'packages/design-system/src/css/lucideStrokePlugin.js'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199

src/components/ui/color-picker/ColorPickerSaturationValue.vue

@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { hue } = defineProps<{
-  hue: number
-}>()
-
-const saturation = defineModel<number>('saturation', { required: true })
-const value = defineModel<number>('value', { required: true })
-
-const { t } = useI18n()
-
-const containerRef = ref<HTMLElement | null>(null)
-
-const hueBackground = computed(() => `hsl(${hue}, 100%, 50%)`)
-
-const handleStyle = computed(() => ({
-  left: `${saturation.value}%`,
-  top: `${100 - value.value}%`
-}))
-
-function clamp(v: number, min: number, max: number) {
-  return Math.max(min, Math.min(max, v))
-}
-
-function updateFromPointer(e: PointerEvent) {
-  const el = containerRef.value
-  if (!el) return
-  const rect = el.getBoundingClientRect()
-  const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
-  const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height))
-  saturation.value = Math.round(x * 100)
-  value.value = Math.round((1 - y) * 100)
-}
-
-function handlePointerDown(e: PointerEvent) {
-  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
-  updateFromPointer(e)
-}
-
-function handlePointerMove(e: PointerEvent) {
-  if (!(e.currentTarget as HTMLElement).hasPointerCapture(e.pointerId)) return
-  updateFromPointer(e)
-}
-
-function handleKeydown(e: KeyboardEvent) {
-  const step = e.shiftKey ? 10 : 1
-  switch (e.key) {
-    case 'ArrowLeft':
-      e.preventDefault()
-      saturation.value = clamp(saturation.value - step, 0, 100)
-      break
-    case 'ArrowRight':
-      e.preventDefault()
-      saturation.value = clamp(saturation.value + step, 0, 100)
-      break
-    case 'ArrowUp':
-      e.preventDefault()
-      value.value = clamp(value.value + step, 0, 100)
-      break
-    case 'ArrowDown':
-      e.preventDefault()
-      value.value = clamp(value.value - step, 0, 100)
-      break
-  }
-}
-</script>
-
-<template>
-  <div
-    ref="containerRef"
-    role="slider"
-    tabindex="0"
-    :aria-label="t('colorPicker.saturationValue')"
-    :aria-valuetext="
-      t('colorPicker.saturationBrightnessValue', {
-        saturation: saturation,
-        value: value
-      })
-    "
-    class="relative aspect-square w-full cursor-crosshair rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-highlight"
-    :style="{ backgroundColor: hueBackground, touchAction: 'none' }"
-    @pointerdown="handlePointerDown"
-    @pointermove="handlePointerMove"
-    @keydown="handleKeydown"
-  >
-    <div
-      class="absolute inset-0 rounded-sm bg-linear-to-r from-white to-transparent"
-    />
-    <div
-      class="absolute inset-0 rounded-sm bg-linear-to-b from-transparent to-black"
-    />
-    <div
-      class="pointer-events-none absolute size-3.5 -translate-1/2 rounded-full border-2 border-white shadow-[0_0_2px_rgba(0,0,0,0.6)]"
-      :style="handleStyle"
-    />
-  </div>
-</template>

src/components/ui/color-picker/ColorPickerSlider.vue

@@ -1,115 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { hsbToRgb, rgbToHex } from '@/utils/colorUtil'
-
-const {
-  type,
-  hue = 0,
-  saturation = 100,
-  brightness = 100
-} = defineProps<{
-  type: 'hue' | 'alpha'
-  hue?: number
-  saturation?: number
-  brightness?: number
-}>()
-
-const modelValue = defineModel<number>({ required: true })
-
-const { t } = useI18n()
-
-const max = computed(() => (type === 'hue' ? 360 : 100))
-
-const fraction = computed(() => modelValue.value / max.value)
-
-const trackBackground = computed(() => {
-  if (type === 'hue') {
-    return 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'
-  }
-  const rgb = hsbToRgb({ h: hue, s: saturation, b: brightness })
-  const hex = rgbToHex(rgb)
-  return `linear-gradient(to right, transparent, ${hex})`
-})
-
-const containerStyle = computed(() => {
-  if (type === 'alpha') {
-    return {
-      backgroundImage:
-        'repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)',
-      backgroundSize: '8px 8px',
-      touchAction: 'none'
-    }
-  }
-  return {
-    background: trackBackground.value,
-    touchAction: 'none'
-  }
-})
-
-const ariaLabel = computed(() =>
-  type === 'hue' ? t('colorPicker.hue') : t('colorPicker.alpha')
-)
-
-function clamp(v: number, min: number, maxVal: number) {
-  return Math.max(min, Math.min(maxVal, v))
-}
-
-function updateFromPointer(e: PointerEvent) {
-  const el = e.currentTarget as HTMLElement
-  const rect = el.getBoundingClientRect()
-  const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
-  modelValue.value = Math.round(x * max.value)
-}
-
-function handlePointerDown(e: PointerEvent) {
-  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
-  updateFromPointer(e)
-}
-
-function handlePointerMove(e: PointerEvent) {
-  if (!(e.currentTarget as HTMLElement).hasPointerCapture(e.pointerId)) return
-  updateFromPointer(e)
-}
-
-function handleKeydown(e: KeyboardEvent) {
-  const step = e.shiftKey ? 10 : 1
-  switch (e.key) {
-    case 'ArrowLeft':
-      e.preventDefault()
-      modelValue.value = clamp(modelValue.value - step, 0, max.value)
-      break
-    case 'ArrowRight':
-      e.preventDefault()
-      modelValue.value = clamp(modelValue.value + step, 0, max.value)
-      break
-  }
-}
-</script>
-
-<template>
-  <div
-    role="slider"
-    tabindex="0"
-    :aria-label="ariaLabel"
-    :aria-valuenow="modelValue"
-    :aria-valuemin="0"
-    :aria-valuemax="max"
-    class="relative flex h-4 cursor-pointer items-center rounded-full p-px outline-none focus-visible:ring-2 focus-visible:ring-highlight"
-    :style="containerStyle"
-    @pointerdown="handlePointerDown"
-    @pointermove="handlePointerMove"
-    @keydown="handleKeydown"
-  >
-    <div
-      v-if="type === 'alpha'"
-      class="absolute inset-0 rounded-full"
-      :style="{ background: trackBackground }"
-    />
-    <div
-      class="pointer-events-none absolute aspect-square h-full -translate-x-1/2 rounded-full border-2 border-white shadow-[0_0_2px_rgba(0,0,0,0.6)]"
-      :style="{ left: `${fraction * 100}%` }"
-    />
-  </div>
-</template>

src/locales/en/main.json

@@ -498,14 +498,6 @@
     "black": "Black",
     "custom": "Custom"
   },
-  "colorPicker": {
-    "saturationValue": "Saturation and brightness",
-    "saturationBrightnessValue": "Saturation {saturation}%, brightness {value}%",
-    "saturation": "Saturation",
-    "brightness": "Brightness",
-    "hue": "Hue",
-    "alpha": "Alpha"
-  },
   "contextMenu": {
     "Inputs": "Inputs",
     "Outputs": "Outputs",

src/stores/executionErrorStore.ts

@@ -35,44 +35,56 @@ interface MissingNodesError {
   nodeTypes: MissingNodeType[]
 }
 
-function clearAllNodeErrorFlags(rootGraph: LGraph): void {
+function reconcileNodeErrorFlags(
+  rootGraph: LGraph,
+  nodeErrors: Record<NodeId, NodeError> | null
+): void {
+  const errorNodeIds = new Set<LGraphNode>()
+  const errorSlotNames = new Map<LGraphNode, Set<string>>()
+
+  if (nodeErrors) {
+    for (const [executionId, nodeError] of Object.entries(nodeErrors)) {
+      const node = getNodeByExecutionId(rootGraph, executionId)
+      if (!node) continue
+
+      errorNodeIds.add(node)
+
+      for (const error of nodeError.errors) {
+        const slotName = error.extra_info?.input_name
+        if (!slotName) continue
+        let slots = errorSlotNames.get(node)
+        if (!slots) {
+          slots = new Set()
+          errorSlotNames.set(node, slots)
+        }
+        slots.add(slotName)
+      }
+
+      for (const parentId of getParentExecutionIds(executionId)) {
+        const parentNode = getNodeByExecutionId(rootGraph, parentId)
+        if (parentNode) errorNodeIds.add(parentNode)
+      }
+    }
+  }
+
   forEachNode(rootGraph, (node) => {
-    node.has_errors = false
+    const shouldHaveErrors = errorNodeIds.has(node)
+    if (node.has_errors !== shouldHaveErrors) {
+      node.has_errors = shouldHaveErrors
+    }
+
     if (node.inputs) {
+      const slotNames = errorSlotNames.get(node)
       for (const slot of node.inputs) {
-        slot.hasErrors = false
+        const shouldSlotHaveErrors = !!slotNames?.has(slot.name)
+        if (slot.hasErrors !== shouldSlotHaveErrors) {
+          slot.hasErrors = shouldSlotHaveErrors
+        }
       }
     }
   })
 }
 
-function markNodeSlotErrors(node: LGraphNode, nodeError: NodeError): void {
-  if (!node.inputs) return
-  for (const error of nodeError.errors) {
-    const slotName = error.extra_info?.input_name
-    if (!slotName) continue
-    const slot = node.inputs.find((s) => s.name === slotName)
-    if (slot) slot.hasErrors = true
-  }
-}
-
-function applyNodeError(
-  rootGraph: LGraph,
-  executionId: NodeExecutionId,
-  nodeError: NodeError
-): void {
-  const node = getNodeByExecutionId(rootGraph, executionId)
-  if (!node) return
-
-  node.has_errors = true
-  markNodeSlotErrors(node, nodeError)
-
-  for (const parentId of getParentExecutionIds(executionId)) {
-    const parentNode = getNodeByExecutionId(rootGraph, parentId)
-    if (parentNode) parentNode.has_errors = true
-  }
-}
-
 /** Execution error state: node errors, runtime errors, prompt errors, and missing assets. */
 export const useExecutionErrorStore = defineStore('executionError', () => {
   const workflowStore = useWorkflowStore()
@@ -377,17 +389,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
 
   watch(lastNodeErrors, () => {
     if (!app.isGraphReady) return
-    const rootGraph = app.rootGraph
-
-    clearAllNodeErrorFlags(rootGraph)
-
-    if (!lastNodeErrors.value) return
-
-    for (const [executionId, nodeError] of Object.entries(
-      lastNodeErrors.value
-    )) {
-      applyNodeError(rootGraph, executionId, nodeError)
-    }
+    reconcileNodeErrorFlags(app.rootGraph, lastNodeErrors.value)
   })
 
   return {