refactor: migrate node tooltips from PrimeVue to BaseTooltip

Replace PrimeVue v-tooltip directive with Reka UI BaseTooltip component in NodeHeader, InputSlot, OutputSlot, and NodeWidgets. Remove PrimeVue-specific tooltip config (createTooltipConfig, hideTooltipsGlobally, tooltipsTemporarilyDisabled, global event listeners) from useNodeTooltips composable, keeping only text-resolution functions and tooltipsEnabled. Add tooltipDelay computed from LiteGraph.Node.TooltipDelay setting.
refactor: migrate buildTooltipConfig consumers to BaseTooltip
2026-03-25 06:47:35 +00:00 · 2026-03-24 10:59:32 +09:00 · 2026-03-22 08:13:52 +09:00 · 2026-03-21 21:36:22 +09:00 · 2026-03-21 21:30:39 +09:00 · 2026-03-21 20:02:36 +09:00
306 changed files with 3651 additions and 17046 deletions
--- a/.github/workflows/release-version-bump.yaml
+++ b/.github/workflows/release-version-bump.yaml
@@ -30,7 +30,6 @@ concurrency:

 jobs:
  bump-version:
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
    runs-on: ubuntu-latest
    permissions:
      contents: write
--- a/.github/workflows/weekly-docs-check.yaml
+++ b/.github/workflows/weekly-docs-check.yaml
@@ -18,7 +18,6 @@ concurrency:

 jobs:
  docs-check:
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
    runs-on: ubuntu-latest
    timeout-minutes: 45
    steps:
--- a/3
+++ b/3
@@ -51,9 +51,6 @@
 # Manager
 /src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata

-# Model-to-node mappings (cloud team)
-/src/platform/assets/mappings/                    @deepme987
-
 # LLM Instructions (blank on purpose)
 .claude/
 .cursor/
--- a/apps/desktop-ui/src/stores/maintenanceTaskStore.ts
+++ b/apps/desktop-ui/src/stores/maintenanceTaskStore.ts
@@ -15,7 +15,7 @@ type ValidationState = InstallValidation['basePath']
 type IndexedUpdate = InstallValidation & Record<string, ValidationState>

 /** State of a maintenance task, managed by the maintenance task store. */
-class MaintenanceTaskRunner {
+export class MaintenanceTaskRunner {
  constructor(readonly task: MaintenanceTask) {}

  private _state?: MaintenanceTaskState
--- 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/env.d.ts
+++ b/apps/website/src/env.d.ts
@@ -1 +0,0 @@
-/// <reference types="astro/client" />
--- 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/assets/subgraphs/test-values-input-subgraph.json
+++ b/browser_tests/assets/subgraphs/test-values-input-subgraph.json
@@ -1,407 +0,0 @@
-{
-  "id": "0cc04f4c-d744-462d-8638-4e5f5e3947e7",
-  "revision": 0,
-  "last_node_id": 19,
-  "last_link_id": 24,
-  "nodes": [
-    {
-      "id": 14,
-      "type": "CLIPLoader",
-      "pos": [143.16716182216328, 290.16372862874033],
-      "size": [270, 117.3125],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "CLIP",
-          "type": "CLIP",
-          "links": [21]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CLIPLoader"
-      },
-      "widgets_values": [null, "stable_diffusion", "default"]
-    },
-    {
-      "id": 18,
-      "type": "PreviewImage",
-      "pos": [1305.1455526601603, 472.17095792625025],
-      "size": [225, 48],
-      "flags": {},
-      "order": 4,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "images",
-          "type": "IMAGE",
-          "link": 24
-        }
-      ],
-      "outputs": [],
-      "properties": {
-        "Node name for S&R": "PreviewImage"
-      },
-      "widgets_values": []
-    },
-    {
-      "id": 19,
-      "type": "314bbb9f-f1cc-456c-b14f-2ba92bd4a597",
-      "pos": [794.198171390827, 452.45433419677147],
-      "size": [225, 172],
-      "flags": {},
-      "order": 3,
-      "mode": 0,
-      "inputs": [
-        {
-          "label": "renamed_clip",
-          "name": "clip",
-          "type": "CLIP",
-          "link": 21
-        },
-        {
-          "label": "renamed_seed",
-          "name": "seed",
-          "type": "INT",
-          "widget": {
-            "name": "seed"
-          },
-          "link": 22
-        },
-        {
-          "label": "renamed_vae",
-          "name": "vae",
-          "type": "VAE",
-          "link": 23
-        }
-      ],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": [24]
-        }
-      ],
-      "title": "Input Test Subgraph",
-      "properties": {
-        "proxyWidgets": [
-          ["12", "seed"],
-          ["15", "text"]
-        ]
-      },
-      "widgets_values": []
-    },
-    {
-      "id": 13,
-      "type": "PrimitiveInt",
-      "pos": [155.04048166054417, 773.3816055422594],
-      "size": [270, 82],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "INT",
-          "type": "INT",
-          "links": [22]
-        }
-      ],
-      "title": "Seed Int",
-      "properties": {
-        "Node name for S&R": "PrimitiveInt"
-      },
-      "widgets_values": [0, "randomize"]
-    },
-    {
-      "id": 17,
-      "type": "VAELoader",
-      "pos": [163.6043676075426, 543.9624492717659],
-      "size": [270, 82.65625],
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "VAE",
-          "type": "VAE",
-          "links": [23]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "VAELoader"
-      },
-      "widgets_values": ["pixel_space"]
-    }
-  ],
-  "links": [
-    [21, 14, 0, 19, 0, "CLIP"],
-    [22, 13, 0, 19, 1, "INT"],
-    [23, 17, 0, 19, 2, "VAE"],
-    [24, 19, 0, 18, 0, "IMAGE"]
-  ],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "314bbb9f-f1cc-456c-b14f-2ba92bd4a597",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 19,
-          "lastLinkId": 24,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "Input Test Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [
-            358.8694807105848, 439.23932667242485, 123.14453125,
-            99.99999999999994
-          ]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [1408.5510580294986, 463.2512895126797, 120, 60]
-        },
-        "inputs": [
-          {
-            "id": "cfaad2dc-7758-412c-a4ac-dc2e6d37b28c",
-            "name": "clip",
-            "type": "CLIP",
-            "linkIds": [16],
-            "localized_name": "clip",
-            "label": "renamed_clip",
-            "pos": [462.0140119605848, 459.23932667242485]
-          },
-          {
-            "id": "2e4600ea-e1b1-42ca-b43a-e066fd080774",
-            "name": "seed",
-            "type": "INT",
-            "linkIds": [15],
-            "localized_name": "seed",
-            "label": "renamed_seed",
-            "pos": [462.0140119605848, 479.23932667242485]
-          },
-          {
-            "id": "86ed2da7-db02-454a-9362-70a3fa3e91bf",
-            "name": "vae",
-            "type": "VAE",
-            "linkIds": [19],
-            "localized_name": "vae",
-            "label": "renamed_vae",
-            "pos": [462.0140119605848, 499.23932667242485]
-          }
-        ],
-        "outputs": [
-          {
-            "id": "8670d1a7-0d44-4688-b7dd-d4b423f1aee0",
-            "name": "IMAGE",
-            "type": "IMAGE",
-            "linkIds": [20],
-            "localized_name": "IMAGE",
-            "pos": [1428.5510580294986, 483.2512895126797]
-          }
-        ],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 12,
-            "type": "KSampler",
-            "pos": [769.2424728654022, 512.726159169824],
-            "size": [270, 262],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "model",
-                "name": "model",
-                "type": "MODEL",
-                "link": null
-              },
-              {
-                "localized_name": "positive",
-                "name": "positive",
-                "type": "CONDITIONING",
-                "link": 17
-              },
-              {
-                "localized_name": "negative",
-                "name": "negative",
-                "type": "CONDITIONING",
-                "link": null
-              },
-              {
-                "localized_name": "latent_image",
-                "name": "latent_image",
-                "type": "LATENT",
-                "link": null
-              },
-              {
-                "localized_name": "seed",
-                "name": "seed",
-                "type": "INT",
-                "widget": {
-                  "name": "seed"
-                },
-                "link": 15
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "LATENT",
-                "name": "LATENT",
-                "type": "LATENT",
-                "links": [18]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "KSampler"
-            },
-            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
-          },
-          {
-            "id": 16,
-            "type": "VAEDecode",
-            "pos": [1208.5510580294986, 469.21581253470083],
-            "size": [140, 46],
-            "flags": {},
-            "order": 2,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "samples",
-                "name": "samples",
-                "type": "LATENT",
-                "link": 18
-              },
-              {
-                "localized_name": "vae",
-                "name": "vae",
-                "type": "VAE",
-                "link": 19
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "IMAGE",
-                "name": "IMAGE",
-                "type": "IMAGE",
-                "links": [20]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "VAEDecode"
-            },
-            "widgets_values": []
-          },
-          {
-            "id": 15,
-            "type": "CLIPTextEncode",
-            "pos": [681.4596332342014, 243.17567172890932],
-            "size": [400, 200],
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "clip",
-                "name": "clip",
-                "type": "CLIP",
-                "link": 16
-              },
-              {
-                "label": "renamed_from_sidepanel",
-                "localized_name": "text",
-                "name": "text",
-                "type": "STRING",
-                "widget": {
-                  "name": "text"
-                },
-                "link": null
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "CONDITIONING",
-                "name": "CONDITIONING",
-                "type": "CONDITIONING",
-                "links": [17]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "CLIPTextEncode"
-            },
-            "widgets_values": [""]
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 17,
-            "origin_id": 15,
-            "origin_slot": 0,
-            "target_id": 12,
-            "target_slot": 1,
-            "type": "CONDITIONING"
-          },
-          {
-            "id": 18,
-            "origin_id": 12,
-            "origin_slot": 0,
-            "target_id": 16,
-            "target_slot": 0,
-            "type": "LATENT"
-          },
-          {
-            "id": 16,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 15,
-            "target_slot": 0,
-            "type": "CLIP"
-          },
-          {
-            "id": 15,
-            "origin_id": -10,
-            "origin_slot": 1,
-            "target_id": 12,
-            "target_slot": 4,
-            "type": "INT"
-          },
-          {
-            "id": 19,
-            "origin_id": -10,
-            "origin_slot": 2,
-            "target_id": 16,
-            "target_slot": 1,
-            "type": "VAE"
-          },
-          {
-            "id": 20,
-            "origin_id": 16,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 0,
-            "type": "IMAGE"
-          }
-        ],
-        "extra": {}
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 0.6727925600199565,
-      "offset": [446.69747171876463, 99.95078257277316]
-    }
-  },
-  "version": 0.4
-}
--- 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'
@@ -65,9 +60,7 @@ export const TestIds = {
    decrement: 'decrement',
    increment: 'increment',
    domWidgetTextarea: 'dom-widget-textarea',
-    subgraphEnterButton: 'subgraph-enter-button',
-    formDropdownMenu: 'form-dropdown-menu',
-    formDropdownTrigger: 'form-dropdown-trigger'
+    subgraphEnterButton: 'subgraph-enter-button'
  },
  builder: {
    ioItem: 'builder-io-item',
@@ -83,10 +76,6 @@ export const TestIds = {
  },
  user: {
    currentUserIndicator: 'current-user-indicator'
-  },
-  errors: {
-    imageLoadError: 'error-loading-image',
-    videoLoadError: 'error-loading-video'
  }
 } as const

@@ -112,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/fixtures/utils/litegraphUtils.ts
+++ b/browser_tests/fixtures/utils/litegraphUtils.ts
@@ -281,14 +281,6 @@ export class NodeReference {
  getType(): Promise<string> {
    return this.getProperty('type')
  }
-  async centerOnNode(): Promise<void> {
-    await this.comfyPage.page.evaluate((id) => {
-      const node = window.app!.canvas.graph!.getNodeById(id)
-      if (!node) throw new Error(`Node ${id} not found`)
-      window.app!.canvas.centerOnNode(node)
-    }, this.id)
-    await this.comfyPage.nextFrame()
-  }
  async getPosition(): Promise<Position> {
    const pos = await this.comfyPage.canvasOps.convertOffsetToCanvas(
      await this.getProperty<[number, number]>('pos')
--- a/browser_tests/helpers/subgraphTestUtils.ts
+++ b/browser_tests/helpers/subgraphTestUtils.ts
@@ -1,5 +1,3 @@
-import type { Page } from '@playwright/test'
-
 import type { LGraph, Subgraph } from '../../src/lib/litegraph/src/litegraph'
 import { isSubgraph } from '../../src/utils/typeGuardUtil'

@@ -16,30 +14,3 @@ export function assertSubgraph(
    )
  }
 }
-
-/**
- * Returns the widget-input slot Y position and the node title height
- * for the promoted "text" input on the SubgraphNode.
- *
- * The slot Y should be at the widget row, not the header. A value near
- * zero or negative indicates the slot is positioned at the header (the bug).
- */
-export function getTextSlotPosition(page: Page, nodeId: string) {
-  return page.evaluate((id) => {
-    const node = window.app!.canvas.graph!.getNodeById(id)
-    if (!node) return null
-
-    const titleHeight = window.LiteGraph!.NODE_TITLE_HEIGHT
-
-    for (const input of node.inputs) {
-      if (!input.widget || input.type !== 'STRING') continue
-      return {
-        hasPos: !!input.pos,
-        posY: input.pos?.[1] ?? null,
-        widgetName: input.widget.name,
-        titleHeight
-      }
-    }
-    return null
-  }, nodeId)
-}
--- a/browser_tests/tests/appModeDropdownClipping.spec.ts
+++ b/browser_tests/tests/appModeDropdownClipping.spec.ts
@@ -4,7 +4,6 @@ import {
  comfyPageFixture as test,
  comfyExpect as expect
 } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'

 /**
 * Default workflow widget inputs as [nodeId, widgetName] tuples.
@@ -144,12 +143,15 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
    const dropdownButton = imageRow.locator('button:has(> span)').first()
    await dropdownButton.click()

-    const menu = comfyPage.page
-      .getByTestId(TestIds.widgets.formDropdownMenu)
+    // The unstyled PrimeVue Popover renders with role="dialog".
+    // Locate the one containing the image grid (filter buttons like "All", "Inputs").
+    const popover = comfyPage.page
+      .getByRole('dialog')
+      .filter({ has: comfyPage.page.getByRole('button', { name: 'All' }) })
      .first()
-    await expect(menu).toBeVisible({ timeout: 5000 })
+    await expect(popover).toBeVisible({ timeout: 5000 })

-    const isInViewport = await menu.evaluate((el) => {
+    const isInViewport = await popover.evaluate((el) => {
      const rect = el.getBoundingClientRect()
      return (
        rect.top >= 0 &&
@@ -160,7 +162,7 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
    })
    expect(isInViewport).toBe(true)

-    const isClipped = await menu.evaluate(isClippedByAnyAncestor)
+    const isClipped = await popover.evaluate(isClippedByAnyAncestor)
    expect(isClipped).toBe(false)
  })
 })
--- a/browser_tests/tests/appModeWidgetRename.spec.ts
+++ b/browser_tests/tests/appModeWidgetRename.spec.ts
@@ -30,18 +30,10 @@ async function setupSubgraphBuilder(comfyPage: ComfyPage) {
  await appMode.enterBuilder()
  await appMode.goToInputs()

-  // Reset zoom to 1 and center on the subgraph node so click coords are accurate
-  await comfyPage.canvasOps.setScale(1)
-  await subgraphNode.centerOnNode()
-
  // Click the promoted seed widget on the canvas to select it
  const seedWidgetRef = await subgraphNode.getWidget(0)
  const seedPos = await seedWidgetRef.getPosition()
-  const titleHeight = await page.evaluate(
-    () => window.LiteGraph!['NODE_TITLE_HEIGHT'] as number
-  )
-
-  await page.mouse.click(seedPos.x, seedPos.y + titleHeight)
+  await page.mouse.click(seedPos.x, seedPos.y)
  await comfyPage.nextFrame()

  // Select an output node
@@ -56,15 +48,9 @@ async function setupSubgraphBuilder(comfyPage: ComfyPage) {
    )
  )
  const saveImageRef = await comfyPage.nodeOps.getNodeRefById(saveImageNodeId)
-  await saveImageRef.centerOnNode()
-
-  // Node is centered on screen, so click the canvas center
-  const canvasBox = await page.locator('#graph-canvas').boundingBox()
-  if (!canvasBox) throw new Error('Canvas not found')
-  await page.mouse.click(
-    canvasBox.x + canvasBox.width / 2,
-    canvasBox.y + canvasBox.height / 2
-  )
+  const saveImagePos = await saveImageRef.getPosition()
+  // Click left edge — the right side is hidden by the builder panel
+  await page.mouse.click(saveImagePos.x + 10, saveImagePos.y - 10)
  await comfyPage.nextFrame()

  return subgraphNode
@@ -94,10 +80,6 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
      }
    })
    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.AppBuilder.VueNodeSwitchDismissed',
-      true
-    )
  })

  test('Rename from builder input-select sidebar via menu', async ({
--- 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/subgraph-promoted-slot-position.spec.ts
+++ b/browser_tests/tests/subgraph-promoted-slot-position.spec.ts
@@ -1,86 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { getTextSlotPosition } from '../helpers/subgraphTestUtils'
-
-test.describe(
-  'Subgraph promoted widget-input slot position',
-  { tag: '@subgraph' },
-  () => {
-    test('Promoted text widget slot is positioned at widget row, not header', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-
-      // Render a few frames so arrange() runs
-      await comfyPage.nextFrame()
-      await comfyPage.nextFrame()
-
-      const result = await getTextSlotPosition(comfyPage.page, '11')
-      expect(result).not.toBeNull()
-      expect(result!.hasPos).toBe(true)
-
-      // The slot Y position should be well below the title area.
-      // If it's near 0 or negative, the slot is stuck at the header (the bug).
-      expect(result!.posY).toBeGreaterThan(result!.titleHeight)
-    })
-
-    test('Slot position remains correct after renaming subgraph input label', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-      await comfyPage.nextFrame()
-      await comfyPage.nextFrame()
-
-      // Verify initial position is correct
-      const before = await getTextSlotPosition(comfyPage.page, '11')
-      expect(before).not.toBeNull()
-      expect(before!.hasPos).toBe(true)
-      expect(before!.posY).toBeGreaterThan(before!.titleHeight)
-
-      // Navigate into subgraph and rename the text input
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialLabel = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph || !('inputNode' in graph)) return null
-        const textInput = graph.inputs?.find(
-          (i: { type: string }) => i.type === 'STRING'
-        )
-        return textInput?.label || textInput?.name || null
-      })
-
-      if (!initialLabel)
-        throw new Error('Could not find STRING input in subgraph')
-
-      await comfyPage.subgraph.rightClickInputSlot(initialLabel)
-      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-      await comfyPage.nextFrame()
-
-      const dialog = '.graphdialog input'
-      await comfyPage.page.waitForSelector(dialog, { state: 'visible' })
-      await comfyPage.page.fill(dialog, '')
-      await comfyPage.page.fill(dialog, 'my_custom_prompt')
-      await comfyPage.page.keyboard.press('Enter')
-      await comfyPage.page.waitForSelector(dialog, { state: 'hidden' })
-
-      // Navigate back to parent graph
-      await comfyPage.subgraph.exitViaBreadcrumb()
-
-      // Verify slot position is still at the widget row after rename
-      const after = await getTextSlotPosition(comfyPage.page, '11')
-      expect(after).not.toBeNull()
-      expect(after!.hasPos).toBe(true)
-      expect(after!.posY).toBeGreaterThan(after!.titleHeight)
-
-      // widget.name is the stable identity key — it does NOT change on rename.
-      // The display label is on input.label, read via PromotedWidgetView.label.
-      expect(after!.widgetName).not.toBe('my_custom_prompt')
-    })
-  }
-)
--- a/browser_tests/tests/subgraph-promoted-widget-dom.spec.ts
+++ b/browser_tests/tests/subgraph-promoted-widget-dom.spec.ts
@@ -1,57 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { getPromotedWidgetNames } from '../helpers/promotedWidgets'
-
-test.describe(
-  'Subgraph promoted widget DOM position',
-  { tag: '@subgraph' },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    })
-
-    test('Promoted seed widget renders in node body, not header', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('default')
-
-      // Convert KSampler (id 3) to subgraph — seed is auto-promoted.
-      const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-      await ksampler.click('title')
-      const subgraphNode = await ksampler.convertToSubgraph()
-      await comfyPage.nextFrame()
-
-      // Enable Vue nodes now that the subgraph has been created
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-
-      const subgraphNodeId = String(subgraphNode.id)
-      const promotedNames = await getPromotedWidgetNames(
-        comfyPage,
-        subgraphNodeId
-      )
-      expect(promotedNames).toContain('seed')
-
-      // Wait for Vue nodes to render
-      await comfyPage.vueNodes.waitForNodes()
-
-      const nodeLocator = comfyPage.vueNodes.getNodeLocator(subgraphNodeId)
-      await expect(nodeLocator).toBeVisible()
-
-      // The seed widget should be visible inside the node body
-      const seedWidget = nodeLocator.getByLabel('seed', { exact: true }).first()
-      await expect(seedWidget).toBeVisible()
-
-      // Verify widget is inside the node body, not the header
-      const headerBox = await nodeLocator
-        .locator('[data-testid^="node-header-"]')
-        .boundingBox()
-      const widgetBox = await seedWidget.boundingBox()
-      expect(headerBox).not.toBeNull()
-      expect(widgetBox).not.toBeNull()
-
-      // Widget top should be below the header bottom
-      expect(widgetBox!.y).toBeGreaterThan(headerBox!.y + headerBox!.height)
-    })
-  }
-)
--- a/browser_tests/tests/subgraphInputSlotRename.spec.ts
+++ b/browser_tests/tests/subgraphInputSlotRename.spec.ts
@@ -1,117 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-const WORKFLOW = 'subgraphs/test-values-input-subgraph'
-const RENAMED_LABEL = 'my_seed'
-
-/**
- * Regression test for subgraph input slot rename propagation.
- *
- * Renaming a SubgraphInput slot (e.g. "seed") inside the subgraph must
- * update the promoted widget label shown on the parent SubgraphNode and
- * keep the widget positioned in the node body (not the header).
- *
- * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10195
- */
-test.describe(
-  'Subgraph input slot rename propagation',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    })
-
-    test('Renaming a subgraph input slot updates the widget label on the parent node', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      // 1. Load workflow with subgraph containing a promoted seed widget input
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const sgNode = comfyPage.vueNodes.getNodeLocator('19')
-      await expect(sgNode).toBeVisible()
-
-      // 2. Verify the seed widget is visible on the parent node
-      const seedWidget = sgNode.getByLabel('seed', { exact: true })
-      await expect(seedWidget).toBeVisible()
-
-      // Verify widget is in the node body, not the header
-      const headerBox = await sgNode
-        .locator('[data-testid^="node-header-"]')
-        .boundingBox()
-      const widgetBox = await seedWidget.boundingBox()
-      expect(headerBox).not.toBeNull()
-      expect(widgetBox).not.toBeNull()
-      expect(widgetBox!.y).toBeGreaterThan(headerBox!.y + headerBox!.height)
-
-      // 3. Enter the subgraph and rename the seed slot.
-      //    The subgraph IO rename uses canvas.prompt() which requires the
-      //    litegraph context menu, so temporarily disable Vue nodes.
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
-      await comfyPage.nextFrame()
-
-      const sgNodeRef = await comfyPage.nodeOps.getNodeRefById('19')
-      await sgNodeRef.navigateIntoSubgraph()
-
-      // Find the seed SubgraphInput slot
-      const seedSlotName = await page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph) return null
-        const inputs = (
-          graph as { inputs?: Array<{ name: string; type: string }> }
-        ).inputs
-        return inputs?.find((i) => i.name.includes('seed'))?.name ?? null
-      })
-      expect(seedSlotName).not.toBeNull()
-
-      // 4. Right-click the seed input slot and rename it
-      await comfyPage.subgraph.rightClickInputSlot(seedSlotName!)
-      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-      await comfyPage.nextFrame()
-
-      const dialog = '.graphdialog input'
-      await page.waitForSelector(dialog, { state: 'visible' })
-      await page.fill(dialog, '')
-      await page.fill(dialog, RENAMED_LABEL)
-      await page.keyboard.press('Enter')
-      await page.waitForSelector(dialog, { state: 'hidden' })
-
-      // 5. Navigate back to parent graph and re-enable Vue nodes
-      await comfyPage.subgraph.exitViaBreadcrumb()
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.vueNodes.waitForNodes()
-
-      // 6. Verify the widget label updated to the renamed value
-      const sgNodeAfter = comfyPage.vueNodes.getNodeLocator('19')
-      await expect(sgNodeAfter).toBeVisible()
-
-      const updatedLabel = await page.evaluate(() => {
-        const node = window.app!.canvas.graph!.getNodeById('19')
-        if (!node) return null
-        const w = node.widgets?.find((w: { name: string }) =>
-          w.name.includes('seed')
-        )
-        return w?.label || w?.name || null
-      })
-      expect(updatedLabel).toBe(RENAMED_LABEL)
-
-      // 7. Verify the widget is still in the body, not the header
-      const seedWidgetAfter = sgNodeAfter.getByLabel('seed', { exact: true })
-      await expect(seedWidgetAfter).toBeVisible()
-
-      const headerAfter = await sgNodeAfter
-        .locator('[data-testid^="node-header-"]')
-        .boundingBox()
-      const widgetAfter = await seedWidgetAfter.boundingBox()
-      expect(headerAfter).not.toBeNull()
-      expect(widgetAfter).not.toBeNull()
-      expect(widgetAfter!.y).toBeGreaterThan(
-        headerAfter!.y + headerAfter!.height
-      )
-    })
-  }
-)
--- 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/formDropdownPosition.spec.ts
+++ b/browser_tests/tests/vueNodes/widgets/load/formDropdownPosition.spec.ts
@@ -1,116 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-import { TestIds } from '../../../../fixtures/selectors'
-
-test.describe(
-  'FormDropdown positioning in Vue nodes',
-  { tag: ['@widget', '@node'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-      await comfyPage.vueNodes.waitForNodes()
-    })
-
-    test('dropdown menu appears directly below the trigger', async ({
-      comfyPage
-    }) => {
-      const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
-      await expect(node).toBeVisible()
-
-      const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
-      await trigger.first().click()
-
-      const menu = comfyPage.page.getByTestId(TestIds.widgets.formDropdownMenu)
-      await expect(menu).toBeVisible({ timeout: 5000 })
-
-      const triggerBox = await trigger.first().boundingBox()
-      const menuBox = await menu.boundingBox()
-
-      expect(triggerBox).toBeTruthy()
-      expect(menuBox).toBeTruthy()
-
-      // Menu top should be near the trigger bottom (within 20px tolerance for padding)
-      expect(menuBox!.y).toBeGreaterThanOrEqual(
-        triggerBox!.y + triggerBox!.height - 5
-      )
-      expect(menuBox!.y).toBeLessThanOrEqual(
-        triggerBox!.y + triggerBox!.height + 20
-      )
-
-      // Menu left should be near the trigger left (within 10px tolerance)
-      expect(menuBox!.x).toBeGreaterThanOrEqual(triggerBox!.x - 10)
-      expect(menuBox!.x).toBeLessThanOrEqual(triggerBox!.x + 10)
-    })
-
-    test('dropdown menu appears correctly at different zoom levels', async ({
-      comfyPage
-    }) => {
-      for (const zoom of [0.75, 1.5]) {
-        // Set zoom via canvas
-        await comfyPage.page.evaluate((scale) => {
-          const canvas = window.app!.canvas
-          canvas.ds.scale = scale
-          canvas.setDirty(true, true)
-        }, zoom)
-        await comfyPage.nextFrame()
-
-        const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
-        await expect(node).toBeVisible()
-
-        const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
-        await trigger.first().click()
-
-        const menu = comfyPage.page.getByTestId(
-          TestIds.widgets.formDropdownMenu
-        )
-        await expect(menu).toBeVisible({ timeout: 5000 })
-
-        const triggerBox = await trigger.first().boundingBox()
-        const menuBox = await menu.boundingBox()
-
-        expect(triggerBox).toBeTruthy()
-        expect(menuBox).toBeTruthy()
-
-        // Menu top should still be near trigger bottom regardless of zoom
-        expect(menuBox!.y).toBeGreaterThanOrEqual(
-          triggerBox!.y + triggerBox!.height - 5
-        )
-        expect(menuBox!.y).toBeLessThanOrEqual(
-          triggerBox!.y + triggerBox!.height + 20 * zoom
-        )
-
-        // Close dropdown before next iteration
-        await comfyPage.page.keyboard.press('Escape')
-        await expect(menu).not.toBeVisible()
-      }
-    })
-
-    test('dropdown closes on outside click', async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
-      const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
-      await trigger.first().click()
-
-      const menu = comfyPage.page.getByTestId(TestIds.widgets.formDropdownMenu)
-      await expect(menu).toBeVisible({ timeout: 5000 })
-
-      // Click outside the node
-      await comfyPage.page.mouse.click(10, 10)
-      await expect(menu).not.toBeVisible()
-    })
-
-    test('dropdown closes on Escape key', async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
-      const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
-      await trigger.first().click()
-
-      const menu = comfyPage.page.getByTestId(TestIds.widgets.formDropdownMenu)
-      await expect(menu).toBeVisible({ timeout: 5000 })
-
-      await comfyPage.page.keyboard.press('Escape')
-      await expect(menu).not.toBeVisible()
-    })
-  }
-)
--- 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/eslint.config.ts
+++ b/eslint.config.ts
@@ -5,7 +5,6 @@ import betterTailwindcss from 'eslint-plugin-better-tailwindcss'
 import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
 import { importX } from 'eslint-plugin-import-x'
 import oxlint from 'eslint-plugin-oxlint'
-import testingLibrary from 'eslint-plugin-testing-library'
 // eslint-config-prettier disables ESLint rules that conflict with formatters (oxfmt)
 import eslintConfigPrettier from 'eslint-config-prettier'
 import { configs as storybookConfigs } from 'eslint-plugin-storybook'
@@ -272,20 +271,6 @@ export default defineConfig([
      ]
    }
  },
-  {
-    files: ['**/*.test.ts'],
-    plugins: { 'testing-library': testingLibrary },
-    rules: {
-      'testing-library/prefer-screen-queries': 'error',
-      'testing-library/no-container': 'error',
-      'testing-library/no-node-access': 'error',
-      'testing-library/no-wait-for-multiple-assertions': 'error',
-      'testing-library/prefer-find-by': 'error',
-      'testing-library/prefer-presence-queries': 'error',
-      'testing-library/prefer-user-event': 'error',
-      'testing-library/no-debugging-utils': 'error'
-    }
-  },
  {
    files: ['scripts/**/*.js'],
    languageOptions: {
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -6,6 +6,7 @@ const config: KnipConfig = {
      entry: [
        '{build,scripts}/**/*.{js,ts}',
        'src/assets/css/style.css',
+        'src/main.ts',
        'src/scripts/ui/menu/index.ts',
        'src/types/index.ts',
        'src/storybook/mocks/**/*.ts'
@@ -13,34 +14,25 @@ const config: KnipConfig = {
      project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}', '!.claude/**']
    },
    'apps/desktop-ui': {
-      entry: ['src/i18n.ts'],
+      entry: ['src/main.ts', 'src/i18n.ts'],
      project: ['src/**/*.{js,ts,vue}']
    },
    'packages/tailwind-utils': {
      project: ['src/**/*.{js,ts}']
    },
    'packages/shared-frontend-utils': {
-      project: ['src/**/*.{js,ts}']
+      project: ['src/**/*.{js,ts}'],
+      entry: ['src/formatUtil.ts', 'src/networkUtil.ts']
    },
    'packages/registry-types': {
      project: ['src/**/*.{js,ts}']
    },
    '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']
+      project: ['src/**/*.{js,ts}'],
+      entry: ['src/index.ts']
    }
  },
-  ignoreBinaries: ['python3'],
+  ignoreBinaries: ['python3', 'gh', 'generate'],
  ignoreDependencies: [
    // Weird importmap things
    '@iconify-json/lucide',
@@ -48,12 +40,19 @@ const config: KnipConfig = {
    '@primeuix/forms',
    '@primeuix/styled',
    '@primeuix/utils',
-    '@primevue/icons'
+    '@primevue/icons',
+    // Used by lucideStrokePlugin.js (CSS @plugin)
+    '@iconify/utils'
  ],
  ignore: [
    // Auto generated API types
    'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
+    'packages/registry-types/src/comfyRegistryTypes.ts',
+    'packages/ingest-types/src/types.gen.ts',
    'packages/ingest-types/src/zod.gen.ts',
+    'packages/ingest-types/openapi-ts.config.ts',
+    // Used by a custom node (that should move off of this)
+    'src/scripts/ui/components/splitButton.ts',
    // Used by stacked PR (feat/glsl-live-preview)
    'src/renderer/glsl/useGLSLRenderer.ts',
    // Workflow files contain license names that knip misinterprets as binaries
@@ -61,8 +60,17 @@ const config: KnipConfig = {
    // Pending integration in stacked PR
    'src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue',
    // Agent review check config, not part of the build
-    '.agents/checks/eslint.strict.config.js'
+    '.agents/checks/eslint.strict.config.js',
+    // Loaded via @plugin directive in CSS, not detected by knip
+    'packages/design-system/src/css/lucideStrokePlugin.js'
  ],
+  compilers: {
+    // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199
+    css: (text: string) =>
+      [...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)]
+        .map((match) => match[0].replace(/url\(['"]?([^'"()]+)['"]?\)/, '$1'))
+        .join('\n')
+  },
  vite: {
    config: ['vite?(.*).config.mts']
  },
--- a/lint-staged.config.ts
+++ b/lint-staged.config.ts
@@ -11,7 +11,7 @@ export default {

  './**/*.js': (stagedFiles: string[]) => formatAndEslint(stagedFiles),

-  './**/*.{ts,tsx,vue,mts,json,yaml}': (stagedFiles: string[]) => {
+  './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => {
    const commands = [...formatAndEslint(stagedFiles), 'pnpm typecheck']

    const hasBrowserTestsChanges = stagedFiles
--- a/nx.json
+++ b/nx.json
@@ -36,6 +36,5 @@
        "targetName": "e2e"
      }
    }
-  ],
-  "analytics": false
+  ]
 }
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@comfyorg/comfyui-frontend",
-  "version": "1.43.4",
+  "version": "1.43.2",
  "private": true,
  "description": "Official front-end implementation of ComfyUI",
  "homepage": "https://comfy.org",
@@ -135,9 +135,6 @@
    "@storybook/vue3": "catalog:",
    "@storybook/vue3-vite": "catalog:",
    "@tailwindcss/vite": "catalog:",
-    "@testing-library/jest-dom": "catalog:",
-    "@testing-library/user-event": "catalog:",
-    "@testing-library/vue": "catalog:",
    "@types/fs-extra": "catalog:",
    "@types/jsdom": "catalog:",
    "@types/node": "catalog:",
@@ -156,7 +153,6 @@
    "eslint-plugin-import-x": "catalog:",
    "eslint-plugin-oxlint": "catalog:",
    "eslint-plugin-storybook": "catalog:",
-    "eslint-plugin-testing-library": "catalog:",
    "eslint-plugin-unused-imports": "catalog:",
    "eslint-plugin-vue": "catalog:",
    "fast-check": "catalog:",
@@ -181,7 +177,9 @@
    "storybook": "catalog:",
    "stylelint": "catalog:",
    "tailwindcss": "catalog:",
+    "tailwindcss-primeui": "catalog:",
    "tsx": "catalog:",
+    "tw-animate-css": "catalog:",
    "typescript": "catalog:",
    "typescript-eslint": "catalog:",
    "unplugin-icons": "catalog:",
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -12,9 +12,7 @@
  "dependencies": {
    "@iconify-json/lucide": "catalog:",
    "@iconify/tailwind4": "catalog:",
-    "@iconify/utils": "catalog:",
-    "tailwindcss-primeui": "catalog:",
-    "tw-animate-css": "catalog:"
+    "@iconify/utils": "catalog:"
  },
  "devDependencies": {
    "tailwindcss": "catalog:",
--- 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/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -15,7 +15,7 @@
@plugin "./lucideStrokePlugin.js";

 /* Safelist dynamic comfy icons for node library folders */
-@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow,quiver-ai}]");
+@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow}]");

 /* Safelist dynamic comfy icons for essential nodes (kebab-case of node names) */
@source inline("icon-[comfy--{save-image,load-video,save-video,load-3-d,save-glb,image-batch,batch-images-node,image-crop,image-scale,image-rotate,image-blur,image-invert,canny,recraft-remove-background-node,kling-lip-sync-audio-to-video-node,load-audio,save-audio,stability-text-to-audio,lora-loader,lora-loader-model-only,primitive-string-multiline,get-video-components,video-slice,tencent-text-to-model-node,tencent-image-to-model-node,open-ai-chat-node,preview-image,image-and-mask-preview,layer-mask-mask-preview,mask-preview,image-preview-from-latent,i-tools-preview-image,i-tools-compare-image,canny-to-image,image-edit,text-to-image,pose-to-image,depth-to-video,image-to-image,canny-to-video,depth-to-image,image-to-video,pose-to-video,text-to-video,image-inpainting,image-outpainting}]");
--- a/packages/design-system/src/icons/quiver-ai.svg
+++ b/packages/design-system/src/icons/quiver-ai.svg
@@ -1,3 +0,0 @@
-<svg width="281" height="281" viewBox="0 0 281 281" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M140.069 0C217.427 0.000220786 280.138 62.7116 280.138 140.069V280.138H140.069C62.7116 280.138 0.000220844 217.427 0 140.069C0 62.7114 62.7114 0 140.069 0ZM74.961 66.6054C69.8263 64.8847 64.9385 69.7815 66.6687 74.913L123.558 243.619C125.929 250.65 136.321 248.945 136.321 241.524V135.823H241.329C248.756 135.823 250.453 125.416 243.41 123.056L74.961 66.6054Z" fill="#F8F8F8"/>
-</svg>
--- 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
@@ -14,10 +13,10 @@ catalog:
  '@iconify/utils': ^3.1.0
  '@intlify/eslint-plugin-vue-i18n': ^4.1.1
  '@lobehub/i18n-cli': ^1.26.1
-  '@nx/eslint': 22.6.1
-  '@nx/playwright': 22.6.1
-  '@nx/storybook': 22.6.1
-  '@nx/vite': 22.6.1
+  '@nx/eslint': 22.5.2
+  '@nx/playwright': 22.5.2
+  '@nx/storybook': 22.5.2
+  '@nx/vite': 22.5.2
  '@pinia/testing': ^1.0.3
  '@playwright/test': ^1.58.1
  '@primeuix/forms': 0.0.2
@@ -35,9 +34,6 @@ catalog:
  '@storybook/vue3': ^10.2.10
  '@storybook/vue3-vite': ^10.2.10
  '@tailwindcss/vite': ^4.2.0
-  '@testing-library/jest-dom': ^6.9.1
-  '@testing-library/user-event': ^14.6.1
-  '@testing-library/vue': ^8.1.0
  '@tiptap/core': ^2.27.2
  '@tiptap/extension-link': ^2.27.2
  '@tiptap/extension-table': ^2.27.2
@@ -51,7 +47,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 +55,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
@@ -73,7 +67,6 @@ catalog:
  eslint-plugin-import-x: ^4.16.1
  eslint-plugin-oxlint: 1.55.0
  eslint-plugin-storybook: ^10.2.10
-  eslint-plugin-testing-library: ^7.16.1
  eslint-plugin-unused-imports: ^4.3.0
  eslint-plugin-vue: ^10.6.2
  fast-check: ^4.5.3
@@ -86,11 +79,11 @@ catalog:
  jsdom: ^27.4.0
  jsonata: ^2.1.0
  jsondiffpatch: ^0.7.3
-  knip: ^6.0.1
+  knip: ^5.75.1
  lint-staged: ^16.2.7
  markdown-table: ^3.0.4
  mixpanel-browser: ^2.71.0
-  nx: 22.6.1
+  nx: 22.5.2
  oxfmt: ^0.40.0
  oxlint: ^1.55.0
  oxlint-tsgolint: ^0.17.0
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,24 @@
 <template>
-  <router-view />
-  <GlobalDialog />
-  <BlockUI full-screen :blocked="isLoading" />
+  <TooltipProvider :delay-duration="300" disable-hoverable-content>
+    <router-view />
+    <GlobalDialog />
+    <BlockUI full-screen :blocked="isLoading" />
+  </TooltipProvider>
 </template>

 <script setup lang="ts">
 import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
+import { TooltipProvider } from 'reka-ui'
 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 +26,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 +101,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/TopMenuSection.test.ts
+++ b/src/components/TopMenuSection.test.ts
@@ -119,6 +119,7 @@ function createWrapper({
    global: {
      plugins: [pinia, i18n],
      stubs: {
+        BaseTooltip: { template: '<slot />' },
        SubgraphBreadcrumb: true,
        QueueProgressOverlay: true,
        QueueInlineProgressSummary: true,
@@ -131,9 +132,6 @@ function createWrapper({
          template: '<div />'
        },
        ...stubs
-      },
-      directives: {
-        tooltip: () => {}
      }
    }
  })
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -16,22 +16,23 @@
            v-if="managerState.shouldShowManagerButtons.value"
            class="pointer-events-auto flex h-12 shrink-0 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
          >
-            <Button
-              v-tooltip.bottom="customNodesManagerTooltipConfig"
-              variant="secondary"
-              :aria-label="t('menu.manageExtensions')"
-              class="relative"
-              @click="openCustomNodeManager"
-            >
-              <i class="icon-[comfy--extensions-blocks] size-4" />
-              <span class="not-md:hidden">
-                {{ t('menu.manageExtensions') }}
-              </span>
-              <span
-                v-if="shouldShowRedDot"
-                class="absolute top-0.5 right-1 size-2 rounded-full bg-red-500"
-              />
-            </Button>
+            <BaseTooltip :text="t('menu.manageExtensions')" side="bottom">
+              <Button
+                variant="secondary"
+                :aria-label="t('menu.manageExtensions')"
+                class="relative"
+                @click="openCustomNodeManager"
+              >
+                <i class="icon-[comfy--extensions-blocks] size-4" />
+                <span class="not-md:hidden">
+                  {{ t('menu.manageExtensions') }}
+                </span>
+                <span
+                  v-if="shouldShowRedDot"
+                  class="absolute top-0.5 right-1 size-2 rounded-full bg-red-500"
+                />
+              </Button>
+            </BaseTooltip>
          </div>

          <div ref="actionbarContainerRef" :class="actionbarContainerClass">
@@ -54,29 +55,37 @@
              class="shrink-0"
            />
            <LoginButton v-else-if="isDesktop && !isIntegratedTabBar" />
-            <Button
+            <BaseTooltip
              v-if="isCloud && flags.workflowSharingEnabled"
-              v-tooltip.bottom="shareTooltipConfig"
-              variant="secondary"
-              :aria-label="t('actionbar.shareTooltip')"
-              @click="() => openShareDialog().catch(toastErrorHandler)"
-              @pointerenter="prefetchShareDialog"
+              :text="t('actionbar.shareTooltip')"
+              side="bottom"
            >
-              <i class="icon-[comfy--send] size-4" />
-              <span class="not-md:hidden">
-                {{ t('actionbar.share') }}
-              </span>
-            </Button>
-            <Button
+              <Button
+                variant="secondary"
+                :aria-label="t('actionbar.shareTooltip')"
+                @click="() => openShareDialog().catch(toastErrorHandler)"
+                @pointerenter="prefetchShareDialog"
+              >
+                <i class="icon-[comfy--send] size-4" />
+                <span class="not-md:hidden">
+                  {{ t('actionbar.share') }}
+                </span>
+              </Button>
+            </BaseTooltip>
+            <BaseTooltip
              v-if="!isRightSidePanelOpen"
-              v-tooltip.bottom="rightSidePanelTooltipConfig"
-              type="secondary"
-              size="icon"
-              :aria-label="t('rightSidePanel.togglePanel')"
-              @click="rightSidePanelStore.togglePanel"
+              :text="t('rightSidePanel.togglePanel')"
+              side="bottom"
            >
-              <i class="icon-[lucide--panel-right] size-4" />
-            </Button>
+              <Button
+                type="secondary"
+                size="icon"
+                :aria-label="t('rightSidePanel.togglePanel')"
+                @click="rightSidePanelStore.togglePanel"
+              >
+                <i class="icon-[lucide--panel-right] size-4" />
+              </Button>
+            </BaseTooltip>
          </div>
        </div>
        <ErrorOverlay />
@@ -133,7 +142,7 @@ import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
 import { useErrorHandling } from '@/composables/useErrorHandling'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import BaseTooltip from '@/components/ui/tooltip/BaseTooltip.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
@@ -243,12 +252,6 @@ const inlineProgressSummaryTarget = computed(() => {
 const shouldHideInlineProgressSummary = computed(
  () => isQueueProgressOverlayEnabled.value && isQueueOverlayExpanded.value
 )
-const customNodesManagerTooltipConfig = computed(() =>
-  buildTooltipConfig(t('menu.manageExtensions'))
-)
-const shareTooltipConfig = computed(() =>
-  buildTooltipConfig(t('actionbar.shareTooltip'))
-)

 const shouldShowRedDot = computed((): boolean => {
  return shouldShowConflictRedDot.value
@@ -258,9 +261,6 @@ const { hasAnyError } = storeToRefs(executionErrorStore)

 // Right side panel toggle
 const { isOpen: isRightSidePanelOpen } = storeToRefs(rightSidePanelStore)
-const rightSidePanelTooltipConfig = computed(() =>
-  buildTooltipConfig(t('rightSidePanel.togglePanel'))
-)

 // Maintain support for legacy topbar elements attached by custom scripts
 const legacyCommandsContainerRef = ref<HTMLElement>()
--- a/src/components/actionbar/ComfyActionbar.test.ts
+++ b/src/components/actionbar/ComfyActionbar.test.ts
@@ -36,6 +36,7 @@ const mountActionbar = (showRunProgressBar: boolean) => {
    global: {
      plugins: [pinia, i18n],
      stubs: {
+        BaseTooltip: { template: '<slot />' },
        ContextMenu: {
          name: 'ContextMenu',
          template: '<div />'
@@ -50,9 +51,6 @@ const mountActionbar = (showRunProgressBar: boolean) => {
          template: '<button type="button">Run</button>'
        },
        QueueInlineProgress: true
-      },
-      directives: {
-        tooltip: () => {}
      }
    }
  })
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -32,47 +32,49 @@
        <Suspense @resolve="comfyRunButtonResolved">
          <ComfyRunButton />
        </Suspense>
-        <Button
-          v-tooltip.bottom="cancelJobTooltipConfig"
-          variant="destructive"
-          size="icon"
-          :disabled="isExecutionIdle"
-          :aria-label="t('menu.interrupt')"
-          @click="cancelCurrentJob"
-        >
-          <i class="icon-[lucide--x] size-4" />
-        </Button>
-        <Button
-          v-tooltip.bottom="queueHistoryTooltipConfig"
-          variant="secondary"
-          size="md"
-          :aria-pressed="
-            isQueuePanelV2Enabled
-              ? activeSidebarTabId === 'job-history'
-              : queueOverlayExpanded
-          "
-          class="relative px-3"
-          data-testid="queue-overlay-toggle"
-          @click="toggleQueueOverlay"
-          @contextmenu.stop.prevent="showQueueContextMenu"
-        >
-          <span class="text-sm font-normal tabular-nums">
-            {{ activeJobsLabel }}
-          </span>
-          <StatusBadge
-            v-if="activeJobsCount > 0"
-            data-testid="active-jobs-indicator"
-            variant="dot"
-            class="pointer-events-none absolute -top-0.5 -right-0.5 animate-pulse"
-          />
-          <span class="sr-only">
-            {{
+        <BaseTooltip :text="t('menu.interrupt')" side="bottom">
+          <Button
+            variant="destructive"
+            size="icon"
+            :disabled="isExecutionIdle"
+            :aria-label="t('menu.interrupt')"
+            @click="cancelCurrentJob"
+          >
+            <i class="icon-[lucide--x] size-4" />
+          </Button>
+        </BaseTooltip>
+        <BaseTooltip :text="queueHistoryTooltipText" side="bottom">
+          <Button
+            variant="secondary"
+            size="md"
+            :aria-pressed="
              isQueuePanelV2Enabled
-                ? t('sideToolbar.queueProgressOverlay.viewJobHistory')
-                : t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
-            }}
-          </span>
-        </Button>
+                ? activeSidebarTabId === 'job-history'
+                : queueOverlayExpanded
+            "
+            class="relative px-3"
+            data-testid="queue-overlay-toggle"
+            @click="toggleQueueOverlay"
+            @contextmenu.stop.prevent="showQueueContextMenu"
+          >
+            <span class="text-sm font-normal tabular-nums">
+              {{ activeJobsLabel }}
+            </span>
+            <StatusBadge
+              v-if="activeJobsCount > 0"
+              data-testid="active-jobs-indicator"
+              variant="dot"
+              class="pointer-events-none absolute -top-0.5 -right-0.5 animate-pulse"
+            />
+            <span class="sr-only">
+              {{
+                isQueuePanelV2Enabled
+                  ? t('sideToolbar.queueProgressOverlay.viewJobHistory')
+                  : t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
+              }}
+            </span>
+          </Button>
+        </BaseTooltip>
        <ContextMenu ref="queueContextMenu" :model="queueContextMenuItems" />
      </div>
    </Panel>
@@ -108,7 +110,7 @@ import StatusBadge from '@/components/common/StatusBadge.vue'
 import QueueInlineProgress from '@/components/queue/QueueInlineProgress.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import BaseTooltip from '@/components/ui/tooltip/BaseTooltip.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'
@@ -368,16 +370,11 @@ watch(isDragging, (dragging) => {
  }
 })

-const cancelJobTooltipConfig = computed(() =>
-  buildTooltipConfig(t('menu.interrupt'))
-)
-const queueHistoryTooltipConfig = computed(() =>
-  buildTooltipConfig(
-    t(
-      isQueuePanelV2Enabled.value
-        ? 'sideToolbar.queueProgressOverlay.viewJobHistory'
-        : 'sideToolbar.queueProgressOverlay.expandCollapsedQueue'
-    )
+const queueHistoryTooltipText = computed(() =>
+  t(
+    isQueuePanelV2Enabled.value
+      ? 'sideToolbar.queueProgressOverlay.viewJobHistory'
+      : 'sideToolbar.queueProgressOverlay.expandCollapsedQueue'
  )
 )
 const activeJobsLabel = computed(() => {
--- a/src/components/actionbar/ComfyRunButton/ComfyQueueButton.test.ts
+++ b/src/components/actionbar/ComfyRunButton/ComfyQueueButton.test.ts
@@ -1,4 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -13,7 +14,6 @@ import {
  useQueueSettingsStore,
  useQueueStore
 } from '@/stores/queueStore'
-import { render, screen } from '@/utils/test-utils'

 import ComfyQueueButton from './ComfyQueueButton.vue'

@@ -78,40 +78,38 @@ function createTask(id: string, status: JobStatus): TaskItemImpl {
  return new TaskItemImpl(job)
 }

-const stubs = {
-  BatchCountEdit: BatchCountEditStub,
-  DropdownMenuRoot: { template: '<div><slot /></div>' },
-  DropdownMenuTrigger: { template: '<div><slot /></div>' },
-  DropdownMenuPortal: { template: '<div><slot /></div>' },
-  DropdownMenuContent: { template: '<div><slot /></div>' },
-  DropdownMenuItem: { template: '<div><slot /></div>' }
-}
-
-function renderQueueButton() {
+function createWrapper() {
  const pinia = createTestingPinia({ createSpy: vi.fn })

-  return render(ComfyQueueButton, {
+  return mount(ComfyQueueButton, {
    global: {
      plugins: [pinia, i18n],
      directives: {
        tooltip: () => {}
      },
-      stubs
+      stubs: {
+        BatchCountEdit: BatchCountEditStub,
+        DropdownMenuRoot: { template: '<div><slot /></div>' },
+        DropdownMenuTrigger: { template: '<div><slot /></div>' },
+        DropdownMenuPortal: { template: '<div><slot /></div>' },
+        DropdownMenuContent: { template: '<div><slot /></div>' },
+        DropdownMenuItem: { template: '<div><slot /></div>' }
+      }
    }
  })
 }

 describe('ComfyQueueButton', () => {
  it('renders the batch count control before the run button', () => {
-    renderQueueButton()
-    const controls = screen.getAllByTestId(/batch-count-edit|queue-button/)
+    const wrapper = createWrapper()
+    const controls = wrapper.get('.queue-button-group').element.children

-    expect(controls[0]).toHaveAttribute('data-testid', 'batch-count-edit')
-    expect(controls[1]).toHaveAttribute('data-testid', 'queue-button')
+    expect(controls[0]?.getAttribute('data-testid')).toBe('batch-count-edit')
+    expect(controls[1]?.getAttribute('data-testid')).toBe('queue-button')
  })

  it('keeps the run instant presentation while idle even with active jobs', async () => {
-    renderQueueButton()
+    const wrapper = createWrapper()
    const queueSettingsStore = useQueueSettingsStore()
    const queueStore = useQueueStore()

@@ -119,27 +117,29 @@ describe('ComfyQueueButton', () => {
    queueStore.runningTasks = [createTask('run-1', 'in_progress')]
    await nextTick()

-    const queueButton = screen.getByTestId('queue-button')
+    const queueButton = wrapper.get('[data-testid="queue-button"]')

-    expect(queueButton).toHaveTextContent('Run (Instant)')
-    expect(queueButton).toHaveAttribute('data-variant', 'primary')
+    expect(queueButton.text()).toContain('Run (Instant)')
+    expect(queueButton.attributes('data-variant')).toBe('primary')
+    expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)
  })

  it('switches to stop presentation when instant mode is armed', async () => {
-    renderQueueButton()
+    const wrapper = createWrapper()
    const queueSettingsStore = useQueueSettingsStore()

    queueSettingsStore.mode = 'instant-running'
    await nextTick()

-    const queueButton = screen.getByTestId('queue-button')
+    const queueButton = wrapper.get('[data-testid="queue-button"]')

-    expect(queueButton).toHaveTextContent('Stop Run (Instant)')
-    expect(queueButton).toHaveAttribute('data-variant', 'destructive')
+    expect(queueButton.text()).toContain('Stop Run (Instant)')
+    expect(queueButton.attributes('data-variant')).toBe('destructive')
+    expect(wrapper.find('.icon-\\[lucide--square\\]').exists()).toBe(true)
  })

  it('disarms instant mode without interrupting even when jobs are active', async () => {
-    const { user } = renderQueueButton()
+    const wrapper = createWrapper()
    const queueSettingsStore = useQueueSettingsStore()
    const queueStore = useQueueStore()
    const commandStore = useCommandStore()
@@ -148,26 +148,33 @@ describe('ComfyQueueButton', () => {
    queueStore.runningTasks = [createTask('run-1', 'in_progress')]
    await nextTick()

-    await user!.click(screen.getByTestId('queue-button'))
+    await wrapper.get('[data-testid="queue-button"]').trigger('click')
    await nextTick()

    expect(queueSettingsStore.mode).toBe('instant-idle')
-    const queueButton = screen.getByTestId('queue-button')
-    expect(queueButton).toHaveTextContent('Run (Instant)')
-    expect(queueButton).toHaveAttribute('data-variant', 'primary')
+    const queueButtonWhileStopping = wrapper.get('[data-testid="queue-button"]')
+    expect(queueButtonWhileStopping.text()).toContain('Run (Instant)')
+    expect(queueButtonWhileStopping.attributes('data-variant')).toBe('primary')
+    expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)

    expect(commandStore.execute).not.toHaveBeenCalled()
+
+    const queueButton = wrapper.get('[data-testid="queue-button"]')
+    expect(queueSettingsStore.mode).toBe('instant-idle')
+    expect(queueButton.text()).toContain('Run (Instant)')
+    expect(queueButton.attributes('data-variant')).toBe('primary')
+    expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)
  })

  it('activates instant running mode when queueing again', async () => {
-    const { user } = renderQueueButton()
+    const wrapper = createWrapper()
    const queueSettingsStore = useQueueSettingsStore()
    const commandStore = useCommandStore()

    queueSettingsStore.mode = 'instant-idle'
    await nextTick()

-    await user!.click(screen.getByTestId('queue-button'))
+    await wrapper.get('[data-testid="queue-button"]').trigger('click')
    await nextTick()

    expect(queueSettingsStore.mode).toBe('instant-running')
--- a/src/components/builder/VueNodeSwitchPopup.vue
+++ b/src/components/builder/VueNodeSwitchPopup.vue
@@ -1,55 +0,0 @@
-<template>
-  <NotificationPopup
-    v-if="appModeStore.showVueNodeSwitchPopup"
-    :title="$t('appBuilder.vueNodeSwitch.title')"
-    show-close
-    position="bottom-left"
-    @close="dismiss"
-  >
-    {{ $t('appBuilder.vueNodeSwitch.content') }}
-
-    <template #footer-start>
-      <label
-        class="flex cursor-pointer items-center gap-2 text-sm text-muted-foreground"
-      >
-        <input
-          v-model="dontShowAgain"
-          type="checkbox"
-          class="accent-primary-background"
-        />
-        {{ $t('appBuilder.vueNodeSwitch.dontShowAgain') }}
-      </label>
-    </template>
-
-    <template #footer-end>
-      <Button
-        variant="secondary"
-        size="lg"
-        class="font-normal"
-        @click="dismiss"
-      >
-        {{ $t('appBuilder.vueNodeSwitch.dismiss') }}
-      </Button>
-    </template>
-  </NotificationPopup>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-import NotificationPopup from '@/components/common/NotificationPopup.vue'
-import Button from '@/components/ui/button/Button.vue'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useAppModeStore } from '@/stores/appModeStore'
-
-const appModeStore = useAppModeStore()
-const settingStore = useSettingStore()
-const dontShowAgain = ref(false)
-
-function dismiss() {
-  if (dontShowAgain.value) {
-    void settingStore.set('Comfy.AppBuilder.VueNodeSwitchDismissed', true)
-  }
-  appModeStore.showVueNodeSwitchPopup = false
-}
-</script>
--- a/src/components/common/NotificationPopup.test.ts
+++ b/src/components/common/NotificationPopup.test.ts
@@ -1,78 +0,0 @@
-import { mount } from '@vue/test-utils'
-import type { ComponentProps } from 'vue-component-type-helpers'
-import { describe, expect, it } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import NotificationPopup from './NotificationPopup.vue'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: { g: { close: 'Close' } }
-  }
-})
-
-function mountPopup(
-  props: ComponentProps<typeof NotificationPopup> = {
-    title: 'Test'
-  },
-  slots: Record<string, string> = {}
-) {
-  return mount(NotificationPopup, {
-    global: { plugins: [i18n] },
-    props,
-    slots
-  })
-}
-
-describe('NotificationPopup', () => {
-  it('renders title', () => {
-    const wrapper = mountPopup({ title: 'Hello World' })
-    expect(wrapper.text()).toContain('Hello World')
-  })
-
-  it('has role="status" for accessibility', () => {
-    const wrapper = mountPopup()
-    expect(wrapper.find('[role="status"]').exists()).toBe(true)
-  })
-
-  it('renders subtitle when provided', () => {
-    const wrapper = mountPopup({ title: 'T', subtitle: 'v1.2.3' })
-    expect(wrapper.text()).toContain('v1.2.3')
-  })
-
-  it('renders icon when provided', () => {
-    const wrapper = mountPopup({
-      title: 'T',
-      icon: 'icon-[lucide--rocket]'
-    })
-    expect(wrapper.find('i.icon-\\[lucide--rocket\\]').exists()).toBe(true)
-  })
-
-  it('emits close when close button clicked', async () => {
-    const wrapper = mountPopup({ title: 'T', showClose: true })
-    await wrapper.find('[aria-label="Close"]').trigger('click')
-    expect(wrapper.emitted('close')).toHaveLength(1)
-  })
-
-  it('renders default slot content', () => {
-    const wrapper = mountPopup({ title: 'T' }, { default: 'Body text here' })
-    expect(wrapper.text()).toContain('Body text here')
-  })
-
-  it('renders footer slots', () => {
-    const wrapper = mountPopup(
-      { title: 'T' },
-      { 'footer-start': 'Left side', 'footer-end': 'Right side' }
-    )
-    expect(wrapper.text()).toContain('Left side')
-    expect(wrapper.text()).toContain('Right side')
-  })
-
-  it('positions bottom-right when specified', () => {
-    const wrapper = mountPopup({ title: 'T', position: 'bottom-right' })
-    const root = wrapper.find('[role="status"]')
-    expect(root.attributes('data-position')).toBe('bottom-right')
-  })
-})
--- a/src/components/common/NotificationPopup.vue
+++ b/src/components/common/NotificationPopup.vue
@@ -1,87 +0,0 @@
-<template>
-  <div
-    role="status"
-    :data-position="position"
-    :class="
-      cn(
-        'pointer-events-auto absolute z-1000 flex max-h-96 w-96 flex-col rounded-lg border border-border-default bg-base-background shadow-interface',
-        position === 'bottom-left' && 'bottom-4 left-4',
-        position === 'bottom-right' && 'right-4 bottom-4'
-      )
-    "
-  >
-    <div class="flex min-h-0 flex-1 flex-col gap-4 p-4">
-      <div class="flex items-center gap-4">
-        <div
-          v-if="icon"
-          class="flex shrink-0 items-center justify-center rounded-lg bg-primary-background-hover p-3"
-        >
-          <i :class="cn('size-4 text-white', icon)" />
-        </div>
-        <div class="flex flex-1 flex-col gap-1">
-          <div class="text-sm leading-[1.429] font-normal text-base-foreground">
-            {{ title }}
-          </div>
-          <div
-            v-if="subtitle"
-            class="text-sm leading-[1.21] font-normal text-muted-foreground"
-          >
-            {{ subtitle }}
-          </div>
-        </div>
-        <Button
-          v-if="showClose"
-          class="size-6 shrink-0 self-start"
-          size="icon-sm"
-          variant="muted-textonly"
-          :aria-label="$t('g.close')"
-          @click="emit('close')"
-        >
-          <i class="icon-[lucide--x] size-3.5" />
-        </Button>
-      </div>
-
-      <div
-        v-if="$slots.default"
-        class="min-h-0 flex-1 overflow-y-auto text-sm text-muted-foreground"
-      >
-        <slot />
-      </div>
-    </div>
-
-    <div
-      v-if="$slots['footer-start'] || $slots['footer-end']"
-      class="flex items-center justify-between px-4 pb-4"
-    >
-      <div>
-        <slot name="footer-start" />
-      </div>
-      <div class="flex items-center gap-4">
-        <slot name="footer-end" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-import { cn } from '@/utils/tailwindUtil'
-
-const {
-  icon,
-  title,
-  subtitle,
-  showClose = false,
-  position = 'bottom-left'
-} = defineProps<{
-  icon?: string
-  title: string
-  subtitle?: string
-  showClose?: boolean
-  position?: 'bottom-left' | 'bottom-right'
-}>()
-
-const emit = defineEmits<{
-  close: []
-}>()
-</script>
--- a/src/components/dialog/content/SignInContent.vue
+++ b/src/components/dialog/content/SignInContent.vue
@@ -186,13 +186,13 @@ const toggleState = () => {
 }

 const signInWithGoogle = async () => {
-  if (await authActions.signInWithGoogle({ isNewUser: !isSignIn.value })) {
+  if (await authActions.signInWithGoogle()) {
    onSuccess()
  }
 }

 const signInWithGithub = async () => {
-  if (await authActions.signInWithGithub({ isNewUser: !isSignIn.value })) {
+  if (await authActions.signInWithGithub()) {
    onSuccess()
  }
 }
--- 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/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -97,7 +97,6 @@

  <NodeTooltip v-if="tooltipEnabled" />
  <NodeSearchboxPopover ref="nodeSearchboxPopoverRef" />
-  <VueNodeSwitchPopup />

  <!-- Initialize components after comfyApp is ready. useAbsolutePosition requires
  canvasStore.canvas to be initialized. -->
@@ -129,7 +128,6 @@ import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitter
 import TopMenuSection from '@/components/TopMenuSection.vue'
 import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
 import AppBuilder from '@/components/builder/AppBuilder.vue'
-import VueNodeSwitchPopup from '@/components/builder/VueNodeSwitchPopup.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import DomWidgets from '@/components/graph/DomWidgets.vue'
 import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
@@ -195,7 +193,6 @@ import { forEachNode } from '@/utils/graphTraversalUtil'
 import SelectionRectangle from './SelectionRectangle.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { useCreateWorkspaceUrlLoader } from '@/platform/workspace/composables/useCreateWorkspaceUrlLoader'
 import { useInviteUrlLoader } from '@/platform/workspace/composables/useInviteUrlLoader'

 const { t } = useI18n()
@@ -456,9 +453,8 @@ useEventListener(
 const comfyAppReady = ref(false)
 const workflowPersistence = useWorkflowPersistence()
 const { flags } = useFeatureFlags()
-// Set up URL loaders during setup phase so useRoute/useRouter work correctly
+// Set up invite loader during setup phase so useRoute/useRouter work correctly
 const inviteUrlLoader = isCloud ? useInviteUrlLoader() : null
-const createWorkspaceUrlLoader = isCloud ? useCreateWorkspaceUrlLoader() : null
 useCanvasDrop(canvasRef)
 useLitegraphSettings()
 useNodeBadge()
@@ -578,18 +574,6 @@ onMounted(async () => {
    await inviteUrlLoader.loadInviteFromUrl()
  }

-  // Open create workspace dialog from URL if present (e.g., ?create_workspace=1)
-  if (createWorkspaceUrlLoader && flags.teamWorkspacesEnabled) {
-    try {
-      await createWorkspaceUrlLoader.loadCreateWorkspaceFromUrl()
-    } catch (error) {
-      console.error(
-        '[GraphCanvas] Failed to load create workspace from URL:',
-        error
-      )
-    }
-  }
-
  // Initialize release store to fetch releases from comfy-api (fire-and-forget)
  const { useReleaseStore } =
    await import('@/platform/updates/common/releaseStore')
--- 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/helpcenter/HelpCenterPopups.vue
+++ b/src/components/helpcenter/HelpCenterPopups.vue
@@ -17,7 +17,11 @@
  <!-- Release Notification Toast positioned within canvas area -->
  <Teleport to="#graph-canvas-container">
    <ReleaseNotificationToast
-      :position="sidebarLocation === 'right' ? 'bottom-right' : 'bottom-left'"
+      :class="{
+        'sidebar-left': sidebarLocation === 'left',
+        'sidebar-right': sidebarLocation === 'right',
+        'small-sidebar': isSmall
+      }"
    />
  </Teleport>

--- 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/loader/Loader.stories.ts
+++ b/src/components/loader/Loader.stories.ts
@@ -14,11 +14,6 @@ const meta: Meta<typeof Loader> = {
      control: 'select',
      options: ['sm', 'md', 'lg'],
      description: 'Spinner size: sm (16px), md (32px), lg (48px)'
-    },
-    variant: {
-      control: 'select',
-      options: ['loader', 'loader-circle'],
-      description: 'The type of loader displayed'
    }
  }
 }
--- a/src/components/queue/JobHistoryActionsMenu.test.ts
+++ b/src/components/queue/JobHistoryActionsMenu.test.ts
@@ -52,11 +52,17 @@ vi.mock('@/stores/workspace/sidebarTabStore', () => ({
  useSidebarTabStore: () => mockSidebarTabStore
 }))

+const BaseTooltipStub = {
+  template: '<slot />'
+}
+
 const mountMenu = () =>
  mount(JobHistoryActionsMenu, {
    global: {
      plugins: [i18n],
-      directives: { tooltip: () => {} }
+      stubs: {
+        BaseTooltip: BaseTooltipStub
+      }
    }
  })

--- a/src/components/queue/JobHistoryActionsMenu.vue
+++ b/src/components/queue/JobHistoryActionsMenu.vue
@@ -2,16 +2,17 @@
  <div class="flex items-center gap-1">
    <Popover :show-arrow="false">
      <template #button>
-        <Button
-          v-tooltip.top="moreTooltipConfig"
-          variant="textonly"
-          size="icon"
-          :aria-label="t('sideToolbar.queueProgressOverlay.moreOptions')"
-        >
-          <i
-            class="icon-[lucide--more-horizontal] block size-4 leading-none text-text-secondary"
-          />
-        </Button>
+        <BaseTooltip :text="t('g.more')" side="top">
+          <Button
+            variant="textonly"
+            size="icon"
+            :aria-label="t('sideToolbar.queueProgressOverlay.moreOptions')"
+          >
+            <i
+              class="icon-[lucide--more-horizontal] block size-4 leading-none text-text-secondary"
+            />
+          </Button>
+        </BaseTooltip>
      </template>
      <template #default="{ close }">
        <div class="flex min-w-56 flex-col items-stretch font-inter">
@@ -95,7 +96,7 @@ import { useI18n } from 'vue-i18n'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import BaseTooltip from '@/components/ui/tooltip/BaseTooltip.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
@@ -108,7 +109,6 @@ const { t } = useI18n()
 const settingStore = useSettingStore()
 const sidebarTabStore = useSidebarTabStore()

-const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
 const { isQueuePanelV2Enabled, isRunProgressBarEnabled } =
  useQueueFeatureFlags()
 const showClearHistoryAction = computed(() => !isCloud)
--- a/src/components/queue/QueueOverlayActive.test.ts
+++ b/src/components/queue/QueueOverlayActive.test.ts
@@ -1,9 +1,8 @@
 import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'

 import QueueOverlayActive from './QueueOverlayActive.vue'
-import * as tooltipConfig from '@/composables/useTooltipConfig'

 const i18n = createI18n({
  legacy: false,
@@ -27,11 +26,6 @@ const i18n = createI18n({
  }
 })

-const tooltipDirectiveStub = {
-  mounted: vi.fn(),
-  updated: vi.fn()
-}
-
 const SELECTORS = {
  interruptAllButton: 'button[aria-label="Interrupt all running jobs"]',
  clearQueuedButton: 'button[aria-label="Clear queued"]',
@@ -43,6 +37,10 @@ const COPY = {
  viewAllJobs: 'View all jobs'
 }

+const BaseTooltipStub = {
+  template: '<slot />'
+}
+
 const mountComponent = (props: Record<string, unknown> = {}) =>
  mount(QueueOverlayActive, {
    props: {
@@ -58,8 +56,8 @@ const mountComponent = (props: Record<string, unknown> = {}) =>
    },
    global: {
      plugins: [i18n],
-      directives: {
-        tooltip: tooltipDirectiveStub
+      stubs: {
+        BaseTooltip: BaseTooltipStub
      }
    }
  })
@@ -113,13 +111,4 @@ describe('QueueOverlayActive', () => {
    expect(wrapper.find(SELECTORS.interruptAllButton).exists()).toBe(false)
    expect(wrapper.find(SELECTORS.clearQueuedButton).exists()).toBe(false)
  })
-
-  it('builds tooltip configs with translated strings', () => {
-    const spy = vi.spyOn(tooltipConfig, 'buildTooltipConfig')
-
-    mountComponent()
-
-    expect(spy).toHaveBeenCalledWith('Cancel job')
-    expect(spy).toHaveBeenCalledWith('Clear queue')
-  })
 })
--- a/src/components/queue/QueueOverlayActive.vue
+++ b/src/components/queue/QueueOverlayActive.vue
@@ -42,18 +42,22 @@
              t('sideToolbar.queueProgressOverlay.running')
            }}</span>
          </span>
-          <Button
+          <BaseTooltip
            v-if="runningCount > 0"
-            v-tooltip.top="cancelJobTooltip"
-            variant="destructive"
-            size="icon"
-            :aria-label="t('sideToolbar.queueProgressOverlay.interruptAll')"
-            @click="$emit('interruptAll')"
+            :text="t('sideToolbar.queueProgressOverlay.cancelJobTooltip')"
+            side="top"
          >
-            <i
-              class="icon-[lucide--x] block size-4 leading-none text-text-primary"
-            />
-          </Button>
+            <Button
+              variant="destructive"
+              size="icon"
+              :aria-label="t('sideToolbar.queueProgressOverlay.interruptAll')"
+              @click="$emit('interruptAll')"
+            >
+              <i
+                class="icon-[lucide--x] block size-4 leading-none text-text-primary"
+              />
+            </Button>
+          </BaseTooltip>
        </div>

        <div class="flex items-center gap-2">
@@ -63,18 +67,22 @@
              t('sideToolbar.queueProgressOverlay.queuedSuffix')
            }}</span>
          </span>
-          <Button
+          <BaseTooltip
            v-if="queuedCount > 0"
-            v-tooltip.top="clearQueueTooltip"
-            variant="destructive"
-            size="icon"
-            :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
-            @click="$emit('clearQueued')"
+            :text="t('sideToolbar.queueProgressOverlay.clearQueueTooltip')"
+            side="top"
          >
-            <i
-              class="icon-[lucide--list-x] block size-4 leading-none text-text-primary"
-            />
-          </Button>
+            <Button
+              variant="destructive"
+              size="icon"
+              :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
+              @click="$emit('clearQueued')"
+            >
+              <i
+                class="icon-[lucide--list-x] block size-4 leading-none text-text-primary"
+              />
+            </Button>
+          </BaseTooltip>
        </div>
      </div>

@@ -91,11 +99,10 @@
 </template>

 <script setup lang="ts">
-import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

 import Button from '@/components/ui/button/Button.vue'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import BaseTooltip from '@/components/ui/tooltip/BaseTooltip.vue'

 defineProps<{
  totalProgressStyle: Record<string, string>
@@ -115,10 +122,4 @@ defineEmits<{
 }>()

 const { t } = useI18n()
-const cancelJobTooltip = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.cancelJobTooltip'))
-)
-const clearQueueTooltip = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.clearQueueTooltip'))
-)
 </script>
--- a/src/components/queue/QueueOverlayHeader.test.ts
+++ b/src/components/queue/QueueOverlayHeader.test.ts
@@ -48,11 +48,9 @@ vi.mock('@/stores/workspace/sidebarTabStore', () => ({
 }))

 import QueueOverlayHeader from './QueueOverlayHeader.vue'
-import * as tooltipConfig from '@/composables/useTooltipConfig'

-const tooltipDirectiveStub = {
-  mounted: vi.fn(),
-  updated: vi.fn()
+const BaseTooltipStub = {
+  template: '<slot />'
 }

 const mountHeader = (props = {}) =>
@@ -64,7 +62,9 @@ const mountHeader = (props = {}) =>
    },
    global: {
      plugins: [i18n],
-      directives: { tooltip: tooltipDirectiveStub }
+      stubs: {
+        BaseTooltip: BaseTooltipStub
+      }
    }
  })

@@ -105,14 +105,11 @@ describe('QueueOverlayHeader', () => {
  })

  it('emits clear history from the menu', async () => {
-    const spy = vi.spyOn(tooltipConfig, 'buildTooltipConfig')
-
    const wrapper = mountHeader()

    expect(wrapper.find('button[aria-label="More options"]').exists()).toBe(
      true
    )
-    expect(spy).toHaveBeenCalledWith('More')

    const clearHistoryButton = wrapper.get(
      '[data-testid="clear-history-action"]'
--- a/src/components/queue/QueueOverlayHeader.vue
+++ b/src/components/queue/QueueOverlayHeader.vue
@@ -11,28 +11,31 @@
      <span :class="{ 'opacity-50': queuedCount === 0 }">{{
        t('sideToolbar.queueProgressOverlay.clearQueueTooltip')
      }}</span>
-      <Button
-        v-tooltip.top="clearAllJobsTooltip"
-        variant="destructive"
-        size="icon"
-        :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
-        :disabled="queuedCount === 0"
-        @click="$emit('clearQueued')"
+      <BaseTooltip
+        :text="t('sideToolbar.queueProgressOverlay.clearAllJobsTooltip')"
+        side="top"
      >
-        <i class="icon-[lucide--list-x] size-4" />
-      </Button>
+        <Button
+          variant="destructive"
+          size="icon"
+          :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
+          :disabled="queuedCount === 0"
+          @click="$emit('clearQueued')"
+        >
+          <i class="icon-[lucide--list-x] size-4" />
+        </Button>
+      </BaseTooltip>
    </div>
    <JobHistoryActionsMenu @clear-history="$emit('clearHistory')" />
  </div>
 </template>

 <script setup lang="ts">
-import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

 import JobHistoryActionsMenu from '@/components/queue/JobHistoryActionsMenu.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import BaseTooltip from '@/components/ui/tooltip/BaseTooltip.vue'

 defineProps<{
  headerTitle: string
@@ -45,7 +48,4 @@ defineEmits<{
 }>()

 const { t } = useI18n()
-const clearAllJobsTooltip = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.clearAllJobsTooltip'))
-)
 </script>
--- a/src/components/queue/job/JobFilterActions.vue
+++ b/src/components/queue/job/JobFilterActions.vue
@@ -13,18 +13,22 @@
    >
      <Popover :show-arrow="false">
        <template #button>
-          <Button
-            v-tooltip.top="filterTooltipConfig"
-            variant="secondary"
-            size="icon"
-            :aria-label="t('sideToolbar.queueProgressOverlay.filterJobs')"
+          <BaseTooltip
+            :text="t('sideToolbar.queueProgressOverlay.filterBy')"
+            side="top"
          >
-            <i class="icon-[lucide--list-filter] size-4" />
-            <span
-              v-if="selectedWorkflowFilter !== 'all'"
-              class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
-            />
-          </Button>
+            <Button
+              variant="secondary"
+              size="icon"
+              :aria-label="t('sideToolbar.queueProgressOverlay.filterJobs')"
+            >
+              <i class="icon-[lucide--list-filter] size-4" />
+              <span
+                v-if="selectedWorkflowFilter !== 'all'"
+                class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
+              />
+            </Button>
+          </BaseTooltip>
        </template>
        <template #default="{ close }">
          <div class="flex min-w-48 flex-col items-stretch">
@@ -62,18 +66,22 @@
      </Popover>
      <Popover :show-arrow="false">
        <template #button>
-          <Button
-            v-tooltip.top="sortTooltipConfig"
-            variant="secondary"
-            size="icon"
-            :aria-label="t('sideToolbar.queueProgressOverlay.sortJobs')"
+          <BaseTooltip
+            :text="t('sideToolbar.queueProgressOverlay.sortBy')"
+            side="top"
          >
-            <i class="icon-[lucide--arrow-up-down] size-4" />
-            <span
-              v-if="selectedSortMode !== 'mostRecent'"
-              class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
-            />
-          </Button>
+            <Button
+              variant="secondary"
+              size="icon"
+              :aria-label="t('sideToolbar.queueProgressOverlay.sortJobs')"
+            >
+              <i class="icon-[lucide--arrow-up-down] size-4" />
+              <span
+                v-if="selectedSortMode !== 'mostRecent'"
+                class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
+              />
+            </Button>
+          </BaseTooltip>
        </template>
        <template #default="{ close }">
          <div class="flex min-w-48 flex-col items-stretch">
@@ -98,16 +106,20 @@
          </div>
        </template>
      </Popover>
-      <Button
+      <BaseTooltip
        v-if="showAssetsAction"
-        v-tooltip.top="showAssetsTooltipConfig"
-        variant="secondary"
-        size="icon"
-        :aria-label="t('sideToolbar.queueProgressOverlay.showAssetsPanel')"
-        @click="emit('showAssets')"
+        :text="t('sideToolbar.queueProgressOverlay.showAssets')"
+        side="top"
      >
-        <i class="icon-[comfy--image-ai-edit] size-4" />
-      </Button>
+        <Button
+          variant="secondary"
+          size="icon"
+          :aria-label="t('sideToolbar.queueProgressOverlay.showAssetsPanel')"
+          @click="emit('showAssets')"
+        >
+          <i class="icon-[comfy--image-ai-edit] size-4" />
+        </Button>
+      </BaseTooltip>
    </div>
  </div>
 </template>
@@ -121,7 +133,7 @@ import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { jobSortModes } from '@/composables/queue/useJobList'
 import type { JobSortMode } from '@/composables/queue/useJobList'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import BaseTooltip from '@/components/ui/tooltip/BaseTooltip.vue'

 const {
  hideShowAssetsAction = false,
@@ -148,15 +160,6 @@ const emit = defineEmits<{

 const { t } = useI18n()

-const filterTooltipConfig = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.filterBy'))
-)
-const sortTooltipConfig = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.sortBy'))
-)
-const showAssetsTooltipConfig = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.showAssets'))
-)
 const showAssetsAction = computed(() => !hideShowAssetsAction)
 const searchPlaceholderText = computed(
  () => searchPlaceholder ?? t('sideToolbar.queueProgressOverlay.searchJobs')
--- a/src/components/queue/job/JobFiltersBar.test.ts
+++ b/src/components/queue/job/JobFiltersBar.test.ts
@@ -54,6 +54,10 @@ const i18n = createI18n({
  }
 })

+const BaseTooltipStub = {
+  template: '<slot />'
+}
+
 describe('JobFiltersBar', () => {
  it('emits showAssets when the assets icon button is clicked', async () => {
    const wrapper = mount(JobFiltersBar, {
@@ -65,7 +69,9 @@ describe('JobFiltersBar', () => {
      },
      global: {
        plugins: [i18n],
-        directives: { tooltip: () => undefined }
+        stubs: {
+          BaseTooltip: BaseTooltipStub
+        }
      }
    })

@@ -88,7 +94,9 @@ describe('JobFiltersBar', () => {
      },
      global: {
        plugins: [i18n],
-        directives: { tooltip: () => undefined }
+        stubs: {
+          BaseTooltip: BaseTooltipStub
+        }
      }
    })

--- a/src/components/queue/job/QueueJobItem.vue
+++ b/src/components/queue/job/QueueJobItem.vue
@@ -124,30 +124,38 @@
            key="actions"
            class="inline-flex items-center gap-2 pr-1"
          >
-            <Button
+            <BaseTooltip
              v-if="state === 'failed' && computedShowClear"
-              v-tooltip.top="deleteTooltipConfig"
-              variant="destructive"
-              size="icon"
-              :aria-label="t('g.delete')"
-              @click.stop="onDeleteClick"
+              :text="t('g.delete')"
+              side="top"
            >
-              <i class="icon-[lucide--trash-2] size-4" />
-            </Button>
-            <Button
+              <Button
+                variant="destructive"
+                size="icon"
+                :aria-label="t('g.delete')"
+                @click.stop="onDeleteClick"
+              >
+                <i class="icon-[lucide--trash-2] size-4" />
+              </Button>
+            </BaseTooltip>
+            <BaseTooltip
              v-else-if="
                state !== 'completed' &&
                state !== 'running' &&
                computedShowClear
              "
-              v-tooltip.top="cancelTooltipConfig"
-              variant="destructive"
-              size="icon"
-              :aria-label="t('g.cancel')"
-              @click.stop="onCancelClick"
+              :text="t('g.cancel')"
+              side="top"
            >
-              <i class="icon-[lucide--x] size-4" />
-            </Button>
+              <Button
+                variant="destructive"
+                size="icon"
+                :aria-label="t('g.cancel')"
+                @click.stop="onCancelClick"
+              >
+                <i class="icon-[lucide--x] size-4" />
+              </Button>
+            </BaseTooltip>
            <Button
              v-else-if="state === 'completed'"
              variant="textonly"
@@ -155,32 +163,40 @@
              @click.stop="emit('view')"
              >{{ t('menuLabels.View') }}</Button
            >
-            <Button
+            <BaseTooltip
              v-if="showMenu !== undefined ? showMenu : true"
-              v-tooltip.top="moreTooltipConfig"
-              variant="textonly"
-              size="icon-sm"
-              :aria-label="t('g.more')"
-              @click.stop="emit('menu', $event)"
+              :text="t('g.more')"
+              side="top"
            >
-              <i class="icon-[lucide--more-horizontal] size-4" />
-            </Button>
+              <Button
+                variant="textonly"
+                size="icon-sm"
+                :aria-label="t('g.more')"
+                @click.stop="emit('menu', $event)"
+              >
+                <i class="icon-[lucide--more-horizontal] size-4" />
+              </Button>
+            </BaseTooltip>
          </div>
          <div v-else-if="state !== 'running'" key="secondary" class="pr-2">
            <slot name="secondary">{{ rightText }}</slot>
          </div>
        </Transition>
        <!-- Running job cancel button - always visible -->
-        <Button
+        <BaseTooltip
          v-if="state === 'running' && computedShowClear"
-          v-tooltip.top="cancelTooltipConfig"
-          variant="destructive"
-          size="icon"
-          :aria-label="t('g.cancel')"
-          @click.stop="onCancelClick"
+          :text="t('g.cancel')"
+          side="top"
        >
-          <i class="icon-[lucide--x] size-4" />
-        </Button>
+          <Button
+            variant="destructive"
+            size="icon"
+            :aria-label="t('g.cancel')"
+            @click.stop="onCancelClick"
+          >
+            <i class="icon-[lucide--x] size-4" />
+          </Button>
+        </BaseTooltip>
      </div>
    </div>
  </div>
@@ -195,7 +211,7 @@ import { getHoverPopoverPosition } from '@/components/queue/job/getHoverPopoverP
 import QueueAssetPreview from '@/components/queue/job/QueueAssetPreview.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useProgressBarBackground } from '@/composables/useProgressBarBackground'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import BaseTooltip from '@/components/ui/tooltip/BaseTooltip.vue'
 import type { JobState } from '@/types/queue'
 import { iconForJobState } from '@/utils/queueDisplay'
 import { cn } from '@/utils/tailwindUtil'
@@ -247,10 +263,6 @@ const {
  progressPercentStyle
 } = useProgressBarBackground()

-const cancelTooltipConfig = computed(() => buildTooltipConfig(t('g.cancel')))
-const deleteTooltipConfig = computed(() => buildTooltipConfig(t('g.delete')))
-const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
-
 const rowRef = ref<HTMLDivElement | null>(null)
 const showDetails = computed(() => activeDetailsId === jobId)

--- 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/components/ui/button/button.variants.ts
+++ b/src/components/ui/button/button.variants.ts
@@ -19,7 +19,6 @@ export const buttonVariants = cva({
        'bg-transparent text-muted-foreground hover:bg-secondary-background-hover',
      'destructive-textonly':
        'bg-transparent text-destructive-background hover:bg-destructive-background/10',
-      link: 'bg-transparent text-muted-foreground hover:text-base-foreground',
      'overlay-white': 'bg-white text-gray-600 hover:bg-white/90',
      base: 'bg-base-background text-base-foreground hover:bg-secondary-background-hover',
      gradient:
@@ -52,7 +51,6 @@ const variants = [
  'textonly',
  'muted-textonly',
  'destructive-textonly',
-  'link',
  'base',
  'overlay-white',
  'gradient'
--- a/src/components/ui/tooltip/BaseTooltip.vue
+++ b/src/components/ui/tooltip/BaseTooltip.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+import {
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  TooltipRoot,
+  TooltipTrigger
+} from 'reka-ui'
+
+import type { TooltipVariants } from '@/components/ui/tooltip/tooltip.variants'
+import { tooltipVariants } from '@/components/ui/tooltip/tooltip.variants'
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  text = '',
+  side = 'top',
+  sideOffset = 4,
+  size = 'small',
+  delayDuration,
+  disabled = false,
+  class: className
+} = defineProps<{
+  text?: string
+  side?: 'top' | 'bottom' | 'left' | 'right'
+  sideOffset?: number
+  size?: NonNullable<TooltipVariants['size']>
+  delayDuration?: number
+  disabled?: boolean
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <TooltipRoot :delay-duration="delayDuration" :disabled="disabled || !text">
+    <TooltipTrigger as-child>
+      <slot />
+    </TooltipTrigger>
+    <TooltipPortal>
+      <TooltipContent
+        :side="side"
+        :side-offset="sideOffset"
+        :class="cn(tooltipVariants({ size }), className)"
+      >
+        {{ text }}
+        <TooltipArrow
+          :width="8"
+          :height="5"
+          class="fill-node-component-tooltip-surface"
+        />
+      </TooltipContent>
+    </TooltipPortal>
+  </TooltipRoot>
+</template>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
dante01yoon	82a0b59367	refactor: migrate node tooltips from PrimeVue to BaseTooltip Replace PrimeVue v-tooltip directive with Reka UI BaseTooltip component in NodeHeader, InputSlot, OutputSlot, and NodeWidgets. Remove PrimeVue-specific tooltip config (createTooltipConfig, hideTooltipsGlobally, tooltipsTemporarilyDisabled, global event listeners) from useNodeTooltips composable, keeping only text-resolution functions and tooltipsEnabled. Add tooltipDelay computed from LiteGraph.Node.TooltipDelay setting.	2026-03-24 10:59:32 +09:00
dante01yoon	f16214a719	refactor: migrate buildTooltipConfig consumers to BaseTooltip Replace all PrimeVue v-tooltip directive usages that relied on buildTooltipConfig with the new Reka UI BaseTooltip component. Delete the now-unused useTooltipConfig composable.	2026-03-22 08:13:52 +09:00
dante01yoon	ae07b4d3f8	refactor: align tooltip variants with Figma design system Replace variant prop (default/small/large) with size prop (small/large) to match Figma component properties. Remove default variant that was replicating PrimeVue Aura styling. Extract shared styles into cva base.	2026-03-21 21:36:22 +09:00
dante01yoon	2a0daf20da	refactor: remove Storybook stories from foundation PR	2026-03-21 21:30:39 +09:00
dante01yoon	356a291d09	feat: add BaseTooltip component using Reka UI Add foundational tooltip component with three variants (default, small, large), four positioning sides, and configurable delay/disabled state. Wrap App.vue in TooltipProvider for app-wide tooltip support. Include Storybook stories for all variants, sides, disabled, and long text.	2026-03-21 20:02:36 +09:00