[automated] Apply ESLint and Oxfmt fixes

fix: unexport FILE_INPUT_FIELDS and fix lint
- Remove export from FILE_INPUT_FIELDS (flagged by knip as unused export) - Extract EmptyFileInputNode interface to fix oxfmt line length Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 06:47:35 +00:00 · 2026-03-24 02:13:53 +00:00 · 2026-03-23 19:11:01 -07:00 · 2026-03-23 18:41:04 -07:00 · 2026-03-23 18:29:53 -07:00
118 changed files with 1389 additions and 4932 deletions
--- a/apps/website/.gitignore
+++ b/apps/website/.gitignore
@@ -1,2 +0,0 @@
-dist/
-.astro/
--- a/apps/website/astro.config.ts
+++ b/apps/website/astro.config.ts
@@ -1,24 +0,0 @@
-import { defineConfig } from 'astro/config'
-import vue from '@astrojs/vue'
-import tailwindcss from '@tailwindcss/vite'
-
-export default defineConfig({
-  site: 'https://comfy.org',
-  output: 'static',
-  integrations: [vue()],
-  vite: {
-    plugins: [tailwindcss()]
-  },
-  build: {
-    assetsPrefix: process.env.VERCEL_URL
-      ? `https://${process.env.VERCEL_URL}`
-      : undefined
-  },
-  i18n: {
-    locales: ['en', 'zh-CN'],
-    defaultLocale: 'en',
-    routing: {
-      prefixDefaultLocale: false
-    }
-  }
-})
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -1,80 +0,0 @@
-{
-  "name": "@comfyorg/website",
-  "version": "0.0.1",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview"
-  },
-  "dependencies": {
-    "@comfyorg/design-system": "workspace:*",
-    "@vercel/analytics": "catalog:",
-    "vue": "catalog:"
-  },
-  "devDependencies": {
-    "@astrojs/vue": "catalog:",
-    "@tailwindcss/vite": "catalog:",
-    "astro": "catalog:",
-    "tailwindcss": "catalog:",
-    "typescript": "catalog:"
-  },
-  "nx": {
-    "tags": [
-      "scope:website",
-      "type:app"
-    ],
-    "targets": {
-      "dev": {
-        "executor": "nx:run-commands",
-        "continuous": true,
-        "options": {
-          "cwd": "apps/website",
-          "command": "astro dev"
-        }
-      },
-      "serve": {
-        "executor": "nx:run-commands",
-        "continuous": true,
-        "options": {
-          "cwd": "apps/website",
-          "command": "astro dev"
-        }
-      },
-      "build": {
-        "executor": "nx:run-commands",
-        "cache": true,
-        "dependsOn": [
-          "^build"
-        ],
-        "options": {
-          "cwd": "apps/website",
-          "command": "astro build"
-        },
-        "outputs": [
-          "{projectRoot}/dist"
-        ]
-      },
-      "preview": {
-        "executor": "nx:run-commands",
-        "continuous": true,
-        "dependsOn": [
-          "build"
-        ],
-        "options": {
-          "cwd": "apps/website",
-          "command": "astro preview"
-        }
-      },
-      "typecheck": {
-        "executor": "nx:run-commands",
-        "cache": true,
-        "options": {
-          "cwd": "apps/website",
-          "command": "astro check"
-        }
-      }
-    }
-  }
-}
--- a/apps/website/public/fonts/inter-latin-italic.woff2
+++ b/apps/website/public/fonts/inter-latin-italic.woff2
--- a/apps/website/public/fonts/inter-latin-normal.woff2
+++ b/apps/website/public/fonts/inter-latin-normal.woff2
--- a/apps/website/src/components/SiteFooter.vue
+++ b/apps/website/src/components/SiteFooter.vue
@@ -1,139 +0,0 @@
-<script setup lang="ts">
-const columns = [
-  {
-    title: 'Product',
-    links: [
-      { label: 'Comfy Desktop', href: '/download' },
-      { label: 'Comfy Cloud', href: 'https://app.comfy.org' },
-      { label: 'ComfyHub', href: 'https://hub.comfy.org' },
-      { label: 'Pricing', href: '/pricing' }
-    ]
-  },
-  {
-    title: 'Resources',
-    links: [
-      { label: 'Documentation', href: 'https://docs.comfy.org' },
-      { label: 'Blog', href: 'https://blog.comfy.org' },
-      { label: 'Gallery', href: '/gallery' },
-      { label: 'GitHub', href: 'https://github.com/comfyanonymous/ComfyUI' }
-    ]
-  },
-  {
-    title: 'Company',
-    links: [
-      { label: 'About', href: '/about' },
-      { label: 'Careers', href: '/careers' },
-      { label: 'Enterprise', href: '/enterprise' }
-    ]
-  },
-  {
-    title: 'Legal',
-    links: [
-      { label: 'Terms of Service', href: '/terms-of-service' },
-      { label: 'Privacy Policy', href: '/privacy-policy' }
-    ]
-  }
-]
-
-const socials = [
-  {
-    label: 'GitHub',
-    href: 'https://github.com/comfyanonymous/ComfyUI',
-    icon: 'M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z'
-  },
-  {
-    label: 'Discord',
-    href: 'https://discord.gg/comfyorg',
-    icon: 'M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026c.462-.62.874-1.275 1.226-1.963.021-.04.001-.088-.041-.104a13.201 13.201 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028ZM8.02 15.278c-1.182 0-2.157-1.069-2.157-2.38 0-1.312.956-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.956 2.38-2.157 2.38Zm7.975 0c-1.183 0-2.157-1.069-2.157-2.38 0-1.312.955-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.946 2.38-2.157 2.38Z'
-  },
-  {
-    label: 'X',
-    href: 'https://x.com/comaboratory',
-    icon: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'
-  },
-  {
-    label: 'Reddit',
-    href: 'https://reddit.com/r/comfyui',
-    icon: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm5.8 11.33c.02.16.03.33.03.5 0 2.55-2.97 4.63-6.63 4.63-3.65 0-6.62-2.07-6.62-4.63 0-.17.01-.34.03-.5a1.58 1.58 0 0 1-.63-1.27c0-.88.72-1.59 1.6-1.59.44 0 .83.18 1.12.46 1.1-.79 2.62-1.3 4.31-1.37l.73-3.44a.32.32 0 0 1 .39-.24l2.43.52a1.13 1.13 0 0 1 2.15.36 1.13 1.13 0 0 1-1.13 1.12 1.13 1.13 0 0 1-1.08-.82l-2.16-.46-.65 3.07c1.65.09 3.14.59 4.22 1.36.29-.28.69-.46 1.13-.46.88 0 1.6.71 1.6 1.59 0 .52-.25.97-.63 1.27ZM9.5 13.5c0 .63.51 1.13 1.13 1.13s1.12-.5 1.12-1.13-.5-1.12-1.12-1.12-1.13.5-1.13 1.12Zm5.75 2.55c-.69.69-2 .73-3.25.73s-2.56-.04-3.25-.73a.32.32 0 1 1 .45-.45c.44.44 1.37.6 2.8.6 1.43 0 2.37-.16 2.8-.6a.32.32 0 1 1 .45.45Zm-.37-1.42c.62 0 1.13-.5 1.13-1.13 0-.62-.51-1.12-1.13-1.12-.63 0-1.13.5-1.13 1.12 0 .63.5 1.13 1.13 1.13Z'
-  },
-  {
-    label: 'LinkedIn',
-    href: 'https://linkedin.com/company/comfyorg',
-    icon: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286ZM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065Zm1.782 13.019H3.555V9h3.564v11.452ZM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003Z'
-  },
-  {
-    label: 'Instagram',
-    href: 'https://instagram.com/comfyorg',
-    icon: 'M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069ZM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0Zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324ZM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881Z'
-  }
-]
-</script>
-
-<template>
-  <footer class="border-t border-white/10 bg-black">
-    <div
-      class="mx-auto grid max-w-7xl gap-8 px-6 py-16 sm:grid-cols-2 lg:grid-cols-5"
-    >
-      <!-- Brand -->
-      <div class="lg:col-span-1">
-        <a href="/" class="text-2xl font-bold italic text-brand-yellow">
-          Comfy
-        </a>
-        <p class="mt-4 text-sm text-smoke-700">
-          Professional control of visual AI.
-        </p>
-      </div>
-
-      <!-- Link columns -->
-      <nav
-        v-for="column in columns"
-        :key="column.title"
-        :aria-label="column.title"
-        class="flex flex-col gap-3"
-      >
-        <h3 class="text-sm font-semibold text-white">{{ column.title }}</h3>
-        <a
-          v-for="link in column.links"
-          :key="link.href"
-          :href="link.href"
-          class="text-sm text-smoke-700 transition-colors hover:text-white"
-        >
-          {{ link.label }}
-        </a>
-      </nav>
-    </div>
-
-    <!-- Bottom bar -->
-    <div class="border-t border-white/10">
-      <div
-        class="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-6 py-6 sm:flex-row"
-      >
-        <p class="text-sm text-smoke-700">
-          &copy; {{ new Date().getFullYear() }} Comfy Org. All rights reserved.
-        </p>
-
-        <!-- Social icons -->
-        <div class="flex items-center gap-4">
-          <a
-            v-for="social in socials"
-            :key="social.label"
-            :href="social.href"
-            :aria-label="social.label"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-smoke-700 transition-colors hover:text-white"
-          >
-            <svg
-              class="h-5 w-5"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path :d="social.icon" />
-            </svg>
-          </a>
-        </div>
-      </div>
-    </div>
-  </footer>
-</template>
--- a/apps/website/src/components/SiteNav.vue
+++ b/apps/website/src/components/SiteNav.vue
@@ -1,127 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
-
-const mobileMenuOpen = ref(false)
-
-const navLinks = [
-  { label: 'ENTERPRISE', href: '/enterprise' },
-  { label: 'GALLERY', href: '/gallery' },
-  { label: 'ABOUT', href: '/about' },
-  { label: 'CAREERS', href: '/careers' }
-]
-
-function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape' && mobileMenuOpen.value) {
-    mobileMenuOpen.value = false
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('keydown', onKeydown)
-  document.addEventListener('astro:after-swap', () => {
-    mobileMenuOpen.value = false
-  })
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', onKeydown)
-})
-</script>
-
-<template>
-  <nav
-    class="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-md"
-    aria-label="Main navigation"
-  >
-    <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
-      <!-- Logo -->
-      <a href="/" class="text-2xl font-bold italic text-brand-yellow">
-        Comfy
-      </a>
-
-      <!-- Desktop nav links -->
-      <div class="hidden items-center gap-8 md:flex">
-        <a
-          v-for="link in navLinks"
-          :key="link.href"
-          :href="link.href"
-          class="text-sm font-medium tracking-wide text-white transition-colors hover:text-brand-yellow"
-        >
-          {{ link.label }}
-        </a>
-
-        <!-- CTA buttons -->
-        <div class="flex items-center gap-3">
-          <a
-            href="https://app.comfy.org"
-            class="rounded-full bg-brand-yellow px-5 py-2 text-sm font-semibold text-black transition-opacity hover:opacity-90"
-          >
-            COMFY CLOUD
-          </a>
-          <a
-            href="https://hub.comfy.org"
-            class="rounded-full border border-brand-yellow px-5 py-2 text-sm font-semibold text-brand-yellow transition-colors hover:bg-brand-yellow hover:text-black"
-          >
-            COMFY HUB
-          </a>
-        </div>
-      </div>
-
-      <!-- Mobile hamburger -->
-      <button
-        class="flex flex-col gap-1.5 md:hidden"
-        aria-label="Toggle menu"
-        aria-controls="site-mobile-menu"
-        :aria-expanded="mobileMenuOpen"
-        @click="mobileMenuOpen = !mobileMenuOpen"
-      >
-        <span
-          class="block h-0.5 w-6 bg-white transition-transform"
-          :class="mobileMenuOpen && 'translate-y-2 rotate-45'"
-        />
-        <span
-          class="block h-0.5 w-6 bg-white transition-opacity"
-          :class="mobileMenuOpen && 'opacity-0'"
-        />
-        <span
-          class="block h-0.5 w-6 bg-white transition-transform"
-          :class="mobileMenuOpen && '-translate-y-2 -rotate-45'"
-        />
-      </button>
-    </div>
-
-    <!-- Mobile menu -->
-    <div
-      v-show="mobileMenuOpen"
-      id="site-mobile-menu"
-      class="border-t border-white/10 bg-black px-6 pb-6 md:hidden"
-    >
-      <div class="flex flex-col gap-4 pt-4">
-        <a
-          v-for="link in navLinks"
-          :key="link.href"
-          :href="link.href"
-          class="text-sm font-medium tracking-wide text-white transition-colors hover:text-brand-yellow"
-          @click="mobileMenuOpen = false"
-        >
-          {{ link.label }}
-        </a>
-
-        <div class="flex flex-col gap-3 pt-2">
-          <a
-            href="https://app.comfy.org"
-            class="rounded-full bg-brand-yellow px-5 py-2 text-center text-sm font-semibold text-black transition-opacity hover:opacity-90"
-          >
-            COMFY CLOUD
-          </a>
-          <a
-            href="https://hub.comfy.org"
-            class="rounded-full border border-brand-yellow px-5 py-2 text-center text-sm font-semibold text-brand-yellow transition-colors hover:bg-brand-yellow hover:text-black"
-          >
-            COMFY HUB
-          </a>
-        </div>
-      </div>
-    </div>
-  </nav>
-</template>
--- a/apps/website/src/env.d.ts
+++ b/apps/website/src/env.d.ts
@@ -1 +0,0 @@
-/// <reference types="astro/client" />
--- a/apps/website/src/layouts/BaseLayout.astro
+++ b/apps/website/src/layouts/BaseLayout.astro
@@ -1,81 +0,0 @@
---
-import { ClientRouter } from 'astro:transitions'
-import Analytics from '@vercel/analytics/astro'
-import '../styles/global.css'
-
-interface Props {
-  title: string
-  description?: string
-  ogImage?: string
-}
-
-const {
-  title,
-  description = 'Comfy is the AI creation engine for visual professionals who demand control.',
-  ogImage = '/og-default.png',
-} = Astro.props
-
-const siteBase = Astro.site ?? 'https://comfy.org'
-const canonicalURL = new URL(Astro.url.pathname, siteBase)
-const ogImageURL = new URL(ogImage, siteBase)
-const locale = Astro.currentLocale ?? 'en'
---
-
-<!doctype html>
-<html lang={locale}>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content={description} />
-    <title>{title}</title>
-
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-    <link rel="canonical" href={canonicalURL.href} />
-
-    <!-- Open Graph -->
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-    <meta property="og:image" content={ogImageURL.href} />
-    <meta property="og:url" content={canonicalURL.href} />
-    <meta property="og:locale" content={locale} />
-    <meta property="og:site_name" content="Comfy" />
-
-    <!-- Twitter -->
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content={title} />
-    <meta name="twitter:description" content={description} />
-    <meta name="twitter:image" content={ogImageURL.href} />
-
-    <!-- Google Tag Manager -->
-    <script is:inline>
-      ;(function (w, d, s, l, i) {
-        w[l] = w[l] || []
-        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
-        var f = d.getElementsByTagName(s)[0],
-          j = d.createElement(s),
-          dl = l != 'dataLayer' ? '&l=' + l : ''
-        j.async = true
-        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
-        f.parentNode.insertBefore(j, f)
-      })(window, document, 'script', 'dataLayer', 'GTM-NP9JM6K7')
-    </script>
-
-    <ClientRouter />
-  </head>
-  <body class="bg-black text-white font-inter antialiased">
-    <!-- Google Tag Manager (noscript) -->
-    <noscript>
-      <iframe
-        src="https://www.googletagmanager.com/ns.html?id=GTM-NP9JM6K7"
-        height="0"
-        width="0"
-        style="display:none;visibility:hidden"
-      ></iframe>
-    </noscript>
-
-    <slot />
-
-    <Analytics />
-  </body>
-</html>
--- a/apps/website/src/styles/global.css
+++ b/apps/website/src/styles/global.css
@@ -1,2 +0,0 @@
-@import 'tailwindcss';
-@import '@comfyorg/design-system/css/base.css';
--- a/apps/website/tsconfig.json
+++ b/apps/website/tsconfig.json
@@ -1,9 +0,0 @@
-{
-  "extends": "astro/tsconfigs/strict",
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src/**/*", "astro.config.mjs"]
-}
--- a/browser_tests/fixtures/helpers/CanvasHelper.ts
+++ b/browser_tests/fixtures/helpers/CanvasHelper.ts
@@ -91,12 +91,6 @@ export class CanvasHelper {
    await this.page.mouse.move(10, 10)
  }

-  async isReadOnly(): Promise<boolean> {
-    return this.page.evaluate(() => {
-      return window.app!.canvas.state.readOnly
-    })
-  }
-
  async getScale(): Promise<number> {
    return this.page.evaluate(() => {
      return window.app!.canvas.ds.scale
--- a/browser_tests/fixtures/selectors.ts
+++ b/browser_tests/fixtures/selectors.ts
@@ -28,15 +28,10 @@ export const TestIds = {
    settingsTabAbout: 'settings-tab-about',
    confirm: 'confirm-dialog',
    errorOverlay: 'error-overlay',
-    errorOverlaySeeErrors: 'error-overlay-see-errors',
    runtimeErrorPanel: 'runtime-error-panel',
    missingNodeCard: 'missing-node-card',
-    errorCardFindOnGithub: 'error-card-find-on-github',
-    errorCardCopy: 'error-card-copy',
    about: 'about-panel',
-    whatsNewSection: 'whats-new-section',
-    missingNodePacksGroup: 'error-group-missing-node',
-    missingModelsGroup: 'error-group-missing-model'
+    whatsNewSection: 'whats-new-section'
  },
  keybindings: {
    presetMenu: 'keybinding-preset-menu'
@@ -81,10 +76,6 @@ export const TestIds = {
  },
  user: {
    currentUserIndicator: 'current-user-indicator'
-  },
-  errors: {
-    imageLoadError: 'error-loading-image',
-    videoLoadError: 'error-loading-video'
  }
 } as const

@@ -110,4 +101,3 @@ export type TestIdValue =
      (id: string) => string
    >
  | (typeof TestIds.user)[keyof typeof TestIds.user]
-  | (typeof TestIds.errors)[keyof typeof TestIds.errors]
--- a/browser_tests/tests/colorPalette.spec.ts
+++ b/browser_tests/tests/colorPalette.spec.ts
@@ -38,13 +38,16 @@ const customColorPalettes = {
        CLEAR_BACKGROUND_COLOR: '#222222',
        NODE_TITLE_COLOR: 'rgba(255,255,255,.75)',
        NODE_SELECTED_TITLE_COLOR: '#FFF',
+        NODE_TEXT_SIZE: 14,
        NODE_TEXT_COLOR: '#b8b8b8',
+        NODE_SUBTEXT_SIZE: 12,
        NODE_DEFAULT_COLOR: 'rgba(0,0,0,.8)',
        NODE_DEFAULT_BGCOLOR: 'rgba(22,22,22,.8)',
        NODE_DEFAULT_BOXCOLOR: 'rgba(255,255,255,.75)',
        NODE_DEFAULT_SHAPE: 'box',
        NODE_BOX_OUTLINE_COLOR: '#236692',
        DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0)',
+        DEFAULT_GROUP_FONT: 24,
        WIDGET_BGCOLOR: '#242424',
        WIDGET_OUTLINE_COLOR: '#333',
        WIDGET_TEXT_COLOR: '#a3a3a8',
@@ -99,13 +102,16 @@ const customColorPalettes = {
        CLEAR_BACKGROUND_COLOR: '#000',
        NODE_TITLE_COLOR: 'rgba(255,255,255,.75)',
        NODE_SELECTED_TITLE_COLOR: '#FFF',
+        NODE_TEXT_SIZE: 14,
        NODE_TEXT_COLOR: '#b8b8b8',
+        NODE_SUBTEXT_SIZE: 12,
        NODE_DEFAULT_COLOR: 'rgba(0,0,0,.8)',
        NODE_DEFAULT_BGCOLOR: 'rgba(22,22,22,.8)',
        NODE_DEFAULT_BOXCOLOR: 'rgba(255,255,255,.75)',
        NODE_DEFAULT_SHAPE: 'box',
        NODE_BOX_OUTLINE_COLOR: '#236692',
        DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0)',
+        DEFAULT_GROUP_FONT: 24,
        WIDGET_BGCOLOR: '#242424',
        WIDGET_OUTLINE_COLOR: '#333',
        WIDGET_TEXT_COLOR: '#a3a3a8',
--- a/browser_tests/tests/defaultKeybindings.spec.ts
+++ b/browser_tests/tests/defaultKeybindings.spec.ts
@@ -1,318 +0,0 @@
-import { expect } from '@playwright/test'
-
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-async function pressKeyAndExpectRequest(
-  comfyPage: ComfyPage,
-  key: string,
-  urlPattern: string,
-  method: string = 'POST'
-) {
-  const requestPromise = comfyPage.page.waitForRequest(
-    (req) => req.url().includes(urlPattern) && req.method() === method,
-    { timeout: 5000 }
-  )
-  await comfyPage.page.keyboard.press(key)
-  return requestPromise
-}
-
-test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
-  test.describe('Sidebar Toggle Shortcuts', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-      await comfyPage.canvas.click({ position: { x: 400, y: 400 } })
-      await comfyPage.nextFrame()
-    })
-
-    const sidebarTabs = [
-      { key: 'KeyW', tabId: 'workflows', label: 'workflows' },
-      { key: 'KeyN', tabId: 'node-library', label: 'node library' },
-      { key: 'KeyM', tabId: 'model-library', label: 'model library' },
-      { key: 'KeyA', tabId: 'assets', label: 'assets' }
-    ] as const
-
-    for (const { key, tabId, label } of sidebarTabs) {
-      test(`'${key}' toggles ${label} sidebar`, async ({ comfyPage }) => {
-        const selectedButton = comfyPage.page.locator(
-          `.${tabId}-tab-button.side-bar-button-selected`
-        )
-
-        await expect(selectedButton).not.toBeVisible()
-
-        await comfyPage.canvas.press(key)
-        await comfyPage.nextFrame()
-        await expect(selectedButton).toBeVisible()
-
-        await comfyPage.canvas.press(key)
-        await comfyPage.nextFrame()
-        await expect(selectedButton).not.toBeVisible()
-      })
-    }
-  })
-
-  test.describe('Canvas View Controls', () => {
-    test("'Alt+=' zooms in", async ({ comfyPage }) => {
-      const initialScale = await comfyPage.canvasOps.getScale()
-
-      await comfyPage.canvas.press('Alt+Equal')
-      await comfyPage.nextFrame()
-
-      const newScale = await comfyPage.canvasOps.getScale()
-      expect(newScale).toBeGreaterThan(initialScale)
-    })
-
-    test("'Alt+-' zooms out", async ({ comfyPage }) => {
-      const initialScale = await comfyPage.canvasOps.getScale()
-
-      await comfyPage.canvas.press('Alt+Minus')
-      await comfyPage.nextFrame()
-
-      const newScale = await comfyPage.canvasOps.getScale()
-      expect(newScale).toBeLessThan(initialScale)
-    })
-
-    test("'.' fits view to nodes", async ({ comfyPage }) => {
-      // Set scale very small so fit-view will zoom back to fit nodes
-      await comfyPage.canvasOps.setScale(0.1)
-      const scaleBefore = await comfyPage.canvasOps.getScale()
-      expect(scaleBefore).toBeCloseTo(0.1, 1)
-
-      // Click canvas to ensure focus is within graph-canvas-container
-      await comfyPage.canvas.click({ position: { x: 400, y: 400 } })
-      await comfyPage.nextFrame()
-
-      await comfyPage.canvas.press('Period')
-      await comfyPage.nextFrame()
-
-      const scaleAfter = await comfyPage.canvasOps.getScale()
-      expect(scaleAfter).toBeGreaterThan(scaleBefore)
-    })
-
-    test("'h' locks canvas", async ({ comfyPage }) => {
-      expect(await comfyPage.canvasOps.isReadOnly()).toBe(false)
-
-      await comfyPage.canvas.press('KeyH')
-      await comfyPage.nextFrame()
-
-      expect(await comfyPage.canvasOps.isReadOnly()).toBe(true)
-    })
-
-    test("'v' unlocks canvas", async ({ comfyPage }) => {
-      // Lock first
-      await comfyPage.command.executeCommand('Comfy.Canvas.Lock')
-      await comfyPage.nextFrame()
-      expect(await comfyPage.canvasOps.isReadOnly()).toBe(true)
-
-      await comfyPage.canvas.press('KeyV')
-      await comfyPage.nextFrame()
-
-      expect(await comfyPage.canvasOps.isReadOnly()).toBe(false)
-    })
-  })
-
-  test.describe('Node State Toggles', () => {
-    test("'Alt+c' collapses and expands selected nodes", async ({
-      comfyPage
-    }) => {
-      const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
-      expect(nodes.length).toBeGreaterThan(0)
-      const node = nodes[0]
-
-      await node.click('title')
-      await comfyPage.nextFrame()
-
-      expect(await node.isCollapsed()).toBe(false)
-
-      await comfyPage.canvas.press('Alt+KeyC')
-      await comfyPage.nextFrame()
-      expect(await node.isCollapsed()).toBe(true)
-
-      await comfyPage.canvas.press('Alt+KeyC')
-      await comfyPage.nextFrame()
-      expect(await node.isCollapsed()).toBe(false)
-    })
-
-    test("'Ctrl+m' mutes and unmutes selected nodes", async ({ comfyPage }) => {
-      const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
-      expect(nodes.length).toBeGreaterThan(0)
-      const node = nodes[0]
-
-      await node.click('title')
-      await comfyPage.nextFrame()
-
-      // Normal mode is ALWAYS (0)
-      const getMode = () =>
-        comfyPage.page.evaluate((nodeId) => {
-          return window.app!.canvas.graph!.getNodeById(nodeId)!.mode
-        }, node.id)
-
-      expect(await getMode()).toBe(0)
-
-      await comfyPage.canvas.press('Control+KeyM')
-      await comfyPage.nextFrame()
-      // NEVER (2) = muted
-      expect(await getMode()).toBe(2)
-
-      await comfyPage.canvas.press('Control+KeyM')
-      await comfyPage.nextFrame()
-      expect(await getMode()).toBe(0)
-    })
-  })
-
-  test.describe('Mode and Panel Toggles', () => {
-    test("'Alt+m' toggles app mode", async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
-      // Set up linearData so app mode has something to show
-      await comfyPage.appMode.enterAppModeWithInputs([])
-      await expect(comfyPage.appMode.linearWidgets).toBeVisible()
-
-      // Toggle off with Alt+m
-      await comfyPage.page.keyboard.press('Alt+KeyM')
-      await comfyPage.nextFrame()
-      await expect(comfyPage.appMode.linearWidgets).not.toBeVisible()
-
-      // Toggle on again
-      await comfyPage.page.keyboard.press('Alt+KeyM')
-      await comfyPage.nextFrame()
-      await expect(comfyPage.appMode.linearWidgets).toBeVisible()
-    })
-
-    test("'Alt+Shift+m' toggles minimap", async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-      await comfyPage.settings.setSetting('Comfy.Minimap.Visible', true)
-      await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
-      await comfyPage.workflow.loadWorkflow('default')
-
-      const minimap = comfyPage.page.locator('.litegraph-minimap')
-      await expect(minimap).toBeVisible()
-
-      await comfyPage.page.keyboard.press('Alt+Shift+KeyM')
-      await comfyPage.nextFrame()
-      await expect(minimap).not.toBeVisible()
-
-      await comfyPage.page.keyboard.press('Alt+Shift+KeyM')
-      await comfyPage.nextFrame()
-      await expect(minimap).toBeVisible()
-    })
-
-    test("'Ctrl+`' toggles terminal/logs panel", async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
-      await expect(comfyPage.bottomPanel.root).not.toBeVisible()
-
-      await comfyPage.page.keyboard.press('Control+Backquote')
-      await comfyPage.nextFrame()
-      await expect(comfyPage.bottomPanel.root).toBeVisible()
-
-      await comfyPage.page.keyboard.press('Control+Backquote')
-      await comfyPage.nextFrame()
-      await expect(comfyPage.bottomPanel.root).not.toBeVisible()
-    })
-  })
-
-  test.describe('Queue and Execution', () => {
-    test("'Ctrl+Enter' queues prompt", async ({ comfyPage }) => {
-      const request = await pressKeyAndExpectRequest(
-        comfyPage,
-        'Control+Enter',
-        '/prompt',
-        'POST'
-      )
-      expect(request.url()).toContain('/prompt')
-    })
-
-    test("'Ctrl+Shift+Enter' queues prompt to front", async ({ comfyPage }) => {
-      const request = await pressKeyAndExpectRequest(
-        comfyPage,
-        'Control+Shift+Enter',
-        '/prompt',
-        'POST'
-      )
-      const body = request.postDataJSON()
-      expect(body.front).toBe(true)
-    })
-
-    test("'Ctrl+Alt+Enter' interrupts execution", async ({ comfyPage }) => {
-      const request = await pressKeyAndExpectRequest(
-        comfyPage,
-        'Control+Alt+Enter',
-        '/interrupt',
-        'POST'
-      )
-      expect(request.url()).toContain('/interrupt')
-    })
-  })
-
-  test.describe('File Operations', () => {
-    test("'Ctrl+s' triggers save workflow", async ({ comfyPage }) => {
-      // On a new unsaved workflow, Ctrl+s triggers Save As dialog.
-      // The dialog appearing proves the keybinding was intercepted by the app.
-      await comfyPage.page.keyboard.press('Control+s')
-      await comfyPage.nextFrame()
-
-      // The Save As dialog should appear (p-dialog overlay)
-      const dialogOverlay = comfyPage.page.locator('.p-dialog-mask')
-      await expect(dialogOverlay).toBeVisible({ timeout: 3000 })
-
-      // Dismiss the dialog
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-    })
-
-    test("'Ctrl+o' triggers open workflow", async ({ comfyPage }) => {
-      // Ctrl+o calls app.ui.loadFile() which clicks a hidden file input.
-      // Detect the file input click via an event listener.
-      await comfyPage.page.evaluate(() => {
-        window.TestCommand = false
-        const fileInputs =
-          document.querySelectorAll<HTMLInputElement>('input[type="file"]')
-        for (const input of fileInputs) {
-          input.addEventListener('click', () => {
-            window.TestCommand = true
-          })
-        }
-      })
-
-      await comfyPage.page.keyboard.press('Control+o')
-      await comfyPage.nextFrame()
-
-      expect(await comfyPage.page.evaluate(() => window.TestCommand)).toBe(true)
-    })
-  })
-
-  test.describe('Graph Operations', () => {
-    test("'Ctrl+Shift+e' converts selection to subgraph", async ({
-      comfyPage
-    }) => {
-      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-      expect(initialCount).toBeGreaterThan(1)
-
-      // Select all nodes
-      await comfyPage.canvas.press('Control+a')
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.keyboard.press('Control+Shift+KeyE')
-      await comfyPage.nextFrame()
-
-      // After conversion, node count should decrease
-      // (multiple nodes replaced by single subgraph node)
-      await expect
-        .poll(() => comfyPage.nodeOps.getGraphNodesCount(), {
-          timeout: 5000
-        })
-        .toBeLessThan(initialCount)
-    })
-
-    test("'r' refreshes node definitions", async ({ comfyPage }) => {
-      const request = await pressKeyAndExpectRequest(
-        comfyPage,
-        'KeyR',
-        '/object_info',
-        'GET'
-      )
-      expect(request.url()).toContain('/object_info')
-    })
-  })
-})
--- a/browser_tests/tests/dialog.spec.ts
+++ b/browser_tests/tests/dialog.spec.ts
@@ -28,7 +28,7 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
    )
    await expect(errorOverlay).toBeVisible()

-    const missingNodesTitle = errorOverlay.getByText(/Missing Node Packs/)
+    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
    await expect(missingNodesTitle).toBeVisible()
  })

@@ -42,13 +42,11 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
    )
    await expect(errorOverlay).toBeVisible()

-    const missingNodesTitle = errorOverlay.getByText(/Missing Node Packs/)
+    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
    await expect(missingNodesTitle).toBeVisible()

    // Click "See Errors" to open the errors tab and verify subgraph node content
-    await errorOverlay
-      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
-      .click()
+    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
    await expect(errorOverlay).not.toBeVisible()

    const missingNodeCard = comfyPage.page.getByTestId(
@@ -77,9 +75,7 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
    await expect(errorOverlay).toBeVisible()

    // Click "See Errors" to open the right side panel errors tab
-    await errorOverlay
-      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
-      .click()
+    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
    await expect(errorOverlay).not.toBeVisible()

    // Verify MissingNodeCard is rendered in the errors tab
@@ -169,19 +165,17 @@ test.describe('Error actions in Errors Tab', { tag: '@ui' }, () => {
      TestIds.dialogs.errorOverlay
    )
    await expect(errorOverlay).toBeVisible()
-    await errorOverlay
-      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
-      .click()
+    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
    await expect(errorOverlay).not.toBeVisible()

    // Verify Find on GitHub button is present in the error card
-    const findOnGithubButton = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorCardFindOnGithub
-    )
+    const findOnGithubButton = comfyPage.page.getByRole('button', {
+      name: 'Find on GitHub'
+    })
    await expect(findOnGithubButton).toBeVisible()

    // Verify Copy button is present in the error card
-    const copyButton = comfyPage.page.getByTestId(TestIds.dialogs.errorCardCopy)
+    const copyButton = comfyPage.page.getByRole('button', { name: 'Copy' })
    await expect(copyButton).toBeVisible()
  })
 })
@@ -210,7 +204,7 @@ test.describe('Missing models in Error Tab', () => {
    )
    await expect(errorOverlay).toBeVisible()

-    const missingModelsTitle = errorOverlay.getByText(/Missing Models/)
+    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
    await expect(missingModelsTitle).toBeVisible()
  })

@@ -226,7 +220,7 @@ test.describe('Missing models in Error Tab', () => {
    )
    await expect(errorOverlay).toBeVisible()

-    const missingModelsTitle = errorOverlay.getByText(/Missing Models/)
+    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
    await expect(missingModelsTitle).toBeVisible()
  })

@@ -237,10 +231,13 @@ test.describe('Missing models in Error Tab', () => {
      'missing/model_metadata_widget_mismatch'
    )

-    await expect(
-      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-    ).not.toBeVisible()
-    await expect(comfyPage.page.getByText(/Missing Models/)).not.toBeVisible()
+    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
+    await expect(missingModelsTitle).not.toBeVisible()
+
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
+    await expect(errorOverlay).not.toBeVisible()
  })

  // Flaky test after parallelization
--- a/browser_tests/tests/interaction.spec.ts
+++ b/browser_tests/tests/interaction.spec.ts
@@ -764,13 +764,13 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
    )
  })

-  const generateUniqueFilename = (extension = '') =>
-    `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
-
  test.describe('Restore all open workflows on reload', () => {
    let workflowA: string
    let workflowB: string

+    const generateUniqueFilename = (extension = '') =>
+      `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
+
    test.beforeEach(async ({ comfyPage }) => {
      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')

@@ -829,82 +829,6 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
    })
  })

-  test.describe('Restore workflow tabs after browser restart', () => {
-    let workflowA: string
-    let workflowB: string
-
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
-      workflowA = generateUniqueFilename()
-      await comfyPage.menu.topbar.saveWorkflow(workflowA)
-      workflowB = generateUniqueFilename()
-      await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
-      await comfyPage.menu.topbar.saveWorkflow(workflowB)
-
-      // Wait for localStorage fallback pointers to be written
-      await comfyPage.page.waitForFunction(() => {
-        for (let i = 0; i < window.localStorage.length; i++) {
-          const key = window.localStorage.key(i)
-          if (key?.startsWith('Comfy.Workflow.LastOpenPaths:')) {
-            return true
-          }
-        }
-        return false
-      })
-
-      // Simulate browser restart: clear sessionStorage (lost on close)
-      // but keep localStorage (survives browser restart)
-      await comfyPage.page.evaluate(() => {
-        sessionStorage.clear()
-      })
-      await comfyPage.setup({ clearStorage: false })
-    })
-
-    test('Restores topbar workflow tabs after browser restart', async ({
-      comfyPage
-    }) => {
-      await comfyPage.settings.setSetting(
-        'Comfy.Workflow.WorkflowTabsPosition',
-        'Topbar'
-      )
-      // Wait for both restored tabs to render (localStorage fallback is async)
-      await expect(
-        comfyPage.page.locator('.workflow-tabs .workflow-label', {
-          hasText: workflowA
-        })
-      ).toBeVisible()
-
-      const tabs = await comfyPage.menu.topbar.getTabNames()
-      const activeWorkflowName = await comfyPage.menu.topbar.getActiveTabName()
-
-      expect(tabs).toEqual(expect.arrayContaining([workflowA, workflowB]))
-      expect(tabs.indexOf(workflowA)).toBeLessThan(tabs.indexOf(workflowB))
-      expect(activeWorkflowName).toEqual(workflowB)
-    })
-
-    test('Restores sidebar workflows after browser restart', async ({
-      comfyPage
-    }) => {
-      await comfyPage.settings.setSetting(
-        'Comfy.Workflow.WorkflowTabsPosition',
-        'Sidebar'
-      )
-      await comfyPage.menu.workflowsTab.open()
-      const openWorkflows =
-        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
-      const activeWorkflowName =
-        await comfyPage.menu.workflowsTab.getActiveWorkflowName()
-      expect(openWorkflows).toEqual(
-        expect.arrayContaining([workflowA, workflowB])
-      )
-      expect(openWorkflows.indexOf(workflowA)).toBeLessThan(
-        openWorkflows.indexOf(workflowB)
-      )
-      expect(activeWorkflowName).toEqual(workflowB)
-    })
-  })
-
  test('Auto fit view after loading workflow', async ({ comfyPage }) => {
    await comfyPage.settings.setSetting(
      'Comfy.EnableWorkflowViewRestore',
--- a/browser_tests/tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-linux.png
--- a/browser_tests/tests/interaction.spec.ts-snapshots/group-selected-nodes-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/group-selected-nodes-chromium-linux.png
--- a/browser_tests/tests/interaction.spec.ts-snapshots/pinned-all-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/pinned-all-chromium-linux.png
--- a/browser_tests/tests/interaction.spec.ts-snapshots/selected-all-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/selected-all-chromium-linux.png
--- a/browser_tests/tests/interaction.spec.ts-snapshots/unpinned-all-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/unpinned-all-chromium-linux.png
--- a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-group-group-added-chromium-linux.png
+++ b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-group-group-added-chromium-linux.png
--- a/browser_tests/tests/subgraphSlotAlignment.spec.ts
+++ b/browser_tests/tests/subgraphSlotAlignment.spec.ts
@@ -1,132 +0,0 @@
-import { readFileSync } from 'fs'
-import { resolve } from 'path'
-
-import { expect } from '@playwright/test'
-
-import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-interface SlotMeasurement {
-  key: string
-  offsetX: number
-  offsetY: number
-}
-
-interface NodeSlotData {
-  nodeId: string
-  isSubgraph: boolean
-  nodeW: number
-  nodeH: number
-  slots: SlotMeasurement[]
-}
-
-/**
- * Regression test for link misalignment on SubgraphNodes when loading
- * workflows with workflowRendererVersion: "LG".
- *
- * Root cause: ensureCorrectLayoutScale scales nodes by 1.2x for LG workflows,
- * and fitView() updates lgCanvas.ds immediately. The Vue TransformPane's CSS
- * transform lags by a frame, causing clientPosToCanvasPos to produce wrong
- * slot offsets. The fix uses DOM-relative measurement instead.
- */
-test.describe(
-  'Subgraph slot alignment after LG layout scale',
-  { tag: ['@subgraph', '@canvas'] },
-  () => {
-    test('slot positions stay within node bounds after loading LG workflow', async ({
-      comfyPage
-    }) => {
-      const SLOT_BOUNDS_MARGIN = 20
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-
-      const workflowPath = resolve(
-        import.meta.dirname,
-        '../assets/subgraphs/basic-subgraph.json'
-      )
-      const workflow = JSON.parse(
-        readFileSync(workflowPath, 'utf-8')
-      ) as ComfyWorkflowJSON
-      workflow.extra = {
-        ...workflow.extra,
-        workflowRendererVersion: 'LG'
-      }
-
-      await comfyPage.page.evaluate(
-        (wf) =>
-          window.app!.loadGraphData(wf as ComfyWorkflowJSON, true, true, null, {
-            openSource: 'template'
-          }),
-        workflow
-      )
-      await comfyPage.nextFrame()
-
-      // Wait for slot elements to appear in DOM
-      await comfyPage.page.locator('[data-slot-key]').first().waitFor()
-
-      const result: NodeSlotData[] = await comfyPage.page.evaluate(() => {
-        const nodes = window.app!.graph._nodes
-        const slotData: NodeSlotData[] = []
-
-        for (const node of nodes) {
-          const nodeId = String(node.id)
-          const nodeEl = document.querySelector(
-            `[data-node-id="${nodeId}"]`
-          ) as HTMLElement | null
-          if (!nodeEl) continue
-
-          const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
-          if (slotEls.length === 0) continue
-
-          const slots: SlotMeasurement[] = []
-
-          const nodeRect = nodeEl.getBoundingClientRect()
-          for (const slotEl of slotEls) {
-            const slotRect = slotEl.getBoundingClientRect()
-            const slotKey = (slotEl as HTMLElement).dataset.slotKey ?? 'unknown'
-            slots.push({
-              key: slotKey,
-              offsetX: slotRect.left + slotRect.width / 2 - nodeRect.left,
-              offsetY: slotRect.top + slotRect.height / 2 - nodeRect.top
-            })
-          }
-
-          slotData.push({
-            nodeId,
-            isSubgraph: !!node.isSubgraphNode?.(),
-            nodeW: nodeRect.width,
-            nodeH: nodeRect.height,
-            slots
-          })
-        }
-
-        return slotData
-      })
-
-      const subgraphNodes = result.filter((n) => n.isSubgraph)
-      expect(subgraphNodes.length).toBeGreaterThan(0)
-
-      for (const node of subgraphNodes) {
-        for (const slot of node.slots) {
-          expect(
-            slot.offsetX,
-            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
-          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
-          expect(
-            slot.offsetX,
-            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
-          ).toBeLessThanOrEqual(node.nodeW + SLOT_BOUNDS_MARGIN)
-
-          expect(
-            slot.offsetY,
-            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
-          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
-          expect(
-            slot.offsetY,
-            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
-          ).toBeLessThanOrEqual(node.nodeH + SLOT_BOUNDS_MARGIN)
-        }
-      }
-    })
-  }
-)
--- a/browser_tests/tests/templates.spec.ts
+++ b/browser_tests/tests/templates.spec.ts
@@ -206,31 +206,6 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
    await expect(nav).toBeVisible() // Nav should be visible at tablet size
  })

-  test(
-    'select components in filter bar render correctly',
-    { tag: '@screenshot' },
-    async ({ comfyPage }) => {
-      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
-      await expect(comfyPage.templates.content).toBeVisible()
-
-      // Wait for filter bar select components to render
-      const dialog = comfyPage.page.getByRole('dialog')
-      const sortBySelect = dialog.getByRole('combobox', { name: /Sort/ })
-      await expect(sortBySelect).toBeVisible()
-
-      // Screenshot the filter bar containing MultiSelect and SingleSelect
-      const filterBar = sortBySelect.locator(
-        'xpath=ancestor::div[contains(@class, "justify-between")]'
-      )
-      await expect(filterBar).toHaveScreenshot(
-        'template-filter-bar-select-components.png',
-        {
-          mask: [comfyPage.page.locator('.p-toast')]
-        }
-      )
-    }
-  )
-
  test(
    'template cards descriptions adjust height dynamically',
    { tag: '@screenshot' },
--- a/browser_tests/tests/templates.spec.ts-snapshots/template-filter-bar-select-components-chromium-linux.png
+++ b/browser_tests/tests/templates.spec.ts-snapshots/template-filter-bar-select-components-chromium-linux.png
--- a/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png
+++ b/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png
--- a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png
--- a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts
@@ -47,46 +47,6 @@ test.describe('Vue Node Moving', () => {
    }
  )

-  test('should not move node when pointer moves less than drag threshold', async ({
-    comfyPage
-  }) => {
-    const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
-
-    // Move only 2px — below the 3px drag threshold in useNodePointerInteractions
-    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(headerPos.x + 2, headerPos.y + 1, {
-      steps: 5
-    })
-    await comfyPage.page.mouse.up()
-    await comfyPage.nextFrame()
-
-    const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
-    expect(afterPos.x).toBeCloseTo(headerPos.x, 0)
-    expect(afterPos.y).toBeCloseTo(headerPos.y, 0)
-
-    // The small movement should have selected the node, not dragged it
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
-  })
-
-  test('should move node when pointer moves beyond drag threshold', async ({
-    comfyPage
-  }) => {
-    const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
-
-    // Move 50px — well beyond the 3px drag threshold
-    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(headerPos.x + 50, headerPos.y + 50, {
-      steps: 20
-    })
-    await comfyPage.page.mouse.up()
-    await comfyPage.nextFrame()
-
-    const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
-    await expectPosChanged(headerPos, afterPos)
-  })
-
  test(
    '@mobile should allow moving nodes by dragging on touch devices',
    { tag: '@screenshot' },
--- a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts
+++ b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts
@@ -2,7 +2,6 @@ import {
  comfyExpect as expect,
  comfyPageFixture as test
 } from '../../../../fixtures/ComfyPage'
-import { TestIds } from '../../../../fixtures/selectors'

 test.describe('Vue Upload Widgets', () => {
  test.beforeEach(async ({ comfyPage }) => {
@@ -20,14 +19,10 @@ test.describe('Vue Upload Widgets', () => {
    ).not.toBeVisible()

    await expect
-      .poll(() =>
-        comfyPage.page.getByTestId(TestIds.errors.imageLoadError).count()
-      )
+      .poll(() => comfyPage.page.getByText('Error loading image').count())
      .toBeGreaterThan(0)
    await expect
-      .poll(() =>
-        comfyPage.page.getByTestId(TestIds.errors.videoLoadError).count()
-      )
+      .poll(() => comfyPage.page.getByText('Error loading video').count())
      .toBeGreaterThan(0)
  })
 })
--- a/browser_tests/tests/vueNodes/widgets/text/multilineStringWidget.spec.ts
+++ b/browser_tests/tests/vueNodes/widgets/text/multilineStringWidget.spec.ts
@@ -46,16 +46,4 @@ test.describe('Vue Multiline String Widget', () => {

    await expect(textarea).toHaveValue('Keep me around')
  })
-  test('should use native context menu when focused', async ({ comfyPage }) => {
-    const textarea = getFirstMultilineStringWidget(comfyPage)
-    const vueContextMenu = comfyPage.page.locator('.p-contextmenu')
-
-    await textarea.focus()
-    await textarea.click({ button: 'right' })
-    await expect(vueContextMenu).not.toBeVisible()
-    await textarea.blur()
-
-    await textarea.click({ button: 'right' })
-    await expect(vueContextMenu).toBeVisible()
-  })
 })
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -27,17 +27,6 @@ const config: KnipConfig = {
    },
    'packages/ingest-types': {
      project: ['src/**/*.{js,ts}']
-    },
-    'apps/website': {
-      entry: [
-        'src/pages/**/*.astro',
-        'src/layouts/**/*.astro',
-        'src/components/**/*.vue',
-        'src/styles/global.css',
-        'astro.config.ts'
-      ],
-      project: ['src/**/*.{astro,vue,ts}', '*.{js,ts,mjs}'],
-      ignoreDependencies: ['@comfyorg/design-system', '@vercel/analytics']
    }
  },
  ignoreBinaries: ['python3'],
--- a/packages/design-system/src/css/base.css
+++ b/packages/design-system/src/css/base.css
@@ -1,46 +0,0 @@
-/*
- * Design System Base — Brand tokens + fonts only.
- * For marketing sites that don't use PrimeVue or the node editor.
- * Import the full style.css instead for the desktop app.
- */
-
-@import './fonts.css';
-
-@theme {
-  /* Font Families */
-  --font-inter: 'Inter', sans-serif;
-
-  /* Palette Colors */
-  --color-charcoal-100: #55565e;
-  --color-charcoal-200: #494a50;
-  --color-charcoal-300: #3c3d42;
-  --color-charcoal-400: #313235;
-  --color-charcoal-500: #2d2e32;
-  --color-charcoal-600: #262729;
-  --color-charcoal-700: #202121;
-  --color-charcoal-800: #171718;
-
-  --color-neutral-550: #636363;
-
-  --color-ash-300: #bbbbbb;
-  --color-ash-500: #828282;
-  --color-ash-800: #444444;
-
-  --color-smoke-100: #f3f3f3;
-  --color-smoke-200: #e9e9e9;
-  --color-smoke-300: #e1e1e1;
-  --color-smoke-400: #d9d9d9;
-  --color-smoke-500: #c5c5c5;
-  --color-smoke-600: #b4b4b4;
-  --color-smoke-700: #a0a0a0;
-  --color-smoke-800: #8a8a8a;
-
-  --color-white: #ffffff;
-  --color-black: #000000;
-
-  /* Brand Colors */
-  --color-electric-400: #f0ff41;
-  --color-sapphire-700: #172dd7;
-  --color-brand-yellow: var(--color-electric-400);
-  --color-brand-blue: var(--color-sapphire-700);
-}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,7 +4,6 @@ packages:

 catalog:
  '@alloc/quick-lru': ^5.2.0
-  '@astrojs/vue': ^5.0.0
  '@comfyorg/comfyui-electron-types': 0.6.2
  '@eslint/js': ^9.39.1
  '@formkit/auto-animate': ^0.9.0
@@ -51,7 +50,6 @@ catalog:
  '@types/node': ^24.1.0
  '@types/semver': ^7.7.0
  '@types/three': ^0.169.0
-  '@vercel/analytics': ^2.0.1
  '@vitejs/plugin-vue': ^6.0.0
  '@vitest/coverage-v8': ^4.0.16
  '@vitest/ui': ^4.0.16
@@ -60,7 +58,6 @@ catalog:
  '@vueuse/integrations': ^14.2.0
  '@webgpu/types': ^0.1.66
  algoliasearch: ^5.21.0
-  astro: ^5.10.0
  axios: ^1.13.5
  cross-env: ^10.1.0
  cva: 1.0.0-beta.4
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,10 +9,13 @@ import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
 import { computed, onMounted, onUnmounted, watch } from 'vue'

+import { useI18n } from 'vue-i18n'
+
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { isDesktop } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI } from '@/utils/envUtil'
@@ -20,6 +23,7 @@ import { parsePreloadError } from '@/utils/preloadErrorUtil'
 import { useDialogService } from '@/services/dialogService'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'

+const { t } = useI18n()
 const workspaceStore = useWorkspaceStore()
 app.extensionManager = useWorkspaceStore()

@@ -94,17 +98,12 @@ onMounted(() => {
        }
      })
    }
-    // Disabled: Third-party custom node extensions frequently trigger this toast
-    // (e.g., bare "vue" imports, wrong relative paths to scripts/app.js, missing
-    // core dependencies). These are plugin bugs, not ComfyUI core failures, but
-    // the generic error message alarms users and offers no actionable guidance.
-    // The console.error above still logs the details for developers to debug.
-    // useToastStore().add({
-    //   severity: 'error',
-    //   summary: t('g.preloadErrorTitle'),
-    //   detail: t('g.preloadError'),
-    //   life: 10000
-    // })
+    useToastStore().add({
+      severity: 'error',
+      summary: t('g.preloadErrorTitle'),
+      detail: t('g.preloadError'),
+      life: 10000
+    })
  })

  // Capture resource load failures (CSS, scripts) in non-localhost distributions
--- a/src/assets/palettes/arc.json
+++ b/src/assets/palettes/arc.json
@@ -34,7 +34,9 @@
      "CLEAR_BACKGROUND_COLOR": "#2b2f38",
      "NODE_TITLE_COLOR": "#b2b7bd",
      "NODE_SELECTED_TITLE_COLOR": "#FFF",
+      "NODE_TEXT_SIZE": 14,
      "NODE_TEXT_COLOR": "#AAA",
+      "NODE_SUBTEXT_SIZE": 12,
      "NODE_DEFAULT_COLOR": "#2b2f38",
      "NODE_DEFAULT_BGCOLOR": "#242730",
      "NODE_DEFAULT_BOXCOLOR": "#6e7581",
@@ -43,6 +45,7 @@
      "NODE_BYPASS_BGCOLOR": "#FF00FF",
      "NODE_ERROR_COLOUR": "#E00",
      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+      "DEFAULT_GROUP_FONT": 22,
      "WIDGET_BGCOLOR": "#2b2f38",
      "WIDGET_OUTLINE_COLOR": "#6e7581",
      "WIDGET_TEXT_COLOR": "#DDD",
--- a/src/assets/palettes/dark.json
+++ b/src/assets/palettes/dark.json
@@ -25,8 +25,10 @@
      "CLEAR_BACKGROUND_COLOR": "#141414",
      "NODE_TITLE_COLOR": "#999",
      "NODE_SELECTED_TITLE_COLOR": "#FFF",
+      "NODE_TEXT_SIZE": 14,
      "NODE_TEXT_COLOR": "#AAA",
      "NODE_TEXT_HIGHLIGHT_COLOR": "#FFF",
+      "NODE_SUBTEXT_SIZE": 12,
      "NODE_DEFAULT_COLOR": "#333",
      "NODE_DEFAULT_BGCOLOR": "#353535",
      "NODE_DEFAULT_BOXCOLOR": "#666",
@@ -35,6 +37,7 @@
      "NODE_BYPASS_BGCOLOR": "#FF00FF",
      "NODE_ERROR_COLOUR": "#E00",
      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+      "DEFAULT_GROUP_FONT": 24,
      "WIDGET_BGCOLOR": "#222",
      "WIDGET_OUTLINE_COLOR": "#666",
      "WIDGET_TEXT_COLOR": "#DDD",
--- a/src/assets/palettes/github.json
+++ b/src/assets/palettes/github.json
@@ -34,7 +34,9 @@
      "CLEAR_BACKGROUND_COLOR": "#040506",
      "NODE_TITLE_COLOR": "#999",
      "NODE_SELECTED_TITLE_COLOR": "#e5eaf0",
+      "NODE_TEXT_SIZE": 14,
      "NODE_TEXT_COLOR": "#bcc2c8",
+      "NODE_SUBTEXT_SIZE": 12,
      "NODE_DEFAULT_COLOR": "#161b22",
      "NODE_DEFAULT_BGCOLOR": "#13171d",
      "NODE_DEFAULT_BOXCOLOR": "#30363d",
@@ -43,6 +45,7 @@
      "NODE_BYPASS_BGCOLOR": "#FF00FF",
      "NODE_ERROR_COLOUR": "#E00",
      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+      "DEFAULT_GROUP_FONT": 24,
      "WIDGET_BGCOLOR": "#161b22",
      "WIDGET_OUTLINE_COLOR": "#30363d",
      "WIDGET_TEXT_COLOR": "#bcc2c8",
--- a/src/assets/palettes/light.json
+++ b/src/assets/palettes/light.json
@@ -26,8 +26,10 @@
      "CLEAR_BACKGROUND_COLOR": "lightgray",
      "NODE_TITLE_COLOR": "#222",
      "NODE_SELECTED_TITLE_COLOR": "#000",
+      "NODE_TEXT_SIZE": 14,
      "NODE_TEXT_COLOR": "#444",
      "NODE_TEXT_HIGHLIGHT_COLOR": "#1e293b",
+      "NODE_SUBTEXT_SIZE": 12,
      "NODE_DEFAULT_COLOR": "#F7F7F7",
      "NODE_DEFAULT_BGCOLOR": "#F5F5F5",
      "NODE_DEFAULT_BOXCOLOR": "#CCC",
@@ -36,6 +38,7 @@
      "NODE_BYPASS_BGCOLOR": "#FF00FF",
      "NODE_ERROR_COLOUR": "#E00",
      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.1)",
+      "DEFAULT_GROUP_FONT": 24,
      "WIDGET_BGCOLOR": "#D4D4D4",
      "WIDGET_OUTLINE_COLOR": "#999",
      "WIDGET_TEXT_COLOR": "#222",
--- a/src/assets/palettes/nord.json
+++ b/src/assets/palettes/nord.json
@@ -34,7 +34,9 @@
      "CLEAR_BACKGROUND_COLOR": "#212732",
      "NODE_TITLE_COLOR": "#999",
      "NODE_SELECTED_TITLE_COLOR": "#e5eaf0",
+      "NODE_TEXT_SIZE": 14,
      "NODE_TEXT_COLOR": "#bcc2c8",
+      "NODE_SUBTEXT_SIZE": 12,
      "NODE_DEFAULT_COLOR": "#2e3440",
      "NODE_DEFAULT_BGCOLOR": "#161b22",
      "NODE_DEFAULT_BOXCOLOR": "#545d70",
@@ -43,6 +45,7 @@
      "NODE_BYPASS_BGCOLOR": "#FF00FF",
      "NODE_ERROR_COLOUR": "#E00",
      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+      "DEFAULT_GROUP_FONT": 24,
      "WIDGET_BGCOLOR": "#2e3440",
      "WIDGET_OUTLINE_COLOR": "#545d70",
      "WIDGET_TEXT_COLOR": "#bcc2c8",
--- a/src/assets/palettes/solarized.json
+++ b/src/assets/palettes/solarized.json
@@ -19,7 +19,9 @@
    "litegraph_base": {
      "NODE_TITLE_COLOR": "#fdf6e3",
      "NODE_SELECTED_TITLE_COLOR": "#A9D400",
+      "NODE_TEXT_SIZE": 14,
      "NODE_TEXT_COLOR": "#657b83",
+      "NODE_SUBTEXT_SIZE": 12,
      "NODE_DEFAULT_COLOR": "#094656",
      "NODE_DEFAULT_BGCOLOR": "#073642",
      "NODE_DEFAULT_BOXCOLOR": "#839496",
@@ -28,6 +30,7 @@
      "NODE_BYPASS_BGCOLOR": "#FF00FF",
      "NODE_ERROR_COLOUR": "#E00",
      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+      "DEFAULT_GROUP_FONT": 24,
      "WIDGET_BGCOLOR": "#002b36",
      "WIDGET_OUTLINE_COLOR": "#839496",
      "WIDGET_TEXT_COLOR": "#fdf6e3",
--- a/src/components/dialog/content/error/FindIssueButton.vue
+++ b/src/components/dialog/content/error/FindIssueButton.vue
@@ -19,7 +19,10 @@ const props = defineProps<{

 const queryString = computed(() => props.errorMessage + ' is:issue')

-function openGitHubIssues() {
+/**
+ * Open GitHub issues search and track telemetry.
+ */
+const openGitHubIssues = () => {
  useTelemetry()?.trackUiButtonClicked({
    button_id: 'error_dialog_find_existing_issues_clicked'
  })
--- a/src/components/error/ErrorOverlay.vue
+++ b/src/components/error/ErrorOverlay.vue
@@ -49,12 +49,7 @@
          <Button variant="muted-textonly" size="unset" @click="dismiss">
            {{ t('g.dismiss') }}
          </Button>
-          <Button
-            variant="secondary"
-            size="lg"
-            data-testid="error-overlay-see-errors"
-            @click="seeErrors"
-          >
+          <Button variant="secondary" size="lg" @click="seeErrors">
            {{
              appMode ? t('linearMode.error.goto') : t('errorOverlay.seeErrors')
            }}
--- a/src/components/graph/TitleEditor.vue
+++ b/src/components/graph/TitleEditor.vue
@@ -84,9 +84,7 @@ watch(
        pos: group.pos,
        size: [group.size[0], group.titleHeight]
      })
-      inputFontStyle.value = {
-        fontSize: `${LiteGraph.GROUP_TEXT_SIZE * scale}px`
-      }
+      inputFontStyle.value = { fontSize: `${group.font_size * scale}px` }
    } else if (target instanceof LGraphNode) {
      const node = target
      const [x, y] = node.getBounding()
--- a/src/components/input/MultiSelect.test.ts
+++ b/src/components/input/MultiSelect.test.ts
@@ -1,60 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import MultiSelect from './MultiSelect.vue'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      g: {
-        multiSelectDropdown: 'Multi-select dropdown',
-        noResultsFound: 'No results found',
-        search: 'Search',
-        clearAll: 'Clear all',
-        itemsSelected: 'Items selected'
-      }
-    }
-  }
-})
-
-describe('MultiSelect', () => {
-  function createWrapper() {
-    return mount(MultiSelect, {
-      attachTo: document.body,
-      global: {
-        plugins: [i18n]
-      },
-      props: {
-        modelValue: [],
-        label: 'Category',
-        options: [
-          { name: 'One', value: 'one' },
-          { name: 'Two', value: 'two' }
-        ]
-      }
-    })
-  }
-
-  it('keeps open-state border styling available while the dropdown is open', async () => {
-    const wrapper = createWrapper()
-
-    const trigger = wrapper.get('button[aria-haspopup="listbox"]')
-
-    expect(trigger.classes()).toContain(
-      'data-[state=open]:border-node-component-border'
-    )
-    expect(trigger.attributes('aria-expanded')).toBe('false')
-
-    await trigger.trigger('click')
-    await nextTick()
-
-    expect(trigger.attributes('aria-expanded')).toBe('true')
-    expect(trigger.attributes('data-state')).toBe('open')
-
-    wrapper.unmount()
-  })
-})
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -1,215 +1,207 @@
 <template>
-  <ComboboxRoot
+  <!--
+    Note: Unlike SingleSelect, we don't need an explicit options prop because:
+    1. Our value template only shows a static label (not dynamic based on selection)
+    2. We display a count badge instead of actual selected labels
+    3. All PrimeVue props (including options) are passed via v-bind="$attrs"
+    option-label="name" is required because our option template directly accesses option.name
+    max-selected-labels="0" is required to show count badge instead of selected item labels
+  -->
+  <MultiSelect
    v-model="selectedItems"
-    multiple
-    by="value"
-    :disabled
-    ignore-filter
-    :reset-search-term-on-select="false"
+    v-bind="{ ...$attrs, options: filteredOptions }"
+    option-label="name"
+    unstyled
+    :max-selected-labels="0"
+    :pt="{
+      root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
+        class: cn(
+          'relative inline-flex cursor-pointer select-none',
+          size === 'md' ? 'h-8' : 'h-10',
+          'rounded-lg bg-secondary-background text-base-foreground',
+          'transition-all duration-200 ease-in-out',
+          'hover:bg-secondary-background-hover',
+          'border-[2.5px] border-solid',
+          selectedCount > 0 ? 'border-base-foreground' : 'border-transparent',
+          'focus-within:border-base-foreground',
+          props.disabled &&
+            'cursor-default opacity-30 hover:bg-secondary-background'
+        )
+      }),
+      labelContainer: {
+        class: cn(
+          'flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap',
+          size === 'md' ? 'pl-3' : 'pl-4'
+        )
+      },
+      label: {
+        class: 'p-0'
+      },
+      dropdown: {
+        class: 'flex shrink-0 cursor-pointer items-center justify-center px-3'
+      },
+      header: () => ({
+        class:
+          showSearchBox || showSelectedCount || showClearButton
+            ? 'block'
+            : 'hidden'
+      }),
+      // Overlay & list visuals unchanged
+      overlay: {
+        class: cn(
+          'mt-2 rounded-lg p-2',
+          'bg-base-background',
+          'text-base-foreground',
+          'border border-solid border-border-default'
+        )
+      },
+      listContainer: () => ({
+        style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
+        class: 'scrollbar-custom'
+      }),
+      list: {
+        class: 'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
+      },
+      // Option row hover and focus tone
+      option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
+        class: cn(
+          'flex h-10 cursor-pointer items-center gap-2 rounded-lg px-2',
+          'hover:bg-secondary-background-hover',
+          // Add focus/highlight state for keyboard navigation
+          context?.focused &&
+            'bg-secondary-background-selected hover:bg-secondary-background-selected'
+        )
+      }),
+      // Hide built-in checkboxes entirely via PT (no :deep)
+      pcHeaderCheckbox: {
+        root: { class: 'hidden' },
+        style: { display: 'none' }
+      },
+      pcOptionCheckbox: {
+        root: { class: 'hidden' },
+        style: { display: 'none' }
+      },
+      emptyMessage: {
+        class: 'px-3 pb-4 text-sm text-muted-foreground'
+      }
+    }"
+    :aria-label="label || t('g.multiSelectDropdown')"
+    role="combobox"
+    :aria-expanded="false"
+    aria-haspopup="listbox"
+    :tabindex="0"
  >
-    <ComboboxAnchor as-child>
-      <ComboboxTrigger
-        v-bind="$attrs"
-        :aria-label="label || t('g.multiSelectDropdown')"
-        :class="
-          cn(
-            'relative inline-flex cursor-pointer items-center select-none',
-            size === 'md' ? 'h-8' : 'h-10',
-            'rounded-lg bg-secondary-background text-base-foreground',
-            'transition-all duration-200 ease-in-out',
-            'hover:bg-secondary-background-hover',
-            'border-[2.5px] border-solid border-transparent',
-            selectedCount > 0
-              ? 'border-base-foreground'
-              : 'focus-visible:border-node-component-border data-[state=open]:border-node-component-border',
-            disabled &&
-              'cursor-default opacity-30 hover:bg-secondary-background'
-          )
-        "
-      >
+    <template
+      v-if="showSearchBox || showSelectedCount || showClearButton"
+      #header
+    >
+      <div class="flex flex-col px-2 pt-2 pb-0">
+        <SearchInput
+          v-if="showSearchBox"
+          v-model="searchQuery"
+          :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
+          :placeholder="searchPlaceholder"
+          size="sm"
+        />
        <div
-          :class="
-            cn(
-              'flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap',
-              size === 'md' ? 'pl-3' : 'pl-4'
-            )
-          "
+          v-if="showSelectedCount || showClearButton"
+          class="mt-2 flex items-center justify-between"
        >
-          <span :class="size === 'md' ? 'text-xs' : 'text-sm'">
-            {{ label }}
-          </span>
          <span
-            v-if="selectedCount > 0"
-            class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-base-foreground text-xs font-semibold text-base-background"
+            v-if="showSelectedCount"
+            class="px-1 text-sm text-base-foreground"
          >
-            {{ selectedCount }}
+            {{
+              selectedCount > 0
+                ? $t('g.itemsSelected', { selectedCount })
+                : $t('g.itemSelected', { selectedCount })
+            }}
          </span>
+          <Button
+            v-if="showClearButton"
+            variant="textonly"
+            size="md"
+            @click.stop="selectedItems = []"
+          >
+            {{ $t('g.clearAll') }}
+          </Button>
        </div>
-        <div
-          class="flex shrink-0 cursor-pointer items-center justify-center px-3"
-        >
-          <i class="icon-[lucide--chevron-down] text-muted-foreground" />
-        </div>
-      </ComboboxTrigger>
-    </ComboboxAnchor>
+        <div class="my-4 h-px bg-border-default"></div>
+      </div>
+    </template>

-    <ComboboxPortal>
-      <ComboboxContent
-        position="popper"
-        :side-offset="8"
-        align="start"
+    <!-- Trigger value (keep text scale identical) -->
+    <template #value>
+      <span :class="size === 'md' ? 'text-xs' : 'text-sm'">
+        {{ label }}
+      </span>
+      <span
+        v-if="selectedCount > 0"
+        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-base-foreground text-xs font-semibold text-base-background"
+      >
+        {{ selectedCount }}
+      </span>
+    </template>
+
+    <!-- Chevron size identical to current -->
+    <template #dropdownicon>
+      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
+    </template>
+
+    <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->
+    <template #option="slotProps">
+      <div
+        role="button"
+        class="flex cursor-pointer items-center gap-2"
        :style="popoverStyle"
-        :class="
-          cn(
-            'z-3000 overflow-hidden',
-            'rounded-lg p-2',
-            'bg-base-background text-base-foreground',
-            'border border-solid border-border-default',
-            'shadow-md',
-            'data-[state=closed]:animate-out data-[state=open]:animate-in',
-            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-            'data-[side=bottom]:slide-in-from-top-2'
-          )
-        "
-        @focus-outside="preventFocusDismiss"
      >
        <div
-          v-if="showSearchBox || showSelectedCount || showClearButton"
-          class="flex flex-col px-2 pt-2 pb-0"
-        >
-          <div
-            v-if="showSearchBox"
-            :class="
-              cn(
-                'flex items-center gap-2 rounded-lg border border-solid border-border-default px-3 py-1.5',
-                (showSelectedCount || showClearButton) && 'mb-2'
-              )
-            "
-          >
-            <i
-              class="icon-[lucide--search] shrink-0 text-sm text-muted-foreground"
-            />
-            <ComboboxInput
-              v-model="searchQuery"
-              :placeholder="searchPlaceholder ?? t('g.search')"
-              class="w-full border-none bg-transparent text-sm outline-none"
-            />
-          </div>
-          <div
-            v-if="showSelectedCount || showClearButton"
-            class="mt-2 flex items-center justify-between"
-          >
-            <span
-              v-if="showSelectedCount"
-              class="px-1 text-sm text-base-foreground"
-            >
-              {{ $t('g.itemsSelected', { count: selectedCount }) }}
-            </span>
-            <Button
-              v-if="showClearButton"
-              variant="textonly"
-              size="md"
-              @click.stop="selectedItems = []"
-            >
-              {{ $t('g.clearAll') }}
-            </Button>
-          </div>
-          <div class="my-4 h-px bg-border-default" />
-        </div>
-
-        <ComboboxViewport
+          class="flex size-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
          :class="
-            cn(
-              'flex flex-col gap-0 p-0 text-sm',
-              'scrollbar-custom overflow-y-auto',
-              'min-w-(--reka-combobox-trigger-width)'
-            )
+            slotProps.selected
+              ? 'bg-primary-background'
+              : 'bg-secondary-background'
          "
-          :style="{ maxHeight: `min(${listMaxHeight}, 50vh)` }"
        >
-          <ComboboxItem
-            v-for="opt in filteredOptions"
-            :key="opt.value"
-            :value="opt"
-            :class="
-              cn(
-                'group flex h-10 shrink-0 cursor-pointer items-center gap-2 rounded-lg px-2 outline-none',
-                'hover:bg-secondary-background-hover',
-                'data-highlighted:bg-secondary-background-selected data-highlighted:hover:bg-secondary-background-selected'
-              )
-            "
-          >
-            <div
-              class="flex size-4 shrink-0 items-center justify-center rounded-sm transition-all duration-200 group-data-[state=checked]:bg-primary-background group-data-[state=unchecked]:bg-secondary-background [&>span]:flex"
-            >
-              <ComboboxItemIndicator>
-                <i
-                  class="icon-[lucide--check] text-xs font-bold text-base-foreground"
-                />
-              </ComboboxItemIndicator>
-            </div>
-            <span>{{ opt.name }}</span>
-          </ComboboxItem>
-          <ComboboxEmpty class="px-3 pb-4 text-sm text-muted-foreground">
-            {{ $t('g.noResultsFound') }}
-          </ComboboxEmpty>
-        </ComboboxViewport>
-      </ComboboxContent>
-    </ComboboxPortal>
-  </ComboboxRoot>
+          <i
+            v-if="slotProps.selected"
+            class="text-bold icon-[lucide--check] text-xs text-base-foreground"
+          />
+        </div>
+        <span>
+          {{ slotProps.option.name }}
+        </span>
+      </div>
+    </template>
+  </MultiSelect>
 </template>

 <script setup lang="ts">
 import { useFuse } from '@vueuse/integrations/useFuse'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
-import type { FocusOutsideEvent } from 'reka-ui'
-import {
-  ComboboxAnchor,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxItemIndicator,
-  ComboboxPortal,
-  ComboboxRoot,
-  ComboboxTrigger,
-  ComboboxViewport
-} from 'reka-ui'
-import { computed } from 'vue'
+import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
+import MultiSelect from 'primevue/multiselect'
+import { computed, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'

+import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'

 import type { SelectOption } from './types'

+type Option = SelectOption
+
 defineOptions({
  inheritAttrs: false
 })

-const {
-  label,
-  options = [],
-  size = 'lg',
-  disabled = false,
-  showSearchBox = false,
-  showSelectedCount = false,
-  showClearButton = false,
-  searchPlaceholder,
-  listMaxHeight = '28rem',
-  popoverMinWidth,
-  popoverMaxWidth
-} = defineProps<{
+interface Props {
  /** Input label shown on the trigger button */
  label?: string
-  /** Available options */
-  options?: SelectOption[]
  /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
  size?: 'lg' | 'md'
-  /** Disable the select */
-  disabled?: boolean
  /** Show search box in the panel header */
  showSearchBox?: boolean
  /** Show selected count text in the panel header */
@@ -224,9 +216,22 @@ const {
  popoverMinWidth?: string
  /** Maximum width of the popover (default: auto) */
  popoverMaxWidth?: string
-}>()
+  // Note: options prop is intentionally omitted.
+  // It's passed via $attrs to maximize PrimeVue API compatibility
+}
+const {
+  label,
+  size = 'lg',
+  showSearchBox = false,
+  showSelectedCount = false,
+  showClearButton = false,
+  searchPlaceholder = 'Search...',
+  listMaxHeight = '28rem',
+  popoverMinWidth,
+  popoverMaxWidth
+} = defineProps<Props>()

-const selectedItems = defineModel<SelectOption[]>({
+const selectedItems = defineModel<Option[]>({
  required: true
 })
 const searchQuery = defineModel<string>('searchQuery', { default: '' })
@@ -234,16 +239,15 @@ const searchQuery = defineModel<string>('searchQuery', { default: '' })
 const { t } = useI18n()
 const selectedCount = computed(() => selectedItems.value.length)

-function preventFocusDismiss(event: FocusOutsideEvent) {
-  event.preventDefault()
-}
-
 const popoverStyle = usePopoverSizing({
  minWidth: popoverMinWidth,
  maxWidth: popoverMaxWidth
 })
+const attrs = useAttrs()
+const originalOptions = computed(() => (attrs.options as Option[]) || [])

-const fuseOptions: UseFuseOptions<SelectOption> = {
+// Use VueUse's useFuse for better reactivity and performance
+const fuseOptions: UseFuseOptions<Option> = {
  fuseOptions: {
    keys: ['name', 'value'],
    threshold: 0.3,
@@ -252,20 +256,23 @@ const fuseOptions: UseFuseOptions<SelectOption> = {
  matchAllWhenSearchEmpty: true
 }

-const { results } = useFuse(searchQuery, () => options, fuseOptions)
+const { results } = useFuse(searchQuery, originalOptions, fuseOptions)

+// Filter options based on search, but always include selected items
 const filteredOptions = computed(() => {
  if (!searchQuery.value || searchQuery.value.trim() === '') {
-    return options
+    return originalOptions.value
  }

+  // results.value already contains the search results from useFuse
  const searchResults = results.value.map(
-    (result: { item: SelectOption }) => result.item
+    (result: { item: Option }) => result.item
  )

+  // Include selected items that aren't in search results
  const selectedButNotInResults = selectedItems.value.filter(
    (item) =>
-      !searchResults.some((result: SelectOption) => result.value === item.value)
+      !searchResults.some((result: Option) => result.value === item.value)
  )

  return [...selectedButNotInResults, ...searchResults]
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -1,12 +1,21 @@
 <template>
-  <SelectRoot v-model="selectedItem" :disabled>
-    <SelectTrigger
-      v-bind="$attrs"
-      :aria-label="label || t('g.singleSelectDropdown')"
-      :aria-busy="loading || undefined"
-      :aria-invalid="invalid || undefined"
-      :class="
-        cn(
+  <!--
+    Note: We explicitly pass options here (not just via $attrs) because:
+    1. Our custom value template needs options to look up labels from values
+    2. PrimeVue's value slot only provides 'value' and 'placeholder', not the selected item's label
+    3. We need to maintain the icon slot functionality in the value template
+    option-label="name" is required because our option template directly accesses option.name
+  -->
+  <Select
+    v-model="selectedItem"
+    v-bind="$attrs"
+    :options="options"
+    option-label="name"
+    option-value="value"
+    unstyled
+    :pt="{
+      root: ({ props }: SelectPassThroughMethodOptions<SelectOption>) => ({
+        class: cn(
          'relative inline-flex cursor-pointer items-center select-none',
          size === 'md' ? 'h-8' : 'h-10',
          'rounded-lg',
@@ -14,107 +23,121 @@
          'transition-all duration-200 ease-in-out',
          'hover:bg-secondary-background-hover',
          'border-[2.5px] border-solid',
-          invalid ? 'border-destructive-background' : 'border-transparent',
-          'focus:border-node-component-border focus:outline-none',
-          'disabled:cursor-default disabled:opacity-30 disabled:hover:bg-secondary-background'
+          invalid
+            ? 'border-destructive-background'
+            : 'border-transparent focus-within:border-node-component-border',
+          props.disabled &&
+            'cursor-default opacity-30 hover:bg-secondary-background'
        )
-      "
-    >
+      }),
+      label: {
+        class: cn(
+          'flex flex-1 items-center py-2 whitespace-nowrap outline-hidden',
+          size === 'md' ? 'pl-3' : 'pl-4'
+        )
+      },
+      dropdown: {
+        class:
+          // Right chevron touch area
+          'flex shrink-0 items-center justify-center px-3 py-2'
+      },
+      overlay: {
+        class: cn(
+          'mt-2 rounded-lg p-2',
+          'bg-base-background text-base-foreground',
+          'border border-solid border-border-default'
+        )
+      },
+      listContainer: () => ({
+        style: `max-height: min(${listMaxHeight}, 50vh)`,
+        class: 'scrollbar-custom'
+      }),
+      list: {
+        class:
+          // Same list tone/size as MultiSelect
+          'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
+      },
+      option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
+        class: cn(
+          // Row layout
+          'flex items-center justify-between gap-3 rounded-sm px-2 py-3',
+          'hover:bg-secondary-background-hover',
+          // Add focus state for keyboard navigation
+          context.focused && 'bg-secondary-background-hover',
+          // Selected state + check icon
+          context.selected &&
+            'bg-secondary-background-selected hover:bg-secondary-background-selected'
+        )
+      }),
+      optionLabel: {
+        class: 'truncate'
+      },
+      optionGroupLabel: {
+        class: 'px-3 py-2 text-xs uppercase tracking-wide text-muted-foreground'
+      },
+      emptyMessage: {
+        class: 'px-3 py-2 text-sm text-muted-foreground'
+      }
+    }"
+    :aria-label="label || t('g.singleSelectDropdown')"
+    :aria-busy="loading || undefined"
+    :aria-invalid="invalid || undefined"
+    role="combobox"
+    :aria-expanded="false"
+    aria-haspopup="listbox"
+    :tabindex="0"
+  >
+    <!-- Trigger value -->
+    <template #value="slotProps">
      <div
        :class="
-          cn(
-            'flex flex-1 items-center gap-2 overflow-hidden py-2',
-            size === 'md' ? 'pl-3 text-xs' : 'pl-4 text-sm'
-          )
+          cn('flex items-center gap-2', size === 'md' ? 'text-xs' : 'text-sm')
        "
      >
        <i
          v-if="loading"
-          class="icon-[lucide--loader-circle] shrink-0 animate-spin text-muted-foreground"
+          class="icon-[lucide--loader-circle] animate-spin text-muted-foreground"
        />
        <slot v-else name="icon" />
-        <SelectValue :placeholder="label" class="truncate" />
-      </div>
-      <div
-        class="flex shrink-0 cursor-pointer items-center justify-center px-3"
-      >
-        <i class="icon-[lucide--chevron-down] text-muted-foreground" />
-      </div>
-    </SelectTrigger>
-
-    <SelectPortal>
-      <SelectContent
-        position="popper"
-        :side-offset="8"
-        align="start"
-        :style="optionStyle"
-        :class="
-          cn(
-            'z-3000 overflow-hidden',
-            'rounded-lg p-2',
-            'bg-base-background text-base-foreground',
-            'border border-solid border-border-default',
-            'shadow-md',
-            'min-w-(--reka-select-trigger-width)',
-            'data-[state=closed]:animate-out data-[state=open]:animate-in',
-            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-            'data-[side=bottom]:slide-in-from-top-2'
-          )
-        "
-      >
-        <SelectViewport
-          :style="{ maxHeight: `min(${listMaxHeight}, 50vh)` }"
-          class="scrollbar-custom w-full"
+        <span
+          v-if="slotProps.value !== null && slotProps.value !== undefined"
+          class="text-base-foreground"
        >
-          <SelectItem
-            v-for="opt in options"
-            :key="opt.value"
-            :value="opt.value"
-            :class="
-              cn(
-                'relative flex w-full cursor-pointer items-center justify-between select-none',
-                'gap-3 rounded-sm px-2 py-3 text-sm outline-none',
-                'hover:bg-secondary-background-hover',
-                'focus:bg-secondary-background-hover',
-                'data-[state=checked]:bg-secondary-background-selected',
-                'data-[state=checked]:hover:bg-secondary-background-selected'
-              )
-            "
-          >
-            <SelectItemText class="truncate">
-              {{ opt.name }}
-            </SelectItemText>
-            <SelectItemIndicator
-              class="flex shrink-0 items-center justify-center"
-            >
-              <i
-                class="icon-[lucide--check] text-base-foreground"
-                aria-hidden="true"
-              />
-            </SelectItemIndicator>
-          </SelectItem>
-        </SelectViewport>
-      </SelectContent>
-    </SelectPortal>
-  </SelectRoot>
+          {{ getLabel(slotProps.value) }}
+        </span>
+        <span v-else class="text-base-foreground">
+          {{ label }}
+        </span>
+      </div>
+    </template>
+
+    <!-- Trigger caret (hidden when loading) -->
+    <template #dropdownicon>
+      <i
+        v-if="!loading"
+        class="icon-[lucide--chevron-down] text-muted-foreground"
+      />
+    </template>
+
+    <!-- Option row -->
+    <template #option="{ option, selected }">
+      <div
+        class="flex w-full items-center justify-between gap-3"
+        :style="optionStyle"
+      >
+        <span class="truncate">{{ option.name }}</span>
+        <i v-if="selected" class="icon-[lucide--check] text-base-foreground" />
+      </div>
+    </template>
+  </Select>
 </template>

 <script setup lang="ts">
-import {
-  SelectContent,
-  SelectItem,
-  SelectItemIndicator,
-  SelectItemText,
-  SelectPortal,
-  SelectRoot,
-  SelectTrigger,
-  SelectValue,
-  SelectViewport
-} from 'reka-ui'
+import type { SelectPassThroughMethodOptions } from 'primevue/select'
+import Select from 'primevue/select'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

-import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'

 import type { SelectOption } from './types'
@@ -129,12 +152,16 @@ const {
  size = 'lg',
  invalid = false,
  loading = false,
-  disabled = false,
  listMaxHeight = '28rem',
  popoverMinWidth,
  popoverMaxWidth
 } = defineProps<{
  label?: string
+  /**
+   * Required for displaying the selected item's label.
+   * Cannot rely on $attrs alone because we need to access options
+   * in getLabel() to map values to their display names.
+   */
  options?: SelectOption[]
  /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
  size?: 'lg' | 'md'
@@ -142,8 +169,6 @@ const {
  invalid?: boolean
  /** Show loading spinner instead of chevron */
  loading?: boolean
-  /** Disable the select */
-  disabled?: boolean
  /** Maximum height of the dropdown panel (default: 28rem) */
  listMaxHeight?: string
  /** Minimum width of the popover (default: auto) */
@@ -156,8 +181,26 @@ const selectedItem = defineModel<string | undefined>({ required: true })

 const { t } = useI18n()

-const optionStyle = usePopoverSizing({
-  minWidth: popoverMinWidth,
-  maxWidth: popoverMaxWidth
+/**
+ * Maps a value to its display label.
+ * Necessary because PrimeVue's value slot doesn't provide the selected item's label,
+ * only the raw value. We need this to show the correct text when an item is selected.
+ */
+const getLabel = (val: string | null | undefined) => {
+  if (val == null) return label ?? ''
+  if (!options) return label ?? ''
+  const found = options.find((o) => o.value === val)
+  return found ? found.name : (label ?? '')
+}
+
+// Extract complex style logic from template
+const optionStyle = computed(() => {
+  if (!popoverMinWidth && !popoverMaxWidth) return undefined
+
+  const styles: string[] = []
+  if (popoverMinWidth) styles.push(`min-width: ${popoverMinWidth}`)
+  if (popoverMaxWidth) styles.push(`max-width: ${popoverMaxWidth}`)
+
+  return styles.join('; ')
 })
 </script>
--- a/src/components/rightSidePanel/RightSidePanel.vue
+++ b/src/components/rightSidePanel/RightSidePanel.vue
@@ -9,15 +9,12 @@ import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useGraphHierarchy } from '@/composables/graph/useGraphHierarchy'
 import { st } from '@/i18n'
-import { app } from '@/scripts/app'
-import { getActiveGraphNodeIds } from '@/utils/graphTraversalUtil'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import type { RightSidePanelTab } from '@/stores/workspace/rightSidePanelStore'
 import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
@@ -41,21 +38,12 @@ import TabErrors from './errors/TabErrors.vue'
 const canvasStore = useCanvasStore()
 const executionErrorStore = useExecutionErrorStore()
 const missingModelStore = useMissingModelStore()
-const missingNodesErrorStore = useMissingNodesErrorStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()

-const { hasAnyError, allErrorExecutionIds } = storeToRefs(executionErrorStore)
-
-const activeMissingNodeGraphIds = computed<Set<string>>(() => {
-  if (!app.isGraphReady) return new Set()
-  return getActiveGraphNodeIds(
-    app.rootGraph,
-    canvasStore.currentGraph ?? app.rootGraph,
-    missingNodesErrorStore.missingAncestorExecutionIds
-  )
-})
+const { hasAnyError, allErrorExecutionIds, activeMissingNodeGraphIds } =
+  storeToRefs(executionErrorStore)

 const { activeMissingModelGraphIds } = storeToRefs(missingModelStore)

--- a/src/components/rightSidePanel/errors/ErrorNodeCard.test.ts
+++ b/src/components/rightSidePanel/errors/ErrorNodeCard.test.ts
@@ -237,11 +237,6 @@ describe('ErrorNodeCard.vue', () => {

    // Report is still generated with fallback log message
    expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
-    expect(mockGenerateErrorReport).toHaveBeenCalledWith(
-      expect.objectContaining({
-        serverLogs: 'Failed to retrieve server logs'
-      })
-    )
    expect(wrapper.text()).toContain('ComfyUI Error Report')
  })

--- a/src/components/rightSidePanel/errors/ErrorNodeCard.vue
+++ b/src/components/rightSidePanel/errors/ErrorNodeCard.vue
@@ -90,7 +90,6 @@
              variant="secondary"
              size="sm"
              class="h-8 w-2/3 justify-center gap-1 rounded-lg text-xs"
-              data-testid="error-card-find-on-github"
              @click="handleCheckGithub(error)"
            >
              {{ t('g.findOnGithub') }}
@@ -100,7 +99,6 @@
              variant="secondary"
              size="sm"
              class="h-8 w-1/3 justify-center gap-1 rounded-lg text-xs"
-              data-testid="error-card-copy"
              @click="handleCopyError(idx)"
            >
              {{ t('g.copy') }}
@@ -127,10 +125,12 @@
 import { useI18n } from 'vue-i18n'

 import Button from '@/components/ui/button/Button.vue'
+import { useExternalLink } from '@/composables/useExternalLink'
+import { useTelemetry } from '@/platform/telemetry'
+import { useCommandStore } from '@/stores/commandStore'
 import { cn } from '@/utils/tailwindUtil'

 import type { ErrorCardData, ErrorItem } from './types'
-import { useErrorActions } from './useErrorActions'
 import { useErrorReport } from './useErrorReport'

 const {
@@ -154,8 +154,10 @@ const emit = defineEmits<{
 }>()

 const { t } = useI18n()
+const telemetry = useTelemetry()
+const { staticUrls } = useExternalLink()
+const commandStore = useCommandStore()
 const { displayedDetailsMap } = useErrorReport(() => card)
-const { findOnGitHub, contactSupport: handleGetHelp } = useErrorActions()

 function handleLocateNode() {
  if (card.nodeId) {
@@ -176,6 +178,23 @@ function handleCopyError(idx: number) {
 }

 function handleCheckGithub(error: ErrorItem) {
-  findOnGitHub(error.message)
+  telemetry?.trackUiButtonClicked({
+    button_id: 'error_tab_find_existing_issues_clicked'
+  })
+  const query = encodeURIComponent(error.message + ' is:issue')
+  window.open(
+    `${staticUrls.githubIssues}?q=${query}`,
+    '_blank',
+    'noopener,noreferrer'
+  )
+}
+
+function handleGetHelp() {
+  telemetry?.trackHelpResourceClicked({
+    resource_type: 'help_feedback',
+    is_external: true,
+    source: 'error_dialog'
+  })
+  commandStore.execute('Comfy.ContactSupport')
 }
 </script>
--- a/src/components/rightSidePanel/errors/MissingNodeCard.test.ts
+++ b/src/components/rightSidePanel/errors/MissingNodeCard.test.ts
@@ -1,5 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
+import PrimeVue from 'primevue/config'
+import { ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'

@@ -40,25 +42,23 @@ vi.mock('@/stores/systemStatsStore', () => ({
  })
 }))

-const mockApplyChanges = vi.hoisted(() => vi.fn())
-const mockIsRestarting = vi.hoisted(() => ({ value: false }))
+const mockApplyChanges = vi.fn()
+const mockIsRestarting = ref(false)
 vi.mock('@/workbench/extensions/manager/composables/useApplyChanges', () => ({
  useApplyChanges: () => ({
-    get isRestarting() {
-      return mockIsRestarting.value
-    },
+    isRestarting: mockIsRestarting,
    applyChanges: mockApplyChanges
  })
 }))

-const mockIsPackInstalled = vi.hoisted(() => vi.fn(() => false))
+const mockIsPackInstalled = vi.fn(() => false)
 vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
  useComfyManagerStore: () => ({
    isPackInstalled: mockIsPackInstalled
  })
 }))

-const mockShouldShowManagerButtons = vi.hoisted(() => ({ value: false }))
+const mockShouldShowManagerButtons = { value: false }
 vi.mock('@/workbench/extensions/manager/composables/useManagerState', () => ({
  useManagerState: () => ({
    shouldShowManagerButtons: mockShouldShowManagerButtons
@@ -128,7 +128,7 @@ function mountCard(
      ...props
    },
    global: {
-      plugins: [createTestingPinia({ createSpy: vi.fn }), i18n],
+      plugins: [createTestingPinia({ createSpy: vi.fn }), PrimeVue, i18n],
      stubs: {
        DotSpinner: { template: '<span role="status" aria-label="loading" />' }
      }
--- a/src/components/rightSidePanel/errors/TabErrors.test.ts
+++ b/src/components/rightSidePanel/errors/TabErrors.test.ts
@@ -209,9 +209,12 @@ describe('TabErrors.vue', () => {
      }
    })

-    const copyButton = wrapper.find('[data-testid="error-card-copy"]')
-    expect(copyButton.exists()).toBe(true)
-    await copyButton.trigger('click')
+    // Find the copy button by text (rendered inside ErrorNodeCard)
+    const copyButton = wrapper
+      .findAll('button')
+      .find((btn) => btn.text().includes('Copy'))
+    expect(copyButton).toBeTruthy()
+    await copyButton!.trigger('click')

    expect(mockCopy).toHaveBeenCalledWith('Test message\n\nTest details')
  })
@@ -242,9 +245,5 @@ describe('TabErrors.vue', () => {
    // Should render in the dedicated runtime error panel, not inside accordion
    const runtimePanel = wrapper.find('[data-testid="runtime-error-panel"]')
    expect(runtimePanel.exists()).toBe(true)
-    // Verify the error message appears exactly once (not duplicated in accordion)
-    expect(
-      wrapper.text().match(/RuntimeError: Out of memory/g) ?? []
-    ).toHaveLength(1)
  })
 })
--- a/src/components/rightSidePanel/errors/TabErrors.vue
+++ b/src/components/rightSidePanel/errors/TabErrors.vue
@@ -53,7 +53,6 @@
        <PropertiesAccordionItem
          v-for="group in filteredGroups"
          :key="group.title"
-          :data-testid="'error-group-' + group.type.replaceAll('_', '-')"
          :collapse="isSectionCollapsed(group.title) && !isSearching"
          class="border-b border-interface-stroke"
          :size="getGroupSize(group)"
@@ -210,9 +209,12 @@
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'

+import { useCommandStore } from '@/stores/commandStore'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useFocusNode } from '@/composables/canvas/useFocusNode'
+import { useExternalLink } from '@/composables/useExternalLink'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
@@ -236,7 +238,6 @@ import Button from '@/components/ui/button/Button.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import { usePackInstall } from '@/workbench/extensions/manager/composables/nodePack/usePackInstall'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
-import { useErrorActions } from './useErrorActions'
 import { useErrorGroups } from './useErrorGroups'
 import type { SwapNodeGroup } from './useErrorGroups'
 import type { ErrorGroup } from './types'
@@ -245,7 +246,7 @@ import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacemen
 const { t } = useI18n()
 const { copyToClipboard } = useCopyToClipboard()
 const { focusNode, enterSubgraph } = useFocusNode()
-const { openGitHubIssues, contactSupport } = useErrorActions()
+const { staticUrls } = useExternalLink()
 const settingStore = useSettingStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const { shouldShowManagerButtons, shouldShowInstallButton, openManager } =
@@ -371,13 +372,13 @@ watch(
    if (!graphNodeId) return
    const prefix = `${graphNodeId}:`
    for (const group of allErrorGroups.value) {
-      if (group.type !== 'execution') continue
-
-      const hasMatch = group.cards.some(
-        (card) =>
-          card.graphNodeId === graphNodeId ||
-          (card.nodeId?.startsWith(prefix) ?? false)
-      )
+      const hasMatch =
+        group.type === 'execution' &&
+        group.cards.some(
+          (card) =>
+            card.graphNodeId === graphNodeId ||
+            (card.nodeId?.startsWith(prefix) ?? false)
+        )
      setSectionCollapsed(group.title, !hasMatch)
    }
    rightSidePanelStore.focusedErrorNodeId = null
@@ -417,4 +418,20 @@ function handleReplaceAll() {
 function handleEnterSubgraph(nodeId: string) {
  enterSubgraph(nodeId, errorNodeCache.value)
 }
+
+function openGitHubIssues() {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'error_tab_github_issues_clicked'
+  })
+  window.open(staticUrls.githubIssues, '_blank', 'noopener,noreferrer')
+}
+
+async function contactSupport() {
+  useTelemetry()?.trackHelpResourceClicked({
+    resource_type: 'help_feedback',
+    is_external: true,
+    source: 'error_dialog'
+  })
+  useCommandStore().execute('Comfy.ContactSupport')
+}
 </script>
--- a/src/components/rightSidePanel/errors/swapNodeGroups.test.ts
+++ b/src/components/rightSidePanel/errors/swapNodeGroups.test.ts
@@ -47,7 +47,7 @@ vi.mock('@/utils/executableGroupNodeDto', () => ({
  isGroupNode: vi.fn(() => false)
 }))

-import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useErrorGroups } from './useErrorGroups'

 function makeMissingNodeType(
@@ -80,7 +80,8 @@ describe('swapNodeGroups computed', () => {
  })

  function getSwapNodeGroups(nodeTypes: MissingNodeType[]) {
-    useMissingNodesErrorStore().surfaceMissingNodes(nodeTypes)
+    const store = useExecutionErrorStore()
+    store.surfaceMissingNodes(nodeTypes)

    const searchQuery = ref('')
    const t = (key: string) => key
--- a/src/components/rightSidePanel/errors/useErrorActions.ts
+++ b/src/components/rightSidePanel/errors/useErrorActions.ts
@@ -1,39 +0,0 @@
-import { useCommandStore } from '@/stores/commandStore'
-import { useExternalLink } from '@/composables/useExternalLink'
-import { useTelemetry } from '@/platform/telemetry'
-
-export function useErrorActions() {
-  const telemetry = useTelemetry()
-  const commandStore = useCommandStore()
-  const { staticUrls } = useExternalLink()
-
-  function openGitHubIssues() {
-    telemetry?.trackUiButtonClicked({
-      button_id: 'error_tab_github_issues_clicked'
-    })
-    window.open(staticUrls.githubIssues, '_blank', 'noopener,noreferrer')
-  }
-
-  function contactSupport() {
-    telemetry?.trackHelpResourceClicked({
-      resource_type: 'help_feedback',
-      is_external: true,
-      source: 'error_dialog'
-    })
-    void commandStore.execute('Comfy.ContactSupport')
-  }
-
-  function findOnGitHub(errorMessage: string) {
-    telemetry?.trackUiButtonClicked({
-      button_id: 'error_tab_find_existing_issues_clicked'
-    })
-    const query = encodeURIComponent(errorMessage + ' is:issue')
-    window.open(
-      `${staticUrls.githubIssues}?q=${query}`,
-      '_blank',
-      'noopener,noreferrer'
-    )
-  }
-
-  return { openGitHubIssues, contactSupport, findOnGitHub }
-}
--- a/src/components/rightSidePanel/errors/useErrorGroups.test.ts
+++ b/src/components/rightSidePanel/errors/useErrorGroups.test.ts
@@ -58,7 +58,6 @@ vi.mock(
 )

 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useErrorGroups } from './useErrorGroups'

 function makeMissingNodeType(
@@ -127,9 +126,8 @@ describe('useErrorGroups', () => {
    })

    it('groups non-replaceable nodes by cnrId', async () => {
-      const { groups } = createErrorGroups()
-      const missingNodesStore = useMissingNodesErrorStore()
-      missingNodesStore.setMissingNodeTypes([
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
        makeMissingNodeType('NodeA', { cnrId: 'pack-1' }),
        makeMissingNodeType('NodeB', { cnrId: 'pack-1', nodeId: '2' }),
        makeMissingNodeType('NodeC', { cnrId: 'pack-2', nodeId: '3' })
@@ -148,9 +146,8 @@ describe('useErrorGroups', () => {
    })

    it('excludes replaceable nodes from missingPackGroups', async () => {
-      const { groups } = createErrorGroups()
-      const missingNodesStore = useMissingNodesErrorStore()
-      missingNodesStore.setMissingNodeTypes([
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
        makeMissingNodeType('OldNode', {
          isReplaceable: true,
          replacement: { new_node_id: 'NewNode' }
@@ -167,9 +164,8 @@ describe('useErrorGroups', () => {
    })

    it('groups nodes without cnrId under null packId', async () => {
-      const { groups } = createErrorGroups()
-      const missingNodesStore = useMissingNodesErrorStore()
-      missingNodesStore.setMissingNodeTypes([
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
        makeMissingNodeType('UnknownNode', { nodeId: '1' }),
        makeMissingNodeType('AnotherUnknown', { nodeId: '2' })
      ])
@@ -181,9 +177,8 @@ describe('useErrorGroups', () => {
    })

    it('sorts groups alphabetically with null packId last', async () => {
-      const { groups } = createErrorGroups()
-      const missingNodesStore = useMissingNodesErrorStore()
-      missingNodesStore.setMissingNodeTypes([
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
        makeMissingNodeType('NodeA', { cnrId: 'zebra-pack' }),
        makeMissingNodeType('NodeB', { nodeId: '2' }),
        makeMissingNodeType('NodeC', { cnrId: 'alpha-pack', nodeId: '3' })
@@ -195,9 +190,8 @@ describe('useErrorGroups', () => {
    })

    it('sorts nodeTypes within each group alphabetically by type then nodeId', async () => {
-      const { groups } = createErrorGroups()
-      const missingNodesStore = useMissingNodesErrorStore()
-      missingNodesStore.setMissingNodeTypes([
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
        makeMissingNodeType('NodeB', { cnrId: 'pack-1', nodeId: '2' }),
        makeMissingNodeType('NodeA', { cnrId: 'pack-1', nodeId: '3' }),
        makeMissingNodeType('NodeA', { cnrId: 'pack-1', nodeId: '1' })
@@ -212,9 +206,8 @@ describe('useErrorGroups', () => {
    })

    it('handles string nodeType entries', async () => {
-      const { groups } = createErrorGroups()
-      const missingNodesStore = useMissingNodesErrorStore()
-      missingNodesStore.setMissingNodeTypes([
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
        'StringGroupNode' as unknown as MissingNodeType
      ])
      await nextTick()
@@ -231,9 +224,8 @@ describe('useErrorGroups', () => {
    })

    it('includes missing_node group when missing nodes exist', async () => {
-      const { groups } = createErrorGroups()
-      const missingNodesStore = useMissingNodesErrorStore()
-      missingNodesStore.setMissingNodeTypes([
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
        makeMissingNodeType('NodeA', { cnrId: 'pack-1' })
      ])
      await nextTick()
@@ -245,9 +237,8 @@ describe('useErrorGroups', () => {
    })

    it('includes swap_nodes group when replaceable nodes exist', async () => {
-      const { groups } = createErrorGroups()
-      const missingNodesStore = useMissingNodesErrorStore()
-      missingNodesStore.setMissingNodeTypes([
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
        makeMissingNodeType('OldNode', {
          isReplaceable: true,
          replacement: { new_node_id: 'NewNode' }
@@ -262,9 +253,8 @@ describe('useErrorGroups', () => {
    })

    it('includes both swap_nodes and missing_node when both exist', async () => {
-      const { groups } = createErrorGroups()
-      const missingNodesStore = useMissingNodesErrorStore()
-      missingNodesStore.setMissingNodeTypes([
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
        makeMissingNodeType('OldNode', {
          isReplaceable: true,
          replacement: { new_node_id: 'NewNode' }
@@ -282,9 +272,8 @@ describe('useErrorGroups', () => {
    })

    it('swap_nodes has lower priority than missing_node', async () => {
-      const { groups } = createErrorGroups()
-      const missingNodesStore = useMissingNodesErrorStore()
-      missingNodesStore.setMissingNodeTypes([
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
        makeMissingNodeType('OldNode', {
          isReplaceable: true,
          replacement: { new_node_id: 'NewNode' }
@@ -544,18 +533,13 @@ describe('useErrorGroups', () => {
    })

    it('includes missing node group title as message', async () => {
-      const { groups } = createErrorGroups()
-      const missingNodesStore = useMissingNodesErrorStore()
-      missingNodesStore.setMissingNodeTypes([
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
        makeMissingNodeType('NodeA', { cnrId: 'pack-1' })
      ])
      await nextTick()

-      const missingGroup = groups.allErrorGroups.value.find(
-        (g) => g.type === 'missing_node'
-      )
-      expect(missingGroup).toBeDefined()
-      expect(groups.groupedErrorMessages.value).toContain(missingGroup!.title)
+      expect(groups.groupedErrorMessages.value.length).toBeGreaterThan(0)
    })
  })

--- a/src/components/rightSidePanel/errors/useErrorGroups.ts
+++ b/src/components/rightSidePanel/errors/useErrorGroups.ts
@@ -5,7 +5,6 @@ import type { IFuseOptions } from 'fuse.js'

 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
@@ -196,8 +195,12 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
        cardIndex: ci,
        searchableNodeId: card.nodeId ?? '',
        searchableNodeTitle: card.nodeTitle ?? '',
-        searchableMessage: card.errors.map((e) => e.message).join(' '),
-        searchableDetails: card.errors.map((e) => e.details ?? '').join(' ')
+        searchableMessage: card.errors
+          .map((e: ErrorItem) => e.message)
+          .join(' '),
+        searchableDetails: card.errors
+          .map((e: ErrorItem) => e.details ?? '')
+          .join(' ')
      })
    }
  }
@@ -237,7 +240,6 @@ export function useErrorGroups(
  t: (key: string) => string
 ) {
  const executionErrorStore = useExecutionErrorStore()
-  const missingNodesStore = useMissingNodesErrorStore()
  const missingModelStore = useMissingModelStore()
  const canvasStore = useCanvasStore()
  const { inferPackFromNodeName } = useComfyRegistryStore()
@@ -283,7 +285,7 @@ export function useErrorGroups(

  const missingNodeCache = computed(() => {
    const map = new Map<string, LGraphNode>()
-    const nodeTypes = missingNodesStore.missingNodesError?.nodeTypes ?? []
+    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
    for (const nodeType of nodeTypes) {
      if (typeof nodeType === 'string') continue
      if (nodeType.nodeId == null) continue
@@ -405,7 +407,7 @@ export function useErrorGroups(
  const asyncResolvedIds = ref<Map<string, string | null>>(new Map())

  const pendingTypes = computed(() =>
-    (missingNodesStore.missingNodesError?.nodeTypes ?? []).filter(
+    (executionErrorStore.missingNodesError?.nodeTypes ?? []).filter(
      (n): n is Exclude<MissingNodeType, string> =>
        typeof n !== 'string' && !n.cnrId
    )
@@ -446,8 +448,6 @@ export function useErrorGroups(
      for (const r of results) {
        if (r.status === 'fulfilled') {
          final.set(r.value.type, r.value.packId)
-        } else {
-          console.warn('Failed to resolve pack ID:', r.reason)
        }
      }
      // Clear any remaining RESOLVING markers for failed lookups
@@ -459,18 +459,8 @@ export function useErrorGroups(
    { immediate: true }
  )

-  // Evict stale entries when missing nodes are cleared
-  watch(
-    () => missingNodesStore.missingNodesError,
-    (error) => {
-      if (!error && asyncResolvedIds.value.size > 0) {
-        asyncResolvedIds.value = new Map()
-      }
-    }
-  )
-
  const missingPackGroups = computed<MissingPackGroup[]>(() => {
-    const nodeTypes = missingNodesStore.missingNodesError?.nodeTypes ?? []
+    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
    const map = new Map<
      string | null,
      { nodeTypes: MissingNodeType[]; isResolving: boolean }
@@ -532,7 +522,7 @@ export function useErrorGroups(
  })

  const swapNodeGroups = computed<SwapNodeGroup[]>(() => {
-    const nodeTypes = missingNodesStore.missingNodesError?.nodeTypes ?? []
+    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
    const map = new Map<string, SwapNodeGroup>()

    for (const nodeType of nodeTypes) {
@@ -556,7 +546,7 @@ export function useErrorGroups(

  /** Builds an ErrorGroup from missingNodesError. Returns [] when none present. */
  function buildMissingNodeGroups(): ErrorGroup[] {
-    const error = missingNodesStore.missingNodesError
+    const error = executionErrorStore.missingNodesError
    if (!error) return []

    const groups: ErrorGroup[] = []
--- a/src/components/rightSidePanel/errors/useErrorReport.ts
+++ b/src/components/rightSidePanel/errors/useErrorReport.ts
@@ -2,8 +2,6 @@ import { computed, onMounted, onUnmounted, reactive, toValue } from 'vue'

 import type { MaybeRefOrGetter } from 'vue'

-import { until } from '@vueuse/core'
-
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
@@ -42,33 +40,24 @@ export function useErrorReport(cardSource: MaybeRefOrGetter<ErrorCardData>) {
    if (runtimeErrors.length === 0) return

    if (!systemStatsStore.systemStats) {
-      if (systemStatsStore.isLoading) {
-        await until(systemStatsStore.isLoading).toBe(false)
-      } else {
-        try {
-          await systemStatsStore.refetchSystemStats()
-        } catch (e) {
-          console.warn('Failed to fetch system stats for error report:', e)
-          return
-        }
+      try {
+        await systemStatsStore.refetchSystemStats()
+      } catch {
+        return
      }
    }
-    if (!systemStatsStore.systemStats || cancelled) return
+    if (cancelled || !systemStatsStore.systemStats) return
+
+    let logs: string
+    try {
+      logs = await api.getLogs()
+    } catch {
+      logs = 'Failed to retrieve server logs'
+    }

-    const logs = await api
-      .getLogs()
-      .catch(() => 'Failed to retrieve server logs')
    if (cancelled) return

-    const workflow = (() => {
-      try {
-        return app.rootGraph.serialize()
-      } catch (e) {
-        console.warn('Failed to serialize workflow for error report:', e)
-        return null
-      }
-    })()
-    if (!workflow) return
+    const workflow = app.rootGraph.serialize()

    for (const { error, idx } of runtimeErrors) {
      try {
@@ -83,8 +72,8 @@ export function useErrorReport(cardSource: MaybeRefOrGetter<ErrorCardData>) {
          workflow
        })
        enrichedDetails[idx] = report
-      } catch (e) {
-        console.warn('Failed to generate error report:', e)
+      } catch {
+        // Fallback: keep original error.details
      }
    }
  })
--- a/src/composables/graph/useErrorClearingHooks.test.ts
+++ b/src/composables/graph/useErrorClearingHooks.test.ts
@@ -315,45 +315,6 @@ describe('installErrorClearingHooks lifecycle', () => {
    cleanup()
    expect(graph.onNodeAdded).toBe(originalHook)
  })
-
-  it('restores original node callbacks when a node is removed', () => {
-    const graph = new LGraph()
-    const node = new LGraphNode('test')
-    node.addInput('clip', 'CLIP')
-    node.addWidget('number', 'steps', 20, () => undefined, {})
-    const originalOnConnectionsChange = vi.fn()
-    const originalOnWidgetChanged = vi.fn()
-    node.onConnectionsChange = originalOnConnectionsChange
-    node.onWidgetChanged = originalOnWidgetChanged
-    graph.add(node)
-
-    installErrorClearingHooks(graph)
-
-    // Callbacks should be chained (not the originals)
-    expect(node.onConnectionsChange).not.toBe(originalOnConnectionsChange)
-    expect(node.onWidgetChanged).not.toBe(originalOnWidgetChanged)
-
-    // Simulate node removal via the graph hook
-    graph.onNodeRemoved!(node)
-
-    // Original callbacks should be restored
-    expect(node.onConnectionsChange).toBe(originalOnConnectionsChange)
-    expect(node.onWidgetChanged).toBe(originalOnWidgetChanged)
-  })
-
-  it('does not double-wrap callbacks when installErrorClearingHooks is called twice', () => {
-    const graph = new LGraph()
-    const node = new LGraphNode('test')
-    node.addInput('clip', 'CLIP')
-    graph.add(node)
-
-    installErrorClearingHooks(graph)
-    const chainedAfterFirst = node.onConnectionsChange
-
-    // Install again on the same graph — should be a no-op for existing nodes
-    installErrorClearingHooks(graph)
-    expect(node.onConnectionsChange).toBe(chainedAfterFirst)
-  })
 })

 describe('clearWidgetRelatedErrors parameter routing', () => {
--- a/src/composables/graph/useErrorClearingHooks.ts
+++ b/src/composables/graph/useErrorClearingHooks.ts
@@ -35,22 +35,10 @@ function resolvePromotedExecId(

 const hookedNodes = new WeakSet<LGraphNode>()

-type OriginalCallbacks = {
-  onConnectionsChange: LGraphNode['onConnectionsChange']
-  onWidgetChanged: LGraphNode['onWidgetChanged']
-}
-
-const originalCallbacks = new WeakMap<LGraphNode, OriginalCallbacks>()
-
 function installNodeHooks(node: LGraphNode): void {
  if (hookedNodes.has(node)) return
  hookedNodes.add(node)

-  originalCallbacks.set(node, {
-    onConnectionsChange: node.onConnectionsChange,
-    onWidgetChanged: node.onWidgetChanged
-  })
-
  node.onConnectionsChange = useChainCallback(
    node.onConnectionsChange,
    function (type, slotIndex, isConnected) {
@@ -94,15 +82,6 @@ function installNodeHooks(node: LGraphNode): void {
  )
 }

-function restoreNodeHooks(node: LGraphNode): void {
-  const originals = originalCallbacks.get(node)
-  if (!originals) return
-  node.onConnectionsChange = originals.onConnectionsChange
-  node.onWidgetChanged = originals.onWidgetChanged
-  originalCallbacks.delete(node)
-  hookedNodes.delete(node)
-}
-
 function installNodeHooksRecursive(node: LGraphNode): void {
  installNodeHooks(node)
  if (node.isSubgraphNode?.()) {
@@ -112,15 +91,6 @@ function installNodeHooksRecursive(node: LGraphNode): void {
  }
 }

-function restoreNodeHooksRecursive(node: LGraphNode): void {
-  restoreNodeHooks(node)
-  if (node.isSubgraphNode?.()) {
-    for (const innerNode of node.subgraph._nodes ?? []) {
-      restoreNodeHooksRecursive(innerNode)
-    }
-  }
-}
-
 export function installErrorClearingHooks(graph: LGraph): () => void {
  for (const node of graph._nodes ?? []) {
    installNodeHooksRecursive(node)
@@ -132,17 +102,7 @@ export function installErrorClearingHooks(graph: LGraph): () => void {
    originalOnNodeAdded?.call(this, node)
  }

-  const originalOnNodeRemoved = graph.onNodeRemoved
-  graph.onNodeRemoved = function (node: LGraphNode) {
-    restoreNodeHooksRecursive(node)
-    originalOnNodeRemoved?.call(this, node)
-  }
-
  return () => {
-    for (const node of graph._nodes ?? []) {
-      restoreNodeHooksRecursive(node)
-    }
    graph.onNodeAdded = originalOnNodeAdded || undefined
-    graph.onNodeRemoved = originalOnNodeRemoved || undefined
  }
 }
--- a/src/composables/graph/useNodeErrorFlagSync.ts
+++ b/src/composables/graph/useNodeErrorFlagSync.ts
@@ -1,111 +0,0 @@
-import type { Ref } from 'vue'
-import { computed, watch } from 'vue'
-
-import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { app } from '@/scripts/app'
-import type { NodeError } from '@/schemas/apiSchema'
-import { getParentExecutionIds } from '@/types/nodeIdentification'
-import { forEachNode, getNodeByExecutionId } from '@/utils/graphTraversalUtil'
-
-function setNodeHasErrors(node: LGraphNode, hasErrors: boolean): void {
-  if (node.has_errors === hasErrors) return
-  const oldValue = node.has_errors
-  node.has_errors = hasErrors
-  node.graph?.trigger('node:property:changed', {
-    type: 'node:property:changed',
-    nodeId: node.id,
-    property: 'has_errors',
-    oldValue,
-    newValue: hasErrors
-  })
-}
-
-/**
- * Single-pass reconciliation of node error flags.
- * Collects the set of nodes that should have errors, then walks all nodes
- * once, setting each flag exactly once. This avoids the redundant
- * true→false→true transition (and duplicate events) that a clear-then-apply
- * approach would cause.
- */
-function reconcileNodeErrorFlags(
-  rootGraph: LGraph,
-  nodeErrors: Record<string, NodeError> | null,
-  missingModelExecIds: Set<string>
-): void {
-  // Collect nodes and slot info that should be flagged
-  // Includes both error-owning nodes and their ancestor containers
-  const flaggedNodes = new Set<LGraphNode>()
-  const errorSlots = new Map<LGraphNode, Set<string>>()
-
-  if (nodeErrors) {
-    for (const [executionId, nodeError] of Object.entries(nodeErrors)) {
-      const node = getNodeByExecutionId(rootGraph, executionId)
-      if (!node) continue
-
-      flaggedNodes.add(node)
-      const slotNames = new Set<string>()
-      for (const error of nodeError.errors) {
-        const name = error.extra_info?.input_name
-        if (name) slotNames.add(name)
-      }
-      if (slotNames.size > 0) errorSlots.set(node, slotNames)
-
-      for (const parentId of getParentExecutionIds(executionId)) {
-        const parentNode = getNodeByExecutionId(rootGraph, parentId)
-        if (parentNode) flaggedNodes.add(parentNode)
-      }
-    }
-  }
-
-  for (const execId of missingModelExecIds) {
-    const node = getNodeByExecutionId(rootGraph, execId)
-    if (node) flaggedNodes.add(node)
-  }
-
-  forEachNode(rootGraph, (node) => {
-    setNodeHasErrors(node, flaggedNodes.has(node))
-
-    if (node.inputs) {
-      const nodeSlotNames = errorSlots.get(node)
-      for (const slot of node.inputs) {
-        slot.hasErrors = !!nodeSlotNames?.has(slot.name)
-      }
-    }
-  })
-}
-
-export function useNodeErrorFlagSync(
-  lastNodeErrors: Ref<Record<string, NodeError> | null>,
-  missingModelStore: ReturnType<typeof useMissingModelStore>
-): () => void {
-  const settingStore = useSettingStore()
-  const showErrorsTab = computed(() =>
-    settingStore.get('Comfy.RightSidePanel.ShowErrorsTab')
-  )
-
-  const stop = watch(
-    [
-      lastNodeErrors,
-      () => missingModelStore.missingModelNodeIds,
-      showErrorsTab
-    ],
-    () => {
-      if (!app.isGraphReady) return
-      // Legacy (LGraphNode) only: suppress missing-model error flags when
-      // the Errors tab is hidden, since legacy nodes lack the per-widget
-      // red highlight that Vue nodes use to indicate *why* a node has errors.
-      // Vue nodes compute hasAnyError independently and are unaffected.
-      reconcileNodeErrorFlags(
-        app.rootGraph,
-        lastNodeErrors.value,
-        showErrorsTab.value
-          ? missingModelStore.missingModelAncestorExecutionIds
-          : new Set()
-      )
-    },
-    { flush: 'post' }
-  )
-  return stop
-}
--- a/src/composables/useClickDragGuard.test.ts
+++ b/src/composables/useClickDragGuard.test.ts
@@ -1,65 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import {
-  exceedsClickThreshold,
-  useClickDragGuard
-} from '@/composables/useClickDragGuard'
-
-describe('exceedsClickThreshold', () => {
-  it('returns false when distance is within threshold', () => {
-    expect(exceedsClickThreshold({ x: 0, y: 0 }, { x: 2, y: 2 }, 5)).toBe(false)
-  })
-
-  it('returns true when distance exceeds threshold', () => {
-    expect(exceedsClickThreshold({ x: 0, y: 0 }, { x: 3, y: 5 }, 5)).toBe(true)
-  })
-
-  it('returns false when distance exactly equals threshold', () => {
-    expect(exceedsClickThreshold({ x: 0, y: 0 }, { x: 3, y: 4 }, 5)).toBe(false)
-  })
-
-  it('handles negative deltas', () => {
-    expect(exceedsClickThreshold({ x: 10, y: 10 }, { x: 4, y: 2 }, 5)).toBe(
-      true
-    )
-  })
-})
-
-describe('useClickDragGuard', () => {
-  it('reports no drag when pointer has not moved', () => {
-    const guard = useClickDragGuard(5)
-    guard.recordStart({ clientX: 100, clientY: 200 })
-    expect(guard.wasDragged({ clientX: 100, clientY: 200 })).toBe(false)
-  })
-
-  it('reports no drag when movement is within threshold', () => {
-    const guard = useClickDragGuard(5)
-    guard.recordStart({ clientX: 100, clientY: 200 })
-    expect(guard.wasDragged({ clientX: 103, clientY: 204 })).toBe(false)
-  })
-
-  it('reports drag when movement exceeds threshold', () => {
-    const guard = useClickDragGuard(5)
-    guard.recordStart({ clientX: 100, clientY: 200 })
-    expect(guard.wasDragged({ clientX: 106, clientY: 200 })).toBe(true)
-  })
-
-  it('returns false when no start has been recorded', () => {
-    const guard = useClickDragGuard(5)
-    expect(guard.wasDragged({ clientX: 100, clientY: 200 })).toBe(false)
-  })
-
-  it('returns false after reset', () => {
-    const guard = useClickDragGuard(5)
-    guard.recordStart({ clientX: 100, clientY: 200 })
-    guard.reset()
-    expect(guard.wasDragged({ clientX: 200, clientY: 300 })).toBe(false)
-  })
-
-  it('respects custom threshold', () => {
-    const guard = useClickDragGuard(3)
-    guard.recordStart({ clientX: 0, clientY: 0 })
-    expect(guard.wasDragged({ clientX: 3, clientY: 0 })).toBe(false)
-    expect(guard.wasDragged({ clientX: 4, clientY: 0 })).toBe(true)
-  })
-})
--- a/src/composables/useClickDragGuard.ts
+++ b/src/composables/useClickDragGuard.ts
@@ -1,41 +0,0 @@
-interface PointerPosition {
-  readonly x: number
-  readonly y: number
-}
-
-function squaredDistance(a: PointerPosition, b: PointerPosition): number {
-  const dx = a.x - b.x
-  const dy = a.y - b.y
-  return dx * dx + dy * dy
-}
-
-export function exceedsClickThreshold(
-  start: PointerPosition,
-  end: PointerPosition,
-  threshold: number
-): boolean {
-  return squaredDistance(start, end) > threshold * threshold
-}
-
-export function useClickDragGuard(threshold: number = 5) {
-  let start: PointerPosition | null = null
-
-  function recordStart(e: { clientX: number; clientY: number }) {
-    start = { x: e.clientX, y: e.clientY }
-  }
-
-  function wasDragged(e: { clientX: number; clientY: number }): boolean {
-    if (!start) return false
-    return exceedsClickThreshold(
-      start,
-      { x: e.clientX, y: e.clientY },
-      threshold
-    )
-  }
-
-  function reset() {
-    start = null
-  }
-
-  return { recordStart, wasDragged, reset }
-}
--- a/src/constants/essentialsNodes.ts
+++ b/src/constants/essentialsNodes.ts
@@ -107,27 +107,6 @@ export const ESSENTIALS_CATEGORY_CANONICAL: ReadonlyMap<
  EssentialsCategory
 > = new Map(ESSENTIALS_CATEGORIES.map((c) => [c.toLowerCase(), c]))

-/**
- * Precomputed rank map: category → display order index.
- * Used for sorting essentials folders in their canonical order.
- */
-export const ESSENTIALS_CATEGORY_RANK: ReadonlyMap<string, number> = new Map(
-  ESSENTIALS_CATEGORIES.map((c, i) => [c, i])
-)
-
-/**
- * Precomputed rank maps: category → (node name → display order index).
- * Used for sorting nodes within each essentials folder.
- */
-export const ESSENTIALS_NODE_RANK: Partial<
-  Record<EssentialsCategory, ReadonlyMap<string, number>>
-> = Object.fromEntries(
-  Object.entries(ESSENTIALS_NODES).map(([category, nodes]) => [
-    category,
-    new Map(nodes.map((name, i) => [name, i]))
-  ])
-)
-
 /**
 * "Novel" toolkit nodes for telemetry — basics excluded.
 * Derived from ESSENTIALS_NODES minus the 'basics' category.
--- a/src/extensions/core/load3d/Load3d.ts
+++ b/src/extensions/core/load3d/Load3d.ts
@@ -1,7 +1,5 @@
 import * as THREE from 'three'

-import { exceedsClickThreshold } from '@/composables/useClickDragGuard'
-
 import { AnimationManager } from './AnimationManager'
 import { CameraManager } from './CameraManager'
 import { ControlsManager } from './ControlsManager'
@@ -70,7 +68,9 @@ class Load3d {
  targetAspectRatio: number = 1
  isViewerMode: boolean = false

-  private rightMouseStart: { x: number; y: number } = { x: 0, y: 0 }
+  // Context menu tracking
+  private rightMouseDownX: number = 0
+  private rightMouseDownY: number = 0
  private rightMouseMoved: boolean = false
  private readonly dragThreshold: number = 5
  private contextMenuAbortController: AbortController | null = null
@@ -197,20 +197,18 @@ class Load3d {

    const mousedownHandler = (e: MouseEvent) => {
      if (e.button === 2) {
-        this.rightMouseStart = { x: e.clientX, y: e.clientY }
+        this.rightMouseDownX = e.clientX
+        this.rightMouseDownY = e.clientY
        this.rightMouseMoved = false
      }
    }

    const mousemoveHandler = (e: MouseEvent) => {
      if (e.buttons === 2) {
-        if (
-          exceedsClickThreshold(
-            this.rightMouseStart,
-            { x: e.clientX, y: e.clientY },
-            this.dragThreshold
-          )
-        ) {
+        const dx = Math.abs(e.clientX - this.rightMouseDownX)
+        const dy = Math.abs(e.clientY - this.rightMouseDownY)
+
+        if (dx > this.dragThreshold || dy > this.dragThreshold) {
          this.rightMouseMoved = true
        }
      }
@@ -219,13 +217,12 @@ class Load3d {
    const contextmenuHandler = (e: MouseEvent) => {
      if (this.isViewerMode) return

+      const dx = Math.abs(e.clientX - this.rightMouseDownX)
+      const dy = Math.abs(e.clientY - this.rightMouseDownY)
      const wasDragging =
        this.rightMouseMoved ||
-        exceedsClickThreshold(
-          this.rightMouseStart,
-          { x: e.clientX, y: e.clientY },
-          this.dragThreshold
-        )
+        dx > this.dragThreshold ||
+        dy > this.dragThreshold

      this.rightMouseMoved = false

--- a/src/lib/litegraph/src/LGraphCanvas.ts
+++ b/src/lib/litegraph/src/LGraphCanvas.ts
@@ -2616,7 +2616,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
          }
          pointer.finally = () => (this.resizingGroup = null)
        } else {
-          const headerHeight = LiteGraph.NODE_TITLE_HEIGHT
+          const f = group.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE
+          const headerHeight = f * 1.4
          if (
            isInRectangle(
              x,
--- a/src/lib/litegraph/src/LGraphGroup.ts
+++ b/src/lib/litegraph/src/LGraphGroup.ts
@@ -40,7 +40,7 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable {
  color?: string
  title: string
  font?: string
-  font_size: number = LiteGraph.GROUP_TEXT_SIZE
+  font_size: number = LiteGraph.DEFAULT_GROUP_FONT || 24
  _bounding = new Rectangle(10, 10, LGraphGroup.minWidth, LGraphGroup.minHeight)

  _pos: Point = this._bounding.pos
@@ -116,7 +116,7 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable {
  }

  get titleHeight() {
-    return LiteGraph.NODE_TITLE_HEIGHT
+    return this.font_size * 1.4
  }

  get children(): ReadonlySet<Positionable> {
@@ -148,6 +148,7 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable {
    this._bounding.set(o.bounding)
    this.color = o.color
    this.flags = o.flags || this.flags
+    if (o.font_size) this.font_size = o.font_size
  }

  serialize(): ISerialisedGroup {
@@ -157,6 +158,7 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable {
      title: this.title,
      bounding: [...b],
      color: this.color,
+      font_size: this.font_size,
      flags: this.flags
    }
  }
@@ -168,7 +170,7 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable {
   */
  draw(graphCanvas: LGraphCanvas, ctx: CanvasRenderingContext2D): void {
    const { padding, resizeLength, defaultColour } = LGraphGroup
-    const font_size = LiteGraph.GROUP_TEXT_SIZE
+    const font_size = this.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE

    const [x, y] = this._pos
    const [width, height] = this._size
@@ -179,7 +181,7 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable {
    ctx.fillStyle = color
    ctx.strokeStyle = color
    ctx.beginPath()
-    ctx.rect(x + 0.5, y + 0.5, width, LiteGraph.NODE_TITLE_HEIGHT)
+    ctx.rect(x + 0.5, y + 0.5, width, font_size * 1.4)
    ctx.fill()

    // Group background, border
@@ -201,13 +203,11 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable {
    // Title
    ctx.font = `${font_size}px ${LiteGraph.GROUP_FONT}`
    ctx.textAlign = 'left'
-    ctx.textBaseline = 'middle'
    ctx.fillText(
      this.title + (this.pinned ? '📌' : ''),
-      x + font_size / 2,
-      y + LiteGraph.NODE_TITLE_HEIGHT / 2 + 1
+      x + padding,
+      y + font_size
    )
-    ctx.textBaseline = 'alphabetic'

    if (LiteGraph.highlight_selected_group && this.selected) {
      strokeShape(ctx, this._bounding, {
--- a/src/lib/litegraph/src/LiteGraphGlobal.ts
+++ b/src/lib/litegraph/src/LiteGraphGlobal.ts
@@ -72,7 +72,8 @@ export class LiteGraphGlobal {
  DEFAULT_FONT = 'Inter'
  DEFAULT_SHADOW_COLOR = 'rgba(0,0,0,0.5)'

-  GROUP_TEXT_SIZE = 20
+  DEFAULT_GROUP_FONT = 24
+  DEFAULT_GROUP_FONT_SIZE = 24
  GROUP_FONT = 'Inter'

  WIDGET_BGCOLOR = '#222'
--- a/src/lib/litegraph/src/snapshots/LGraph.test.ts.snap
+++ b/src/lib/litegraph/src/snapshots/LGraph.test.ts.snap
@@ -18,6 +18,7 @@ exports[`LGraph > supports schema v0.4 graphs > oldSchemaGraph 1`] = `
      ],
      "color": "#6029aa",
      "flags": {},
+      "font_size": 14,
      "id": 123,
      "title": "A group to test with",
    },
--- a/src/lib/litegraph/src/snapshots/LGraphGroup.test.ts.snap
+++ b/src/lib/litegraph/src/snapshots/LGraphGroup.test.ts.snap
@@ -10,6 +10,7 @@ exports[`LGraphGroup > serializes to the existing format > Basic 1`] = `
  ],
  "color": "#3f789e",
  "flags": {},
+  "font_size": 24,
  "id": 929,
  "title": "title",
 }
--- a/src/lib/litegraph/src/snapshots/litegraph.test.ts.snap
+++ b/src/lib/litegraph/src/snapshots/litegraph.test.ts.snap
@@ -21,6 +21,8 @@ LiteGraphGlobal {
  "ContextMenu": [Function],
  "CurveEditor": [Function],
  "DEFAULT_FONT": "Inter",
+  "DEFAULT_GROUP_FONT": 24,
+  "DEFAULT_GROUP_FONT_SIZE": 24,
  "DEFAULT_POSITION": [
    100,
    100,
@@ -32,7 +34,6 @@ LiteGraphGlobal {
  "EVENT_LINK_COLOR": "#A86",
  "GRID_SHAPE": 6,
  "GROUP_FONT": "Inter",
-  "GROUP_TEXT_SIZE": 20,
  "Globals": {},
  "HIDDEN_LINK": -1,
  "INPUT": 1,
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -278,7 +278,8 @@
    "clearAll": "Clear all",
    "copyURL": "Copy URL",
    "releaseTitle": "{package} {version} Release",
-    "itemsSelected": "No items selected | {count} item selected | {count} items selected",
+    "itemSelected": "{selectedCount} item selected",
+    "itemsSelected": "{selectedCount} items selected",
    "multiSelectDropdown": "Multi-select dropdown",
    "singleSelectDropdown": "Single-select dropdown",
    "progressCountOf": "of",
@@ -1888,7 +1889,9 @@
    "extensionFileHint": "This may be due to the following script",
    "promptExecutionError": "Prompt execution failed",
    "accessRestrictedTitle": "Access Restricted",
-    "accessRestrictedMessage": "Your account is not authorized for this feature."
+    "accessRestrictedMessage": "Your account is not authorized for this feature.",
+    "emptyFileInputTitle": "Missing File Inputs",
+    "emptyFileInputMessage": "The following nodes require a file to be selected: {nodeList}. Please upload or select files before running."
  },
  "apiNodesSignInDialog": {
    "title": "Sign In Required to Use API Nodes",
@@ -3706,18 +3709,5 @@
    "footer": "ComfyUI stays free and open source. Cloud is optional.",
    "continueLocally": "Continue Locally",
    "exploreCloud": "Try Cloud for Free"
-  },
-  "execution": {
-    "generating": "Generating…",
-    "saving": "Saving…",
-    "loading": "Loading…",
-    "encoding": "Encoding…",
-    "decoding": "Decoding…",
-    "processing": "Processing…",
-    "resizing": "Resizing…",
-    "generatingVideo": "Generating video…",
-    "training": "Training…",
-    "processingVideo": "Processing video…",
-    "running": "Running…"
  }
 }
--- a/src/platform/nodeReplacement/missingNodeScan.test.ts
+++ b/src/platform/nodeReplacement/missingNodeScan.test.ts
@@ -20,8 +20,8 @@ vi.mock('@/utils/graphTraversalUtil', () => ({
  getExecutionIdByNode: vi.fn()
 }))

-vi.mock('@/platform/nodeReplacement/cnrIdUtil', () => ({
-  getCnrIdFromNode: vi.fn(() => undefined)
+vi.mock('@/workbench/extensions/manager/utils/missingNodeErrorUtil', () => ({
+  getCnrIdFromNode: vi.fn(() => null)
 }))

 vi.mock('@/i18n', () => ({
@@ -48,10 +48,11 @@ import {
  collectAllNodes,
  getExecutionIdByNode
 } from '@/utils/graphTraversalUtil'
-import { getCnrIdFromNode } from '@/platform/nodeReplacement/cnrIdUtil'
+// eslint-disable-next-line import-x/no-restricted-paths
+import { getCnrIdFromNode } from '@/workbench/extensions/manager/utils/missingNodeErrorUtil'
 import { useNodeReplacementStore } from '@/platform/nodeReplacement/nodeReplacementStore'
 import { rescanAndSurfaceMissingNodes } from './missingNodeScan'
-import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'

 function mockNode(
  id: number,
@@ -71,7 +72,7 @@ function mockGraph(): LGraph {
 }

 function getMissingNodesError(
-  store: ReturnType<typeof useMissingNodesErrorStore>
+  store: ReturnType<typeof useExecutionErrorStore>
 ) {
  const error = store.missingNodesError
  if (!error) throw new Error('Expected missingNodesError to be defined')
@@ -98,7 +99,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {

    rescanAndSurfaceMissingNodes(mockGraph())

-    const store = useMissingNodesErrorStore()
+    const store = useExecutionErrorStore()
    expect(store.missingNodesError).toBeNull()
  })

@@ -111,7 +112,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {

    rescanAndSurfaceMissingNodes(mockGraph())

-    const store = useMissingNodesErrorStore()
+    const store = useExecutionErrorStore()
    const error = getMissingNodesError(store)
    expect(error.nodeTypes).toHaveLength(2)
  })
@@ -128,7 +129,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {

    rescanAndSurfaceMissingNodes(mockGraph())

-    const store = useMissingNodesErrorStore()
+    const store = useExecutionErrorStore()
    const error = getMissingNodesError(store)
    expect(error.nodeTypes).toHaveLength(1)
    const missing = error.nodeTypes[0]
@@ -141,7 +142,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {

    rescanAndSurfaceMissingNodes(mockGraph())

-    const store = useMissingNodesErrorStore()
+    const store = useExecutionErrorStore()
    const error = getMissingNodesError(store)
    const missing = error.nodeTypes[0]
    expect(typeof missing !== 'string' && missing.nodeId).toBe('exec-42')
@@ -153,7 +154,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {

    rescanAndSurfaceMissingNodes(mockGraph())

-    const store = useMissingNodesErrorStore()
+    const store = useExecutionErrorStore()
    const error = getMissingNodesError(store)
    const missing = error.nodeTypes[0]
    expect(typeof missing !== 'string' && missing.nodeId).toBe('99')
@@ -166,7 +167,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {

    rescanAndSurfaceMissingNodes(mockGraph())

-    const store = useMissingNodesErrorStore()
+    const store = useExecutionErrorStore()
    const error = getMissingNodesError(store)
    const missing = error.nodeTypes[0]
    expect(typeof missing !== 'string' && missing.cnrId).toBe(
@@ -193,7 +194,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {

    rescanAndSurfaceMissingNodes(mockGraph())

-    const store = useMissingNodesErrorStore()
+    const store = useExecutionErrorStore()
    const error = getMissingNodesError(store)
    const missing = error.nodeTypes[0]
    expect(typeof missing !== 'string' && missing.isReplaceable).toBe(true)
@@ -208,7 +209,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {

    rescanAndSurfaceMissingNodes(mockGraph())

-    const store = useMissingNodesErrorStore()
+    const store = useExecutionErrorStore()
    const error = getMissingNodesError(store)
    const missing = error.nodeTypes[0]
    expect(typeof missing !== 'string' && missing.isReplaceable).toBe(false)
@@ -224,7 +225,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {

    rescanAndSurfaceMissingNodes(mockGraph())

-    const store = useMissingNodesErrorStore()
+    const store = useExecutionErrorStore()
    const error = getMissingNodesError(store)
    const missing = error.nodeTypes[0]
    expect(typeof missing !== 'string' && missing.type).toBe('OriginalType')
--- a/src/platform/nodeReplacement/missingNodeScan.ts
+++ b/src/platform/nodeReplacement/missingNodeScan.ts
@@ -2,13 +2,13 @@ import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
 import { useNodeReplacementStore } from '@/platform/nodeReplacement/nodeReplacementStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import type { MissingNodeType } from '@/types/comfy'
 import {
  collectAllNodes,
  getExecutionIdByNode
 } from '@/utils/graphTraversalUtil'
-import { getCnrIdFromNode } from '@/platform/nodeReplacement/cnrIdUtil'
+// eslint-disable-next-line import-x/no-restricted-paths
+import { getCnrIdFromNode } from '@/workbench/extensions/manager/utils/missingNodeErrorUtil'

 /** Scan the live graph for unregistered node types and build a full MissingNodeType list. */
 function scanMissingNodes(rootGraph: LGraph): MissingNodeType[] {
@@ -41,7 +41,5 @@ function scanMissingNodes(rootGraph: LGraph): MissingNodeType[] {
 /** Re-scan the graph for missing nodes and update the error store. */
 export function rescanAndSurfaceMissingNodes(rootGraph: LGraph): void {
  const types = scanMissingNodes(rootGraph)
-  if (useMissingNodesErrorStore().surfaceMissingNodes(types)) {
-    useExecutionErrorStore().showErrorOverlay()
-  }
+  useExecutionErrorStore().surfaceMissingNodes(types)
 }
--- a/src/platform/nodeReplacement/missingNodesErrorStore.test.ts
+++ b/src/platform/nodeReplacement/missingNodesErrorStore.test.ts
@@ -1,215 +0,0 @@
-import { createPinia, setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import type { MissingNodeType } from '@/types/comfy'
-
-vi.mock('@/i18n', () => ({
-  st: vi.fn((_key: string, fallback: string) => fallback)
-}))
-
-vi.mock('@/platform/distribution/types', () => ({
-  isCloud: false
-}))
-
-const mockShowErrorsTab = vi.hoisted(() => ({ value: false }))
-
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: vi.fn(() => ({
-    get: vi.fn(() => mockShowErrorsTab.value)
-  }))
-}))
-
-import { useMissingNodesErrorStore } from './missingNodesErrorStore'
-
-describe('missingNodesErrorStore', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia())
-  })
-
-  describe('setMissingNodeTypes', () => {
-    it('sets missingNodesError with provided types', () => {
-      const store = useMissingNodesErrorStore()
-      const types: MissingNodeType[] = [
-        { type: 'NodeA', nodeId: '1', isReplaceable: false }
-      ]
-      store.setMissingNodeTypes(types)
-
-      expect(store.missingNodesError).not.toBeNull()
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
-      expect(store.hasMissingNodes).toBe(true)
-    })
-
-    it('clears missingNodesError when given empty array', () => {
-      const store = useMissingNodesErrorStore()
-      store.setMissingNodeTypes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false }
-      ])
-      expect(store.missingNodesError).not.toBeNull()
-
-      store.setMissingNodeTypes([])
-      expect(store.missingNodesError).toBeNull()
-      expect(store.hasMissingNodes).toBe(false)
-    })
-
-    it('deduplicates string entries by value', () => {
-      const store = useMissingNodesErrorStore()
-      store.setMissingNodeTypes([
-        'NodeA',
-        'NodeA',
-        'NodeB'
-      ] as MissingNodeType[])
-
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(2)
-    })
-
-    it('deduplicates object entries by nodeId when present', () => {
-      const store = useMissingNodesErrorStore()
-      store.setMissingNodeTypes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false },
-        { type: 'NodeA', nodeId: '1', isReplaceable: false },
-        { type: 'NodeA', nodeId: '2', isReplaceable: false }
-      ])
-
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(2)
-    })
-
-    it('deduplicates object entries by type when nodeId is absent', () => {
-      const store = useMissingNodesErrorStore()
-      store.setMissingNodeTypes([
-        { type: 'NodeA', isReplaceable: false },
-        { type: 'NodeA', isReplaceable: true }
-      ] as MissingNodeType[])
-
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
-    })
-
-    it('keeps distinct nodeIds even when type is the same', () => {
-      const store = useMissingNodesErrorStore()
-      store.setMissingNodeTypes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false },
-        { type: 'NodeA', nodeId: '2', isReplaceable: false },
-        { type: 'NodeA', nodeId: '3', isReplaceable: false }
-      ])
-
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(3)
-    })
-  })
-
-  describe('surfaceMissingNodes', () => {
-    beforeEach(() => {
-      mockShowErrorsTab.value = false
-    })
-
-    it('stores missing node types and returns false when setting disabled', () => {
-      const store = useMissingNodesErrorStore()
-      const types: MissingNodeType[] = [
-        { type: 'NodeA', nodeId: '1', isReplaceable: false }
-      ]
-      const shouldShowOverlay = store.surfaceMissingNodes(types)
-
-      expect(store.missingNodesError).not.toBeNull()
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
-      expect(store.hasMissingNodes).toBe(true)
-      expect(shouldShowOverlay).toBe(false)
-    })
-
-    it('returns true when ShowErrorsTab setting is enabled', () => {
-      mockShowErrorsTab.value = true
-      const store = useMissingNodesErrorStore()
-      const shouldShowOverlay = store.surfaceMissingNodes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false }
-      ])
-
-      expect(shouldShowOverlay).toBe(true)
-    })
-
-    it('returns false when ShowErrorsTab setting is disabled', () => {
-      mockShowErrorsTab.value = false
-      const store = useMissingNodesErrorStore()
-      const shouldShowOverlay = store.surfaceMissingNodes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false }
-      ])
-
-      expect(shouldShowOverlay).toBe(false)
-    })
-
-    it('returns false for empty types even when setting is enabled', () => {
-      mockShowErrorsTab.value = true
-      const store = useMissingNodesErrorStore()
-      const shouldShowOverlay = store.surfaceMissingNodes([])
-
-      expect(shouldShowOverlay).toBe(false)
-    })
-
-    it('deduplicates node types', () => {
-      const store = useMissingNodesErrorStore()
-      store.surfaceMissingNodes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false },
-        { type: 'NodeA', nodeId: '1', isReplaceable: false },
-        { type: 'NodeB', nodeId: '2', isReplaceable: false }
-      ])
-
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(2)
-    })
-  })
-
-  describe('removeMissingNodesByType', () => {
-    it('removes matching types from the missing nodes list', () => {
-      const store = useMissingNodesErrorStore()
-      store.setMissingNodeTypes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false },
-        { type: 'NodeB', nodeId: '2', isReplaceable: false },
-        { type: 'NodeC', nodeId: '3', isReplaceable: false }
-      ])
-
-      store.removeMissingNodesByType(['NodeA', 'NodeC'])
-
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
-      const remaining = store.missingNodesError?.nodeTypes[0]
-      expect(typeof remaining !== 'string' && remaining?.type).toBe('NodeB')
-    })
-
-    it('clears missingNodesError when all types are removed', () => {
-      const store = useMissingNodesErrorStore()
-      store.setMissingNodeTypes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false }
-      ])
-
-      store.removeMissingNodesByType(['NodeA'])
-
-      expect(store.missingNodesError).toBeNull()
-      expect(store.hasMissingNodes).toBe(false)
-    })
-
-    it('does nothing when missingNodesError is null', () => {
-      const store = useMissingNodesErrorStore()
-      expect(store.missingNodesError).toBeNull()
-
-      store.removeMissingNodesByType(['NodeA'])
-      expect(store.missingNodesError).toBeNull()
-    })
-
-    it('does nothing when removing non-existent types', () => {
-      const store = useMissingNodesErrorStore()
-      store.setMissingNodeTypes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false }
-      ])
-
-      store.removeMissingNodesByType(['NonExistent'])
-
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
-    })
-
-    it('handles removing from string entries', () => {
-      const store = useMissingNodesErrorStore()
-      store.setMissingNodeTypes([
-        'StringNodeA',
-        'StringNodeB'
-      ] as MissingNodeType[])
-
-      store.removeMissingNodesByType(['StringNodeA'])
-
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
-    })
-  })
-})
--- a/src/platform/nodeReplacement/missingNodesErrorStore.ts
+++ b/src/platform/nodeReplacement/missingNodesErrorStore.ts
@@ -1,125 +0,0 @@
-import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
-
-import { st } from '@/i18n'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { isCloud } from '@/platform/distribution/types'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { app } from '@/scripts/app'
-import type { MissingNodeType } from '@/types/comfy'
-import { getAncestorExecutionIds } from '@/types/nodeIdentification'
-import type { NodeExecutionId } from '@/types/nodeIdentification'
-import { getExecutionIdByNode } from '@/utils/graphTraversalUtil'
-
-interface MissingNodesError {
-  message: string
-  nodeTypes: MissingNodeType[]
-}
-
-export const useMissingNodesErrorStore = defineStore(
-  'missingNodesError',
-  () => {
-    const missingNodesError = ref<MissingNodesError | null>(null)
-
-    function setMissingNodeTypes(types: MissingNodeType[]) {
-      if (!types.length) {
-        missingNodesError.value = null
-        return
-      }
-      const seen = new Set<string>()
-      const uniqueTypes = types.filter((node) => {
-        // For string entries (group nodes), deduplicate by the string itself.
-        // For object entries, prefer nodeId so multiple instances of the same
-        // type are kept as separate rows; fall back to type if nodeId is absent.
-        const isString = typeof node === 'string'
-        let key: string
-        if (isString) {
-          key = node
-        } else if (node.nodeId != null) {
-          key = String(node.nodeId)
-        } else {
-          key = node.type
-        }
-        if (seen.has(key)) return false
-        seen.add(key)
-        return true
-      })
-      missingNodesError.value = {
-        message: isCloud
-          ? st(
-              'rightSidePanel.missingNodePacks.unsupportedTitle',
-              'Unsupported Node Packs'
-            )
-          : st('rightSidePanel.missingNodePacks.title', 'Missing Node Packs'),
-        nodeTypes: uniqueTypes
-      }
-    }
-
-    /** Set missing node types. Returns true if the Errors tab is enabled and types were set. */
-    function surfaceMissingNodes(types: MissingNodeType[]): boolean {
-      setMissingNodeTypes(types)
-      return (
-        types.length > 0 &&
-        useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')
-      )
-    }
-
-    /** Remove specific node types from the missing nodes list (e.g. after replacement). */
-    function removeMissingNodesByType(typesToRemove: string[]) {
-      if (!missingNodesError.value) return
-      const removeSet = new Set(typesToRemove)
-      const remaining = missingNodesError.value.nodeTypes.filter((node) => {
-        const nodeType = typeof node === 'string' ? node : node.type
-        return !removeSet.has(nodeType)
-      })
-      setMissingNodeTypes(remaining)
-    }
-
-    const hasMissingNodes = computed(() => !!missingNodesError.value)
-
-    const missingNodeCount = computed(
-      () => missingNodesError.value?.nodeTypes.length ?? 0
-    )
-
-    /**
-     * Set of all execution ID prefixes derived from missing node execution IDs,
-     * including the missing nodes themselves.
-     *
-     * Example: missing node at "65:70:63" → Set { "65", "65:70", "65:70:63" }
-     */
-    const missingAncestorExecutionIds = computed<Set<NodeExecutionId>>(() => {
-      const ids = new Set<NodeExecutionId>()
-      const error = missingNodesError.value
-      if (!error) return ids
-
-      for (const nodeType of error.nodeTypes) {
-        if (typeof nodeType === 'string') continue
-        if (nodeType.nodeId == null) continue
-        for (const id of getAncestorExecutionIds(String(nodeType.nodeId))) {
-          ids.add(id)
-        }
-      }
-
-      return ids
-    })
-
-    /** True if the node has a missing node inside it at any nesting depth. */
-    function isContainerWithMissingNode(node: LGraphNode): boolean {
-      if (!app.isGraphReady) return false
-      const execId = getExecutionIdByNode(app.rootGraph, node)
-      if (!execId) return false
-      return missingAncestorExecutionIds.value.has(execId)
-    }
-
-    return {
-      missingNodesError,
-      setMissingNodeTypes,
-      surfaceMissingNodes,
-      removeMissingNodesByType,
-      hasMissingNodes,
-      missingNodeCount,
-      missingAncestorExecutionIds,
-      isContainerWithMissingNode
-    }
-  }
-)
--- a/src/platform/nodeReplacement/useNodeReplacement.test.ts
+++ b/src/platform/nodeReplacement/useNodeReplacement.test.ts
@@ -47,8 +47,8 @@ vi.mock('@/i18n', () => ({
 const { mockRemoveMissingNodesByType } = vi.hoisted(() => ({
  mockRemoveMissingNodesByType: vi.fn()
 }))
-vi.mock('@/platform/nodeReplacement/missingNodesErrorStore', () => ({
-  useMissingNodesErrorStore: vi.fn(() => ({
+vi.mock('@/stores/executionErrorStore', () => ({
+  useExecutionErrorStore: vi.fn(() => ({
    removeMissingNodesByType: mockRemoveMissingNodesByType
  }))
 }))
--- a/src/platform/nodeReplacement/useNodeReplacement.ts
+++ b/src/platform/nodeReplacement/useNodeReplacement.ts
@@ -7,7 +7,7 @@ import type { NodeReplacement } from '@/platform/nodeReplacement/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app, sanitizeNodeName } from '@/scripts/app'
-import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { collectAllNodes } from '@/utils/graphTraversalUtil'

@@ -329,24 +329,24 @@ export function useNodeReplacement() {

  /**
   * Replaces all nodes in a single swap group and removes successfully
-   * replaced types from the missing nodes error store.
+   * replaced types from the execution error store.
   */
  function replaceGroup(group: ReplacementGroup): void {
    const replaced = replaceNodesInPlace(group.nodeTypes)
    if (replaced.length > 0) {
-      useMissingNodesErrorStore().removeMissingNodesByType(replaced)
+      useExecutionErrorStore().removeMissingNodesByType(replaced)
    }
  }

  /**
   * Replaces every available node across all swap groups and removes
-   * the succeeded types from the missing nodes error store.
+   * the succeeded types from the execution error store.
   */
  function replaceAllGroups(groups: ReplacementGroup[]): void {
    const allNodeTypes = groups.flatMap((g) => g.nodeTypes)
    const replaced = replaceNodesInPlace(allNodeTypes)
    if (replaced.length > 0) {
-      useMissingNodesErrorStore().removeMissingNodesByType(replaced)
+      useExecutionErrorStore().removeMissingNodesByType(replaced)
    }
  }

--- a/src/platform/settings/components/SettingDialog.vue
+++ b/src/platform/settings/components/SettingDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseModalLayout content-title="" data-testid="settings-dialog" size="sm">
+  <BaseModalLayout content-title="" data-testid="settings-dialog" size="md">
    <template #leftPanelHeaderTitle>
      <i class="icon-[lucide--settings]" />
      <h2 class="text-neutral text-base">{{ $t('g.settings') }}</h2>
@@ -12,7 +12,6 @@
          size="md"
          :placeholder="$t('g.searchSettings') + '...'"
          :debounce-time="128"
-          autofocus
          @search="handleSearch"
        />
      </div>
--- a/src/platform/workflow/core/services/workflowService.test.ts
+++ b/src/platform/workflow/core/services/workflowService.test.ts
@@ -12,7 +12,7 @@ import { useToastStore } from '@/platform/updates/common/toastStore'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
-import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { app } from '@/scripts/app'
 import { useAppMode } from '@/composables/useAppMode'
 import type { AppMode } from '@/composables/useAppMode'
@@ -160,7 +160,7 @@ describe('useWorkflowService', () => {
      useWorkflowService().showPendingWarnings(workflow)

      expect(
-        useMissingNodesErrorStore().surfaceMissingNodes
+        useExecutionErrorStore().surfaceMissingNodes
      ).not.toHaveBeenCalled()
    })

@@ -170,9 +170,9 @@ describe('useWorkflowService', () => {

      useWorkflowService().showPendingWarnings(workflow)

-      expect(
-        useMissingNodesErrorStore().surfaceMissingNodes
-      ).toHaveBeenCalledWith(missingNodeTypes)
+      expect(useExecutionErrorStore().surfaceMissingNodes).toHaveBeenCalledWith(
+        missingNodeTypes
+      )
      expect(workflow.pendingWarnings).toBeNull()
    })

@@ -185,9 +185,9 @@ describe('useWorkflowService', () => {

      useWorkflowService().showPendingWarnings(workflow)

-      expect(
-        useMissingNodesErrorStore().surfaceMissingNodes
-      ).toHaveBeenCalledWith(['CustomNode1'])
+      expect(useExecutionErrorStore().surfaceMissingNodes).toHaveBeenCalledWith(
+        ['CustomNode1']
+      )
      expect(workflow.pendingWarnings).toBeNull()
    })

@@ -201,7 +201,7 @@ describe('useWorkflowService', () => {
      service.showPendingWarnings(workflow)

      expect(
-        useMissingNodesErrorStore().surfaceMissingNodes
+        useExecutionErrorStore().surfaceMissingNodes
      ).toHaveBeenCalledTimes(1)
    })
  })
@@ -226,7 +226,7 @@ describe('useWorkflowService', () => {
      )

      expect(
-        useMissingNodesErrorStore().surfaceMissingNodes
+        useExecutionErrorStore().surfaceMissingNodes
      ).not.toHaveBeenCalled()

      await useWorkflowService().openWorkflow(workflow)
@@ -238,9 +238,9 @@ describe('useWorkflowService', () => {
        workflow,
        expect.objectContaining({ deferWarnings: true })
      )
-      expect(
-        useMissingNodesErrorStore().surfaceMissingNodes
-      ).toHaveBeenCalledWith(['CustomNode1'])
+      expect(useExecutionErrorStore().surfaceMissingNodes).toHaveBeenCalledWith(
+        ['CustomNode1']
+      )
      expect(workflow.pendingWarnings).toBeNull()
    })

@@ -258,20 +258,20 @@ describe('useWorkflowService', () => {

      await service.openWorkflow(workflow1)
      expect(
-        useMissingNodesErrorStore().surfaceMissingNodes
+        useExecutionErrorStore().surfaceMissingNodes
      ).toHaveBeenCalledTimes(1)
-      expect(
-        useMissingNodesErrorStore().surfaceMissingNodes
-      ).toHaveBeenCalledWith(['MissingNodeA'])
+      expect(useExecutionErrorStore().surfaceMissingNodes).toHaveBeenCalledWith(
+        ['MissingNodeA']
+      )
      expect(workflow1.pendingWarnings).toBeNull()
      expect(workflow2.pendingWarnings).not.toBeNull()

      await service.openWorkflow(workflow2)
      expect(
-        useMissingNodesErrorStore().surfaceMissingNodes
+        useExecutionErrorStore().surfaceMissingNodes
      ).toHaveBeenCalledTimes(2)
      expect(
-        useMissingNodesErrorStore().surfaceMissingNodes
+        useExecutionErrorStore().surfaceMissingNodes
      ).toHaveBeenLastCalledWith(['MissingNodeB'])
      expect(workflow2.pendingWarnings).toBeNull()
    })
@@ -286,12 +286,12 @@ describe('useWorkflowService', () => {

      await service.openWorkflow(workflow, { force: true })
      expect(
-        useMissingNodesErrorStore().surfaceMissingNodes
+        useExecutionErrorStore().surfaceMissingNodes
      ).toHaveBeenCalledTimes(1)

      await service.openWorkflow(workflow, { force: true })
      expect(
-        useMissingNodesErrorStore().surfaceMissingNodes
+        useExecutionErrorStore().surfaceMissingNodes
      ).toHaveBeenCalledTimes(1)
    })
  })
--- a/src/platform/workflow/core/services/workflowService.ts
+++ b/src/platform/workflow/core/services/workflowService.ts
@@ -23,7 +23,6 @@ import type { AppMode } from '@/composables/useAppMode'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import {
  appendJsonExt,
@@ -44,7 +43,6 @@ export const useWorkflowService = () => {
  const workflowThumbnail = useWorkflowThumbnail()
  const domWidgetStore = useDomWidgetStore()
  const executionErrorStore = useExecutionErrorStore()
-  const missingNodesErrorStore = useMissingNodesErrorStore()
  const workflowDraftStore = useWorkflowDraftStore()

  function confirmOverwrite(targetPath: string) {
@@ -544,9 +542,7 @@ export const useWorkflowService = () => {
    wf.pendingWarnings = null

    if (missingNodeTypes?.length) {
-      if (missingNodesErrorStore.surfaceMissingNodes(missingNodeTypes)) {
-        executionErrorStore.showErrorOverlay()
-      }
+      executionErrorStore.surfaceMissingNodes(missingNodeTypes)
    }
  }

--- a/src/platform/workflow/persistence/base/storageIO.ts
+++ b/src/platform/workflow/persistence/base/storageIO.ts
@@ -250,125 +250,61 @@ function readSessionPointer<T extends { workspaceId: string }>(

 /**
 * Reads the active path pointer from sessionStorage.
- * Falls back to workspace-based search when clientId changes after reload,
- * then to localStorage when sessionStorage is empty (browser restart).
+ * Falls back to workspace-based search when clientId changes after reload.
 */
 export function readActivePath(
  clientId: string,
  targetWorkspaceId?: string
 ): ActivePathPointer | null {
-  return (
-    readSessionPointer<ActivePathPointer>(
-      StorageKeys.activePath(clientId),
-      StorageKeys.prefixes.activePath,
-      targetWorkspaceId
-    ) ??
-    (targetWorkspaceId
-      ? readLocalPointer<ActivePathPointer>(
-          StorageKeys.lastActivePath(targetWorkspaceId),
-          isValidActivePathPointer
-        )
-      : null)
+  return readSessionPointer<ActivePathPointer>(
+    StorageKeys.activePath(clientId),
+    StorageKeys.prefixes.activePath,
+    targetWorkspaceId
  )
 }

 /**
- * Writes the active path pointer to both sessionStorage (tab-scoped)
- * and localStorage (survives browser restart).
+ * Writes the active path pointer to sessionStorage.
 */
 export function writeActivePath(
  clientId: string,
  pointer: ActivePathPointer
 ): void {
-  const json = JSON.stringify(pointer)
-  writeStorage(sessionStorage, StorageKeys.activePath(clientId), json)
-  writeStorage(
-    localStorage,
-    StorageKeys.lastActivePath(pointer.workspaceId),
-    json
-  )
+  try {
+    const key = StorageKeys.activePath(clientId)
+    sessionStorage.setItem(key, JSON.stringify(pointer))
+  } catch {
+    // Best effort - ignore errors
+  }
 }

 /**
 * Reads the open paths pointer from sessionStorage.
- * Falls back to workspace-based search when clientId changes after reload,
- * then to localStorage when sessionStorage is empty (browser restart).
+ * Falls back to workspace-based search when clientId changes after reload.
 */
 export function readOpenPaths(
  clientId: string,
  targetWorkspaceId?: string
 ): OpenPathsPointer | null {
-  return (
-    readSessionPointer<OpenPathsPointer>(
-      StorageKeys.openPaths(clientId),
-      StorageKeys.prefixes.openPaths,
-      targetWorkspaceId
-    ) ??
-    (targetWorkspaceId
-      ? readLocalPointer<OpenPathsPointer>(
-          StorageKeys.lastOpenPaths(targetWorkspaceId),
-          isValidOpenPathsPointer
-        )
-      : null)
+  return readSessionPointer<OpenPathsPointer>(
+    StorageKeys.openPaths(clientId),
+    StorageKeys.prefixes.openPaths,
+    targetWorkspaceId
  )
 }

 /**
- * Writes the open paths pointer to both sessionStorage (tab-scoped)
- * and localStorage (survives browser restart).
+ * Writes the open paths pointer to sessionStorage.
 */
 export function writeOpenPaths(
  clientId: string,
  pointer: OpenPathsPointer
 ): void {
-  const json = JSON.stringify(pointer)
-  writeStorage(sessionStorage, StorageKeys.openPaths(clientId), json)
-  writeStorage(
-    localStorage,
-    StorageKeys.lastOpenPaths(pointer.workspaceId),
-    json
-  )
-}
-
-function hasWorkspaceId(obj: Record<string, unknown>): boolean {
-  return typeof obj.workspaceId === 'string'
-}
-
-function isValidActivePathPointer(value: unknown): value is ActivePathPointer {
-  if (typeof value !== 'object' || value === null) return false
-  const obj = value as Record<string, unknown>
-  return hasWorkspaceId(obj) && typeof obj.path === 'string'
-}
-
-function isValidOpenPathsPointer(value: unknown): value is OpenPathsPointer {
-  if (typeof value !== 'object' || value === null) return false
-  const obj = value as Record<string, unknown>
-  return (
-    hasWorkspaceId(obj) &&
-    Array.isArray(obj.paths) &&
-    typeof obj.activeIndex === 'number'
-  )
-}
-
-function readLocalPointer<T>(
-  key: string,
-  validate: (value: unknown) => value is T
-): T | null {
  try {
-    const json = localStorage.getItem(key)
-    if (!json) return null
-    const parsed = JSON.parse(json)
-    return validate(parsed) ? parsed : null
+    const key = StorageKeys.openPaths(clientId)
+    sessionStorage.setItem(key, JSON.stringify(pointer))
  } catch {
-    return null
-  }
-}
-
-function writeStorage(storage: Storage, key: string, value: string): void {
-  try {
-    storage.setItem(key, value)
-  } catch {
-    // Best effort — silently degrade when storage is full or unavailable
+    // Best effort - ignore errors
  }
 }

@@ -381,9 +317,7 @@ export function clearAllV2Storage(): void {

  const prefixes = [
    StorageKeys.prefixes.draftIndex,
-    StorageKeys.prefixes.draftPayload,
-    StorageKeys.prefixes.lastActivePath,
-    StorageKeys.prefixes.lastOpenPaths
+    StorageKeys.prefixes.draftPayload
  ]

  try {
--- a/src/platform/workflow/persistence/base/storageKeys.ts
+++ b/src/platform/workflow/persistence/base/storageKeys.ts
@@ -72,19 +72,6 @@ export const StorageKeys = {
    return `Comfy.Workflow.OpenPaths:${clientId}`
  },

-  /**
-   * localStorage copies of tab pointers for cross-session restore.
-   * sessionStorage is per-tab (correct for in-session use) but lost
-   * on browser restart; these keys preserve the last-written state.
-   */
-  lastActivePath(workspaceId: string): string {
-    return `Comfy.Workflow.LastActivePath:${workspaceId}`
-  },
-
-  lastOpenPaths(workspaceId: string): string {
-    return `Comfy.Workflow.LastOpenPaths:${workspaceId}`
-  },
-
  /**
   * Prefix patterns for cleanup operations.
   */
@@ -92,8 +79,6 @@ export const StorageKeys = {
    draftIndex: 'Comfy.Workflow.DraftIndex.v2:',
    draftPayload: 'Comfy.Workflow.Draft.v2:',
    activePath: 'Comfy.Workflow.ActivePath:',
-    openPaths: 'Comfy.Workflow.OpenPaths:',
-    lastActivePath: 'Comfy.Workflow.LastActivePath:',
-    lastOpenPaths: 'Comfy.Workflow.LastOpenPaths:'
+    openPaths: 'Comfy.Workflow.OpenPaths:'
  }
 } as const
--- a/src/platform/workflow/persistence/composables/useWorkflowPersistenceV2.ts
+++ b/src/platform/workflow/persistence/composables/useWorkflowPersistenceV2.ts
@@ -53,8 +53,8 @@ export function useWorkflowPersistenceV2() {
  const toast = useToast()
  const { onUserLogout } = useCurrentUser()

-  // Run migration on module load, passing clientId for tab state migration
-  migrateV1toV2(undefined, api.clientId ?? api.initialClientId ?? undefined)
+  // Run migration on module load
+  migrateV1toV2()

  // Clear workflow persistence storage when user signs out (cloud only)
  onUserLogout(() => {
--- a/src/platform/workflow/persistence/migration/migrateV1toV2.test.ts
+++ b/src/platform/workflow/persistence/migration/migrateV1toV2.test.ts
@@ -1,7 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'

 import { hashPath } from '../base/hashUtil'
-import { readOpenPaths } from '../base/storageIO'
 import {
  cleanupV1Data,
  getMigrationStatus,
@@ -213,85 +212,6 @@ describe('migrateV1toV2', () => {
    })
  })

-  describe('V1 tab state migration', () => {
-    it('migrates V1 tab state pointers to V2 format', () => {
-      // Simulate V1 state: user had 3 workflows open, 2nd was active
-      const v1Drafts = {
-        'workflows/a.json': {
-          data: '{"nodes":[1]}',
-          updatedAt: 1000,
-          name: 'a',
-          isTemporary: true
-        },
-        'workflows/b.json': {
-          data: '{"nodes":[2]}',
-          updatedAt: 2000,
-          name: 'b',
-          isTemporary: true
-        },
-        'workflows/c.json': {
-          data: '{"nodes":[3]}',
-          updatedAt: 3000,
-          name: 'c',
-          isTemporary: false
-        }
-      }
-      setV1Data(v1Drafts, [
-        'workflows/a.json',
-        'workflows/b.json',
-        'workflows/c.json'
-      ])
-
-      // V1 tab state stored by setStorageValue (localStorage fallback keys)
-      localStorage.setItem(
-        'Comfy.OpenWorkflowsPaths',
-        JSON.stringify([
-          'workflows/a.json',
-          'workflows/b.json',
-          'workflows/c.json'
-        ])
-      )
-      localStorage.setItem('Comfy.ActiveWorkflowIndex', JSON.stringify(1))
-
-      // Run migration (simulating upgrade from pre-V2 to V2)
-      const clientId = 'client-123'
-      const result = migrateV1toV2(workspaceId, clientId)
-      expect(result).toBe(3)
-
-      // V2 tab state should be readable via the V2 API
-      const openPaths = readOpenPaths(clientId, workspaceId)
-
-      // This is the bug: V1 tab state is NOT migrated, so openPaths is null
-      expect(openPaths).not.toBeNull()
-      expect(openPaths!.paths).toEqual([
-        'workflows/a.json',
-        'workflows/b.json',
-        'workflows/c.json'
-      ])
-      expect(openPaths!.activeIndex).toBe(1)
-    })
-
-    it('does not migrate tab state when V1 tab state keys are absent', () => {
-      const v1Drafts = {
-        'workflows/a.json': {
-          data: '{}',
-          updatedAt: 1000,
-          name: 'a',
-          isTemporary: true
-        }
-      }
-      setV1Data(v1Drafts, ['workflows/a.json'])
-
-      // No V1 tab state keys in localStorage
-      migrateV1toV2(workspaceId)
-
-      const openPaths = readOpenPaths('any-client-id', workspaceId)
-
-      // No tab state to migrate — should remain null
-      expect(openPaths).toBeNull()
-    })
-  })
-
  describe('getMigrationStatus', () => {
    it('reports correct status', () => {
      setV1Data(
--- a/src/platform/workflow/persistence/migration/migrateV1toV2.ts
+++ b/src/platform/workflow/persistence/migration/migrateV1toV2.ts
@@ -10,12 +10,7 @@ import type { DraftIndexV2 } from '../base/draftTypes'
 import { upsertEntry, createEmptyIndex } from '../base/draftCacheV2'
 import { hashPath } from '../base/hashUtil'
 import { getWorkspaceId } from '../base/storageKeys'
-import {
-  readIndex,
-  writeIndex,
-  writeOpenPaths,
-  writePayload
-} from '../base/storageIO'
+import { readIndex, writeIndex, writePayload } from '../base/storageIO'

 /**
 * V1 draft snapshot structure (from draftCache.ts)
@@ -32,9 +27,7 @@ interface V1DraftSnapshot {
 */
 const V1_KEYS = {
  drafts: (workspaceId: string) => `Comfy.Workflow.Drafts:${workspaceId}`,
-  order: (workspaceId: string) => `Comfy.Workflow.DraftOrder:${workspaceId}`,
-  openPaths: 'Comfy.OpenWorkflowsPaths',
-  activeIndex: 'Comfy.ActiveWorkflowIndex'
+  order: (workspaceId: string) => `Comfy.Workflow.DraftOrder:${workspaceId}`
 }

 /**
@@ -71,10 +64,7 @@ function readV1Drafts(
 *
 * @returns Number of drafts migrated, or -1 if migration not needed/failed
 */
-export function migrateV1toV2(
-  workspaceId: string = getWorkspaceId(),
-  clientId?: string
-): number {
+export function migrateV1toV2(workspaceId: string = getWorkspaceId()): number {
  // Check if V2 already exists
  if (isV2MigrationComplete(workspaceId)) {
    return -1
@@ -126,48 +116,12 @@ export function migrateV1toV2(
    return -1
  }

-  // Migrate V1 tab state pointers to V2 sessionStorage format.
-  // V1 used setStorageValue which stored tab state in localStorage as fallback.
-  // V2 uses sessionStorage keyed by clientId. Without this migration,
-  // users upgrading from V1 lose their open tab list.
-  migrateV1TabState(workspaceId, clientId)
-
  if (migrated > 0) {
    console.warn(`[V2 Migration] Migrated ${migrated} drafts from V1 to V2`)
  }
  return migrated
 }

-/**
- * Migrates V1 tab state (open paths + active index) to V2 format.
- * V1 stored these in localStorage via setStorageValue fallback.
- * V2 uses sessionStorage keyed by clientId.
- */
-function migrateV1TabState(workspaceId: string, clientId?: string): void {
-  if (!clientId) return
-
-  try {
-    const pathsJson = localStorage.getItem(V1_KEYS.openPaths)
-    if (!pathsJson) return
-
-    const paths = JSON.parse(pathsJson)
-    if (!Array.isArray(paths) || paths.length === 0) return
-
-    const indexJson = localStorage.getItem(V1_KEYS.activeIndex)
-    let activeIndex = 0
-    if (indexJson !== null) {
-      const parsed = JSON.parse(indexJson)
-      if (typeof parsed === 'number' && Number.isFinite(parsed)) {
-        activeIndex = Math.min(Math.max(0, parsed), paths.length - 1)
-      }
-    }
-
-    writeOpenPaths(clientId, { workspaceId, paths, activeIndex })
-  } catch {
-    // Best effort - don't block draft migration on tab state errors
-  }
-}
-
 /**
 * Cleans up V1 data after successful migration.
 * Should NOT be called until 2026-07-15 to allow rollback.
--- a/src/renderer/extensions/linearMode/DropZone.vue
+++ b/src/renderer/extensions/linearMode/DropZone.vue
@@ -4,7 +4,6 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

 import ImageLightbox from '@/components/common/ImageLightbox.vue'
-import { useClickDragGuard } from '@/composables/useClickDragGuard'
 import { cn } from '@/utils/tailwindUtil'

 defineOptions({ inheritAttrs: false })
@@ -31,17 +30,26 @@ const {

 const dropZoneRef = ref<HTMLElement | null>(null)
 const canAcceptDrop = ref(false)
-const clickGuard = useClickDragGuard(5)
+const pointerStart = ref<{ x: number; y: number } | null>(null)
 const lightboxOpen = ref(false)

 function onPointerDown(e: PointerEvent) {
-  clickGuard.recordStart(e)
+  pointerStart.value = { x: e.clientX, y: e.clientY }
 }

 function onIndicatorClick(e: MouseEvent) {
-  const dragged = e.detail !== 0 && clickGuard.wasDragged(e)
-  clickGuard.reset()
-  if (dragged) return
+  if (e.detail !== 0) {
+    const start = pointerStart.value
+    if (start) {
+      const dx = e.clientX - start.x
+      const dy = e.clientY - start.y
+      if (dx * dx + dy * dy > 25) {
+        pointerStart.value = null
+        return
+      }
+    }
+  }
+  pointerStart.value = null
  dropIndicator?.onClick?.(e)
 }

--- a/src/renderer/extensions/linearMode/ImagePreview.vue
+++ b/src/renderer/extensions/linearMode/ImagePreview.vue
@@ -2,29 +2,19 @@
 import { ref, useTemplateRef } from 'vue'

 import ZoomPane from '@/components/ui/ZoomPane.vue'
-import { useExecutionStatus } from '@/renderer/extensions/linearMode/useExecutionStatus'
 import { cn } from '@/utils/tailwindUtil'

-const { executionStatusMessage } = useExecutionStatus()
-
 defineOptions({ inheritAttrs: false })

-const { src, showSize = true } = defineProps<{
+const { src } = defineProps<{
  src: string
  mobile?: boolean
  label?: string
-  showSize?: boolean
 }>()

 const imageRef = useTemplateRef('imageRef')
-const width = ref<number | null>(null)
-const height = ref<number | null>(null)
-
-function onImageLoad() {
-  if (!imageRef.value || !showSize) return
-  width.value = imageRef.value.naturalWidth
-  height.value = imageRef.value.naturalHeight
-}
+const width = ref('')
+const height = ref('')
 </script>
 <template>
  <ZoomPane
@@ -37,7 +27,13 @@ function onImageLoad() {
      :src
      v-bind="slotProps"
      class="size-full object-contain"
-      @load="onImageLoad"
+      @load="
+        () => {
+          if (!imageRef) return
+          width = `${imageRef.naturalWidth}`
+          height = `${imageRef.naturalHeight}`
+        }
+      "
    />
  </ZoomPane>
  <img
@@ -45,15 +41,15 @@ function onImageLoad() {
    ref="imageRef"
    class="grow object-contain contain-size"
    :src
-    @load="onImageLoad"
+    @load="
+      () => {
+        if (!imageRef) return
+        width = `${imageRef.naturalWidth}`
+        height = `${imageRef.naturalHeight}`
+      }
+    "
  />
-  <span
-    v-if="executionStatusMessage"
-    class="animate-pulse self-center text-muted md:z-10"
-  >
-    {{ executionStatusMessage }}
-  </span>
-  <span v-else-if="width && height" class="self-center md:z-10">
+  <span class="self-center md:z-10">
    {{ `${width} x ${height}` }}
    <template v-if="label"> | {{ label }}</template>
  </span>
--- a/src/renderer/extensions/linearMode/LatentPreview.vue
+++ b/src/renderer/extensions/linearMode/LatentPreview.vue
@@ -1,23 +1,7 @@
-<script setup lang="ts">
-import { useExecutionStatus } from '@/renderer/extensions/linearMode/useExecutionStatus'
-
-const { executionStatusMessage } = useExecutionStatus()
-</script>
 <template>
-  <div
-    class="sz-full flex min-h-0 flex-1 flex-col items-center justify-center gap-3"
-  >
-    <div class="flex h-full items-center justify-center">
-      <div
-        class="skeleton-shimmer aspect-square size-[min(50vw,50vh)] rounded-lg"
-      />
-    </div>
-
-    <span
-      v-if="executionStatusMessage"
-      class="animate-pulse text-sm text-muted"
-    >
-      {{ executionStatusMessage }}
-    </span>
+  <div class="flex min-h-0 w-full flex-1 items-center justify-center">
+    <div
+      class="skeleton-shimmer aspect-square size-[min(50vw,50vh)] rounded-lg"
+    />
  </div>
 </template>
--- a/src/renderer/extensions/linearMode/LinearPreview.vue
+++ b/src/renderer/extensions/linearMode/LinearPreview.vue
@@ -136,7 +136,6 @@ async function rerun(e: Event) {
    v-if="canShowPreview && latentPreview"
    :mobile
    :src="latentPreview"
-    :show-size="false"
  />
  <MediaOutputPreview
    v-else-if="selectedOutput"
--- a/src/renderer/extensions/linearMode/getExecutionStatusMessage.test.ts
+++ b/src/renderer/extensions/linearMode/getExecutionStatusMessage.test.ts
@@ -1,100 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-
-import { getExecutionStatusMessage } from './getExecutionStatusMessage'
-
-// Pass-through t so we can assert the i18n key
-const t = (key: string) => key
-
-describe('getExecutionStatusMessage', () => {
-  describe('custom messages', () => {
-    it('returns custom message from properties when set', () => {
-      expect(
-        getExecutionStatusMessage(t, 'KSampler', null, {
-          'Execution Message': 'custom status'
-        })
-      ).toBe('custom status')
-    })
-
-    it('ignores empty or whitespace-only custom message', () => {
-      expect(
-        getExecutionStatusMessage(t, 'KSampler', null, {
-          'Execution Message': '  '
-        })
-      ).toBe('execution.generating')
-    })
-  })
-
-  describe('API nodes', () => {
-    it('returns processing for API nodes', () => {
-      const apiDef = { api_node: true } as ComfyNodeDefImpl
-      expect(getExecutionStatusMessage(t, 'SomeApiNode', apiDef)).toBe(
-        'execution.processing'
-      )
-    })
-
-    it('statusMap takes precedence over api_node flag', () => {
-      const apiDef = { api_node: true } as ComfyNodeDefImpl
-      expect(getExecutionStatusMessage(t, 'KSampler', apiDef)).toBe(
-        'execution.generating'
-      )
-    })
-  })
-
-  describe('Node type matching', () => {
-    it('does not match partial PascalCase words', () => {
-      expect(getExecutionStatusMessage(t, 'Loads')).toBeNull()
-    })
-
-    it('matches identifier mid-string at PascalCase boundary', () => {
-      expect(getExecutionStatusMessage(t, 'CompositeSaveImage')).toBe(
-        'execution.saving'
-      )
-    })
-
-    it('matches identifier followed by non-letter characters', () => {
-      expect(getExecutionStatusMessage(t, 'Save_V2')).toBe('execution.saving')
-      expect(getExecutionStatusMessage(t, 'LoadImage🐍')).toBe(
-        'execution.loading'
-      )
-    })
-
-    const testNodeTypes: [string, string[]][] = [
-      ['generating', ['KSampler', 'SamplerCustomAdvanced']],
-      [
-        'saving',
-        ['SaveImage', 'SaveAnimatedWEBP', 'PreviewImage', 'MaskPreview']
-      ],
-      ['loading', ['LoadImage', 'VAELoader', 'CheckpointLoaderSimple']],
-      [
-        'encoding',
-        ['VAEEncode', 'StableCascade_StageC_VAEEncode', 'CLIPTextEncode']
-      ],
-      ['decoding', ['VAEDecode', 'VAEDecodeHunyuan3D']],
-      [
-        'resizing',
-        ['ImageUpscaleWithModel', 'LatentUpscale', 'ResizeImageMaskNode']
-      ],
-      [
-        'processing',
-        ['TorchCompileModel', 'SVD_img2vid_Conditioning', 'ModelMergeSimple']
-      ],
-      ['generatingVideo', ['WanImageToVideo', 'WanFunControlToVideo']],
-      ['processingVideo', ['Video Slice', 'CreateVideo']],
-      ['training', ['TrainLoraNode']]
-    ]
-
-    it.for(
-      testNodeTypes.flatMap(([status, nodes]) =>
-        nodes.map((node) => [status, node] as const)
-      )
-    )('%s ← %s', ([status, nodeType]) => {
-      expect(getExecutionStatusMessage(t, nodeType)).toBe(`execution.${status}`)
-    })
-  })
-
-  it('returns null for nodes matching no pattern', () => {
-    expect(getExecutionStatusMessage(t, 'PrimitiveString')).toBeNull()
-  })
-})
--- a/src/renderer/extensions/linearMode/getExecutionStatusMessage.ts
+++ b/src/renderer/extensions/linearMode/getExecutionStatusMessage.ts
@@ -1,67 +0,0 @@
-import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-
-type ExecutionStatusKey =
-  | 'generating'
-  | 'saving'
-  | 'loading'
-  | 'encoding'
-  | 'decoding'
-  | 'processing'
-  | 'resizing'
-  | 'generatingVideo'
-  | 'processingVideo'
-  | 'training'
-
-/**
- * Specific status messages for nodes that can't be matched by PascalCase
- * identifier patterns (e.g. unconventional naming, spaces).
- */
-const statusMap: Record<string, ExecutionStatusKey> = {
-  // Video utility nodes with non-standard naming
-  'Video Slice': 'processingVideo',
-  GetVideoComponents: 'processingVideo',
-  CreateVideo: 'processingVideo',
-
-  // Training
-  TrainLoraNode: 'training'
-}
-
-/**
- * Matches a PascalCase identifier within a node type name.
- */
-function pascalId(...ids: string[]): RegExp {
-  return new RegExp('(?:' + ids.join('|') + ')(?![a-z])')
-}
-
-const identifierRules: [RegExp, ExecutionStatusKey][] = [
-  [pascalId('Save', 'Preview'), 'saving'],
-  [pascalId('Load', 'Loader'), 'loading'],
-  [pascalId('Encode'), 'encoding'],
-  [pascalId('Decode'), 'decoding'],
-  [pascalId('Compile', 'Conditioning', 'Merge'), 'processing'],
-  [pascalId('Upscale', 'Resize'), 'resizing'],
-  [pascalId('ToVideo'), 'generatingVideo'],
-  [pascalId('Sampler'), 'generating']
-]
-
-export function getExecutionStatusMessage(
-  t: (key: string) => string,
-  nodeType: string,
-  nodeDef?: ComfyNodeDefImpl | null,
-  properties?: Record<string, unknown>
-): string | null {
-  const customMessage = properties?.['Execution Message']
-  if (typeof customMessage === 'string' && customMessage.trim()) {
-    return customMessage.trim()
-  }
-
-  if (nodeType in statusMap) return t(`execution.${statusMap[nodeType]}`)
-
-  for (const [pattern, key] of identifierRules) {
-    if (pattern.test(nodeType)) return t(`execution.${key}`)
-  }
-
-  if (nodeDef?.api_node) return t('execution.processing')
-
-  return null
-}
--- a/src/renderer/extensions/linearMode/useExecutionStatus.ts
+++ b/src/renderer/extensions/linearMode/useExecutionStatus.ts
@@ -1,41 +0,0 @@
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { getExecutionStatusMessage } from '@/renderer/extensions/linearMode/getExecutionStatusMessage'
-import { app } from '@/scripts/app'
-import { useExecutionStore } from '@/stores/executionStore'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
-import {
-  executionIdToNodeLocatorId,
-  getNodeByLocatorId
-} from '@/utils/graphTraversalUtil'
-
-function resolveStatus(
-  t: (key: string) => string,
-  nodeDefStore: ReturnType<typeof useNodeDefStore>,
-  executionId: string | number
-): string | null {
-  const locatorId = executionIdToNodeLocatorId(app.rootGraph, executionId)
-  if (!locatorId) return null
-
-  const node = getNodeByLocatorId(app.rootGraph, locatorId)
-  const nodeType = node?.type
-  if (!nodeType) return null
-
-  const nodeDef = nodeDefStore.nodeDefsByName[nodeType] ?? null
-  return getExecutionStatusMessage(t, nodeType, nodeDef, node.properties)
-}
-
-export function useExecutionStatus() {
-  const { t } = useI18n()
-  const executionStore = useExecutionStore()
-  const nodeDefStore = useNodeDefStore()
-
-  const executionStatusMessage = computed<string | null>(() => {
-    const executionId = executionStore.executingNodeId
-    if (!executionId) return null
-    return resolveStatus(t, nodeDefStore, executionId) || t('execution.running')
-  })
-
-  return { executionStatusMessage }
-}
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -101,11 +101,7 @@

    <!-- Video Dimensions -->
    <div class="mt-2 text-center text-xs text-muted-foreground">
-      <span
-        v-if="videoError"
-        class="text-red-400"
-        data-testid="error-loading-video"
-      >
+      <span v-if="videoError" class="text-red-400">
        {{ $t('g.errorLoadingVideo') }}
      </span>
      <span v-else-if="showLoader" class="text-smoke-400">
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -117,11 +117,7 @@
      v-if="viewMode === 'gallery'"
      class="pt-2 text-center text-xs text-base-foreground"
    >
-      <span
-        v-if="imageError"
-        class="text-error"
-        data-testid="error-loading-image"
-      >
+      <span v-if="imageError" class="text-error">
        {{ $t('g.errorLoadingImage') }}
      </span>
      <span v-else-if="showLoader" class="text-base-foreground">
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -304,7 +304,6 @@ import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeS
 import { app } from '@/scripts/app'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { isVideoOutput } from '@/utils/litegraphUtil'
@@ -356,7 +355,6 @@ const nodeLocatorId = computed(() => getLocatorIdFromNodeData(nodeData))
 const { executing, progress } = useNodeExecutionState(nodeLocatorId)
 const executionErrorStore = useExecutionErrorStore()
 const missingModelStore = useMissingModelStore()
-const missingNodesErrorStore = useMissingNodesErrorStore()
 const hasExecutionError = computed(
  () => executionErrorStore.lastExecutionErrorNodeId === nodeData.id
 )
@@ -370,7 +368,7 @@ const hasAnyError = computed((): boolean => {
    missingModelStore.hasMissingModelOnNode(nodeLocatorId.value) ||
    (lgraphNode.value &&
      (executionErrorStore.isContainerWithInternalError(lgraphNode.value) ||
-        missingNodesErrorStore.isContainerWithMissingNode(lgraphNode.value) ||
+        executionErrorStore.isContainerWithMissingNode(lgraphNode.value) ||
        missingModelStore.isContainerWithMissingModel(lgraphNode.value)))
  )
 })
--- a/src/renderer/extensions/vueNodes/components/NodeFooter.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeFooter.vue
@@ -28,7 +28,7 @@
          '-z-10 bg-node-component-header-surface'
        )
      "
-      :style="headerColorStyle"
+      :style="{ backgroundColor: headerColor }"
      @click.stop="$emit('enterSubgraph')"
    >
      <div class="ml-auto flex h-full w-1/2 items-center justify-center gap-2">
@@ -73,7 +73,6 @@
          '-z-10 bg-node-component-header-surface'
        )
      "
-      :style="headerColorStyle"
      @click.stop="$emit('toggleAdvanced')"
    >
      <div class="ml-auto flex h-full w-1/2 items-center justify-center gap-2">
@@ -125,7 +124,7 @@
          '-z-10 bg-node-component-header-surface'
        )
      "
-      :style="headerColorStyle"
+      :style="{ backgroundColor: headerColor }"
      @click.stop="$emit('enterSubgraph')"
    >
      <div class="flex size-full items-center justify-center gap-2">
@@ -146,7 +145,6 @@
        '-z-10 bg-node-component-header-surface'
      )
    "
-    :style="headerColorStyle"
    @click.stop="$emit('toggleAdvanced')"
  >
    <div class="flex size-full items-center justify-center gap-2">
@@ -235,10 +233,6 @@ const getTabStyles = (isBackground = false) => {
  )
 }

-const headerColorStyle = computed(() =>
-  props.headerColor ? { backgroundColor: props.headerColor } : undefined
-)
-
 // Case 1 context: Split widths
 const errorTabWidth = 'w-[calc(50%+4px)]'
 const enterTabFullWidth = 'w-[calc(100%+8px)]'
--- a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
@@ -1,8 +1,7 @@
-import { onScopeDispose, toValue } from 'vue'
+import { onScopeDispose, ref, toValue } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'

 import { isMiddlePointerInput } from '@/base/pointerUtils'
-import { useClickDragGuard } from '@/composables/useClickDragGuard'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
@@ -29,7 +28,9 @@ export function useNodePointerInteractions(

  let hasDraggingStarted = false

-  const dragGuard = useClickDragGuard(3)
+  const startPosition = ref({ x: 0, y: 0 })
+
+  const DRAG_THRESHOLD = 3 // pixels

  function onPointerdown(event: PointerEvent) {
    if (forwardMiddlePointerIfNeeded(event)) return
@@ -56,7 +57,7 @@ export function useNodePointerInteractions(
      return
    }

-    dragGuard.recordStart(event)
+    startPosition.value = { x: event.clientX, y: event.clientY }

    safeDragStart(event, nodeId)
  }
@@ -84,7 +85,11 @@ export function useNodePointerInteractions(
    }
    // Check if we should start dragging (pointer moved beyond threshold)
    if (lmbDown && !layoutStore.isDraggingVueNodes.value) {
-      if (dragGuard.wasDragged(event)) {
+      const dx = event.clientX - startPosition.value.x
+      const dy = event.clientY - startPosition.value.y
+      const distance = Math.sqrt(dx * dx + dy * dy)
+
+      if (distance > DRAG_THRESHOLD) {
        layoutStore.isDraggingVueNodes.value = true
        handleNodeSelect(event, nodeId)
      }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
GitHub Action	def709cd7d	[automated] Apply ESLint and Oxfmt fixes	2026-03-24 02:13:53 +00:00
Matt Miller	e6a423c36e	fix: unexport FILE_INPUT_FIELDS and fix lint - Remove export from FILE_INPUT_FIELDS (flagged by knip as unused export) - Extract EmptyFileInputNode interface to fix oxfmt line length Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-23 19:11:01 -07:00
Matt Miller	1b6c2f0add	fix: address review findings for empty file input validation - Broaden check to catch null, undefined, and whitespace-only values - Skip linked inputs (array refs to upstream nodes) to avoid false positives - Scope validation to target nodes during partial execution - Use `as const` for FILE_INPUT_FIELDS - Add test coverage for edge cases (null, undefined, whitespace, linked inputs, partial execution filtering, missing fields) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-23 18:41:04 -07:00
Matt Miller	68c6a9d7e2	fix: block workflow queue when file input nodes have empty selections Prevents submitting workflows where LoadImage, LoadAudio, Load3D, or LoadVideo nodes have no file selected. Shows a localized error dialog listing the affected nodes instead of sending an invalid request. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-23 18:29:53 -07:00