fix: add new color picker components to knip ignore list

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

knip.config.ts

@@ -46,6 +46,9 @@ const config: KnipConfig = {
     '.github/workflows/ci-oss-assets-validation.yaml',
     // Pending integration in stacked PR
     'src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue',
+    // Pending integration - accessible color picker components
+    'src/components/ui/color-picker/ColorPickerSaturationValue.vue',
+    'src/components/ui/color-picker/ColorPickerSlider.vue',
     // Agent review check config, not part of the build
     '.agents/checks/eslint.strict.config.js'
   ],

src/components/TopMenuSection.vue

@@ -34,7 +34,17 @@
             </Button>
           </div>
 
-          <div ref="actionbarContainerRef" :class="actionbarContainerClass">
+          <div
+            ref="actionbarContainerRef"
+            :class="
+              cn(
+                'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 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 -->
             <div
@@ -45,7 +55,6 @@
             <ComfyActionbar
               :top-menu-container="actionbarContainerRef"
               :queue-overlay-expanded="isQueueOverlayExpanded"
-              :has-any-error="hasAnyError"
               @update:progress-target="updateProgressTarget"
             />
             <CurrentUserButton
@@ -114,7 +123,7 @@
 </template>
 
 <script setup lang="ts">
-import { useLocalStorage, useMutationObserver } from '@vueuse/core'
+import { useLocalStorage } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -136,7 +145,6 @@ import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useActionBarButtonStore } from '@/stores/actionBarButtonStore'
 import { useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -160,7 +168,6 @@ const { isLoggedIn } = useCurrentUser()
 const { t } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
 const executionErrorStore = useExecutionErrorStore()
-const actionBarButtonStore = useActionBarButtonStore()
 const queueUIStore = useQueueUIStore()
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
 const { shouldShowRedDot: shouldShowConflictRedDot } =
@@ -175,43 +182,6 @@ const isActionbarEnabled = computed(
 const isActionbarFloating = computed(
   () => isActionbarEnabled.value && !isActionbarDocked.value
 )
-/**
- * Whether the actionbar container has any visible docked buttons
- * (excluding ComfyActionbar, which uses position:fixed when floating
- * and does not contribute to the container's visual layout).
- */
-const hasDockedButtons = computed(() => {
-  if (actionBarButtonStore.buttons.length > 0) return true
-  if (hasLegacyContent.value) return true
-  if (isLoggedIn.value && !isIntegratedTabBar.value) return true
-  if (isDesktop && !isIntegratedTabBar.value) return true
-  if (isCloud && flags.workflowSharingEnabled) return true
-  if (!isRightSidePanelOpen.value) return true
-  return false
-})
-const isActionbarContainerEmpty = computed(
-  () => isActionbarFloating.value && !hasDockedButtons.value
-)
-const actionbarContainerClass = computed(() => {
-  const base =
-    'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg shadow-interface'
-
-  if (isActionbarContainerEmpty.value) {
-    return cn(
-      base,
-      '-ml-2 w-0 min-w-0 border-transparent shadow-none',
-      'has-[.border-dashed]:ml-0 has-[.border-dashed]:w-auto has-[.border-dashed]:min-w-auto',
-      'has-[.border-dashed]:border-interface-stroke has-[.border-dashed]:pl-2 has-[.border-dashed]:shadow-interface'
-    )
-  }
-
-  const borderClass =
-    !isActionbarFloating.value && hasAnyError.value
-      ? 'border-destructive-background-hover'
-      : 'border-interface-stroke'
-
-  return cn(base, 'px-2', borderClass)
-})
 const isIntegratedTabBar = computed(
   () => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
 )
@@ -263,25 +233,6 @@ const rightSidePanelTooltipConfig = computed(() =>
 
 // Maintain support for legacy topbar elements attached by custom scripts
 const legacyCommandsContainerRef = ref<HTMLElement>()
-const hasLegacyContent = ref(false)
-
-function checkLegacyContent() {
-  const el = legacyCommandsContainerRef.value
-  if (!el) {
-    hasLegacyContent.value = false
-    return
-  }
-  // Mirror the CSS: [&:not(:has(*>*:not(:empty)))]:hidden
-  hasLegacyContent.value =
-    el.querySelector(':scope > * > *:not(:empty)') !== null
-}
-
-useMutationObserver(legacyCommandsContainerRef, checkLegacyContent, {
-  childList: true,
-  subtree: true,
-  characterData: true
-})
-
 onMounted(() => {
   if (legacyCommandsContainerRef.value) {
     app.menu.element.style.width = 'fit-content'

src/components/actionbar/ComfyActionbar.vue

@@ -119,14 +119,9 @@ import { cn } from '@/utils/tailwindUtil'
 
 import ComfyRunButton from './ComfyRunButton'
 
-const {
-  topMenuContainer,
-  queueOverlayExpanded = false,
-  hasAnyError = false
-} = defineProps<{
+const { topMenuContainer, queueOverlayExpanded = false } = defineProps<{
   topMenuContainer?: HTMLElement | null
   queueOverlayExpanded?: boolean
-  hasAnyError?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -440,12 +435,7 @@ const panelClass = computed(() =>
     isDragging.value && 'pointer-events-none select-none',
     isDocked.value
       ? 'static border-none bg-transparent p-0'
-      : [
-          'fixed shadow-interface',
-          hasAnyError
-            ? 'border-destructive-background-hover'
-            : 'border-interface-stroke'
-        ]
+      : 'fixed shadow-interface'
   )
 )
 </script>

src/components/builder/AppBuilder.vue

@@ -160,7 +160,7 @@ function handleClick(e: MouseEvent) {
     else appModeStore.selectedOutputs.splice(index, 1)
     return
   }
-  if (!isSelectInputsMode.value || widget.options.canvasOnly) return
+  if (!isSelectInputsMode.value) return
 
   const index = appModeStore.selectedInputs.findIndex(
     ([nodeId, widgetName]) => node.id == nodeId && widget.name === widgetName

src/components/common/Dialogue.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import {
-  DialogClose,
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  DialogRoot,
-  DialogTitle,
-  DialogTrigger
-} from 'reka-ui'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-
-defineProps<{ title?: string; to?: string | HTMLElement }>()
-
-const { t } = useI18n()
-</script>
-<template>
-  <DialogRoot v-slot="{ close }">
-    <DialogTrigger as-child>
-      <slot name="button" />
-    </DialogTrigger>
-    <DialogPortal :to>
-      <DialogOverlay
-        class="data-[state=open]:animate-overlayShow fixed inset-0 z-30 bg-black/70"
-      />
-      <DialogContent
-        v-bind="$attrs"
-        class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] z-1700 max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-2xl border border-border-subtle bg-base-background p-2 shadow-sm"
-      >
-        <div
-          v-if="title"
-          class="flex w-full items-center justify-between border-b border-border-subtle px-4"
-        >
-          <DialogTitle class="text-sm">{{ title }}</DialogTitle>
-          <DialogClose as-child>
-            <Button
-              :aria-label="t('g.close')"
-              size="icon"
-              variant="muted-textonly"
-            >
-              <i class="icon-[lucide--x]" />
-            </Button>
-          </DialogClose>
-        </div>
-        <slot :close />
-      </DialogContent>
-    </DialogPortal>
-  </DialogRoot>
-</template>

src/components/error/ErrorOverlay.vue

@@ -50,9 +50,7 @@
             {{ t('g.dismiss') }}
           </Button>
           <Button variant="secondary" size="lg" @click="seeErrors">
-            {{
-              appMode ? t('linearMode.error.goto') : t('errorOverlay.seeErrors')
-            }}
+            {{ t('errorOverlay.seeErrors') }}
           </Button>
         </div>
       </div>
@@ -71,8 +69,6 @@ import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'
 
-defineProps<{ appMode?: boolean }>()
-
 const { t } = useI18n()
 const executionErrorStore = useExecutionErrorStore()
 const rightSidePanelStore = useRightSidePanelStore()
@@ -98,7 +94,6 @@ function dismiss() {
 }
 
 function seeErrors() {
-  canvasStore.linearMode = false
   if (canvasStore.canvas) {
     canvasStore.canvas.deselectAll()
     canvasStore.updateSelectedItems()

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -1,5 +1,5 @@
-import { computed, reactive, ref, toValue, watch } from 'vue'
-import type { MaybeRefOrGetter } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
+import type { Ref } from 'vue'
 import Fuse from 'fuse.js'
 import type { IFuseOptions } from 'fuse.js'
 
@@ -227,7 +227,7 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
 }
 
 export function useErrorGroups(
-  searchQuery: MaybeRefOrGetter<string>,
+  searchQuery: Ref<string>,
   t: (key: string) => string
 ) {
   const executionErrorStore = useExecutionErrorStore()
@@ -584,7 +584,7 @@ export function useErrorGroups(
   })
 
   const filteredGroups = computed<ErrorGroup[]>(() => {
-    const query = toValue(searchQuery).trim()
+    const query = searchQuery.value.trim()
     return searchErrorGroups(tabErrorGroups.value, query)
   })
 

src/components/ui/ZoomPane.vue

@@ -24,7 +24,7 @@ function handleWheel(e: WheelEvent) {
 
 let dragging = false
 function handleDown(e: PointerEvent) {
-  if (e.button !== 0 && e.button !== 1) return
+  if (e.button !== 0) return
 
   const zoomPaneEl = zoomPane.value
   if (!zoomPaneEl) return

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

@@ -0,0 +1,94 @@
+<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.saturation')}: ${saturation}%, ${t('colorPicker.brightness')}: ${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

@@ -0,0 +1,115 @@
+<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

@@ -483,6 +483,13 @@
     "black": "Black",
     "custom": "Custom"
   },
+  "colorPicker": {
+    "saturationValue": "Saturation and brightness",
+    "saturation": "Saturation",
+    "brightness": "Brightness",
+    "hue": "Hue",
+    "alpha": "Alpha"
+  },
   "contextMenu": {
     "Inputs": "Inputs",
     "Outputs": "Outputs",
@@ -3180,7 +3187,6 @@
     "cancelThisRun": "Cancel this run",
     "deleteAllAssets": "Delete all assets from this run",
     "hasCreditCost": "Requires additional credits",
-    "viewGraph": "View node graph",
     "welcome": {
       "title": "App Mode",
       "message": "A simplified view that hides the node graph so you can focus on creating.",
@@ -3225,19 +3231,6 @@
       "outputPlaceholder": "Output nodes will show up here",
       "outputRequiredPlaceholder": "At least one node is required"
     },
-    "error": {
-      "header": "This app encountered an error",
-      "log": "Error Logs",
-      "mobileFixable": "Check {0} for errors",
-      "requiresGraph": "Something went wrong during generation. This could be due to invalid hidden inputs, missing resources, or workflow configuration issues.",
-      "promptVisitGraph": "View the node graph to see the full error.",
-      "getHelp": "For help, view our {0}, {1}, or {2} with the copied error.",
-      "goto": "Show errors in graph",
-      "github": "submit a GitHub issue",
-      "guide": "troubleshooting guide",
-      "support": "contact our support",
-      "promptShow": "Show error report"
-    },
     "queue": {
       "clickToClear": "Click to clear queue",
       "clear": "Clear queue"

src/platform/workflow/sharing/components/AssetSectionList.vue

@@ -46,10 +46,7 @@
                 onThumbnailError($event.name, $event.previewUrl)
               "
             />
-            <span
-              v-tooltip="buildTooltipConfig(item.name)"
-              class="truncate text-xs text-base-foreground"
-            >
+            <span class="truncate text-xs text-base-foreground">
               {{ item.name }}
             </span>
             <span
@@ -77,7 +74,6 @@ import ShareAssetThumbnail from '@/platform/workflow/sharing/components/ShareAss
 import { useAssetSections } from '@/platform/workflow/sharing/composables/useAssetSections'
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 
 const { items } = defineProps<{
   items: AssetInfo[]

src/renderer/extensions/linearMode/MobileDisplay.vue

@@ -15,9 +15,7 @@ import { useWorkflowStore } from '@/platform/workflow/management/stores/workflow
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import LinearControls from '@/renderer/extensions/linearMode/LinearControls.vue'
 import LinearPreview from '@/renderer/extensions/linearMode/LinearPreview.vue'
-import MobileError from '@/renderer/extensions/linearMode/MobileError.vue'
 import { useColorPaletteService } from '@/services/colorPaletteService'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useQueueStore } from '@/stores/queueStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
@@ -33,7 +31,6 @@ const canvasStore = useCanvasStore()
 const colorPaletteService = useColorPaletteService()
 const colorPaletteStore = useColorPaletteStore()
 const { isLoggedIn } = useCurrentUser()
-const executionErrorStore = useExecutionErrorStore()
 const { t } = useI18n()
 const { commandIdToMenuItem } = useMenuItemStore()
 const queueStore = useQueueStore()
@@ -43,7 +40,7 @@ const { toggle: toggleFullscreen } = useFullscreen(undefined, {
   autoExit: true
 })
 
-const activeIndex = ref(1)
+const activeIndex = ref(2)
 const sliderPaneRef = useTemplateRef('sliderPaneRef')
 const sliderWidth = computed(() => sliderPaneRef.value?.offsetWidth)
 
@@ -195,11 +192,7 @@ const menuEntries = computed<MenuItem[]>(() => [
         <div
           class="absolute top-0 left-[100vw] flex h-full w-screen flex-col bg-base-background"
         >
-          <MobileError
-            v-if="executionErrorStore.isErrorOverlayOpen"
-            @navigate-controls="activeIndex = 0"
-          />
-          <LinearPreview v-else mobile @navigate-controls="activeIndex = 0" />
+          <LinearPreview mobile />
         </div>
         <AssetsSidebarTab
           class="absolute top-0 left-[200vw] h-full w-screen bg-base-background"
@@ -220,11 +213,7 @@ const menuEntries = computed<MenuItem[]>(() => [
         <div class="relative size-4">
           <i :class="cn('size-4', icon)" />
           <div
-            v-if="index === 1 && executionErrorStore.isErrorOverlayOpen"
-            class="absolute -top-1 -right-1 size-2 rounded-full bg-error"
-          />
-          <div
-            v-else-if="
+            v-if="
               index === 1 &&
               (queueStore.runningTasks.length > 0 ||
                 queueStore.pendingTasks.length > 0)

src/renderer/extensions/linearMode/MobileError.vue

@@ -1,174 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Dialogue from '@/components/common/Dialogue.vue'
-import { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'
-import Button from '@/components/ui/button/Button.vue'
-import { useAppMode } from '@/composables/useAppMode'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
-import { useExternalLink } from '@/composables/useExternalLink'
-import { buildSupportUrl } from '@/platform/support/config'
-import { useAppModeStore } from '@/stores/appModeStore'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-
-defineEmits<{ navigateControls: [] }>()
-
-const { t } = useI18n()
-const appModeStore = useAppModeStore()
-const { setMode } = useAppMode()
-const executionErrorStore = useExecutionErrorStore()
-const { buildDocsUrl, staticUrls } = useExternalLink()
-const { allErrorGroups } = useErrorGroups('', t)
-const { copyToClipboard } = useCopyToClipboard()
-
-const guideUrl = buildDocsUrl('troubleshooting/overview', {
-  includeLocale: true
-})
-const supportUrl = buildSupportUrl()
-
-const inputNodeIds = computed(() => {
-  const ids = new Set()
-  for (const [id] of appModeStore.selectedInputs) ids.add(String(id))
-  return ids
-})
-
-const accessibleNodeErrors = computed(() =>
-  Object.keys(executionErrorStore.lastNodeErrors ?? {}).filter((k) =>
-    inputNodeIds.value.has(k)
-  )
-)
-const accessibleErrors = computed(() =>
-  accessibleNodeErrors.value.flatMap((k) =>
-    executionErrorStore.lastNodeErrors![k].errors.flatMap((error) => {
-      const { extra_info } = error
-      if (!extra_info) return []
-
-      const selectedInput = appModeStore.selectedInputs.find(
-        ([id, name]) => id == k && extra_info.input_name === name
-      )
-      if (!selectedInput) return []
-
-      return [`${selectedInput[1]}: ${error.message}`]
-    })
-  )
-)
-const allErrors = computed(() =>
-  allErrorGroups.value.flatMap((group) => {
-    if (group.type !== 'execution') return [group.title]
-
-    return group.cards.flatMap((c) =>
-      c.errors.map((e) =>
-        e.details
-          ? `${c.title} (${e.details}): ${e.message}`
-          : `${c.title}: ${e.message}`
-      )
-    )
-  })
-)
-
-function copy(obj: unknown) {
-  copyToClipboard(JSON.stringify(obj))
-}
-</script>
-<template>
-  <section class="flex h-full flex-col items-center justify-center gap-2 px-4">
-    <i class="icon-[lucide--circle-alert] size-6 bg-error" />
-    {{ t('linearMode.error.header') }}
-    <div class="p-1 text-muted-foreground">
-      <i18n-t
-        v-if="accessibleErrors.length"
-        keypath="linearMode.error.mobileFixable"
-      >
-        <Button @click="$emit('navigateControls')">
-          {{ t('linearMode.mobileControls') }}
-        </Button>
-      </i18n-t>
-      <div v-else class="text-center">
-        <p v-text="t('linearMode.error.requiresGraph')" />
-        <p v-text="t('linearMode.error.promptVisitGraph')" />
-        <p class="*:text-muted-foreground">
-          <i18n-t keypath="linearMode.error.getHelp">
-            <a
-              :href="guideUrl"
-              target="_blank"
-              v-text="t('linearMode.error.guide')"
-            />
-            <a
-              :href="staticUrls.githubIssues"
-              target="_blank"
-              v-text="t('linearMode.error.github')"
-            />
-            <a
-              :href="supportUrl"
-              target="_blank"
-              v-text="t('linearMode.error.support')"
-            />
-          </i18n-t>
-        </p>
-        <Dialogue :title="t('linearMode.error.log')">
-          <template #button>
-            <Button variant="textonly">
-              {{ t('linearMode.error.promptShow') }}
-              <i class="icon-[lucide--chevron-right] size-5" />
-            </Button>
-          </template>
-          <template #default="{ close }">
-            <article class="flex flex-col gap-2 p-4">
-              <section class="flex max-h-[60vh] flex-col gap-2 overflow-y-auto">
-                <div
-                  v-for="error in allErrors"
-                  :key="error"
-                  class="w-full rounded-lg bg-secondary-background p-2 text-muted-foreground"
-                  v-text="error"
-                />
-              </section>
-              <div class="flex items-center justify-end gap-4">
-                <Button variant="muted-textonly" size="lg" @click="close">
-                  {{ t('g.close') }}
-                </Button>
-                <Button size="lg" @click="copy(allErrors)">
-                  {{ t('importFailed.copyError') }}
-                  <i class="icon-[lucide--copy]" />
-                </Button>
-              </div>
-            </article>
-          </template>
-        </Dialogue>
-      </div>
-    </div>
-    <div
-      v-if="accessibleErrors.length"
-      class="my-8 w-full rounded-lg bg-secondary-background text-muted-foreground"
-    >
-      <ul>
-        <li
-          v-for="error in accessibleErrors"
-          :key="error"
-          class="before:content"
-          v-text="error"
-        />
-      </ul>
-    </div>
-    <div class="flex gap-2">
-      <Button
-        variant="textonly"
-        size="lg"
-        @click="executionErrorStore.dismissErrorOverlay()"
-      >
-        {{ t('g.dismiss') }}
-      </Button>
-      <Button variant="textonly" size="lg" @click="setMode('graph')">
-        {{ t('linearMode.viewGraph') }}
-      </Button>
-      <Button
-        v-if="accessibleErrors.length"
-        size="lg"
-        @click="copy(accessibleErrors)"
-      >
-        {{ t('importFailed.copyError') }}
-        <i class="icon-[lucide--copy]" />
-      </Button>
-    </div>
-  </section>
-</template>

src/views/LinearView.vue

@@ -9,7 +9,6 @@ import { computed, useTemplateRef } from 'vue'
 import AppBuilder from '@/components/builder/AppBuilder.vue'
 import AppModeToolbar from '@/components/appMode/AppModeToolbar.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
-import ErrorOverlay from '@/components/error/ErrorOverlay.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
 import TopbarSubscribeButton from '@/components/topbar/TopbarSubscribeButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
@@ -157,7 +156,6 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
         </div>
         <div ref="bottomLeftRef" class="absolute bottom-7 left-4 z-20" />
         <div ref="bottomRightRef" class="absolute right-4 bottom-7 z-20" />
-        <div class="absolute top-4 right-4 z-20"><ErrorOverlay app-mode /></div>
       </SplitterPanel>
       <SplitterPanel
         v-if="hasRightPanel"